/* Envisioner, Inc. — envisionerinc.com */

:root{
  --ink:#05070a;
  --ink-2:#090d13;
  --surface:#0e141c;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --text:#e9eff6;
  --text-dim:#93a2b4;
  --text-faint:#5d6b7c;
  --accent:#5ce1d4;
  --blue:#3c6dff;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* An explicit display on an element beats the UA sheet, so hidden needs teeth. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.mark__text,.btn,.eyebrow,.triad__n{font-family:"Space Grotesk","Inter",sans-serif}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#04211f}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){
  .grain{animation:grainShift 700ms steps(2) infinite}
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)}
  100%{transform:translate(2%,2%)}
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem clamp(1.1rem,4vw,2.75rem);
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(5,7,10,.72),rgba(5,7,10,0));
}
.mark{display:flex;align-items:center;gap:.6rem}
.mark__glyph{
  display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:4px;
  font-family:"Space Grotesk",serif;font-size:15px;font-weight:500;
  color:var(--accent);
  background:rgba(92,225,212,.05);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.mark:hover .mark__glyph{border-color:rgba(92,225,212,.45);background:rgba(92,225,212,.1)}
.mark__text{font-size:14px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.topbar__meta{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__img{
  position:absolute;inset:-6%;
  background-image:url("assets/hero.png");
  background-image:image-set(url("assets/hero.webp") type("image/webp"),url("assets/hero.png") type("image/png"));
  background-size:cover;background-position:29% 54%;
  filter:grayscale(.66) contrast(1.06) brightness(.78);
  transform:scale(1.06);
  will-change:transform;
  transition:transform 1.6s var(--ease);
}
.hero__duo{
  position:absolute;inset:0;mix-blend-mode:color;opacity:.48;
  background:linear-gradient(135deg,#0b3b50 0%,#123f6b 45%,#1d6e6a 100%);
}
.hero__grid{
  position:absolute;inset:0;opacity:.4;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 63px,var(--line-soft) 63px 64px),
    repeating-linear-gradient(90deg,transparent 0 63px,var(--line-soft) 63px 64px);
  -webkit-mask-image:radial-gradient(ellipse 78% 66% at 62% 46%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 66% at 62% 46%,#000 25%,transparent 78%);
}
.hero__scan{
  position:absolute;left:0;right:0;height:26vh;top:-30vh;opacity:.5;
  background:linear-gradient(180deg,transparent,rgba(92,225,212,.10) 45%,rgba(150,240,255,.20) 50%,rgba(92,225,212,.10) 55%,transparent);
}
@media (prefers-reduced-motion: no-preference){
  .hero__scan{animation:scan 9s linear infinite}
}
@keyframes scan{0%{top:-30vh}100%{top:105vh}}
.hero__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 98% 86% at 62% 48%,transparent 46%,rgba(5,7,10,.46) 92%),
    linear-gradient(90deg,rgba(5,7,10,.93) 0%,rgba(5,7,10,.76) 24%,rgba(5,7,10,.4) 42%,rgba(5,7,10,.04) 62%,rgba(5,7,10,.18) 100%),
    linear-gradient(180deg,rgba(5,7,10,.82) 0%,rgba(5,7,10,.44) 13%,transparent 33%,transparent 66%,var(--ink) 99%);
}
.hero__inner{
  position:relative;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:7rem clamp(1.1rem,4vw,2.75rem) 5rem;
}
.eyebrow{
  display:flex;align-items:center;gap:.65rem;margin:0 0 1.6rem;
  font-size:11.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px rgba(92,225,212,.65)}
@media (prefers-reduced-motion: no-preference){
  .eyebrow__dot{animation:pulse 2.6s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.wordmark{
  margin:0;max-width:16ch;
  font-size:clamp(2.5rem,6.6vw,5.1rem);
  font-weight:300;line-height:1.03;letter-spacing:-.028em;
  text-wrap:balance;
}
.wordmark .w{display:inline-block;white-space:pre}
@media (prefers-reduced-motion: no-preference){
  .wordmark .w{opacity:0;transform:translateY(.5em);filter:blur(6px);animation:rise .95s var(--ease) forwards;animation-delay:var(--d,0s)}
}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}

/* One word lights as the scan line reaches it. Same 9s period as the sweep;
   script.js offsets the start so the peak lands when the band crosses it. */
.wordmark .pulse{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .wordmark .pulse{animation:wordPulse 9s ease-in-out infinite}
}
@keyframes wordPulse{
  0%,36%,64%,100%{color:var(--text);text-shadow:0 0 0 rgba(92,225,212,0)}
  50%{color:#c2f8f0;text-shadow:0 0 34px rgba(92,225,212,.8),0 0 14px rgba(216,252,247,.55)}
}

.lede{
  margin:1.7rem 0 0;max-width:38ch;
  font-size:clamp(1rem,1.5vw,1.16rem);color:var(--text-dim);
}
.cue{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:3rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--line);
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.cue:hover{color:var(--accent);border-color:rgba(92,225,212,.5)}
@media (prefers-reduced-motion: no-preference){
  .cue svg{animation:bob 2.4s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- band ---------- */
.band{position:relative;background:var(--ink-2);border-top:1px solid var(--line-soft)}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 120% at 18% 0%,rgba(60,109,255,.10),transparent 70%),
             radial-gradient(ellipse 50% 110% at 88% 100%,rgba(92,225,212,.08),transparent 70%);
}
.band__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7.5rem) clamp(1.1rem,4vw,2.75rem)}
.triad{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.triad li{padding-top:1.4rem;border-top:1px solid var(--line)}
.triad__n{display:block;margin-bottom:1rem;font-size:11.5px;letter-spacing:.3em;color:var(--accent)}
.triad h2{margin:0 0 .55rem;font-size:1.5rem;font-weight:400;letter-spacing:-.015em}
.triad p{margin:0;font-size:.95rem;color:var(--text-dim)}

/* ---------- signup ---------- */
.signup{position:relative;border-top:1px solid var(--line-soft);background:var(--ink)}
.signup__inner{max-width:640px;margin:0 auto;padding:clamp(4rem,9vw,7rem) clamp(1.1rem,4vw,2.75rem);text-align:center}
.signup__title{margin:0;font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:300;letter-spacing:-.02em}
.signup__sub{margin:.7rem 0 2.6rem;color:var(--text-dim);font-size:.98rem}
.form__row{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));text-align:left}
.field{display:block}
.field__label{display:block;margin-bottom:.5rem;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.field__label i{font-style:normal;color:var(--accent)}
.field input{
  width:100%;padding:.85rem 1rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:.95rem;font-weight:300;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input::placeholder{color:#43505f}
.field input:hover{border-color:rgba(255,255,255,.2)}
.field input:focus{outline:none;border-color:var(--accent);background:#0b1219;box-shadow:0 0 0 3px rgba(92,225,212,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__error{margin:.9rem 0 0;font-size:.88rem;color:#ff8686;text-align:left}
.form__ok{margin:0;font-size:1.05rem;color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  padding:.85rem 2rem;
  background:transparent;color:var(--text);
  border:1px solid rgba(92,225,212,.4);border-radius:6px;
  font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:rgba(92,225,212,.12);border-color:var(--accent);color:var(--accent)}
.btn[disabled]{opacity:.55;cursor:default}
.form__note{margin:1.5rem 0 0;font-size:.8rem;color:var(--text-faint)}

/* ---------- footer ---------- */
.footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;
  max-width:var(--maxw);margin:0 auto;
  padding:2.2rem clamp(1.1rem,4vw,2.75rem) 3rem;
  border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--text-faint);
}
.footer p{margin:0}
.footer__meta{letter-spacing:.18em;text-transform:uppercase;font-size:11px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .hero__img{transition:none}
}

@media (max-width:620px){
  .topbar{padding:1rem 1.05rem;gap:.5rem}
  .mark{gap:.45rem}
  .mark__glyph{width:26px;height:26px;font-size:13px}
  .mark__text{font-size:11.5px;letter-spacing:.14em}
  .topbar__meta{font-size:9px;letter-spacing:.08em;text-align:right;line-height:1.3}
  .hero__inner{padding-top:8rem}
  .hero__img{background-position:41% 57%}
  .footer{justify-content:center;text-align:center}
}