body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: bandas a todo el ancho (Midnight, Paper, Paper 200, Spark) sobre un contenedor de 1200 px; capa dev: terminal, pestañas de archivo, marcos de navegador y código con números de línea */
:root{
  --midnight:#0A1F33; --midnight-700:#143252; --term:#07131F; --line-dark:#1E3D5C;
  --spark:#FFC21A; --paper:#FFFBEF; --paper-200:#F3EBD3; --white:#FFFFFF;
  --line:#E9E2CF; --line-strong:#CFC5AA;
  --ink:#8A6100; --slate:#5B6B7B; --mist:#A9B8C7;
  --link:#1D6FD8; --link-dark:#6FA8F0; --coral:#FF6B4A;
  --f-display:'Bricolage Grotesque', ui-rounded, system-ui, sans-serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-btn:12px; --r-card:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top, 0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--midnight);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:30;background:var(--midnight)}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:6px}
.dark a:focus-visible{outline-color:var(--link-dark)}
.wrap{max-width:1232px;margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.eyebrow{font-family:var(--f-mono);font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.01em}
.dark .eyebrow{color:var(--spark)}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
h2{font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.02em}
h3{font-weight:700;font-size:22px;line-height:1.15}
p{margin:0}
.mono{font-family:var(--f-mono)}

/* Wordmark: el punto de la «i» es Spi */
.wm{font-family:var(--f-display);font-weight:800;line-height:1;font-optical-sizing:none;white-space:nowrap;display:inline-block;padding-top:.4em;color:inherit;text-decoration:none}
.wm .t{letter-spacing:-.01em}
.wm .i{margin:0 .02em}
.wm .a{display:inline-block;width:0;height:0;position:relative}
.wm .a svg{position:absolute;left:-.2885em;bottom:.51em;width:.343em;height:.6em;overflow:visible}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--r-btn);font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-spark{background:var(--spark);color:var(--midnight)}
.btn-line-light{border-color:var(--paper);color:var(--paper)}
.btn-line{border-color:var(--midnight);color:var(--midnight)}
.btn-dark{background:var(--midnight);color:var(--paper)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn .k{font-family:var(--f-mono);font-size:13px;opacity:.75}

/* Cabecera fija */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:rgba(10,31,51,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--paper);border-bottom:1px solid var(--line-dark)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:12px}
.top .wm{font-size:30px}
.top .wm .a svg{color:var(--spark)}
.nav{display:flex;align-items:center;gap:8px 24px;font-size:15px;font-weight:500}
.nav-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.nav-links a{color:var(--paper);text-decoration:none}
.nav-links a:hover{color:var(--spark)}
@media (max-width:760px){.nav-links{display:none}}

