:root{
  /* Nagi dark — neutral ink surfaces + Nagi Gold accent */
  --bg:#0B0E13; --bg2:#0E1219;
  --srf:#131822; --srf2:#181E2A; --srf3:#202839;
  --hair:rgba(231,233,238,.10); --hair2:rgba(231,233,238,.19);
  --tx:#EDEFF4; --tx2:rgba(237,239,244,.78); --tx3:rgba(237,239,244,.54);
  --amber:#C9A866; --ochre:#A9884A; --slate:#7AA0BE; --green:#7FB069;
  --cream:#FAF9F6; --ink:#14171C; --inkmut:#6B7079; --creamline:#E2DFD3;
  --d:"Fraunces","Iowan Old Style",Georgia,serif;
  --s:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;
  --m:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1120px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--tx2);
  font-family:var(--s); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:rgba(201,168,102,.28); color:#fff; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
h1,h2,h3{ font-family:var(--d); color:var(--tx); font-variation-settings:"SOFT" 0,"WONK" 0; margin:0; font-weight:600; }
a{ color:inherit; }
.mono{ font-family:var(--m); }
.lbl{
  font-family:var(--m); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber);
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.lbl::before{ content:""; width:22px; height:1px; background:var(--amber); opacity:.7; }
.lbl .idx{ color:var(--tx3); }
.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}
header,nav,footer,section,.spec,.marquee{ position:relative; z-index:2; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font-family:var(--s); font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:10px; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
  will-change:transform;
}
.btn .ar{ transition:transform .2s ease; }
.btn:hover .ar{ transform:translateX(3px); }
.btn-amber{
  color:#221A08;
  background:linear-gradient(180deg,#D9BC80,#BF9C55);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 10px 30px -8px rgba(201,168,102,.45);
}
.btn-amber:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 18px 42px -10px rgba(201,168,102,.6);
}
.btn-line{ color:var(--tx); border:1px solid var(--hair2); background:rgba(231,233,238,.03); }
.btn-line:hover{ border-color:rgba(201,168,102,.55); color:var(--amber); transform:translateY(-2px); }
.btn-ink{ color:var(--cream); background:var(--ink); box-shadow:0 10px 26px -8px rgba(20,23,28,.5); }
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(20,23,28,.55); }

/* progress + nav */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--ochre),var(--amber)); z-index:99;
}
nav.site{
  position:sticky; top:0; z-index:50;
  background:rgba(11,14,19,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
nav.site .row{
  max-width:var(--maxw); margin:0 auto; padding:15px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.wordmark{
  display:flex; align-items:center; gap:10px;
  font-family:"Inter",var(--s); font-weight:600; font-size:15px; color:var(--tx);
  text-decoration:none; letter-spacing:.2em; white-space:nowrap;
}
.wordmark img{ width:26px; height:26px; display:block; }
.wordmark em{ font-style:normal; color:var(--amber); }
.wordmark .tg{
  font-family:var(--m); font-size:9.5px; letter-spacing:.14em; color:var(--tx3);
  border-left:1px solid var(--hair2); padding-left:10px; margin-left:2px;
  text-transform:uppercase;
}
@media (max-width:640px){ .wordmark .tg{ display:none; } }
nav.site .links{ display:flex; gap:28px; align-items:center; }
nav.site .links a{
  text-decoration:none; font-family:var(--m); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx3);
  transition:color .2s ease;
}
nav.site .links a:hover, nav.site .links a.on{ color:var(--amber); }
nav.site .aula{
  text-decoration:none; font-family:var(--m); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
  border:1px solid rgba(201,168,102,.4); border-radius:8px;
  padding:9px 16px; white-space:nowrap; transition:all .2s ease;
}
nav.site .aula:hover{ background:rgba(201,168,102,.12); border-color:var(--amber); }
@media (max-width:840px){ nav.site .links{ display:none; } }
@media (max-width:480px){
  nav.site .aula{ font-size:10.5px; padding:8px 12px; }
  nav.site .row{ padding:13px 20px; }
}

/* hero shell */
header.hero{ position:relative; overflow:hidden; background:var(--bg); }
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(231,233,238,.033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,233,238,.033) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 75%);
}
.blob{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.b1{
  width:640px; height:640px; top:-260px; right:-140px;
  background:radial-gradient(circle, rgba(201,168,102,.16), transparent 62%);
  animation:drift1 16s ease-in-out infinite alternate;
}
.b2{
  width:560px; height:560px; bottom:-300px; left:-160px;
  background:radial-gradient(circle, rgba(47,75,94,.24), transparent 62%);
  animation:drift2 20s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate(-60px,50px) scale(1.08); } }
