:root{
    --ink:#0B1220;
    --ink-2:#111B2E;
    --ink-3:#182543;
    --paper:#F6F7F9;
    --paper-2:#ECEEF2;
    --line-dark:rgba(255,255,255,0.10);
    --line-light:rgba(11,18,32,0.10);
    --signal:#38BCF7;
    --signal-deep:#1C7FB8;
    --signal-dim:rgba(56,188,247,0.14);
    --text-dark:#E9EDF3;
    --text-dark-muted:#93A0B8;
    --text-light:#0B1220;
    --text-light-muted:#5B6577;
    --radius:2px;
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html{max-width:100%;overflow-x:hidden;}
  body{max-width:100%;}
  body{
    background:var(--paper);
    color:var(--text-light);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    cursor:default;
  }
  body.loaded{ }

  /* ===== cursor glow (premium ambient light that tracks the pointer) ===== */
  #cursorGlow{
    position:fixed; top:0; left:0;
    width:520px;height:520px;
    margin-left:-260px;margin-top:-260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(56,188,247,0.14), rgba(56,188,247,0) 70%);
    pointer-events:none;
    z-index:2;
    opacity:0;
    transition:opacity .5s var(--ease-out);
    will-change:transform;
  }
  #cursorGlow.active{opacity:1;}
  @media(max-width:860px), (hover:none){ #cursorGlow{display:none;} }
  @media (prefers-reduced-motion: reduce){ #cursorGlow{display:none;} }

  /* ===== scroll-reveal system ===== */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay:calc(var(--d, 0) * 70ms);
  }
  .reveal.in-view{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.08;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){ .wrap{padding:0 20px;} }
  @media(max-width:400px){ .wrap{padding:0 16px;} }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--signal);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:16px;height:1px;
    background:var(--signal);
    display:inline-block;
  }
  section.dark .eyebrow, header .eyebrow{color:var(--signal);}
  section.light .eyebrow{color:var(--signal-deep);}

  /* ===== visually-hidden ===== */
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

  /* ===== focus ===== */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--signal);
    outline-offset:3px;
  }

  /* ===== progress rule signature ===== */
  .loadbar{
    height:2px;width:100%;
    background:var(--line-dark);
    position:relative;
    overflow:hidden;
  }
  section.light .loadbar{background:var(--line-light);}
  .loadbar span{
    position:absolute;left:0;top:0;bottom:0;
    width:0%;
    background:linear-gradient(90deg,var(--signal-deep),var(--signal));
    animation:fill 1.8s cubic-bezier(.2,.8,.3,1) forwards;
    animation-play-state:paused;
  }
  .loadbar.run span{animation-play-state:running;}
  @keyframes fill{ to{ width:100%; } }
  @media (prefers-reduced-motion: reduce){
    .loadbar span{animation:none;width:100%;}
  }

  /* ===== scroll progress ===== */
  #scrollProgress{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:100;
    background:linear-gradient(90deg,var(--signal-deep),var(--signal));
    transform:scaleX(0);
    transform-origin:0 50%;
    will-change:transform;
  }

  /* ===== header ===== */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(11,18,32,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-dark);
    transition:padding .4s var(--ease-out), background .4s var(--ease-out), box-shadow .4s var(--ease-out);
  }
  /* below the nav-link breakpoint, force the header to stay fixed to the
     viewport at all times (not just "sticky") so the hamburger button is
     always reachable no matter how far down the page — including the
     footer — without having to scroll back up first. */
  @media(max-width:859px){
    header{position:fixed;top:0;left:0;right:0;}
    body{padding-top:70px;}
  }
  @media(max-width:640px){ body{padding-top:66px;} }
  @media(max-width:400px){ body{padding-top:62px;} }
  header.scrolled{
    background:rgba(11,18,32,0.94);
    box-shadow:0 20px 40px -24px rgba(0,0,0,0.5);
  }
  header.scrolled .nav{padding-top:12px;padding-bottom:12px;}
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;
    padding:16px 32px;
    max-width:1180px;margin:0 auto;
    color:var(--text-dark);
    transition:padding .4s var(--ease-out);
  }
  @media(max-width:640px){ .nav{padding:14px 20px;} }
  @media(max-width:400px){ .nav{padding:12px 16px;} }
  .brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:#fff;margin-right:auto;}
  @media(max-width:360px){ .brand{font-size:16px;} }
  .brand img{width:22px;height:auto;transition:transform .5s var(--ease-spring);}
  .brand:hover img{transform:rotate(-8deg) scale(1.08);}
  .navlinks{display:flex;align-items:center;gap:22px;font-size:13px;color:var(--text-dark-muted);}
  .navlinks a{position:relative;padding:4px 0;transition:color .25s ease;}
  .navlinks a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
    background:var(--signal);
    transition:right .35s var(--ease-out);
  }
  .navlinks a:hover{color:#fff;}
  .navlinks a:hover::after{right:0;}
  .navlinks a.active{color:#fff;}
  .navlinks a.active::after{right:0;background:var(--signal);}
  .navlinks{display:none;}
  @media(min-width:860px){.navlinks{display:flex;}}

  /* ===== mobile hamburger toggle ===== */
  .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:40px;height:40px;flex-shrink:0;
    background:transparent;border:1px solid var(--line-dark);border-radius:var(--radius);
    padding:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle span{
    width:18px;height:1.5px;background:#fff;display:block;
    transition:transform .35s var(--ease-out), opacity .25s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  @media(min-width:860px){ .menu-toggle{display:none;} }

  /* header CTA button: hidden on mobile widths, shown from 860px, and re-shown inside the mobile menu */
  .nav-cta{display:none;}
  @media(min-width:860px){ .nav-cta{display:inline-flex;} }

  /* ===== mobile menu drawer ===== */
  .mobile-menu{
    display:flex;flex-direction:column;
    position:fixed;top:0;right:0;
    width:min(86vw,360px);height:100dvh;
    background:rgba(11,18,32,0.98);
    backdrop-filter:blur(14px);
    border-left:1px solid var(--line-dark);
    padding:96px 32px 32px;
    gap:6px;
    transform:translateX(100%);
    transition:transform .45s var(--ease-out);
    z-index:49;
    overflow-y:auto;
  }
  .mobile-menu.open{transform:translateX(0);}
  .mobile-menu a{
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;color:var(--text-dark);
    padding:14px 4px;
    border-bottom:1px solid var(--line-dark);
    transition:color .25s ease, padding-left .25s ease;
  }
  .mobile-menu a:hover, .mobile-menu a:active{color:var(--signal);padding-left:8px;}
  .mobile-menu a.active{color:var(--signal);}
  .mobile-menu a.btn{
    margin-top:22px;border-bottom:none;
    justify-content:center;font-size:14px;
  }
  @media(min-width:860px){ .mobile-menu{display:none;} }
  @media (prefers-reduced-motion: reduce){ .mobile-menu{transition:none;} .menu-toggle span{transition:none;} }

  /* backdrop behind the drawer */
  body.menu-open{overflow:hidden;}
  .menu-backdrop{
    display:none;
    position:fixed;inset:0;z-index:48;
    background:rgba(11,18,32,0.55);
    opacity:0;transition:opacity .35s var(--ease-out);
  }
  body.menu-open .menu-backdrop{display:block;opacity:1;}
  @media(min-width:860px){ .menu-backdrop{display:none !important;} }
  .btn{
    position:relative;
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;letter-spacing:0.02em;
    padding:11px 20px;
    min-height:44px;
    border:1px solid var(--signal);
    color:var(--signal);
    border-radius:var(--radius);
    white-space:nowrap;
    overflow:hidden;
    transition:background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
    will-change:transform;
  }
  .btn::before{
    content:"";
    position:absolute;top:0;bottom:0;left:-60%;width:40%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:skewX(-20deg);
    transition:left .7s var(--ease-out);
    pointer-events:none;
  }
  .btn:hover::before{left:130%;}
  .btn:hover{background:var(--signal);color:var(--ink);box-shadow:0 10px 30px -10px var(--signal-dim);}
  .btn.solid{background:var(--signal);color:var(--ink);}
  .btn.solid:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff;box-shadow:0 14px 34px -12px rgba(28,127,184,0.55);}
  @media (prefers-reduced-motion: reduce){ .btn{transition:background .18s ease,color .18s ease;} .btn::before{display:none;} }

  /* ===== hero ===== */
  .hero{
    background:var(--ink);
    color:var(--text-dark);
    padding:96px 0 0;
    position:relative;
    overflow:hidden;
  }
  @media(max-width:640px){ .hero{padding:64px 0 0;} }
  .hero::before{
    content:"";
    position:absolute;
    top:-200px;right:-200px;
    width:600px;height:600px;
    background:radial-gradient(circle, rgba(56,188,247,0.14), transparent 70%);
    pointer-events:none;
    animation:driftA 22s var(--ease-in-out) infinite alternate;
  }
  .hero::after{
    content:"";
    position:absolute;
    bottom:-260px;left:-160px;
    width:520px;height:520px;
    background:radial-gradient(circle, rgba(28,127,184,0.16), transparent 70%);
    pointer-events:none;
    animation:driftB 26s var(--ease-in-out) infinite alternate;
  }
  @keyframes driftA{ from{transform:translate(0,0) scale(1);} to{transform:translate(-60px,50px) scale(1.12);} }
  @keyframes driftB{ from{transform:translate(0,0) scale(1);} to{transform:translate(40px,-40px) scale(1.08);} }
  @media (prefers-reduced-motion: reduce){ .hero::before, .hero::after{animation:none;} }

  /* ===== hero background photo (very opaque dark scrim over the image) ===== */
  .hero.hero-photo{
    background-image:
      linear-gradient(180deg, rgba(11,18,32,0.42), rgba(11,18,32,0.55)),
      var(--hero-img);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-blend-mode:normal;
  }
  .hero.hero-photo .eyebrow,
  .hero.hero-photo h1, .hero.hero-photo h2,
  .hero.hero-photo .section-head p, .hero.hero-photo p.lead{
    text-shadow:0 2px 16px rgba(0,0,0,0.55);
  }
  .hero h1, .hero h2{color:#fff;}
  .hero .section-head p{color:#fff;}

  /* compact hero used on inner pages that just need an intro strip
     (no headline grid / mockup), sized independently from the homepage hero */
  .hero.hero--sub{padding:150px 0 96px;}
  @media(max-width:760px){ .hero.hero--sub{padding:112px 0 64px;} }
  @media(max-width:480px){ .hero.hero--sub{padding:96px 0 56px;} }
  .hero-grid{
    display:grid;grid-template-columns:1fr;gap:56px;
    align-items:end;
    position:relative;z-index:1;
  }
  @media(min-width:960px){ .hero-grid{grid-template-columns:1.15fr 0.85fr;} }
  .hero h1{
    font-size:clamp(38px,5.4vw,68px);
    color:#fff;
    max-width:16ch;
    opacity:0;
    transform:translateY(24px);
    animation:heroIn .9s var(--ease-out) forwards;
    animation-delay:.1s;
  }
  .hero p.lead{
    margin-top:24px;
    font-size:18px;
    color:#fff;
    max-width:46ch;
    opacity:0;
    transform:translateY(24px);
    animation:heroIn .9s var(--ease-out) forwards;
    animation-delay:.25s;
  }
  .hero-ctas{
    display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;
    opacity:0;
    transform:translateY(24px);
    animation:heroIn .9s var(--ease-out) forwards;
    animation-delay:.4s;
  }
  @media(max-width:480px){
    .hero-ctas{flex-direction:column;align-items:stretch;}
    .hero-ctas .btn{justify-content:center;width:100%;}
  }
  @keyframes heroIn{ to{opacity:1;transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){
    .hero h1, .hero p.lead, .hero-ctas{animation:none;opacity:1;transform:none;}
  }

  .browser{
    background:var(--ink-2);
    border:1px solid var(--line-dark);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
    opacity:0;
    transform:translateY(36px) scale(.98);
    animation:heroIn .9s var(--ease-out) forwards;
    animation-delay:.35s;
    transition:transform .12s linear, box-shadow .4s var(--ease-out);
    transform-style:preserve-3d;
    will-change:transform;
  }
  .browser:hover{box-shadow:0 50px 100px -30px rgba(0,0,0,0.7);}
  @media (prefers-reduced-motion: reduce){ .browser{animation:none;opacity:1;transform:none;} }
  .browser-bar{
    display:flex;align-items:center;gap:8px;
    padding:12px 14px;
    background:var(--ink-3);
    border-bottom:1px solid var(--line-dark);
  }
  .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18);}
  .browser-url{
    margin-left:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--text-dark-muted);
    background:rgba(255,255,255,0.04);
    border-radius:4px;
    padding:5px 10px;
    flex:1;
  }
  .browser-body{padding:26px 24px 28px;}
  .browser-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dark-muted);}
  .browser-row b{color:#fff;font-weight:500;}
  .browser .loadbar{margin:14px 0 16px;}
  .browser-status{
    display:flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--signal);
    opacity:0;
    animation:reveal .4s ease forwards;
    animation-delay:1.9s;
  }
  @media (prefers-reduced-motion: reduce){ .browser-status{opacity:1;animation:none;} }
  @keyframes reveal{ to{opacity:1;} }
  .check{
    width:16px;height:16px;border-radius:50%;
    border:1px solid var(--signal);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10px;
  }
  .hero-strip{
    margin-top:64px;
    border-top:1px solid var(--line-dark);
    display:grid;grid-template-columns:repeat(2,1fr);
  }
  @media(min-width:760px){ .hero-strip{grid-template-columns:repeat(4,1fr);} }
  .hero-stat{padding:20px 0 26px;border-right:1px solid var(--line-dark);text-align:center;}
  .hero-stat:nth-child(2n){border-right:none;}
  @media(min-width:760px){
    .hero-stat:nth-child(2n){border-right:1px solid var(--line-dark);}
    .hero-stat:last-child{border-right:none;}
  }
  .hero-stat{transition:background .3s ease;}
  .hero-stat:hover{background:rgba(56,188,247,0.05);}
  .hero-stat .num{font-family:'Space Grotesk',sans-serif;font-size:26px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
  .hero-stat .label{margin-top:4px;font-size:12px;color:#fff;font-family:'IBM Plex Mono',monospace;}

  /* ===== inter-page flow nav (prev/next) ===== */
  .page-flow{
    background:var(--ink);
    border-top:1px solid var(--line-dark);
    padding:40px 0;
  }
  .page-flow .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .page-flow a{display:flex;flex-direction:column;gap:4px;}
  .page-flow .pf-dir{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dark-muted);}
  .page-flow .pf-title{font-family:'Space Grotesk',sans-serif;font-size:18px;color:#fff;display:inline-block;transition:transform .3s var(--ease-out), color .3s ease;}
  .page-flow a:hover .pf-title{color:var(--signal);}
  .page-flow .next{text-align:right;margin-left:auto;}
  .page-flow a.next:hover .pf-title{transform:translateX(4px);}
  .page-flow a.prev:hover .pf-title{transform:translateX(-4px);}
  @media (prefers-reduced-motion: reduce){ .page-flow .pf-title{transition:color .2s ease;} .page-flow a:hover .pf-title{transform:none;} }

  /* ===== generic section ===== */
  section{padding:100px 0;}
  @media(max-width:760px){ section{padding:64px 0;} }
  @media(max-width:480px){ section{padding:52px 0;} }
  section.dark{background:var(--ink);color:var(--text-dark);}
  section.light{background:var(--paper);color:var(--text-light);}
  section.panel{background:var(--paper-2);}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(28px,3.4vw,42px);}
  section.light .section-head p, section.light .lead-muted{color:var(--text-light-muted);}
  section.dark .section-head p, section.dark .lead-muted{color:var(--text-dark-muted);}
  .section-head p{margin-top:16px;font-size:17px;max-width:52ch;}

  /* ===== about ===== */
  .about-grid{display:grid;grid-template-columns:1fr;gap:48px;}
  @media(min-width:900px){ .about-grid{grid-template-columns:1fr 1fr;} }
  .about-grid p{font-size:17px;color:var(--text-light-muted);margin-bottom:16px;}
  .mv-card{
    border:1px solid var(--line-light);
    padding:28px 26px;
    background:#fff;
    transition:border-color .35s ease, transform .35s var(--ease-out);
  }
  .mv-card:hover{border-color:var(--signal-deep);transform:translateX(4px);}
  @media (prefers-reduced-motion: reduce){ .mv-card{transition:none;} .mv-card:hover{transform:none;} }
  .mv-card + .mv-card{border-top:none;}
  .mv-card .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--signal-deep);text-transform:uppercase;}
  .mv-card h3{margin-top:10px;font-size:20px;font-weight:600;}

  /* ===== services ===== */
  .svc-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
  @media(min-width:700px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media(min-width:1000px){ .svc-grid{grid-template-columns:repeat(3,1fr);} }
  .svc-card{
    background:var(--ink);padding:30px 26px;
    position:relative;
    transition:background .4s var(--ease-out), transform .4s var(--ease-out);
  }
  .svc-card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(160deg, rgba(56,188,247,0.10), transparent 60%);
    opacity:0;transition:opacity .4s var(--ease-out);
    pointer-events:none;
  }
  .svc-card:hover{background:var(--ink-2);transform:translateY(-4px);}
  .svc-card:hover::before{opacity:1;}
  .svc-card .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--signal);transition:transform .4s var(--ease-spring);}
  .svc-card:hover .n{transform:translateX(4px);}
  .svc-card h3{margin-top:14px;font-size:19px;color:#fff;}
  .svc-card p{margin-top:10px;font-size:14px;color:var(--text-dark-muted);}
  @media (prefers-reduced-motion: reduce){ .svc-card{transition:none;} .svc-card:hover{transform:none;} }

  /* ===== why grid ===== */
  .why-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
  @media(min-width:640px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media(min-width:980px){ .why-grid{grid-template-columns:repeat(3,1fr);} }
  .why-card{background:var(--paper);padding:26px;transition:background .35s var(--ease-out);}
  .why-card:hover{background:#fff;}
  .why-card h4{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;}
  .why-card h4::before{
    content:"";
    width:6px;height:6px;
    background:var(--signal-deep);
    flex-shrink:0;
    transition:transform .35s var(--ease-spring), background .35s ease;
  }
  .why-card:hover h4::before{transform:scale(1.8);background:var(--signal);}
  .why-card p{margin-top:8px;font-size:14px;color:var(--text-light-muted);padding-left:16px;}

  /* ===== process ===== */
  .process-list{border-top:1px solid var(--line-dark);}
  .process-item{
    display:grid;grid-template-columns:56px 1fr;
    grid-template-areas:"idx h3" ". p";
    column-gap:20px;row-gap:6px;
    padding:26px 0;
    border-bottom:1px solid var(--line-dark);
    position:relative;
    transition:padding-left .4s var(--ease-out);
  }
  @media(min-width:700px){
    .process-item{grid-template-columns:80px 220px 1fr;grid-template-areas:"idx h3 p";column-gap:20px;row-gap:0;}
  }
  .process-item::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--signal);
    transform:scaleY(0);transform-origin:top;
    transition:transform .5s var(--ease-out);
  }
  .process-item:hover{padding-left:16px;}
  .process-item:hover::before{transform:scaleY(1);}
  .process-item .idx{grid-area:idx;font-family:'IBM Plex Mono',monospace;color:var(--signal);font-size:14px;}
  .process-item h3{grid-area:h3;font-size:19px;color:#fff;}
  .process-item p{grid-area:p;font-size:14px;color:var(--text-dark-muted);max-width:52ch;}
  @media(min-width:700px){ .process-item p{max-width:none;} }
  @media (prefers-reduced-motion: reduce){ .process-item{transition:none;} .process-item:hover{padding-left:0;} }

  /* ===== portfolio ===== */
  .case{margin-bottom:88px;}
  .case:last-child{margin-bottom:0;}
  .case-shot{
    background:var(--ink);
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--line-light);
    box-shadow:0 30px 60px -30px rgba(11,18,32,0.35);
    margin-bottom:32px;
  }
  .case-shot .browser-bar{background:#0E1424;}
  .case-shot img{width:100%;display:block;}
  .case-grid{display:grid;grid-template-columns:1fr;gap:28px;}
  @media(min-width:820px){ .case-grid{grid-template-columns:1.1fr 1fr;} }
  .case-name{font-size:26px;margin-bottom:18px;}
  .case-col .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:6px;display:block;}
  .case-col p{color:var(--text-light-muted);font-size:15px;margin-bottom:22px;}
  .case-result{
    background:var(--paper-2);
    padding:20px 22px;
    border-left:2px solid var(--signal-deep);
  }
  .case-result p{color:var(--text-light);font-size:15px;margin:0;font-weight:500;}

  /* ===== industries ===== */
  .ind-strip{
    display:flex;flex-wrap:wrap;
    border-top:1px solid var(--line-light);
    border-left:1px solid var(--line-light);
  }
  .ind-strip span{
    flex:1 1 200px;
    padding:22px 20px;
    border-right:1px solid var(--line-light);
    border-bottom:1px solid var(--line-light);
    font-family:'Space Grotesk',sans-serif;
    font-size:15px;font-weight:500;
    position:relative;
    transition:color .3s ease;
  }
  .ind-strip span::after{
    content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
    background:var(--signal-deep);
    transition:width .4s var(--ease-out);
  }
  .ind-strip span:hover{color:var(--signal-deep);}
  .ind-strip span:hover::after{width:100%;}

  /* ===== proof strip (real client names, honest) — infinite marquee ===== */
  .proof{
    border-top:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
    padding:28px 0;
    display:flex;flex-wrap:wrap;gap:14px 40px;
    align-items:center;
    justify-content:space-between;
  }
  .proof .label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dark-muted);text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;}
  .marquee{
    flex:1 1 auto;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .marquee-track{
    display:flex;width:max-content;gap:56px;
    animation:marquee 22s linear infinite;
  }
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .marquee-track span{
    font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--text-dark-muted);
    white-space:nowrap;
  }
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  /* ===== pricing ===== */
  .pricing-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
  @media(min-width:700px){ .pricing-grid{grid-template-columns:repeat(2,1fr);} }
  @media(min-width:1100px){ .pricing-grid{grid-template-columns:repeat(4,1fr);} }
  .price-card{
    background:#fff;padding:30px 26px;display:flex;flex-direction:column;
    position:relative;z-index:1;
    transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  }
  .price-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(11,18,32,0.25);z-index:2;}
  .price-card.featured{background:var(--ink);color:#fff;overflow:hidden;}
  .price-card.featured::before{
    content:"";position:absolute;top:-40%;right:-30%;width:70%;height:70%;
    background:radial-gradient(circle, rgba(56,188,247,0.22), transparent 70%);
    animation:driftA 18s var(--ease-in-out) infinite alternate;
    pointer-events:none;
  }
  .price-card.featured:hover{transform:translateY(-8px);box-shadow:0 34px 70px -26px rgba(28,127,184,0.45);}
  .price-card .tier{font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--signal-deep);}
  .price-card.featured .tier{color:var(--signal);}
  .price-card h3{margin-top:10px;font-size:22px;}
  .price-card .amount{margin-top:16px;font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;}
  @media (prefers-reduced-motion: reduce){ .price-card{transition:none;} .price-card:hover{transform:none;} .price-card.featured::before{animation:none;} }
  .price-card .amount span{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:400;color:var(--text-light-muted);}
  .price-card.featured .amount span{color:var(--text-dark-muted);}
  .price-card p.desc{margin-top:14px;font-size:14px;color:var(--text-light-muted);flex:1;}
  .price-card.featured p.desc{color:var(--text-dark-muted);}
  .price-card .btn{margin-top:22px;justify-content:center;}
  .custom-row{
    margin-top:1px;
    background:var(--paper-2);
    border:1px solid var(--line-light);
    border-top:none;
    padding:26px 30px;
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;
  }
  .custom-row h4{font-size:17px;}
  .custom-row p{font-size:14px;color:var(--text-light-muted);margin-top:4px;max-width:52ch;}
  .price-note{margin-top:18px;font-size:12px;color:var(--text-light-muted);font-family:'IBM Plex Mono',monospace;}

  /* ===== explore hub (homepage links to other pages) ===== */
  .explore-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
  @media(min-width:640px){ .explore-grid{grid-template-columns:repeat(2,1fr);} }
  @media(min-width:980px){ .explore-grid{grid-template-columns:repeat(3,1fr);} }
  .explore-card{
    background:#fff;padding:28px 26px;
    display:flex;flex-direction:column;gap:10px;
    position:relative;overflow:hidden;
    transition:background .35s var(--ease-out), transform .35s var(--ease-out);
  }
  .explore-card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(160deg, var(--signal-dim), transparent 60%);
    opacity:0;transition:opacity .35s var(--ease-out);
    pointer-events:none;
  }
  .explore-card:hover{transform:translateY(-4px);}
  .explore-card:hover::before{opacity:1;}
  .explore-card .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--signal-deep);}
  .explore-card h3{font-size:19px;}
  .explore-card p{font-size:14px;color:var(--text-light-muted);}
  .explore-card .go{
    margin-top:auto;padding-top:6px;
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--signal-deep);
    display:flex;align-items:center;gap:6px;
  }
  .explore-card .go svg{transition:transform .35s var(--ease-spring);}
  .explore-card:hover .go svg{transform:translateX(5px);}
  @media (prefers-reduced-motion: reduce){ .explore-card{transition:none;} .explore-card:hover{transform:none;} }
  .promise{
    padding:110px 0;
    background:var(--ink);
    color:#fff;
    text-align:left;
    position:relative;
    overflow:hidden;
  }
  .promise::before{
    content:"";
    position:absolute;top:-30%;left:50%;width:640px;height:640px;
    margin-left:-320px;
    background:radial-gradient(circle, rgba(56,188,247,0.10), transparent 70%);
    animation:driftA 24s var(--ease-in-out) infinite alternate;
    pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){ .promise::before{animation:none;} }
  .promise blockquote{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(28px,4.6vw,48px);
    max-width:40ch;
    line-height:1.2;
  }
  .promise blockquote span{color:var(--signal);}
  .promise cite{
    display:block;margin-top:24px;
    font-family:'IBM Plex Mono',monospace;
    font-style:normal;font-size:13px;
    color:var(--text-dark-muted);
  }

  /* ===== contact ===== */
  .contact-grid{display:grid;grid-template-columns:1fr;gap:56px;}
  @media(min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr;} }
  .contact-list{border-top:1px solid var(--line-dark);}
  .contact-row{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:6px 16px;
    padding:20px 0;border-bottom:1px solid var(--line-dark);
  }
  @media(max-width:480px){
    .contact-row{flex-direction:column;align-items:flex-start;gap:4px;}
  }
  .contact-row .k{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dark-muted);text-transform:uppercase;letter-spacing:0.08em;}
  .contact-row .v{font-family:'Space Grotesk',sans-serif;font-size:17px;color:#fff;}
  .contact-row a.v:hover{color:var(--signal);}
  .form{display:flex;flex-direction:column;gap:16px;}
  .form label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dark-muted);margin-bottom:6px;display:block;}
  .form input, .form select, .form textarea{
    width:100%;
    background:var(--ink-2);
    border:1px solid var(--line-dark);
    color:#fff;
    padding:12px 14px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    border-radius:2px;
  }
  @media(max-width:640px){
    .form input, .form select, .form textarea{font-size:16px;}
  }
  .form input, .form select, .form textarea{transition:border-color .3s ease, box-shadow .3s ease;}
  .form input:focus, .form select:focus, .form textarea:focus{
    outline:none;border-color:var(--signal);
    box-shadow:0 0 0 3px var(--signal-dim);
  }
  .form input.invalid{border-color:#F76464;}
  .form input.invalid:focus{box-shadow:0 0 0 3px rgba(247,100,100,0.18);}
  .field-error{
    display:none;
    margin-top:6px;
    font-size:12px;
    color:#F76464;
    font-family:'IBM Plex Mono',monospace;
  }
  .field-error.show{display:block;}
  .form textarea{resize:vertical;min-height:110px;}
  .form button{
    position:relative;overflow:hidden;
    margin-top:6px;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    background:var(--signal);
    color:var(--ink);
    border:none;
    padding:14px 22px;
    cursor:pointer;
    border-radius:2px;
    transition:background .3s var(--ease-out), transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
  }
  .form button::before{
    content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.6), transparent);
    transform:skewX(-20deg);
    transition:left .7s var(--ease-out);
  }
  .form button:hover::before{left:130%;}
  .form button:hover{background:#fff;box-shadow:0 14px 34px -14px var(--signal-dim);}
  .form button:active{transform:scale(.97);}
  @media (prefers-reduced-motion: reduce){ .form button{transition:background .18s ease;} .form button::before{display:none;} }
  .form-note{font-size:12px;color:var(--text-dark-muted);margin-top:4px;}

  footer{
    background:var(--ink);
    border-top:1px solid var(--line-dark);
    padding:80px 0 0;
    color:var(--text-dark-muted);
    font-size:13px;
  }
  .footer-top{
    display:flex;flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:52px 88px;
    padding-bottom:48px;
    text-align:center;
  }
  /* the brand block (logo, blurb, socials) is the first, unlabelled div —
     give it its own full-width row so it sits centered above the link
     columns, which then line up neatly side by side beneath it */
  .footer-top > div:first-child{
    flex:1 1 100%;
    display:flex;flex-direction:column;align-items:center;
    padding-bottom:8px;
    margin-bottom:8px;
    border-bottom:1px solid var(--line-dark);
  }
  .footer-brand{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;color:#fff;
    display:flex;align-items:center;justify-content:center;gap:10px;
  }
  .footer-brand img{width:24px;height:auto;opacity:0.9;}
  .footer-blurb{margin:16px auto 0;font-size:14px;line-height:1.65;max-width:40ch;color:var(--text-dark-muted);}
  .footer-social{display:flex;gap:14px;margin:24px 0 40px;justify-content:center;}
  .footer-social a{
    width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;color:var(--text-dark-muted);
    transition:border-color .3s ease, color .3s ease, transform .3s var(--ease-spring), background .3s ease;
  }
  .footer-social a:hover{border-color:var(--signal);color:var(--signal);background:var(--signal-dim);transform:translateY(-3px);}
  .footer-col{min-width:150px;display:flex;flex-direction:column;align-items:center;}
  .footer-col h5{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--signal);margin-bottom:20px;
    position:relative;padding-bottom:12px;
  }
  .footer-col h5::after{
    content:"";position:absolute;left:50%;bottom:0;
    width:22px;height:1px;margin-left:-11px;
    background:var(--line-dark);
  }
  .footer-col ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:14px;}
  .footer-col a{
    font-size:14px;color:var(--text-dark-muted);
    position:relative;transition:color .25s ease;
  }
  .footer-col a::after{
    content:"";position:absolute;left:50%;bottom:-3px;
    width:0;height:1px;margin-left:0;
    background:var(--signal);
    transition:width .3s var(--ease-out), left .3s var(--ease-out);
  }
  .footer-col a:hover{color:#fff;}
  .footer-col a:hover::after{width:100%;left:0;margin-left:0;}
  @media(min-width:700px){
    .footer-top{gap:56px 96px;}
  }
  .footer-bottom{
    border-top:1px solid var(--line-dark);
    padding:26px 0;
    display:flex;flex-wrap:wrap;gap:8px 18px;
    justify-content:center;align-items:center;
    text-align:center;
  }
  .footer-bottom .mono{font-size:12px;}
  .footer-bottom .mono + .mono{position:relative;padding-left:18px;}
  .footer-bottom .mono + .mono::before{
    content:"";position:absolute;left:0;top:50%;
    width:4px;height:4px;border-radius:50%;
    background:var(--text-dark-muted);
    transform:translateY(-50%);
    opacity:.6;
  }