@layer reset, base, components, pages, utilities;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:96px}
  body,h1,h2,h3,p{margin:0}
  button,input{font:inherit}
  a{color:inherit;text-decoration:none}
  img,svg,canvas{display:block;max-width:100%}
}

@layer base {
  :root{
    color-scheme:dark;
    --bg:#04060b;
    --bg-deep:#020308;
    --surface:rgba(12,18,30,.68);
    --surface-strong:rgba(10,16,28,.9);
    --surface-soft:rgba(16,24,40,.48);
    --line:rgba(151,171,204,.15);
    --line-bright:rgba(100,228,255,.34);
    --text:#f5f8ff;
    --muted:#a9b5c9;
    --soft:#738198;
    --cyan:#58e7ff;
    --cyan-2:#16b8e6;
    --violet:#9071ff;
    --pink:#f471d0;
    --green:#52e5ad;
    --amber:#ffd069;
    --red:#ff6f8b;
    --grad:linear-gradient(120deg,var(--cyan),#9b8cff 52%,var(--pink));
    --font-display:"Space Grotesk",Inter,system-ui,sans-serif;
    --font-body:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    --max:1220px;
    --radius-sm:12px;
    --radius:18px;
    --radius-lg:28px;
    --shadow:0 32px 90px rgba(0,0,0,.46);
  }
  body{
    min-height:100vh;
    overflow-x:hidden;
    font-family:var(--font-body);
    color:var(--text);
    background:
      radial-gradient(circle at 50% -20%,rgba(67,109,180,.15),transparent 34%),
      linear-gradient(180deg,#050812 0%,var(--bg) 42%,var(--bg-deep) 100%);
    line-height:1.5;
    text-rendering:optimizeLegibility;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-6;
    pointer-events:none;
    opacity:.22;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    mix-blend-mode:soft-light;
  }
  ::selection{background:rgba(88,231,255,.25);color:#fff}
  :focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
  code,.mono{font-family:var(--font-mono)}
  code{font-size:.92em;color:#b9f5ff;overflow-wrap:anywhere}
  .container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
  .bg{
    position:fixed;
    inset:0;
    z-index:-5;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(116,143,181,.042) 1px,transparent 1px),
      linear-gradient(90deg,rgba(116,143,181,.042) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(to bottom,#000,transparent 82%);
  }
  .bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 49.9%,rgba(88,231,255,.13) 50%,transparent 50.1%);
    opacity:.45;
  }
  .orb{
    position:fixed;
    z-index:-4;
    border-radius:50%;
    filter:blur(90px);
    opacity:.15;
    pointer-events:none;
    animation:ambient-drift 18s ease-in-out infinite;
  }
  .orb.one{width:420px;height:420px;left:-220px;top:10%;background:var(--cyan)}
  .orb.two{width:480px;height:480px;right:-260px;top:30%;background:var(--violet);animation-delay:-6s}
  .orb.three{width:360px;height:360px;left:40%;bottom:-220px;background:var(--pink);animation-delay:-12s}
  @keyframes ambient-drift{50%{transform:translate3d(32px,-36px,0) scale(1.09)}}
}

@layer components {
  /* Header */
  .header{
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid transparent;
    background:linear-gradient(180deg,rgba(4,6,11,.9),rgba(4,6,11,.62));
    backdrop-filter:blur(22px) saturate(125%);
    transition:border-color .25s,background .25s;
  }
  .header.scrolled{border-color:var(--line);background:rgba(4,6,11,.84)}
  .nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{display:flex;align-items:center;gap:12px;min-width:max-content;font-family:var(--font-display);font-weight:700;letter-spacing:-.025em}
  .brand-mark{
    position:relative;
    width:40px;
    height:40px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid rgba(108,231,255,.32);
    border-radius:13px;
    color:var(--cyan);
    background:linear-gradient(145deg,rgba(88,231,255,.13),rgba(144,113,255,.12));
    box-shadow:inset 0 1px rgba(255,255,255,.14),0 10px 30px rgba(17,177,220,.13);
    overflow:hidden;
  }
  .brand-mark::after{content:"";position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);animation:brand-scan 5s ease-in-out infinite}
  .brand-mark svg{width:24px;height:24px;position:relative;z-index:1}
  .brand-mark.small{width:36px;height:36px;border-radius:12px}
  .brand-mark.small svg{width:21px;height:21px}
  @keyframes brand-scan{0%,65%{transform:translateX(-60%) rotate(12deg)}100%{transform:translateX(65%) rotate(12deg)}}
  .brand small{display:block;margin-top:1px;color:var(--soft);font:600 9px/1.2 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
  .nav-links{
    display:flex;
    align-items:center;
    gap:3px;
    padding:5px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(12,18,30,.42);
    box-shadow:inset 0 1px rgba(255,255,255,.035);
  }
  .nav-links a{position:relative;padding:9px 14px;border-radius:999px;color:var(--muted);font-size:13px;font-weight:600;transition:.2s ease}
  .nav-links a:hover{color:var(--text)}
  .nav-links a.active{color:#eaffff;background:rgba(88,231,255,.09);box-shadow:inset 0 0 0 1px rgba(88,231,255,.1)}
  .nav-links a.active::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);transform:translateX(-50%)}
  .nav-cta{display:flex;align-items:center;gap:10px}
  .menu-btn{display:none;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(15,23,38,.7);color:var(--text);cursor:pointer}
  .menu-btn::before{content:"";width:16px;height:11px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
  .mobile-panel{display:none;padding:8px 0 18px;border-top:1px solid var(--line)}
  .mobile-panel.open{display:block;animation:panel-in .2s ease both}
  .mobile-panel a{display:block;padding:12px 14px;border-radius:12px;color:var(--muted);font-weight:600}
  .mobile-panel a:hover,.mobile-panel a.active{color:var(--text);background:rgba(88,231,255,.07)}
  @keyframes panel-in{from{opacity:0;transform:translateY(-8px)}}

  /* Buttons and labels */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:11px 18px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:13px;
    cursor:pointer;
    color:var(--text);
    font-size:14px;
    font-weight:750;
    white-space:nowrap;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
  }
  .btn::after{content:"";position:absolute;inset:-80%;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.32) 50%,transparent 56%);transform:translateX(-50%);transition:transform .65s ease}
  .btn:hover::after{transform:translateX(50%)}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{color:#031116;background:linear-gradient(120deg,#7bf0ff,#8bdfff 35%,#a78cff 74%,#f18bd7);box-shadow:0 14px 36px rgba(65,202,232,.2),inset 0 1px rgba(255,255,255,.8)}
  .btn-primary:hover{box-shadow:0 18px 46px rgba(65,202,232,.27),inset 0 1px rgba(255,255,255,.8)}
  .btn-ghost{border-color:var(--line);background:rgba(13,20,34,.65);box-shadow:inset 0 1px rgba(255,255,255,.045)}
  .btn-ghost:hover{border-color:rgba(88,231,255,.35);background:rgba(18,29,48,.82)}
  .btn-small{min-height:38px;padding:8px 13px;border-radius:11px;font-size:12px}
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:7px 11px;
    border:1px solid rgba(88,231,255,.2);
    border-radius:999px;
    color:#a9f4ff;
    background:rgba(36,195,224,.06);
    font:700 11px/1.2 var(--font-mono);
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .eyebrow .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:live-pulse 2s ease-out infinite}
  @keyframes live-pulse{50%{box-shadow:0 0 4px var(--green);opacity:.7}}

  /* Shared sections */
  .section{position:relative;padding:96px 0}
  .section-head{max-width:790px;margin:0 auto 42px;text-align:center}
  .section-title{margin-top:15px;font:700 clamp(32px,4.6vw,58px)/1.02 var(--font-display);letter-spacing:-.05em;text-wrap:balance}
  .section-sub{max-width:680px;margin:16px auto 0;color:var(--muted);font-size:16px;line-height:1.75;text-wrap:pretty}
  .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.doc-item,.rate-card,.form-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    background:linear-gradient(145deg,rgba(15,23,38,.78),rgba(8,13,23,.64));
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 20px 60px rgba(0,0,0,.17);
  }
  .card{min-width:0;padding:26px;border-radius:var(--radius)}
  body[data-page="models"] .card{display:flex;flex-direction:column;min-height:252px}
  body[data-page="models"] .card h3{min-height:50px;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,1.55vw,21px);word-break:break-word}
  body[data-page="models"] .card>p{flex:1}
  .card::before,.doc-item::before,.rate-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(88,231,255,.09),transparent 45%);opacity:0;transition:opacity .25s}
  .card:hover::before,.doc-item:hover::before,.rate-card:hover::before{opacity:1}
  .card:hover{border-color:rgba(88,231,255,.27)}
  .card h3{margin:12px 0 8px;font:700 21px/1.18 var(--font-display);letter-spacing:-.025em;overflow-wrap:anywhere}
  .card p{color:var(--muted);line-height:1.7}
  .icon{width:44px;height:44px;margin-inline:auto;display:grid;place-items:center;border:1px solid rgba(88,231,255,.22);border-radius:13px;color:var(--cyan);background:linear-gradient(145deg,rgba(88,231,255,.11),rgba(144,113,255,.08));font-size:19px}
  .card{text-align:center}
  .card .chip-row{justify-content:center}
  .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
  .chip{display:inline-flex;align-items:center;max-width:100%;gap:6px;padding:6px 9px;border:1px solid rgba(88,231,255,.2);border-radius:8px;color:#bff7ff;background:rgba(34,190,220,.06);font:600 11px/1.35 var(--font-mono);overflow-wrap:anywhere}
  .chip.good{border-color:rgba(82,229,173,.24);color:#c1ffe7;background:rgba(82,229,173,.06)}
  .chip.warn{border-color:rgba(255,208,105,.28);color:#ffe9b0;background:rgba(255,208,105,.06)}
  .muted{color:var(--muted)}

  /* Data, code, docs */
  .codebox{position:relative;margin-top:14px;padding:18px;border:1px solid rgba(115,139,173,.17);border-radius:14px;background:#050912;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.025)}
  .codebox pre{margin:0;padding-right:72px;overflow:auto;color:#c8d5e8;font:12.5px/1.7 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
  .copy{position:absolute;z-index:2;top:10px;right:10px;min-height:31px;padding:6px 10px}
  .table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:rgba(9,14,24,.6);text-align:left}
  .table th,.table td{padding:15px;border-bottom:1px solid var(--line);vertical-align:top}
  .table tr:last-child td{border-bottom:0}
  .table th{color:var(--soft);background:rgba(255,255,255,.025);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
  .doc-list{display:grid;gap:18px;max-width:980px}
  .doc-item{padding:28px;border-radius:var(--radius)}
  .doc-item h3{margin:0 0 7px;font:700 22px/1.25 var(--font-display);letter-spacing:-.025em}
  .doc-item>.muted{line-height:1.7}
  .notice{margin:14px 0 0;padding:14px 16px;border:1px solid rgba(88,231,255,.16);border-radius:12px;color:var(--muted);background:rgba(88,231,255,.045);line-height:1.65;text-align:left}
  .notice p{margin:0}
  .notice.success{border-color:rgba(82,229,173,.24);background:rgba(82,229,173,.055)}
  .notice.danger{border-color:rgba(255,111,139,.28);color:#ffc4d0;background:rgba(255,111,139,.06)}
  .endpoint{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(7,12,21,.65)}
  .endpoint span{color:var(--soft)}

  /* Forms */
  .form-card{max-width:850px;margin:auto;padding:34px;border-radius:var(--radius-lg);text-align:left}
  .field{display:flex;gap:10px;margin-top:18px}
  input{width:100%;min-height:50px;border:1px solid var(--line);border-radius:13px;padding:0 16px;color:var(--text);background:rgba(3,7,14,.8);outline:0;transition:.2s}
  input:focus{border-color:rgba(88,231,255,.5);box-shadow:0 0 0 4px rgba(88,231,255,.08)}
  input::placeholder{color:#59677c}
  .result{display:none;margin-top:18px}.result.show{display:block;animation:result-in .3s ease both}
  @keyframes result-in{from{opacity:0;transform:translateY(8px)}}
  .stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
  .stat{padding:16px;border:1px solid var(--line);border-radius:13px;background:rgba(8,14,24,.65);text-align:center}
  .stat span{display:block;color:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
  .stat strong{display:block;margin-top:6px;font:700 20px/1.2 var(--font-display)}
  .bar{height:8px;margin-top:16px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.06)}
  .bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--grad);box-shadow:0 0 18px rgba(88,231,255,.3);transition:width .6s ease}

  /* Inner page hero */
  .page-kicker{position:relative;padding:72px 0 18px}
  .page-kicker::after{content:"";position:absolute;left:50%;top:-160px;width:min(920px,90vw);height:480px;z-index:-1;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(76,115,186,.17),transparent 67%);pointer-events:none}
  .mini-hero{max-width:900px;text-align:center}
  .breadcrumbs{margin-bottom:18px;color:var(--soft);font:600 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
  .breadcrumbs a:hover{color:var(--cyan)}
  .mini-hero h1{margin:15px 0 14px;font:700 clamp(45px,7vw,82px)/.98 var(--font-display);letter-spacing:-.06em}
  .mini-hero .lead{margin-inline:auto}
  .lead{max-width:720px;color:var(--muted);font-size:clamp(16px,1.7vw,19px);line-height:1.72;text-wrap:pretty}

  /* Rates */
  .rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .rate-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:21px;border-radius:var(--radius);text-align:left}
  .rate-card.good{border-color:rgba(82,229,173,.18)}
  .rate-card.warn{border-color:rgba(255,208,105,.2)}
  .rate-badge{width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(88,231,255,.2);border-radius:18px;color:#c5f8ff;background:rgba(88,231,255,.07);font:700 22px var(--font-display);white-space:nowrap}
  .rate-card.warn .rate-badge{border-color:rgba(255,208,105,.24);color:#ffeab8;background:rgba(255,208,105,.06)}
  .rate-card h3{margin:0 0 5px;font:700 19px/1.2 var(--font-display)}
  .rate-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

  /* Reveal */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* Footer */
  .footer{position:relative;padding:30px 0 38px;color:var(--soft)}
  .footer::before{content:"";display:block;width:min(var(--max),calc(100% - 48px));height:1px;margin:0 auto 26px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
  .footer-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px;padding:4px 0}
  .footer-brand{display:flex;align-items:center;gap:12px}
  .footer-brand b{display:block;color:var(--text);font-family:var(--font-display)}
  .footer-brand span:not(.brand-mark){display:block;margin-top:2px;color:#8f9db3;font-size:13px}
  .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
  .footer-links a{color:#a9b6ca;font-size:13px;font-weight:600;transition:color .2s}
  .footer-links a:hover{color:var(--cyan)}
  .footer-copy{color:#8f9db3;font-size:12px;white-space:nowrap}
}

@layer pages {
  /* Landing hero */
  .home-hero{position:relative;min-height:calc(100svh - 78px);display:grid;align-items:center;padding:70px 0 76px;overflow:hidden}
  .home-hero::after{content:"";position:absolute;inset:auto 0 0;height:140px;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
  .home-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);align-items:center;gap:54px}
  .hero-copy{position:relative;z-index:2}
  .hero-copy h1{max-width:750px;margin:20px 0 22px;font:700 clamp(52px,6.1vw,88px)/.92 var(--font-display);letter-spacing:-.065em;text-wrap:balance}
  .hero-copy .grad{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent;background-size:160% 100%;animation:gradient-shift 7s ease-in-out infinite}
  @keyframes gradient-shift{50%{background-position:100% 0}}
  .hero-copy .lead{max-width:620px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
  .proof-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}
  .proof{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}
  .proof strong{color:var(--text);font:700 17px var(--font-display)}
  .proof i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}

  /* 3D gateway */
  .gateway-stage{position:relative;min-height:610px;perspective:1100px;isolation:isolate;transform:translateZ(0)}
  .gateway-stage::before{content:"";position:absolute;inset:14% 6%;z-index:-3;border-radius:50%;background:radial-gradient(circle,rgba(59,213,240,.17),rgba(103,75,195,.08) 37%,transparent 68%);filter:blur(22px)}
  .gateway-grid{position:absolute;left:7%;right:7%;bottom:4%;height:42%;z-index:-2;transform:rotateX(67deg);transform-origin:center bottom;background-image:linear-gradient(rgba(88,231,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(88,231,255,.11) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to top,#000,transparent 82%);animation:grid-flow 4s linear infinite}
  @keyframes grid-flow{to{background-position:0 34px}}
  #gatewayCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .7s ease;pointer-events:none}
  .gateway-stage.webgl-ready #gatewayCanvas{opacity:.9}
  .gateway-machine{position:absolute;inset:8% 4% 10%;z-index:0;transform-style:preserve-3d;transition:transform .25s ease-out}
  .gateway-halo{position:absolute;left:50%;top:49%;width:420px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(88,231,255,.17);box-shadow:inset 0 0 50px rgba(88,231,255,.05),0 0 90px rgba(67,200,231,.06)}
  .gateway-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(107,228,255,.37);border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 16px rgba(88,231,255,.08),inset 0 0 16px rgba(88,231,255,.04)}
  .ring-a{width:330px;height:330px;margin:-165px;animation:ring-a 13s linear infinite}
  .ring-b{width:258px;height:258px;margin:-129px;border-color:rgba(162,130,255,.44);animation:ring-b 10s linear infinite reverse}
  .ring-c{width:190px;height:190px;margin:-95px;border-style:dashed;border-color:rgba(244,113,208,.45);animation:ring-c 17s linear infinite}
  .gateway-ring::before,.gateway-ring::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px 4px rgba(88,231,255,.55)}
  .gateway-ring::before{left:11%;top:14%}.gateway-ring::after{right:8%;bottom:22%;background:var(--violet);box-shadow:0 0 16px 4px rgba(144,113,255,.5)}
  @keyframes ring-a{to{transform:rotateZ(360deg) rotateX(63deg) rotateY(9deg)}}
  @keyframes ring-b{from{transform:rotateX(71deg) rotateY(24deg) rotateZ(0)}to{transform:rotateX(71deg) rotateY(24deg) rotateZ(360deg)}}
  @keyframes ring-c{from{transform:rotateY(68deg) rotateX(18deg) rotateZ(0)}to{transform:rotateY(68deg) rotateX(18deg) rotateZ(360deg)}}
  .gateway-core{position:absolute;left:50%;top:50%;width:118px;height:118px;transform:translate(-50%,-50%);border:1px solid rgba(166,242,255,.65);border-radius:32% 68% 63% 37%/41% 39% 61% 59%;background:radial-gradient(circle at 36% 28%,#eaffff 0 3%,#83f0ff 7%,rgba(61,200,231,.72) 16%,rgba(86,77,205,.65) 47%,rgba(10,18,35,.6) 72%);box-shadow:0 0 24px rgba(88,231,255,.58),0 0 82px rgba(80,114,246,.42),inset -18px -16px 35px rgba(11,20,43,.65);animation:core-morph 7s ease-in-out infinite,core-float 4.5s ease-in-out infinite}
  .gateway-core::after{content:"AI";position:absolute;inset:0;display:grid;place-items:center;color:#f5fdff;font:700 25px var(--font-display);letter-spacing:-.05em;text-shadow:0 0 15px #fff}
  @keyframes core-morph{50%{border-radius:61% 39% 39% 61%/58% 64% 36% 42%;filter:hue-rotate(25deg)}}
  @keyframes core-float{50%{translate:0 -9px;scale:1.04}}
  .model-node{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(130,159,202,.2);border-radius:10px;color:#d8e3f4;background:rgba(7,12,22,.72);box-shadow:0 12px 36px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(12px);font:600 10px var(--font-mono);animation:node-float 4s ease-in-out infinite}
  .model-node::before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--node,var(--cyan));box-shadow:0 0 11px var(--node,var(--cyan))}
  .node-1{left:2%;top:21%;--node:var(--cyan)}
  .node-2{right:0;top:26%;--node:var(--violet);animation-delay:-1.1s}
  .node-3{right:7%;bottom:18%;--node:var(--pink);animation-delay:-2.2s}
  .node-4{left:8%;bottom:14%;--node:var(--green);animation-delay:-3.1s}
  @keyframes node-float{50%{transform:translateY(-8px)}}
  .route-line{position:absolute;left:50%;top:50%;z-index:2;width:38%;height:1px;transform-origin:left;background:linear-gradient(90deg,rgba(88,231,255,.8),transparent);opacity:.45}
  .route-line::after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--cyan);animation:packet 2.7s ease-in-out infinite}
  .route-1{rotate:-150deg}.route-2{rotate:-28deg}.route-3{rotate:29deg}.route-4{rotate:145deg}
  .route-2::after{animation-delay:-.7s}.route-3::after{animation-delay:-1.4s}.route-4::after{animation-delay:-2.1s}
  @keyframes packet{0%{left:0;opacity:0}15%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
  .gateway-hud{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:rgba(5,9,17,.66);backdrop-filter:blur(10px);font:600 9px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
  .gateway-hud.top{top:4%;left:50%;transform:translateX(-50%)}
  .gateway-hud.bottom{left:50%;bottom:3%;transform:translateX(-50%)}
  .gateway-hud i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

  /* Model rail */
  .model-rail{position:relative;overflow:hidden;border-block:1px solid var(--line);background:rgba(7,11,19,.56)}
  .model-rail::before,.model-rail::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:120px;pointer-events:none}
  .model-rail::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
  .model-rail::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
  .rail-track{display:flex;width:max-content;gap:48px;padding:19px 0;animation:rail 28s linear infinite}
  .rail-item{display:flex;align-items:center;gap:10px;color:#8492a9;font:650 11px var(--font-mono);letter-spacing:.035em;white-space:nowrap}
  .rail-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
  @keyframes rail{to{transform:translateX(-50%)}}

  /* Flow story */
  .flow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:flow}
  .flow-card{position:relative;min-height:265px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(150deg,rgba(14,22,37,.76),rgba(7,11,19,.58));overflow:hidden;counter-increment:flow}
  .flow-card::before{content:"0" counter(flow);display:block;margin-bottom:50px;color:var(--cyan);font:700 11px var(--font-mono);letter-spacing:.1em}
  .flow-card::after{content:"";position:absolute;left:28px;right:28px;top:71px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.28}
  .flow-card h3{margin-bottom:10px;font:700 23px/1.15 var(--font-display);letter-spacing:-.03em}
  .flow-card p{color:var(--muted);line-height:1.7}
  .flow-card .flow-symbol{position:absolute;right:22px;top:20px;color:rgba(88,231,255,.24);font:700 36px var(--font-display)}

  /* Protocol cockpit */
  .cockpit{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:stretch}
  .cockpit-info,.cockpit-terminal{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(15,23,38,.8),rgba(6,10,18,.78));box-shadow:var(--shadow)}
  .cockpit-info{padding:34px}
  .cockpit-info h3{margin:17px 0 12px;font:700 32px/1.1 var(--font-display);letter-spacing:-.04em}
  .cockpit-info p{color:var(--muted);line-height:1.75}
  .protocol-tabs{display:flex;gap:7px;margin-top:26px;padding:5px;border:1px solid var(--line);border-radius:13px;background:rgba(4,8,15,.55)}
  .protocol-tab{flex:1;border:0;border-radius:9px;padding:10px 8px;color:var(--muted);background:transparent;cursor:pointer;font:700 11px var(--font-mono);transition:.2s}
  .protocol-tab.active{color:#eaffff;background:rgba(88,231,255,.1);box-shadow:inset 0 0 0 1px rgba(88,231,255,.15)}
  .protocol-meta{display:grid;gap:9px;margin-top:24px}
  .protocol-meta div{display:flex;justify-content:space-between;gap:18px;padding-bottom:9px;border-bottom:1px solid var(--line);color:var(--soft);font-size:12px}
  .protocol-meta strong{color:#d6e4f7;font:600 11px var(--font-mono);text-align:right;overflow-wrap:anywhere}
  .cockpit-terminal{position:relative;overflow:hidden;padding:0}
  .terminal-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
  .terminal-dots{display:flex;gap:6px}.terminal-dots i{width:7px;height:7px;border-radius:50%;background:#2b394d}.terminal-dots i:nth-child(1){background:#ff7185}.terminal-dots i:nth-child(2){background:#ffd069}.terminal-dots i:nth-child(3){background:#52e5ad}
  .terminal-bar span{color:var(--soft);font:600 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
  .live-code{min-height:320px;margin:0;padding:27px;overflow:auto;color:#bdc9dc;font:13px/1.8 var(--font-mono);white-space:pre-wrap;transition:opacity .18s}
  .live-code.switching{opacity:.15}
  .code-cyan{color:#78e9ff}.code-purple{color:#bb9dff}.code-green{color:#7ff0bd}.code-pink{color:#ff9bdc}.code-soft{color:#687990}
  .response-line{position:absolute;left:27px;right:27px;bottom:20px;display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid var(--line);color:var(--soft);font:600 10px var(--font-mono)}
  .response-line span{display:flex;align-items:center;gap:7px;color:var(--green)}
  .response-line span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}

  /* Feature cards and CTA */
  .feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .feature-card{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(10,16,28,.55);transition:transform .25s,border-color .25s}
  .feature-card:hover{transform:translateY(-4px);border-color:rgba(88,231,255,.27)}
  .feature-card .feature-icon{display:block;margin-bottom:34px;color:var(--cyan);font:700 19px var(--font-mono)}
  .feature-card h3{margin-bottom:8px;font:700 18px/1.25 var(--font-display)}
  .feature-card p{color:var(--muted);font-size:13px;line-height:1.68}
  .final-cta{padding:40px 0 106px}
  .cta-shell{position:relative;overflow:hidden;padding:76px 48px;border:1px solid rgba(88,231,255,.22);border-radius:32px;background:radial-gradient(circle at 50% 0,rgba(88,231,255,.14),transparent 38%),linear-gradient(135deg,rgba(16,26,44,.88),rgba(8,12,22,.82));text-align:center;box-shadow:var(--shadow)}
  .cta-shell::before,.cta-shell::after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(88,231,255,.13);border-radius:50%;animation:cta-orbit 13s linear infinite}
  .cta-shell::before{left:-130px;top:-130px}.cta-shell::after{right:-130px;bottom:-130px;animation-direction:reverse;border-color:rgba(144,113,255,.16)}
  @keyframes cta-orbit{to{transform:rotate(360deg)}}
  .cta-shell h2{position:relative;margin:15px auto;font:700 clamp(36px,5.4vw,66px)/.98 var(--font-display);letter-spacing:-.055em;text-wrap:balance}
  .cta-shell p{position:relative;max-width:620px;margin:auto;color:var(--muted);line-height:1.7}
  .cta-shell .hero-actions{position:relative;justify-content:center}

  /* Hourly model status */
  .status-kicker{padding-bottom:26px}
  .status-section{padding-top:24px}
  .status-overview{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(10,16,28,.72);box-shadow:var(--shadow)}
  .status-overview.operational{border-color:rgba(82,229,173,.34)}
  .status-overview.degraded{border-color:rgba(255,208,105,.38)}
  .status-overview.major_outage{border-color:rgba(255,111,139,.38)}
  .status-overview strong{display:block;font:700 21px var(--font-display)}
  .status-overview small{display:block;margin-top:3px;color:var(--muted)}
  .status-pulse{width:15px;height:15px;flex:0 0 auto;border-radius:50%;background:var(--soft);box-shadow:0 0 0 7px rgba(115,129,152,.1)}
  .status-pulse.operational{background:var(--green);box-shadow:0 0 0 7px rgba(82,229,173,.11),0 0 18px rgba(82,229,173,.5)}
  .status-pulse.degraded{background:var(--amber);box-shadow:0 0 0 7px rgba(255,208,105,.11),0 0 18px rgba(255,208,105,.45)}
  .status-pulse.major_outage{background:var(--red);box-shadow:0 0 0 7px rgba(255,111,139,.11),0 0 18px rgba(255,111,139,.45)}
  .status-pulse.loading{animation:status-loading 1.1s ease-in-out infinite}
  @keyframes status-loading{50%{opacity:.35;transform:scale(.82)}}
  .status-legend{display:flex;flex-wrap:wrap;gap:18px;margin:18px 2px 28px;color:var(--muted);font-size:13px}
  .status-legend span{display:flex;align-items:center;gap:7px}
  .health-dot{width:9px;height:9px;border-radius:3px}.health-dot.operational{background:var(--green)}.health-dot.slow{background:var(--amber)}.health-dot.error{background:var(--red)}
  .status-grid{display:grid;gap:14px}
  .status-card{position:relative;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(13,20,34,.82),rgba(8,13,23,.7));box-shadow:inset 0 1px rgba(255,255,255,.025)}
  .status-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
  .status-card-head h2{font:700 17px/1.3 var(--font-mono);overflow-wrap:anywhere}
  .status-card-head p{margin-top:5px;color:var(--soft);font-size:12px}
  .status-badge{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:750}
  .status-badge i{width:7px;height:7px;border-radius:50%}.status-badge.operational{color:var(--green);border-color:rgba(82,229,173,.25);background:rgba(82,229,173,.07)}.status-badge.operational i{background:var(--green)}
  .status-badge.slow{color:var(--amber);border-color:rgba(255,208,105,.27);background:rgba(255,208,105,.07)}.status-badge.slow i{background:var(--amber)}
  .status-badge.error{color:var(--red);border-color:rgba(255,111,139,.27);background:rgba(255,111,139,.07)}.status-badge.error i{background:var(--red)}
  .status-meta{display:flex;flex-wrap:wrap;gap:18px;margin:17px 0 13px;color:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.status-meta b{margin-left:4px;color:var(--muted)}
  .status-history{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;width:100%;padding:5px 2px 9px}
  .history-cell{width:100%;height:24px;min-width:0;padding:0;border:0;border-radius:3px;cursor:help;transition:transform .16s,filter .16s}.history-cell:hover,.history-cell:focus-visible{transform:translateY(-3px) scale(1.16);filter:brightness(1.2)}
  .history-cell.operational{background:var(--green);box-shadow:0 0 10px rgba(82,229,173,.18)}.history-cell.slow{background:var(--amber);box-shadow:0 0 10px rgba(255,208,105,.18)}.history-cell.error{background:var(--red);box-shadow:0 0 10px rgba(255,111,139,.2)}
  .status-note{margin-top:18px;color:var(--soft);font-size:12px}.status-error{display:none;margin-bottom:18px}
}

@layer utilities {
  @media (max-width:1050px){
    .home-hero{min-height:auto;padding-top:74px}
    .home-hero-grid{grid-template-columns:1fr;gap:22px}
    .hero-copy{text-align:center}
    .hero-copy h1,.hero-copy .lead{margin-inline:auto}
    .hero-actions,.proof-row{justify-content:center}
    .gateway-stage{width:min(650px,100%);min-height:570px;margin-inline:auto}
    .cockpit{grid-template-columns:1fr}
    .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .rate-grid{grid-template-columns:1fr}
  }
  @media (max-width:900px){
    .nav-links,.nav-cta .btn-ghost{display:none}
    .menu-btn{display:inline-flex}
    .grid,.grid.two{grid-template-columns:1fr}
    .flow-grid{grid-template-columns:1fr}
    .flow-card{min-height:220px}
    .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-card{grid-template-columns:1fr;text-align:center}
    .footer-brand,.footer-links{justify-content:center}
    .footer-copy{white-space:normal}
  }
  @media (max-width:680px){
    .container{width:min(var(--max),calc(100% - 28px))}
    .nav{height:66px}
    .brand small{display:none}
    .brand-mark{width:36px;height:36px}
    .section{padding:66px 0}
    .home-hero{padding:52px 0 58px}
    .hero-copy h1{font-size:clamp(43px,13vw,62px);line-height:.96;letter-spacing:-.055em}
    .hero-copy .lead{font-size:15px;line-height:1.7}
    .hero-actions{display:grid;grid-template-columns:1fr;width:100%}
    .hero-actions .btn{width:100%}
    .proof-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
    .proof{justify-content:flex-start}
    .gateway-stage{min-height:440px;margin-top:10px}
    .gateway-machine{inset:5% 0 7%;transform:scale(.78)!important}
    .gateway-halo{width:340px}
    .model-node{font-size:8px;padding:7px 8px}
    .node-1{left:0}.node-2{right:0}.node-3{right:1%}.node-4{left:1%}
    .gateway-hud{font-size:7px}
    .model-rail::before,.model-rail::after{width:45px}
    .rail-track{gap:32px}
    .feature-grid{grid-template-columns:1fr}
    .feature-card .feature-icon{margin-bottom:22px}
    .cockpit-info{padding:25px}
    .cockpit-info h3{font-size:28px}
    .protocol-tabs{display:grid;grid-template-columns:1fr}
    .protocol-meta div{display:grid;gap:4px}
    .protocol-meta strong{text-align:left}
    .live-code{min-height:350px;padding:20px;font-size:11px;line-height:1.75}
    .response-line{left:20px;right:20px}
    .cta-shell{padding:58px 22px;border-radius:24px}
    .final-cta{padding-bottom:72px}
    .mini-hero h1{font-size:46px}
    .page-kicker{padding-top:48px}
    .card,.doc-item{padding:20px}
    .form-card{padding:21px}
    .field{flex-direction:column}
    .field .btn{width:100%}
    .codebox{padding:14px}
    .codebox pre{padding-right:0;padding-top:38px;font-size:11px}
    .copy{top:9px;right:9px}
    .table{display:block;overflow-x:auto}
    .rate-card{grid-template-columns:1fr;text-align:center}
    .rate-badge{width:100%;height:58px}
    .status-overview{align-items:flex-start;padding:19px}.status-card{padding:18px}.status-card-head{display:grid}.status-badge{width:max-content}.status-history{grid-template-columns:repeat(12,minmax(0,1fr))}.history-cell{height:22px}
    .footer::before{width:calc(100% - 28px)}
  }
  @media (max-width:390px){
    .brand{font-size:14px}.menu-btn{font-size:12px}
    .proof-row{grid-template-columns:1fr}
    .gateway-stage{min-height:395px}
    .gateway-machine{transform:scale(.68)!important}
    .model-node{display:none}
    .stat-grid{grid-template-columns:1fr}
  }
  @media (hover:none){.btn:hover,.feature-card:hover{transform:none}}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .reveal{opacity:1;transform:none}
    #gatewayCanvas{display:none}
    .rail-track{animation:none;transform:none}
  }
}