:root{
  --bg:#0d0f12; --s1:#191d23; --s2:#20252d; --band:#15181d; --line:#2a2f37;
  --tx:#f4f4f5; --mut:#9aa1ac; --or:#e85d04; --or2:#ff7a1f;
  --ok:#22C55E; --warn:#e8a84a; --info:#60A5FA;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:16px/1.6 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}
.sec{padding:76px 0;border-top:1px solid var(--line)}
.eyebrow{font:600 13px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
h1{font-size:clamp(30px,5vw,46px);line-height:1.15;font-weight:700}
h2{font-size:clamp(24px,3.4vw,30px);line-height:1.3;font-weight:700}
h3{font-size:22px;line-height:1.2;font-weight:700;margin-bottom:10px}
p.lead{color:#c4c9d1;font-size:18px;max-width:640px;margin-top:18px}
.or{color:var(--or)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:9px;font-weight:700;font-size:16px;border:1px solid var(--line);transition:.15s}
.btn.p{background:var(--or);border-color:var(--or);color:#0d0f12}
.btn.p:hover{background:var(--or2);border-color:var(--or2)}
.btn.g:hover{border-color:var(--or);color:var(--or)}
.note{color:var(--mut);font-size:13px;margin-top:12px}

/* nav */
nav{position:sticky;top:0;z-index:20;background:rgba(13,15,18,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:16px;gap:16px}
.logo{font-weight:700;font-size:17px}
nav ul{display:flex;gap:6px;list-style:none}
nav ul a{padding:8px 14px;border-radius:8px;color:#c4c9d1;font-size:14px;font-weight:600}
nav ul a:hover{color:var(--tx)}
nav ul a.on{color:var(--tx);background:var(--s2)}
@media(max-width:760px){nav .wrap{flex-wrap:wrap;row-gap:10px}nav ul{order:3;width:100%;overflow-x:auto;gap:4px;padding-bottom:2px;scrollbar-width:none}nav ul::-webkit-scrollbar{display:none}nav ul li{flex-shrink:0}nav ul a{padding:7px 12px;white-space:nowrap}}

/* hero */
.hero{padding:76px 0 56px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:54px;position:relative}
.flow .st{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:18px}
.flow .n{font:700 12px/1 ui-monospace,monospace;color:var(--or);letter-spacing:.14em}
.flow .t{font-weight:700;margin:8px 0 4px}
.flow .d{color:var(--mut);font-size:14px}
.flow .tag{display:inline-block;margin-top:10px;font-size:11px;padding:3px 8px;border-radius:999px;background:var(--s2);color:var(--mut)}
.back{margin-top:14px;border:1px dashed var(--line);border-radius:12px;padding:12px 16px;color:var(--mut);font-size:14px;display:flex;gap:10px;align-items:center}
.back b{color:var(--ok)}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}

/* feature blocks */
.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:56px 0}
.feat.rev{grid-template-columns:1.15fr 1fr}
.feat.rev .txt{order:2}
.feat .txt p{color:var(--mut);max-width:440px}
.feat .res{margin-top:16px;font-size:14px;color:var(--tx);border-left:2px solid var(--or);padding-left:12px}
.feat .res span{color:var(--mut)}
@media(max-width:860px){.feat,.feat.rev{grid-template-columns:minmax(0,1fr);gap:26px;padding:34px 0}.feat.rev .txt{order:0}}
.feat>*,.mini>*,.plans>*,.limits>*,.pair>*{min-width:0}
@media(max-width:520px){.row.c4{grid-template-columns:10px 1fr auto}.win .row.c4 .mut,.mini .row.c4 .mut{display:none}.win .sheet{grid-template-columns:minmax(0,1fr)}.rub{grid-template-columns:78px 1fr 62px}}

/* app window mock */
.win{background:var(--s1);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.win .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--s2);border-bottom:1px solid var(--line);font-size:12px;color:var(--mut)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:#3A4150;display:block}
.win .bar span{margin-left:8px}
.win .body{padding:16px}
.row{display:grid;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px;margin-bottom:8px}
.row.c4{grid-template-columns:10px 1.4fr 1.6fr auto}
.dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.dot.r{background:#EF4444}.dot.g{background:var(--ok)}
.bd{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.bd.ok{color:var(--ok);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)}
.bd.or{color:var(--or2);border-color:rgba(232,93,4,.45);background:rgba(232,93,4,.08)}
.bd.in{color:var(--info);border-color:rgba(96,165,250,.4);background:rgba(96,165,250,.08)}
.mut{color:var(--mut)}
.cap{font-size:12px;color:var(--mut);margin-top:10px;text-align:center}
.ph{display:inline-block;margin-top:10px;font-size:11px;padding:3px 9px;border-radius:6px;background:rgba(245,158,11,.12);color:var(--warn)}

/* sheet (nesteo) */
.sheet{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.plate{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;aspect-ratio:2/1;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);gap:3px}
.plate div{border-radius:3px;background:rgba(232,93,4,.55)}
.plate .b{background:rgba(96,165,250,.55)}
.plate .e{background:repeat-linear-gradient(45deg,#222,#222 4px,#1a1a1a 4px,#1a1a1a 8px);background:#1b1f27;border:1px dashed var(--line)}
.stats .s{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.stats .s b{font-weight:650}
.warnbox{margin-top:10px;font-size:12px;color:var(--warn);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:8px 10px}

/* presupuesto */
.rub{display:grid;grid-template-columns:90px 1fr 70px;gap:10px;align-items:center;font-size:13px;margin-bottom:9px}
.rub .t{height:8px;border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.rub .t i{display:block;height:100%;background:var(--or)}
.send{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap}
.send .btn{padding:9px 14px;font-size:13px}
.done{font-size:12px;color:var(--ok)}

/* state back */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}
.locked{margin-top:10px;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--bg)}

/* chain */
.chain{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font-size:12px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.chip.on{border-color:var(--or);color:var(--or2)}
.arr{color:var(--mut)}

/* mini cards */
.mini{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.mini .c{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:26px;overflow:hidden}
.mini .c p{color:var(--mut);font-size:15px;margin-bottom:18px}
@media(max-width:760px){.mini{grid-template-columns:1fr}}
.kpi{display:flex;gap:10px}
.kpi div{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kpi small{display:block;color:var(--mut);font-size:11px}
.kpi b{font-size:19px}

/* limits */
.limits{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.limits h3{font-size:18px}
.limits li{margin:8px 0 8px 18px;color:var(--mut);font-size:15px}
@media(max-width:760px){.limits{grid-template-columns:1fr}}

/* pricing */
.ban{margin-bottom:22px;display:inline-block;font-size:12px;padding:6px 12px;border-radius:8px;background:rgba(245,158,11,.12);color:var(--warn);border:1px solid rgba(245,158,11,.3)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.plans{grid-template-columns:1fr}}
.plan{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:28px;position:relative}
.plan.rec{border-color:var(--or)}
.plan .rb{position:absolute;top:-11px;left:24px;background:var(--or);color:#0d0f12;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.06em}
.plan h3{margin-bottom:2px}
.plan .pr{font-size:42px;font-weight:800;letter-spacing:-.02em;margin:14px 0 2px}
.plan .pr small{font-size:15px;color:var(--mut);font-weight:500}
.plan .sub{color:var(--mut);font-size:14px;margin-bottom:18px}
.plan li{list-style:none;padding:6px 0 6px 24px;position:relative;font-size:14.5px}
.plan li:before{content:"";position:absolute;left:0;top:13px;width:12px;height:7px;border-left:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(-45deg) translateY(-3px)}
.plan .btn{width:100%;justify-content:center;margin-top:20px}
.faq{max-width:780px;margin-top:40px}
.faq h3{font-size:16px;margin:18px 0 4px}
.faq p{color:var(--mut);font-size:15px}

/* cta final */
.fin{margin:0 0 70px;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:56px 28px;text-align:center}
.fin .btn{margin-top:26px}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--mut);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* capturas reales en marco de ventana */
.shot{background:var(--s1);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.shot .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--s2);border-bottom:1px solid var(--line);font-size:12px;color:var(--mut)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#3A4150;display:block}
.shot .bar span{margin-left:8px}
.shot img{display:block;width:100%;height:auto}
.feat.full{grid-template-columns:minmax(0,1fr);gap:26px}
.feat.full .txt p{max-width:640px}
.feat .shot.narrow{max-width:420px;justify-self:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.steps .st{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:20px}
.steps .n{font:700 12px/1 "IBM Plex Mono",monospace;color:var(--or);letter-spacing:.14em}
.steps .t{font-weight:700;margin:8px 0 4px}
.steps .d{color:var(--mut);font-size:14px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.contact{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.contact .btn{margin-top:0}