/* === Vision (cinematic, full) — all styles scoped to .vision-section === */

.vision-section{
  /* Palette */
  --vis-bg:#0A0F16;
  --vis-ink:#E9EDF2;
  --vis-muted:#A0AEC0;
  --vis-accent:#58A6FF;
  --vis-accent-2:#8B5CF6;
  --maxw:960px;

  position:relative; overflow:hidden; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(3rem,8vw,6rem) 1.5rem; box-sizing:border-box; color:var(--vis-ink);

  /* Animated gradient */
  background:linear-gradient(135deg,#070C18 0%,#0B1030 45%,#1B0E3A 75%,#0A0F16 100%);
  background-size:600% 600%;
  animation:visionWave 16s ease infinite;
}

#vision-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block}

/* Overlay hues */
.vision-bg-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(160% 120% at 50% 100%, rgba(0,0,0,.55), transparent 65%),
    radial-gradient(90% 60% at 50% 0%, rgba(88,166,255,.10), transparent 60%),
    radial-gradient(80% 50% at 20% 30%, rgba(139,92,246,.08), transparent 60%);
}

.vision-container{max-width:var(--maxw); margin:0 auto; position:relative; z-index:3; text-align:center}

/* Brand */
.vision-logo{margin-bottom:2rem}
.vision-logo img{
  width:clamp(96px,22vw,210px);
  height:auto;
  filter:drop-shadow(0 0 15px rgba(88,166,255,.45));
}

/* Copy */
.vision-title{
  font-size:clamp(2rem,5.2vw,3.8rem);
  font-weight:600; line-height:1.12; margin:0 0 1.1rem;
  text-shadow:0 0 10px rgba(139,92,246,.25);
  text-wrap:balance;
}
.vision-subcopy{
  font-size:clamp(.98rem,1.9vw,1.15rem);
  color:var(--vis-muted);
  line-height:1.7; max-width:760px; margin:0 auto 1.6rem;
  text-wrap:pretty;
}

/* Pillars chips */
.vision-chips{
  display:flex; justify-content:center; gap:.6rem .75rem; flex-wrap:wrap; margin:0 0 2rem
}
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; font-size:.9rem; letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.chip:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.25); background:rgba(255,255,255,.08)}

/* Closing line */
.closing-line{
  font-size:clamp(1.3rem,3vw,2rem);
  font-weight:700; line-height:1.2;
}
.closing-line span{display:block}
.closing-line span:nth-child(2){
  color:var(--vis-accent);
  text-shadow:0 0 20px rgba(88,166,255,.45), 0 0 30px rgba(139,92,246,.25);
}

/* Entrance reveal */
.vision-container > *{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.vision-section.is-visible .vision-logo{opacity:1; transform:none; transition-delay:.05s}
.vision-section.is-visible .vision-title{opacity:1; transform:none; transition-delay:.15s}
.vision-section.is-visible .vision-subcopy{opacity:1; transform:none; transition-delay:.25s}
.vision-section.is-visible .vision-chips{opacity:1; transform:none; transition-delay:.35s}
.vision-section.is-visible .closing-line{opacity:1; transform:none; transition-delay:.45s}

/* Animations */
@keyframes visionWave{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .vision-section{animation:none}
  .vision-container > *{transition:none; opacity:1 !important; transform:none !important}
}

/* Short viewports — keep it one “screen” */
@media (max-height:780px){
  .vision-section{padding:clamp(2rem,6vw,4rem) 1.2rem}
  .vision-logo{margin-bottom:1.2rem}
}

/* ===== Tablet tune (<= 992px) ===== */
@media (max-width:992px){
  .vision-section{min-height:auto; padding:clamp(2.2rem,6vw,3.5rem) 1.25rem}
  .vision-title{font-size:clamp(1.8rem,5.4vw,3rem); margin-bottom:1rem}
  .vision-subcopy{max-width:640px; margin-bottom:1.25rem}
  .chip{padding:.45rem .8rem; font-size:.88rem}
  .closing-line{font-size:clamp(1.25rem,3.2vw,1.7rem)}
  /* Force exactly two lines for the closing line */
  .closing-line span{white-space:nowrap}
}

/* ===== Phone tune (<= 640px) ===== */
@media (max-width:640px){
  .vision-logo img{width:clamp(90px,28vw,150px)}
  .vision-title{font-size:clamp(1.6rem,7vw,2.2rem)}
  .vision-subcopy{font-size:clamp(.95rem,3.8vw,1.02rem); line-height:1.65}
  .vision-chips{gap:.5rem .6rem; margin-bottom:1.5rem}
  .chip{padding:.42rem .76rem; font-size:.86rem}
  .closing-line{font-size:clamp(1.15rem,5.2vw,1.45rem)}
  /* Keep each closing-line span on a single line on phones */
  .closing-line span{white-space:nowrap}
}