/* ════════════════════════════════════════════════
   TúPOS — Landing VSL
   Ref: Bloom (chips flotantes) · Levyero/Grow Bot (píldoras + flecha circular)
        LuminToaster (tarjetas glass) · haoqi (editorial mono + toggles finos)
   ════════════════════════════════════════════════ */

:root{
  --accent:#0B5ED7;
  --accent-2:#0D6EFD;
  --teal:#00D4B4;
  --green:#3AC26B;
  --violet:#7A6BFF;
  --amber:#F5B94A;

  --bg:#F6F8FC;
  --surface:#FFFFFF;
  --fg-1:#0A1730;
  --fg-2:#53637E;
  --fg-3:#93A0B7;
  --border:rgba(10,23,48,.09);
  --border-2:rgba(10,23,48,.06);
  --grid:rgba(13,110,253,.05);
  --plinth:
    radial-gradient(60% 90% at 15% 20%, rgba(122,107,255,.16), transparent 60%),
    radial-gradient(55% 80% at 85% 15%, rgba(34,182,255,.18), transparent 60%),
    radial-gradient(70% 90% at 80% 100%, rgba(0,212,180,.16), transparent 60%),
    radial-gradient(60% 80% at 10% 100%, rgba(245,185,74,.14), transparent 60%),
    #EEF3FB;
  --glass-bg:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.85);
  --glass-shadow:0 18px 50px rgba(10,23,48,.14);
  --shadow-card:0 30px 70px -20px rgba(10,23,48,.22);
  --shadow-btn:0 8px 20px rgba(13,110,253,.22);
  --badge-bg:rgba(58,194,107,.13);
  --badge-fg:#1E9B52;

  --grid-op:1;
  --glow-op:.06;
  --chips:1;
  --r:20px;
  --r-pill:99px;
}