@keyframes drift2{ to{ transform:translate(70px,-40px) scale(1.05); } }
.hero-grid{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:84px 28px 96px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
@media (max-width:1040px){
  .hero-grid{ grid-template-columns:1fr; padding:64px 28px 80px; gap:52px; }
}
h1.big{ font-size:clamp(38px, 5vw, 58px); line-height:1.04; letter-spacing:-.02em; max-width:580px; }
h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
h1 .w > span{
  display:inline-block; transform:translateY(112%);
  animation:wordUp .85s cubic-bezier(.2,.65,.25,1) forwards;
}
@keyframes wordUp{ to{ transform:translateY(0); } }
.deck{
  margin:22px 0 0; max-width:470px; font-size:17.5px; line-height:1.6;
  color:var(--tx2); font-weight:400;
  opacity:0; animation:fadeUp .8s .9s ease forwards;
}
.cta{ margin-top:34px; display:flex; gap:13px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .8s 1.1s ease forwards; }
.tags{ margin-top:38px; display:flex; gap:18px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .8s 1.3s ease forwards; }
.tag{
  font-family:var(--m); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx3); display:flex; align-items:center; gap:7px;
}
.tag::before{ content:""; width:4px; height:4px; background:var(--amber); border-radius:1px; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* pipeline artifact */
.pipe{
  position:relative; display:flex; flex-direction:column;
  max-width:440px; width:100%; justify-self:center;
  opacity:0; animation:fadeUp .9s .6s ease forwards;
}
.pcardX{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair2); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04) inset;
  overflow:hidden; position:relative;
}
.pcardX .hd{
  display:flex; align-items:center; gap:8px;
  padding:11px 15px; border-bottom:1px solid var(--hair);
  font-family:var(--m); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3);
}
.dots{ display:flex; gap:5px; margin-right:4px; }
.dots i{ width:8px; height:8px; border-radius:50%; background:rgba(231,233,238,.14); }
.p-term .bd{
  font-family:var(--m); font-size:13px; line-height:1.7; padding:16px;
  color:var(--tx); height:78px; overflow:hidden;
}
.p-term .pr{ color:var(--amber); margin-right:8px; }
.p-term .cur{
  display:inline-block; width:8px; height:15px; background:var(--amber);
  vertical-align:-2px; margin-left:1px; animation:blink .9s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.wire{
  width:2px; height:34px; margin-left:44px; position:relative;
  background:repeating-linear-gradient(180deg, var(--hair2) 0 5px, transparent 5px 10px);
}
.wire i{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px rgba(201,168,102,.9); opacity:0;
}
.wire.on i{ animation:flow 1s ease-in forwards; }
@keyframes flow{ 0%{ opacity:0; top:-6px; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ opacity:0; top:calc(100% + 2px); } }
.p-flow .bd{ padding:18px 16px; }
.nodes{ display:flex; align-items:center; justify-content:space-between; }
.node{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
.node .ic{
  width:44px; height:44px; border-radius:11px;
  background:var(--srf3); border:1px solid var(--hair2);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.node.on .ic{
  border-color:rgba(201,168,102,.65);
  box-shadow:0 0 0 4px rgba(201,168,102,.10), 0 0 22px rgba(201,168,102,.28);
  transform:translateY(-2px);
}
.node .ic svg{ width:20px; height:20px; stroke:var(--tx2); fill:none; stroke-width:1.6; transition:stroke .3s ease; }
.node.on .ic svg{ stroke:var(--amber); }
.node span{
  font-family:var(--m); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx3);
}
.link{
  height:1.6px; flex:0 0 26px; margin:0 4px 22px;
  background:var(--hair2); position:relative; overflow:hidden;
}
.link::after{
  content:""; position:absolute; inset:0; transform:translateX(-110%);
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
}
.link.on::after{ animation:linkflow .7s ease forwards; }
@keyframes linkflow{ to{ transform:translateX(110%); } }
.p-out .bd{ padding:16px; min-height:78px; display:flex; align-items:center; }
.obub{
  display:flex; align-items:flex-start; gap:11px; width:100%;
  opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1.2);
}
.obub.show{ opacity:1; transform:none; }
.obub .wa{
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  background:linear-gradient(135deg,#2E5E46,#1F4632);
  display:flex; align-items:center; justify-content:center;
}
.obub .wa svg{ width:17px; height:17px; fill:#CFE8D8; }
.obub .bb{
  background:var(--srf3); border:1px solid var(--hair);
  border-radius:11px; border-top-left-radius:4px; padding:10px 13px;
  font-size:13.5px; color:var(--tx); line-height:1.5;
}
.obub .bb .ok{ color:var(--green); font-family:var(--m); font-size:11px; }
.obub .bb .mt{ display:block; margin-top:4px; font-family:var(--m); font-size:10.5px; color:var(--tx3); letter-spacing:.06em; }
.pipe .cap{
  margin-top:16px; text-align:center;
  font-family:var(--m); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3);
}
.pipe .cap b{ color:var(--amber); font-weight:500; }

/* spec strip */
.spec{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--bg2); }
.spec .in{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.spec .cell{ padding:26px; border-left:1px solid var(--hair); }
.spec .cell:first-child{ border-left:none; }
.spec .k{
  font-family:var(--m); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx3); display:block; margin-bottom:7px;
}
.spec .v{ font-family:var(--d); font-weight:600; font-size:19px; color:var(--tx); }
.spec .s{ display:block; font-size:13px; color:var(--tx3); margin-top:3px; }
@media (max-width:840px){
  .spec .in{ grid-template-columns:1fr 1fr; }
  .spec .cell{ border-top:1px solid var(--hair); }
  .spec .cell:nth-child(-n+2){ border-top:none; }
  .spec .cell:nth-child(odd){ border-left:none; }
}

/* sections */
section{ padding:92px 0; position:relative; }
.sec-head{ max-width:640px; margin-bottom:48px; }
.sec-head h2{ font-size:clamp(28px,3.8vw,40px); letter-spacing:-.02em; line-height:1.08; }
.sec-head p{ margin:16px 0 0; color:var(--tx2); font-size:16.5px; }
.sec-head .after-link{ margin-top:18px; }

/* programs */
.programs{ display:grid; grid-template-columns:1fr; gap:16px; }
.prog-main{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--srf2) 40%, #1A1E14 160%);
  border:1px solid rgba(201,168,102,.32); border-radius:20px;
  padding:42px 44px; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.prog-main:hover{ border-color:rgba(201,168,102,.6); transform:translateY(-3px); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.prog-main::before{
  content:""; position:absolute; top:-160px; right:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(201,168,102,.13), transparent 62%);
  pointer-events:none;
}
@media (max-width:900px){ .prog-main{ grid-template-columns:1fr; padding:34px 30px; } }
.prog-main .flag{
  font-family:var(--m); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:#221A08;
  background:linear-gradient(180deg,#D9BC80,#BF9C55); border-radius:6px;
  display:inline-block; padding:5px 10px; margin-bottom:16px;
}
.prog-main h3{ font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; }
.prog-main p{ margin:14px 0 0; font-size:15.5px; color:var(--tx2); max-width:480px; }
.prog-main .meta{ display:flex; gap:20px; flex-wrap:wrap; margin:20px 0 26px; }
.prog-main .meta span{
  font-family:var(--m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3);
  display:flex; align-items:center; gap:7px;
}
.prog-main .meta span::before{ content:""; width:4px; height:4px; background:var(--amber); border-radius:1px; }
.prog-side{ display:flex; flex-direction:column; gap:10px; }
.prog-side .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-bottom:1px solid var(--hair); padding:10px 2px;
  font-size:14px; color:var(--tx2);
}
.prog-side .row:last-child{ border-bottom:none; }
.prog-side .row b{ font-family:var(--m); font-size:12.5px; color:var(--tx); font-weight:500; }
.prog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .prog-grid{ grid-template-columns:1fr; } }
.prog{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair); border-radius:16px; padding:26px;
  position:relative; transition:border-color .3s ease, transform .3s ease;
}
.prog:hover{ border-color:var(--hair2); transform:translateY(-3px); }
.prog .st{
  position:absolute; top:18px; right:18px;
  font-family:var(--m); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx3); border:1px solid var(--hair); border-radius:99px; padding:4px 10px;
}
.prog .st.open{ color:var(--green); border-color:rgba(127,176,105,.35); }
.prog h3{ font-size:18px; letter-spacing:-.01em; margin:14px 0 8px; }
.prog p{ margin:0; font-size:14px; color:var(--tx3); line-height:1.55; }
.prog .gl{
  width:38px; height:38px; border-radius:10px;
  background:var(--srf3); border:1px solid var(--hair2);
  display:flex; align-items:center; justify-content:center;
}
.prog .gl svg{ width:18px; height:18px; stroke:var(--amber); fill:none; stroke-width:1.6; }

