@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/poppins-latin-300-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/poppins-latin-800-normal.woff2) format('woff2');}

/* ===========================================================================
   VFO COMING SOON — DESKTOP
   ===========================================================================
   Temporary interim page for THE VFO³ SYSTEM and VFO INSIGHTS.
   Tokens, type scale, button system, nav and footer are the approved VFO
   desktop system. Nothing below invents a new brand colour or a new
   typeface, and nothing below is heavier than SVG + CSS.
   =========================================================================== */

/* ══════════════════ TOKENS ══════════════════ */
:root{
  --red:#EC1B33;
  --teal:#0FA8B9;
  --gold:#F8AE32;
  --orange:#F07521;
  --offwhite:#F7F1EB;
  --black:#090909;

  --line-d:rgba(247,241,235,.13);
  --body-d:#C6C4C1;
  --muted-d:#8C8A88;

  --maxw:1280px;
  --pad:48px;
}

/* ══════════════════ RESET / BASE ══════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
  background:var(--black);
  overflow-x:clip;               /* clip, not hidden — hidden breaks sticky nav */
  scroll-behavior:smooth;
}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;font-weight:400;line-height:1.75;
  background:var(--black);color:var(--offwhite);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1{font-weight:700;line-height:1.1;letter-spacing:-0.02em;}
em{font-style:normal;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--black);padding:12px 20px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ── Type primitives ── */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.4;color:var(--muted-d);
}
.eyebrow .sq{width:9px;height:9px;flex:0 0 9px;background:var(--red);}
.lede{font-size:17px;line-height:1.8;max-width:600px;margin-top:24px;color:var(--body-d);}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;border:1.5px solid transparent;line-height:1;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-red:hover{background:#C9142A;border-color:#C9142A;transform:translateY(-2px);}
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:2px solid currentColor;transition:gap .22s,color .22s;
  color:var(--body-d);
}
.tlink:hover{gap:15px;color:var(--offwhite);}

/* ══════════════════ NAV ══════════════════ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,9,.90);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-d);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:96px;display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.nav-logo img{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:13.5px;font-weight:500;letter-spacing:.06em;
  color:var(--body-d);transition:color .2s;position:relative;padding:6px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .25s;
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{width:100%;}
.nav-links a.btn{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 32px;color:#fff;
}
.nav-links a.btn::after{content:none;}
.nav-links a.btn:hover{color:#fff;}

/* ══════════════════ HERO ══════════════════ */
.hero{
  border-bottom:1px solid var(--line-d);
  padding:84px 0 88px;
}
.hero-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.04fr .96fr;gap:0 72px;align-items:center;
}
.hero-copy h1{
  font-size:clamp(46px,4.6vw,68px);
  text-transform:uppercase;letter-spacing:-0.028em;line-height:1.04;
  margin-top:26px;
}
.hero-copy h1 em{color:var(--red);}

/* ── COMING NEXT signals — not links, not cards, not interactive ── */
.signals{
  margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
}
.sig{padding:22px 30px 22px 0;}
.sig + .sig{padding-left:30px;border-left:1px solid var(--line-d);}
.sig-h{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--offwhite);line-height:1.3;
}
.sig-h .pip{
  width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(15,168,185,.55);
  animation:pip 2.8s ease-out infinite;
}
.sig-h .pip-g{background:var(--gold);box-shadow:0 0 0 0 rgba(248,174,50,.5);animation-delay:1.4s;}
@keyframes pip{
  0%{box-shadow:0 0 0 0 rgba(15,168,185,.5);}
  70%{box-shadow:0 0 0 9px rgba(15,168,185,0);}
  100%{box-shadow:0 0 0 0 rgba(15,168,185,0);}
}
.sig-s{
  margin-top:11px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.9;color:var(--muted-d);
}
.sig-s .ar{display:inline-block;margin:0 8px;color:var(--muted-d);}
.sig-s .dot{display:inline-block;margin:0 6px;color:var(--muted-d);}
.sig-s .s1{color:var(--red);}
.sig-s .s2{color:var(--teal);}
.sig-s .s3{color:var(--gold);}
.sig-s .s4{color:var(--orange);}

.ctas{margin-top:40px;display:flex;align-items:center;gap:38px;flex-wrap:wrap;}

/* ══════════════════ THE NETWORK VISUAL ══════════════════ */
.viz{display:flex;align-items:center;justify-content:center;}
.net{width:100%;max-width:520px;height:auto;display:block;overflow:visible;}

