/* EUTONIX FD website. The family base (Chorix / Social Command mother-base: the #070914 ground, mono labels, two-line
   headlines, tier cards, fixed blurred header) with EUTONIX's own marks carried in (the lotus, the serif headline voice,
   the calmer green). No web fonts, as in the rest of the family. Dark only. */
:root{
  color-scheme:dark;
  --bg:#070914;--bg-soft:#0b1120;--navy:#0c1426;
  --panel:rgba(14,17,33,.72);--panel-solid:#0d1526;--panel-2:#12182a;
  --text:#d6deec;--muted:#8492ab;--muted-2:#4b5872;--ink:#f1f3f0;
  --green:#65c889;--green-2:#9de4af;--green-hot:#39FF6B;--green-deep:#0DC94B;
  --amber:#f5a83c;--amber-2:#ffcf8a;--blue:#8fb6ff;--blue-2:#74a8ff;--red:#FF6A4D;
  --line:rgba(255,255,255,.09);--line-bright:rgba(255,255,255,.16);--line-blue:rgba(135,163,207,.16);
  --radius:24px;--radius-sm:16px;--shadow:0 32px 80px rgba(0,0,0,.36);--max:1180px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background-color:var(--bg)}
body{margin:0;color:var(--text);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 700px at 50% 12%,var(--navy) 0%,var(--bg) 60%) fixed}
a{color:inherit}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:#04170b;padding:8px 12px;border-radius:8px;font-weight:700;z-index:99}
.skip:focus{left:12px}
.container{width:min(calc(100% - 40px),var(--max));margin:0 auto}
.section{padding:118px 0;position:relative}
.section + .section{border-top:1px solid rgba(141,164,202,.09)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#b9f2c9}
.eyebrow i{width:23px;height:23px;border-radius:7px;background:rgba(101,200,137,.14);border:1px solid rgba(101,200,137,.3);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--green-2)}
.section-label{font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#2fdd63;margin-bottom:18px}
h1,h2,h3{margin:0;color:var(--ink)}
.display{font:500 clamp(48px,5.15vw,78px)/.99 var(--sans);letter-spacing:-.03em;margin:22px 0 18px}
.display span,.h2 span{display:block}
.display span.grad,.cta h2 span{background:linear-gradient(100deg,#E8FFEC 2%,#65c889 34%,#0DC94B 64%,#f5a83c 97%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font:400 clamp(34px,4.2vw,56px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 18px}
.h2 span{color:var(--blue);font-family:var(--sans);font-weight:600;letter-spacing:-.035em;font-size:.72em;margin-top:6px}
.seo-h1{font:400 20px/1.45 var(--sans);color:#9db4d8;margin:0 0 16px;max-width:640px}
.lead{font-weight:650;color:#e8eaf4;font-size:17px;line-height:1.6;max-width:600px;margin:0 0 12px}
.lede{color:#a9afc1;font-size:16px;line-height:1.7;max-width:600px;margin:0 0 26px}
p.copy{color:#8e95aa;font-size:16px;line-height:1.75;max-width:620px}

/* header */
.header{position:fixed;inset:0 0 auto 0;height:78px;z-index:50;transition:background .3s,backdrop-filter .3s}
.header.is-scrolled{background:rgba(7,9,20,.76);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.navrow{height:78px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:38px;height:auto}
.brand b{display:block;font:600 13px/1.1 var(--mono);letter-spacing:.06em;color:var(--ink)}
.brand small{display:block;font:500 9px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav{margin-left:auto;display:flex;gap:26px}
.nav a{font-size:14px;color:#aab0c3;text-decoration:none}
.nav a:hover{color:var(--ink)}
.status-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-bright);border-radius:999px;padding:7px 12px;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-2);background:rgba(58,42,16,.5)}
.status-pill i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(245,168,60,.12)}
.menu{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 19px;border-radius:12px;border:1px solid var(--line-bright);background:rgba(255,255,255,.045);color:#e8eaf4;font:650 14px var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.button:hover{transform:translateY(-2px)}
.button.primary{color:#04170b;border-color:transparent;background:linear-gradient(135deg,#65c889,#0DC94B 76%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 34px rgba(13,201,75,.22)}
.button.ghost{background:rgba(255,255,255,.04);border-color:var(--line)}
.button.large{min-height:54px;padding:0 24px;font-size:15px;border-radius:14px}

/* hero */
.hero{position:relative;min-height:860px;padding:168px 0 60px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 420px at 18% 30%,rgba(101,200,137,.16),transparent 70%),
  radial-gradient(520px 380px at 84% 24%,rgba(245,168,60,.11),transparent 70%);filter:blur(40px);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(101,200,137,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(101,200,137,.06) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);pointer-events:none}
.hero .scene{position:absolute;right:-40px;bottom:-60px;width:620px;opacity:.28;-webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at 60% 50%,#000 30%,transparent 78%);pointer-events:none}
.hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:56px;align-items:center}
.hero-proof{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:26px;color:#c9d0de;font-size:14px}
.hero-proof span::before{content:"✓";color:var(--amber);font-weight:700;margin-right:8px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.phone{position:relative;width:390px;height:780px;margin:0 auto;border-radius:44px;background:#000;padding:12px;box-shadow:var(--shadow),inset 0 0 0 2px #2a333d}
.phone iframe{width:100%;height:100%;border:0;border-radius:34px;background:#0b1016}
.phone .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:30px;background:#000;border-radius:0 0 18px 18px;z-index:2}
.phone-caption{margin-top:14px;text-align:center;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.phone-caption a{color:var(--blue-2);text-decoration:none}
.phone-tabs{display:flex;justify-content:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.phone-tabs button{border:1px solid var(--line);background:rgba(255,255,255,.03);color:#aab0c3;border-radius:999px;padding:7px 11px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.phone-tabs button.on{background:rgba(101,200,137,.14);border-color:rgba(101,200,137,.4);color:var(--green-2)}

/* flow rail */
.rail{display:flex;gap:8px;flex-wrap:wrap;margin-top:44px}
.rail a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#aab0c3;text-decoration:none;background:rgba(255,255,255,.02)}
.rail a b{color:var(--green-2);font-weight:600}
.rail a:hover{border-color:var(--line-bright);color:var(--ink)}

/* mechanic sections */
.mechanic{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center}
.mechanic.reverse .mechanic-copy{order:2}
.points{display:grid;gap:12px;margin-top:26px}
.points article{padding:18px;border:1px solid var(--line-blue);border-radius:16px;background:rgba(12,18,31,.68)}
.points article b{display:block;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);margin-bottom:8px}
.points article p{margin:0;color:#a6b3ca;font-size:14px;line-height:1.6}
.frame{border-radius:28px;border:1px solid rgba(143,177,232,.25);box-shadow:0 24px 70px rgba(0,0,0,.46);overflow:hidden;background:#0b1016}
.frame iframe{width:100%;height:720px;border:0;display:block}
.frame-caption{margin-top:10px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* the run */
.run{border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(18,21,39,.72),rgba(10,13,26,.75));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);padding:26px}
.run-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.run-head b{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#2fdd63}
.run-head span{font:500 10px var(--mono);letter-spacing:.1em;color:var(--muted)}
.run ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.run li{display:grid;grid-template-columns:60px 22px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.55}
.run li time{font:500 11px var(--mono);color:var(--muted-2);padding-top:3px}
.run li i{font-style:normal;color:var(--muted)}
.run li.op{color:#e8eaf4}
.run li.op i{color:var(--green-2)}
.run li.caller{color:#c1c8d6}
.run li.caller i{color:var(--amber-2)}
.run li.sys{color:var(--muted);font:500 12px var(--mono)}
.run-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.6}

/* seats table */
.split{width:100%;border-collapse:collapse;font-size:14px;margin-top:26px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.split th,.split td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.split th{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.02)}
.split td:first-child{color:var(--ink);font-weight:600}
.split td:not(:first-child){color:#a6b3ca}
.split tr:last-child td{border-bottom:0}

/* doctrine */
.doctrine{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto;max-width:980px}
.doctrine div{border:1px solid var(--line);border-radius:14px;padding:22px 16px;text-align:center;font:600 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bcd3c5;background:rgba(12,18,31,.6)}
.doctrine div small{display:block;margin-top:10px;font:400 12.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}

/* verbs strip */
.verbs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:26px}
.verbs div{padding:16px 14px;border-right:1px solid var(--line)}
.verbs div:last-child{border-right:0}
.verbs dt{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#a8c7f8;margin:0 0 6px}
.verbs dd{margin:0;font-size:13px;color:#a6b3ca;line-height:1.5}

/* tiers */
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:34px auto 0}
.tier{border:1px solid var(--line);border-radius:20px;padding:28px;background:linear-gradient(145deg,rgba(18,21,39,.72),rgba(10,13,26,.75));position:relative;overflow:hidden}
.tier.lead{border-top:2px solid rgba(101,200,137,.55)}
.tier.lead::before{content:"";position:absolute;inset:-40% -20% auto;height:60%;background:radial-gradient(closest-side,rgba(101,200,137,.14),transparent);pointer-events:none}
.tier.second{border-top:2px solid rgba(245,168,60,.7)}
.tier .kicker{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#b9f2c9}
.tier.second .kicker{color:var(--amber-2)}
.tier h3{font:400 24px var(--serif);margin:12px 0 6px}
.price{display:flex;align-items:baseline;gap:6px;margin:12px 0 10px}
.price sup{font:600 22px var(--sans);color:var(--muted);align-self:flex-start;margin-top:12px}
.price strong{font:600 82px/1 var(--sans);letter-spacing:-.06em;color:var(--ink)}
.price em{font:500 14px var(--mono);color:var(--muted);font-style:normal}
.tier p{color:#a6b3ca;font-size:14px;line-height:1.65}
.tier ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.tier li{font-size:13.5px;color:#c1c8d6}
.tier li::before{content:"✓";color:var(--amber);margin-right:8px;font-weight:700}
.tier .draft{position:absolute;top:18px;right:18px;border:1px solid rgba(245,168,60,.55);color:var(--amber-2);font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:5px 9px}
.notes{max-width:900px;margin:22px auto 0;color:var(--muted);font-size:12.5px;line-height:1.7}

/* trades */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:13px;color:#c1c8d6;background:rgba(255,255,255,.02)}

/* family */
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.family a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:22px;background:linear-gradient(145deg,rgba(18,21,39,.72),rgba(10,13,26,.75))}
.family a:hover{border-color:var(--line-bright)}
.family b{display:block;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-2);margin-bottom:8px}
.family h3{font:400 22px var(--serif);margin:0 0 8px}
.family p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.family em{display:block;margin-top:12px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);font-style:normal}

/* faq */
.faq{max-width:820px;margin:30px auto 0;display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:14px;background:rgba(12,18,31,.6)}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:650;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--green-2);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 20px 18px;color:#a6b3ca;line-height:1.7;font-size:14.5px}

/* cta */
.cta{border-radius:27px;border:1px solid var(--line);padding:70px 40px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(18,21,39,.85),rgba(10,13,26,.9))}
.cta::before,.cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(80px);pointer-events:none}
.cta::before{left:-120px;top:-160px;background:rgba(101,200,137,.18)}
.cta::after{right:-140px;bottom:-200px;background:rgba(245,168,60,.14)}
.cta h2{font:500 clamp(40px,5vw,66px)/1 var(--sans);letter-spacing:-.03em;position:relative}
.cta h2 span{display:block}
.cta p{position:relative;color:#a9afc1;max-width:560px;margin:18px auto 26px;font-size:16px;line-height:1.7}
.cta .actions{justify-content:center;position:relative}

/* footer */
.footer{padding:70px 0 34px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}
.footer .tag{color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:14px;max-width:360px}
.footer .tag a{color:var(--green-2);text-decoration:none}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cols h3{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cols a{display:block;font-size:12px;color:#8590a6;text-decoration:none;margin:6px 0}
.cols a:hover{color:var(--ink)}
.bottom{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 9px var(--mono);letter-spacing:.08em;color:#474e61}
.bottom .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:middle}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* a data table wider than a phone scrolls inside its own region, which the keyboard can reach (WCAG 1.4.10, 2.1.1) */
.table-scroll{overflow-x:auto;margin-top:26px;border-radius:16px}
.table-scroll .split{margin-top:0;min-width:560px}
.table-scroll:focus-visible{outline:2px solid var(--green,#65c889);outline-offset:3px}
/* an embedded demo that holds focus itself (a lazy frame reached before its content has loaded) shows it on its wrapper,
   like any other stop (WCAG 2.4.7); once focus moves to a control inside, that control's own ring takes over */
.frame:focus-within,.phone:focus-within{outline:3px solid var(--green,#65c889);outline-offset:4px}

@media (max-width:980px){
  .hero{min-height:auto;padding-top:120px}
  .hero-layout,.mechanic{grid-template-columns:1fr}
  .mechanic.reverse .mechanic-copy{order:0}
  .nav{display:none}
  .menu{display:inline-flex;margin-left:auto}
  .navrow{gap:14px}
  .status-pill{display:none}
  .header.open .nav{display:grid;position:absolute;top:78px;left:0;right:0;padding:20px;gap:14px;background:rgba(7,9,20,.96);border-bottom:1px solid var(--line)}
  .display{font-size:clamp(40px,10vw,60px)}
  .doctrine,.family,.tier-grid,.footer-grid{grid-template-columns:1fr}
  .verbs{grid-template-columns:1fr 1fr}
  .verbs div:nth-child(2n){border-right:0}
  .verbs div{border-bottom:1px solid var(--line)}
  .phone{width:min(390px,100%);height:min(780px,180vw)}
  .frame iframe{height:560px}
  .section{padding:80px 0}
  .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .navrow > a.button.ghost{display:none}   /* the header link only (the Menu button is a button.ghost too); the hero and the closing section carry the same call to action */
  .price strong{font-size:64px}
  .run li{grid-template-columns:48px 18px 1fr}
  .hero-proof{flex-direction:column;gap:10px}
}