/* method */
.method{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .method{ grid-template-columns:1fr; } }
.mcard{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair); border-radius:16px; padding:28px;
}
.mcard .n{
  font-family:var(--m); font-size:12px; color:var(--amber); letter-spacing:.1em;
  display:block; margin-bottom:14px;
}
.mcard h3{ font-size:18.5px; letter-spacing:-.01em; margin-bottom:10px; }
.mcard p{ margin:0; font-size:14.5px; color:var(--tx2); }

/* bento */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:920px){ .bento{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .bento{ grid-template-columns:1fr; } }
.bcard{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair); border-radius:16px; padding:22px;
  position:relative; overflow:hidden;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bcard:hover{
  border-color:rgba(201,168,102,.4); transform:translateY(-4px);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.6);
}
.bcard::before{
  content:"+"; position:absolute; top:10px; right:14px;
  font-family:var(--m); font-size:13px; color:var(--tx3); opacity:.6;
}
.bviz{
  height:86px; border-radius:10px; margin-bottom:18px;
  background:var(--bg2); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; gap:8px;
  overflow:hidden; position:relative;
}
.bcard p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--tx2); }
.bcard b{ color:var(--tx); font-weight:600; display:block; margin-bottom:5px; font-size:15.5px; }
.vz-chat{ flex-direction:column; align-items:flex-start; padding:0 20px; gap:6px; }
.vz-chat i{ display:block; height:14px; border-radius:7px; background:var(--srf3); border:1px solid var(--hair); }
.vz-chat i:nth-child(1){ width:58%; }
.vz-chat i:nth-child(2){ width:42%; align-self:flex-end; background:rgba(47,75,94,.5); }
.vz-chat i:nth-child(3){ width:64%; }
.vz-nodes i{ width:30px; height:30px; border-radius:8px; background:var(--srf3); border:1px solid var(--hair2); }
.vz-nodes u{ width:18px; height:1.4px; background:var(--hair2); position:relative; overflow:hidden; }
.bcard.in .vz-nodes u::after{
  content:""; position:absolute; inset:0; transform:translateX(-110%);
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:linkflow 1.4s .3s ease infinite;
}
.vz-term{ flex-direction:column; align-items:flex-start; padding:14px 20px; gap:7px; justify-content:center; }
.vz-term i{ display:block; height:7px; border-radius:4px; background:var(--srf3); }
.vz-term i:nth-child(1){ width:70%; background:linear-gradient(90deg, rgba(201,168,102,.5) 12px, var(--srf3) 12px); }
.vz-term i:nth-child(2){ width:52%; }
.vz-term i:nth-child(3){ width:61%; }
.vz-web{ padding:14px 24px 0; align-items:flex-end; }
.vz-web i{
  display:block; width:100%; height:100%;
  border:1px solid var(--hair2); border-bottom:none;
  border-radius:8px 8px 0 0; background:var(--srf2); position:relative;
}
.vz-web i::before{
  content:""; position:absolute; top:0; left:0; right:0; height:12px;
  border-bottom:1px solid var(--hair); background:var(--srf3);
  border-radius:7px 7px 0 0;
}
.vz-web i::after{
  content:""; position:absolute; top:20px; left:10px; width:46%; height:9px;
  border-radius:5px; background:linear-gradient(90deg,var(--ochre),var(--amber)); opacity:.8;
}
.vz-wave{ gap:4px; }
.vz-wave i{ width:4px; border-radius:3px; background:var(--slate); opacity:.75; height:12px; }
.bcard.in .vz-wave i{ animation:wv 1.1s ease-in-out infinite; }
.vz-wave i:nth-child(2){ animation-delay:.1s; } .vz-wave i:nth-child(3){ animation-delay:.2s; }
.vz-wave i:nth-child(4){ animation-delay:.3s; } .vz-wave i:nth-child(5){ animation-delay:.4s; }
.vz-wave i:nth-child(6){ animation-delay:.5s; } .vz-wave i:nth-child(7){ animation-delay:.6s; }
@keyframes wv{ 0%,100%{ height:10px; } 50%{ height:34px; } }
.vz-git{ gap:0; }
.vz-git i{ width:9px; height:9px; border-radius:50%; background:var(--srf3); border:1.4px solid var(--hair2); }
.vz-git u{ width:26px; height:1.4px; background:var(--hair2); }
.vz-git i.a{ border-color:var(--amber); background:rgba(201,168,102,.25); }