html[data-theme="dark"]{
  --bg:#060C1A;
  --surface:#0E1A33;
  --fg-1:#EEF4FF;
  --fg-2:#9DB0CD;
  --fg-3:#5B6E8E;
  --border:rgba(159,178,204,.16);
  --border-2:rgba(159,178,204,.09);
  --grid:rgba(122,190,255,.06);
  --plinth:
    radial-gradient(60% 90% at 15% 20%, rgba(122,107,255,.22), transparent 60%),
    radial-gradient(55% 80% at 85% 15%, rgba(13,110,253,.28), transparent 60%),
    radial-gradient(70% 90% at 80% 100%, rgba(0,212,180,.16), transparent 62%),
    #091326;
  --glass-bg:rgba(20,34,62,.62);
  --glass-brd:rgba(159,178,204,.16);
  --glass-shadow:0 18px 50px rgba(0,0,0,.5);
  --shadow-card:0 30px 70px -20px rgba(0,0,0,.6);
  --shadow-btn:0 10px 26px rgba(13,110,253,.4);
  --badge-bg:rgba(58,194,107,.14);
  --badge-fg:#4FD886;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#060C1A;--surface:#0E1A33;--fg-1:#EEF4FF;--fg-2:#9DB0CD;--fg-3:#5B6E8E;
    --border:rgba(159,178,204,.16);--border-2:rgba(159,178,204,.09);--grid:rgba(122,190,255,.06);
    --plinth:
      radial-gradient(60% 90% at 15% 20%, rgba(122,107,255,.22), transparent 60%),
      radial-gradient(55% 80% at 85% 15%, rgba(13,110,253,.28), transparent 60%),
      radial-gradient(70% 90% at 80% 100%, rgba(0,212,180,.16), transparent 62%),
      #091326;
    --glass-bg:rgba(20,34,62,.62);--glass-brd:rgba(159,178,204,.16);
    --glass-shadow:0 18px 50px rgba(0,0,0,.5);--shadow-card:0 30px 70px -20px rgba(0,0,0,.6);
    --shadow-btn:0 10px 26px rgba(13,110,253,.4);--badge-bg:rgba(58,194,107,.14);--badge-fg:#4FD886;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--fg-1);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* fondo grid + halos */
.bg-decor{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-decor::before{
  content:"";position:absolute;inset:0;opacity:var(--grid-op);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 75%);
}
.bg-decor::after{
  content:"";position:absolute;top:-240px;left:50%;transform:translateX(-50%);
  width:900px;height:620px;opacity:var(--glow-op);filter:blur(80px);
  background:
    radial-gradient(closest-side,rgba(34,182,255,.16),transparent),
    radial-gradient(closest-side at 30% 60%,rgba(122,107,255,.14),transparent),
    radial-gradient(closest-side at 75% 40%,rgba(0,212,180,.12),transparent);
}
.page{position:relative;z-index:1}

.brand{display:flex;align-items:center;gap:10px}
.brand .tupos-anim-icon{margin-bottom:0}
.brand__mark{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(13,110,253,.32);
}
.brand__name{font-size:19px;font-weight:700;letter-spacing:-.02em;font-family:"Space Grotesk",sans-serif}
.brand__name em{font-style:normal;color:var(--accent)}
html[data-theme="dark"] .brand__name em{color:var(--accent-2)}

/* ── HERO ── */
.hero{
  position:relative;max-width:1000px;margin:0 auto;
  padding:clamp(40px,7vh,80px) 24px 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;color:var(--badge-fg);
  background:var(--badge-bg);padding:9px 18px;border-radius:99px;
  letter-spacing:-.005em;
}
.badge b{
  font-family:"JetBrains Mono",monospace;font-weight:600;font-size:11px;white-space:nowrap;
  background:var(--surface);color:var(--fg-1);
  padding:3px 9px;border-radius:99px;border:1px solid var(--border-2);
}

/* brand lockup: animated icon · divider · TúPOS + tagline */
.hero__mark{
  display:flex;align-items:center;justify-content:center;
  gap:22px;flex-wrap:wrap;margin-bottom:4px;
}
.hero__logo{display:inline-flex;align-items:center;gap:18px;text-decoration:none}
.hero__logo .tupos-anim-icon{margin-bottom:0}
.hero__logo-divider{width:1px;align-self:stretch;min-height:52px;background:var(--border)}
.hero__logo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.hero__logo-text{
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(34px,4.6vw,50px);letter-spacing:-.03em;line-height:1;
  color:var(--fg-1);
}
.hero__logo-text em{
  font-style:normal;
  background:linear-gradient(135deg,var(--green),var(--teal) 55%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__logo-tagline{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);
}
.hero__eyebrow{
  margin-top:26px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-3);font-family:"JetBrains Mono",monospace;
}
.hero h1{
  position:relative;margin-top:16px;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(46px,7.4vw,88px);line-height:.98;letter-spacing:-.035em;
  max-width:15ch;text-wrap:balance;
}
.hero h1 .hl{color:var(--accent)}
html[data-theme="dark"] .hero h1 .hl{color:var(--accent-2)}
.hero__sub{
  margin-top:24px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.6;
  color:var(--fg-2);max-width:46ch;font-weight:500;
}
.hero__ctas{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.hero__micro{
  margin-top:20px;font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
}

/* chips flotantes tipo Bloom */
.chip{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:14px;
  font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;
  box-shadow:0 12px 28px -6px rgba(10,23,48,.35);
  opacity:var(--chips);
}
.chip::after{
  content:"";position:absolute;width:11px;height:11px;
  background:inherit;border-radius:2px;
}
.chip .dt{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85)}
.chip--pos{background:var(--accent);top:6%;left:4%;transform:rotate(-6deg)}
.chip--pos::after{bottom:-4px;left:18px;transform:rotate(45deg)}
.chip--inv{background:var(--teal);top:0%;right:6%;transform:rotate(5deg)}
.chip--inv::after{bottom:-4px;right:22px;transform:rotate(45deg)}
.chip--rep{background:var(--violet);top:42%;right:-1%;transform:rotate(6deg)}
.chip--rep::after{top:-4px;left:20px;transform:rotate(45deg)}
@media (prefers-reduced-motion: no-preference){
  .chip--pos{animation:bob 6s ease-in-out infinite}
  .chip--inv{animation:bob 7s ease-in-out .4s infinite}
  .chip--rep{animation:bob 6.5s ease-in-out .8s infinite}
  @keyframes bob{50%{transform:translateY(-9px) rotate(var(--rot,0deg))}}
  .chip--pos{--rot:-6deg}.chip--inv{--rot:5deg}.chip--rep{--rot:6deg}
}
@media (max-width:720px){.chip{display:none}}

/* ── botones píldora con flecha circular ── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  height:56px;padding:0 8px 0 24px;border-radius:var(--r-pill);
  font-family:"Space Grotesk",sans-serif;font-size:15.5px;font-weight:600;
  cursor:pointer;border:none;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn__ico{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1.2);
}
.btn:hover .btn__ico{transform:rotate(-12deg) scale(1.05)}
.btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;box-shadow:var(--shadow-btn);
}
.btn--primary:hover{box-shadow:0 12px 28px rgba(13,110,253,.32)}
.btn--primary .btn__ico{background:#fff;color:var(--accent)}
.btn--ghost{
  background:var(--surface);color:var(--fg-1);
  box-shadow:0 4px 16px rgba(10,23,48,.08),0 0 0 1px var(--border) inset;
}
.btn--ghost .btn__ico{background:var(--fg-1);color:var(--surface)}
.btn--sm{height:48px;font-size:14px;padding:0 6px 0 20px}
.btn--sm .btn__ico{width:36px;height:36px}
.btn--full{width:100%;justify-content:space-between}

/* ── SHOWCASE producto (glass cards) ── */
.showcase{
  position:relative;max-width:1080px;margin:clamp(56px,8vh,96px) auto 0;
  padding:0 24px;
}
.plinth{
  position:relative;border-radius:32px;overflow:hidden;
  background:var(--plinth);
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-card);
  padding:clamp(40px,6vw,72px) 24px clamp(0px,0vw,0px);
  display:flex;justify-content:center;align-items:flex-end;
  min-height:clamp(360px,44vw,520px);
}
.plinth::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:40px 40px;opacity:var(--grid-op);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent 80%);
}
html[data-theme="dark"] .plinth::before{
  background-image:
    linear-gradient(rgba(122,190,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,190,255,.08) 1px,transparent 1px);
}
.phone{
  position:relative;z-index:2;width:clamp(200px,26vw,248px);
  filter:drop-shadow(0 40px 60px rgba(10,23,48,.34));
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.plinth:hover .phone{transform:translateY(-6px)}
.phone img{display:block;width:100%;height:auto;border-radius:14px}

/* play VSL */
.play{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;
}
.play__btn{
  width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(10,23,48,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1.2);
}
.play:hover .play__btn{transform:scale(1.08)}
.play__btn svg{margin-left:4px;color:var(--accent)}
.play__lbl{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-1);
  background:rgba(255,255,255,.8);padding:5px 11px;border-radius:99px;
}
html[data-theme="dark"] .play__lbl{background:rgba(20,34,62,.7);color:var(--fg-1)}