/* --- static (final) state. Every animation below animates TOWARD this, so a
       reader with prefers-reduced-motion sees a fully composed network. --- */
.bed{fill:none;stroke:rgba(247,241,235,.07);stroke-width:1;}
.bed2{fill:none;stroke:rgba(247,241,235,.05);stroke-width:1;stroke-dasharray:.004 .008;}
.spoke{stroke:rgba(247,241,235,.16);stroke-width:1;}
.hair{stroke:rgba(247,241,235,.11);stroke-width:1;}
.route{stroke-width:1.6;stroke-linecap:round;}
.r-red{stroke:rgba(236,27,51,.55);}
.r-teal{stroke:rgba(15,168,185,.62);}
.r-gold{stroke:rgba(248,174,50,.55);}
.r-orange{stroke:rgba(240,117,33,.5);}
.way-g{transform-box:fill-box;transform-origin:center;}
.way{fill:var(--offwhite);opacity:.5;transform-box:fill-box;transform-origin:center;}
.sat{fill:none;stroke:rgba(247,241,235,.34);stroke-width:1.4;transform-box:fill-box;transform-origin:center;}
.node{transform-box:fill-box;transform-origin:center;}
.node .halo{fill:none;stroke-width:1.4;opacity:.42;transform-box:fill-box;transform-origin:center;}
.node .core{stroke:none;}
.n-red    .halo{stroke:var(--red);}    .n-red    .core{fill:var(--red);}
.n-teal   .halo{stroke:var(--teal);}   .n-teal   .core{fill:var(--teal);}
.n-gold   .halo{stroke:var(--gold);}   .n-gold   .core{fill:var(--gold);}
.n-orange .halo{stroke:var(--orange);} .n-orange .core{fill:var(--orange);}
.hub{transform-box:fill-box;transform-origin:center;}
.hub-fill{fill:#0B0B0D;}
.hub-ring{fill:none;stroke:var(--offwhite);stroke-width:1.6;opacity:.85;}
.hub-pulse{fill:none;stroke:var(--offwhite);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;}
.hub-t{
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;letter-spacing:.16em;
  fill:var(--offwhite);
}
.pk{opacity:0;}                        /* packets exist only while animating */

/* --- build sequence: the network assembles itself once, on load --- */
@keyframes draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes pop{from{opacity:0;transform:scale(.2);}60%{opacity:1;transform:scale(1.18);}to{opacity:1;transform:scale(1);}}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}

.bed,.bed2,.spoke,.hair,.route,.hub-ring{
  stroke-dasharray:1;stroke-dashoffset:0;
  animation:draw 1.1s cubic-bezier(.4,0,.2,1) backwards;
}
.bed2{stroke-dasharray:.004 .008;animation-name:fadein;}
.node,.way-g,.sat{animation:pop .62s cubic-bezier(.2,.9,.3,1.3) backwards;}
.hub-fill,.hub-t{animation:fadein .7s ease backwards;}

.b0{animation-delay:.10s;}
.b1,.b1 *{animation-delay:.32s;}
.b2,.b2 *{animation-delay:.95s;}
.b3,.b3 *{animation-delay:1.55s;}
.b4,.b4 *{animation-delay:2.15s;}
.b5,.b5 *{animation-delay:2.75s;}
.b6{animation-delay:3.30s;}
.b7{animation-delay:3.85s;}

/* --- steady state: information keeps moving --- */

/* the loop: Strategy → Execution → Intelligence → Better Strategy → Strategy */
@keyframes loop{
  0%  {transform:translate(260px,92px); opacity:0;}
  4%  {opacity:1;}
  25% {transform:translate(428px,260px);opacity:1;}
  50% {transform:translate(260px,428px);opacity:1;}
  75% {transform:translate(92px,260px); opacity:1;}
  96% {opacity:1;}
  100%{transform:translate(260px,92px); opacity:0;}
}
.pk-loop{fill:var(--teal);animation:loop 9.6s linear 4.2s infinite;}
.pk-loop2{fill:var(--gold);animation:loop 9.6s linear 9.0s infinite;}

/* intelligence returns to the VFO hub */
@keyframes retn{
  0%  {transform:translate(260px,428px);opacity:0;}
  3%  {opacity:1;}
  17% {transform:translate(260px,260px);opacity:1;}
  23% {transform:translate(260px,260px);opacity:0;}
  100%{transform:translate(260px,260px);opacity:0;}
}
.pk-return{fill:var(--gold);animation:retn 9.6s cubic-bezier(.4,0,.3,1) 9.0s infinite;}