/* demo */
.demo{ background:var(--bg2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); overflow:hidden; }
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
@media (max-width:900px){ .demo-grid{ grid-template-columns:1fr; gap:44px; } }
.demo-copy h2{ font-size:clamp(26px,3.4vw,38px); letter-spacing:-.02em; }
.demo-copy p{ font-size:16.5px; color:var(--tx2); margin:0 0 14px; }
.demo-copy b{ color:var(--tx); font-weight:600; }
.demo-copy .foot{ font-family:var(--m); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx3); margin-top:24px; }
.phone{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair2); border-radius:20px; overflow:hidden;
  max-width:430px; width:100%; justify-self:center;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05) inset;
}
.phone .bar{
  display:flex; align-items:center; gap:11px;
  padding:15px 18px; border-bottom:1px solid var(--hair);
  background:rgba(231,233,238,.02);
}
.phone .ava{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--ochre),#5E4116);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--d); font-weight:600; font-size:15px; color:#FFF3E2;
}
.phone .who b{ display:block; font-size:14px; color:var(--tx); font-weight:600; }
.phone .who span{
  font-family:var(--m); font-size:10px; letter-spacing:.08em; color:var(--green);
  display:flex; align-items:center; gap:5px;
}
.phone .who span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); }
.phone .feed{ padding:22px 16px; display:flex; flex-direction:column; gap:10px; height:340px; overflow-y:auto; scrollbar-width:thin; }
.bub{
  max-width:82%; padding:10px 14px; border-radius:13px;
  font-size:14px; line-height:1.5;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.bub.show{ opacity:1; transform:none; }
.bub.user{
  align-self:flex-end; background:rgba(47,75,94,.55); border:1px solid rgba(122,160,190,.2);
  color:#E8EFF5; border-bottom-right-radius:4px;
}
.bub.agent{
  align-self:flex-start; background:var(--srf3); border:1px solid var(--hair);
  color:var(--tx); border-bottom-left-radius:4px;
}
.bub.agent .cursor{
  display:inline-block; width:7px; height:14px; margin-left:2px;
  background:var(--amber); vertical-align:-2px; animation:blink .8s steps(1) infinite;
}
.typing{
  align-self:flex-start; background:var(--srf3); border:1px solid var(--hair);
  border-radius:13px; border-bottom-left-radius:4px; padding:13px 16px;
  display:none; gap:5px;
}
.typing.show{ display:flex; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--tx3); animation:tp 1.1s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes tp{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(-5px); opacity:1; } }
.replay{
  visibility:hidden;
  margin:0 18px 18px; background:none; border:1px solid var(--hair2);
  color:var(--tx3); font-family:var(--m); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:8px; padding:9px 14px; cursor:pointer; transition:all .2s ease;
}
.replay:hover{ border-color:var(--amber); color:var(--amber); }