/* glass stat cards */
.gcard{
  position:absolute;z-index:3;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--glass-brd);border-radius:16px;
  box-shadow:var(--glass-shadow);padding:14px 16px;
}
.gcard__k{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);
}
.gcard__v{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.gcard__v small{font-size:12px;font-weight:700;color:var(--green);margin-left:6px}
.gcard--sale{left:clamp(-4px,3vw,40px);top:24%}
.gcard--stock{
  right:clamp(-4px,3vw,44px);top:16%;
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  font-size:13px;font-weight:700;
}
.gcard--stock .led{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(58,194,107,.16)}
.gcard--spark{right:clamp(-4px,4vw,60px);bottom:16%;display:flex;flex-direction:column;gap:8px}
.gcard--spark .bars{display:flex;align-items:flex-end;gap:4px;height:34px}
.gcard--spark .bars i{width:6px;border-radius:3px 3px 0 0;background:linear-gradient(var(--accent),var(--accent-2));display:block}
@media (prefers-reduced-motion: no-preference){
  .gcard--sale{animation:bob 7s ease-in-out infinite}
  .gcard--stock{animation:bob 6s ease-in-out .5s infinite}
  .gcard--spark{animation:bob 6.5s ease-in-out 1s infinite}
}
@media (max-width:640px){.gcard--sale,.gcard--spark{display:none}}

/* ── trust ── */
.trust{
  max-width:900px;margin:clamp(48px,7vh,72px) auto 0;padding:0 24px;
  display:flex;align-items:center;gap:20px;
}
.trust::before,.trust::after{content:"";flex:1;height:1px;background:var(--border)}
.trust span{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;
}

/* ── headline print-reveal (efecto impresora térmica) ── */
.pr-headline{position:relative;display:inline-block}
.pr-word{display:inline-block}
.pr-char{
  display:inline-block;
  opacity:0;
  transform:translateY(.3em) rotate(var(--rot,0deg)) scale(.82);
  filter:blur(7px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1.2),
             transform .55s cubic-bezier(.2,.8,.2,1.2),
             filter .42s ease-out;
  transition-delay:var(--d,0ms);
}
.pr-headline.is-live .pr-char{opacity:1;transform:none;filter:blur(0)}
.pr-head{
  position:absolute;top:6%;bottom:10%;left:0;width:2px;border-radius:2px;
  background:linear-gradient(var(--accent-2),transparent 85%);
  box-shadow:0 0 12px 1px var(--accent-2);
  opacity:0;pointer-events:none;
  transition:left var(--sweep-dur,1s) linear,opacity .4s ease;
}
.pr-headline.is-live .pr-head{opacity:1;left:100%}
.pr-headline.is-done .pr-head{opacity:0;transition:opacity .6s ease}
@media (max-width:520px){.pr-head{display:none}}
@media (prefers-reduced-motion:reduce){
  .pr-char{opacity:1;transform:none;filter:none;transition:none}
  .pr-head{display:none}
}

/* ── CTA final: dos boletas ── */
.final{max-width:1080px;margin:clamp(72px,9vh,110px) auto 0;padding:0 24px}
.final__head{text-align:center;margin-bottom:52px}
.final__eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);
}
.final__head h2{
  margin-top:12px;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(32px,4.6vw,54px);letter-spacing:-.03em;line-height:1.02;text-wrap:balance;
}
.final__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}

