/* ═══════════════════════════════════════════════════════════════════
   AstroWatch — marketing site
   Dark premium obsidian · gold accents · classical serif display
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Obsidian ground */
  --bg-0:   #05070F;
  --bg-1:   #090C18;
  --bg-2:   #0E1226;
  --panel:  #121734;
  --panel-2:#161C3C;

  /* Gold — premium accent */
  --gold:      #E9C877;
  --gold-2:    #D4A557;
  --gold-deep: #A97C34;
  --gold-soft: rgba(233,200,119,0.14);

  /* App data hues (harmonize with screenshots) */
  --blue:   #9DB7FF;
  --teal:   #7AE6C8;
  --violet: #B98BFF;
  --rose:   #F58FC8;
  --red:    #F0736F;

  /* Ink */
  --ink:      #F3EFE3;
  --ink-dim:  #C3C7DC;
  --ink-mute: #8A93B8;
  --ink-faint:#5C658C;

  --line:     rgba(233,200,119,0.14);
  --line-cool:rgba(157,183,255,0.12);
  --hairline: rgba(255,255,255,0.07);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1200px;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Cosmic ground: layered radial glows + faint starfield */
.sky {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(233,200,119,0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 12%, rgba(157,183,255,0.10), transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 30%, rgba(185,139,255,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 40%, #04060D 100%);
}
.stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, rgba(233,200,119,0.7), transparent),
    radial-gradient(1.1px 1.1px at 61% 78%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.3px 1.3px at 73% 28%, rgba(157,183,255,0.7), transparent),
    radial-gradient(1.1px 1.1px at 85% 58%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.2px 1.2px at 6% 84%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.3px 1.3px at 52% 44%, rgba(255,255,255,0.4), transparent);
  opacity: 0.6;
}

/* ─── Layout ─── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
section { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2));
}
.eyebrow.center::before { display: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.04;
  margin: 18px 0 0;
  color: var(--ink);
}
.section-head p {
  font-size: 18px; line-height: 1.6; color: var(--ink-dim);
  margin: 18px 0 0; font-weight: 400;
}
.gold-text { color: var(--gold); }
em.gold-text { font-style: italic; }

/* ─── Buttons ─── */
.btn {
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600;
  padding: 13px 24px; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn-gold {
  color: #1A1206;
  background: linear-gradient(180deg, #F2D488, var(--gold-2));
  box-shadow: 0 8px 26px rgba(212,165,87,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(212,165,87,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-ghost {
  color: var(--ink); background: rgba(255,255,255,0.04);
  border-color: var(--hairline);
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--line); }
.btn-lg { padding: 16px 30px; font-size: 15.5px; }

/* ─── Nav ─── */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,11,22,0.82);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--hairline);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: 0.01em; }
.brand-name b { color: var(--gold); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  color: var(--ink-dim); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; }

/* ─── Hero ─── */
.hero { padding: 78px 0 40px; text-align: center; }
.hero-eyebrow { justify-content: center; }
.hero h1 {
  font-size: clamp(44px, 6.6vw, 88px);
  line-height: 1.0; margin: 26px auto 0; max-width: 26ch;
  letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-sub {
  font-size: 19.5px; line-height: 1.6; color: var(--ink-dim);
  max-width: 60ch; margin: 26px auto 0; font-weight: 400;
}

/* platform download row */
.platforms { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 38px auto 0; }
.plat {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .2s ease, background .2s;
}
.plat:hover { transform: translateY(-2px); border-color: var(--line); background: rgba(255,255,255,0.07); }
.plat svg { width: 26px; height: 26px; flex: none; color: var(--ink); }
.plat-txt { text-align: left; line-height: 1.2; }
.plat-txt .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); display: block; }
.plat-txt .v { font-size: 14.5px; font-weight: 600; }
.plat-note { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin-top: 16px; }