/* marquee */
.marquee{ overflow:hidden; padding:30px 0; position:relative; border-bottom:1px solid var(--hair); }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--bg),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--bg),transparent); }
.track{ display:flex; width:max-content; animation:scrollX 32s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }
.track span{
  font-family:var(--m); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tx3); padding:0 38px; white-space:nowrap; position:relative;
}
.track span::after{ content:""; position:absolute; right:-2px; top:50%; width:4px; height:4px; background:var(--amber); border-radius:1px; transform:translateY(-50%); }

/* timeline */
.tl{ position:relative; max-width:780px; }
.tl .spine{ position:absolute; left:17px; top:8px; bottom:8px; width:1.6px; background:var(--hair2); }
.tl .spine i{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--amber),var(--ochre));
  box-shadow:0 0 14px rgba(201,168,102,.5);
}
.tstep{ position:relative; padding:0 0 26px 62px; }
.tstep .node{
  position:absolute; left:5px; top:1px; width:26px; height:26px; border-radius:8px;
  background:var(--srf); border:1px solid var(--hair2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--m); font-weight:500; font-size:11px; color:var(--tx3);
  transition:all .4s ease; z-index:1;
}
.tstep.lit .node{
  border-color:rgba(201,168,102,.7); color:var(--amber); background:var(--bg2);
  box-shadow:0 0 0 4px rgba(201,168,102,.1), 0 0 16px rgba(201,168,102,.3);
}
.tstep .row{
  display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  opacity:.38; transform:translateX(8px);
  transition:opacity .5s ease, transform .5s ease;
}
.tstep.lit .row{ opacity:1; transform:none; }
.tstep .t{ font-size:15.5px; color:var(--tx2); }
.tstep .t b{ color:var(--tx); font-weight:600; }
.tstep .h{ font-family:var(--m); font-size:13px; color:var(--tx); white-space:nowrap; }
.tstep .h small{ color:var(--tx3); font-size:11px; }
.tmark{ position:relative; padding:6px 0 34px 62px; }
.tmark .node{
  position:absolute; left:0; top:8px; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(180deg,#D9BC80,#BF9C55);
  display:flex; align-items:center; justify-content:center; z-index:1;
  transform:scale(.85); opacity:.55; transition:all .4s ease;
  box-shadow:0 8px 22px -6px rgba(201,168,102,.5);
}
.tmark.lit .node{ transform:scale(1); opacity:1; }
.tmark .node svg{ width:16px; height:16px; stroke:#221A08; stroke-width:2.2; fill:none; }
.tmark .box{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair2); border-radius:14px;
  padding:20px 26px; display:flex; justify-content:space-between; gap:14px;
  align-items:center; flex-wrap:wrap;
  opacity:.5; transform:translateX(8px);
  transition:opacity .5s ease, transform .5s ease, border-color .5s ease;
}
.tmark.lit .box{ opacity:1; transform:none; border-color:rgba(201,168,102,.3); }
.tmark .tag{
  font-family:var(--m); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); display:block; margin-bottom:4px;
}
.tmark h3{ font-size:19px; letter-spacing:-.01em; }
.tmark .price{ font-family:var(--m); font-weight:500; font-size:22px; color:var(--tx); white-space:nowrap; }
.tmark .price small{ font-size:11px; color:var(--tx3); letter-spacing:.1em; margin-right:6px; }