/* Hero */
.hero{background-color:var(--midnight);color:var(--paper);background-image:radial-gradient(circle, rgba(255,251,239,.07) 1px, transparent 1.6px);background-size:24px 24px}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:stretch;gap:40px 56px}
.hero-copy{flex:1 1 500px;min-width:0;padding-block:72px 64px;display:flex;flex-direction:column;gap:24px}
.hero h1{font-weight:800;font-size:clamp(44px,7vw,88px);line-height:.98;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--spark)}
.hero-lead{max-width:34em;font-size:20px;line-height:1.5;color:var(--mist)}
.row{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:13px}
.chips span{padding:5px 10px;border-radius:999px;border:1px solid var(--line-dark);color:var(--mist)}
.hero-art{flex:1 1 380px;min-width:0;min-height:560px;background:var(--spark);border-radius:0 0 28px 28px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 24px 24px}
.swing{transform-origin:50% 0;animation:swing 4.5s ease-in-out infinite;flex-shrink:0}
@keyframes swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* Terminal */
.term{width:100%;max-width:440px;background:var(--term);color:var(--mist);border-radius:16px;border:1px solid var(--line-dark);box-shadow:0 18px 40px rgba(7,19,31,.35);overflow:hidden;font-family:var(--f-mono);font-size:13.5px;line-height:1.7}
.term-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line-dark)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-dark)}
.term-bar span{margin-left:8px;font-size:12px;color:var(--mist)}
.term pre{margin:0;padding:14px 16px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.term .dir{color:var(--link-dark)} .term .s{color:var(--spark)} .term .c{color:var(--paper)} .term .ok{color:var(--spark)}
.cursor{display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;background:var(--spark);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (min-width:1000px){.hero-art .term{position:absolute;left:-56px;bottom:32px}}

/* Clientes */
.proof{border-bottom:1.5px solid var(--line)}
.proof .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-block:26px}
.proof .label{font-family:var(--f-mono);font-size:13px;color:var(--slate)}
.ph{padding:12px 18px;border-radius:12px;border:1.5px dashed var(--line-strong);font-family:var(--f-mono);font-size:13px;color:var(--slate)}
.client-logo{display:block;height:48px;width:auto;max-width:100%}

/* Bandas */
.band{padding-block:96px}
.band .wrap{display:flex;flex-direction:column;gap:40px}
.head{display:flex;flex-direction:column;gap:14px;max-width:760px}
.head p{font-size:18px;color:var(--slate);max-width:40em}
.dark .head p{color:var(--mist)}
.alt{background:var(--paper-200)}
.night{background:var(--midnight);color:var(--paper)}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* Tarjetas con pestaña de archivo */
.card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.file{display:flex;align-items:center;gap:8px;padding:10px 18px;border-bottom:1.5px solid var(--line);background:var(--paper);font-family:var(--f-mono);font-size:12.5px;color:var(--slate)}
.file b{width:8px;height:8px;border-radius:50%;background:var(--spark);flex-shrink:0}
.card-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
.ico{width:52px;height:52px;border-radius:14px;background:var(--spark);display:flex;align-items:center;justify-content:center}
.card p{color:var(--slate)}
.price{margin-top:auto;font-family:var(--f-mono);font-size:14px;font-weight:700}

/* Proceso: rama con commits */
.branch{list-style:none;margin:0;padding:4px;display:grid;gap:28px 24px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));position:relative;overflow:hidden}
.branch li{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:34px;min-width:0}
.branch li::before{content:"";position:absolute;left:0;right:-24px;top:9px;height:2px;background:var(--midnight)}
.branch li:last-child::before{right:0}
.branch li::after{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--spark);box-shadow:0 0 0 3px var(--midnight)}
.branch .n{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--ink)}
.branch p{color:var(--slate)}

/* Proyectos en marco de navegador */
.project{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;min-width:0}
a.project{color:var(--midnight);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.project:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(10,31,51,.12);border-color:var(--line-strong)}
a.project:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shot:has(img){background:var(--paper-200)}
.visit{margin-top:auto;padding-top:4px;font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--ink)}
a.project:hover .visit{color:var(--midnight)}
@media (prefers-reduced-motion:reduce){a.project{transition:none}a.project:hover{transform:none}}
.browser{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--paper);border-bottom:1.5px solid var(--line)}
.browser i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.browser span{flex:1;min-width:0;padding:4px 10px;border-radius:8px;background:var(--paper-200);font-family:var(--f-mono);font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{aspect-ratio:16/10;max-width:100%;background-color:var(--paper-200);background-image:repeating-linear-gradient(135deg, rgba(10,31,51,.06) 0 10px, transparent 10px 20px);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:13px;color:var(--slate)}
.project .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--f-mono);font-size:12px}
.tags span{padding:4px 10px;border-radius:999px;background:var(--paper-200)}

/* Reseñas */
.review{background:var(--midnight-700);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.review-head{display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--spark);color:var(--midnight);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:700;font-size:14px;flex-shrink:0}
.review-head div{display:flex;flex-direction:column;min-width:0}
.review-head b{font-weight:600;color:var(--paper)}
.review-head small{font-family:var(--f-mono);font-size:12px;color:var(--mist)}
.review blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--paper)}

