:root{
    --ink:#0A0E14;
    --ink-2:#0F141C;
    --panel:#151B25;
    --panel-2:#1B2330;
    --line:#2A3342;
    --line-soft:#1E2530;
    --paper:#E9EDF2;
    --paper-dim:#9CA7B5;
    --signal:#5EEAD4;
    --signal-dim:#3A9E92;
    --amber:#F2A93B;
    --radius:14px;
    --max:1180px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --mx:50%;
    --my:50%;
  }

  [data-theme="light"]{
    --ink:#F8F4F0;
    --ink-2:#F1ECE4;
    --panel:#FFFFFF;
    --panel-2:#F5F1EA;
    --line:#E4DDD1;
    --line-soft:#ECE6DC;
    --paper:#140433;
    --paper-dim:#3A2A50;
    --signal:#3A809A;
    --signal-dim:#6AB0D0;
    --amber:#C17D1E;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}

  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  ::selection{background:var(--signal); color:var(--ink);}
  :focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:4px;}

  /* ---------- scroll progress ---------- */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:2px;
    width:0%;
    background:linear-gradient(90deg, var(--signal), var(--amber));
    z-index:9998;
    box-shadow:0 0 12px rgba(94,234,212,0.6);
  }

  /* ---------- background grid texture ---------- */
  .grid-texture{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:0.35;
    mask-image:linear-gradient(to bottom, black, black 30%, transparent 85%);
  }

  /* ---------- nav ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,14,20,0.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:76px;}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:0.01em;}
  .brand-mark{width:22px; height:22px; position:relative; flex-shrink:0;}
  .brand-mark svg{width:100%; height:100%;}
  .brand-suffix{font-family:var(--font-mono); font-size:0.62rem; color:var(--paper-dim); letter-spacing:0.08em; margin-left:2px; align-self:flex-end; margin-bottom:3px;}
  .nav-links{display:flex; align-items:center; gap:36px; font-size:0.92rem; color:var(--paper-dim);}
  .nav-links a{position:relative; padding-bottom:4px;}
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0%; height:1px; background:var(--signal);
    transition:width .3s ease;
  }
  .nav-links a:hover{color:var(--paper);}
  .nav-links a:hover::after, .nav-links a.is-active::after{width:100%;}
  .nav-links a.is-active{color:var(--paper);}
  .nav-cta{display:flex; align-items:center; gap:20px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:0.9rem;
    padding:12px 22px; border-radius:9px;
    border:1px solid transparent; white-space:nowrap;
    position:relative; overflow:hidden; will-change:transform;
  }
  .btn-primary{background:var(--signal); color:#062421;}
  .btn-ghost{background:transparent; color:var(--paper); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--paper-dim); background:var(--panel);}

  /* ---------- brand tagline ---------- */
  .tagline-band{
    position:relative; z-index:1;
    overflow:hidden;
    border-bottom:1px solid var(--line-soft);
    background:var(--panel-2);
    opacity:0;
    transform:translateY(-10px);
  }
  .tagline-band::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, color-mix(in srgb, var(--signal) 10%, transparent), transparent 45%, color-mix(in srgb, var(--amber) 9%, transparent));
    pointer-events:none;
  }
  .tagline-band::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 16%, transparent), transparent);
    transform:translateX(-100%);
    animation:tagline-scan 6s ease-in-out infinite;
    pointer-events:none;
  }
  .tagline-inner{
    position:relative;
    z-index:1;
    display:flex; align-items:center; justify-content:center; gap:16px;
    min-height:58px;
    font-family:var(--font-mono);
    text-align:center;
  }
  .tagline-inner > *{opacity:0; transform:translateY(8px);}
  .tagline-code{font-size:0.68rem; color:var(--signal-dim); letter-spacing:0.08em;}
  .tagline-text{font-family:var(--font-display); font-size:clamp(0.95rem, 2vw, 1.25rem); font-weight:600; letter-spacing:0.14em; color:var(--paper);}
  .tagline-text strong{color:var(--signal); font-weight:700;}
  .tagline-rule{width:28px; height:1px; background:color-mix(in srgb, var(--paper) 22%, transparent);}
  [data-theme="light"] .tagline-code{color:var(--signal);}
  @keyframes tagline-scan{0%,35%{transform:translateX(-100%);} 65%,100%{transform:translateX(100%);}}

  /* ---------- hero ---------- */
  .hero{position:relative; z-index:1; padding:96px 0 80px; overflow:hidden; isolation:isolate;}
  .hero-video, .hero-video-veil{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .hero-video{z-index:-2; object-fit:cover; object-position:center; opacity:0.48; filter:saturate(0.95) contrast(1.06) brightness:0.92; transform:scale(1.03);}
  .hero-video-veil{z-index:-1; background:linear-gradient(90deg, rgba(10,14,20,0.72) 0%, rgba(10,14,20,0.44) 48%, rgba(10,14,20,0.22) 100%), linear-gradient(180deg, rgba(10,14,20,0.08), rgba(10,14,20,0.5));}
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  .eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; color:var(--signal); text-transform:uppercase; margin-bottom:22px; opacity:0;}
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgba(94,234,212,0.6); animation:pulse-dot 2.2s ease-in-out infinite;}
  @keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(94,234,212,0.5);} 70%{box-shadow:0 0 0 8px rgba(94,234,212,0);} 100%{box-shadow:0 0 0 0 rgba(94,234,212,0);}}

  .split-heading{overflow:visible;}
  .word-mask{display:inline-block; overflow:hidden; vertical-align:top;}
  .word-inner{display:inline-block; will-change:transform;}

  .hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem, 4.6vw, 3.85rem); line-height:1.06; letter-spacing:-0.01em; margin-bottom:24px;}
  .hero h1 .accent .word-inner{color:var(--signal);}
  .hero p.lede{font-size:1.08rem; color:var(--paper-dim); max-width:520px; margin-bottom:34px; opacity:0; transform:translateY(24px);}
  .hero-ctas{display:flex; align-items:center; gap:18px; margin-bottom:44px; flex-wrap:wrap; opacity:0; transform:translateY(24px);}
  .hero-note{font-family:var(--font-mono); font-size:0.8rem; color:var(--paper-dim); opacity:0; transform:translateY(24px);}

  /* .hero has a permanently-dark background video + veil above — pin text
     colors so the heading/copy stay light and legible against it regardless
     of theme (same reasoning as .software-hero in custom-software.css). */
  [data-theme="light"] .eyebrow,
  [data-theme="light"] .eyebrow .dot,
  [data-theme="light"] .hero h1 .accent .word-inner { color: #5EEAD4; }
  [data-theme="light"] .eyebrow .dot { background: #5EEAD4; }
  [data-theme="light"] .hero h1 { color: #E9EDF2; }
  [data-theme="light"] .hero p.lede,
  [data-theme="light"] .hero-note { color: #9CA7B5; }

  .hero-visual{position:relative; aspect-ratio:1/1; border-radius:20px; background:var(--panel); border:1px solid var(--line); overflow:hidden; opacity:0; transform:scale(0.92); box-shadow:0 40px 90px -40px rgba(0,0,0,0.7);}

  /* ---------- Kali-style boot terminal (hero intro) ---------- */
  .kali-intro{
    position:absolute; inset:0; z-index:4;
    display:flex; flex-direction:column; justify-content:center;
    background:#050709;
    padding:6% 7%;
    font-family:var(--font-mono);
  }
  .kali-intro.is-fading{opacity:0; transition:opacity 0.55s ease;}
  .kali-ascii{
    font-size:clamp(5px, 1.9vw, 9.5px);
    line-height:1.2;
    white-space:pre;
    text-align:center;
    margin-bottom:4%;
    background:linear-gradient(100deg, var(--signal) 0%, #7DD3FC 40%, var(--amber) 70%, var(--signal) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 14px rgba(94,234,212,0.3));
  }
  .kali-meta{font-size:0.66rem; letter-spacing:0.03em; color:var(--paper-dim); text-align:center; margin-bottom:10px;}
  .kali-meta strong{color:var(--signal); font-weight:600;}
  .kali-modline{font-size:0.62rem; color:var(--signal-dim); text-align:center; margin-bottom:2px;}
  .kali-gap{height:16px;}
  .kali-row{font-size:0.78rem; color:var(--paper); margin-bottom:5px; white-space:pre-wrap; word-break:break-word;}
  .kali-prompt{color:var(--signal);}
  .kali-user{color:var(--amber); font-weight:600;}
  .kali-host{color:#7DD3FC;}
  .kali-path{color:var(--paper-dim);}
  .kali-dollar{color:var(--signal); font-weight:600; margin-right:2px;}
  .kali-history{max-height:30%; overflow-y:auto; scrollbar-width:none; margin-bottom:8px;}
  .kali-history::-webkit-scrollbar{display:none;}
  .kali-entry{border-left:1px solid var(--line); padding-left:9px; margin-bottom:7px; animation:kali-line-in .35s ease-out both;}
  .kali-entry-command{color:var(--paper); font-size:0.66rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .kali-entry-prompt{color:var(--signal); margin-right:5px;}
  .kali-entry-output{display:flex; flex-direction:column; gap:2px; margin-top:2px; font-size:0.62rem;}
  .kali-entry-output span::before{display:inline-block; width:42px; font-weight:600;}
  .kali-entry-output .ok{color:#86EFAC;}
  .kali-entry-output .ok::before{content:'[ OK ]';}
  .kali-entry-output .info{color:#7DD3FC;}
  .kali-entry-output .info::before{content:'[INFO]';}
  .kali-entry-output .warn{color:var(--amber);}
  .kali-entry-output .warn::before{content:'[WARN]';}
  .kali-entry-output .metric{color:var(--paper-dim);}
  .kali-entry-output .metric::before{content:'[DATA]';}
  .kali-activity{display:flex; align-items:center; justify-content:center; gap:7px; font-size:0.62rem; color:var(--signal-dim); margin:10px 0 6px; letter-spacing:0.04em;}
  .kali-activity-dot{width:5px; height:5px; border-radius:50%; background:var(--signal); animation:kali-pulse 1s ease-in-out infinite;}
  .kali-out{display:flex; flex-direction:column; gap:3px; min-height:2.4em; font-size:0.68rem; color:var(--paper-dim);}
  .kali-out-line{animation:kali-line-in .35s ease-out both;}
  .kali-out-line::before{content:'[ ok ] '; color:var(--signal);}
  .kali-out-line.ok{color:#86EFAC;}
  .kali-out-line.ok::before{content:'[ OK ] '; color:#86EFAC;}
  .kali-out-line.info{color:#7DD3FC;}
  .kali-out-line.info::before{content:'[INFO] '; color:#7DD3FC;}
  .kali-out-line.warn{color:var(--amber);}
  .kali-out-line.warn::before{content:'[WARN] '; color:var(--amber);}
  .kali-out-line.metric{color:var(--paper-dim);}
  .kali-out-line.metric::before{content:'[DATA] '; color:var(--paper-dim);}
  @keyframes kali-pulse{0%,100%{opacity:.35; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);}}
  @keyframes kali-line-in{from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:translateX(0);}}
  @media (max-width:700px){
    .kali-ascii{font-size:clamp(4px, 2.6vw, 7px);}
    .kali-row{font-size:0.7rem;}
  }

  /* ---------- IDE recording ---------- */
  .ide{display:flex; flex-direction:column; height:100%; background:#0D1119;}
  .ide-titlebar{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid var(--line-soft);
    background:var(--panel-2); flex-shrink:0;
  }
  .ide-dots{display:flex; gap:7px;}
  .ide-dots span{width:10px; height:10px; border-radius:50%; display:block;}
  .dot-r{background:#FF6159; opacity:0.85;}
  .dot-y{background:#FEBC2E; opacity:0.85;}
  .dot-g{background:#28C840; opacity:0.85;}
  .ide-rec{
    display:flex; align-items:center; gap:7px;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em;
    color:#FF8A80;
  }
  .rec-dot{width:7px; height:7px; border-radius:50%; background:#FF5C5C; animation:pulse-dot 1.4s ease-in-out infinite;}
  .ide-tabs{
    display:flex; flex-shrink:0;
    background:var(--panel); border-bottom:1px solid var(--line-soft);
  }
  .ide-tab{
    display:flex; align-items:center; gap:7px;
    padding:9px 18px;
    font-family:var(--font-mono); font-size:0.72rem;
    color:var(--paper-dim);
    border-right:1px solid var(--line-soft);
    background:transparent;
  }
  .ide-tab-icon{font-size:0.8rem; filter:grayscale(0.2);}
  .ide-tab.is-active{color:var(--paper); background:#0D1119; border-bottom:1px solid #0D1119; margin-bottom:-1px;}
  .ide-body{display:flex; flex:1; min-height:0; overflow:hidden;}
  .ide-gutter{
    flex-shrink:0; padding:14px 12px 14px 16px; text-align:right;
    font-family:var(--font-mono); font-size:0.78rem; line-height:1.65;
    color:#3D4759; user-select:none; overflow:hidden;
  }
  .ide-gutter div{height:1.65em;}
  .ide-code{
    flex:1; margin:0; padding:14px 18px 14px 6px;
    font-family:var(--font-mono); font-size:0.78rem; line-height:1.65;
    color:var(--paper); overflow:hidden; white-space:pre;
  }
  .ide-code div.code-line{height:1.65em; white-space:pre;}
  .ide-statusbar{
    flex-shrink:0; display:flex; gap:18px;
    padding:7px 16px; border-top:1px solid var(--line-soft);
    background:var(--panel-2);
    font-family:var(--font-mono); font-size:0.66rem; color:var(--paper-dim);
  }
  .type-caret{display:inline-block; width:6px; height:1.05em; background:var(--signal); vertical-align:-0.15em; animation:caret-blink 0.9s steps(1) infinite;}
  .tok-kw{color:var(--signal);}
  .tok-type{color:#7DD3FC;}
  .tok-str{color:var(--amber);}
  .tok-com{color:var(--paper-dim); font-style:italic;}
  .tok-fn{color:#86EFAC;}
  .tok-num{color:var(--amber);}
  .tok-punct{color:#8B96A8;}
  .tok-plain{color:var(--paper);}

  /* .kali-intro and .ide are always-dark terminal/editor mockups — re-pin their
     tokens to the dark values regardless of theme, same reasoning as .ct-mini. */
  [data-theme="light"] .kali-intro,
  [data-theme="light"] .ide {
    --panel: #151B25;
    --panel-2: #1B2330;
    --line: #2A3342;
    --line-soft: #1E2530;
    --paper: #E9EDF2;
    --paper-dim: #9CA7B5;
    --signal: #5EEAD4;
    --signal-dim: #3A9E92;
    --amber: #F2A93B;
  }

  .fake-cursor{
    position:absolute; top:0; left:0; width:16px; height:16px;
    z-index:6; pointer-events:none; opacity:0;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,0.55));
    will-change:transform;
  }
  .fake-cursor.is-clicking svg{transform:scale(0.82); transform-origin:0 0;}
  .fake-cursor svg{transition:transform .12s ease;}
  .cursor-ripple{
    position:absolute; top:2px; left:2px; width:10px; height:10px; margin:-5px 0 0 -5px;
    border-radius:50%; border:1.5px solid var(--signal); opacity:0;
  }
  .cursor-ripple.is-active{animation:cursor-ping .55s ease-out;}
  @keyframes cursor-ping{0%{opacity:0.85; transform:scale(0.3);} 100%{opacity:0; transform:scale(2.8);}}

  /* ---------- ticker ---------- */
  .ticker-wrap{
    position:relative; z-index:1;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
    background:var(--ink-2);
    overflow:hidden;
    padding:16px 0;
  }
  .ticker-track{
    display:flex;
    width:max-content;
    animation:ticker-scroll 32s linear infinite;
  }
  .ticker-track span{
    font-family:var(--font-mono);
    font-size:0.8rem;
    color:var(--paper-dim);
    letter-spacing:0.04em;
    padding:0 28px;
    border-right:1px solid var(--line);
    white-space:nowrap;
  }
  .ticker-track span.hl{color:var(--signal);}
  @keyframes ticker-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .ticker-track{animation:none;}
  }

  /* ---------- stats strip ---------- */
  .stats-strip{position:relative; z-index:1; border-bottom:1px solid var(--line-soft); background:var(--ink-2);}
  .stats-row{display:grid; grid-template-columns:repeat(4, 1fr);}
  .stat{padding:30px 24px; border-right:1px solid var(--line-soft);}
  .stat:last-child{border-right:none;}
  .stat-label{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:8px;}
  .stat-value{font-family:var(--font-display); font-weight:600; font-size:1.7rem; color:var(--paper);}
  .stat-value .unit{font-size:1rem; color:var(--signal); margin-left:2px;}

  /* ---------- section shell ---------- */
  section.block{position:relative; z-index:1; padding:104px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-tag{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--signal); margin-bottom:14px; display:block;}
  .section-head h2{font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.18; margin-bottom:16px;}
  .section-head p{color:var(--paper-dim); font-size:1.02rem;}

  /* ---------- services ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;}
  .service-card{
    background:
      radial-gradient(320px circle at var(--mx) var(--my), rgba(94,234,212,0.09), transparent 70%),
      var(--panel);
    padding:38px 36px;
    transform-style:preserve-3d;
    will-change:transform;
    transition:background-color .25s ease;
  }
  .service-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
  .service-code{font-family:var(--font-mono); font-size:0.72rem; color:var(--paper-dim); letter-spacing:0.05em;}
  .service-status{font-family:var(--font-mono); font-size:0.68rem; color:var(--signal); letter-spacing:0.05em; display:flex; align-items:center; gap:6px;}
  .service-status::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--signal);}
  .service-icon{width:40px; height:40px; margin-bottom:18px;}
  .service-icon svg{width:100%; height:100%;}
  .service-card h3{font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin-bottom:10px;}
  .service-card p{color:var(--paper-dim); font-size:0.95rem; margin-bottom:20px;}
  .service-tags{display:flex; flex-wrap:wrap; gap:8px;}
  .service-tags span{font-family:var(--font-mono); font-size:0.72rem; color:var(--paper-dim); border:1px solid var(--line); border-radius:6px; padding:5px 10px;}

  /* ---------- process ---------- */
  .process-shell{display:grid; grid-template-columns:34px 1fr; gap:28px;}
  .process-rail{position:relative; width:2px; background:var(--line-soft); border-radius:2px; justify-self:center;}
  .process-rail-fill{position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(180deg, var(--signal), var(--signal-dim)); border-radius:2px; box-shadow:0 0 10px rgba(94,234,212,0.5);}
  .process-list{display:flex; flex-direction:column;}
  .process-item{padding:0 0 56px; opacity:0.35; transition:opacity .4s ease;}
  .process-item:last-child{padding-bottom:0;}
  .process-item.is-active{opacity:1;}
  .process-num{font-family:var(--font-mono); font-size:0.85rem; color:var(--paper-dim); margin-bottom:8px; transition:color .3s ease;}
  .process-item.is-active .process-num{color:var(--signal);}
  .process-body h3{font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin-bottom:8px;}
  .process-body p{color:var(--paper-dim); max-width:640px; font-size:0.97rem;}

  /* ---------- principles band ---------- */
  .principles{background:var(--ink-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
  .principles-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:44px;}
  .principle h3{font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-bottom:10px; color:var(--paper);}
  .principle p{color:var(--paper-dim); font-size:0.94rem;}
  .principle-mark{font-family:var(--font-mono); color:var(--signal); font-size:0.78rem; margin-bottom:14px; display:block;}

  /* ---------- CTA / terminal ---------- */
  .cta-block{position:relative; z-index:1; padding:100px 0 110px;}
  .terminal{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:800px; margin:0 auto; box-shadow:0 30px 80px -30px rgba(0,0,0,0.6); opacity:0; transform:scale(0.94);}
  .terminal-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel-2);}
  .terminal-bar span{width:10px; height:10px; border-radius:50%; background:var(--line);}
  .terminal-body{padding:40px 44px 44px; text-align:center;}
  .terminal-body p.prompt{font-family:var(--font-mono); color:var(--signal); font-size:0.85rem; margin-bottom:18px; min-height:1.2em;}
  .terminal-body p.prompt .caret{display:inline-block; width:8px; height:1em; background:var(--signal); vertical-align:middle; margin-left:2px; animation:caret-blink 1s steps(1) infinite;}
  @keyframes caret-blink{50%{opacity:0;}}
  .terminal-body h2{font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem, 3vw, 2rem); margin-bottom:16px;}
  .terminal-body p.sub{color:var(--paper-dim); max-width:480px; margin:0 auto 30px;}
  .terminal-ctas{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}

  /* ---------- footer ---------- */
  footer{position:relative; z-index:1; border-top:1px solid var(--line-soft); padding:56px 0 40px;}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-bottom:48px; flex-wrap:wrap;}
  .footer-brand p{color:var(--paper-dim); font-size:0.9rem; max-width:280px; margin-top:14px;}
  .footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
  .footer-col h4{font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:16px;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col a{font-size:0.9rem; color:var(--paper); opacity:0.85; transition:opacity .2s ease;}
  .footer-col a:hover{opacity:1; color:var(--signal);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-soft); font-family:var(--font-mono); font-size:0.75rem; color:var(--paper-dim); flex-wrap:wrap; gap:12px;}

  /* ---------- reveal utility (JS-driven) ---------- */
  .reveal{opacity:0; transform:translateY(36px);}
  .reveal-scale{opacity:0; transform:scale(0.94);}
  .no-js .reveal, .no-js .reveal-scale, .no-js .eyebrow, .no-js .lede, .no-js .hero-ctas, .no-js .hero-note, .no-js .hero-visual, .no-js .terminal, .no-js .tagline-band, .no-js .tagline-inner > *,
  .reduce-motion .reveal, .reduce-motion .reveal-scale, .reduce-motion .eyebrow, .reduce-motion .lede, .reduce-motion .hero-ctas, .reduce-motion .hero-note, .reduce-motion .hero-visual, .reduce-motion .terminal, .reduce-motion .tagline-band, .reduce-motion .tagline-inner > *
  {opacity:1; transform:none;}
  .reduce-motion .tagline-band::after{animation:none; display:none;}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{order:-1; aspect-ratio:16/10;}
    .stats-row{grid-template-columns:repeat(2, 1fr);}
    .stat:nth-child(2){border-right:none;}
    .stat{border-bottom:1px solid var(--line-soft);}
    .services-grid{grid-template-columns:1fr;}
    .principles-grid{grid-template-columns:1fr; gap:32px;}
    .nav-links{display:none;}
    .process-shell{grid-template-columns:24px 1fr;}
  }
  @media (max-width:768px){
    .nav-row{height:64px;}
    .tagline-inner{min-height:48px; gap:12px;}
    .tagline-text{font-size:clamp(0.85rem, 1.8vw, 1.1rem);}
    .hero{padding:48px 0 40px;}
    .hero-video{opacity:0.32;}
    .hero h1{font-size:clamp(1.8rem, 3.5vw, 2.8rem); line-height:1.1; margin-bottom:14px;}
    .hero p.lede{font-size:0.95rem; margin-bottom:16px;}
    .hero-ctas{gap:10px; margin-bottom:20px;}
    .hero-ctas .btn{padding:10px 16px; font-size:0.85rem;}
    .hero-note{font-size:0.75rem;}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px;}
    .nav-row{height:60px;}
    .brand{font-size:0.95rem;}
    .brand-suffix{font-size:0.55rem;}
    .tagline-inner{min-height:44px; gap:8px;}
    .tagline-code{font-size:0.6rem;}
    .tagline-text{font-size:clamp(0.75rem, 1.5vw, 0.95rem);}
    .hero{padding:32px 0 28px; overflow:visible;}
    .hero-grid{gap:20px;}
    .hero h1{font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.08; margin-bottom:12px; letter-spacing:-0.015em;}
    .hero p.lede{font-size:0.9rem; line-height:1.5; margin-bottom:14px; color:var(--paper-dim);}
    .hero-ctas{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; flex-wrap:nowrap;}
    .hero-ctas .btn{padding:9px 12px; font-size:0.8rem; justify-content:center; gap:4px; white-space:normal; line-height:1.2;}
    .hero-note{font-size:0.72rem; color:var(--paper-dim);}
    .hero-visual{aspect-ratio:16/10; max-height:280px;}
    .footer-top{flex-direction:column;}
    .terminal-body{padding:32px 22px 36px;}
    .nav-cta .btn-ghost{display:none;}
    .eyebrow{font-size:0.7rem;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
    .hero-video{display:none;}
  }
  /* ===== SERVICES SECTION - PREMIUM STYLING ===== */
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-tag{font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--signal); margin-bottom:14px; display:block;}
  .section-head h2{font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.18; margin-bottom:16px;}
  .section-head p{color:var(--paper-dim); font-size:1.02rem; line-height:1.6;}

  /* ===== SERVICES GRID ===== */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-bottom:56px;
  }

  /* ===== SERVICE CARD - PREMIUM =====
     Each card carries its own --card-accent custom property (set inline
     per card in the HTML) so the icon, tag, glow, and hover states all
     pick up a distinct hue per service instead of one flat teal. */
  .service-card{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:40px 36px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--signal)) 7%, transparent) 0%, rgba(25,25,35,0.4) 100%);
    border:1px solid color-mix(in srgb, var(--card-accent, var(--signal)) 18%, transparent);
    border-radius:18px;
    overflow:hidden;
    transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    cursor:pointer;
    will-change:transform, box-shadow, border-color;
    text-decoration:none;
    color:inherit;
  }

  .service-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(800px circle at var(--mx) var(--my), color-mix(in srgb, var(--card-accent, var(--signal)) 14%, transparent), transparent 80%);
    opacity:0;
    transition:opacity 0.35s ease;
    pointer-events:none;
  }

  .service-card::after{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--card-accent, var(--signal)), transparent);
    opacity:0.5;
  }

  [data-theme="light"] .service-card{
    background:linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--signal)) 9%, transparent) 0%, rgba(255,255,255,0.92) 100%);
  }

  /* ===== BACKGROUND INDEX NUMBER ===== */
  .service-card__index{
    position:absolute;
    top:6px;
    right:20px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:4.2rem;
    line-height:1;
    color:color-mix(in srgb, var(--card-accent, var(--signal)) 9%, transparent);
    z-index:1;
    pointer-events:none;
    user-select:none;
    transition:color 0.35s ease, transform 0.35s ease;
  }

  /* ===== CARD HEADER ===== */
  .service-card__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:24px;
    gap:16px;
    position:relative;
    z-index:2;
  }

  .service-card__icon{
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:color-mix(in srgb, var(--card-accent, var(--signal)) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--card-accent, var(--signal)) 25%, transparent);
    transition:all 0.35s ease;
    position:relative;
    z-index:2;
  }

  .service-card__icon svg{
    width:26px;
    height:26px;
    filter:drop-shadow(0 2px 4px color-mix(in srgb, var(--card-accent, var(--signal)) 25%, transparent));
  }

  .service-card__tag{
    font-family:var(--font-mono);
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--card-accent, var(--signal));
    background:color-mix(in srgb, var(--card-accent, var(--signal)) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--card-accent, var(--signal)) 35%, transparent);
    padding:6px 12px;
    border-radius:6px;
    white-space:nowrap;
    position:relative;
    z-index:2;
  }

  /* ===== CARD CONTENT ===== */
  .service-card h3{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.4rem;
    line-height:1.2;
    margin-bottom:14px;
    color:var(--paper);
    transition:color 0.35s ease;
    position:relative;
    z-index:2;
  }

  .service-card p{
    color:var(--paper-dim);
    font-size:0.98rem;
    line-height:1.7;
    margin-bottom:28px;
    flex-grow:1;
    position:relative;
    z-index:2;
  }

  /* ===== CARD FOOTER ===== */
  .service-card__footer{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:20px;
    border-top:1px solid color-mix(in srgb, var(--card-accent, var(--signal)) 18%, transparent);
    transition:all 0.35s ease;
    position:relative;
    z-index:2;
  }

  .service-card__evidence{
    font-family:var(--font-body);
    font-size:0.9rem;
    font-weight:600;
    color:var(--card-accent, var(--signal));
    transition:all 0.35s ease;
    flex-grow:1;
  }

  .service-card__arrow{
    font-size:1.2rem;
    color:var(--card-accent, var(--signal));
    transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    display:inline-block;
    opacity:0.6;
  }

  /* ===== HOVER INDICATOR ===== */
  .service-card__hover-indicator{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(180deg, transparent 0%, rgba(10,14,20,0.95) 40%, rgba(10,14,20,0.98) 100%);
    padding:32px 36px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:120px;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(100%);
    transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    z-index:1;
  }

  .service-card__hover-indicator span{
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.04em;
    color:var(--paper-dim);
    line-height:1.4;
  }

  .service-card__hover-indicator span:first-child{
    font-weight:600;
    color:var(--card-accent, var(--signal));
    text-transform:uppercase;
    margin-bottom:4px;
  }

  /* ===== MOBILE HOVER INDICATOR - VISIBLE BY DEFAULT ===== */
  @media (max-width:640px){
    .service-card__hover-indicator{
      position:relative;
      bottom:auto;
      left:auto;
      right:auto;
      background:linear-gradient(135deg, rgba(94,234,212,0.08) 0%, rgba(242,169,59,0.04) 100%);
      border-top:1px solid rgba(94,234,212,0.2);
      border-radius:0 0 12px 12px;
      padding:16px 20px;
      margin:0 -20px -28px -20px;
      transform:none;
      pointer-events:auto;
      opacity:1;
      gap:6px;
      max-height:none;
      overflow:visible;
    }

    .service-card:hover .service-card__hover-indicator{
      transform:none;
    }

    .service-card__hover-indicator span{
      font-size:0.7rem;
      letter-spacing:0.03em;
      color:var(--paper-dim);
      line-height:1.3;
      display:inline-flex;
      align-items:center;
      gap:4px;
    }

    .service-card__hover-indicator span:first-child{
      font-weight:700;
      color:var(--signal);
      text-transform:uppercase;
      font-size:0.68rem;
      margin-bottom:2px;
      display:block;
    }

    .service-card__hover-indicator span:not(:first-child){
      background:rgba(94,234,212,0.12);
      border:1px solid rgba(94,234,212,0.25);
      padding:4px 8px;
      border-radius:4px;
      color:var(--signal);
      font-weight:500;
      white-space:nowrap;
      display:inline-block;
    }

    .service-card__hover-indicator span:not(:first-child):nth-child(2n){
      background:rgba(242,169,59,0.1);
      border-color:rgba(242,169,59,0.25);
      color:var(--amber);
    }

    .service-card__hover-indicator span:not(:first-child):nth-child(3n){
      background:rgba(134,239,172,0.1);
      border-color:rgba(134,239,172,0.25);
      color:#86EFAC;
    }
  }

  /* ===== SERVICES CTA ===== */
  .services-cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    text-align:center;
    padding:48px 32px;
    background:linear-gradient(135deg, rgba(94,234,212,0.06) 0%, rgba(242,169,59,0.04) 100%);
    border:1px solid rgba(94,234,212,0.1);
    border-radius:16px;
    transition:all 0.35s ease;
  }

  .services-cta:hover{
    border-color:rgba(94,234,212,0.25);
    background:linear-gradient(135deg, rgba(94,234,212,0.1) 0%, rgba(242,169,59,0.06) 100%);
  }

  .services-cta p{
    font-size:1.05rem;
    color:var(--paper);
    margin:0;
  }

  .services-cta .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    padding:14px 28px;
    background:var(--signal);
    color:var(--ink);
    border:none;
    border-radius:9px;
    cursor:pointer;
    transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    white-space:nowrap;
    position:relative;
    overflow:hidden;
  }

  .services-cta .btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.1);
    transform:translateX(-100%);
    transition:transform 0.35s ease;
  }

  .services-cta .btn:hover::before{
    transform:translateX(100%);
  }

  .services-cta .btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px -8px rgba(94,234,212,0.4);
  }

  .services-cta__note{
    font-family:var(--font-mono);
    font-size:0.8rem;
    color:var(--paper-dim);
    letter-spacing:0.04em;
  }

  /* ===== CLIENTS SECTION - ADVANCED AUTO-SCROLL ===== */
  .clients-section{
    position:relative;
    z-index:1;
    padding:80px 0;
    background:linear-gradient(180deg, transparent 0%, rgba(94,234,212,0.02) 50%, transparent 100%);
    border-top:1px solid rgba(94,234,212,0.1);
    border-bottom:1px solid rgba(94,234,212,0.1);
    overflow:hidden;
  }

  .clients-header{
    margin-bottom:64px;
    text-align:center;
  }

  .clients-tag{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--signal);
    margin-bottom:14px;
    display:block;
    opacity:0;
    animation:revealFade 0.6s ease-out 0.2s forwards;
  }

  .clients-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);
    line-height:1.15;
    color:var(--paper);
    margin-bottom:0;
  }

  .clients-title .accent{
    color:var(--signal);
  }

  .clients-carousel-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  .clients-carousel{
    display:flex;
    gap:48px;
    animation:infiniteScroll 40s linear infinite;
    will-change:transform;
  }

  .clients-carousel:hover{
    animation-play-state:paused;
  }

  @keyframes infiniteScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(calc(-280px * 4 - 48px * 4));}
  }

  .client-slide{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    flex-shrink:0;
    width:280px;
  }

  .client-logo{
    width:200px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(94,234,212,0.06) 0%, rgba(25,25,35,0.3) 100%);
    border:1px solid rgba(94,234,212,0.15);
    border-radius:12px;
    padding:16px;
    transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    backdrop-filter:blur(8px);
    box-shadow:
      0 8px 24px -8px rgba(94,234,212,0.1),
      0 0 1px rgba(94,234,212,0.2),
      inset 0 1px 0 rgba(255,255,255,0.1);
    overflow:hidden;
  }

  .client-logo img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 2px 4px rgba(94,234,212,0.08));
    transition:filter 0.35s ease;
  }

  .client-slide:hover .client-logo{
    border-color:rgba(94,234,212,0.4);
    background:linear-gradient(135deg, rgba(94,234,212,0.12) 0%, rgba(25,25,35,0.4) 100%);
    box-shadow:
      0 16px 48px -12px rgba(94,234,212,0.2),
      0 0 1px rgba(94,234,212,0.3),
      inset 0 1px 0 rgba(255,255,255,0.15);
    transform:translateY(-4px);
  }

  .client-slide:hover .client-logo img{
    filter:drop-shadow(0 4px 8px rgba(94,234,212,0.15));
  }

  .client-name{
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--paper-dim);
    text-align:center;
    max-width:200px;
    opacity:0.8;
    transition:all 0.35s ease;
  }

  .client-slide:hover .client-name{
    color:var(--signal);
    opacity:1;
  }

  .clients-fade-left{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:10%;
    background:linear-gradient(90deg, var(--ink) 0%, transparent 100%);
    pointer-events:none;
    z-index:10;
  }

  .clients-fade-right{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:10%;
    background:linear-gradient(90deg, transparent 0%, var(--ink) 100%);
    pointer-events:none;
    z-index:10;
  }

  @keyframes revealFade{
    from{opacity:0; transform:translateY(-12px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ===== CLIENTS RESPONSIVE ===== */
  @media (max-width:900px){
    .clients-section{
      padding:60px 0;
    }
    .clients-header{
      margin-bottom:48px;
    }
    .clients-carousel{
      gap:32px;
      animation:infiniteScrollTab 50s linear infinite;
    }
    @keyframes infiniteScrollTab{
      0%{transform:translateX(0);}
      100%{transform:translateX(calc(-240px * 4 - 32px * 4));}
    }
    .client-slide{
      width:240px;
    }
    .client-logo{
      width:180px;
      height:90px;
    }
  }

  @media (max-width:640px){
    .clients-section{
      padding:48px 0;
    }
    .clients-header{
      margin-bottom:40px;
    }
    .clients-title{
      font-size:clamp(1.4rem, 2.8vw, 1.8rem);
    }
    .clients-carousel{
      gap:24px;
      animation:infiniteScrollMob 45s linear infinite;
    }
    @keyframes infiniteScrollMob{
      0%{transform:translateX(0);}
      100%{transform:translateX(calc(-200px * 4 - 24px * 4));}
    }
    .client-slide{
      width:200px;
    }
    .client-logo{
      width:160px;
      height:80px;
    }
    .client-name{
      font-size:0.7rem;
    }
  }
  @media (max-width:900px){
    .services-grid{
      grid-template-columns:repeat(2, 1fr);
      gap:20px;
    }
    .service-card{
      padding:32px 28px;
    }
    .service-card h3{
      font-size:1.25rem;
    }
    .service-card p{
      font-size:0.95rem;
      margin-bottom:24px;
    }
  }

  /* ===== MOBILE RESPONSIVE — 2×2 grid =====
     Same two-column rhythm as desktop/tablet, just compacted: a real
     gap between tiles (not touching), smaller type, description clamped
     to keep every tile the same height, hover-only chrome dropped since
     there's no hover on touch. */
  @media (max-width:640px){
    .services-grid{
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-bottom:24px;
    }
    .section-tag{
      font-size:0.7rem;
      margin-bottom:12px;
    }
    .section-head h2{
      font-size:clamp(1.4rem, 2.8vw, 1.8rem);
      margin-bottom:12px;
    }
    .section-head p{
      font-size:0.95rem;
    }
    .service-card{
      padding:18px 14px;
      border-radius:14px;
    }
    .service-card:hover{
      transform:none;
      box-shadow:none;
    }
    .service-card:active{
      transform:scale(0.97);
      border-color:color-mix(in srgb, var(--card-accent, var(--signal)) 45%, transparent);
    }
    .service-card__index{
      font-size:2.1rem;
      top:4px;
      right:10px;
    }
    .service-card__header{
      flex-direction:column;
      align-items:flex-start;
      margin-bottom:12px;
      gap:10px;
    }
    .service-card__icon{
      width:36px;
      height:36px;
      border-radius:10px;
    }
    .service-card__icon svg{
      width:19px;
      height:19px;
    }
    .service-card__tag{
      font-size:0.58rem;
      padding:4px 8px;
      letter-spacing:0.06em;
    }
    .service-card h3{
      font-size:0.98rem;
      line-height:1.25;
      margin-bottom:6px;
    }
    .service-card p{
      font-size:0.78rem;
      line-height:1.5;
      margin-bottom:12px;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      overflow:hidden;
    }
    .service-card__footer{
      padding-top:12px;
      gap:8px;
      margin-bottom:0;
    }
    .service-card__evidence{
      font-size:0.72rem;
    }
    .service-card__arrow{
      font-size:0.95rem;
    }
    .service-card__hover-indicator{
      display:none;
    }

    .services-cta{
      padding:32px 20px;
      gap:12px;
    }
    .services-cta p{
      font-size:0.98rem;
    }
    .services-cta .btn{
      width:100%;
      justify-content:center;
      font-size:0.9rem;
      padding:12px 24px;
    }
    .services-cta__note{
      font-size:0.75rem;
    }
  }

  /* ===== SMALL MOBILE ===== */
  @media (max-width:480px){
    .services-grid{
      gap:10px;
    }
    .service-card{
      padding:16px 12px;
    }
    .service-card__index{
      font-size:1.8rem;
    }
    .service-card h3{
      font-size:0.92rem;
    }
    .service-card p{
      font-size:0.74rem;
      margin-bottom:10px;
      -webkit-line-clamp:2;
    }
  }