/* ============ TOKENS ============ */
    :root{
      --void:#050507;
      --panel:#0b0b11;
      --line:rgba(227,24,55,.22);
      --line-soft:rgba(155,163,173,.14);
      --red:#e31837;
      --red-hot:#ff2a45;
      --red-deep:#7a0c1e;
      --silver:#9ba3ad;
      --white:#f4f5f7;
      --display:'Unbounded',sans-serif;
      --body:'Archivo',sans-serif;
      --mono:'Chakra Petch',monospace;
      --nav-h:72px;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      background:var(--void);
      color:var(--white);
      font-family:var(--body);
      font-size:17px;
      line-height:1.65;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
    }
    ::selection{background:var(--red);color:var(--white)}
    img{max-width:100%;display:block}
    a{color:inherit}
    
    /* ============ WEBGL STAGE ============ */
    #stage{
      position:fixed;inset:0;
      z-index:0;
      pointer-events:none;
    }
    #stage canvas{display:block;width:100%;height:100%}
    
    /* atmosphere overlays */
    .fx-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
      background:radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);}
    .fx-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px);}
    .fx-grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:1;pointer-events:none;opacity:.05;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
      animation:grain 7s steps(10) infinite;}
    @keyframes grain{
      0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-6%)}30%{transform:translate(4%,3%)}
      50%{transform:translate(-3%,6%)}70%{transform:translate(5%,-4%)}90%{transform:translate(-5%,2%)}}
    
    /* ============ LOADER ============ */
    #loader{
      position:fixed;inset:0;z-index:200;background:var(--void);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
      transition:opacity .7s ease, visibility .7s;
    }
    #loader.done{opacity:0;visibility:hidden}
    .loader-mark{font-family:var(--display);font-weight:800;font-size:56px;color:var(--red);
      text-shadow:0 0 30px rgba(227,24,55,.6);animation:pulse 1.1s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}
    .loader-log{font-family:var(--mono);font-size:12px;color:var(--silver);letter-spacing:.14em;text-align:center;min-height:1.5em}
    .loader-bar{width:180px;height:1px;background:var(--line-soft);position:relative;overflow:hidden}
    .loader-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);box-shadow:0 0 12px var(--red);transition:width .25s}
    
    /* ============ CURSOR ============ */
    #cur-dot,#cur-ring{position:fixed;top:0;left:0;z-index:150;pointer-events:none;border-radius:50%;display:none}
    #cur-dot{width:7px;height:7px;background:var(--red-hot);box-shadow:0 0 10px var(--red-hot)}
    #cur-ring{width:34px;height:34px;border:1px solid rgba(227,24,55,.55);transition:width .25s,height .25s,border-color .25s}
    #cur-ring.hot{width:58px;height:58px;border-color:var(--red-hot)}
    @media(pointer:fine){
      #cur-dot,#cur-ring{display:block}
      body{cursor:none}
      a,button,summary{cursor:none}
    }
    
    /* ============ HUD CHROME ============ */
    .hud-corner{position:fixed;z-index:40;width:26px;height:26px;pointer-events:none;opacity:.7}
    .hud-corner::before,.hud-corner::after{content:"";position:absolute;background:var(--red)}
    .hud-corner::before{width:100%;height:1px}
    .hud-corner::after{width:1px;height:100%}
    .hc-tl{top:14px;left:14px}.hc-tl::before{top:0;left:0}.hc-tl::after{top:0;left:0}
    .hc-tr{top:14px;right:14px}.hc-tr::before{top:0;right:0}.hc-tr::after{top:0;right:0}
    .hc-bl{bottom:14px;left:14px}.hc-bl::before{bottom:0;left:0}.hc-bl::after{bottom:0;left:0}
    .hc-br{bottom:14px;right:14px}.hc-br::before{bottom:0;right:0}.hc-br::after{bottom:0;right:0}
    
    #hud-readout {
    position: fixed;
    left: 26px;
    bottom: 24px;
    z-index: 40;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--silver);
    pointer-events: none;
    line-height: 1.9;
    opacity: 0;
}
    #hud-readout b{color:var(--red-hot);font-weight:600}
    @media(max-width:760px){#hud-readout{display:none}}
    
    /* right rail */
    #rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:16px}
    #rail a{width:9px;height:9px;border:1px solid var(--silver);border-radius:50%;display:block;position:relative;transition:.3s;opacity:.55}
    #rail a.on{background:var(--red);border-color:var(--red);box-shadow:0 0 12px var(--red);opacity:1}
    #rail a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;
      letter-spacing:.2em;color:var(--silver);white-space:nowrap;opacity:0;transition:.25s;text-transform:uppercase}
    #rail a:hover span{opacity:1;color:var(--white)}
    @media(max-width:1180px){#rail{display:none}}
    
    /* ============ NAV ============ */
    nav{
      position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
      display:flex;align-items:center;justify-content:space-between;
      padding:0 34px;transition:.4s;
    }
    nav.scrolled{background:rgba(5,5,7,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
    .brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
    .brand .xs{font-family:var(--display);font-weight:800;font-size:24px;color:var(--red);
      text-shadow:0 0 18px rgba(227,24,55,.5)}
    .brand .full{font-family:var(--mono);font-size:10px;letter-spacing:.34em;color:var(--silver);text-transform:uppercase}
    .nav-links{display:flex;gap:30px;list-style:none}
    .nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
      color:var(--silver);text-decoration:none;transition:.25s;position:relative}
    .nav-links a:hover{color:var(--white)}
    .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--red);transition:.3s}
    .nav-links a:hover::after{width:100%}
    @media(max-width:900px){.nav-links{display:none}.brand .full{display:none}}
    
    /* buttons */
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
      padding:15px 28px;text-decoration:none;position:relative;
      border:1px solid var(--red);color:var(--white);background:rgba(227,24,55,.08);
      transition:.3s;overflow:hidden;will-change:transform;
    }
    .btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.6,0,.2,1);z-index:-1}
    .btn:hover::before{transform:scaleX(1)}
    .btn:hover{box-shadow:0 0 30px rgba(227,24,55,.45)}
    .btn .arr{transition:transform .3s}
    .btn:hover .arr{transform:translateX(5px)}
    .btn.ghost{border-color:var(--line-soft);background:transparent}
    .btn.ghost::before{background:rgba(244,245,247,.08)}
    .btn.ghost:hover{border-color:var(--silver);box-shadow:none}
    .btn.sm{padding:11px 20px;font-size:11px}
    
    /* ============ LAYOUT ============ */
    main{position:relative;z-index:10}
    section{position:relative;padding:0 8vw}
    .wrap{max-width:1200px;margin:0 auto;width:100%}
    .eyebrow{
      font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
      color:var(--red-hot);display:flex;align-items:center;gap:14px;margin-bottom:26px;
    }
    .eyebrow::before{content:"";width:34px;height:1px;background:var(--red)}
    h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.06;letter-spacing:-.01em}
    h1{font-size:clamp(2.4rem,7.2vw,5.6rem)}
    h2{font-size:clamp(1.9rem,4.6vw,3.4rem);margin-bottom:26px}
    .lede{color:var(--silver);font-size:clamp(1rem,1.4vw,1.2rem);max-width:56ch}
    .glass{
      background:rgba(6,6,10,.5);backdrop-filter:blur(6px);
      border:1px solid var(--line-soft);padding:clamp(26px,4vw,54px);
    }
    
    /* reveal */
    .rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
    .rv.in{opacity:1;transform:none}
    
    /* ============ HERO ============ */
    #hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h)}
    #hero .wrap{position:relative}
    .hero-tag{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--silver);margin-bottom:22px;text-transform:uppercase}
    .hero-tag b{color:var(--red-hot);font-weight:600}
    #hero h1 .ghost-line{color:transparent;-webkit-text-stroke:1px rgba(244,245,247,.55)}
    #hero h1 .red-line{color:var(--red);text-shadow:0 0 42px rgba(227,24,55,.5)}
    .hero-sub{margin:30px 0 40px;max-width:52ch}
    .hero-ctas{display:flex;gap:18px;flex-wrap:wrap}
    .scroll-cue{
      position:absolute;left:8vw;bottom:36px;display:flex;align-items:center;gap:14px;
      font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--silver);text-transform:uppercase;
    }
    .scroll-cue i{width:1px;height:52px;background:linear-gradient(var(--red),transparent);display:block;position:relative;overflow:hidden}
    .scroll-cue i::after{content:"";position:absolute;top:-20px;left:0;width:1px;height:20px;background:var(--white);animation:drop 1.8s ease-in-out infinite}
    @keyframes drop{to{top:60px}}
    
    /* ============ TICKER ============ */
    .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      overflow:hidden;padding:16px 0;background:rgba(227,24,55,.04);white-space:nowrap}
    .ticker-track{display:inline-flex;gap:0;animation:tick 26s linear infinite}
    .ticker span{font-family:var(--mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--silver);padding:0 22px}
    .ticker b{color:var(--red-hot);font-weight:400;padding:0 4px}
    @keyframes tick{to{transform:translateX(-50%)}}
    
    /* ============ MANIFESTO ============ */
    #manifesto{min-height:110vh;display:flex;align-items:center}
    #manifesto .big{
      font-family:var(--display);font-weight:700;text-transform:uppercase;
      font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.28;max-width:22ch;
    }
    #manifesto .big em{font-style:normal;color:var(--red)}
    #manifesto .lede{margin-top:30px}
    
    /* ============ SERVICES ============ */
    #services{padding-top:16vh;padding-bottom:16vh}
    .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:44px}
    .svc{
      background:rgba(6,6,10,.72);backdrop-filter:blur(6px);padding:36px 30px;position:relative;overflow:hidden;
      transition:.35s;
    }
    .svc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:.35s}
    .svc:hover{background:rgba(227,24,55,.07)}
    .svc:hover::after{transform:scaleY(1)}
    .svc .idx{font-family:var(--mono);font-size:11px;color:var(--red-hot);letter-spacing:.2em;display:block;margin-bottom:16px}
    .svc h3{font-family:var(--display);font-weight:700;font-size:1.02rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px;line-height:1.3}
    .svc p{color:var(--silver);font-size:.94rem}
    
    /* ============ SECTORS ============ */
    #sectors{min-height:110vh;display:flex;align-items:center;padding-top:10vh;padding-bottom:10vh}
    .sector-list{margin-top:40px;border-top:1px solid var(--line-soft)}
    .sector{
      display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:24px;
      padding:26px 6px;border-bottom:1px solid var(--line-soft);transition:.3s;position:relative;
    }
    .sector:hover{background:rgba(227,24,55,.05);padding-left:18px}
    .sector .num{font-family:var(--mono);font-size:12px;color:var(--red-hot);letter-spacing:.2em}
    .sector .name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,2.4vw,1.7rem)}
    .sector .desc{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--silver);text-transform:uppercase;text-align:right}
    @media(max-width:700px){.sector{grid-template-columns:44px 1fr}.sector .desc{display:none}}
    
    /* ============ LEAD FORM ============ */
    #lead-form{width:100%;max-width:720px;text-align:left;position:relative}
    .form-head{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--red-hot);margin-bottom:26px;text-transform:uppercase}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;position:relative}
    .field{display:flex;flex-direction:column;gap:9px}
    .field.full{grid-column:1 / -1}
    .field label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
    .field input,.field select,.field textarea{
      font-family:var(--body);font-size:16px;color:var(--white);
      background:rgba(244,245,247,.04);border:1px solid var(--line-soft);
      padding:14px 16px;border-radius:0;transition:border-color .25s, box-shadow .25s;
      appearance:none;-webkit-appearance:none;width:100%;
    }
    .field textarea{resize:vertical;min-height:110px}
    .field select{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e31837' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer;
    }
    .field select option{background:var(--panel);color:var(--white)}
    .field input::placeholder,.field textarea::placeholder{color:rgba(155,163,173,.45)}
    .field input:focus,.field select:focus,.field textarea:focus{
      outline:none;border-color:var(--red);box-shadow:0 0 0 1px var(--red), 0 0 22px rgba(227,24,55,.22);
    }
    .field input.err,.field textarea.err{border-color:var(--red-hot);box-shadow:0 0 0 1px var(--red-hot)}
    .form-foot{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}
    .form-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--silver);text-transform:uppercase}
    .form-note.ok{color:#6ee7a0}
    .form-note.bad{color:var(--red-hot)}
    
    /* ============ PROCESS ============ */
    #process{padding-top:12vh;padding-bottom:12vh}
    .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:44px}
    .step{position:relative;padding:28px 24px;border:1px solid var(--line-soft);background:rgba(6,6,10,.55)}
    .step .n{font-family:var(--display);font-weight:800;font-size:2.4rem;color:transparent;-webkit-text-stroke:1px var(--red);display:block;margin-bottom:14px}
    .step h3{font-family:var(--display);font-weight:700;font-size:1rem;text-transform:uppercase;margin-bottom:10px}
    .step p{color:var(--silver);font-size:.92rem}
    
    /* ============ FAQ ============ */
    #faq{padding-top:10vh;padding-bottom:12vh}
    .faq-list{margin-top:38px;border-top:1px solid var(--line-soft)}
    details{border-bottom:1px solid var(--line-soft)}
    summary{
      list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
      padding:24px 4px;font-family:var(--display);font-weight:700;font-size:1.02rem;text-transform:uppercase;
      transition:color .25s;
    }
    summary::-webkit-details-marker{display:none}
    summary:hover{color:var(--red-hot)}
    summary .pm{font-family:var(--mono);color:var(--red-hot);font-size:20px;transition:transform .3s;flex-shrink:0}
    details[open] .pm{transform:rotate(45deg)}
    details .ans{padding:0 4px 26px;color:var(--silver);max-width:70ch}
    
    /* ============ CTA ============ */
    #contact{min-height:100vh;display:flex;align-items:center;text-align:center;padding-top:10vh;padding-bottom:10vh}
    #contact .wrap{display:flex;flex-direction:column;align-items:center;gap:34px}
    #contact h2{font-size:clamp(2.2rem,6vw,4.6rem);margin-bottom:0}
    #contact h2 .red{color:var(--red);text-shadow:0 0 40px rgba(227,24,55,.5)}
    #contact .lede{text-align:center}
    
    /* ============ FOOTER ============ */
    footer{
      position:relative;z-index:10;border-top:1px solid var(--line-soft);
      padding:34px 8vw;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
      font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;
      background:rgba(5,5,7,.7);backdrop-filter:blur(8px);
    }
    footer .f-links{display:flex;gap:24px}
    footer a{text-decoration:none;color:var(--silver);transition:.25s}
    footer a:hover{color:var(--red-hot)}
    
    /* skip link */
    .skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--red);color:#fff;padding:10px 18px;font-family:var(--mono)}
    .skip:focus{left:0}
    :focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}
    
    /* ============ MOBILE PASS ============ */
    @media(max-width:760px){
      :root{--nav-h:62px}
      body{font-size:16px}
      section{padding:0 22px}
      nav{padding:0 18px}
      .brand .xs{font-size:20px}
      .btn{padding:13px 20px;font-size:11px;letter-spacing:.14em}
      .btn.sm{padding:10px 14px;font-size:10px}
      #hero{min-height:100svh}
      #hero h1{font-size:clamp(2.1rem,11vw,3rem)}
      .hero-sub{margin:24px 0 30px}
      .hero-ctas{gap:12px}
      .hero-ctas .btn{flex:1 1 auto;justify-content:center;text-align:center}
      .scroll-cue{left:22px;bottom:22px}
      #manifesto,#sectors{min-height:auto;padding-top:16vh;padding-bottom:16vh}
      #services,#process,#faq{padding-top:12vh;padding-bottom:12vh}
      .svc{padding:26px 20px}
      .svc-grid,.steps{margin-top:32px}
      .sector{padding:20px 4px;gap:14px}
      .sector:hover{padding-left:4px}
      #contact{padding-top:14vh;padding-bottom:14vh}
      #contact .wrap{gap:26px}
      .form-grid{grid-template-columns:1fr;gap:18px}
      .glass{padding:24px 18px}
      .form-foot{flex-direction:column;align-items:stretch;gap:16px;text-align:center}
      .form-foot .btn{justify-content:center}
      footer{padding:26px 22px;flex-direction:column;text-align:center}
      summary{font-size:.92rem;padding:20px 2px}
      .ticker span{font-size:11px;padding:0 14px}
      .fx-scan{display:none}
    }
    @media(max-width:400px){
      #hero h1{font-size:2rem}
      h2{font-size:1.7rem}
    }
    
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
      html{scroll-behavior:auto}
      .rv{opacity:1;transform:none}
    }