/* Precios */
.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:stretch}
.plan{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.plan .id{font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.plan .amount{font-family:var(--f-mono);font-weight:700;font-size:26px;letter-spacing:-.01em}
.plan .amount small{font-size:14px;font-weight:500;color:var(--slate)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;color:var(--slate)}
.plan li::before{content:"✓";font-family:var(--f-mono);font-weight:700;color:var(--ink);flex-shrink:0}
.plan .btn{margin-top:auto}
.plan.featured{background:var(--midnight);border-color:var(--midnight);color:var(--paper)}
.plan.featured .id{color:var(--spark)}
.plan.featured li{color:var(--mist)}
.plan.featured li::before{color:var(--spark)}
.plan.featured .amount small{color:var(--mist)}
.badge{align-self:flex-start;padding:5px 10px;border-radius:999px;background:var(--spark);color:var(--midnight);font-family:var(--f-mono);font-size:12px;font-weight:700}

/* Por qué */
.why{display:grid;gap:32px 48px;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));align-items:start}
.reasons{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.reasons div{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--midnight);min-width:0}
.reasons p{color:var(--slate)}
.code{background:var(--term);color:var(--mist);border-radius:18px;border:1px solid var(--line-dark);overflow:hidden;min-width:0}
.code .term-bar span{color:var(--mist)}
.code-scroll{overflow-x:auto}
.code ol{margin:0;padding:16px 18px 18px 0;list-style:none;counter-reset:ln;font-family:var(--f-mono);font-size:13.5px;line-height:1.8;min-width:max-content}
.code li{counter-increment:ln;white-space:pre}
.code li::before{content:counter(ln);display:inline-block;width:3.2em;padding-right:1.2em;text-align:right;color:#3E5B78}
.tg{color:var(--link-dark)} .at{color:var(--spark)} .st{color:var(--paper)} .cm{color:#6E869E}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1.5px solid var(--line-strong);max-width:880px}
.faq details{border-bottom:1.5px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-weight:500;font-size:22px;color:var(--ink);transition:transform .2s ease;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:44em;color:var(--slate)}

/* Contacto */
.cta{background:var(--spark);padding-block:80px}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px}
.cta .eyebrow{color:var(--midnight)}
.cta h2{font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1;letter-spacing:-.03em}
.cta-copy > p{font-size:19px;max-width:34em}
.cta .wrap{align-items:flex-start;gap:40px 56px}
.direct{font-family:var(--f-mono);font-size:13.5px;line-height:1.8;max-width:40em}
.direct a{color:var(--midnight);font-weight:700;overflow-wrap:anywhere}
.cta-spi{margin-top:8px}
.form-card{flex:1 1 420px;min-width:0;max-width:560px;background:var(--paper);color:var(--midnight);border-radius:var(--r-card);padding:0 28px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 18px 40px rgba(10,31,51,.18)}
.form-card .file{margin:0 -28px;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--white)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
fieldset.field{border:0;margin:0;padding:0}
.field label,.field legend{font-size:14px;font-weight:600;padding:0}
.field legend{margin-bottom:6px}
.field input[type=text],.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--white);font:inherit;font-size:16px;color:var(--midnight)}
.field textarea{min-height:110px;resize:vertical}
.field input[type=text]:focus,.field textarea:focus{outline:3px solid rgba(29,111,216,.25);outline-offset:0;border-color:var(--link)}
.field [aria-invalid="true"]{border-color:#B4321A}
.err{font-size:13px;color:#B4321A}
.err:empty{display:none}
.two{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--white);font-size:14px;font-weight:500;cursor:pointer}
.opts input{accent-color:var(--midnight);margin:0}
.opts label:has(input:checked){background:var(--midnight);color:var(--paper);border-color:var(--midnight)}
.opts label:has(input:checked) input{accent-color:var(--spark)}
.opts label:has(input:focus-visible){outline:3px solid var(--link);outline-offset:2px}
.form-card button{font:inherit;font-weight:600;cursor:pointer}
.result{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--paper-200)}
.result pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--f-mono);font-size:13px;line-height:1.6;color:var(--midnight)}
.btn-copy{background:transparent;border-color:var(--midnight);color:var(--midnight)}
.note{font-size:13px;color:var(--slate)}
.note:empty{display:none}
.checks{display:flex;flex-direction:column;gap:6px}
.check{display:flex;gap:10px;align-items:flex-start;min-height:32px;font-size:14px;line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;flex-shrink:0;accent-color:var(--midnight);cursor:pointer}
.check input[aria-invalid="true"]{outline:2px solid #B4321A;outline-offset:2px}
.check a{color:var(--link);font-weight:600}
.checks .err{margin:-2px 0 4px 30px}
.legal-info{font-size:12px;line-height:1.55;color:var(--slate)}
.legal-info a{color:var(--link)}
.foot-bottom .legal a{color:var(--mist)}

/* Pie */
.foot{background:var(--midnight);color:var(--paper)}
.foot .wrap{display:flex;flex-direction:column;gap:32px;padding-block:56px 36px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px}
.foot .wm{font-size:30px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:15px}
.foot-links div{display:flex;flex-direction:column;gap:10px}
.foot-links a{color:var(--paper)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--mist)}
.foot-bottom .legal{display:flex;flex-wrap:wrap;gap:20px}

