:root{
    --bg:#060707;
    --bg-1:#0b0c0d;
    --panel:#0f1112;
    --panel-2:#141719;
    --border:rgba(255,255,255,.08);
    --border-2:rgba(255,255,255,.15);
    --hair:rgba(255,255,255,.045);
    --tp:#f5f5f5;
    --ts:#b4b4b4;
    --tt:#7d7d7d;
    --acc:#43f5a4;
    --acc-d:#1f9e69;
    --acc-glow:rgba(67,245,164,.35);
    --acc-soft:rgba(67,245,164,.08);
    --amber:#f5c343;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --maxw:1200px;
    --r:5px;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{
    font-family:var(--mono);
    background:var(--bg); color:var(--tp); line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
    background-image:
      linear-gradient(var(--hair) 1px, transparent 1px),
      linear-gradient(90deg, var(--hair) 1px, transparent 1px);
    background-size:64px 64px, 64px 64px;
    background-position:center top;
  }
  /* scanline + vignette overlay */
  body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:200;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply; opacity:.5;
  }
  ::selection{ background:var(--acc); color:#021a0f; }
  a{ color:inherit; text-decoration:none; }
  .lnk{ color:var(--tp); border-bottom:1px solid var(--border-2); transition:.15s; }
  .lnk:hover{ color:#fff; border-bottom-color:#fff; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; }
  .mono{ font-family:var(--mono); }
  h1,h2,h3,h4{ font-family:var(--mono); }

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

  /* ---------- buttons ---------- */
  .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:600; font-size:13.5px; padding:10px 17px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; letter-spacing:.01em; }
  .btn-ghost{ color:var(--tp); border-color:var(--border-2); background:rgba(255,255,255,.015); }
  .btn-ghost:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.3); }
  .btn-primary{ color:#03130c; background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 0 var(--acc-glow); }
  .btn-primary:hover{ box-shadow:0 0 24px -4px var(--acc-glow); transform:translateY(-1px); }
  .btn-lg{ padding:14px 24px; font-size:14.5px; }

  /* ---------- nav ---------- */
  header.nav{ position:sticky; top:0; z-index:100; backdrop-filter:blur(16px); background:rgba(6,7,7,.7); border-bottom:1px solid var(--border); }
  .nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
  .logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
  .logo .mark{ width:26px; height:26px; border-radius:5px; background:var(--panel-2); border:1px solid var(--border-2); display:grid; place-items:center; position:relative; overflow:hidden; }
  .logo .mark::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, var(--acc-soft), transparent 70%); }
  .logo .mark b{ color:var(--acc); font-size:14px; font-weight:800; position:relative; }
  .logo em{ font-style:normal; }
  .logo .car{ color:var(--acc); margin-left:1px; }
  .nav-links{ display:flex; gap:6px; align-items:center; }
  .nav-links a{ color:#e6e6e6; font-size:13px; font-weight:500; transition:.15s; padding:7px 12px; border-radius:4px; }
  .nav-links a:hover{ color:#ffffff; background:rgba(255,255,255,.08); }
  .nav-cta{ display:flex; gap:10px; align-items:center; }
  .nav-cta .ghostlink{ color:#e6e6e6; font-size:13px; font-weight:500; padding:7px 10px; transition:.15s; }
  .nav-cta .ghostlink:hover{ color:#ffffff; }
  @media(max-width:840px){ .nav-links,.nav-cta .ghostlink{ display:none; } }

  /* status pill */
  .pill{ display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border-radius:100px; border:1px solid var(--border); background:rgba(255,255,255,.02); font-size:12px; color:var(--ts); font-weight:500; }
  .pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 var(--acc-glow); animation:pulse 2.4s infinite; }
  @keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--acc-glow);} 70%{ box-shadow:0 0 0 7px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

  /* ---------- hero ---------- */
  .hero{ position:relative; padding:110px 0 72px; overflow:hidden; }
  .hero::before{ content:""; position:absolute; left:50%; top:-180px; transform:translateX(-50%); width:1200px; height:760px; background:radial-gradient(46% 50% at 50% 38%, rgba(255,255,255,.035), transparent 70%); pointer-events:none; z-index:0; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; position:relative; z-index:1; }
  @media(max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
  .htag{ font-size:12px; letter-spacing:.04em; color:#f0f0f0; display:inline-flex; align-items:center; gap:10px; }
  .htag .sep{ color:var(--ts); }
  h1{ font-size:clamp(42px,6.4vw,76px); font-weight:800; letter-spacing:-.045em; line-height:.96; margin-top:24px; color:var(--tp); }
  h1 .slash{ color:var(--acc); }
  h1 .hcur{ display:inline-block; width:.13em; height:.86em; background:var(--acc); vertical-align:-.04em; margin-left:.04em; border-radius:1px; box-shadow:0 0 12px var(--acc-glow); animation:bk 1.05s steps(1) infinite; }
  .sub{ font-size:clamp(15px,1.6vw,17.5px); color:var(--ts); max-width:520px; margin-top:24px; line-height:1.6; }
  .sub b{ color:var(--tp); font-weight:600; }
  .hero-points{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:26px; }
  .hero-points span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ts); }
  .hero-points span svg{ width:14px; height:14px; flex:none; color:var(--ts); }
  .actions{ display:flex; gap:12px; margin-top:34px; flex-wrap:wrap; }

  /* ---------- console card ---------- */
  .console{ position:relative; border-radius:8px; border:1px solid var(--border-2); background:linear-gradient(180deg,var(--panel-2),var(--panel)); overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02); }
  .console::after{ content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); pointer-events:none; }
  .console-bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.015); }
  .console-bar i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
  .console-bar i:nth-child(1){ background:#ff5f56; } .console-bar i:nth-child(2){ background:#ffbd2e; } .console-bar i:nth-child(3){ background:#27c93f; }
  .console-bar .tt{ margin-left:10px; font-size:11.5px; color:var(--tt); }
  .console-bar .badge{ margin-left:auto; font-size:10.5px; color:var(--acc); border:1px solid var(--acc-d); border-radius:3px; padding:1px 7px; letter-spacing:.05em; }
  .console-body{ padding:20px 20px 24px; font-size:12.8px; line-height:1.95; min-height:284px; }
  .cline{ white-space:pre-wrap; word-break:break-word; }
  .c-grn{ color:var(--acc); } .c-amber{ color:var(--amber); } .c-tp{ color:var(--tp); }
  .c-dim{ color:var(--tt); } .c-ts{ color:var(--ts); }
  .cur{ display:inline-block; width:8px; height:14px; background:var(--acc); vertical-align:-2px; box-shadow:0 0 10px var(--acc-glow); animation:bk 1s steps(1) infinite; }
  @keyframes bk{ 50%{ opacity:0; } }

  /* ---------- logos ---------- */
  .logos{ padding:54px 0; }
  .logos p{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tt); font-weight:600; text-align:center; }
  .logos-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 40px; margin-top:26px; }
  .logos-row .lg{ font-weight:700; font-size:17px; color:var(--ts); letter-spacing:-.02em; opacity:.5; transition:.2s; }
  .logos-row .lg:hover{ opacity:1; color:var(--tp); }

  /* ---------- sections ---------- */
  section.blk{ padding:78px 0; position:relative; }
  .eyebrow{ font-size:12px; letter-spacing:.04em; color:var(--ts); margin-bottom:18px; display:inline-flex; align-items:center; gap:9px; }
  .eyebrow .br{ color:var(--tt); }
  h2{ font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-.03em; line-height:1.06; color:var(--tp); }
  h2 .acc{ color:var(--tp); }
  .lead{ font-size:16px; color:var(--ts); max-width:680px; margin-top:22px; line-height:1.66; }

  /* everything-wall: flat, direct tile grid */
  .ewall{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:46px; border:1px solid var(--border); background:var(--border); }
  @media(max-width:860px){ .ewall{ grid-template-columns:1fr 1fr; } }
  @media(max-width:540px){ .ewall{ grid-template-columns:1fr; } }
  .etile{ background:var(--bg-1); padding:24px 24px 26px; transition:.18s; position:relative; }
  .etile:hover{ background:var(--panel-2); }
  .etile h3{ font-size:14px; font-weight:700; color:var(--tp); letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
  .etile h3 svg{ width:15px; height:15px; flex:none; color:var(--ts); }
  .etile:hover h3 svg{ color:var(--tp); }
  .etile h3 .gx{ color:var(--tt); font-weight:700; }
  .etile p{ font-size:12.8px; color:var(--ts); margin-top:8px; line-height:1.55; }
  .etile .arr{ position:absolute; top:22px; right:20px; color:var(--tt); font-size:13px; opacity:0; transform:translateX(-4px); transition:.18s; }
  .etile:hover .arr{ opacity:1; transform:none; color:var(--tp); }

  /* cards grid */
  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
  @media(max-width:860px){ .grid3{ grid-template-columns:1fr; } }
  .card{ position:relative; border:1px solid var(--border); background:var(--panel); border-radius:var(--r); padding:28px 26px; transition:.2s; overflow:hidden; }
  .card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); opacity:0; transition:.3s; }
  .card:hover{ border-color:var(--border-2); transform:translateY(-3px); background:var(--panel-2); }
  .card:hover::before{ opacity:1; }
  .card .ic{ width:40px; height:40px; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid var(--border-2); display:grid; place-items:center; color:var(--ts); margin-bottom:20px; }
  .card .ic svg{ width:19px; height:19px; }
  .card h3{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; color:var(--tp); }
  .card p{ font-size:13.5px; color:var(--ts); line-height:1.6; }

  /* chart */
  .chartwrap{ border:1px solid var(--border); background:var(--panel); border-radius:var(--r); padding:28px 26px 22px; }
  .chartwrap .ttl{ font-size:11.5px; color:var(--tt); margin-bottom:14px; letter-spacing:.02em; }
  .chartwrap svg{ width:100%; height:auto; display:block; }
  .chartnote{ font-size:13.5px; color:var(--ts); margin-top:20px; line-height:1.6; }
  .chartnote b{ color:var(--tp); }

  /* extensions chips */
  .chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; max-width:900px; }
  .chip{ font-size:12.5px; color:var(--ts); padding:7px 13px; border-radius:4px; border:1px solid var(--border); background:var(--bg-1); transition:.2s; }
  .chip:hover{ border-color:var(--border-2); color:var(--tp); }
  .chip.hot{ color:var(--tp); border-color:var(--border-2); background:rgba(255,255,255,.04); display:inline-flex; align-items:center; gap:8px; }
  .chip.hot .tag{ font-size:9.5px; font-weight:700; letter-spacing:.06em; background:var(--tp); color:#0a0b0b; padding:1px 6px; border-radius:3px; }
  .chip.more{ color:var(--tt); border-style:dashed; }

  /* stats */
  .stats{ position:relative; overflow:hidden; }
  .stats .wrap{ z-index:2; }
  .statrow{ display:flex; gap:0; margin-top:50px; flex-wrap:wrap; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
  .stat{ flex:1 1 200px; padding:30px 28px; border-right:1px solid var(--border); background:var(--panel); }
  .stat:last-child{ border-right:none; }
  .stat .num{ font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--tp); }
  .stat .lbl{ font-size:12.5px; color:var(--ts); margin-top:14px; max-width:210px; line-height:1.45; }
  .growth{ position:absolute; left:0; bottom:0; width:100%; height:78%; z-index:1; pointer-events:none; opacity:.5; }

  /* testimonials */
  .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
  @media(max-width:820px){ .tgrid{ grid-template-columns:1fr; } }
  .tcard{ border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:26px 24px; display:flex; flex-direction:column; transition:.2s; }
  .tcard:hover{ border-color:var(--border-2); }
  .tcard .q{ color:var(--tt); font-size:22px; line-height:1; margin-bottom:10px; }
  .tcard blockquote{ margin:0; font-size:14.5px; line-height:1.62; color:var(--tp); flex:1; }
  .tcard figcaption{ display:flex; align-items:center; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }
  .tcard .av{ width:34px; height:34px; border-radius:5px; background:var(--panel-2); border:1px solid var(--border-2); flex:none; display:grid; place-items:center; color:var(--ts); font-size:13px; font-weight:700; }
  .tcard figcaption b{ font-weight:700; font-size:13px; color:var(--tp); display:block; line-height:1.3; }
  .tcard figcaption i{ font-style:normal; font-size:12px; color:var(--ts); }

  /* pricing cards */
  .pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px; }
  @media(max-width:980px){ .pgrid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .pgrid{ grid-template-columns:1fr; } }
  .price{ position:relative; border:1px solid var(--border); background:var(--panel); border-radius:var(--r); padding:26px 22px; display:flex; flex-direction:column; transition:.2s; }
  .price:hover{ border-color:var(--border-2); transform:translateY(-3px); }
  .price.feat{ border-color:rgba(255,255,255,.3); background:linear-gradient(180deg,rgba(255,255,255,.045),var(--panel) 60%); }
  .price.feat::before{ content:"★ popular"; position:absolute; top:-10px; left:22px; font-size:10px; font-weight:700; letter-spacing:.06em; color:#0a0b0b; background:var(--tp); padding:3px 10px; border-radius:3px; }
  .price .name{ font-size:12.5px; font-weight:700; color:var(--ts); letter-spacing:.08em; }
  .price .ram{ font-size:11.5px; color:var(--tt); margin-top:6px; }
  .price .amt{ font-size:36px; font-weight:800; letter-spacing:-.04em; margin:18px 0 0; color:var(--tp); }
  .price .amt small{ font-size:13px; font-weight:500; color:var(--ts); letter-spacing:0; }
  .price ul{ list-style:none; margin:20px 0 24px; display:flex; flex-direction:column; gap:11px; }
  .price li{ font-size:12.8px; color:var(--ts); display:flex; gap:9px; align-items:flex-start; }
  .price li svg{ width:13px; height:13px; color:var(--ts); flex:none; margin-top:3px; }
  .price .btn{ width:100%; justify-content:center; margin-top:auto; }
  .ent{ margin-top:16px; border:1px solid var(--border); border-radius:var(--r); padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--panel); }
  .ent .t{ font-size:14px; color:var(--ts); } .ent .t b{ color:var(--tp); }

  /* final cta */
  .final{ position:relative; text-align:center; padding:128px 0; overflow:hidden; }
  .dbspin{ width:min(420px,86vw); aspect-ratio:1; margin:0 auto; cursor:grab; touch-action:none; position:relative; }
  .dbspin:active{ cursor:grabbing; }
  .dbspin canvas{ width:100%; height:100%; display:block; }
  .dbspin .hint{ position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); font-size:10.5px; letter-spacing:.06em; color:var(--tt); white-space:nowrap; pointer-events:none; }
  .final::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:1000px; height:560px; background:radial-gradient(46% 50% at 50% 50%, rgba(255,255,255,.035), transparent 70%); pointer-events:none; }
  .final .wrap{ z-index:1; }
  .final h2{ max-width:20ch; margin:0 auto; }
  .final p{ color:var(--ts); font-size:16px; margin:20px auto 0; max-width:520px; }

  /* ---------- region: earth (interactive globe) ---------- */
  .globe-blk{ padding:90px 0 84px; position:relative; overflow:hidden; text-align:center; }
  .globe-blk .wrap{ position:relative; z-index:1; }
  .globe-h2{ font-size:clamp(30px,4.6vw,52px); font-weight:800; letter-spacing:-.035em; line-height:1.04; color:var(--tp); }
  .globe-h2 .acc{ color:var(--acc); text-shadow:0 0 28px var(--acc-glow); }
  .globe-sub{ font-size:clamp(15px,1.7vw,19px); color:var(--ts); max-width:660px; margin:20px auto 0; line-height:1.6; }
  .globe-stage{ position:relative; width:100%; max-width:1200px; margin:18px auto 0; aspect-ratio:1600/760; cursor:grab; touch-action:none; }
  .globe-stage:active{ cursor:grabbing; }
  .globe-stage canvas{ width:100%; height:100%; display:block; }
  .globe-note{ position:absolute; max-width:210px; text-align:left; font-size:11.5px; line-height:1.5; color:var(--ts); background:rgba(11,12,13,.74); border:1px solid var(--acc-d); border-radius:5px; padding:10px 13px; backdrop-filter:blur(4px); box-shadow:0 0 30px -12px var(--acc-glow); }
  .globe-note b{ color:var(--acc); font-weight:600; }
  .globe-note.note-l{ left:1%; top:47%; }
  .globe-note.note-r{ right:1%; top:29%; }
  @media(max-width:760px){ .globe-note{ display:none; } }
  .globe-hint{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%); font-size:10.5px; letter-spacing:.06em; color:var(--tt); white-space:nowrap; pointer-events:none; }
  .globe-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:30px; border:1px solid var(--border); background:var(--border); text-align:left; }
  @media(max-width:760px){ .globe-cols{ grid-template-columns:1fr; } }
  .gcol{ background:var(--bg-1); padding:24px 24px 26px; transition:.18s; }
  .gcol:hover{ background:var(--panel-2); }
  .gcol .gic{ width:34px; height:34px; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid var(--border-2); display:grid; place-items:center; color:var(--acc); margin-bottom:16px; }
  .gcol .gic svg{ width:17px; height:17px; }
  .gcol h3{ font-size:14.5px; font-weight:700; color:var(--tp); letter-spacing:-.01em; margin-bottom:8px; }
  .gcol p{ font-size:12.8px; color:var(--ts); line-height:1.55; }

  /* footer */
  footer{ border-top:1px solid var(--border); padding:54px 0 60px; background:var(--bg-1); }
  .foot-in{ display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; }
  .foot-in .logo{ font-size:15px; }
  .foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
  .foot-col h5{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--tt); margin-bottom:15px; font-weight:700; }
  .foot-col a{ display:block; color:var(--ts); font-size:13.5px; margin-bottom:10px; transition:.15s; }
  .foot-col a:hover{ color:var(--tp); }
  .foot-btm{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--tt); }

  /* section divider */
  .sep{ max-width:var(--maxw); margin:0 auto; height:1px; background:repeating-linear-gradient(90deg, var(--border-2) 0 10px, transparent 10px 18px); }

  /* corner ticks */
  .ticks{ position:relative; }
  .ticks::before,.ticks::after{ content:""; position:absolute; width:10px; height:10px; border-color:var(--border-2); }

  /* ============================================================
     MULTI-PAGE ADDITIONS — nav dropdowns, page chrome, components
     (all styling lives here; CSP blocks inline style= attributes)
     ============================================================ */

  /* small utilities (replace CSP-blocked inline styles) */
  .center{ text-align:center; }
  .actions.center{ justify-content:center; }
  .mw-720{ max-width:720px; }
  .mt-38{ margin-top:38px; }
  .is-hidden{ display:none !important; }

  /* ---------- nav: dropdowns + mobile ---------- */
  .nav-item{ position:relative; display:flex; align-items:center; }
  .nav-trigger{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    font-family:var(--mono); color:#e6e6e6; font-size:13px; font-weight:500;
    padding:7px 12px; border-radius:4px; border:1px solid transparent;
    background:transparent; transition:.15s;
  }
  .nav-trigger:hover{ color:#fff; background:rgba(255,255,255,.08); }
  .nav-trigger .caret{ font-size:9px; color:var(--tt); transition:.18s; }
  .nav-item.open .nav-trigger{ color:#fff; background:rgba(255,255,255,.08); }
  .nav-item.open .nav-trigger .caret{ transform:rotate(180deg); color:var(--acc); }
  .nav-menu{
    position:absolute; top:calc(100% + 10px); left:0; min-width:208px;
    background:var(--panel); border:1px solid var(--border-2); border-radius:7px;
    padding:7px; display:flex; flex-direction:column; gap:1px;
    box-shadow:0 22px 60px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s; z-index:120;
  }
  .nav-menu::before{
    content:""; position:absolute; top:-5px; left:18px; width:9px; height:9px;
    background:var(--panel); border-left:1px solid var(--border-2); border-top:1px solid var(--border-2);
    transform:rotate(45deg);
  }
  .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu, .nav-item.open .nav-menu{
    opacity:1; visibility:visible; transform:none;
  }
  .nav-menu a{
    display:block; padding:9px 12px; border-radius:4px; font-size:13px; font-weight:500;
    color:var(--ts); transition:.13s; white-space:nowrap;
  }
  .nav-menu a:hover{ color:var(--tp); background:rgba(255,255,255,.06); }
  .nav-menu a b{ display:block; color:var(--tp); font-weight:600; }
  .nav-menu a i{ display:block; font-style:normal; font-size:11.5px; color:var(--tt); margin-top:2px; }

  /* hamburger */
  .hamburger{
    display:none; width:38px; height:38px; border:1px solid var(--border-2); border-radius:6px;
    background:rgba(255,255,255,.015); cursor:pointer; align-items:center; justify-content:center;
    flex-direction:column; gap:4px; padding:0;
  }
  .hamburger span{ display:block; width:16px; height:1.6px; background:var(--tp); transition:.2s; }
  .nav-open .hamburger span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
  .nav-open .hamburger span:nth-child(2){ opacity:0; }
  .nav-open .hamburger span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

  @media(max-width:840px){
    .hamburger{ display:flex; }
    .nav-links{
      position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
      background:var(--bg-1); border-bottom:1px solid var(--border); padding:14px 18px 22px;
      max-height:calc(100vh - 66px); overflow-y:auto;
      display:none;
    }
    .nav-open .nav-links{ display:flex; }
    .nav-links > a{ padding:12px 12px; border-bottom:1px solid var(--hair); }
    .nav-item{ flex-direction:column; align-items:stretch; }
    .nav-trigger{ justify-content:space-between; padding:12px 12px; border-bottom:1px solid var(--hair); }
    .nav-menu{
      position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
      border:none; background:transparent; padding:0 0 8px 12px; display:none;
    }
    .nav-menu::before{ display:none; }
    .nav-item.open .nav-menu{ display:flex; }
  }

  /* ---------- interior page hero ---------- */
  .phero{ position:relative; padding:78px 0 30px; overflow:hidden; }
  .phero::before{
    content:""; position:absolute; left:50%; top:-160px; transform:translateX(-50%);
    width:1100px; height:560px; background:radial-gradient(46% 50% at 50% 40%, rgba(255,255,255,.04), transparent 70%);
    pointer-events:none; z-index:0;
  }
  .phero .wrap{ position:relative; z-index:1; }
  .crumb{ font-size:12px; color:var(--tt); margin-bottom:20px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .crumb a{ color:var(--ts); transition:.15s; }
  .crumb a:hover{ color:var(--tp); }
  .crumb .div{ color:var(--border-2); }
  .phero h1{ font-size:clamp(34px,5vw,58px); margin-top:0; }
  .phero .sub{ max-width:660px; margin-left:0; }
  .phero .actions{ margin-top:30px; }

  /* generic prose paragraph under sections */
  .pp{ font-size:14.5px; color:var(--ts); line-height:1.7; max-width:680px; margin-top:18px; }
  .pp + .pp{ margin-top:14px; }
  .pp b{ color:var(--tp); font-weight:600; }
  .pp a.lnk{ color:var(--tp); }
  .section-head{ max-width:720px; }

  /* feature deep-dive rows */
  .frow{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:46px; border:1px solid var(--border); background:var(--border); }
  @media(max-width:760px){ .frow{ grid-template-columns:1fr; } }
  .fcell{ background:var(--bg-1); padding:30px 28px; }
  .fcell .ic{ width:38px; height:38px; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid var(--border-2); display:grid; place-items:center; color:var(--ts); margin-bottom:18px; }
  .fcell .ic svg{ width:18px; height:18px; }
  .fcell h3{ font-size:16px; font-weight:700; color:var(--tp); letter-spacing:-.01em; }
  .fcell p{ font-size:13.5px; color:var(--ts); line-height:1.62; margin-top:10px; }
  .fcell ul{ list-style:none; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; }
  .fcell li{ font-size:13px; color:var(--ts); display:flex; gap:9px; align-items:flex-start; }
  .fcell li::before{ content:"→"; color:var(--tt); flex:none; }

  /* ---------- comparison table ---------- */
  .tablewrap{ margin-top:46px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--panel); }
  .cmp{ width:100%; border-collapse:collapse; font-size:13.5px; }
  .cmp th, .cmp td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
  .cmp thead th{ font-size:12px; letter-spacing:.04em; color:var(--ts); font-weight:700; background:rgba(255,255,255,.015); }
  .cmp thead th.us{ color:var(--acc); }
  .cmp tbody td:first-child{ color:var(--tp); font-weight:600; width:34%; }
  .cmp td{ color:var(--ts); }
  .cmp col.us, .cmp td.us, .cmp th.us{ background:rgba(67,245,164,.05); }
  .cmp tr:last-child td{ border-bottom:none; }
  .cmp .yes{ color:var(--acc); font-weight:700; }
  .cmp .no{ color:var(--tt); }
  .cmp .mut{ color:var(--tt); }
  @media(max-width:680px){
    .tablewrap{ overflow-x:auto; }
    .cmp{ min-width:560px; }
  }

  /* "when they fit better" honest box */
  .fair{ margin-top:30px; border:1px solid var(--border); border-left:2px solid var(--border-2); border-radius:var(--r); background:var(--bg-1); padding:24px 26px; }
  .fair h4{ font-size:13.5px; color:var(--tp); font-weight:700; margin-bottom:10px; }
  .fair p{ font-size:13.5px; color:var(--ts); line-height:1.62; }
  .fair ul{ margin:12px 0 0 0; list-style:none; display:flex; flex-direction:column; gap:8px; }
  .fair li{ font-size:13px; color:var(--ts); display:flex; gap:9px; }
  .fair li::before{ content:"·"; color:var(--tt); }

  /* ---------- FAQ accordion ---------- */
  .faq{ margin-top:40px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; max-width:840px; }
  .faq-item{ border-bottom:1px solid var(--border); background:var(--panel); }
  .faq-item:last-child{ border-bottom:none; }
  .faq-item summary{ list-style:none; cursor:pointer; padding:18px 22px; font-size:14px; font-weight:600; color:var(--tp); display:flex; justify-content:space-between; gap:16px; align-items:center; transition:.15s; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ background:var(--panel-2); }
  .faq-item summary::after{ content:"+"; color:var(--acc); font-size:17px; flex:none; transition:.2s; }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item .ans{ padding:0 22px 20px; font-size:13.5px; color:var(--ts); line-height:1.65; max-width:720px; }
  .faq-item .ans a{ color:var(--tp); border-bottom:1px solid var(--border-2); }

  /* ---------- docs hub ---------- */
  .docwrap{ display:grid; grid-template-columns:220px 1fr; gap:40px; margin-top:46px; align-items:start; }
  @media(max-width:860px){ .docwrap{ grid-template-columns:1fr; gap:28px; } }
  .doctoc{ position:sticky; top:90px; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:18px 16px; }
  @media(max-width:860px){ .doctoc{ position:static; } }
  .doctoc h5{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--tt); margin-bottom:12px; font-weight:700; }
  .doctoc a{ display:block; font-size:13px; color:var(--ts); padding:6px 8px; border-radius:4px; transition:.13s; }
  .doctoc a:hover{ color:var(--tp); background:rgba(255,255,255,.05); }
  .docbody{ min-width:0; }
  .docsec{ padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid var(--border); scroll-margin-top:90px; }
  .docsec:last-child{ border-bottom:none; }
  .docsec h2{ font-size:22px; }
  .docsec h3{ font-size:15px; color:var(--tp); margin:22px 0 8px; font-weight:700; }
  .docsec p{ font-size:14px; color:var(--ts); line-height:1.7; margin-top:12px; max-width:680px; }
  .docsec p a{ color:var(--tp); border-bottom:1px solid var(--border-2); }
  .codeblock{ margin-top:16px; border:1px solid var(--border-2); border-radius:7px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); overflow:hidden; }
  .codeblock .cb-bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.015); }
  .codeblock .cb-bar i{ width:10px; height:10px; border-radius:50%; }
  .codeblock .cb-bar i:nth-child(1){ background:#ff5f56; } .codeblock .cb-bar i:nth-child(2){ background:#ffbd2e; } .codeblock .cb-bar i:nth-child(3){ background:#27c93f; }
  .codeblock .cb-bar span{ margin-left:8px; font-size:11px; color:var(--tt); }
  .codeblock pre{ margin:0; padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:12.8px; line-height:1.85; color:var(--ts); }
  .codeblock pre .c-grn{ color:var(--acc); } .codeblock pre .c-dim{ color:var(--tt); }
  .doc-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
  @media(max-width:560px){ .doc-cards{ grid-template-columns:1fr; } }

  /* ---------- blog ---------- */
  .posts{ display:flex; flex-direction:column; gap:1px; margin-top:46px; border:1px solid var(--border); background:var(--border); }
  .post{ background:var(--bg-1); padding:28px 30px; transition:.18s; display:block; position:relative; }
  .post:hover{ background:var(--panel-2); }
  .post .pmeta{ display:flex; gap:12px; align-items:center; font-size:11.5px; color:var(--tt); margin-bottom:12px; flex-wrap:wrap; }
  .post .ptag{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--acc); border:1px solid var(--acc-d); border-radius:3px; padding:2px 7px; }
  .post h3{ font-size:18px; font-weight:700; color:var(--tp); letter-spacing:-.01em; line-height:1.25; max-width:680px; }
  .post:hover h3{ color:#fff; }
  .post p{ font-size:13.5px; color:var(--ts); line-height:1.6; margin-top:10px; max-width:680px; }
  .post .more{ font-size:12.5px; color:var(--acc); margin-top:14px; display:inline-flex; gap:6px; align-items:center; }

  /* ---------- contact ---------- */
  .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
  @media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
  .ccard{ border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:28px 26px; transition:.2s; }
  .ccard:hover{ border-color:var(--border-2); transform:translateY(-3px); }
  .ccard .ic{ width:40px; height:40px; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid var(--border-2); display:grid; place-items:center; color:var(--ts); margin-bottom:18px; }
  .ccard .ic svg{ width:19px; height:19px; }
  .ccard h3{ font-size:15.5px; font-weight:700; color:var(--tp); }
  .ccard p{ font-size:13px; color:var(--ts); line-height:1.6; margin-top:10px; }
  .ccard a.cmail{ display:inline-block; margin-top:14px; font-size:13.5px; color:var(--acc); border-bottom:1px solid var(--acc-d); }
  .ccard a.cmail:hover{ color:#fff; border-bottom-color:#fff; }

  /* ---------- status ---------- */
  .status-banner{ margin-top:40px; border:1px solid var(--acc-d); border-radius:var(--r); background:rgba(67,245,164,.05); padding:22px 26px; display:flex; align-items:center; gap:14px; }
  .status-banner .dot{ width:11px; height:11px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 var(--acc-glow); animation:pulse 2.4s infinite; flex:none; }
  .status-banner b{ color:var(--tp); font-size:15.5px; font-weight:700; }
  .status-banner span{ color:var(--ts); font-size:13px; display:block; margin-top:3px; }
  .status-list{ margin-top:16px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
  .srow{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 22px; border-bottom:1px solid var(--border); background:var(--panel); }
  .srow:last-child{ border-bottom:none; }
  .srow .sname{ font-size:14px; color:var(--tp); font-weight:600; }
  .srow .sname i{ display:block; font-style:normal; font-size:12px; color:var(--tt); font-weight:400; margin-top:3px; }
  .spill{ font-size:11.5px; font-weight:600; color:var(--acc); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
  .spill .d{ width:7px; height:7px; border-radius:50%; background:var(--acc); }
  .uptime-row{ display:flex; gap:2px; margin-top:8px; }
  .uptime-row i{ flex:1; height:26px; border-radius:1.5px; background:var(--acc-d); opacity:.55; }
  .uptime-row i.dim{ opacity:.18; background:rgba(255,255,255,.2); }
  .uptime-legend{ display:flex; justify-content:space-between; font-size:11px; color:var(--tt); margin-top:8px; }
  .incident{ margin-top:16px; border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:22px 26px; }
  .incident h4{ font-size:13.5px; color:var(--tp); font-weight:700; }
  .incident p{ font-size:13px; color:var(--ts); margin-top:8px; line-height:1.6; }

  /* ---------- about ---------- */
  .values{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
  @media(max-width:820px){ .values{ grid-template-columns:1fr; } }
  .vcard{ border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:26px 24px; transition:.2s; }
  .vcard:hover{ border-color:var(--border-2); }
  .vcard .vn{ font-size:12px; color:var(--tt); font-weight:700; letter-spacing:.04em; }
  .vcard h3{ font-size:15.5px; color:var(--tp); font-weight:700; margin-top:8px; }
  .vcard p{ font-size:13px; color:var(--ts); line-height:1.6; margin-top:10px; }
  .team{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px; }
  @media(max-width:820px){ .team{ grid-template-columns:1fr 1fr; } }
  @media(max-width:480px){ .team{ grid-template-columns:1fr; } }
  .tmember{ border:1px solid var(--border); border-radius:var(--r); background:var(--panel); padding:24px 22px; }
  .tmember .av{ width:46px; height:46px; border-radius:7px; background:var(--panel-2); border:1px solid var(--border-2); display:grid; place-items:center; color:var(--ts); font-size:17px; font-weight:700; margin-bottom:16px; }
  .tmember b{ font-size:14px; color:var(--tp); display:block; }
  .tmember i{ font-style:normal; font-size:12px; color:var(--ts); display:block; margin-top:4px; }

  /* big metric row (about / performance) */
  .bigrow{ display:flex; flex-wrap:wrap; gap:0; margin-top:46px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
  .bigrow .b{ flex:1 1 180px; padding:30px 28px; border-right:1px solid var(--border); background:var(--panel); }
  .bigrow .b:last-child{ border-right:none; }
  .bigrow .bn{ font-size:clamp(30px,4.4vw,44px); font-weight:800; letter-spacing:-.04em; color:var(--tp); line-height:1; }
  .bigrow .bl{ font-size:12.5px; color:var(--ts); margin-top:12px; max-width:200px; line-height:1.45; }

  /* footer helpers (class-based; inline styles are CSP-blocked) */
  .foot-tag{ color:var(--tt); font-size:13px; margin-top:14px; max-width:280px; line-height:1.55; }
  .foot-status{ margin-top:18px; }
  a.foot-status:hover{ border-color:var(--border-2); }
  /* final CTA pill spacing */
  .final .pill{ margin-bottom:24px; }
  .final .actions{ margin-top:32px; justify-content:center; }