/* boleta / ticket: dos recibos de papel, no dos tarjetas SaaS */
.path{
  position:relative;padding:30px 26px 26px;margin:14px 0 18px;
  background:var(--surface);
  border-left:1px solid var(--border-2);border-right:1px solid var(--border-2);
  border-radius:4px; /* papel, no ignora la variante de esquinas del tema */
  box-shadow:0 1px 0 var(--border),0 30px 50px -32px rgba(10,23,48,.32);
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.path--reg{transform:rotate(-.4deg)}
.path--sol{transform:rotate(.4deg)}
.path:hover{transform:translateY(-5px) rotate(0deg);box-shadow:0 1px 0 var(--border),0 38px 64px -32px rgba(10,23,48,.38)}

/* borde rasgado, arriba y abajo — sombra propia para que se lea como papel cortado
   sobre un fondo casi del mismo tono (el gradiente solo no bastaba de contraste) */
.path::before,.path::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background:
    linear-gradient(-45deg,transparent 7px,var(--surface) 7px) 0 50% / 14px 14px repeat-x,
    linear-gradient(45deg,transparent 7px,var(--surface) 7px) 0 50% / 14px 14px repeat-x;
  filter:drop-shadow(0 1px 1px rgba(10,23,48,.16));
}
.path::before{top:-13px}
.path::after{bottom:-13px;filter:drop-shadow(0 -1px 1px rgba(10,23,48,.16))}