/* Aparición al hacer scroll: solo desplazamiento, el contenido siempre es legible */
@keyframes rise{from{transform:translateY(28px)}to{transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
@media (prefers-reduced-motion:reduce){.swing,.cursor{animation:none}.btn,.faq summary::after{transition:none}}
.cmds{gap:12px}
.cmd{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 14px 0 18px;border-radius:12px;background:var(--term);
  border:1.5px solid var(--spark);color:var(--paper);font-family:var(--f-mono);font-size:16px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.cmd-s{color:var(--spark);font-weight:700}
.cmd-c{width:.62em;height:1.15em;margin-left:-6px;background:var(--spark)}
.cmd kbd{font:inherit;font-size:13px;padding:5px 7px;border-radius:6px;border:1px solid var(--line-dark);color:var(--mist);margin-left:4px}
.cmd:hover{background:var(--spark);color:var(--midnight)}
.cmd:hover .cmd-s{color:var(--midnight)}
.cmd:hover .cmd-c{background:var(--midnight);animation:blink 1.1s steps(1) infinite}
.cmd:hover kbd{border-color:var(--midnight);color:var(--midnight)}
.cmd-2{border-color:var(--line-dark);background:transparent}
.cmd-2:hover{background:rgba(255,251,239,.07);color:var(--paper);border-color:var(--paper)}
.cmd-2:hover .cmd-s{color:var(--spark)}
.cmd-sm{min-height:44px;gap:8px;padding:0 14px;font-size:14px}
.cmd:focus-visible{outline:3px solid var(--link-dark);outline-offset:3px}
@media (max-width:420px){.cmd{font-size:15px;padding:0 12px 0 14px}.cmd-sm{font-size:13px;padding:0 11px;gap:7px}}
@media (prefers-reduced-motion:reduce){.cmd{transition:none}.cmd:hover .cmd-c{animation:none}}
@media (max-width:999px){
  .hero .wrap{gap:0}
  .hero-copy{flex-basis:100%;padding-block:44px 40px}
  .hero-art{flex-basis:100%;min-height:0;border-radius:0;justify-content:flex-start;overflow:hidden;
    margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding:0 max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px))}
  .hero-art .swing{width:170px;height:auto;margin-top:-118px;margin-bottom:-22px}
  .hero-art .term{margin-top:4px}
}
@media (max-width:760px){
  .hero-copy{padding-block:32px;gap:18px}
  .hero h1{font-size:clamp(40px,11.5vw,56px)}
  .hero-lead{font-size:17px}
  .hero .row .btn{flex:1 1 auto}
  .proof .wrap{gap:14px 24px;padding-block:20px}
  .proof .label{flex-basis:100%}
  .client-logo{height:34px}
  .band{padding-block:56px}
  .band .wrap{gap:28px}
  .head{gap:10px}
  .head p{font-size:17px}
  .cta{padding-block:56px}
  .cta .wrap{gap:28px}
  .cta-spi{width:120px;height:auto;margin-top:0}
  .foot .wrap{padding-block:40px 28px;gap:24px}
}
@media (min-width:761px) and (max-width:999px){
  .proof .wrap{gap:14px 32px}
  .proof .label{flex-basis:100%}
  .client-logo{height:40px}
}
@media (max-width:380px){
  .hero-copy{padding-block:26px 28px;gap:16px}
  .hero-lead{font-size:16px}
  .hero .btn{min-height:48px}
  .chips{font-size:12px;gap:6px}
}
@media (min-width:700px){.plans>.plan:nth-child(3){order:2}.plans>.plan:nth-child(4){order:1}}
.plans{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.billing{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;background:var(--paper-200);border:1.5px solid var(--line)}
.billing label{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--slate);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.billing input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.billing label:has(input:checked){background:var(--midnight);color:var(--paper)}
.billing label:has(input:focus-visible){outline:3px solid var(--link);outline-offset:2px}
.plan .bill-a,.plan .save{display:none}
.plan:has(.billing input[value="anual"]:checked) .bill-m{display:none}
.plan:has(.billing input[value="anual"]:checked) .bill-a{display:block}
.plan:has(.billing input[value="anual"]:checked) .save{display:block}
.save{margin-top:-8px;font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--ink)}
.nav-links .only-m{display:none}
.menu-btn{display:none}
@media (max-width:760px){
  .top .wrap{gap:10px}
  .top .wm{font-size:26px}
  .nav{gap:8px}
  .menu-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;width:44px;height:44px;padding:0;border-radius:12px;border:1.5px solid var(--line-dark);background:transparent;cursor:pointer}
  .menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--paper);transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s ease}
  .menu-btn[aria-expanded="true"]{border-color:var(--spark)}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .top.open .nav-links{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;position:absolute;left:0;right:0;top:100%;padding:4px max(16px, env(safe-area-inset-left, 0px)) 14px;background:var(--midnight);border-bottom:1px solid var(--line-dark);box-shadow:0 18px 30px rgba(7,19,31,.35)}
  .top.open .nav-links a{display:flex;align-items:center;min-height:52px;font-size:18px;border-bottom:1px solid var(--line-dark)}
  .top.open .nav-links a:last-child{border-bottom:0}
  .top.open .nav-links .only-m{color:var(--spark);font-family:var(--f-mono);font-size:16px}
}
@media (max-width:374px){.top .cmd-sm{display:none}}
@media (prefers-reduced-motion:reduce){.menu-btn span,.billing label{transition:none}}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sectors{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0;font-size:15px}
.sectors span{font-family:var(--f-mono);font-size:13px;color:var(--ink);margin-right:4px}
.sectors a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-strong);color:var(--midnight);text-decoration:none;font-weight:500}
.sectors a:hover{border-color:var(--midnight)}
.plans-note{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;font-family:var(--f-mono);font-size:13px;color:var(--slate)}
.plans-note span{padding:6px 12px;border-radius:999px;background:var(--paper-200)}
.offer-band{padding-block:0 96px}
.offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:36px 40px;border-radius:var(--r-card);background:var(--midnight);color:var(--paper);background-image:radial-gradient(circle, rgba(255,251,239,.06) 1px, transparent 1.6px);background-size:24px 24px}
.offer-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.offer .eyebrow{color:var(--spark)}
.offer h2{font-size:clamp(28px,3.4vw,40px)}
.offer p{color:var(--mist);font-size:17px}
.offer strong{color:var(--paper)}
@media (max-width:760px){.offer-band{padding-block:0 56px}.offer{padding:28px 22px}.offer .cmd{width:100%;justify-content:center}}
.hero-note{margin:-8px 0 0;font-family:var(--f-mono);font-size:14px;color:var(--mist)}
.result.ok{border-left:4px solid var(--spark)}
.result.ok:focus{outline:none}
.result.ok a{color:var(--link);font-weight:600}
.form-card button[disabled]{opacity:.75;cursor:default}
.wa-fab{display:none}
@media (max-width:760px){
  .wa-fab{position:fixed;z-index:40;right:max(14px, env(safe-area-inset-right, 0px));bottom:calc(14px + env(safe-area-inset-bottom, 0px));display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px 0 16px;border-radius:999px;background:var(--spark);color:var(--midnight);font-family:var(--f-mono);font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 12px 28px rgba(7,19,31,.35);border:2px solid var(--midnight)}
  .wa-fab:active{transform:scale(.97)}
  .wa-fab:focus-visible{outline:3px solid var(--link);outline-offset:3px}
  body:has(.cc:not([hidden])) .wa-fab, body:has(.top.open) .wa-fab, body.at-contact .wa-fab{display:none}
  .foot .wrap{padding-bottom:96px}
}
.sector-hero .hero-copy{padding-block:64px 56px}
.crumbs{font-family:var(--f-mono);font-size:13px;color:var(--mist)}
.crumbs a{color:var(--mist)}
.case{display:grid;gap:24px 40px;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));align-items:center}
.case .project{max-width:560px}
.case-copy{display:flex;flex-direction:column;gap:14px}
.case-copy p{color:var(--slate);font-size:17px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.plans-2{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
@media (max-width:760px){.sector-hero .hero-copy{padding-block:32px}}