/* pricing cream */
.pricing{ background:var(--cream); color:var(--inkmut); }
.pricing .sec-head h2{ color:var(--ink); }
.pricing .sec-head p{ color:var(--inkmut); }
.pricing .lbl{ color:var(--ochre); }
.pricing .lbl::before{ background:var(--ochre); }
.prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .prices{ grid-template-columns:1fr; } }
.pcard{
  background:#FFFDF9; border:1px solid var(--creamline); border-radius:16px;
  padding:34px 30px; display:flex; flex-direction:column; position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcard:hover{
  transform:translateY(-6px); border-color:rgba(201,168,102,.5);
  box-shadow:0 28px 60px -22px rgba(20,23,28,.22);
}
.pcard .name{
  font-family:var(--m); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--inkmut);
}
.pcard .amount{
  font-family:var(--d); font-weight:600; font-size:46px; color:var(--ink);
  margin:14px 0 2px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.pcard .amount small{
  font-family:var(--m); font-size:13px; font-weight:500; color:var(--inkmut);
  letter-spacing:.08em; margin-right:7px;
}
.pcard .per{ font-family:var(--m); font-size:11.5px; letter-spacing:.08em; color:#9AA0A8; margin-bottom:20px; }
.pcard p{ margin:0 0 26px; font-size:15px; line-height:1.6; flex:1; color:#4A4F57; }
.pcard .btn{ justify-content:center; }
.pnote{ margin-top:30px; font-size:14.5px; color:var(--inkmut); }
.pnote b{ color:var(--ink); }

/* instructor */
.instructor{ position:relative; overflow:hidden; padding:0; border-top:1px solid var(--hair); }
.instructor .bg{
  position:absolute; inset:0;
  background:url("assets/hero.jpg") right -60px center / cover no-repeat;
  opacity:.38;
}
.instructor .shade{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,14,19,.98) 40%, rgba(11,14,19,.88) 64%, rgba(11,14,19,.62) 100%);
}
.instructor .inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:92px 28px; }
.instructor h2{ font-size:clamp(28px,3.8vw,40px); letter-spacing:-.02em; }
.instructor .lead{ max-width:600px; font-size:17px; color:var(--tx2); margin:18px 0 0; }
.creds{ margin:42px 0 0; padding:0; list-style:none; max-width:680px; }
.creds li{
  padding:17px 0 17px 30px; position:relative;
  border-top:1px solid var(--hair);
  font-size:15.5px; color:var(--tx2);
}
.creds li::before{
  content:""; position:absolute; left:0; top:27px;
  width:0; height:1.6px; background:var(--amber);
  transition:width .5s .15s ease;
}
.creds li.in::before{ width:14px; }
.creds b{ color:var(--tx); font-weight:600; }
.instructor .more{ margin:28px 0 0; max-width:680px; font-size:15px; color:var(--tx3); }
.instructor .more b{ color:var(--tx2); font-weight:600; }

/* col cards */
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .cols{ grid-template-columns:1fr; } }
.colcard{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair); border-radius:16px; padding:30px;
}
.colcard h3{ font-size:20px; letter-spacing:-.01em; margin-bottom:14px; }
.colcard p{ margin:0 0 12px; font-size:15px; color:var(--tx2); }
.colcard p:last-child{ margin:0; }

