/* Struxa v6 — pure black, pure white and logo cyan. Loaded last on every page.
   Black is the base. Selected sections ("bands") invert to white. Cyan #63E6FF / #17C3E4 is the only accent. */
:root{
  --k:#000; --k-rgb:0,0,0;            /* "ink" role: backgrounds on dark pages */
  --w:#fff; --w-rgb:255,255,255;      /* "paper" role: text on dark pages */
  --cy:#63E6FF; --cy2:#17C3E4; --cy-rgb:99,230,255;
  --bg:#000; --bg2:#000; --panel:rgba(0,0,0,.9); --panel-solid:#000; --panel-hi:#000;
  --text:#fff; --muted:rgba(255,255,255,.8); --muted2:rgba(255,255,255,.64);
  --cyan:#63E6FF; --blue:#17C3E4; --green:#63E6FF;
  --line:rgba(99,230,255,.22); --line-hi:rgba(99,230,255,.5);
  --shadow:0 30px 90px rgba(0,0,0,.6);
}
html{background:#000;scrollbar-color:#17C3E4 #000}
body{background:transparent!important;color:#fff}
body:before{display:none!important}
::selection{background:#63E6FF;color:#000}
:focus-visible{outline:2px solid #63E6FF;outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#17C3E4;border-radius:10px;border:2px solid #000}

/* ---------- white bands: the same components, inverted ---------- */
.band-white{
  --k:#fff; --k-rgb:255,255,255; --w:#000; --w-rgb:0,0,0;
  --bg:#fff; --bg2:#fff; --panel:rgba(255,255,255,.96); --panel-solid:#fff; --panel-hi:#fff;
  --text:#000; --muted:rgba(0,0,0,.76); --muted2:rgba(0,0,0,.6);
  --cyan:#000; --blue:#17C3E4; --green:#17C3E4;
  --line:rgba(0,0,0,.14); --line-hi:rgba(0,0,0,.34);
  --shadow:0 24px 60px rgba(0,0,0,.12);
  background:#fff!important;color:#000;position:relative;
}
.band-white:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#17C3E4,#63E6FF);z-index:2}
.band-white .eyebrow{color:#000}
.band-white .eyebrow:before{background:#17C3E4;box-shadow:none}
.band-white .gradient,.band-white h1 .gradient,.band-white h2 .gradient{background:none!important;-webkit-text-fill-color:#000!important;color:#000!important;box-shadow:inset 0 -.28em 0 #63E6FF}
.band-white .trust-num,.band-white .pk-num{background:none!important;-webkit-text-fill-color:#000!important;color:#000!important}
.band-white .icon-box,.band-white .tier .check{border-color:rgba(0,0,0,.18)}
.band-white .icon-box{background:#63E6FF!important;color:#000!important}
.band-white .icon-box svg{stroke:#000!important;color:#000!important}
.band-white img{filter:none}
.band-white .svc-media:after,.band-white .region-visual:after{background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55))!important}
.band-white .svc-chip{background:rgba(0,0,0,.72)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
.band-white .svc-chip b{color:#63E6FF!important}
.band-white .service-index{background:#000!important;color:#fff!important;border-color:#000!important}
.band-white .tier.hot,.band-white .tier.featured,.band-white .pack-card.featured-pack{background:#fff!important;border:2px solid #17C3E4!important;box-shadow:0 22px 60px rgba(23,195,228,.22)!important}
.band-white .badge,.band-white .chip{border-color:rgba(0,0,0,.2)}
.band-white .btn.ghost{color:#000;border-color:rgba(0,0,0,.4);background:transparent}
.band-white .btn.ghost:hover{background:#000;color:#fff;border-color:#000}
.band-white a:not(.btn):not(.nav-cta):hover{color:#000}
.band-white details,.band-white .faq details{border-color:rgba(0,0,0,.16)}
.band-white table{color:#000}

/* ---------- buttons keep black text on cyan ---------- */
.btn.primary,.btn-primary,.nav-cta,.navcta,.seg button[aria-pressed=true],.svc-link:hover{
  color:#000!important;
}
.btn.primary,.btn-primary,.nav-cta,.navcta{
  background:linear-gradient(135deg,#A6F4FF,#63E6FF 50%,#17C3E4)!important;
  box-shadow:0 10px 30px rgba(99,230,255,.28)!important;font-weight:700;border:0
}
.btn.primary:hover,.btn-primary:hover,.nav-cta:hover,.navcta:hover{box-shadow:0 16px 44px rgba(99,230,255,.5)!important;transform:translateY(-2px)}
.btn.primary:after,.nav-cta:after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%)}
.btn.ghost,.btn.secondary{color:#fff;border:1px solid rgba(99,230,255,.5);background:transparent}
.btn.ghost:hover,.btn.secondary:hover{background:#63E6FF;color:#000;border-color:#63E6FF}
.seg .thumb{background:linear-gradient(135deg,#A6F4FF,#63E6FF 50%,#17C3E4)!important;box-shadow:0 6px 18px rgba(99,230,255,.35)}
.svc-link:hover{background:#63E6FF!important;border-color:#63E6FF!important}

/* ---------- nav: black glass ---------- */
nav,.nav{background:rgba(0,0,0,.72)!important;border-color:rgba(99,230,255,.28)!important}
.nav-wrap.scrolled nav,.nav-wrap.scrolled .nav{background:rgba(0,0,0,.9)!important;box-shadow:0 14px 40px rgba(0,0,0,.7)!important}
.brand:hover .brand-mark{transform:none}
#progress{background:#63E6FF!important;height:2px}

/* ---------- static cyan headline highlight (replaces the old shimmer) ---------- */
.gradient,.hero h1 .gradient,.lp-hero h1 .gradient,.hero2 h1 .gradient{
  background:linear-gradient(100deg,#A6F4FF,#63E6FF 55%,#17C3E4)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.trust-num,.pk-num{background:linear-gradient(180deg,#fff,#63E6FF)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}

/* ---------- feature borders: solid cyan, no spinning gradient ---------- */
.tier.hot,.tier.featured,.pack-card.featured-pack{
  background:linear-gradient(160deg,rgba(var(--k-rgb),.96),rgba(var(--k-rgb),.98)) padding-box,linear-gradient(135deg,#63E6FF,#17C3E4) border-box!important;
  border:1px solid transparent!important;box-shadow:0 0 0 1px rgba(99,230,255,.14),0 26px 70px -28px rgba(23,195,228,.5)!important
}
.picker{background:linear-gradient(160deg,rgba(0,0,0,.96),rgba(0,0,0,.98)) padding-box,linear-gradient(135deg,#63E6FF,rgba(99,230,255,.3) 55%,#17C3E4) border-box!important;border:1px solid transparent!important;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 70px rgba(23,195,228,.16)!important}
.cta-box{background:radial-gradient(circle at 50% 0%,rgba(99,230,255,.16),transparent 55%) padding-box,linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#63E6FF,rgba(99,230,255,.25) 55%,#17C3E4) border-box!important;border:1px solid transparent!important}

/* ---------- things removed from the old design ---------- */
.aurora,.dotgrid,.sg,.beam,.cursor-glow,.pointer-glow,.orb{display:none!important}
.hero,.hero2,.lp-hero,.blog-hero,.page-top{background:transparent!important}
.marquee{-webkit-mask-image:none!important;mask-image:none!important}
.marquee-track{width:auto!important;flex-wrap:wrap;justify-content:center;transform:none!important}
.marquee-track>[aria-hidden=true]{display:none}
.tilt,.tilt:hover{transform:none!important}
.process-split .device{transform:none!important}
.console-line.delay{opacity:1!important}
.floating-card{transform:none!important}
.live-dot,.status{box-shadow:none!important}
.svc-media img,.split-vis .vis img{transition:none!important}
.service:hover .svc-media img,.split-vis .vis:hover img{transform:scale(1.04)!important}
.eyebrow:before{box-shadow:0 0 8px #63E6FF}

/* ---------- reveal: simple fade and rise ---------- */
.reveal{opacity:0;transform:translateY(22px)!important;filter:none!important;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)!important;transition-delay:var(--d,0ms)}
.reveal.visible{opacity:1;transform:none!important}
.reveal.rv-done{transition:transform .3s,opacity .3s,border-color .3s,box-shadow .3s!important;transition-delay:0ms}

/* ---------- sparkle fall (canvas sits between the black page and all content) ---------- */
#sparkle{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
@media print{#sparkle{display:none}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- small fixes ---------- */
[hidden]{display:none!important}
.blog-card .read:after{display:none!important}

/* ---------- hero pill: live dot glow (the rotating service word is driven by ui.js) ---------- */
@keyframes dotglow{0%,100%{box-shadow:0 0 6px #63E6FF}50%{box-shadow:0 0 18px 3px #63E6FF}}
.hero2 .pill .live-dot{animation:dotglow 2.4s ease-in-out infinite!important}
@media(prefers-reduced-motion:reduce){.hero2 .pill .live-dot{animation:none!important}}

/* ---------- v7: Live demos section ---------- */
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.demo-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(0,0,0,.6);text-decoration:none;color:#fff;transition:transform .25s,border-color .25s,box-shadow .25s}
.demo-card:hover{transform:translateY(-4px);border-color:#63E6FF;box-shadow:0 24px 60px rgba(99,230,255,.14)}
.demo-media{position:relative;display:block;aspect-ratio:1200/630;overflow:hidden;background:#0b0b0d;border-bottom:1px solid var(--line)}
.demo-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.demo-card:hover .demo-media img{transform:scale(1.03)}
.demo-live{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.78);border:1px solid rgba(99,230,255,.5);color:#63E6FF;border-radius:999px;padding:5px 11px;font:600 11px "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.demo-live i{width:7px;height:7px;border-radius:50%;background:#63E6FF;animation:dotglow 2.4s ease-in-out infinite}
.demo-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.demo-kind{font:600 11px "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#63E6FF}
.demo-body b{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.demo-copy{color:rgba(255,255,255,.74);font-size:15.5px;line-height:1.6}
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.demo-foot .price{font:600 12px "Geist Mono",ui-monospace,monospace;letter-spacing:.04em;color:rgba(255,255,255,.82)}
.demo-go{font:700 13px "Geist Mono",ui-monospace,monospace;color:#000;background:linear-gradient(135deg,#A6F4FF,#63E6FF 50%,#17C3E4);border-radius:999px;padding:8px 14px;white-space:nowrap}
.demo-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;border:1px solid var(--line-hi);border-radius:20px;padding:24px 28px;background:rgba(99,230,255,.05)}
.demo-cta p{color:rgba(255,255,255,.86);font-size:18px;max-width:52ch;margin:0}
@media(max-width:980px){.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.demo-grid{grid-template-columns:1fr}.demo-cta{padding:20px}}