/* hero showcase */
.hero-stage { margin: 60px auto 0; max-width: 1120px; position: relative; }
.hero-glow {
  position: absolute; inset: -8% 6% auto; height: 70%; z-index: -1;
  background: radial-gradient(ellipse 60% 100% at 50% 20%, rgba(233,200,119,0.22), transparent 65%),
              radial-gradient(ellipse 50% 80% at 30% 60%, rgba(157,183,255,0.16), transparent 60%);
  filter: blur(20px);
}
.app-window {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03) inset;
  background: var(--bg-2);
}
.app-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: linear-gradient(180deg, #131832, #0E1226);
  border-bottom: 1px solid var(--hairline);
}
.app-chrome .dot { width: 11px; height: 11px; border-radius: 50%; }
.app-chrome .dot.r { background: #F0736F; } .app-chrome .dot.y { background: #E9C877; } .app-chrome .dot.g { background: #7AE6C8; }
.app-chrome .addr {
  margin: 0 auto; font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
  padding: 4px 16px; background: rgba(0,0,0,0.3); border-radius: 7px; border: 1px solid var(--hairline);
}
.app-window img { display: block; width: 100%; height: auto; }

/* floating spec chips over hero */
.hero-chip {
  position: absolute; z-index: 3;
  font-family: var(--mono); font-size: 12px;
  background: rgba(14,18,38,0.9); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px;
  color: var(--ink-dim); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.7);
  display: flex; align-items: center; gap: 8px;
}
.hero-chip b { color: var(--gold); font-weight: 600; }
.hero-chip.c1 { top: 16%; left: -34px; }
.hero-chip.c2 { bottom: 12%; right: -30px; }
.hero-chip .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }

/* ─── Trust strip ─── */
.trust { padding: 46px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-top: 74px; }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.trust-badge { display: flex; align-items: center; gap: 12px; }
.trust-badge .swiss { width: 40px; height: 40px; }
.trust-badge .lbl { line-height: 1.25; }
.trust-badge .lbl .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.trust-badge .lbl .v { font-size: 15px; font-weight: 600; color: var(--ink); }
.trust-stats { display: flex; flex-wrap: wrap; gap: 40px; }
.tstat .n { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--gold); line-height: 1; }
.tstat .l { font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; }

/* ─── Section rhythm ─── */
.band { padding: 100px 0; }

/* ─── Feature pillars (alternating) ─── */
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pillar + .pillar { margin-top: 110px; }
.pillar.flip .pillar-media { order: -1; }
.pillar-body h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; margin: 16px 0 0; }
.pillar-body > p { font-size: 17px; line-height: 1.62; color: var(--ink-dim); margin: 18px 0 0; }
.pillar-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.pillar-list li { display: flex; gap: 12px; font-size: 15px; color: var(--ink-dim); line-height: 1.4; }
.pillar-list li b { color: var(--ink); font-weight: 600; }
.pillar-list .ic {
  flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--gold-soft); border: 1px solid rgba(233,200,119,0.3); color: var(--gold);
}
.pillar-list .ic svg { width: 12px; height: 12px; }

.pillar-media { position: relative; }
.pillar-media img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.75);
}
.pillar-media .media-glow {
  position: absolute; inset: 10% 0 auto; height: 70%; z-index: -1; filter: blur(30px);
  background: radial-gradient(ellipse at 50% 50%, rgba(157,183,255,0.2), transparent 70%);
}
.pillar.flip .pillar-media .media-glow { background: radial-gradient(ellipse at 50% 50%, rgba(233,200,119,0.2), transparent 70%); }

/* small feature grid (breadth) */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.fcard {
  padding: 26px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid var(--hairline); transition: border-color .2s ease, transform .2s ease;
}
.fcard:hover { border-color: var(--line); transform: translateY(-3px); }
.fcard .fic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px; background: var(--gold-soft); border: 1px solid rgba(233,200,119,0.24); color: var(--gold); }
.fcard .fic svg { width: 20px; height: 20px; }
.fcard h4 { font-family: var(--sans); font-size: 16.5px; font-weight: 650; margin: 0 0 8px; color: var(--ink); }
.fcard p { font-size: 14px; line-height: 1.55; color: var(--ink-mute); margin: 0; }

/* ─── Chart themes strip ─── */
.themes-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 18px; overflow-x: auto; padding: 6px 2px 24px; scroll-snap-type: x mandatory; }
.themes-scroll::-webkit-scrollbar { height: 8px; }
.themes-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
.theme-card { scroll-snap-align: start; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); background: var(--panel); transition: transform .2s ease, border-color .2s; }
.theme-card:hover { transform: translateY(-4px); border-color: var(--line); }
.theme-swatch { height: 130px; position: relative; display: grid; place-items: center; }
.theme-swatch .ring { width: 88px; height: 88px; border-radius: 50%; position: relative; }
.theme-swatch .ring::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 1.5px dashed currentColor; opacity: 0.5; }
.theme-swatch .ring::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: currentColor; opacity: 0.25; }
.theme-meta { padding: 13px 15px 16px; }
.theme-meta .tn { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.theme-meta .tf { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-top: 4px; }

/* ─── Gallery ─── */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); background: var(--bg-2); position: relative; transition: transform .2s ease, border-color .2s; }
.shot:hover { transform: translateY(-3px); border-color: var(--line); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; font-size: 12.5px; color: var(--ink-dim); background: linear-gradient(180deg, transparent, rgba(5,7,15,0.92)); }
.shot .cap b { color: var(--ink); font-weight: 650; display: block; font-size: 13.5px; }
.shot.wide { grid-column: span 4; } .shot.tall { grid-column: span 2; }
.shot.half { grid-column: span 3; } .shot.third { grid-column: span 2; }

/* ─── Comparison ─── */
.compare { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.crow { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; }
.crow + .crow { border-top: 1px solid var(--hairline); }
.crow > div { padding: 17px 24px; font-size: 14.5px; }
.crow.head > div { padding: 20px 24px; }
.crow.head { background: rgba(233,200,119,0.05); }
.crow.head .c-them { color: var(--ink-mute); font-weight: 600; text-align: center; font-family: var(--sans); }
.crow.head .c-us { text-align: center; }
.crow.head .c-us .badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--gold); }
.crow .c-feat { color: var(--ink); font-weight: 500; }
.crow .c-feat span { display: block; font-size: 12.5px; color: var(--ink-mute); font-weight: 400; margin-top: 3px; }
.crow .c-them, .crow .c-us { text-align: center; color: var(--ink-dim); }
.crow .c-us { background: rgba(233,200,119,0.04); font-weight: 600; color: var(--ink); }
.chk { color: var(--teal); } .crs { color: var(--ink-faint); }
.crow .c-us .chk { color: var(--gold); }

/* ─── Testimonials ─── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  padding: 30px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid var(--hairline); display: flex; flex-direction: column;
}
.quote .stars-row { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.quote blockquote { font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--ink); margin: 16px 0 0; font-weight: 500; flex: 1; }
.quote .who { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.quote .who .av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 18px; color: #1A1206; background: linear-gradient(150deg, var(--gold), var(--gold-deep)); }
.quote .who .nm { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.quote .who .rl { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }

/* ─── Pricing ─── */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.price-card { padding: 38px; border-radius: 20px; border: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); position: relative; }
.price-card.pro { border-color: rgba(233,200,119,0.4); background: linear-gradient(180deg, rgba(233,200,119,0.09), rgba(233,200,119,0.02)); box-shadow: 0 30px 80px -30px rgba(212,165,87,0.35); }
.price-tag { position: absolute; top: 26px; right: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #1A1206; background: linear-gradient(180deg, #F2D488, var(--gold-2)); padding: 5px 11px; border-radius: 20px; font-weight: 600; }
.price-card .tier { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.price-card.pro .tier { color: var(--gold); }
.price-card .amt { font-family: var(--serif); font-weight: 600; font-size: 56px; line-height: 1; margin: 16px 0 0; color: var(--ink); }
.price-card .amt small { font-size: 17px; font-family: var(--sans); color: var(--ink-mute); font-weight: 500; }
.price-card .amt-note { font-size: 13.5px; color: var(--ink-mute); margin: 8px 0 0; }
.price-card .p-desc { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; margin: 18px 0 0; }
.price-card .btn { width: 100%; justify-content: center; margin: 26px 0 0; }
.plist { list-style: none; padding: 24px 0 0; margin: 24px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 13px; }
.plist li { display: flex; gap: 11px; font-size: 14px; color: var(--ink-dim); line-height: 1.4; }
.plist li svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--teal); }
.price-card.pro .plist li svg { color: var(--gold); }
.plist li.muted { color: var(--ink-faint); }
.plist li.muted svg { color: var(--ink-faint); }

/* ─── Download ─── */
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dl-card { padding: 28px 24px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1px solid var(--hairline); text-align: center; transition: transform .2s ease, border-color .2s; }
.dl-card:hover { transform: translateY(-4px); border-color: var(--line); }
.dl-card .os { width: 46px; height: 46px; margin: 0 auto 16px; color: var(--gold); }
.dl-card h4 { font-family: var(--sans); font-size: 17px; font-weight: 650; margin: 0; }
.dl-card .req { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin: 8px 0 18px; line-height: 1.5; }
.dl-card .btn { width: 100%; justify-content: center; }
.dl-card .avail { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--teal); margin-top: 14px; font-family: var(--mono); }
.dl-card .avail .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }

/* ─── FAQ ─── */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 24px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink); font-family: var(--serif); font-size: 21px; font-weight: 500; }
.faq-q .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); transition: transform .25s ease; font-size: 18px; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { font-size: 15.5px; line-height: 1.65; color: var(--ink-dim); margin: 0 0 24px; padding-right: 46px; }

/* ─── Newsletter ─── */
.news { text-align: center; padding: 74px 0; }
.news-card {
  max-width: 720px; margin: 0 auto; padding: 54px 48px; border-radius: 24px;
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(233,200,119,0.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.news-card h2 { font-size: clamp(30px, 3.6vw, 44px); }
.news-card p { color: var(--ink-dim); font-size: 17px; margin: 16px auto 0; max-width: 46ch; line-height: 1.55; }
.news-form { display: flex; gap: 12px; max-width: 460px; margin: 30px auto 0; }
.news-form input {
  flex: 1; padding: 14px 18px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.3); color: var(--ink); font-family: var(--sans); font-size: 14.5px;
}
.news-form input::placeholder { color: var(--ink-mute); }
.news-form input:focus { outline: none; border-color: var(--gold-2); }
.news-msg { font-family: var(--mono); font-size: 13px; color: var(--teal); margin-top: 16px; min-height: 18px; }

/* ─── Footer ─── */
.footer { border-top: 1px solid var(--hairline); padding: 66px 0 40px; margin-top: 40px; }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { font-size: 14px; color: var(--ink-mute); line-height: 1.6; max-width: 34ch; margin: 0; }
.foot-social { display: flex; gap: 12px; margin-top: 20px; }
.foot-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--ink-mute); transition: color .2s, border-color .2s; }
.foot-social a:hover { color: var(--gold); border-color: var(--line); }
.foot-social svg { width: 17px; height: 17px; }
.foot-col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 18px; }
.foot-col a { display: block; color: var(--ink-dim); text-decoration: none; font-size: 14px; margin-bottom: 12px; transition: color .15s; }
.foot-col a:hover { color: var(--gold); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-mute); }
.foot-bottom .cfg { font-family: var(--mono); font-size: 11.5px; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }

/* ─── Reveal on scroll ─── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .pillar { grid-template-columns: 1fr; gap: 34px; }
  .pillar.flip .pillar-media { order: 0; }
  .fgrid, .quotes, .dl-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot.wide, .shot.tall, .shot.half, .shot.third { grid-column: span 2; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .hero-chip { display: none; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .band { padding: 68px 0; }
  .fgrid, .quotes, .dl-grid, .gallery { grid-template-columns: 1fr; }
  .shot.wide, .shot.tall, .shot.half, .shot.third { grid-column: span 1; }
  .crow { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
  .crow > div { padding: 14px 14px; font-size: 13px; }
  .news-form { flex-direction: column; }
  .foot-top { grid-template-columns: 1fr; }
  .trust-stats { gap: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sub-pages (legal / product / pricing), Free-vs-Pro table, sale price
   Added for compliance + secondary pages — reuses the tokens above.
   ═══════════════════════════════════════════════════════════════════ */

/* Sub-page hero (compact) */
.subhead { padding: 70px 0 8px; }
.subhead .eyebrow { justify-content: flex-start; }
.subhead h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; margin: 16px 0 0; color: var(--ink); }
.subhead .updated { font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); margin-top: 12px; }

/* Long-form document / legal content */
.doc { max-width: 820px; margin: 0 auto; padding: 8px 0 40px; }
.doc > p, .doc li { font-size: 15.5px; line-height: 1.72; color: var(--ink-dim); }
.doc h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); margin: 40px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.doc h3 { font-family: var(--sans); font-size: 16.5px; font-weight: 650; color: var(--ink); margin: 24px 0 6px; }
.doc ul { padding-left: 22px; margin: 12px 0; display: grid; gap: 8px; }
.doc a { color: var(--gold); } .doc a:hover { color: var(--gold-2); }
.doc code { font-family: var(--mono); font-size: 13px; color: var(--gold); background: var(--gold-soft); padding: 1px 6px; border-radius: 5px; }
.doc .callout { background: var(--gold-soft); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; padding: 14px 18px; margin: 20px 0; color: var(--ink-dim); font-size: 15px; line-height: 1.6; }
.doc .callout strong { color: var(--ink); }
.doc .mor { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-mute); line-height: 1.6; }
.doc .mor a { color: var(--ink-dim); }

/* Free vs Pro comparison table */
.fptable { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,0.02); max-width: 1080px; margin: 0 auto; }
.fprow { display: grid; grid-template-columns: 1fr 108px 108px; align-items: center; }
.fprow + .fprow { border-top: 1px solid var(--hairline); }
.fprow > div { padding: 15px 24px; font-size: 14.5px; }
.fprow.head { background: rgba(233,200,119,0.06); }
.fprow.head > div { padding: 18px 24px; }
.fprow.head .fp-free, .fprow.head .fp-pro { text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.fprow.head .fp-pro { color: var(--gold); }
.fprow .fp-f { color: var(--ink-dim); }
.fprow .fp-free, .fprow .fp-pro { text-align: center; font-weight: 600; }
.fprow .fp-pro { background: rgba(233,200,119,0.04); }
.fp-yes { color: var(--teal); } .fprow .fp-pro .fp-yes { color: var(--gold); }
.fp-no { color: var(--ink-faint); }

/* Sale price: struck original + save tag */
.price-card .amt .was { font-family: var(--serif); font-weight: 500; font-size: 32px; color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 2px; margin-right: 10px; }
.save-tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(122,230,200,0.32); background: rgba(122,230,200,0.08); border-radius: 20px; padding: 5px 11px; }

@media (max-width: 620px) {
  .fprow { grid-template-columns: 1fr 52px 52px; }
  .fprow > div { padding: 13px 12px; font-size: 12.5px; }
  .price-card .amt .was { font-size: 24px; }
}

/* ─── Cookie consent banner ─── */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 700px; margin: 0 auto;
  background: rgba(12,16,34,0.97); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 60px -20px rgba(0,0,0,0.8);
  padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cookie-banner p { margin: 0; flex: 1 1 280px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.cookie-banner a { color: var(--gold); }
.cookie-banner .cc-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-banner .btn { padding: 9px 20px; font-size: 13px; }
.cookie-prefs { background: none; border: 0; padding: 0; margin-left: 18px; font: inherit; font-size: 12.5px; color: var(--ink-mute); cursor: pointer; }
.cookie-prefs:hover { color: var(--gold); }
@media (max-width: 560px) { .cookie-banner .cc-actions { flex: 1 1 100%; } .cookie-banner .btn { flex: 1; justify-content: center; } }

/* ─── Sky Report / eclipse feature banner (homepage) ─── */
.skyfeature { padding: 26px 0 0; }
.skyfeature-card {
  max-width: 1000px; margin: 0 auto; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 26px;
  padding: 24px 34px; border-radius: 20px;
  background:
    radial-gradient(ellipse 55% 150% at 10% 50%, rgba(233,200,119,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -42px rgba(0,0,0,0.8);
}
.skyfeature-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(245,220,148,0.10) 49%, transparent 64%);
  transform: translateX(-65%); animation: skysheen 7.5s ease-in-out infinite;
}
@keyframes skysheen { 0%, 100% { transform: translateX(-65%); } 50% { transform: translateX(65%); } }
.skyfeature-disc { flex: none; width: 58px; height: 58px; position: relative; }
.skyfeature-disc .corona { transform-origin: 29px 29px; animation: coronaspin 24s linear infinite; }
@keyframes coronaspin { to { transform: rotate(360deg); } }
.skyfeature-body { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.skyfeature-body .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.skyfeature-body .q { font-family: var(--serif); font-size: clamp(18px, 2.1vw, 24px); font-weight: 500; color: var(--ink); line-height: 1.32; margin: 7px 0 0; }
.skyfeature-body .q b { color: var(--gold); font-weight: 600; }
.skyfeature-cta { flex: none; position: relative; z-index: 1; }
@media (max-width: 760px) {
  .skyfeature-card { flex-direction: column; text-align: center; gap: 18px; padding: 26px 22px; }
  .skyfeature-cta .btn { width: 100%; justify-content: center; }
}