/* final + footer */
.final{ text-align:center; overflow:hidden; position:relative; }
.final .blob{ filter:blur(110px); }
.final h2{ font-size:clamp(30px,4.4vw,48px); letter-spacing:-.02em; }
.final p{ max-width:480px; margin:18px auto 34px; color:var(--tx2); font-size:16.5px; }
.final .aula-line{ margin-top:26px; font-family:var(--m); font-size:12px; letter-spacing:.08em; color:var(--tx3); }
.final .aula-line a{ color:var(--slate); font-weight:500; }
footer{ border-top:1px solid var(--hair); position:relative; z-index:2; }
footer .inner{
  max-width:var(--maxw); margin:0 auto; padding:34px 28px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
footer .fm{ font-family:var(--d); font-weight:600; font-size:16px; color:var(--tx); }
footer a{
  font-family:var(--m); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx3); text-decoration:none;
}
footer a:hover{ color:var(--amber); }

/* program hero (program page) */
.phero{ position:relative; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--hair); }
.phero .inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:72px 28px 76px;
}
.crumb{
  font-family:var(--m); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx3); text-decoration:none; display:inline-flex; gap:8px; align-items:center;
  margin-bottom:26px; transition:color .2s ease;
}
.crumb:hover{ color:var(--amber); }
.phero h1{ font-size:clamp(34px,4.6vw,54px); line-height:1.05; letter-spacing:-.02em; max-width:640px; }
.phero .deck{ animation-delay:.4s; }
.phero .cta{ animation-delay:.6s; }

/* reveal */
.rv{ opacity:0; transform:translateY(20px); filter:blur(6px);
  transition:opacity .7s ease, transform .7s ease, filter .7s ease; }
.rv.in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rv,.tstep .row,.tmark .box,.obub{ opacity:1 !important; transform:none !important; filter:none !important; }
  h1 .w > span{ transform:none; }
  .deck,.cta,.tags,.pipe{ opacity:1; }
}


/* ============ logos + flujos referenciales ============ */
.lg{ width:18px; height:18px; fill:currentColor; display:block; }
.track span{ display:inline-flex; align-items:center; gap:10px; color:var(--tx2); }
.track .lg{ width:16px; height:16px; opacity:.85; }

.flow{ display:flex; align-items:center; justify-content:center; gap:0; width:100%; padding:0 14px; }
.fnode{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:52px; }
.fnode .fi{
  width:38px; height:38px; border-radius:10px;
  background:var(--srf3); border:1px solid var(--hair2);
  display:flex; align-items:center; justify-content:center; color:var(--tx);
}
.fnode .fi .lg{ width:17px; height:17px; }
.fnode small{
  font-family:var(--m); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx3); white-space:nowrap;
}
.fnode .fi.txt{
  font-family:var(--m); font-size:9px; font-weight:500; letter-spacing:.04em; color:var(--tx);
}
.flink{ flex:1 0 14px; max-width:30px; height:1.6px; background:var(--hair2); margin-bottom:16px; position:relative; overflow:hidden; }
.bcard.in .flink::after{
  content:""; position:absolute; inset:0; transform:translateX(-110%);
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:linkflow 1.6s .4s ease infinite;
}
.wa-fi{ color:#4FC66A; }
.gs-fi{ color:#57A46B; }
.cl-fi{ color:#D9A05B; }

/* menú móvil */
.mburger{ display:none; background:none; border:1px solid var(--hair2); border-radius:8px; padding:8px 10px; cursor:pointer; }
.mburger i{ display:block; width:16px; height:1.8px; background:var(--tx); margin:3px 0; border-radius:2px; }
@media (max-width:840px){
  .mburger{ display:block; }
  nav.site .links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:rgba(11,14,19,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair2);
    flex-direction:column; gap:0; padding:8px 0;
  }
  nav.site .links.open{ display:flex; }
  nav.site .links a{ padding:13px 28px; font-size:12.5px; }
}


/* ============ catalogo de cursos ============ */
.lvl{
  font-family:var(--m); font-size:9.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid var(--hair2); border-radius:99px;
  padding:4px 10px; color:var(--tx3); white-space:nowrap;
}
.lvl.l1{ color:var(--slate); border-color:rgba(122,160,190,.4); }
.lvl.l2{ color:var(--green); border-color:rgba(127,176,105,.4); }
.lvl.l3{ color:var(--amber); border-color:rgba(201,168,102,.45); }

.ccards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:960px){ .ccards{ grid-template-columns:1fr 1fr; } }
@media (max-width:660px){ .ccards{ grid-template-columns:1fr; } }
.ccard{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair); border-radius:16px; padding:26px;
  text-decoration:none; position:relative; overflow:hidden;
  transition:border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.ccard:hover{
  border-color:rgba(201,168,102,.42); transform:translateY(-4px);
  box-shadow:0 24px 52px -22px rgba(0,0,0,.65);
}
.ccard .top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
.ccard h3{ font-size:19.5px; letter-spacing:-.015em; margin-bottom:9px; }
.ccard .claim{ margin:0 0 20px; font-size:14.5px; line-height:1.55; color:var(--tx2); flex:1; }
.ccard .foot{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--hair); padding-top:16px;
}
.ccard .hrs{ font-family:var(--m); font-size:11.5px; letter-spacing:.1em; color:var(--tx3); text-transform:uppercase; }
.ccard .pr{ font-family:var(--d); font-weight:600; font-size:21px; color:var(--tx); }
.ccard .pr small{ font-family:var(--m); font-size:10.5px; color:var(--tx3); letter-spacing:.08em; margin-right:5px; }
.ccard .go{
  margin-top:16px; font-family:var(--m); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:7px;
}
.ccard .go .ar{ transition:transform .2s ease; }
.ccard:hover .go .ar{ transform:translateX(4px); }

