/* ============================================================
   STILL DARK — feature site  (REBRAND SKIN)
   Identical layout/structure to the previous build; only the
   identity changed: name, wordmark, logo, palette, tagline.

   Brand palette:
     VOID #070B1D · INDIGO #151A3A · SOLAR #F6B44B
     VIOLET #8B5CF6 · AURORA #49C6E5 · MOON #F4F6FF

   The mark is a camera aperture around a four-point star, with an
   amber glow (the last light) on one side and a blue one (the night)
   on the other; the wordmark keeps that warm/cool split.
   ============================================================ */

:root{
  color-scheme: dark;

  /* grounds — brand VOID / INDIGO */
  --bg:        #070B1D;
  --bg-2:      #0b1027;
  --surface:   rgba(21,26,58,0.62);
  --surface-2: rgba(28,34,72,0.72);
  --card:      #151A3A;
  --line:      rgba(150,166,224,0.12);
  --line-2:    rgba(150,166,224,0.22);

  /* MOON-biased neutrals */
  --text:      #F4F6FF;
  --dim:       #a9b2d2;
  --faint:     #6d769a;

  /* brand accents */
  --cyan:      #49C6E5;   /* AURORA — deep sky / primary cool */
  --cyan-2:    #8fdcf0;
  --gold:      #F6B44B;   /* SOLAR — sun / golden hour */
  --gold-2:    #ffd08a;
  --aurora:    #8B5CF6;   /* VIOLET — the third accent */
  --rose:      #b98cf9;

  --glow-cyan: 0 0 40px rgba(73,198,229,0.22);
  --glow-gold: 0 0 40px rgba(246,180,75,0.18);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --maxw: 1160px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --nav-h: 62px;
}

:root[data-theme="light"]{ color-scheme: dark; }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.sky-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 78% -8%, rgba(139,92,246,0.20), transparent 60%),
    radial-gradient(900px 700px at 12% 108%, rgba(73,198,229,0.16), transparent 60%),
    linear-gradient(180deg, #080c20 0%, #070B1D 45%, #090e26 100%);
}
.sky-bg::after{
  content:""; position:absolute; inset:-20%;
  background: linear-gradient(122deg, transparent 38%, rgba(150,166,230,0.06) 48%, rgba(139,92,246,0.05) 52%, transparent 62%);
  filter: blur(6px);
}
#stars{ position: fixed; inset:0; z-index:0; pointer-events:none; }

.wrap{ position: relative; z-index: 1; }
.container{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--pad); }

/* ---------- type ---------- */
h1,h2,h3{ margin:0; text-wrap: balance; letter-spacing:-0.02em; font-weight:680; }
h2{ font-size: clamp(1.7rem, 3.6vw, 2.85rem); line-height:1.08; }
h3{ font-size: 1.14rem; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color: inherit; }

.eyebrow{
  font-family: var(--mono); font-size:0.72rem; letter-spacing:0.2em;
  text-transform: uppercase; color: var(--faint); margin:0 0 1rem;
  display:inline-flex; align-items:center; gap:0.6rem;
}
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--line-2); }
.eyebrow.warm{ color:#c99a55; } .eyebrow.warm::before{ background: rgba(246,180,75,0.42); }
.eyebrow.cool{ color:#7aa8c4; } .eyebrow.cool::before{ background: rgba(73,198,229,0.42); }

.lead{ color: var(--dim); font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 60ch; }
.tnum{ font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
header.nav{
  position: sticky; top:0; z-index: 50; height: var(--nav-h);
  display:flex; align-items:center;
  backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(180deg, rgba(7,11,29,0.86), rgba(7,11,29,0.46));
  border-bottom: 1px solid var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.brand .mark{ width:28px; height:28px; display:block; flex:none; filter: drop-shadow(0 0 9px rgba(73,198,229,0.4)); }
/* STILL DARK wordmark: STILL in solar gold, DARK in the violet→aurora gradient
   (class names .sol / .astris are kept from the previous identity) */
.wordmark{ font-weight:600; font-size:1.02rem; letter-spacing:0.16em; white-space:nowrap; }
.wordmark .sol{ color: var(--gold); }
.wordmark .astris{ background: linear-gradient(90deg,#8B5CF6 0%, #6f8ef0 45%, #49C6E5 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{ font-size:0.9rem; color: var(--dim); text-decoration:none; transition: color .2s; }
.nav-links a:hover{ color: var(--text); }
.nav .badge{
  font-family: var(--mono); font-size:0.72rem; letter-spacing:0.04em; color: var(--cyan-2);
  border:1px solid var(--line-2); border-radius:999px; padding:0.4rem 0.8rem; white-space:nowrap;
}
@media (max-width: 860px){ .nav-links{ display:none; } }
@media (max-width: 520px){ .nav .badge{ display:none; } }

/* ---------- hero ---------- */
.hero{ padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(2.5rem,6vw,4rem); position:relative; }
.hero .glyph{
  position:absolute; top: clamp(1rem,4vw,2rem); right: clamp(1rem, 6vw, 4rem);
  width: clamp(86px, 14vw, 168px); height: clamp(86px,14vw,168px); z-index:-1; opacity:0.95;
}
.hero h1{
  font-size: clamp(2.5rem, 7.2vw, 5.4rem); line-height:1.02; font-weight:720; letter-spacing:-0.035em;
  max-width: 15ch;
}
.hero h1 .warm{ color: var(--gold); }
.hero h1 .cool{ background: linear-gradient(180deg,#a8b7f5,#49C6E5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lead{ margin-top: 1.4rem; font-size: clamp(1.05rem,1.7vw,1.28rem); max-width: 44ch; color:#c8cfe8; }
.hero .cta{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:2rem; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:0.55rem; text-decoration:none;
  font-weight:600; font-size:0.98rem; padding:0.8rem 1.3rem; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition: transform .18s ease, box-shadow .2s, background .2s;
}
.btn-primary{ background: linear-gradient(180deg,#6fd4ec,#49C6E5); color:#06131f; box-shadow: var(--glow-cyan); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 52px rgba(73,198,229,0.36); }
.btn-ghost{ border-color: var(--line-2); color: var(--text); background: rgba(255,255,255,0.02); }
.btn-ghost:hover{ transform: translateY(-2px); border-color: rgba(150,166,224,0.42); }
.platforms{ display:flex; align-items:center; gap:0.7rem; color: var(--faint); font-family:var(--mono); font-size:0.78rem; letter-spacing:0.02em; }
.platforms svg{ width:15px; height:15px; opacity:0.8; }

.ticker{
  margin-top: clamp(2.2rem,5vw,3.4rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: rgba(21,26,58,0.42); overflow:hidden; position:relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker-track{ display:flex; gap:2.6rem; width:max-content; padding:0.85rem 0; animation: marquee 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-item{ display:inline-flex; align-items:center; gap:0.55rem; white-space:nowrap; color:#c6cde6; font-size:0.92rem; }
.ticker-item svg{ width:15px; height:15px; color: var(--cyan); flex:none; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- stat band ---------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats .container{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; padding-inline:0; }
.stat{ padding: clamp(1.4rem,3vw,2rem) var(--pad); background: rgba(11,16,39,0.42); }
.stat .n{ font-family: var(--mono); font-weight:600; font-size: clamp(1.5rem,3.2vw,2.2rem); letter-spacing:-0.02em; color: var(--text); }
.stat .n small{ color: var(--cyan); font-size:0.62em; }
.stat .l{ color: var(--faint); font-size:0.82rem; margin-top:0.3rem; }
@media (max-width: 720px){ .stats .container{ grid-template-columns: repeat(2,1fr);} }

/* ---------- sections ---------- */
section{ scroll-margin-top: calc(var(--nav-h) + 12px); }
.block{ padding: clamp(4rem, 9vw, 7rem) 0; border-bottom:1px solid var(--line); }
.spotlight{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.spotlight.flip .copy{ order:2; }
.spotlight .copy h2{ margin-bottom:1rem; }
.spotlight .copy .lead{ margin-bottom:1.5rem; }
@media (max-width: 860px){
  .spotlight{ grid-template-columns:1fr; gap:2.2rem; }
  .spotlight.flip .copy{ order:0; }
}

.checks{ list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
.checks li{ display:flex; gap:0.7rem; align-items:flex-start; color:var(--dim); font-size:0.98rem; }
.checks li svg{ width:18px; height:18px; margin-top:0.18rem; flex:none; }
.checks.warm li svg{ color: var(--gold); }
.checks.cool li svg{ color: var(--cyan); }
.checks li b{ color: var(--text); font-weight:600; }

.panel{
  position:relative; border:1px solid var(--line-2); border-radius:20px; overflow:hidden;
  background: linear-gradient(180deg, rgba(21,26,58,0.74), rgba(11,16,39,0.74));
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04);
}
.panel .cap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.7rem 1rem; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.06em; color: var(--faint);
}
.dots{ display:flex; gap:6px; } .dots i{ width:9px;height:9px;border-radius:50%; background: var(--line-2); display:block;}
.panel .body{ padding: clamp(1rem,2.5vw,1.6rem); }

.readout{ display:grid; gap:0.55rem; font-family: var(--mono); font-size:0.85rem; }
.readout .row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.5rem 0.7rem; border-radius:9px; background: rgba(255,255,255,0.025); }
.readout .k{ color: var(--dim); letter-spacing:0.02em; }
.readout .v{ color: var(--text); font-variant-numeric: tabular-nums; }
.readout .v.warm{ color: var(--gold-2); } .readout .v.cool{ color: var(--cyan-2); }

/* ---------- feature grid ---------- */
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; margin-top:2.6rem; }
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr;} }
.fcard{
  border:1px solid var(--line); border-radius:16px; padding:1.4rem;
  background: linear-gradient(180deg, rgba(21,26,58,0.5), rgba(11,16,39,0.35));
  transition: transform .2s ease, border-color .2s, background .2s;
}
.fcard:hover{ transform: translateY(-4px); border-color: var(--line-2); background: linear-gradient(180deg, rgba(28,34,72,0.7), rgba(13,18,44,0.5)); }
.fcard .ico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--line-2); background: rgba(73,198,229,0.07); margin-bottom:1rem; }
.fcard .ico svg{ width:20px; height:20px; color: var(--cyan); }
.fcard.warm .ico{ background: rgba(246,180,75,0.08);} .fcard.warm .ico svg{ color: var(--gold); }
.fcard.aur .ico{ background: rgba(139,92,246,0.10);} .fcard.aur .ico svg{ color: var(--aurora); }
.fcard h3{ margin-bottom:0.45rem; }
.fcard p{ color: var(--dim); font-size:0.92rem; }

.intro{ max-width: 46ch; margin-bottom: 0.5rem; }
.intro.center{ margin-inline:auto; text-align:center; max-width:52ch; }
.intro.center .eyebrow{ justify-content:center; }

.chips{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.4rem; }
.chip{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.85rem; border-radius:999px; border:1px solid var(--line-2); background: rgba(255,255,255,0.02); font-size:0.85rem; color: var(--dim); }
.chip svg{ width:14px; height:14px; }
.chip.c1 svg{ color:var(--cyan);} .chip.c2 svg{ color:var(--gold);} .chip.c3 svg{ color:var(--aurora);} .chip.c4 svg{ color:var(--rose);}

.clouds{ display:grid; gap:0.75rem; }
.clay{ display:grid; grid-template-columns: 64px 1fr 42px; align-items:center; gap:0.7rem; font-family:var(--mono); font-size:0.78rem; color:var(--dim); }
.bar{ height:9px; border-radius:999px; background: rgba(255,255,255,0.06); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:999px; }
.gauge{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.gauge .score{ font-family:var(--mono); font-size:2.4rem; font-weight:600; color: var(--cyan); line-height:1; letter-spacing:-0.02em; }
.gauge .score small{ font-size:0.42em; color:var(--faint); }
.gauge .lab{ color:var(--dim); font-size:0.9rem; }
.gauge .lab b{ color:var(--text); }

.bortle{ height:16px; border-radius:999px; margin:0.4rem 0 0.2rem; position:relative;
  background: linear-gradient(90deg,#05081a,#0b1230 18%,#151A3A 40%,#3c3f5e 62%,#7d6b56 82%,#b79a72); }
.bortle .pin{ position:absolute; top:-6px; width:3px; height:28px; background:var(--gold); border-radius:2px; box-shadow:0 0 10px var(--gold); }

.plats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; margin-top:2.4rem; }
@media (max-width:720px){ .plats{ grid-template-columns:1fr;} }
.plat{ border:1px solid var(--line); border-radius:16px; padding:1.6rem; background: rgba(13,18,44,0.42); text-align:center; }
.plat svg{ width:34px; height:34px; color:var(--cyan-2); margin-bottom:0.8rem; }
.plat h3{ margin-bottom:0.3rem; } .plat p{ color:var(--dim); font-size:0.9rem; }

.closing{ text-align:center; padding: clamp(4.5rem,10vw,8rem) 0; border-bottom:none; }
.closing h2{ font-size: clamp(2rem,5vw,3.4rem); max-width:16ch; margin-inline:auto; }
.closing .lead{ margin:1.2rem auto 2rem; }

footer.site{ border-top:1px solid var(--line); padding: 2.4rem 0; color: var(--faint); font-size:0.85rem; }
footer.site .container{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
footer.site a{ color: var(--dim); text-decoration:none; }
footer.site .fnote{ font-family:var(--mono); font-size:0.76rem; letter-spacing:0.04em; }

.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform: none; }
@media (scripting: none){ .reveal{ opacity:1; transform:none; } }

:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .ticker-track{ animation: none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .fcard{ transition:none; }
}