.path__ticket{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);
}
.path__ticket b{color:var(--fg-1);font-weight:600}
.path__barcode{
  height:20px;margin-top:14px;
  background-image:repeating-linear-gradient(90deg,
    currentColor 0px 2px, transparent 2px 3px,
    currentColor 3px 4px, transparent 4px 6px,
    currentColor 6px 7px, transparent 7px 8px,
    currentColor 8px 11px, transparent 11px 12px,
    currentColor 12px 13px, transparent 13px 16px,
    currentColor 16px 18px, transparent 18px 19px,
    currentColor 19px 20px, transparent 20px 22px,
    currentColor 22px 26px, transparent 26px 27px,
    currentColor 27px 29px, transparent 29px 30px,
    currentColor 30px 31px, transparent 31px 33px,
    currentColor 33px 36px, transparent 36px 37px,
    currentColor 37px 38px, transparent 38px 41px,
    currentColor 41px 43px, transparent 43px 44px,
    currentColor 44px 45px, transparent 45px 47px,
    currentColor 47px 48px, transparent 48px 49px,
    currentColor 49px 52px, transparent 52px 53px,
    currentColor 53px 55px, transparent 55px 57px,
    currentColor 57px 61px, transparent 61px 62px,
    currentColor 62px 63px, transparent 63px 66px,
    currentColor 66px 68px, transparent 68px 69px,
    currentColor 69px 70px, transparent 70px 72px,
    currentColor 72px 75px, transparent 75px 76px,
    currentColor 76px 77px, transparent 77px 78px,
    currentColor 78px 79px, transparent 79px 82px,
    currentColor 82px 84px, transparent 84px 85px,
    currentColor 85px 88px, transparent 88px 89px,
    currentColor 89px 90px, transparent 90px 92px,
    currentColor 92px 96px, transparent 96px 97px,
    currentColor 97px 99px, transparent 99px 102px,
    currentColor 102px 103px, transparent 103px 104px,
    currentColor 104px 105px, transparent 105px 107px,
    currentColor 107px 109px, transparent 109px 110px,
    currentColor 110px 113px, transparent 113px 114px,
    currentColor 114px 115px, transparent 115px 117px,
    currentColor 117px 119px, transparent 119px 122px,
    currentColor 122px 123px, transparent 123px 124px,
    currentColor 124px 128px, transparent 128px 129px,
    currentColor 129px 130px, transparent 130px 132px,
    currentColor 132px 135px, transparent 135px 136px,
    currentColor 136px 138px, transparent 138px 141px,
    currentColor 141px 142px, transparent 142px 143px,
    currentColor 143px 144px, transparent 144px 146px,
    currentColor 146px 148px, transparent 148px 149px,
    currentColor 149px 152px, transparent 152px 153px,
    currentColor 153px 154px, transparent 154px 156px,
    currentColor 156px 158px, transparent 158px 161px,
    currentColor 161px 165px, transparent 165px 166px,
    currentColor 166px 167px, transparent 167px 168px,
    currentColor 168px 169px, transparent 169px 171px,
    currentColor 171px 174px, transparent 174px 175px,
    currentColor 175px 177px, transparent 177px 180px,
    currentColor 180px 181px, transparent 181px 182px);
  background-size:182px 100%;background-repeat:repeat-x;background-position:left center;
  color:var(--fg-1);opacity:.55;
}
.path__rule{border-top:1px dashed var(--border);margin:18px 0}

.path h3{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em}

.path ul{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1}
.path li{display:flex;align-items:baseline;font-size:13px;color:var(--fg-1)}
.path__no{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;color:var(--fg-3);
  margin-right:10px;flex:0 0 auto;
}
.path__label{flex:0 0 auto;white-space:nowrap;font-weight:600}
.path__dots{flex:1 1 auto;margin:0 8px;border-bottom:1.5px dotted var(--border);transform:translateY(-3px);min-width:16px}
.path__val{
  flex:0 0 auto;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;
  color:var(--fg-3);white-space:nowrap;
}
.path--reg .path__val{color:var(--accent)}
.path--sol .path__val{color:var(--violet)}
html[data-theme="dark"] .path--reg .path__val{color:var(--accent-2)}

.path__cta{margin-top:8px;justify-content:center}
.path__foot{margin-top:14px;text-align:center;font-size:12px;color:var(--fg-3);font-weight:500}
.path__foot a{color:var(--accent);font-weight:700}
html[data-theme="dark"] .path__foot a{color:var(--accent-2)}

@media (max-width:480px){.path--reg,.path--sol{transform:none}}

/* ── footer editorial ── */
.footer{
  max-width:1160px;margin:clamp(72px,9vh,110px) auto 0;
  padding:34px clamp(20px,4vw,40px) 48px;
  border-top:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer__links{display:flex;gap:22px}
.footer__links a{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color .15s}
.footer__links a:hover{color:var(--fg-1)}
.footer__c{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--fg-3);letter-spacing:.06em}

/* radios */
:root[data-r="sharp"]{--r:8px;--r-pill:8px}
:root[data-r="round"]{--r:28px}

/* responsive */
@media (max-width:820px){.final__grid{grid-template-columns:1fr}}
@media (max-width:520px){
  .btn--primary,.btn--ghost{width:100%;justify-content:space-between}
  .hero__ctas{width:100%}
}