/* ============================================================
   1. TOKENS — cooler clinical palette (dark mode only)
   ============================================================ */
html:not(.sb-light){
  --green:#5cc0ff;                 /* brand accent shifts teal */
  --accent:#eaf1f4;
  --bg:#080b11; --bg2:#0c121b; --panel:#111823; --panel2:#16202c;
  --line:rgba(150,200,214,.10); --line2:rgba(150,200,214,.20);
  --txt:#eef3f7; --muted:#93a3b3; --dim:#5f7180;
}
html{
  --sb-teal:#5cc0ff; --sb-cyan:#9fd4ff;
  --sb-grad:linear-gradient(135deg,#5cc0ff 0%,#9fd4ff 100%);
  --sb-glow:rgba(92,192,255,.40);
}
html.sb-light{ --green:#3f8fd9; --sb-teal:#3f8fd9; --sb-cyan:#3b7fc4;
  --sb-grad:linear-gradient(135deg,#3f8fd9 0%,#3b7fc4 100%); --sb-glow:rgba(63,143,217,.32); }

/* ============================================================
   2. HEADER — glass + hairline
   ============================================================ */
body>header{background:rgba(8,11,17,.9)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--line);will-change:auto;transform:translateZ(0)}
html.sb-light body>header{background:rgba(255,255,255,.82)!important}
.nav{height:74px}
.nav-links{gap:30px}
.nav-links a{font-size:14.5px;font-weight:500;letter-spacing:.01em}
.nav-links a::after{height:2px;border-radius:2px;background:var(--sb-grad)!important}
.icon-btn{border-radius:50%}
.icon-btn:hover{color:var(--txt);border-color:var(--sb-teal);box-shadow:0 0 0 3px rgba(92,192,255,.14)}
.cart-count{background:var(--sb-grad)!important;color:#0a1626!important;font-weight:700}

/* ============================================================
   3. BUTTONS — primary teal gradient pill, refined ghost
   ============================================================ */
.btn:not(.btn-ghost),
.single_add_to_cart_button,
.sb-lp-cta,.sb-btn,.sb-copy,.sb-gate-submit:not(:disabled),
.sb-checkout,.sb-support-btn{
  background:var(--sb-grad)!important;color:#0c1a2b!important;border:none!important;
  border-radius:100px!important;font-weight:650!important;letter-spacing:.005em;
  box-shadow:0 8px 22px -10px var(--sb-glow);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.btn:not(.btn-ghost):hover,
.single_add_to_cart_button:hover,
.sb-lp-cta:hover,.sb-btn:hover,.sb-copy:hover,.sb-gate-submit:not(:disabled):hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 34px -12px var(--sb-glow)!important;text-decoration:none!important;
}
.btn:not(.btn-ghost):active{transform:translateY(0)}
.btn-ghost{background:rgba(255,255,255,.02)!important;border:1px solid var(--line2)!important;color:var(--txt)!important;border-radius:100px!important;transition:.18s ease}
.btn-ghost:hover{background:rgba(255,255,255,.06)!important;border-color:var(--sb-teal)!important;color:var(--txt)!important}
.btn .arrow{transition:transform .2s ease}
.btn:not(.btn-ghost):hover .arrow{transform:translateX(3px)}

/* ============================================================
   4. HERO — gradient headline + teal ambient glow
   ============================================================ */
.hero::before{background:radial-gradient(circle at center,rgba(92,192,255,.10),transparent 62%)!important}
.hero h1{letter-spacing:-.03em}
html:not(.sb-light) .hero h1 .grad{
  background:linear-gradient(120deg,#eaf7f4 0%,#5cc0ff 55%,#9fd4ff 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.hero p.sub{font-size:17.5px;line-height:1.65;max-width:560px}
.hero-stats .s b{font-size:30px;letter-spacing:-.02em}
.hero-stats .s b{background:linear-gradient(120deg,#fff,#c9d6dd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.sb-light .hero-stats .s b{background:none;-webkit-text-fill-color:initial}

/* ============================================================
   5. SECTION HEADERS + eyebrow
   ============================================================ */
.sec-head h2{letter-spacing:-.025em}
.eyebrow{color:var(--sb-teal)}
.dot{background:var(--sb-teal)!important;box-shadow:0 0 12px var(--sb-glow)!important}

/* ============================================================
   6. PRODUCT CARDS — modern surface + teal hover ring
   ============================================================ */
.products{gap:24px}
.card{
  border-radius:20px!important;
  background:linear-gradient(180deg,var(--panel),var(--bg2))!important;
  border:1px solid var(--line)!important;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease,border-color .32s ease!important;
}
.card:hover{
  transform:translateY(-6px)!important;border-color:transparent!important;
  box-shadow:0 24px 54px -20px rgba(0,0,0,.75),0 0 0 1px rgba(92,192,255,.40),0 0 40px -14px var(--sb-glow)!important;
}
.card .thumb{background:radial-gradient(120% 130% at 50% 0%,#0f1c25 0%,#080b11 72%)!important;height:400px!important}
html.sb-light .card .thumb{background:radial-gradient(120% 130% at 50% 0%,#eef4f8,#e2eaf0)!important}
.card .thumb .real-vial{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb .real-vial{transform:scale(1.04)}
.tag{
  background:rgba(92,192,255,.10)!important;border:1px solid rgba(92,192,255,.30)!important;
  color:#bfe0ff!important;border-radius:100px!important;backdrop-filter:blur(6px);padding:5px 12px!important;font-weight:600!important}
.card .body{padding:22px!important}
.price{color:var(--txt)}
.cat{color:var(--muted)}

/* feature / info / spec cards */
.feat,.info-card,.spec,.sb-rd-card,.sb-frt-card,.qpanel{
  border-radius:18px!important;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.feat:hover,.info-card:hover,.sb-rd-card:hover,.sb-frt-card:hover{
  transform:translateY(-4px);border-color:var(--line2)!important;box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.feat .ic,.info-card .ic2{color:var(--sb-teal)}

/* ============================================================
   7. FEATURE BANDS + NEWSLETTER
   ============================================================ */
.band,.news{
  background:linear-gradient(135deg,#0d1620 0%,#080d14 100%)!important;
  border:1px solid var(--line)!important;border-radius:26px!important;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% -10%,rgba(92,192,255,.08),transparent 70%)}
.news-form input{border-radius:100px!important}

/* quality tabs */
.qtab{border-radius:100px!important;transition:.2s ease}
.qtab:hover{border-color:var(--line2)!important;color:var(--txt)!important}
.qtab.active{background:var(--sb-grad)!important;color:#0c1a2b!important;border-color:transparent!important;font-weight:600}

/* ============================================================
   8. FAQ — clean accordion
   ============================================================ */
.faq-list{gap:12px}
.faq-item{border-radius:16px!important;transition:border-color .25s ease,background .25s ease}
.faq-item:hover{border-color:var(--line2)!important}
.faq-item.open{border-color:rgba(92,192,255,.32)!important;background:linear-gradient(180deg,var(--panel),var(--bg2))!important}
.faq-q{font-size:16px}
.faq-item.open .faq-q{color:var(--txt)}
.faq-q .chev,.faq-q svg{color:var(--sb-teal)}

/* ============================================================
   9. FOOTER
   ============================================================ */
body>footer{background:linear-gradient(180deg,#0b111a 0%,#070a0f 100%)!important;border-top:1px solid var(--line)!important;margin-top:80px}
.foot-grid h4{letter-spacing:.02em}
body>footer a{transition:color .18s ease}
body>footer a:hover{color:var(--sb-teal)!important}

/* ============================================================
   10. LINKS + selection + focus (teal)
   ============================================================ */
::selection{background:rgba(92,192,255,.30);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--sb-teal)!important;outline-offset:2px}

/* ============================================================
   11. PARTNER pages — accent cohesion (green vars now teal already)
   ============================================================ */
.sb-lp-hero h1{letter-spacing:-.03em}
.sb-lp-eyebrow,.sb-lp-stats b,.sb-lp-mini b,.sb-lp-tcard b,.sb-lp-num,.sb-code{color:var(--sb-teal)!important}
.sb-lp-cta,.sb-btn,.sb-copy{color:#0c1a2b!important}
/* research database "See Studies" button + accents */
.sb-rd-cta{background:var(--sb-grad)!important;color:#0c1a2b!important;border-radius:100px!important;font-weight:650!important;box-shadow:0 8px 22px -10px var(--sb-glow)!important;transition:transform .18s ease,filter .18s ease!important}
.sb-rd-cta:hover{transform:translateY(-2px);filter:brightness(1.06);text-decoration:none!important}
.sb-rd-card-head h3,.sb-rd-name{letter-spacing:-.01em}

/* ============================================================
   11b. WOOCOMMERCE forms + buttons (account, cart, checkout)
   ============================================================ */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce-form-login button[type=submit],
.woocommerce-form-register button[type=submit],.wc-block-components-button{
  background:var(--sb-grad)!important;color:#0c1a2b!important;border:none!important;
  border-radius:100px!important;font-weight:650!important;padding:12px 22px!important;
  box-shadow:0 8px 22px -10px var(--sb-glow)!important;transition:transform .18s ease,filter .18s ease!important}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,.woocommerce-form-login button[type=submit]:hover,
.woocommerce-form-register button[type=submit]:hover{transform:translateY(-2px);filter:brightness(1.06)}
/* dark, modern form fields */
html:not(.sb-light) .woocommerce form .form-row input.input-text,
html:not(.sb-light) .woocommerce form .form-row textarea,
html:not(.sb-light) .woocommerce input[type=text],
html:not(.sb-light) .woocommerce input[type=email],
html:not(.sb-light) .woocommerce input[type=password],
html:not(.sb-light) .woocommerce input[type=tel],
html:not(.sb-light) .woocommerce select,
html:not(.sb-light) .woocommerce textarea{
  background:var(--panel2)!important;color:var(--txt)!important;border:1px solid var(--line2)!important;border-radius:10px!important;padding:12px 14px!important}
html:not(.sb-light) .woocommerce ::placeholder{color:var(--dim)!important}
.woocommerce form .form-row label{color:var(--muted)}
/* account/login panels as cards */
html:not(.sb-light) .woocommerce-account .woocommerce .col-1,
html:not(.sb-light) .woocommerce-account .woocommerce .col-2,
html:not(.sb-light) .u-columns .col{background:var(--panel);border:1px solid var(--line);border-radius:16px}

/* ============================================================
   12. Motion niceties
   ============================================================ */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ============================================================
   13. DESIGN ELEVATION (2026-07-16)
   ============================================================ */
h1,h2,h3{text-wrap:balance}
.sec-head{margin-bottom:34px}
.sec-head h2{font-size:clamp(26px,3.2vw,38px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(92,192,255,.22);border-radius:100px;background:rgba(92,192,255,.06);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
html.sb-light .eyebrow{border-color:rgba(29,78,216,.25);background:rgba(29,78,216,.06)}
.feat .ic,.info-card .ic2{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(92,192,255,.09);border:1px solid rgba(92,192,255,.20);box-shadow:0 0 22px -8px var(--sb-glow)}
.news-form input{background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--txt)}
.news-form input:focus{border-color:var(--sb-teal);box-shadow:0 0 0 3px rgba(92,192,255,.15);outline:none}
.hero-cta{gap:14px}
.qs b{font-size:clamp(30px,4vw,42px);letter-spacing:-.02em}
/* reveal-on-scroll */
html.sb-anim .sbv-hide{opacity:0;transform:translateY(16px)}
html.sb-anim .sbv-in{opacity:1;transform:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1)}
/* Product cards reveal immediately — no drift, no stagger — so a fast scroll
   through the catalogue never shows a half-faded grid. */
html.sb-anim .card.sbv-hide,html.sb-anim .sb-pop-card.sbv-hide{transform:none}
/* !important because starbio-futuristic.php forces a .4s transition on every
   .sbv-in with !important; this selector is more specific, so it wins. */
html.sb-anim .card.sbv-in,html.sb-anim .sb-pop-card.sbv-in{transition:opacity .25s linear!important;transition-delay:0s!important}
/* header: balanced 3-zone grid (2026-07-16) */
.wrap.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:28px;max-width:1280px}
.wrap.nav .logo-link{justify-self:start}
.wrap.nav .nav-links{justify-self:center}
.wrap.nav .nav-right{justify-self:end;gap:12px}
.icon-btn{width:40px;height:40px}
.nav img.logo,.logo-link img{height:34px}
.nav-links a{padding:6px 0}
.logo-link img,.nav img.logo{filter:drop-shadow(0 2px 12px rgba(92,192,255,.22))}
/* ============================================================
   14. FORM CONTROLS + PAGINATION POLISH (kill default borders)
   ============================================================ */
/* search: one clean capsule, inner input invisible */
.sb-search{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:100px;padding:0 16px;min-height:46px}
.sb-search svg{color:var(--dim);flex:0 0 auto}
.sb-search input{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;color:var(--txt)!important;width:100%;font-size:14.5px;padding:10px 0!important}
.sb-search:focus-within{border-color:var(--sb-teal);box-shadow:0 0 0 3px rgba(92,192,255,.14)}
html.sb-light .sb-search{background:#fff;border-color:rgba(15,23,42,.14)}
/* sort dropdown */
.woocommerce-ordering select,select.orderby{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--panel2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a3b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center;border:1px solid var(--line2);color:var(--txt);border-radius:100px;padding:11px 40px 11px 16px;font-size:14px;font-family:var(--body);cursor:pointer}
.woocommerce-ordering select:focus{outline:none;border-color:var(--sb-teal);box-shadow:0 0 0 3px rgba(92,192,255,.14)}
html.sb-light .woocommerce-ordering select{background-color:#fff;border-color:rgba(15,23,42,.14)}
/* pagination: pills, no boxes */
.woocommerce-pagination,.sb-pagination{border:none!important}
.woocommerce-pagination ul.page-numbers,ul.page-numbers{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:28px 0 0;padding:0;border:none!important;justify-content:center}
ul.page-numbers li{border:none!important;margin:0;overflow:visible!important}
ul.page-numbers li a,ul.page-numbers li span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 13px;border-radius:12px;background:var(--panel);border:1px solid var(--line)!important;color:var(--muted);font-family:var(--display);font-weight:600;font-size:14px;text-decoration:none;transition:.18s ease}
ul.page-numbers li a:hover{border-color:var(--sb-teal)!important;color:var(--txt);transform:translateY(-1px)}
ul.page-numbers li span.current{background:var(--sb-grad);border-color:transparent!important;color:#0c1a2b}
html.sb-light ul.page-numbers li a,html.sb-light ul.page-numbers li span{background:#fff;border-color:rgba(15,23,42,.12)!important;color:#526079}
/* notices */
.woocommerce-message,.woocommerce-info{background:var(--panel)!important;border:1px solid rgba(92,192,255,.3)!important;border-radius:14px!important;color:var(--txt)!important}
.woocommerce-error{background:var(--panel)!important;border:1px solid rgba(255,107,107,.4)!important;border-radius:14px!important;color:var(--txt)!important}
/* tables: soft hairlines, rounded frame */
.woocommerce table.shop_table{border:1px solid var(--line)!important;border-radius:14px;border-collapse:separate!important;border-spacing:0;overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line)!important}
/* coupon + quantity fields */
.woocommerce-cart td.actions .coupon .input-text{background:var(--panel2);border:1px solid var(--line2);border-radius:100px;padding:10px 16px;color:var(--txt);width:170px}
.quantity input.qty{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;color:var(--txt);padding:9px 6px;text-align:center}
.quantity input.qty:focus{outline:none;border-color:var(--sb-teal)}
/* ============================================================
   15. LIGHT MODE 2.0 — real light design, royal-blue accents
   ============================================================ */
html.sb-light{--accent:#1d4ed8;--accent2:#3b82f6;--accent-soft:rgba(29,78,216,.08);--green:#1d4ed8;--bg:#f6f8fc;--bg2:#eef2f8;--panel:#ffffff;--panel2:#f2f5fa;--line:rgba(15,23,42,.08);--line2:rgba(15,23,42,.15);--shadow:0 24px 60px rgba(15,23,42,.10);--shadow-soft:0 12px 34px rgba(15,23,42,.08)}
html.sb-light body::before{background:radial-gradient(1000px 560px at 82% -10%,rgba(29,78,216,.06),transparent 60%),radial-gradient(820px 560px at -5% 2%,rgba(59,130,246,.05),transparent 58%)}
/* footer + bands were staying dark */
html.sb-light body>footer{background:linear-gradient(180deg,#eef2f8,#e4e9f1)!important;border-top:1px solid rgba(15,23,42,.08)!important}
html.sb-light body>footer,html.sb-light body>footer p,html.sb-light body>footer a{color:#3d4759}
html.sb-light body>footer h4{color:#0f172a}
html.sb-light body>footer a:hover{color:#1d4ed8!important}
html.sb-light .band,html.sb-light .news{background:linear-gradient(135deg,#ffffff,#eef2f8)!important;border:1px solid rgba(15,23,42,.08)!important}
html.sb-light .band::after{background:radial-gradient(60% 120% at 50% -10%,rgba(29,78,216,.06),transparent 70%)}
html.sb-light .band h2,html.sb-light .news h3{color:#0f172a}
/* cards: white surfaces with soft depth */
html.sb-light .card,html.sb-light .feat,html.sb-light .info-card,html.sb-light .spec,html.sb-light .sb-rd-card,html.sb-light .sb-frt-card,html.sb-light .qpanel,html.sb-light .sb-coa-doc,html.sb-light .sb-coa-step,html.sb-light .faq-item,html.sb-light .sb-coa-empty,html.sb-light .sb-lp-stats div,html.sb-light .sb-lp-feat,html.sb-light .sb-lp-step,html.sb-light .sb-lp-tcard{background:#fff!important;border-color:rgba(15,23,42,.08)!important;box-shadow:0 12px 30px -22px rgba(15,23,42,.20)}
html.sb-light .card .thumb{background:radial-gradient(120% 130% at 50% 0%,#f2f6fb,#e6ecf4)!important}
/* headlines: slate→blue gradients instead of flat black */
html.sb-light .hero h1 .grad{background:linear-gradient(120deg,#0f172a 20%,#1d4ed8 70%,#3b82f6)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
html.sb-light .sb-coa-hero h1,html.sb-light .sb-lp-hero h1{background:linear-gradient(120deg,#0f172a 25%,#1d4ed8 75%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
html.sb-light .qs b,html.sb-light .sb-lp-stats b{background:linear-gradient(120deg,#0f172a,#1d4ed8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.sb-light .hero-stats .s b{color:#0f172a}
/* accents that were reading grey */
html.sb-light .eyebrow{color:#1d4ed8}
html.sb-light .dot{background:#1d4ed8!important;box-shadow:0 0 10px rgba(29,78,216,.4)!important}
html.sb-light .tag{background:rgba(29,78,216,.08)!important;border-color:rgba(29,78,216,.25)!important;color:#1d4ed8!important}
html.sb-light .feat .ic,html.sb-light .info-card .ic2{background:rgba(29,78,216,.08);border-color:rgba(29,78,216,.22);color:#1d4ed8;box-shadow:none}
html.sb-light .btn-ghost{background:#fff!important;border-color:rgba(15,23,42,.16)!important;color:#0f172a!important}
html.sb-light .btn-ghost:hover{border-color:#1d4ed8!important;color:#1d4ed8!important;background:#fff!important}
html.sb-light .icon-btn{border-color:rgba(15,23,42,.14);color:#526079}
html.sb-light .icon-btn:hover{border-color:#1d4ed8;color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.10)}
html.sb-light .qtab{color:#526079;border-color:rgba(15,23,42,.14)!important;background:#fff}
html.sb-light .qtab.active{color:#fff!important}
html.sb-light .link,html.sb-light a.link{color:#1d4ed8}
html.sb-light ::selection{background:rgba(29,78,216,.18);color:#0f172a}
html.sb-light .sb-eta-cut{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.3);color:#166534}
html.sb-light .sb-eta-cut svg,html.sb-light .sb-eta-dot{color:#16a34a;background:#16a34a}
html.sb-light .sb-cart-body .woocommerce-mini-cart__buttons a.checkout{color:#fff}
html.sb-light .faq-item.open{background:#fff!important;border-color:rgba(29,78,216,.3)!important}
html.sb-light .faq-q .chev,html.sb-light .faq-q svg{color:#1d4ed8}
html.sb-light .sb-floaters .vial{opacity:.28;filter:invert(1) hue-rotate(185deg) brightness(.55) saturate(1.4)}
html.sb-light body{background:linear-gradient(180deg,#e9f1fe 0%,#f3f6fb 420px,#f6f8fc 100%)}
html.sb-light .sb-jb2{background:linear-gradient(90deg,#e7effe 0%,#d8e6fd 50%,#e7effe 100%)!important;border-bottom:1px solid rgba(29,78,216,.22)!important}
html.sb-light .sb-jb2::after{background:radial-gradient(620px 100% at 50% 0%,rgba(29,78,216,.10),transparent 70%)}
html.sb-light .sb-jb2-inner{color:#3d4759}
html.sb-light .sb-jb2-star{color:#1d4ed8;filter:drop-shadow(0 0 6px rgba(29,78,216,.5))}
html.sb-light .sb-jb2-msg b{background:linear-gradient(120deg,#0f172a,#1d4ed8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.sb-light .sb-jb2-code{background:rgba(29,78,216,.08);border-color:rgba(29,78,216,.4);color:#1d4ed8}
/* mobile menu drawer */
html.sb-light .mobile-menu{background:#ffffff!important;border-left:1px solid rgba(15,23,42,.1)!important}
html.sb-light .mobile-menu a{color:#0f172a!important}
html.sb-light #navOverlay{background:rgba(15,23,42,.35)!important}
.gate-tag{display:inline-block;padding:5px 13px;margin-bottom:14px;border:1px solid rgba(92,192,255,.28);background:rgba(92,192,255,.07);border-radius:100px;font-family:var(--display,sans-serif);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5cc0ff}
html.sb-light .gate-tag{border-color:rgba(29,78,216,.28);background:rgba(29,78,216,.06);color:#1d4ed8}
.gate-card .exit a{color:#8fd0ff}

/* ============================================================
   16. VERIFICATION GATE — cinematic backdrop
   ============================================================ */
#gate{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 720px at 50% -10%,#122033 0%,#0a1220 42%,#05070c 100%);
  overflow:hidden;
}
/* drifting star layers */
#gate::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.4px 1.4px at 68% 12%,rgba(159,212,255,.8),transparent),
    radial-gradient(1.8px 1.8px at 84% 62%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.2px 1.2px at 32% 74%,rgba(159,212,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 52% 46%,rgba(255,255,255,.65),transparent),
    radial-gradient(1.3px 1.3px at 22% 54%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.7px 1.7px at 76% 34%,rgba(159,212,255,.7),transparent),
    radial-gradient(1.2px 1.2px at 44% 88%,rgba(255,255,255,.55),transparent);
  background-repeat:repeat;background-size:520px 520px;
  animation:gateStars 90s linear infinite;opacity:.9;
}
/* nebula glow + rotating helix ring */
#gate::after{
  content:"";position:absolute;width:min(88vw,880px);height:min(88vw,880px);
  left:50%;top:50%;translate:-50% -50%;pointer-events:none;
  background:
    conic-gradient(from 0deg,rgba(92,192,255,.16),transparent 28%,rgba(139,123,255,.14) 52%,transparent 78%,rgba(92,192,255,.16)),
    radial-gradient(circle at 50% 50%,transparent 44%,rgba(92,192,255,.10) 46%,transparent 48%),
    radial-gradient(circle at 50% 50%,transparent 60%,rgba(139,123,255,.08) 62%,transparent 64%);
  border-radius:50%;filter:blur(1px);
  animation:gateSpin 46s linear infinite;
}
@keyframes gateStars{from{transform:translate3d(0,0,0)}to{transform:translate3d(-520px,-520px,0)}}
@keyframes gateSpin{from{rotate:0deg}to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){#gate::before,#gate::after{animation:none}}

/* the card itself: glass panel with a gradient rim */
.gate-card{
  position:relative;z-index:2;max-width:560px;width:100%;text-align:center;
  padding:44px 40px 34px;border-radius:24px;
  background:linear-gradient(170deg,rgba(17,26,40,.86),rgba(8,13,22,.94));
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(92,192,255,.22);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.95),0 0 70px -28px rgba(92,192,255,.55);
  animation:gateRise .55s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes gateRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.gate-card::before{
  content:"";position:absolute;inset:0;border-radius:24px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(92,192,255,.65),transparent 38%,transparent 62%,rgba(139,123,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.gate-card img{height:40px;width:auto;margin-bottom:20px;filter:drop-shadow(0 3px 16px rgba(92,192,255,.4))}
.gate-card h2{font-size:27px;letter-spacing:-.02em;margin-bottom:10px;
  background:linear-gradient(115deg,#fff 20%,#9fd4ff 70%,#8b7bff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gate-card .lead{color:#9fb0c4;font-size:14.5px;line-height:1.7;margin-bottom:24px}
/* checkboxes as selectable rows */
.gate-card .check{display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid rgba(150,200,214,.16);
  border-radius:13px;padding:14px 16px;margin-bottom:11px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.gate-card .check:hover{border-color:rgba(92,192,255,.42);background:rgba(92,192,255,.05)}
.gate-card .check:has(input:checked){border-color:rgba(92,192,255,.6);background:rgba(92,192,255,.09)}
.gate-card .check input{flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:#5cc0ff;cursor:pointer}
.gate-card .check label{font-size:13.5px;line-height:1.6;color:#c3d0dd;cursor:pointer;font-weight:500}
.gate-card #enterBtn{width:100%;justify-content:center;margin-top:14px;padding:15px 26px;font-size:15.5px}
.gate-card .gate-foot{font-size:11.5px;line-height:1.7;color:#6b7c8f;margin-top:18px}
.gate-card .gate-foot a{color:#8fd0ff}
.gate-card .exit{display:block;margin-top:14px;font-size:12.5px;color:#5f7285}
.gate-card .exit a{color:#9fb0c4;text-decoration:underline}
@media(max-width:560px){.gate-card{padding:32px 22px 26px;border-radius:20px}.gate-card h2{font-size:23px}}