/* and leaves again as better strategy */
@keyframes outb{
  0%  {transform:translate(260px,260px);opacity:0;}
  3%  {opacity:1;}
  17% {transform:translate(260px,92px); opacity:1;}
  23% {transform:translate(260px,92px); opacity:0;}
  100%{transform:translate(260px,92px); opacity:0;}
}
.pk-out{fill:var(--red);animation:outb 9.6s cubic-bezier(.4,0,.3,1) 10.9s infinite;}

/* the hub acknowledges what came back */
@keyframes hubpulse{
  0%  {opacity:.5;transform:scale(1);}
  38% {opacity:0;transform:scale(1.55);}
  100%{opacity:0;transform:scale(1.55);}
}
.hub-pulse{animation:hubpulse 9.6s ease-out 10.75s infinite;}

/* nodes breathe; waypoints verify */
@keyframes breathe{0%,100%{opacity:.42;}50%{opacity:.95;}}
.node .halo{animation:breathe 4.4s ease-in-out 4.4s infinite;}
.n-teal   .halo{animation-delay:5.6s;}
.n-gold   .halo{animation-delay:6.8s;}
.n-orange .halo{animation-delay:8.0s;}
@keyframes verify{0%,100%{opacity:.34;transform:scale(1);}50%{opacity:1;transform:scale(1.5);}}
.way.w1{animation:verify 3.6s ease-in-out 4.6s infinite;}
.way.w2{animation:verify 3.6s ease-in-out 5.5s infinite;}
.way.w3{animation:verify 3.6s ease-in-out 6.4s infinite;}
.way.w4{animation:verify 3.6s ease-in-out 7.3s infinite;}

/* ══════════════════ CLOSER ══════════════════ */
.closer{padding:52px 0 58px;}
.closer .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.closer-n{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-d);line-height:1.6;padding-bottom:6px;
}
.closer-l{
  font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.35;
  letter-spacing:.02em;text-transform:uppercase;color:var(--offwhite);
}
.closer-l em{color:var(--teal);}

/* ══════════════════ FOOTER ══════════════════ */
footer{background:var(--black);border-top:1px solid var(--line-d);padding:64px 0 32px;}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:54px;}
.fbrand .flogo{display:inline-block;}
.fbrand img{width:236px;height:auto;}
.tagline{margin-top:24px;}
.tagline .l{
  display:block;font-size:14px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  line-height:1.9;white-space:nowrap;
}
.tagline .r{color:var(--red);}
.tagline .b{color:var(--teal);}
.tagline .g{color:var(--gold);}
.fcol .h{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--offwhite);margin-bottom:20px;
}
.fcontact{
  font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-d);line-height:2.15;
}
.fcontact a{transition:color .2s;}
.fcontact a:hover{color:var(--offwhite);}
.fcol li{margin-bottom:12px;}
.fcol ul a{font-size:14px;color:var(--body-d);transition:color .2s;}
.fcol ul a:hover{color:#fff;}
.legal{
  margin-top:56px;padding-top:26px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);
}

/* ══════════════════ DESKTOP RANGE TUNING ══════════════════ */
@media (max-width:1400px){:root{--pad:40px;}}
@media (max-width:1180px){
  .hero-in{grid-template-columns:1fr;gap:56px 0;}
  .viz{order:2;}
  .net{max-width:440px;}
  .lede{max-width:none;}
}
@media (max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;}
  .nav-links a:not(.btn){display:none;}
  .signals{grid-template-columns:1fr;}
  .sig{padding:20px 0;}
  .sig + .sig{padding-left:0;border-left:0;border-top:1px solid var(--line-d);}
}

/* ══════════════════ MOTION ══════════════════ */
/* prefers-reduced-motion: the network is shown fully built and completely
   still. Nothing is hidden, nothing is mid-animation, no packets travel. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .pk{display:none;}
  .way{opacity:.6;}
  .node .halo{opacity:.6;}
}

/* ===========================================================================
   WIX IFRAME COMPATIBILITY — TECHNICAL ONLY
   ===========================================================================
   The page is embedded cross-origin in a fixed-height Wix iframe. These rules
   change no design decision; they only keep the approved page behaving inside
   that frame. See PART 2 of js/coming-soon.js for the matching logic.
   =========================================================================== */
html{background:var(--black);}

/* In FULL-HEIGHT embed mode the iframe never scrolls internally, so a sticky
   header has nothing to stick to and would sit stranded. Render it statically. */
html.vfo-embed-tall .nav{position:static;}