/* ==================================================================================================================
   Glass layer, loaded after clean.css: a lit backdrop (soft green light, a faint grid that fades out), frosted
   translucent surfaces with a bright top rim, Instrument Sans for text and Inter Tight for headings, and quiet orbit
   rings behind the hero and the closing box.
   ================================================================================================================== */
:root{
  --sans:"Instrument Sans","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --round:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  --display:"Inter Tight","Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono","Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --bg:#080d0a;
  --glass:rgba(22,32,26,.42); --glass-2:rgba(30,42,34,.55);
  --glass-rim:rgba(238,242,231,.09); --glass-rim-2:rgba(238,242,231,.16);
  --glass-hi:0 0 0 transparent;
  --glass-drop:0 12px 32px -24px rgba(0,0,0,.6);
  --glass-fill:var(--glass);
  --blur:blur(18px) saturate(160%);
}
body{background:var(--bg);font-family:var(--sans);font-size:15px;letter-spacing:-.003em}
h1,h2,h3,h4{font-family:var(--round)}

/* ---- backdrop: pools of green light and a faint grid under the top of the page */
body::before{content:"";display:block;position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:1!important;animation:none!important;
  background:
    radial-gradient(900px 600px at 12% -8%,rgba(201,255,63,.085),transparent 60%),
    radial-gradient(800px 700px at 100% 18%,rgba(46,140,96,.16),transparent 62%),
    radial-gradient(1000px 700px at 40% 115%,rgba(30,90,62,.20),transparent 60%)!important;
  -webkit-mask:none!important;mask:none!important}
