/* Tipografía corporativa del manual: Montserrat, familia única para títulos y textos.
   Servida en local desde vendor/fonts, sin llamadas a Google. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/montserrat-400-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/montserrat-500-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/montserrat-600-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/montserrat-700-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/montserrat-800-latin.woff2') format('woff2')}

:root{
 /* Paleta del manual de marca. Principal: #00E400, #64FF82, #000000, #F1F1F2.
    Complementaria para app y web: #4AE050, #21B822, #3C3C3C. */
 --gopass:#00e400; --gopass-light:#64ff82; --gopass-mid:#4ae050; --gopass-dark:#21b822;
 --black:#000000; --grey-1:#f1f1f2; --grey-dark:#3c3c3c;
 /* superficies derivadas del negro de marca */
 --navy-900:#000000; --navy-800:#0d0d0d; --navy-700:#1a1a1a; --navy-600:#3c3c3c;
 --line:#333336; --line-soft:#222225;
 --ink:#f1f1f2; --ink-2:#c4c4c6; --ink-3:#8f9093;
 /* marca aliada en co-branding: colores propios de Pluxee */
 --pluxee:#1b51dc; --pluxee-lt:#7f9cff; --magenta:#cc1480;
 /* series categóricas validadas sobre la superficie #0d0d0d */
 --cat-fuel:#45a01c; --cat-toll:#5b82ea; --cat-park:#d55a90;
 --ok:#64ff82; --warn:#ffc24d; --bad:#ff7375;
 --r-lg:22px; --r-md:14px;
 --mono:ui-monospace,"SF Mono",Menlo,monospace;
 --sans:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --display:'Montserrat',-apple-system,system-ui,sans-serif;
 --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--navy-900); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5}
body::before{
 content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
 background:
 radial-gradient(60vw 50vw at 8% -10%, rgba(27,81,220,.34), transparent 60%),
 radial-gradient(48vw 42vw at 96% 6%, rgba(0,228,0,.16), transparent 62%),
 radial-gradient(50vw 40vw at 60% 108%, rgba(204,20,128,.14), transparent 60%);
}
body::after{
 content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px 96px}