/* modulos del flagship */
.mods{ display:flex; flex-direction:column; gap:0; }
.mods .m{
  display:flex; gap:14px; align-items:baseline;
  border-bottom:1px solid var(--hair); padding:11px 2px;
}
.mods .m:last-child{ border-bottom:none; }
.mods .m i{
  font-family:var(--m); font-size:10.5px; color:var(--amber); font-style:normal;
  min-width:26px; letter-spacing:.06em;
}
.mods .m span{ font-size:14px; color:var(--tx2); flex:1; }
.mods .m b{ font-family:var(--m); font-size:11.5px; color:var(--tx3); font-weight:500; white-space:nowrap; }

/* nota bajo timeline */
.tnote{
  margin:34px 0 0 62px; color:var(--tx3); font-size:14.5px; max-width:620px;
}
.tnote b{ color:var(--tx); }
@media (max-width:620px){ .tnote{ margin-left:0; } }


/* subtitulos de curso */
.csub, .fsub, .hsub{
  font-family:var(--m); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx3); margin:0 0 12px;
}
.fsub{ font-size:11.5px; color:var(--amber); opacity:.85; margin:0 0 14px; }
.hsub{ font-size:12px; color:var(--amber); opacity:.9; margin:14px 0 0; }

/* agrupacion por modulo en el timeline */
.tgroup{ position:relative; padding:14px 0 14px 62px; }
.tgroup .gnode{
  position:absolute; left:11px; top:20px; width:14px; height:14px; border-radius:4px;
  background:var(--bg2); border:1.5px solid var(--hair2); z-index:1;
}
.tgroup .grow{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--hair2); padding-bottom:8px;
}
.tgroup .grow span{
  font-family:var(--m); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber);
}
.tgroup .grow b{ font-family:var(--m); font-size:11px; color:var(--tx3); font-weight:500; }


/* ============ showcase multimedia ============ */
.shvideo{ margin:0 0 18px; }
.shvideo{ border-radius:18px; overflow:hidden; border:1px solid var(--hair2);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7); background:#000; }
.shvideo video{ width:100%; display:block; }
.shvideo .shcap{ padding:12px 18px; margin:0; border-top:1px solid var(--hair); }
.shcap{
  font-family:var(--m); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx3); margin:12px 0 0; line-height:1.7;
}
.shgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:820px){ .shgrid{ grid-template-columns:1fr; } }
.shcard{
  background:linear-gradient(180deg, var(--srf2), var(--srf));
  border:1px solid var(--hair); border-radius:16px; padding:24px;
}
.shmascot{ width:100%; display:block; border-radius:12px; border:1px solid var(--hair); }
.aplayer{
  display:flex; align-items:center; gap:16px;
  background:var(--bg2); border:1px solid var(--hair); border-radius:12px;
  padding:14px 18px;
}
.ap-btn{
  width:44px; height:44px; border-radius:50%; flex:0 0 44px;
  background:linear-gradient(180deg,#D9BC80,#BF9C55); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -6px rgba(201,168,102,.5);
  transition:transform .15s ease;
}
.ap-btn:hover{ transform:scale(1.06); }
.ap-btn svg{ width:18px; height:18px; fill:#221A08; }
.ap-wave{ flex:1; display:flex; align-items:center; gap:3px; height:34px; }
.ap-wave i{
  flex:1; background:var(--hair2); border-radius:2px; min-height:6px;
  transition:background .2s ease;
}
.ap-wave i:nth-child(3n){ height:60%; } .ap-wave i:nth-child(3n+1){ height:32%; }
.ap-wave i:nth-child(3n+2){ height:85%; } .ap-wave i:nth-child(7n){ height:100%; }
.aplayer.on .ap-wave i.lit{ background:var(--amber); }
.ap-time{ font-family:var(--m); font-size:11px; color:var(--tx3); min-width:36px; text-align:right; }