body::after{content:"";display:block!important;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1!important;animation:none!important;
  background:linear-gradient(rgba(238,242,231,.035) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(238,242,231,.035) 1px,transparent 1px) 0 0/72px 72px!important;
  -webkit-mask:radial-gradient(1100px 620px at 50% 0,#000,transparent 75%)!important;mask:radial-gradient(1100px 620px at 50% 0,#000,transparent 75%)!important}

/* ---- the strip and nav float over the backdrop as frosted bars */
.orbio-bar{background:rgba(8,13,10,.55);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom-color:var(--glass-rim)}
.top{background:rgba(9,14,11,.58);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-rim);box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.logo{font-family:var(--mono);font-weight:600}
nav.links a,nav.links summary,details.more > summary{font-family:var(--sans);font-weight:500}
nav.links a[aria-current],details.more:has(a[aria-current]) > summary{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.05)}
.more-m{background:rgba(16,24,19,.72);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);border-color:var(--glass-rim-2);box-shadow:var(--glass-hi),0 24px 50px -20px rgba(0,0,0,.85)}
@media(max-width:900px){nav.links{background:rgba(9,14,11,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top-color:var(--glass-rim)}}

/* ---- buttons: glass pills for secondary actions, a lit lime face for the main one */
.btn,.btn.sm,.btn.lg,.btn.xl,.h2-hero .btn.lg,.pf .btn.lg,.h2-end .btn,.btn.accent,.btn.accent.xl,.h2-hero .btn.accent,.pf .btn.accent,.h2-end .btn.accent{border-radius:999px;font-family:var(--sans);font-weight:500}
.btn{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:var(--glass-rim-2);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border-color:rgba(238,242,231,.24)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.accent,.btn.accent.xl,.h2-hero .btn.accent,.pf .btn.accent,.h2-end .btn.accent{background:linear-gradient(180deg,#d8ff70,#c2f73a);border-color:rgba(201,255,63,.9);color:#0a1206;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 18px -8px rgba(201,255,63,.35)}
.btn.accent:hover{background:linear-gradient(180deg,#e2ff8a,#cbff4a);filter:none}
.btn.primary{background:linear-gradient(180deg,#fff,#e6ebdf);border-color:#fff;color:#0b100d;box-shadow:inset 0 1px 0 #fff,0 6px 18px -10px rgba(255,255,255,.3)}
.kbtn{border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* ---- every surface: frosted, a bright top rim, a soft drop */
.panel,.kpi,.step,.bridge,.lp-card,.mcard,.fl-card,.fcard,.ocard,.pf-card,.h2-steps li,.h2-done,.h2-chip,.mg-more,.h2-ask,.h2-end{
  background:var(--glass-fill);border-color:var(--glass-rim);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi),var(--glass-drop)}
.panel,.mcard,.fl-card,.fcard,.ocard,.pf-card,.kpi,.h2-steps li,.h2-done,.mg-more{border-radius:16px}
.mcard:hover,.mcard:focus-visible,.fl-card:hover,.fcard:hover,.h2-done:hover,.h2-steps li:hover,.mg-more:hover,.h2-chip:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%),var(--glass-2);border-color:var(--glass-rim-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 44px -24px rgba(0,0,0,.8)}
.h2-chip{border-radius:999px}
.in{border-radius:10px;background:rgba(6,10,8,.5);border-color:var(--glass-rim-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.seg{border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--glass-rim)}
.seg button{border-radius:999px}

/* ---- hero: orbit rings and soft light behind the headline, a few slowly circling points, a frosted request box */
.h2-hero{position:relative;isolation:isolate}
.h2-hero::before,.h2-hero::after{content:"";display:block!important;position:absolute;z-index:-1;left:50%;top:-150px;width:min(1100px,140vw);height:840px;pointer-events:none}
.h2-hero::before{transform:translateX(-50%)!important;animation:none!important;
  background:
    radial-gradient(closest-side,rgba(201,255,63,.10),transparent 55%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 119px,rgba(201,255,63,.085) 119px 120px)!important;
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 92%);mask:radial-gradient(closest-side,#000 30%,transparent 92%)}
.h2-hero::after{transform:translateX(-50%);
  background:
    radial-gradient(circle at calc(50% + 240px) 50%,rgba(201,255,63,.9) 0 2px,transparent 3px),
    radial-gradient(circle at calc(50% - 170px) calc(50% + 170px),rgba(238,242,231,.6) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at calc(50% - 288px) calc(50% - 216px),rgba(201,255,63,.7) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at calc(50% + 254px) calc(50% + 254px),rgba(238,242,231,.45) 0 1.5px,transparent 2.5px);
  animation:glass-orbit 120s linear infinite}
@keyframes glass-orbit{to{transform:translateX(-50%) rotate(360deg)}}
.h2-title{font-family:var(--round);font-weight:600;letter-spacing:-.05em}
.h2-hl{background:linear-gradient(180deg,#e6ffa3,#c9ff3f 70%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.h2-kick{border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.h2-ask{border-radius:20px;padding:10px;border-color:var(--glass-rim-2)}
.h2-ask:focus-within{border-color:rgba(201,255,63,.4);box-shadow:var(--glass-hi),0 0 0 4px rgba(201,255,63,.06),var(--glass-drop)}
.h2-stats{padding:18px 6px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--glass-rim);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi)}
.h2-stats li{border-left-color:var(--glass-rim)}

/* ---- section heads: a short lime rule above each heading */
.h2-sec-h h2::before{content:"";display:block;width:28px;height:2px;margin-bottom:16px;border-radius:2px;background:linear-gradient(90deg,var(--accent),rgba(201,255,63,0))}
.h2-step-i{border-radius:12px;background:linear-gradient(180deg,rgba(201,255,63,.16),rgba(201,255,63,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(201,255,63,.18)}
.h2-q{border-top-color:var(--glass-rim)}
.h2-q details{border-bottom-color:var(--glass-rim)}
footer{background:rgba(8,13,10,.6);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top-color:var(--glass-rim)}

/* ---- closing box: frosted, lit from above, with the rings again in the corner */
.h2-end{border-radius:24px;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(700px 280px at 50% -10%,rgba(201,255,63,.13),transparent 70%),var(--glass-fill)}
.h2-end::after{content:"";display:block!important;position:absolute;inset:auto -160px -260px auto;width:560px;height:560px;z-index:-1;pointer-events:none;animation:none!important;
  background:repeating-radial-gradient(circle,transparent 0 59px,rgba(201,255,63,.10) 59px 60px)!important;
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent);mask:radial-gradient(closest-side,#000 20%,transparent)}

/* ---- leaderboard podium: glass steps, the winner's lit in lime */
.pod-base,.bt-podium .pod-base{background:var(--glass-fill)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi)!important}
.pod-1 .pod-base{background:linear-gradient(180deg,rgba(201,255,63,.14),rgba(201,255,63,.02) 70%),var(--glass)!important}

@media (prefers-reduced-motion:reduce){.h2-hero::after{animation:none}}
@media(max-width:640px){.h2-stats{padding:14px 4px}.h2-hero::before,.h2-hero::after{top:-60px;height:620px}}

/* ---- tracking: Inter Tight is already narrow, so headings need far less negative spacing than Geist did */
.h2-title{letter-spacing:-.032em}
.h2-sec-h h2,.h2-end h2,.h-page{letter-spacing:-.028em}
.h2-steps b,.h2-done-h,.ocard h3,h3,.h2-q summary{letter-spacing:-.01em}
.h2-stats b,.kpi b,.h2-end-p b{letter-spacing:-.02em}

/* ---- the header's blur lives on a layer behind it: a backdrop-filter on .top itself would pin the phone tab bar inside it */
.top{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent}
.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(9,14,11,.6);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@media(max-width:900px){nav.links{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,14,11,.94)}}

/* ---- tables: solid hairline rows, names without boxes */
table td,table th{border-bottom-style:solid!important;border-bottom-color:var(--glass-rim)!important}
td .chip{border-color:transparent;background:transparent;padding-left:0}
td .chip:hover{background:rgba(255,255,255,.04)}