.kicker{font:600 11px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── cabecera ─────────────────────────────────────────────────── */
header{display:flex; align-items:center; gap:20px; padding:26px 0 0; flex-wrap:wrap}
.lockup{display:flex; align-items:center; gap:16px}
/* Co-branding según el manual: separador a 1x de cada marca, la marca aliada nunca
   más alta que el logosímbolo de Gopass, conjunto centrado y 1x de aire alrededor. */
.lockup{--lockup-h:30px; --lockup-1x:calc(var(--lockup-h) * .55); display:flex; align-items:center; gap:var(--lockup-1x)}
.lockup .gp-lockup{height:var(--lockup-h); width:auto; display:block}
.lockup .ally{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em; color:#fff}
.lockup .ally img{height:calc(var(--lockup-h) * .6); width:auto; display:block}
.lockup .sep{width:1px; height:calc(var(--lockup-h) * .85); background:var(--line); display:block; flex:none}
header nav{margin-left:auto; display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.pill{font:600 12.5px var(--sans); color:var(--ink-2); padding:9px 13px; border-radius:999px; border:1px solid transparent; text-decoration:none; transition:.2s var(--e)}
.pill:hover{color:#fff; background:rgba(255,255,255,.06); border-color:var(--line)}
.pill.solid{background:#fff; color:#0c1027; border-color:#fff}
.pill.solid:hover{background:var(--gopass); border-color:var(--gopass); color:#000000}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{display:grid; grid-template-columns:1.12fr .88fr; gap:28px; margin-top:56px; align-items:start}
h1{font-family:var(--display); font-size:clamp(2.5rem,1.3rem+3.5vw,4.4rem); line-height:.97; letter-spacing:-.035em; font-weight:800}
h1 em{font-style:normal; color:var(--gopass)}
h1 .thin{font-weight:300; color:var(--ink-2)}
.lede{margin-top:22px; max-width:48ch; font-size:1.06rem; color:var(--ink-2)}
.lede b{color:#fff; font-weight:600}
.cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.btn{text-decoration:none; display:inline-block; font:600 14px var(--sans); padding:13px 20px; border-radius:999px; border:1px solid var(--line); background:transparent; color:#fff; cursor:pointer; transition:.25s var(--e)}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{background:var(--gopass); color:#000000; border-color:var(--gopass)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(0,228,0,.7)}
.btn.ghost{border-color:var(--line-soft); color:var(--ink-2)}
.btn:disabled{opacity:.45; cursor:progress; transform:none}

/* teléfono */
.phone-stage{position:relative; padding-top:6px}
.phone{
 width:308px; margin-left:auto; border-radius:38px; padding:11px;
 background:linear-gradient(160deg,#2b3560,#141a35); border:1px solid var(--line);
 box-shadow:0 60px 90px -50px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.03);
 transform:rotate(-1.6deg);
}
.screen{background:var(--navy-800); border-radius:29px; overflow:hidden; border:1px solid var(--line-soft)}
.notch{height:26px; display:flex; align-items:center; justify-content:center}
.notch i{width:74px;height:5px;border-radius:99px;background:#000;display:block}
.scr-pad{padding:4px 18px 20px}
.approved{display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--r-md); background:rgba(0,235,94,.09); border:1px solid rgba(0,235,94,.28)}
.approved.no{background:rgba(255,115,117,.1); border-color:rgba(255,115,117,.34)}
.tick{width:26px;height:26px;border-radius:50%;background:var(--ok);color:#000000;display:grid;place-items:center;font:900 15px var(--sans);flex:none}
.approved.no .tick{background:var(--bad); color:#3d0000}
.approved strong{font-size:13px;display:block}
.approved span{font:500 11px var(--mono); color:var(--ink-3); letter-spacing:.04em}
.amount{font-family:var(--display); margin:22px 0 4px; font-size:2.4rem; letter-spacing:-.04em; font-weight:800}
.amount small{font-size:1rem; color:var(--ink-3); font-weight:600; letter-spacing:0}
.scr-row{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft); font-size:12.5px}
.scr-row span{color:var(--ink-3)}
.scr-row b{font-weight:600; text-align:right}
.plate{font:700 12px var(--mono); letter-spacing:.1em; background:#fff; color:#111; padding:3px 7px; border-radius:4px; border-bottom:2px solid #b9c0e0; white-space:nowrap}
.card-chip.gp{background:linear-gradient(135deg,#2f7a12,#0d2a06 70%); border-color:#4b9b26}
.card-chip{margin-top:16px; border-radius:var(--r-md); padding:13px 14px; background:linear-gradient(135deg,var(--pluxee),#0f266d 70%); border:1px solid #3a58c9}
.card-chip .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.card-chip .top b{font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.card-chip .top span{font:600 10px var(--mono); color:#c9d5ff}
.card-chip .num{font:600 13px var(--mono); color:#c9d5ff; margin-top:12px; letter-spacing:.14em}
.meter{height:5px; border-radius:99px; background:rgba(255,255,255,.16); margin-top:11px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--gopass); border-radius:99px; transition:width .5s var(--e)}
.card-chip .fine{display:flex; justify-content:space-between; gap:10px; font:500 10px var(--mono); color:#c9d5ff; margin-top:7px; white-space:nowrap}
.float-badge{
 position:absolute; left:0; bottom:-4px; display:flex; align-items:center; gap:9px;
 background:var(--navy-700); border:1px solid var(--line); border-radius:999px;
 padding:9px 15px 9px 11px; box-shadow:0 26px 40px -26px #000; font-size:12.5px; font-weight:600;
}
.float-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gopass);box-shadow:0 0 0 4px rgba(0,228,0,.2)}

/* ── indicadores ──────────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:64px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden}
.tile{background:var(--navy-800); padding:22px 20px 20px}
.tile:nth-child(odd){background:#151c38}
.tile .v{font-family:var(--display); font-size:2rem; letter-spacing:-.035em; font-weight:800; margin-top:12px}
.tile .v u{text-decoration:none; color:var(--ink-3); font-size:1rem; font-weight:600}
.tile .d{font-size:12px; color:var(--ink-3); margin-top:6px}
.tile .d b{color:var(--ok); font-weight:600}

/* ── secciones ────────────────────────────────────────────────── */
section{margin-top:104px}
.sec-head{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px}
h2{font-family:var(--display); font-size:clamp(1.6rem,1.1rem+1.2vw,2.3rem); letter-spacing:-.03em; font-weight:800; line-height:1.05}
.sec-head p{color:var(--ink-3); font-size:14px; max-width:40ch; margin-left:auto}

/* selector de servicio */
.tabs{display:flex; gap:6px; padding:6px; border:1px solid var(--line-soft); border-radius:999px; width:max-content; max-width:100%; overflow:auto}
.tab{
 display:flex; align-items:center; gap:9px; white-space:nowrap; cursor:pointer;
 font:600 13.5px var(--sans); color:var(--ink-2); background:transparent;
 border:0; padding:10px 18px; border-radius:999px; transition:.25s var(--e);
}
.tab i{width:9px;height:9px;border-radius:3px;display:block}
.tab:hover{color:#fff; background:rgba(255,255,255,.05)}
.tab[aria-selected="true"]{background:var(--gopass); color:#000000}

.svc{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; margin-top:30px; align-items:start}
.svc h3{font-family:var(--display); font-size:clamp(1.45rem,1.1rem+.9vw,2rem); letter-spacing:-.03em; font-weight:800; margin:10px 0 12px; line-height:1.08}
.svc .lede{margin-top:0}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px}
.chips span{font:600 11px var(--mono); letter-spacing:.06em; padding:6px 10px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); color:var(--ink-2)}
.svc-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.svc-metrics div{background:var(--navy-800); padding:14px 16px}
.svc-metrics b{display:block; font-size:1.35rem; font-weight:800; letter-spacing:-.03em; margin-top:6px}

/* línea de tiempo del flujo */
.flow{position:relative; padding-left:6px}
.flow::before{content:""; position:absolute; left:19px; top:14px; bottom:26px; width:2px; background:linear-gradient(180deg,var(--line),transparent)}
.fstep{position:relative; display:grid; grid-template-columns:28px 1fr; gap:16px; padding:0 0 22px}
.fstep .node{
 width:28px;height:28px;border-radius:50%; display:grid; place-items:center; z-index:1;
 font:700 11px var(--mono); background:var(--navy-700); border:1px solid var(--line); color:var(--ink-2);
 transition:.35s var(--e);
}
.fstep .head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fstep h4{font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.fstep p{font-size:13px; color:var(--ink-3); margin-top:6px; max-width:52ch}
.who{font:600 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:5px; white-space:nowrap}
.who.gp{background:rgba(0,228,0,.12); color:var(--gopass)}
.who.px{background:rgba(127,156,255,.14); color:var(--pluxee-lt)}
.who.both{background:rgba(255,255,255,.08); color:var(--ink-2)}
.who.net{background:rgba(255,194,77,.14); color:var(--warn)}
.lat{font:600 10.5px var(--mono); color:var(--ink-3); margin-left:auto}
.fstep.on .node{background:var(--gopass); color:#000000; border-color:var(--gopass); box-shadow:0 0 0 6px rgba(0,228,0,.14)}
.fstep.on h4{color:#fff}
.fstep.done .node{background:rgba(0,235,94,.16); border-color:rgba(0,235,94,.5); color:var(--ok)}
.fstep.fail .node{background:var(--bad); color:#3d0000; border-color:var(--bad); box-shadow:0 0 0 6px rgba(255,115,117,.14)}

/* simulador */
.sim{margin-top:8px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:#121834; padding:18px}
.sim-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.log{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:14px; display:grid; gap:7px; min-height:96px; font:500 12px var(--mono); color:var(--ink-3)}
.log b{color:var(--ink)}
.log .ok{color:var(--ok)} .log .no{color:var(--bad)}
.log-empty{color:var(--ink-3); opacity:.7}

/* capas: tag + tarjeta cerrada */
.layers{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.layer{padding:26px; border-radius:var(--r-lg); border:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 65%)}
.layer h3{font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin:12px 0 10px}
.layer p{font-size:13.5px; color:var(--ink-2)}
.layer ul{list-style:none; margin-top:16px; display:grid; gap:9px}
.layer li{font-size:13px; color:var(--ink-3); display:flex; gap:10px; align-items:flex-start}
.layer li::before{content:""; width:6px;height:6px;border-radius:2px; background:var(--gopass); margin-top:7px; flex:none}
.layer.px li::before{background:var(--pluxee-lt)}

/* ── consola ──────────────────────────────────────────────────── */
.console{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--navy-800); box-shadow:0 50px 90px -60px #000}
.chrome{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line-soft); background:#101637}
.lights{display:flex; gap:6px}
.lights i{width:10px;height:10px;border-radius:50%;background:var(--navy-600);display:block}
.url{font:500 11.5px var(--mono); color:var(--ink-3); background:var(--navy-900); border:1px solid var(--line-soft); padding:6px 12px; border-radius:99px}
.who-badge{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2)}
.avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--pluxee));display:grid;place-items:center;font:700 10px var(--sans)}
.console-body{display:grid; grid-template-columns:1.55fr 1fr}
.pane{padding:22px; min-width:0}
.pane + .pane{border-left:1px solid var(--line-soft); background:#121834}
.filters{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:16px 0 18px}
.chip{font:600 12px var(--sans); padding:7px 12px; border-radius:99px; cursor:pointer; border:1px solid var(--line-soft); background:transparent; color:var(--ink-2); transition:.2s var(--e); display:inline-flex; align-items:center; gap:7px}
.chip i{width:8px;height:8px;border-radius:2px;display:block}
.chip:hover{border-color:var(--line); color:#fff}
.chip[aria-pressed="true"]{background:var(--gopass); color:#000000; border-color:var(--gopass)}
.search{margin-left:auto; font:500 12px var(--mono); color:var(--ink); background:var(--navy-900); border:1px solid var(--line-soft); border-radius:99px; padding:8px 14px; width:170px}
.search::placeholder{color:var(--ink-3)}
.search:focus{outline:2px solid var(--pluxee-lt); outline-offset:1px}
.tbl-scroll{overflow:auto; max-height:520px; scrollbar-width:thin}
thead th{position:sticky; top:0; background:var(--navy-800); z-index:1}
table{width:100%; border-collapse:collapse; font-size:13px}
caption{text-align:left; padding-bottom:12px}
th{text-align:left; font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:0 10px 10px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
td{padding:12px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr{transition:.2s var(--e)}
tbody tr:hover{background:rgba(255,255,255,.035)}
tbody tr.fresh{animation:flash 1.6s var(--e)}
@keyframes flash{from{background:rgba(0,228,0,.18)}to{background:transparent}}
td.num{text-align:right; font:600 13px var(--mono); white-space:nowrap}
td.hora{font:600 13px var(--mono)}
.cat{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:12.5px}
.cat i{width:9px;height:9px;border-radius:3px;display:block;flex:none}
.st{font:600 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.st.ok{color:var(--ok)} .st.hold{color:var(--warn)} .st.no{color:var(--bad)} .st.open{color:var(--ink-3)}
.trailer{display:block; font:500 10.5px var(--mono); color:var(--ink-3); margin-top:4px; letter-spacing:.06em}
.empty{padding:26px 10px; color:var(--ink-3); font-size:13px}

/* barras */
.bars{margin-top:18px; display:grid; gap:16px}
.bar-row{display:grid; gap:7px; cursor:default}
.bar-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px}
.bar-top .lbl{color:var(--ink-2); font-weight:600}
.bar-top .val{font:600 12.5px var(--mono); color:#fff}
.track{height:12px; background:rgba(255,255,255,.05); border-radius:0 4px 4px 0}
.track i{display:block; height:100%; border-radius:0 4px 4px 0; transition:width .6s var(--e)}
.bar-row:hover .track i{filter:brightness(1.15)}
.tip{position:fixed; z-index:9; pointer-events:none; opacity:0; transform:translate(-50%,-130%); background:#fff; color:#111; font:600 11.5px var(--sans); padding:7px 10px; border-radius:7px; box-shadow:0 14px 30px -12px rgba(0,0,0,.8); transition:opacity .15s; white-space:nowrap}
.tip.on{opacity:1}
.month{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft)}
.month div{font-size:12px; color:var(--ink-3)}
.month b{display:block; font:700 15px var(--mono); color:var(--ink); margin-top:4px}
.quota{margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft)}
.quota .big{font-family:var(--display); font-size:1.9rem; font-weight:800; letter-spacing:-.035em; margin-top:10px}
.quota .big u{text-decoration:none; font-size:.95rem; color:var(--ink-3); font-weight:600}
.quota .meter{height:8px; background:rgba(255,255,255,.07); margin-top:14px}
.quota .meter i{background:linear-gradient(90deg,var(--pluxee),var(--gopass))}
.quota .fine{display:flex; justify-content:space-between; font:500 11px var(--mono); color:var(--ink-3); margin-top:8px}
.note{margin-top:14px; font-size:12px; color:var(--ink-3)}


/* línea de wallet por servicio */
.wallet-line{margin-top:18px; padding:12px 14px; border-left:2px solid var(--line); font-size:13px; color:var(--ink-2); background:rgba(255,255,255,.03)}

/* por qué no se fusionan */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.why article{padding:20px; border-radius:var(--r-md); border:1px dashed var(--line); background:transparent}
.why p:last-child{font-size:13px; color:var(--ink-3); margin-top:8px}

/* lo que se comparte */
.shared{display:grid; grid-template-columns:.7fr 1.3fr; gap:28px; margin-top:16px; padding:28px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(120deg,rgba(27,81,220,.22),rgba(0,228,0,.1))}
.shared h3{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin-top:10px}
.shared ul{list-style:none; display:grid; gap:12px}
.shared li{font-size:13.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start}
.shared li::before{content:""; width:6px;height:6px;border-radius:2px; background:#fff; margin-top:7px; flex:none}
.shared b{color:#fff}

/* saldos por riel */
.bal{margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft)}
.bal-head{display:flex; align-items:center; gap:10px}
.bal-dot{width:10px;height:10px;border-radius:3px;flex:none}
.bal-head b{display:block; font-size:13.5px}
.bal-head span{font-size:11.5px; color:var(--ink-3)}
.bal-pct{font-family:var(--mono); margin-left:auto; font:700 15px var(--mono)}
.bal .meter{height:8px; background:rgba(255,255,255,.07); margin-top:12px}
.bal .fine{display:flex; justify-content:space-between; font:500 11px var(--mono); color:var(--ink-3); margin-top:8px}
.bal .note{margin-top:8px}

/* cierre */
.thesis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.thesis article{padding:24px; border-radius:var(--r-md); border:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 70%)}
.thesis h3{font-size:1.05rem; font-weight:800; letter-spacing:-.02em; margin:10px 0 8px}
.thesis p{font-size:13px; color:var(--ink-3)}
.closer{margin-top:34px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:28px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(120deg,rgba(27,81,220,.28),rgba(0,228,0,.12))}
.closer p{font-size:1.15rem; font-weight:700; letter-spacing:-.02em; max-width:44ch}
.closer .cta{margin:0 0 0 auto}

footer{margin-top:80px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--ink-3)}
footer b{color:var(--ink-2)}

@media (max-width:1000px){
 .hero,.svc{grid-template-columns:1fr}
 .phone{margin:0 auto; transform:none}
 .float-badge{position:static; margin:18px auto 0; width:max-content}
 .tiles,.thesis,.why{grid-template-columns:repeat(2,1fr)}
 .shared{grid-template-columns:1fr}
 .layers{grid-template-columns:1fr}
 .console-body{grid-template-columns:1fr}
 .pane + .pane{border-left:0; border-top:1px solid var(--line-soft)}
}
@media (max-width:600px){
 .tiles,.thesis,.svc-metrics,.month,.why{grid-template-columns:1fr}
 .search{margin-left:0; width:100%}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }