:root{
    --void:#0A1C2E;
    --ink:#153857;
    --ink-soft:#4C6C88;
    --teal:#3E6E93;
    --teal-bright:#7AA1C0;
    --aqua:#80BBE2;
    --gold:#C9A227;
    --gold-bright:#E8C766;
    --paper:#F7FAFC;
    --paper-dim:#EAF1F6;
    --card:#FFFFFF;
    --line: rgba(21,56,87,0.10);
    --line-dark: rgba(255,255,255,0.10);
    --white:#FFFFFF;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --ease:cubic-bezier(.16,.84,.32,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--teal-bright); color:var(--white);}

  a:focus-visible, button:focus-visible{outline:2px solid var(--teal-bright); outline-offset:3px;}

  /* ============ scroll reveal ============ */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal-stagger.in > *{opacity:1; transform:translateY(0);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.09s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.23s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.30s;}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.37s;}
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  }

  /* ============ NAV ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0;
    transition:padding .3s var(--ease);
  }
  header.scrolled{padding:10px 0;}
  .nav{
    max-width:1200px; margin:0 auto; padding:0 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:rgba(250,251,251,0.72);
    backdrop-filter:blur(14px) saturate(160%);
    border:1px solid var(--line);
    border-radius:100px;
    padding:9px 10px 9px 20px;
    box-shadow:0 8px 30px -14px rgba(10,27,48,0.18);
    transition:box-shadow .3s ease;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{height:28px; width:auto;}
  .brand-name{font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-0.01em;}
  .brand-name span{color:var(--teal);}
  nav.links{display:flex; gap:8px; align-items:center;}
  nav.links a{
    font-size:0.86rem; font-weight:500; color:var(--ink-soft);
    padding:9px 16px; border-radius:100px;
    transition:background .2s ease, color .2s ease;
  }
  nav.links a:hover{background:var(--paper-dim); color:var(--ink);}
  nav.links a.active{background:var(--paper-dim); color:var(--ink); font-weight:600;}
  .nav-cta{
    font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
    background:var(--ink); color:var(--white);
    padding:11px 20px; border-radius:100px;
    display:inline-flex; align-items:center; gap:8px;
    transition:background .2s ease, transform .15s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--teal); transform:translateY(-1px);}
  .nav-cta svg{width:13px; height:13px;}

  /* ============ HERO ============ */
  .hero{
    position:relative;
    background:var(--void);
    color:var(--white);
    padding:170px 0 140px;
    overflow:hidden;
    isolation:isolate;
  }
  .mesh{
    position:absolute; inset:0; z-index:-2;
    background:
      radial-gradient(650px circle at 78% 8%, rgba(122,161,192,0.35), transparent 60%),
      radial-gradient(500px circle at 15% 85%, rgba(128,187,226,0.14), transparent 65%),
      radial-gradient(900px circle at 50% 0%, rgba(62,110,147,0.25), transparent 60%),
      var(--void);
    animation:meshDrift 16s ease-in-out infinite alternate;
  }
  @keyframes meshDrift{
    0%{background-position:0 0,0 0,0 0;}
    100%{background-position:20px -30px, -20px 20px, 10px 10px;}
  }
  .grid-overlay{
    position:absolute; inset:0; z-index:-1; opacity:0.5;
    background-image:
      linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 60% 20%, black 20%, transparent 75%);
    mask-image:radial-gradient(ellipse 90% 70% at 60% 20%, black 20%, transparent 75%);
  }
  .ghost-mark{
    position:absolute; top:-6%; right:-8%; width:56%; max-width:640px; opacity:0.10; z-index:-1;
    filter:grayscale(1) brightness(3);
  }
  .node-canvas{
    position:absolute; inset:0; z-index:-1; opacity:0.85;
  }
  .spotlight{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(128,187,226,0.10), transparent 65%);
    transition:background .1s linear;
  }
  /* orbs */
  .orb{
    position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;
    will-change:transform;
  }

  /* ============ FLOATING BROWSER MOCKUP ============ */
  .browser-mockup{
    position:absolute; top:14%; right:6%; width:380px; max-width:38vw;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line-dark);
    border-radius:14px;
    backdrop-filter:blur(18px);
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.55);
    z-index:1; overflow:hidden;
    opacity:0; animation:mockIn 1s var(--ease) forwards, floatY 6s ease-in-out infinite;
    animation-delay:1.3s, 2.3s;
  }
  @keyframes mockIn{from{opacity:0; transform:translateY(20px) rotate(2deg);} to{opacity:1; transform:translateY(0) rotate(2deg);}}
  @keyframes floatY{0%,100%{transform:translateY(0) rotate(2deg);} 50%{transform:translateY(-14px) rotate(0.5deg);}}
  .browser-bar{
    display:flex; align-items:center; gap:8px;
    padding:10px 14px; background:rgba(255,255,255,0.04); border-bottom:1px solid var(--line-dark);
  }
  .browser-bar .dot{width:8px; height:8px; border-radius:50%;}
  .browser-bar .dot:nth-child(1){background:#ED6A5E;}
  .browser-bar .dot:nth-child(2){background:#F4BF4F;}
  .browser-bar .dot:nth-child(3){background:#61C454;}
  .browser-url{
    margin-left:8px; font-family:var(--font-mono); font-size:0.68rem; color:rgba(255,255,255,0.45);
    background:rgba(255,255,255,0.05); padding:3px 10px; border-radius:100px; flex:1;
  }
  .browser-body{padding:18px 18px 22px;}
  .code-line{
    display:flex; gap:10px; align-items:center; font-family:var(--font-mono); font-size:0.76rem;
    color:rgba(255,255,255,0.55); margin-bottom:9px;
    opacity:0; animation:lineIn .5s ease forwards;
  }
  .code-line .n{color:rgba(255,255,255,0.28); width:14px; text-align:right; flex-shrink:0;}
  .code-line .k{color:var(--aqua);}
  .code-line .s{color:#F4BF4F;}
  .code-line:nth-child(1){animation-delay:1.6s;}
  .code-line:nth-child(2){animation-delay:1.8s;}
  .code-line:nth-child(3){animation-delay:2.0s;}
  .code-line:nth-child(4){animation-delay:2.2s;}
  .code-line:nth-child(5){animation-delay:2.4s;}
  @keyframes lineIn{from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:translateX(0);}}
  .code-cursor{
    display:inline-block; width:6px; height:14px; background:var(--aqua);
    animation:blink 1s steps(1) infinite; margin-left:2px; vertical-align:middle;
  }
  @keyframes blink{50%{opacity:0;}}
  @media (max-width:960px){ .browser-mockup{display:none;} }
  @media (prefers-reduced-motion: reduce){
    .browser-mockup{animation:none; opacity:1;}
    .code-line{animation:none; opacity:1;}
  }

  /* ============ ORBIT BADGES ============ */
  .orbit{
    position:absolute; top:8%; left:2%; width:230px; height:230px; z-index:1;
    pointer-events:none; opacity:0; animation:fadeUp 1s ease forwards; animation-delay:1.6s;
  }
  .orbit-spin{ position:absolute; inset:0; animation:orbitSpin 18s linear infinite; }
  .orbit-chip{
    position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px;
  }
  .orbit-chip.c1{ transform:translate(105px, 0); }
  .orbit-chip.c2{ transform:translate(-52px, 91px); }
  .orbit-chip.c3{ transform:translate(-52px, -91px); }
  .orbit-icon{
    width:100%; height:100%; border-radius:12px; background:rgba(255,255,255,0.06);
    border:1px solid var(--line-dark); backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; color:var(--aqua);
    animation:orbitCounter 18s linear infinite;
  }
  .orbit-icon svg{width:18px; height:18px;}
  @keyframes orbitSpin{ to{ transform:rotate(360deg); } }
  @keyframes orbitCounter{ to{ transform:rotate(-360deg); } }
  @media (max-width:960px){ .orbit{display:none;} }
  @media (prefers-reduced-motion: reduce){ .orbit-spin, .orbit-icon{animation:none;} }
  .hero .wrap{position:relative; z-index:2;}
  .eyebrow{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--aqua); font-weight:500;
    display:inline-flex; align-items:center; gap:10px; margin-bottom:30px;
    padding:8px 16px 8px 8px; border:1px solid var(--line-dark); border-radius:100px;
    background:rgba(255,255,255,0.03);
  }
  .eyebrow .dot-live{
    width:7px; height:7px; border-radius:50%; background:var(--aqua);
    box-shadow:0 0 0 0 rgba(128,187,226,0.6);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(128,187,226,0.55);}
    70%{box-shadow:0 0 0 8px rgba(128,187,226,0);}
    100%{box-shadow:0 0 0 0 rgba(128,187,226,0);}
  }
  h1.headline{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2.6rem, 6.4vw, 5.4rem);
    line-height:1.0; letter-spacing:-0.03em;
    max-width:920px;
  }
  h1.headline .line{display:block; overflow:hidden; padding-bottom:.08em;}
  h1.headline .line span{display:inline-block; opacity:0; transform:translateY(112%); animation:reveal .9s var(--ease) forwards;}
  h1.headline .line:nth-child(1) span{animation-delay:.25s;}
  h1.headline .line:nth-child(2) span{animation-delay:.4s;}
  .grad-text{
    background:linear-gradient(92deg, var(--teal-bright), var(--aqua) 60%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .grad-text-gold{
    background:linear-gradient(92deg, var(--gold), var(--gold-bright) 60%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  @keyframes reveal{to{opacity:1; transform:translateY(0);}}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

  .hero p.sub{
    font-size:1.18rem; line-height:1.65; color:rgba(255,255,255,0.62);
    max-width:560px; margin:34px 0 42px;
    opacity:0; animation:fadeUp .8s ease forwards; animation-delay:.85s;
  }
  .hero-ctas{display:flex; gap:18px; align-items:center; flex-wrap:wrap; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:1s;}
  .btn-primary{
    font-family:var(--font-mono); font-size:0.86rem; font-weight:500;
    background:linear-gradient(100deg, var(--teal), var(--teal-bright));
    color:var(--white); padding:16px 26px;
    border-radius:100px; display:inline-flex; align-items:center; gap:10px;
    transition:filter .25s ease, transform .15s ease, box-shadow .25s ease;
    box-shadow:0 10px 30px -10px rgba(122,161,192,0.55);
  }
  .btn-primary:hover{filter:brightness(1.12); transform:translateY(-2px);}
  .btn-ghost{
    font-family:var(--font-mono); font-size:0.86rem; font-weight:500;
    color:var(--white); padding:16px 4px; border-bottom:1px solid rgba(255,255,255,0.35);
    transition:opacity .2s ease, border-color .2s ease;
  }
  .btn-ghost:hover{opacity:0.7; border-color:var(--aqua);}

  /* floating badge overlapping into next section */
  .hero-badge{
    position:relative; margin-top:80px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--line-dark);
    backdrop-filter:blur(16px);
    border-radius:20px;
    display:grid; grid-template-columns:repeat(4,1fr);
    opacity:0; animation:fadeUp .8s ease forwards; animation-delay:1.15s;
  }
  .hero-badge .cell{
    padding:26px 28px; border-right:1px solid var(--line-dark);
  }
  .hero-badge .cell:last-child{border-right:none;}
  .hero-badge .num{font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--gold-bright);}
  .hero-badge .label{font-family:var(--font-mono); font-size:0.72rem; color:rgba(255,255,255,0.5); margin-top:6px; letter-spacing:0.03em;}

  /* ============ SECTION HEADERS ============ */
  section{padding:130px 0;}
  .section-head{max-width:660px; margin-bottom:68px;}
  .section-head .eyebrow-light{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--teal); font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:10px;
  }
  .section-head .eyebrow-light::before{content:""; width:26px; height:1px; background:var(--teal);}
  .section-head h2{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing:-0.02em; line-height:1.15;
  }
  .section-head p{margin-top:20px; color:var(--ink-soft); font-size:1.06rem; line-height:1.65;}

  /* ============ SERVICES ============ */
  .services{background:var(--paper); padding-top:100px;}
  .service-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  .service-card{
    background:var(--card); padding:38px 32px; min-height:260px;
    border-radius:18px; border:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  }
  .service-card::before{
    content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
    background:linear-gradient(135deg, var(--teal-bright), transparent 40%);
    opacity:0; transition:opacity .35s ease;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
  .service-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(10,27,48,0.28); border-color:transparent;}
  .service-card:hover::before{opacity:1;}
  .service-card .icon-badge{
    width:46px; height:46px; border-radius:12px;
    background:linear-gradient(135deg, rgba(62,110,147,0.12), rgba(128,187,226,0.14));
    display:flex; align-items:center; justify-content:center;
    color:var(--teal);
  }
  .service-card .icon-badge svg{width:22px; height:22px;}
  .service-card .index{font-family:var(--font-mono); font-size:0.74rem; color:var(--gold); font-weight:500; position:absolute; top:34px; right:32px;}
  .service-card h3{
    font-family:var(--font-display); font-weight:600; font-size:1.24rem;
    margin-top:24px; letter-spacing:-0.01em;
  }
  .service-card p{font-size:0.94rem; color:var(--ink-soft); margin-top:12px; line-height:1.55;}

  /* ============ APPROACH ============ */
  .approach{background:var(--ink); color:var(--white); position:relative; overflow:hidden;}
  .approach::before{
    content:""; position:absolute; top:-20%; left:60%; width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle, rgba(122,161,192,0.18), transparent 70%); z-index:0;
  }
  .approach .wrap{position:relative; z-index:1;}
  .approach .section-head p{color:rgba(255,255,255,0.62);}
  .approach .eyebrow-light{color:var(--aqua);}
  .approach .eyebrow-light::before{background:var(--aqua);}
  .steps{display:flex; flex-direction:column;}
  .step{
    display:grid; grid-template-columns:80px 1fr 1fr; gap:40px;
    padding:36px 0; border-top:1px solid var(--line-dark);
    align-items:start; transition:padding-left .3s ease;
  }
  .steps .step:last-child{border-bottom:1px solid var(--line-dark);}
  .step:hover{padding-left:12px;}
  .step .num{font-family:var(--font-mono); font-size:0.95rem; color:var(--teal-bright);}
  .step h4{font-family:var(--font-display); font-size:1.35rem; font-weight:600;}
  .step p{color:rgba(255,255,255,0.6); font-size:0.97rem; line-height:1.6;}

  /* ============ FOUNDER ============ */
  .founder{background:var(--paper);}
  .founder .wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:76px; align-items:center;}
  .founder-card{
    background:var(--card); border:1px solid var(--line); border-radius:22px;
    padding:46px; position:relative; overflow:hidden;
    box-shadow:0 30px 70px -40px rgba(10,27,48,0.25);
  }
  .founder-card::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:5px;
    background:linear-gradient(90deg, var(--teal), var(--aqua) 55%, var(--gold-bright));
  }
  .founder-card .quote-mark{font-family:var(--font-display); font-size:3.6rem; color:var(--paper-dim); line-height:0.5; margin-bottom:14px;}
  .founder-card p.quote{font-size:1.22rem; line-height:1.6; color:var(--ink); font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em;}
  .founder-card .who{margin-top:32px; padding-top:26px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px;}
  .founder-avatar{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg, var(--teal), var(--aqua));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; color:var(--white); font-size:0.95rem;
    flex-shrink:0;
  }
  .founder-card .who .name{font-weight:600; font-family:var(--font-display);}
  .founder-card .who .role{font-family:var(--font-mono); font-size:0.8rem; color:var(--gold);}
  .founder-copy .section-head{margin-bottom:26px;}
  .founder-copy p{color:var(--ink-soft); font-size:1.04rem; line-height:1.75; margin-bottom:18px;}

  /* ============ WHY GRID ============ */
  .why{background:var(--paper-dim);}
  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:10px;}
  .why-item{
    background:var(--card); border-radius:16px; border:1px solid var(--line);
    padding:34px; display:flex; gap:20px; align-items:flex-start;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .why-item:hover{transform:translateY(-4px); box-shadow:0 20px 40px -26px rgba(10,27,48,0.25);}
  .why-item .dot{width:10px; height:10px; border-radius:50%; background:var(--teal-bright); margin-top:8px; flex-shrink:0; box-shadow:0 0 0 4px rgba(122,161,192,0.15);}
  .why-item h4{font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-bottom:8px;}
  .why-item p{color:var(--ink-soft); font-size:0.95rem; line-height:1.55;}

  /* ============ CTA BANNER ============ */
  .cta-banner{
    background:var(--void); color:var(--white); position:relative; overflow:hidden;
  }
  .cta-banner::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(700px circle at 20% 50%, rgba(122,161,192,0.28), transparent 60%);
  }
  .cta-banner .wrap{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
  .cta-banner h2{font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.9rem); max-width:600px; letter-spacing:-0.02em;}

  /* ============ CONTACT ============ */
  .contact{background:var(--paper);}
  .contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:76px;}
  .contact-list{display:flex; flex-direction:column; gap:0; margin-top:36px;}
  .contact-row{
    display:flex; align-items:center; gap:20px; padding:22px 0; border-top:1px solid var(--line);
    transition:padding-left .25s ease;
  }
  .contact-row:hover{padding-left:6px;}
  .contact-list .contact-row:last-child{border-bottom:1px solid var(--line);}
  .contact-row .icon{
    width:44px; height:44px; border-radius:13px;
    background:linear-gradient(135deg, var(--teal), var(--teal-bright));
    color:var(--white);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-row .icon svg{width:19px; height:19px;}
  .contact-row .label{font-family:var(--font-mono); font-size:0.72rem; color:var(--teal); text-transform:uppercase; letter-spacing:0.06em;}
  .contact-row .val{font-size:1.03rem; font-weight:500; margin-top:3px;}
  .map-frame{
    border-radius:20px; overflow:hidden; border:1px solid var(--line); min-height:100%;
    position:relative; box-shadow:0 30px 70px -40px rgba(10,27,48,0.25);
  }
  .map-frame iframe{width:100%; height:100%; min-height:420px; border:0; display:block; filter:grayscale(0.15) contrast(1.02);}

  /* ============ FOOTER ============ */
  footer{background:var(--void); color:rgba(255,255,255,0.55); padding:56px 0 36px; border-top:1px solid var(--line-dark);}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px;}
  .footer-brand{display:flex; align-items:center; gap:12px;}
  .footer-brand img{height:24px;}
  .footer-brand span{font-family:var(--font-display); font-weight:700; color:var(--white); font-size:1rem;}
  footer .fine{font-family:var(--font-mono); font-size:0.78rem;}
  footer .foot-links{display:flex; gap:28px;}
  footer .foot-links a{font-size:0.85rem; transition:color .2s ease;}
  footer .foot-links a:hover{color:var(--white);}

  /* ============ SCROLL PROGRESS BAR ============ */
  #scrollProgress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:9998;
    background:linear-gradient(90deg, var(--teal-bright), var(--aqua));
    box-shadow:0 0 10px rgba(128,187,226,0.6);
    transition:width .05s linear;
  }

  /* ============ GRAIN OVERLAY ============ */
  #grain{
    position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* magnetic buttons */
  .magnetic{ display:inline-flex; transition:transform .15s ease-out; }
  .cursor-glow{
    position:fixed; top:0; left:0; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(122,161,192,0.14), transparent 70%);
    pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
    opacity:0; transition:opacity .3s ease;
    mix-blend-mode:normal;
  }
  @media (pointer:fine){ .cursor-glow.active{opacity:1;} }

  /* ============ MARQUEE ============ */
  .marquee-strip{
    background:var(--ink); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
    overflow:hidden; padding:20px 0;
  }
  .marquee-track{
    display:flex; width:max-content; gap:60px;
    animation:marquee 26s linear infinite;
  }
  .marquee-strip:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .marquee-item{
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-mono); font-size:0.86rem; color:rgba(255,255,255,0.55);
    white-space:nowrap; letter-spacing:0.02em;
  }
  .marquee-item .sep{width:6px; height:6px; border-radius:50%; background:var(--teal-bright); flex-shrink:0;}
  .marquee-item .sep.gold{background:var(--gold-bright);}
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  /* ============ CARD TILT ============ */
  .service-card{ transform-style:preserve-3d; perspective:800px; will-change:transform; }
  .service-card .icon-badge, .service-card h3, .service-card p{ transform:translateZ(18px); }

  /* rotating conic glow ring */
  @property --ring-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
  .service-card{ position:relative; z-index:0; }
  .service-card .ring{
    position:absolute; inset:-1.5px; border-radius:19px; z-index:-1;
    background:conic-gradient(from var(--ring-angle), transparent 0%, var(--teal-bright) 12%, var(--aqua) 20%, transparent 32%);
    opacity:0; transition:opacity .4s ease;
    animation:ringSpin 3.2s linear infinite;
  }
  .service-card:hover .ring{opacity:1;}
  @keyframes ringSpin{ to{ --ring-angle:360deg; } }
  @supports not (background: conic-gradient(from 0deg, red, blue)){
    .service-card .ring{display:none;}
  }

  /* ============ PROGRESS LINE (approach) ============ */
  .steps{ position:relative; }
  .steps-rail{
    position:absolute; left:39px; top:0; bottom:0; width:2px;
    background:var(--line-dark); z-index:0;
  }
  .steps-rail-fill{
    position:absolute; left:0; top:0; width:100%; height:0%;
    background:linear-gradient(180deg, var(--teal-bright), var(--aqua));
    transition:height .1s linear;
    box-shadow:0 0 12px rgba(128,187,226,0.6);
  }
  .step{ position:relative; z-index:1; }
  .step .num{ position:relative; }
  .step .num::before{
    content:""; position:absolute; left:-3px; top:50%; width:8px; height:8px; border-radius:50%;
    background:var(--void); border:2px solid var(--teal-bright); transform:translateY(-50%);
  }

  /* ============ DATA-FLOW DIVIDER ============ */
  .flow-divider{ background:var(--paper-dim); padding:0; line-height:0; }
  .flow-divider svg{ width:100%; height:auto; display:block; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:960px){
    .hero-badge{grid-template-columns:repeat(2,1fr);}
    .hero-badge .cell:nth-child(2){border-right:none;}
    .hero-badge .cell:nth-child(3){border-top:1px solid var(--line-dark);}
    .hero-badge .cell:nth-child(4){border-top:1px solid var(--line-dark);}
    .service-grid{grid-template-columns:1fr;}
    .founder .wrap{grid-template-columns:1fr; gap:44px;}
    .why-grid{grid-template-columns:1fr;}
    .contact .wrap{grid-template-columns:1fr;}
    .step{grid-template-columns:56px 1fr;}
    .step p{grid-column:2 / 3;}
  }
  @media (max-width:720px){
    nav.links{display:none;}
    .ghost-mark{width:80%; opacity:0.07;}
    .hero{padding:150px 0 90px;}
    section{padding:88px 0;}
    .nav-inner{padding:8px 8px 8px 16px;}
  }

  /* ============ MOBILE MENU ============ */
  .menu-btn{
    display:none; background:none; border:none; cursor:pointer; padding:8px;
    width:38px; height:38px; align-items:center; justify-content:center; flex-shrink:0;
  }
  .menu-btn span{
    position:relative; display:block; width:18px; height:2px; background:var(--ink);
    transition:transform .25s ease, opacity .25s ease;
  }
  .menu-btn span::before, .menu-btn span::after{
    content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
    transition:transform .25s ease, top .25s ease, opacity .25s ease;
  }
  .menu-btn span::before{ top:-6px; }
  .menu-btn span::after{ top:6px; }
  .menu-btn.open span{ background:transparent; }
  .menu-btn.open span::before{ top:0; transform:rotate(45deg); }
  .menu-btn.open span::after{ top:0; transform:rotate(-45deg); }

  #mobileMenu{
    position:fixed; inset:0; z-index:99; background:var(--void);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  #mobileMenu.open{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  }
  #mobileMenu a{
    font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:var(--white);
    padding:14px 0;
  }
  #mobileMenu .nav-cta{ margin-top:18px; }
  body.menu-open{ overflow:hidden; }

  /* ============ PAGE HERO (inner pages) ============ */
  .page-hero{
    position:relative; background:var(--void); color:var(--white);
    padding:168px 0 84px; overflow:hidden; isolation:isolate;
  }
  .page-hero .mesh{ opacity:0.85; }
  .page-hero .wrap{ position:relative; z-index:2; }
  .page-hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing:-0.02em; line-height:1.05;
    max-width:760px;
  }
  .page-hero p.sub{
    font-size:1.08rem; line-height:1.6; color:rgba(255,255,255,0.62);
    max-width:560px; margin-top:20px;
  }

  /* ============ EXTRA SMALL SCREENS ============ */
  @media (max-width:720px){
    .menu-btn{ display:flex; }
  }
  @media (max-width:520px){
    .wrap{ padding:0 20px; }
    .hero{ padding:140px 0 70px; }
    .page-hero{ padding:130px 0 60px; }
    section{ padding:64px 0; }
    .hero-badge{ grid-template-columns:1fr; }
    .hero-badge .cell{ border-right:none !important; border-top:1px solid var(--line-dark); }
    .hero-badge .cell:first-child{ border-top:none; }
    .hero-ctas{ flex-direction:column; align-items:flex-start; gap:14px; }
    .btn-primary, .btn-ghost{ width:100%; justify-content:center; text-align:center; }
    .btn-ghost{ border-bottom:none; }
    .stat, .step{ padding-left:0; }
    .step{ grid-template-columns:1fr; gap:8px; }
    .step .num{ display:none; }
    .steps-rail{ display:none; }
    .founder-card{ padding:30px; }
    .founder .wrap{ gap:32px; }
    .contact-row{ flex-wrap:wrap; }
    .contact .wrap{ gap:40px; }
    .cta-banner .wrap{ flex-direction:column; align-items:flex-start; text-align:left; }
    footer .wrap{ flex-direction:column; align-items:flex-start; gap:18px; }
    .nav-inner{ padding:8px 8px 8px 14px; }
    .brand-name{ font-size:0.92rem; }
  }