/* =====================================================================
   SILVERLION THEME — loaded after site.css and modern.css.
   Same structure as the GRO build, in Silverlion's own colours:
   graphite and silver with the volt-green accent, and a technical voice.
   ===================================================================== */
:root{
  --ink:#06070A;          /* graphite */
  --deep:#0C0E13;
  --line:#1B1F27;
  --tide:#6E7A8A;
  --mist:#9AA3AF;
  --bone:#E9EDF3;         /* silver */
  --bone-2:#CBD2DC;
  --ink-soft:#3A424D;
  --glow:#C8FF2E;         /* volt */
  --gold:#C8FF2E;
  --gold-deep:#8DB814;
  --serif:"Instrument Serif", Georgia, serif;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --r:12px;
}
html,body{background:var(--ink);color:var(--bone)}
.paper{background:var(--bone);color:#0A0C10}
.paper .eyebrow{color:var(--gold-deep)}
.paper .muted{color:#4A5361}
.btn-glow{background:var(--glow);color:#0A0C00}
.btn-glow:hover{background:#D8FF66}
.hero h1 .cm em,h1 em,h2 em,h3 em{color:var(--glow)}
::selection{background:var(--glow);color:#0A0C00}

/* the volt accent is brighter than gold, so glows are dialled back */
body::after{opacity:.045}
.word span,.marquee span i{color:var(--glow)}
.links a[aria-current="page"]{background:var(--bone);color:#0A0C10}
.tile .heart[aria-pressed="true"]{background:var(--glow);color:#0A0C00}

/* system status panel instead of the camera viewfinder */
.sys{position:absolute;z-index:3;right:var(--gut);top:calc(96px + env(safe-area-inset-top,0px));display:grid;gap:8px;justify-items:end;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mist)}
.sys div{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(6,7,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 11px;border-radius:999px}
.sys b{color:var(--bone);font-weight:500}
.sys i{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{50%{opacity:.35}}
@media (max-width:860px){.sys{display:none}}

/* hero: wordmark + strapline */
.hero{height:clamp(560px,92svh,940px);background:#040507}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg .grid-lines{position:absolute;inset:-20%;background-image:linear-gradient(rgba(200,255,46,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,46,.06) 1px,transparent 1px);background-size:64px 64px;transform:perspective(700px) rotateX(58deg) translateY(-6%);mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 72%)}
.hero-bg .glowball{position:absolute;left:50%;top:38%;width:min(760px,85vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(200,255,46,.16),rgba(200,255,46,0) 62%)}
.hero::after{background:linear-gradient(180deg,rgba(4,5,7,.6),rgba(4,5,7,.15) 40%,rgba(4,5,7,.92))}
.hero h1{font-size:clamp(84px,19vw,300px);letter-spacing:-.04em}
.hero h1 .cm{font-size:.17em;color:var(--bone-2)}

/* product index rows: keep the GRO hover preview, silver frames */
.cat-row:hover h3{color:var(--glow)}
.cat-row:hover .go{background:var(--glow);border-color:var(--glow);color:#0A0C00}
.cat-row .ico{color:var(--glow)}

/* status chips on product rows */
.chip-status{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mist);white-space:nowrap}
.chip-status.live{color:var(--glow);border-color:rgba(200,255,46,.45)}
.chip-status.soon{color:#E3C86F;border-color:rgba(227,200,111,.4)}
.chip-status.invite{color:#9FD0FF;border-color:rgba(159,208,255,.4)}
.chip-status.dev{color:var(--mist)}

/* screens strip */
.hscroll figure img{border:1px solid var(--line)}

/* price cards */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start;background:linear-gradient(160deg,rgba(233,237,243,.04),transparent)}
.plan.key{border-color:rgba(200,255,46,.5);background:linear-gradient(160deg,rgba(200,255,46,.07),transparent)}
.plan h3{font-size:clamp(26px,2.4vw,34px)}
.plan .amt{font-family:var(--display);font-stretch:70%;font-weight:800;font-size:clamp(34px,4vw,54px);letter-spacing:-.03em;line-height:1}
.plan .amt small{font-family:var(--sans);font-stretch:100%;font-weight:500;font-size:14px;letter-spacing:0;color:var(--mist);margin-left:6px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:14.5px;color:var(--mist)}
.plan ul li{padding-left:18px;position:relative}
.plan ul li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--glow)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.spec th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tide);text-align:left;background:var(--deep);padding:11px 14px;font-weight:400}
.spec td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--mist)}
.spec td b{color:var(--bone);font-weight:600}
.scrollx{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}

/* logo wall */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wall div{border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;padding:24px;background:var(--deep);min-height:120px}
.wall img{max-height:46px;width:auto;opacity:.9}
@media (max-width:760px){.wall{grid-template-columns:1fr 1fr}}

/* ===================== palette options (preview) =====================
   Default below is Ice: platinum with a cool blue accent.
   Switch with the panel bottom-left, or set data-pal on <html>. */
:root{--glow:#8EC5FF;--gold:#8EC5FF;--gold-deep:#4E8FD1}
:root[data-pal="volt"]{--glow:#C8FF2E;--gold:#C8FF2E;--gold-deep:#8DB814}
:root[data-pal="ice"]{--glow:#8EC5FF;--gold:#8EC5FF;--gold-deep:#4E8FD1}
:root[data-pal="chrome"]{--glow:#DCE3EB;--gold:#DCE3EB;--gold-deep:#8A97A6}
:root[data-pal="teal"]{--glow:#3FE0C0;--gold:#3FE0C0;--gold-deep:#1A9C86}
:root[data-pal="amber"]{--glow:#E9B15C;--gold:#E9B15C;--gold-deep:#A5732F}
:root[data-pal="royal"]{--glow:#9B8CFF;--gold:#9B8CFF;--gold-deep:#6A5AE0}
:root[data-pal="chrome"] .btn-glow{color:#0A0C10}
:root[data-pal="ice"] .btn-glow,:root[data-pal="teal"] .btn-glow,:root[data-pal="royal"] .btn-glow,:root[data-pal="amber"] .btn-glow{color:#06070A}
.hero-bg .grid-lines{background-image:linear-gradient(rgba(142,197,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(142,197,255,.06) 1px,transparent 1px)}
.hero-bg .glowball{background:radial-gradient(circle,color-mix(in srgb, var(--glow) 18%, transparent),transparent 62%)}

/* palette switcher — preview only, not part of the site */
.palbar{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;gap:6px;align-items:center;padding:8px;border-radius:999px;background:rgba(6,7,10,.82);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.palbar span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding:0 6px}
.palbar button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(233,237,243,.25);cursor:pointer;padding:0}
.palbar button[aria-pressed="true"]{outline:2px solid var(--bone);outline-offset:2px}
@media (max-width:700px){.palbar span{display:none}.top-btn{left:auto;right:78px}}

.paper h1 em,.paper h2 em,.paper h3 em{color:var(--gold-deep)}
.paper .plan ul li::before{background:var(--gold-deep)}
.paper .chip-status.live{color:var(--gold-deep);border-color:color-mix(in srgb,var(--gold-deep) 45%,transparent)}

/* SILVERLION is a long word: keep it on one line and size it to fit */
.hero h1{font-size:clamp(34px,9vw,180px);letter-spacing:-.045em;white-space:nowrap}
.hero h1 .gro{display:block;white-space:nowrap}
.hero h1 .cm{font-size:.2em;white-space:normal;letter-spacing:-.01em}
@media (max-width:560px){.hero h1{font-size:12vw}}
.foot .big{font-size:clamp(44px,8vw,120px);white-space:nowrap}
.nav .brand b{font-size:22px;letter-spacing:-.03em}

.cursor{display:none!important}


/* service cards are light: keep their text dark on every section */
.svc article:not(.film){color:#0A0C10}
.svc article:not(.film) ul{color:#3A424D}
.svc article:not(.film) ul li::before{background:var(--gold-deep)}
.svc article:not(.film) .chip-status{color:#3A424D;border-color:#B8C0CC}