/* ============================================================================
   ServiyouSites — "Dark Cinematic" design system
   ----------------------------------------------------------------------------
   Deep near-black green ink, warm paper text, amber light. Big readable type
   (19px base everywhere, phones included), huge touch targets, one idea per
   section. Zero frameworks, zero webfonts, zero trackers, zero GPU-dependent
   effects: every animation is transform and/or opacity only, so it stays
   buttery on old phones. All motion dies gracefully under
   prefers-reduced-motion, and the whole site reads perfectly with JS off.
   ========================================================================== */

:root {
  /* ---- dark cinematic tokens ---- */
  --ink: #060B08;            /* near-black green: page ground */
  --ink-2: #0B110D;          /* deep surface: alternating sections */
  --ink-3: #121915;          /* raised surface: cards */
  --paper: #F5EEDC;          /* warm light: primary text */
  --muted: #BCAFA4;          /* warm gray text — ~7.5:1 on ink */
  --faint: #8E8577;
  --line: rgba(233, 161, 59, 0.16);
  --line-strong: rgba(233, 161, 59, 0.42);
  --gold: #E9A13B;
  --gold-soft: #F6D9A0;
  --gold-deep: #C07F1F;
  --gold-text: #F2B45A;      /* gold brightened for text on dark */
  --green: #3E9C68;          /* green brightened for dark surfaces */
  --green-dark: #0E3B26;      /* legacy name: deep forest (dark accents) */
  --red-soft: #3A1E1E;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --glow: 0 0 46px rgba(233, 161, 59, 0.16);
  --ring: 0 0 0 4px rgba(233, 161, 59, 0.38);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;

  /* fluid type scale — display is the cinematic voice */
  --fs-display: clamp(3rem, 9vw, 6.75rem);
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 3.6vw, 2.5rem);
  --fs-h3: 1.35rem;
  --fs-lead: clamp(1.15rem, 2.2vw, 1.35rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-lift: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 46px rgba(233, 161, 59, 0.14);
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 19px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* film grain: static SVG noise, pointer-transparent, zero animation cost */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: #241A05; }

/* slim gold scrollbar (webkit) — Firefox keeps its native one */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #040705; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius: 8px;
  border: 3px solid #040705;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 26px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.mt { margin-top: 30px; }

/* skip link: invisible until keyboard focus lands on it (transform-only slide) */
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 3001;
  background: var(--gold);
  color: #241A05;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  transform: translateY(-400%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* scroll progress: transform-only, driven by rAF in app.js */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 3000;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-soft));
  box-shadow: 0 0 18px rgba(233, 161, 59, 0.55);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------------- typography ---------------- */
h1, h2, h3 {
  line-height: 1.16;
  color: var(--paper);
  margin: 0 0 0.55em;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-weight: 800;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-top: 1.4em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
section h2:first-child, .card h2:first-child { margin-top: 0; }
p { margin: 0 0 1.05em; }
.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.65; }

/* serif italic accents grow out of the existing <em> markup */
em {
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0;
  color: var(--gold-soft);
}
.u-gold { color: var(--gold-text); }

a { color: var(--gold-text); text-underline-offset: 3px; transition: color 0.2s ease; }
a:hover { color: var(--gold-soft); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* eyebrow: small-caps gold label above section titles */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 38px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow-center::after {
  content: "";
  width: 38px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* legacy kicker class → same eyebrow treatment */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.kicker::before {
  content: "";
  width: 34px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* ---------------- header ---------------- */
.site-header {
  background: rgba(6, 11, 8, 0.88);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(4, 7, 5, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 13px;
  padding-bottom: 13px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-decoration: none;
}
.brand span { color: var(--gold); }
.brand .spark {
  width: 26px; height: 26px;
  flex: none;
  transition: transform 0.5s var(--ease-out);
}
.brand:hover .spark { transform: rotate(90deg) scale(1.12); }
.main-nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.main-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 650;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 1rem;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.main-nav a:hover { background: rgba(233, 161, 59, 0.12); color: var(--paper); }
.main-nav a[aria-current="page"] { background: rgba(233, 161, 59, 0.16); color: var(--gold-text); }
/* Log-in link: outlined pill so existing customers can spot it instantly. */
.main-nav a.nav-login {
  border: 1.5px solid rgba(233, 161, 59, 0.55);
  color: var(--gold-text);
  margin-left: 6px;
}
.main-nav a.nav-login:hover { background: rgba(233, 161, 59, 0.18); color: var(--paper); }

/* ---------------- buttons ---------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  padding: 17px 36px;
  border-radius: 16px;
  border: 0;
  min-height: 62px;
  line-height: 1.4;
  text-align: center;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out),
    background-color 0.25s ease, color 0.25s ease;
}
/* shine sweep: a skewed light band that glides across on hover (transform only) */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-240%) skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after { animation: btn-shine 0.7s var(--ease-out); }
@keyframes btn-shine {
  from { transform: translateX(-240%) skewX(-18deg); }
  to { transform: translateX(520%) skewX(-18deg); }
}
/* primary: molten gold with real glow — the cinematic CTA */
.btn-primary {
  background: linear-gradient(165deg, #F2B45A 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #2A1E05;
  box-shadow: 0 12px 42px rgba(233, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-primary:hover {
  transform: translateY(-3px);
  color: #2A1E05;
  box-shadow: 0 20px 58px rgba(233, 161, 59, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-amber {
  background: linear-gradient(165deg, #F2B45A 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #2A1E05;
  box-shadow: 0 12px 42px rgba(233, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-amber:hover { transform: translateY(-3px); color: #2A1E05; box-shadow: 0 20px 58px rgba(233, 161, 59, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-amber:active { transform: translateY(0) scale(0.98); }
.btn-ghost {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(245, 238, 220, 0.4);
  z-index: 0;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.32s var(--ease-out);
  z-index: -1;
}
.btn-ghost:hover { transform: translateY(-3px); color: #2A1E05; box-shadow: inset 0 0 0 2px var(--gold), 0 14px 34px rgba(233, 161, 59, 0.25); }
.btn-ghost:hover::before { transform: scaleX(1); }
.btn-ghost:active { transform: translateY(0) scale(0.98); }
.btn-block { display: block; width: 100%; }
.btn-wait { opacity: 0.85; }

/* ---------------- cinematic heroes ----------------
   .hero-cinematic: homepage only — full viewport statement.
   .hero (inner pages): deep cinematic treatment, smaller. */
.hero-cinematic {
  position: relative;
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 130px 0 100px;
  background:
    radial-gradient(52rem 32rem at 10% 6%, rgba(233, 161, 59, 0.16), transparent 60%),
    radial-gradient(62rem 42rem at 90% 92%, rgba(62, 156, 104, 0.22), transparent 62%),
    radial-gradient(38rem 24rem at 72% 8%, rgba(233, 161, 59, 0.09), transparent 60%),
    linear-gradient(180deg, #0A120D 0%, #060B08 58%, #030604 100%);
}
.hero {
  position: relative;
  overflow: clip;
  text-align: center;
  padding: 96px 0 80px;
  background:
    radial-gradient(46rem 28rem at 12% 0%, rgba(233, 161, 59, 0.13), transparent 60%),
    radial-gradient(54rem 36rem at 88% 100%, rgba(62, 156, 104, 0.18), transparent 62%),
    linear-gradient(180deg, #0A120D 0%, #060B08 70%, #040705 100%);
  border-bottom: 1px solid var(--line);
}
.hero > .wrap, .hero-cinematic > .wrap { position: relative; z-index: 2; }
.hero .btn, .hero-cinematic .btn { margin: 10px 7px; }

/* drifting light orbs: layered radial gradients, transform-only, very slow */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; pointer-events: none; }
.orb-1 {
  width: 46rem; height: 46rem; left: -13rem; top: -15rem;
  background: radial-gradient(circle, rgba(233, 161, 59, 0.20), rgba(233, 161, 59, 0) 68%);
  animation: orb-a 26s ease-in-out infinite alternate;
}
.orb-2 {
  width: 40rem; height: 40rem; right: -11rem; top: 24%;
  background: radial-gradient(circle, rgba(62, 156, 104, 0.30), rgba(62, 156, 104, 0) 68%);
  animation: orb-b 33s ease-in-out infinite alternate;
}
.orb-3 {
  width: 28rem; height: 28rem; left: 36%; bottom: -13rem;
  background: radial-gradient(circle, rgba(233, 161, 59, 0.13), rgba(233, 161, 59, 0) 70%);
  animation: orb-c 39s ease-in-out infinite alternate;
}
@keyframes orb-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(7rem, 9rem) scale(1.18); } }
@keyframes orb-b { from { transform: translate(0, 0) scale(1.08); } to { transform: translate(-8rem, -6rem) scale(0.94); } }
@keyframes orb-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6rem, -8rem) scale(1.22); } }

/* grain inside heroes: extra cinematic texture layer */
.grain {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* eyebrow badge on the hero */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(233, 161, 59, 0.08);
  border: 1px solid var(--line-strong);
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 10px 22px;
  border-radius: 999px;
  margin-bottom: 28px;
  box-shadow: 0 0 34px rgba(233, 161, 59, 0.12);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.hero-badge:hover { transform: translateY(-2px); box-shadow: 0 0 46px rgba(233, 161, 59, 0.22); }
/* live dot: gentle opacity pulse */
.hero-badge::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 35%, #9FE8B8, var(--green));
  box-shadow: 0 0 12px rgba(62, 156, 104, 0.9);
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

/* giant display headline with staggered line reveal */
.display {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: var(--paper);
  text-wrap: balance;
  margin-bottom: 0.45em;
  text-shadow: 0 3px 44px rgba(0, 0, 0, 0.45);
}
.display .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.display .line-inner { display: block; }
html.js .display .line-inner {
  transform: translateY(115%);
  transition: transform 1.05s var(--ease-out);
}
html.js.loaded .display .line-inner { transform: translateY(0); }
html.js.loaded .display .line:nth-child(1) .line-inner { transition-delay: 0.08s; }
html.js.loaded .display .line:nth-child(2) .line-inner { transition-delay: 0.2s; }
html.js.loaded .display .line:nth-child(3) .line-inner { transition-delay: 0.32s; }
.display em { color: var(--gold-text); }

/* hero entrance: badge, lead and CTAs rise in sequence on load */
html.js .hero-load {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js.loaded .hero-load { opacity: 1; transform: none; }

.hero-cinematic .lead, .hero .lead {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.hero-ctas { margin-top: 18px; }

/* scroll cue: a small honest "scroll" hint, pure CSS */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 52px;
  color: rgba(245, 238, 220, 0.55);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.scroll-cue::after {
  content: "";
  width: 2px; height: 46px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: cue-drop 2.2s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(10px); opacity: 0; }
}

/* ---------------- sections ---------------- */
.section { padding: 88px 0; position: relative; }
/* alternating deep surfaces give cinematic rhythm without new markup */
main > .section:nth-of-type(even) {
  background: var(--ink-2);
  border-top: 1px solid rgba(233, 161, 59, 0.1);
  border-bottom: 1px solid rgba(233, 161, 59, 0.1);
}
/* gold rule flourish above section titles */
.section-title-rule {
  width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 0 0 22px;
}
.center .section-title-rule { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---------------- marquee ---------------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #040705;
  padding: 22px 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.mq {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  color: var(--paper);
  white-space: nowrap;
  padding: 0 30px;
}
.mq-sep { color: var(--gold); font-size: 1.1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- stats band ---------------- */
.stats {
  display: grid;
  gap: 22px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat {
  text-align: center;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 20px;
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.35s var(--ease-out);
}
.stat:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--glow); }
.stat-num {
  display: block;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(233, 161, 59, 0.35);
}
.stat-label { display: block; margin-top: 10px; color: var(--muted); font-size: 1.02rem; }

/* ---------------- cards ---------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow);
  transition: transform 0.38s var(--ease-out), box-shadow 0.38s var(--ease-out),
    border-color 0.3s ease;
}
/* gold top-bar that sweeps in on hover */
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  box-shadow: 0 0 22px rgba(233, 161, 59, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}
.card:hover::before { transform: scaleX(1); }
.card h3 { color: var(--paper); }

.card-grid {
  display: grid;
  gap: 26px;
  margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(233, 161, 59, 0.1);
  color: var(--gold-text);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 16px;
}

.price {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gold-text);
  margin: 10px 0 14px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(233, 161, 59, 0.25);
}
.price small { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.check-list { list-style: none; padding: 0; margin: 0 0 1.6em; }
.check-list li {
  padding: 9px 0 9px 44px;
  position: relative;
  font-size: 1.04rem;
  color: var(--paper);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 9px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(233, 161, 59, 0.12);
  border: 1px solid var(--line-strong);
  color: var(--gold-text);
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(233, 161, 59, 0.2);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #2A1E05;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  box-shadow: 0 8px 26px rgba(233, 161, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---------------- forms ---------------- */
.field { margin-bottom: 28px; }
.field label {
  display: block;
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--paper);
}
.field .hint {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
}
.hint { color: var(--muted); font-size: 1rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font-size: 1.15rem;
  padding: 17px 20px;
  border: 2px solid rgba(245, 238, 220, 0.18);
  border-radius: 14px;
  background: #0D130F;
  color: var(--paper);
  font-family: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--ring);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23E9A13B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 52px;
}
.form-note {
  background: rgba(62, 156, 104, 0.1);
  border: 1px solid rgba(62, 156, 104, 0.35);
  border-left: 5px solid var(--green);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 30px;
  font-size: 1.04rem;
}

/* ---------------- usage / dashboard ---------------- */
.usage-bar {
  background: #0D130F;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 28px;
  overflow: hidden;
  margin: 12px 0 6px;
}
.usage-bar > div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow: 0 0 18px rgba(233, 161, 59, 0.4);
  position: relative;
  overflow: hidden;
}
/* slow shimmer across the fill: transform-only */
.usage-bar > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: bar-shimmer 3.2s ease-in-out infinite;
}
@keyframes bar-shimmer {
  55%, 100% { transform: translateX(100%); }
}
.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(245, 238, 220, 0.2);
  font-size: 1.04rem;
}
.kv:last-child { border-bottom: 0; }
.kv strong { font-variant-numeric: tabular-nums; color: var(--gold-text); }
.activity { list-style: none; padding: 0; margin: 0; }
.activity li { padding: 12px 0; border-bottom: 1px dashed rgba(245, 238, 220, 0.2); font-size: 1.02rem; }
.activity li:last-child { border-bottom: 0; }
.activity time { color: var(--muted); font-size: 0.93rem; display: block; }

/* ---------------- toast & notices ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 24px);
  background: #0D130F;
  color: var(--paper);
  font-size: 1.08rem;
  font-weight: 600;
  padding: 18px 30px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 30px rgba(233, 161, 59, 0.12);
  max-width: min(92vw, 580px);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.notice {
  border-radius: 14px;
  padding: 20px 24px;
  margin: 22px 0;
  font-size: 1.05rem;
  border: 1px solid var(--line-strong);
  border-left: 6px solid var(--gold);
  background: rgba(233, 161, 59, 0.07);
  box-shadow: var(--shadow);
}
.notice-ok { border-left-color: var(--green); background: rgba(62, 156, 104, 0.09); }
.notice-warn { border-left-color: #E06868; background: rgba(224, 104, 104, 0.08); }
.notice h2, .notice h3 { margin-top: 0; color: var(--paper); }

/* ---------------- footer ---------------- */
.site-footer {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(50rem 24rem at 85% -20%, rgba(233, 161, 59, 0.12), transparent 60%),
    linear-gradient(180deg, #070C09 0%, #030604 100%);
  color: var(--muted);
  margin-top: 90px;
  padding: 70px 0 34px;
  border-top: 1px solid var(--line);
}
.site-footer a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.site-footer a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.site-footer h3 { color: var(--paper); font-size: 1.12rem; letter-spacing: 0.01em; }
/* giant ghost wordmark: pure decoration, hidden from assistive tech */
.footer-word {
  position: absolute;
  left: 50%;
  bottom: -0.24em;
  transform: translateX(-50%);
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 161, 59, 0.22);
  user-select: none;
  pointer-events: none;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 238, 220, 0.14);
  font-size: 0.95rem;
  color: var(--faint);
}

/* ---------------- faq accordion ---------------- */
.faq-item {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
}
.faq-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.faq-item h3 { margin-bottom: 0.4em; }
.faq-item p:last-child { margin-bottom: 0; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--paper);
  font-weight: 750;
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  padding: 24px 28px;
  min-height: 64px;
}
.faq-q:hover .faq-q-text { color: var(--gold-text); }
.faq-chev {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(233, 161, 59, 0.12);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: transform 0.4s var(--ease-out), background-color 0.3s ease;
}
.faq-chev::before, .faq-chev::after {
  content: "";
  position: absolute;
  background: var(--gold-text);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}
.faq-chev::before { width: 15px; height: 3px; }
.faq-chev::after { width: 3px; height: 15px; transition: transform 0.4s var(--ease-out), opacity 0.25s ease; }
.faq-item.open .faq-chev { transform: rotate(135deg); background: var(--gold); border-color: var(--gold); }
.faq-item.open .faq-chev::before, .faq-item.open .faq-chev::after { background: #2A1E05; }
.faq-a { overflow: hidden; } /* no-JS: answers always visible */
html.js .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
html.js .faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { padding: 0 28px 28px; font-size: 1.06rem; min-height: 0; min-width: 0; color: var(--muted); }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* ---------------- legal pages ---------------- */
.legal-doc { background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 44px 48px; box-shadow: var(--shadow); margin-top: 40px; }
.legal-doc h2 { margin-top: 2.2rem; }
.legal-doc ul { margin: 0.8rem 0 1.2rem; padding-left: 1.4rem; }
.legal-doc li { margin-bottom: 0.55rem; color: var(--muted); }
.legal-doc p { line-height: 1.8; color: var(--muted); }
.legal-doc strong { color: var(--paper); }

/* ---------------- tool demo surfaces ---------------- */
.tool-shell {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}
.tool-shell input, .tool-shell select, .tool-shell textarea {
  background: #0D130F;
  border: 2px solid rgba(245, 238, 220, 0.18);
  color: var(--paper);
  border-radius: 12px;
  font-family: inherit;
}
.tool-shell input:focus, .tool-shell select:focus, .tool-shell textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--ring);
}
.tool-shell label { color: var(--paper); font-weight: 650; }
.tool-shell button { font-family: inherit; }

/* ---------------- reveal on scroll ----------------
   JS adds .in via IntersectionObserver. Without JS, html never gets
   .js so everything is visible by default. */
html.js .reveal { opacity: 0; transform: translateY(30px); }
html.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* stagger: siblings in a grid cascade in */
html.js .card-grid .reveal.in:nth-child(2),
html.js .stats .reveal.in:nth-child(2) { transition-delay: 0.09s; }
html.js .card-grid .reveal.in:nth-child(3),
html.js .stats .reveal.in:nth-child(3) { transition-delay: 0.18s; }
html.js .card-grid .reveal.in:nth-child(4),
html.js .stats .reveal.in:nth-child(4) { transition-delay: 0.27s; }
html.js .card-grid .reveal.in:nth-child(5) { transition-delay: 0.36s; }
html.js .card-grid .reveal.in:nth-child(6) { transition-delay: 0.45s; }
html.js .card-grid .reveal.in:nth-child(7) { transition-delay: 0.54s; }
html.js .card-grid .reveal.in:nth-child(8) { transition-delay: 0.63s; }

/* keep card/stat/faq hover lifts working after reveal completes
   (html.js .reveal.in's transform:none would otherwise win) */
html.js .card.reveal.in:hover {
  transform: translateY(-7px);
  transition: transform 0.38s var(--ease-out), box-shadow 0.38s var(--ease-out), border-color 0.3s ease;
}
html.js .stat.reveal.in:hover {
  transform: translateY(-5px);
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.35s var(--ease-out);
}
html.js .faq-item.reveal.in:hover {
  transform: translateY(-3px);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
}

/* ---------------- reduced motion: everything still, everything visible --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .reveal.in { transition: none; }
  html.js .display .line-inner { transform: none; }
  html.js .hero-load { opacity: 1; transform: none; }
  .btn, .card, .stat, .hero-badge, a, .main-nav a, .brand .spark,
  .faq-chev, .faq-chev::after, .faq-item, html.js .faq-a,
  .field input, .field select, .field textarea, .toast, .skip-link { transition: none !important; }
  .btn:hover, .card:hover, .stat:hover, .faq-item:hover { transform: none; }
  .btn:hover::after { animation: none; }
  html.js .faq-a { grid-template-rows: 1fr; }
  .faq-item .faq-q { cursor: default; }
  .hero-badge::before, .scroll-cue::after,
  .usage-bar > div::after, .orb-1, .orb-2, .orb-3 { animation: none !important; }
  .marquee-track { animation: none; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 720px) {
  html { font-size: 19px; }
  .section { padding: 60px 0; }
  .hero { padding: 72px 0 60px; }
  .hero-cinematic { padding: 110px 0 80px; min-height: 100svh; }
  .header-inner { gap: 10px; }
  .main-nav { margin-left: 0; order: 3; width: 100%; }
  .main-nav a { padding: 10px 12px; font-size: 0.98rem; }
  .btn { width: 100%; margin: 7px 0; }
  .hero .btn, .hero-cinematic .btn { margin-left: 0; margin-right: 0; }
  .card { padding: 28px 24px; }
  .legal-doc { padding: 30px 24px; }
  .footer-word { font-size: 18vw; }
  .display { letter-spacing: -0.03em; }
  .marquee { padding: 16px 0; }
}

/* ---------------- print: receipts, not chrome ---------------- */
@media print {
  .site-header .main-nav, .site-header .btn, .scroll-progress,
  .toast, .skip-link, body::after, .orbs, .grain, .marquee,
  .scroll-cue, .hero-ctas { display: none !important; }
  body { background: #fff; color: #111; }
  .hero, .hero-cinematic { padding: 30px 0; min-height: 0; background: #fff; }
  .display, h1, h2, h3 { color: #111; text-shadow: none; }
  .lead, p, li { color: #222; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .display .line-inner { transform: none; }
  html.js .hero-load { opacity: 1; transform: none; }
  html.js .faq-a { grid-template-rows: 1fr; }
  .card, .faq-item, .stat { box-shadow: none; break-inside: avoid; background: #fff; border: 1px solid #999; }
  .price, .stat-num { color: #111; text-shadow: none; }
  body { font-size: 12pt; }
}

/* console easter egg lives in app.js — this one's for the stylesheet divers:
   every shadow here was tuned by hand. No frameworks were harmed. */

/* ---- License keys (/me/ dashboard, Wave-1) ----
   Granny-simple: big readable key in a dashed box, tap-to-copy button. */
.license-key{font-size:1.15rem;letter-spacing:.08em;background:#F3EDDA;
  border:2px dashed #C9B98F;border-radius:8px;padding:6px 12px;
  display:inline-block;margin:4px 0;user-select:all;}
.btn-copy{padding:8px 18px;font-size:.95rem;margin-left:8px;}

/* ---- HeyYou Builds (/build/ + /me/ "My builds") ----
   Granny-simple: big touch targets, plain words, zero jargon. */
.step-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 12px;
}
.checks { display: grid; gap: 12px; margin-top: 6px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 2px solid rgba(245, 238, 220, 0.14);
  border-radius: 14px;
  cursor: pointer;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.45;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.check:hover { border-color: var(--line-strong); }
.check input {
  width: 30px;
  height: 30px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}
.check:has(input:checked) {
  border-color: var(--gold);
  background: rgba(233, 161, 59, 0.07);
}
.check small { display: block; font-weight: 400; color: var(--muted); font-size: 0.98rem; margin-top: 2px; }
.check input:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.draft-badge {
  border: 1px solid var(--line-strong);
  border-left: 6px solid var(--gold);
  border-radius: 14px;
  background: rgba(233, 161, 59, 0.06);
  padding: 20px 24px;
  font-size: 1.05rem;
  line-height: 1.65;
}
.draft-badge strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.draft-actions { margin-top: 22px; }
.draft-actions .hint { margin-top: 12px; }

/* ---- "My builds" dashboard cards ---- */
.build-item {
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.build-item:first-of-type { border-top: none; padding-top: 6px; }
.build-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.status-chip {
  flex: none;
  font-size: 0.95rem;
  font-weight: 750;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(233, 161, 59, 0.1);
  color: var(--gold-text);
  white-space: nowrap;
}
.status-chip.status-in_build { border-color: rgba(62, 156, 104, 0.5); background: rgba(62, 156, 104, 0.12); color: #7FD6A4; }
.status-chip.status-in_review { border-color: rgba(62, 156, 104, 0.5); background: rgba(62, 156, 104, 0.12); color: #7FD6A4; }
.status-chip.status-delivered { border-color: rgba(62, 156, 104, 0.65); background: rgba(62, 156, 104, 0.18); color: #8FE0B0; }
.status-chip.status-quoted { border-color: var(--line-strong); background: rgba(233, 161, 59, 0.16); color: var(--gold-soft); }

.quote-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding: 26px 28px;
  margin: 18px 0;
}
.quote-card h3 { margin-top: 0; }
.quote-amount { font-size: 2.2rem; font-weight: 800; color: var(--gold-text); margin: 6px 0 12px; }
.quote-amount small { font-size: 1rem; font-weight: 400; color: var(--muted); }
.revision-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-top: 18px;
  background: rgba(233, 161, 59, 0.03);
}
.revision-box h3 { margin-top: 0; }

/* ---- draft preview modal ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 7, 5, 0.82);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(1080px, 100%);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.modal-card .draft-badge { border: none; border-radius: 0; border-bottom: 1px solid var(--line); }
#dm-frame { flex: 1; min-height: 62vh; width: 100%; border: 0; background: #060B08; }

/* ---- homepage hero: HeyYou Builds link ---- */
.hero-build-link { margin-top: 22px; font-size: 1.12rem; }
.hero-build-link a { color: var(--gold-text); font-weight: 750; }

@media (prefers-reduced-motion: reduce) {
  .check { transition: none; }
}