  :root{
    --bg:#050609;
    --glass-fill: rgba(255,255,255,0.055);
    --glass-fill-strong: rgba(255,255,255,0.09);
    --glass-border: rgba(255,255,255,0.14);
    --line:rgba(255,255,255,0.09);
    --text:#f2f4f8;
    --text-dim:#9aa3b2;
    --violet:#8b5cf6;
    --cyan:#22d3ee;
    --pink:#f472b6;
    --amber:#fbbf24;
    --mono:'JetBrains Mono', monospace;
    --sans:'Inter', system-ui, sans-serif;
    --display:'Space Grotesk', var(--sans);
    --radius:20px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
    position:relative;
  }
  img{max-width:100%;}
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}

  /* ============ AURORA FIELD ============ */
  .aurora{
    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    background:var(--bg);
    contain:strict;
  }
  .aurora .blob{
    position:absolute;border-radius:50%;
    filter:blur(90px);
    mix-blend-mode:screen;
    opacity:0.55;
    will-change:transform;
  }
  .blob-1{width:56vw;height:56vw;top:-18vw;left:-10vw;background:radial-gradient(circle, var(--violet), transparent 70%);animation:drift1 26s ease-in-out infinite;}
  .blob-2{width:46vw;height:46vw;top:-6vw;right:-14vw;background:radial-gradient(circle, var(--cyan), transparent 70%);animation:drift2 32s ease-in-out infinite;}
  .blob-3{width:50vw;height:50vw;bottom:-22vw;left:18vw;background:radial-gradient(circle, var(--pink), transparent 70%);animation:drift3 30s ease-in-out infinite;}
  .blob-4{width:34vw;height:34vw;bottom:6vw;right:6vw;background:radial-gradient(circle, var(--amber), transparent 70%);opacity:0.35;animation:drift1 22s ease-in-out infinite reverse;}
  @keyframes drift1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(6vw,8vw) scale(1.12);}
  }
  @keyframes drift2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-8vw,10vw) scale(0.9);}
  }
  @keyframes drift3{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(5vw,-9vw) scale(1.08);}
  }
  .grain{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    opacity:0.05;mix-blend-mode:overlay;
  }
  .grain svg{width:100%;height:100%;}
  .veil{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(circle at 50% 0%, transparent 0%, rgba(5,6,9,0.4) 55%, var(--bg) 100%);
  }

  /* ============ GLASS PRIMITIVE ============ */
  .glass{
    position:relative;
    background:var(--glass-fill);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    backdrop-filter: blur(22px) saturate(1.7);
    border:1px solid var(--glass-border);
    border-radius:var(--radius);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 24px 60px -24px rgba(0,0,0,0.65);
    overflow:hidden;
  }
  .glass-strong{background:var(--glass-fill-strong);}
  .glass::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.25));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; opacity:0.6;
  }
  /* specular sheen — a soft diagonal highlight drifting across the glass,
     the cue that reads as "liquid" without the cross-browser risk of
     pixel-displacement filters inside backdrop-filter */
  .glass::after{
    content:"";position:absolute;inset:-40% -40%;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.10) 52%, transparent 60%);
    transform:translateX(-30%);
    animation:sheenSweep 9s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes sheenSweep{
    0%,100%{transform:translateX(-35%) translateY(-10%);}
    50%{transform:translateX(15%) translateY(10%);}
  }

  .pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;border-radius:999px;
    font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    color:#e6e1ff;
  }
  .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:pulse 1.8s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

  /* NAV — no box, floats directly on the page */
  header{position:sticky;top:0;z-index:50;width:100%;}
  nav{display:flex;align-items:center;justify-content:space-between;}
  nav.wrap{padding:16px 24px;}
  .wordmark{
    font-family:var(--display);font-weight:700;color:#fff;
    letter-spacing:-0.01em;white-space:nowrap;line-height:1;display:inline-block;
  }
  /* Recolor the "i" dot cyan — real webfont text, not an image, so it's
     crisp at any size and a one-line edit if the wordmark copy ever changes. */
  .wordmark .i-dot{position:relative;}
  .wordmark .i-dot::after{
    content:"";position:absolute;top:-0.08em;left:50%;transform:translate(-50%,-100%);
    width:0.19em;height:0.19em;border-radius:50%;background:var(--cyan);
  }
  .nav-links{display:none;gap:28px;align-items:center;}
  @media(min-width:860px){.nav-links{display:flex;}}
  .nav-links a{color:var(--text-dim);text-decoration:none;font-size:14px;font-weight:500;transition:color .15s;}
  .nav-links a:hover{color:var(--text);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 24px;border-radius:999px;
    font-weight:600;font-size:14px;text-decoration:none;
    border:1px solid transparent;cursor:pointer;
    transition:transform .15s, box-shadow .15s, background .15s;
    font-family:var(--sans);
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    color:#050609;
    box-shadow:0 10px 30px -10px rgba(139,92,246,0.75), 0 0 0 1px rgba(255,255,255,0.08);
    position:relative;
  }
  .btn-primary::after{
    content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
    background:conic-gradient(from var(--ang,0deg), var(--violet), var(--cyan), var(--pink), var(--violet));
    opacity:0;transition:opacity .25s;animation:spin 4s linear infinite;
  }
  .btn-primary:hover::after{opacity:0.9;}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 40px -8px rgba(34,211,238,0.7);}
  @property --ang{syntax:'<angle>';initial-value:0deg;inherits:false;}
  @keyframes spin{to{--ang:360deg;}}
  .btn-ghost{color:var(--text);border-color:var(--glass-border);}
  .btn-ghost:hover{background:rgba(255,255,255,0.06);}
  .nav-cta{display:none;}
  @media(min-width:860px){.nav-cta{display:inline-flex;}}

  /* HERO */
  .hero{padding:56px 0 80px;position:relative;}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;}
  @media(min-width:960px){.hero-grid{grid-template-columns:1.15fr 1fr;}}
  .hero h1{
    font-family:var(--display);font-size:clamp(40px,6.4vw,72px);
    line-height:1.02;letter-spacing:-0.03em;margin:22px 0 20px;
    animation:heroIn .9s cubic-bezier(.16,1,.3,1) both;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(120deg,var(--violet),var(--cyan) 45%,var(--pink) 90%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    background-size:200% auto;
    animation:sheen 8s linear infinite;
    filter:drop-shadow(0 0 26px rgba(139,92,246,0.35));
  }
  @keyframes sheen{to{background-position:200% center;}}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px);filter:blur(6px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
  .hero p.lead{font-size:18px;color:var(--text-dim);max-width:50ch;margin:0 0 24px;animation:heroIn 1s .1s cubic-bezier(.16,1,.3,1) both;}
  @media(prefers-reduced-motion:reduce){.hero h1,.hero p.lead{animation:none;}}

  /* STAT ROW — honest, verifiable claims only */
  .stat-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px;}
  .stat-chip{padding:13px 18px;min-width:110px;}
  .stat-chip .num{
    font-family:var(--display);font-weight:700;font-size:22px;line-height:1;display:block;
    background:linear-gradient(120deg,var(--cyan),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat-chip .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-top:6px;display:block;}

  /* LIVE SIGNAL TICKER */
  .ticker-wrap{
    overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:rgba(255,255,255,0.03);padding:11px 0;position:relative;z-index:5;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .ticker-track{display:flex;gap:48px;white-space:nowrap;width:max-content;animation:ticker 28s linear infinite;}
  .ticker-track span{
    font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-dim);display:inline-flex;align-items:center;gap:10px;
  }
  .ticker-track span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:none;}
  @keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

  /* CURSOR SPOTLIGHT — premium hover glow on interactive glass surfaces */
  .spotlight{position:relative;}
  .spotlight::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,0.22), transparent 65%);
    opacity:0;transition:opacity .3s;pointer-events:none;
  }
  .spotlight:hover::before{opacity:1;}
  .spotlight > *{position:relative;z-index:1;}

  /* SCROLL REVEAL */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}
  .grid-4 .card:nth-child(1){transition-delay:0s;}
  .grid-4 .card:nth-child(2){transition-delay:.08s;}
  .grid-4 .card:nth-child(3){transition-delay:.16s;}
  .grid-4 .card:nth-child(4){transition-delay:.24s;}
  .steps .step:nth-child(1){transition-delay:0s;}
  .steps .step:nth-child(2){transition-delay:.08s;}
  .steps .step:nth-child(3){transition-delay:.16s;}
  .steps .step:nth-child(4){transition-delay:.24s;}

  /* HERO NETWORK CANVAS — subtle node graph, sells "real tech" without noise */
  #hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0.55;pointer-events:none;}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px;}
  .service-pills{display:flex;flex-wrap:wrap;gap:10px;}
  .service-pills span{
    font-size:12px;font-family:var(--mono);color:var(--text-dim);
    border:1px solid var(--glass-border);padding:7px 12px;border-radius:999px;
    background:rgba(255,255,255,0.03);
  }

  /* floating decorative orbs around hero card for the 3D feel */
  .orb-field{position:absolute;inset:-40px -40px auto auto;pointer-events:none;z-index:0;}
  .orb{
    position:absolute;border-radius:50%;
    background:linear-gradient(135deg, rgba(139,92,246,0.5), rgba(34,211,238,0.15));
    filter:blur(2px);
    box-shadow:0 0 40px rgba(139,92,246,0.35);
    animation:float 7s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-16px) rotate(8deg);}}

  /* CHAT WIDGET */
  .agent-wrap{position:relative;}
  .agent-card{border-radius:26px;overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease-out;}
  .agent-head{
    display:flex;align-items:center;gap:10px;
    padding:16px 18px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,0.04);
  }
  .agent-avatar{
    width:34px;height:34px;border-radius:10px;
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:700;color:#050609;font-size:14px;
  }
  .agent-name{font-weight:600;font-size:14px;}
  .agent-status{font-size:11px;color:#7ee787;display:flex;align-items:center;gap:5px;font-family:var(--mono);}
  .agent-status .dot{background:#3fb950;box-shadow:0 0 8px #3fb950;}
  .agent-body{height:340px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;}
  .msg{max-width:85%;padding:11px 15px;border-radius:14px;font-size:14px;line-height:1.5;}
  .msg.bot{align-self:flex-start;background:rgba(255,255,255,0.06);border:1px solid var(--line);border-bottom-left-radius:4px;}
  .msg.user{
    align-self:flex-end;
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    color:#050609;font-weight:500;border-bottom-right-radius:4px;
  }
  .msg.typing{align-self:flex-start;color:var(--text-dim);font-family:var(--mono);font-size:12px;}
  .agent-foot{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line);background:rgba(255,255,255,0.03);}
  .agent-foot input{
    flex:1;background:rgba(0,0,0,0.25);border:1px solid var(--line);border-radius:999px;
    padding:12px 16px;color:var(--text);font-size:14px;font-family:var(--sans);
  }
  .agent-foot input:focus{outline:none;border-color:var(--cyan);}
  .agent-foot button{
    background:linear-gradient(135deg,var(--violet),var(--cyan));
    border:none;border-radius:999px;padding:0 20px;color:#050609;font-weight:700;cursor:pointer;
  }
  .honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;opacity:0;}

  /* SECTIONS */
  section{padding:96px 0;position:relative;z-index:2;}
  .eyebrow{
    font-family:var(--mono);font-size:12px;
    background:linear-gradient(120deg,var(--cyan),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:block;font-weight:600;
  }
  h2{font-family:var(--display);font-size:clamp(27px,3.5vw,40px);letter-spacing:-0.02em;margin:0 0 16px;max-width:22ch;}
  .section-lead{color:var(--text-dim);max-width:60ch;font-size:16px;margin-bottom:48px;}

  .grid-4{display:grid;grid-template-columns:1fr;gap:20px;}
  @media(min-width:700px){.grid-4{grid-template-columns:1fr 1fr;}}
  @media(min-width:1080px){.grid-4{grid-template-columns:repeat(4,1fr);}}
  .card{padding:28px;transition:transform .2s, box-shadow .2s;}
  .card:hover{transform:translateY(-4px);}
  .card .ic{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg, rgba(139,92,246,0.35), rgba(34,211,238,0.2));
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:#d9d3ff;
  }
  .card h3{font-size:17px;margin:0 0 10px;font-family:var(--display);}
  .card p{color:var(--text-dim);font-size:14px;margin:0;}

  .steps{display:grid;grid-template-columns:1fr;gap:20px;}
  @media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);}}
  .step{padding:26px 22px;}
  .step .n{
    font-family:var(--display);font-weight:700;font-size:22px;
    background:linear-gradient(120deg,var(--violet),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    display:block;margin-bottom:12px;
  }
  .step h4{font-family:var(--display);font-size:16px;margin:0 0 8px;}
  .step p{color:var(--text-dim);font-size:14px;margin:0;}

  .proof{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch;}
  @media(min-width:900px){.proof{grid-template-columns:1fr 1fr;}}
  .proof-card{padding:34px;}
  .proof-card ul{margin:18px 0 0;padding-left:18px;color:var(--text-dim);font-size:14px;}
  .proof-card li{margin-bottom:8px;}
  .badge-live{
    display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
    color:#7ee787;background:rgba(63,185,80,0.12);border:1px solid rgba(63,185,80,0.35);
    padding:5px 12px;border-radius:999px;margin-bottom:14px;
  }

  .cities{display:flex;flex-wrap:wrap;gap:10px;}
  .city{padding:10px 18px;border-radius:999px;font-size:13px;color:var(--text-dim);}
  .city.accent{color:#ffe4c2;border-color:rgba(251,191,36,0.4);}

  .cta-band{padding:60px 40px;text-align:center;position:relative;overflow:hidden;}
  .cta-band h2{margin:0 auto 14px;max-width:24ch;}
  .cta-band p{color:var(--text-dim);max-width:52ch;margin:0 auto 30px;}
  .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

  footer{padding:40px 0;border-top:1px solid var(--line);position:relative;z-index:2;}
  .foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;}
  .foot-links{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:13px;color:var(--text-dim);}
  .foot-links-wide{max-width:760px;}
  .foot-links a{text-decoration:none;}
  .foot-links a:hover{color:var(--text);}
  small.legal{display:block;margin-top:18px;color:#6b7280;font-size:12px;}

  /* ============ INNER PAGES (services / locations) ============ */
  .breadcrumb{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-bottom:18px;letter-spacing:.02em;}
  .breadcrumb a{color:var(--text-dim);text-decoration:none;}
  .breadcrumb a:hover{color:var(--text);}
  .breadcrumb span{margin:0 6px;opacity:.5;}
  .proof-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
  .proof-list li{padding:16px 18px;display:flex;gap:12px;align-items:flex-start;}
  .proof-list .mark{color:var(--cyan);font-family:var(--mono);flex:none;margin-top:1px;}
  .faq{display:grid;gap:14px;}
  .faq-item{padding:22px 26px;}
  .faq-item h3{font-family:var(--display);font-size:16px;margin:0 0 8px;}
  .faq-item p{color:var(--text-dim);font-size:14px;margin:0;}
  .related-links{display:flex;flex-wrap:wrap;gap:12px;}
  .related-links a{
    padding:10px 18px;border-radius:999px;font-size:13px;text-decoration:none;
    color:var(--text-dim);border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);
    transition:color .15s, border-color .15s;
  }
  .related-links a:hover{color:var(--text);border-color:rgba(255,255,255,0.3);}

  .human-note{
    margin:14px 4px 0;text-align:center;font-size:13px;color:var(--text-dim);
  }
  .human-note a{color:var(--text);text-decoration:underline;text-decoration-color:var(--glass-border);}
  .human-note a:hover{text-decoration-color:var(--cyan);}
