:root{
    --ink:#eceae4;
    --ink-dim:#9a9d9f;
    --bg:#0c0e10;
    --bg-2:#111417;
    --panel:#15181c;
    --line: rgba(236,234,228,.12);
    --orange:#ff5a1f;
    --orange-dim:#c8430f;
    --blue:#5b8cd6;
    --blue-dim:#2f4f7e;
    --radius:10px;
    --max:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Public Sans",system-ui,-apple-system,sans-serif;
    line-height:1.6; overflow-x:hidden;
  }
  a{color:inherit} img,svg{display:block}
  .wrap{width:min(var(--max), calc(100% - 48px)); margin-inline:auto; position:relative; z-index:2}
  h1,h2,h3{font-family:"Big Shoulders Display",sans-serif; font-weight:800; margin:0; letter-spacing:.005em; text-transform:uppercase; color:var(--ink)}
  h2{font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.02}
  h3{font-size:1.35rem; line-height:1.1}
  p{margin:0}
  .mono{font-family:"Space Mono",monospace}
  .lede{max-width:52ch; color:var(--ink-dim); font-size:1.05rem}
  .eyebrow{display:flex; align-items:center; gap:10px; font-family:"Space Mono",monospace; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); margin:0 0 16px}
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--orange)}

  /* ambient particle canvas */
  #ambient{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5}

  header{position:fixed; top:0; left:0; right:0; z-index:60; padding:22px 0; border-bottom:1px solid transparent; transition:.25s}
  header.scrolled{background:rgba(12,14,16,.9); backdrop-filter:blur(8px); border-color:var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
  .brand{display:flex; align-items:center; gap:10px; font-family:"Big Shoulders Display"; font-weight:800; font-size:1.2rem; text-decoration:none; color:var(--ink); text-transform:uppercase; letter-spacing:.02em}
  .brand svg{width:26px;height:26px}
  .navlinks{display:flex; gap:30px; list-style:none; margin:0; padding:0}
  .navlinks a{text-decoration:none; font-size:.86rem; color:var(--ink-dim); border-bottom:1px solid transparent; padding-bottom:3px; transition:.2s}
  .navlinks a:hover{color:var(--ink); border-color:var(--orange)}
  .nav-cta{font-size:.82rem; font-weight:700; text-decoration:none; color:#1a0900; background:var(--orange); padding:11px 20px; border-radius:4px; transition:.2s; white-space:nowrap}
  .nav-cta:hover{background:#ff7440}

  .hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:150px 0 80px;
    background-image:
      linear-gradient(rgba(12,14,16,.2), rgba(12,14,16,.75)),
      repeating-linear-gradient(0deg, rgba(91,140,214,.07) 0 1px, transparent 1px 48px),
      repeating-linear-gradient(90deg, rgba(91,140,214,.07) 0 1px, transparent 1px 48px);
  }
  .hero-inner{max-width:760px}
  .hero h1{font-size:clamp(3rem,7vw,5.6rem); line-height:.96}
  .split-word{display:inline-block; overflow:hidden; vertical-align:top}
  .split-word span{display:inline-block; transform:translateY(112%); animation:rise .78s cubic-bezier(.2,.9,.2,1) forwards}
  @keyframes rise{to{transform:translateY(0)}}
  .hero-sub{opacity:0; animation:fadein .8s ease forwards; animation-delay:.85s; margin-top:26px}
  @keyframes fadein{to{opacity:1}}
  .hero-cta{opacity:0; animation:fadein .8s ease forwards; animation-delay:1.05s; margin-top:34px; display:flex; gap:16px; flex-wrap:wrap}
  .btn{display:inline-flex; align-items:center; gap:9px; font-size:.92rem; font-weight:700; text-decoration:none; padding:15px 26px; border-radius:4px; transition:transform .15s ease, background .2s ease}
  .btn-primary{background:var(--orange); color:#1a0900}
  .btn-primary:hover{background:#ff7440}
  .btn-ghost{border:1px solid var(--line); color:var(--ink)}
  .btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
  #magnetBtn{position:relative}

  .hero-stats{opacity:0; animation:fadein .8s ease forwards; animation-delay:1.25s; display:flex; gap:40px; margin-top:56px; flex-wrap:wrap}
  .hstat b{font-family:"Big Shoulders Display"; font-size:2.2rem; display:block; color:var(--ink)}
  .hstat span{font-size:.78rem; color:var(--ink-dim); font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:.04em}

  .section{padding:110px 0; position:relative; z-index:2}
  .section-head{max-width:640px; margin-bottom:56px}

  /* services: spotlight cards */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .scard{
    position:relative; background:var(--panel); padding:34px 28px; overflow:hidden;
  }
  .scard::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
    background:radial-gradient(260px circle at var(--x,50%) var(--y,50%), rgba(255,90,31,.15), transparent 70%);
  }
  .scard:hover::before{opacity:1}
  .scard-icon{width:40px;height:40px; margin-bottom:20px; color:var(--orange)}
  .scard h3{position:relative}
  .scard p{position:relative; margin-top:12px; color:var(--ink-dim); font-size:.92rem}

  /* process: numbered sequence */
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
  .process::before{content:""; position:absolute; top:26px; left:0; right:0; height:1px; background:var(--line)}
  .pstep{position:relative; padding-right:24px}
  .pstep .num{
    width:52px; height:52px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-family:"Space Mono"; font-size:.9rem; color:var(--orange);
    position:relative; z-index:2; margin-bottom:22px;
  }
  .pstep h3{font-size:1.1rem}
  .pstep p{margin-top:10px; font-size:.88rem; color:var(--ink-dim)}

  /* blueprint draw-on illustration */
  .blueprint{
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  }
  .bp-svg{width:100%; height:auto}
  .bp-svg path, .bp-svg line{
    fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:1600; stroke-dashoffset:1600; transition:stroke-dashoffset 2.2s cubic-bezier(.16,.8,.2,1);
  }
  .blueprint.on .bp-svg path, .blueprint.on .bp-svg line{stroke-dashoffset:0}
  .bp-note{margin-top:22px; display:flex; flex-direction:column; gap:12px}
  .bp-note li{list-style:none; display:flex; gap:10px; font-size:.9rem; color:var(--ink-dim)}
  .bp-note li::before{content:"—"; color:var(--blue)}

  .stats-band{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .sitem{background:var(--bg-2); padding:36px 24px; text-align:center}
  .sitem b{display:block; font-family:"Big Shoulders Display"; font-size:2.6rem; color:var(--orange)}
  .sitem span{font-size:.78rem; color:var(--ink-dim); font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:.03em}

  .cta-band{padding:120px 0; text-align:center; border-top:1px solid var(--line)}
  .cta-band h2{max-width:16ch; margin-inline:auto}
  .cta-band p{margin-top:16px; color:var(--ink-dim)}
  .cta-band .hero-cta{justify-content:center; animation:none; opacity:1; margin-top:32px}

  footer{padding:40px 0; border-top:1px solid var(--line)}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:28px}
  .footer-grid h4{font-family:"Space Mono"; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); margin:0 0 14px}
  .footer-grid p, .footer-grid a{font-size:.9rem; color:var(--ink-dim); text-decoration:none; display:block; margin-bottom:8px}
  .footer-grid a:hover{color:var(--orange)}
  .footer-bottom{border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-dim)}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
  .reveal.visible{opacity:1; transform:none}

  @media (max-width:900px){
    .services-grid{grid-template-columns:1fr}
    .process{grid-template-columns:1fr 1fr; row-gap:32px}
    .process::before{display:none}
    .blueprint{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr}
    .navlinks{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .split-word span,.hero-sub,.hero-cta,.hero-stats{animation:none; opacity:1; transform:none}
    .reveal{opacity:1; transform:none; transition:none}
    .bp-svg path,.bp-svg line{transition:none; stroke-dashoffset:0}
  }