@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --gold-dim: #7a6030;
  --obsidian: #080b10;
  --deep: #0c1018;
  --surface: #111620;
  --panel: #161d28;
  --border: rgba(201,168,76,0.15);
  --border-soft: rgba(255,255,255,0.06);
  --text: #d6dce8;
  --muted: #6b7a94;
  --white: #f0f4fa;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--obsidian);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  opacity:0.4;
}

/* ── NAV ── */
nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 4rem;
  background:rgba(8,11,16,0.92);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transition:padding 0.3s ease;
}

.nav-logo {
  display:flex;
  align-items:baseline;
  gap:0.6rem;
  text-decoration:none;
}

.nav-logo-mark {
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:1.7rem;
  color:var(--gold);
  letter-spacing:0.05em;
  line-height:1;
}

.nav-logo-sub {
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  color:var(--muted);
  letter-spacing:0.2em;
  text-transform:uppercase;
}

.nav-links {
  display:flex;
  align-items:center;
  gap:0;
  list-style:none;
  position:relative;
}

.nav-links > li { position:relative; }

.nav-links > li > a {
  color:var(--muted);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:color 0.2s;
  padding:0.5rem 1rem;
  display:block;
}

.nav-links > li > a:hover, .nav-links > li > a.active { color:var(--gold-light); }

/* Dropdown */
.nav-dropdown {
  position:absolute;
  top:100%;
  left:0;
  background:var(--panel);
  border:1px solid var(--border);
  min-width:220px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity 0.2s, transform 0.2s;
  z-index:100;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.nav-links > li.open .nav-dropdown {
  opacity:1;
  pointer-events:all;
  transform:translateY(0);
}

.nav-dropdown a {
  display:block;
  padding:0.75rem 1.2rem;
  color:var(--muted);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.05em;
  border-bottom:1px solid var(--border-soft);
  transition:background 0.2s, color 0.2s;
}

.nav-dropdown a:last-child { border-bottom:none; }
.nav-dropdown a:hover { background:rgba(201,168,76,0.06); color:var(--gold-light); }

.nav-cta {
  background:transparent !important;
  border:1px solid var(--gold) !important;
  color:var(--gold) !important;
  padding:0.5rem 1.4rem !important;
  margin-left:1rem;
  transition:background 0.2s, color 0.2s !important;
}

.nav-cta:hover {
  background:var(--gold) !important;
  color:var(--obsidian) !important;
}

/* Mobile nav toggle */
.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
}
.nav-toggle span {
  display:block;
  width:24px;
  height:2px;
  background:var(--gold);
  transition:all 0.3s;
}

/* ── PAGE HERO ── */
.page-hero {
  position:relative;
  z-index:2;
  padding:10rem 4rem 5rem;
  background:var(--deep);
  border-bottom:1px solid var(--border-soft);
  overflow:hidden;
}

.page-hero::before {
  content:'';
  position:absolute;
  top:-200px; right:-200px;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(201,168,76,0.06), transparent 70%);
  pointer-events:none;
}

.page-hero-inner { max-width:1260px; margin:0 auto; }

.page-hero-tag {
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.3em;
  color:var(--gold);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:0.8rem;
  margin-bottom:1.2rem;
}

.page-hero-tag::before {
  content:'';
  display:block;
  width:24px;
  height:1px;
  background:var(--gold);
}

.page-hero h1 {
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:1.05;
  color:var(--white);
  margin-bottom:1.2rem;
}

.page-hero h1 em { font-style:italic; color:var(--gold-light); }

.page-hero p {
  font-size:1rem;
  color:var(--muted);
  max-width:560px;
  line-height:1.7;
}

.breadcrumb {
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.15em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:2rem;
}

.breadcrumb a { color:var(--muted); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { color:var(--gold-dim); }

/* ── SECTIONS ── */
section { position:relative; z-index:2; }

.section-inner {
  max-width:1260px;
  margin:0 auto;
  padding:6rem 2rem;
}

.section-header { margin-bottom:4rem; }

.section-tag {
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.3em;
  color:var(--gold);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:0.8rem;
  margin-bottom:1rem;
}

.section-tag::before {
  content:'';
  display:block;
  width:24px;
  height:1px;
  background:var(--gold);
  opacity:0.6;
}

.section-title {
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(2.2rem,5vw,3.8rem);
  line-height:1.1;
  color:var(--white);
}

.section-title em { font-style:italic; color:var(--gold-light); }

.section-lead {
  margin-top:1rem;
  font-size:1rem;
  color:var(--muted);
  max-width:560px;
  line-height:1.7;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block;
  background:var(--gold);
  color:var(--obsidian);
  border:none;
  padding:0.9rem 2.2rem;
  font-family:'Syne',sans-serif;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.2s, transform 0.2s;
}

.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); }

.btn-secondary {
  display:inline-block;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border-soft);
  padding:0.9rem 2.2rem;
  font-family:'Syne',sans-serif;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:border-color 0.2s, color 0.2s, transform 0.2s;
}

.btn-secondary:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

.btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--gold);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:gap 0.2s;
}

.btn-ghost:hover { gap:0.8rem; }

/* ── TICKER ── */
.ticker-wrap {
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  padding:0.8rem 0;
  position:relative;
  z-index:2;
}

.ticker-track {
  display:flex;
  gap:3rem;
  white-space:nowrap;
  animation:ticker 30s linear infinite;
}

.ticker-item {
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-dim);
  display:flex;
  align-items:center;
  gap:0.8rem;
}

.ticker-dot { color:var(--gold); font-size:0.5rem; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── STATS BAND ── */
.stats-band {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.stat-item {
  padding:2.5rem 2rem;
  text-align:center;
  border-right:1px solid var(--border-soft);
  transition:background 0.3s;
}

.stat-item:last-child { border-right:none; }
.stat-item:hover { background:rgba(201,168,76,0.04); }

.stat-num {
  font-family:'Cormorant Garamond',serif;
  font-size:2.8rem;
  font-weight:600;
  color:var(--gold);
  line-height:1;
  display:block;
}

.stat-label {
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:0.4rem;
  display:block;
}

/* ── CARDS ── */
.card-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--border-soft); border:1px solid var(--border-soft); }
.card-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; background:var(--border-soft); border:1px solid var(--border-soft); }
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5px; background:var(--border-soft); border:1px solid var(--border-soft); }

.card {
  background:var(--surface);
  padding:2.5rem;
  position:relative;
  overflow:hidden;
  transition:background 0.3s;
}

.card:hover { background:var(--panel); }

.card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-100%);
  transition:transform 0.4s ease;
}

.card:hover::before { transform:translateX(0); }

.card-icon { font-size:2rem; margin-bottom:1.2rem; display:block; }
.card-num { font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:700; color:rgba(201,168,76,0.08); position:absolute; top:1.5rem; right:1.8rem; line-height:1; pointer-events:none; }
.card-title { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:0.6rem; letter-spacing:0.02em; }
.card-desc { font-size:0.85rem; color:var(--muted); line-height:1.7; margin-bottom:1.5rem; }

.card-features { list-style:none; display:flex; flex-direction:column; gap:0.4rem; }
.card-features li { font-size:0.78rem; color:var(--muted); display:flex; align-items:flex-start; gap:0.6rem; line-height:1.4; }
.card-features li::before { content:'—'; color:var(--gold); font-size:0.7rem; flex-shrink:0; margin-top:0.1rem; }

/* ── PRICING ── */
.pricing-tabs { display:flex; gap:0; margin-bottom:3rem; border:1px solid var(--border-soft); width:fit-content; flex-wrap:wrap; }

.tab-btn {
  background:transparent;
  border:none;
  color:var(--muted);
  padding:0.75rem 1.8rem;
  font-family:'Syne',sans-serif;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  border-right:1px solid var(--border-soft);
  transition:background 0.2s, color 0.2s;
}

.tab-btn:last-child { border-right:none; }
.tab-btn:hover { color:var(--text); background:rgba(255,255,255,0.03); }
.tab-btn.active { background:var(--gold); color:var(--obsidian); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); }
.pricing-grid.three-col { grid-template-columns:repeat(3,1fr); }
.pricing-grid.two-col { grid-template-columns:repeat(2,1fr); }

.price-card { background:var(--surface); padding:2.5rem 2rem; position:relative; transition:background 0.3s; }
.price-card.featured { background:var(--panel); border-top:2px solid var(--gold); }
.price-card:hover { background:var(--panel); }
.price-badge { font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--obsidian); background:var(--gold); padding:0.25rem 0.7rem; display:inline-block; margin-bottom:1.2rem; }
.price-plan { font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
.price-amount { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:600; color:var(--white); line-height:1; margin-bottom:0.2rem; }
.price-amount sup { font-size:1.2rem; vertical-align:top; margin-top:0.6rem; display:inline-block; color:var(--gold); }
.price-period { font-size:0.75rem; color:var(--muted); margin-bottom:1.8rem; }
.price-divider { height:1px; background:var(--border-soft); margin-bottom:1.5rem; }
.price-features { list-style:none; display:flex; flex-direction:column; gap:0.55rem; margin-bottom:2rem; }
.price-features li { font-size:0.82rem; color:var(--muted); display:flex; align-items:flex-start; gap:0.6rem; line-height:1.4; }
.price-features li .check { color:var(--gold); flex-shrink:0; font-size:0.75rem; margin-top:0.1rem; }
.price-cta { display:block; text-align:center; padding:0.75rem; font-family:'Syne',sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; border:1px solid var(--border-soft); color:var(--text); transition:border-color 0.2s, color 0.2s, background 0.2s; }
.price-cta:hover, .price-card.featured .price-cta { border-color:var(--gold); color:var(--gold); }
.price-card.featured .price-cta:hover { background:var(--gold); color:var(--obsidian); }

/* ── FORM ── */
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-label { font-size:0.65rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.form-input, .form-select, .form-textarea { background:var(--surface); border:1px solid var(--border-soft); color:var(--text); padding:0.85rem 1rem; font-family:'Syne',sans-serif; font-size:0.88rem; outline:none; transition:border-color 0.2s; width:100%; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--gold); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--muted); opacity:0.5; }
.form-textarea { resize:vertical; min-height:120px; }
.form-select option { background:var(--surface); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── SPEC TABLE ── */
.spec-table { border:1px solid var(--border-soft); }
.spec-row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--border-soft); transition:background 0.2s; }
.spec-row:last-child { border-bottom:none; }
.spec-row:hover { background:rgba(201,168,76,0.04); }
.spec-key { padding:1rem 1.4rem; font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border-right:1px solid var(--border-soft); }
.spec-val { padding:1rem 1.4rem; font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--text); }
.spec-val .hl { color:var(--gold); }

/* ── CTA BAND ── */
.cta-band {
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:5rem 2rem;
  text-align:center;
  position:relative;
  z-index:2;
  overflow:hidden;
}

.cta-band::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201,168,76,0.05), transparent);
  pointer-events:none;
}

.cta-band h2 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2rem,5vw,3.5rem); color:var(--white); margin-bottom:1rem; }
.cta-band h2 em { font-style:italic; color:var(--gold-light); }
.cta-band p { font-size:1rem; color:var(--muted); max-width:500px; margin:0 auto 2.5rem; line-height:1.7; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── MOTTO ── */
.motto-block {
  background:var(--deep);
  border-left:3px solid var(--gold);
  padding:2.5rem 3rem;
  margin:3rem 0;
}

.motto-block blockquote {
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;
  font-weight:300;
  font-style:italic;
  color:var(--white);
  line-height:1.4;
  margin-bottom:0.8rem;
}

.motto-block cite {
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.2em;
  color:var(--gold-dim);
  text-transform:uppercase;
  font-style:normal;
}

/* ── PING BADGE ── */
.ping-badge {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:rgba(201,168,76,0.08);
  border:1px solid var(--border);
  padding:0.4rem 1rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.2em;
  color:var(--gold);
  margin-bottom:2rem;
}

.ping-dot { width:6px; height:6px; background:#4ade80; border-radius:50%; animation:pulse-green 2s ease-in-out infinite; }
@keyframes pulse-green { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid var(--border-soft); }
.faq-item:first-child { border-top:1px solid var(--border-soft); }

.faq-question {
  width:100%;
  background:none;
  border:none;
  color:var(--white);
  font-family:'Syne',sans-serif;
  font-size:0.95rem;
  font-weight:600;
  text-align:left;
  padding:1.5rem 0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  transition:color 0.2s;
}

.faq-question:hover { color:var(--gold-light); }
.faq-icon { color:var(--gold); font-size:1.2rem; transition:transform 0.3s; flex-shrink:0; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

.faq-answer {
  overflow:hidden;
  max-height:0;
  transition:max-height 0.4s ease;
}

.faq-answer-inner {
  padding-bottom:1.5rem;
  font-size:0.88rem;
  color:var(--muted);
  line-height:1.8;
}

/* ── FOOTER ── */
footer {
  background:var(--deep);
  border-top:1px solid var(--border-soft);
  position:relative;
  z-index:2;
}

.footer-main {
  max-width:1260px;
  margin:0 auto;
  padding:4rem 2rem 3rem;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
}

.footer-brand { }
.footer-logo { font-family:'Cormorant Garamond',serif; font-weight:700; font-size:2rem; color:var(--gold); display:block; margin-bottom:0.3rem; }
.footer-tagline { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.2em; color:var(--muted); text-transform:uppercase; margin-bottom:1.2rem; }
.footer-desc { font-size:0.85rem; color:var(--muted); line-height:1.7; max-width:280px; margin-bottom:1.5rem; }

.footer-status {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  letter-spacing:0.15em;
  color:#4ade80;
  text-transform:uppercase;
}

.footer-col-title { font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--text); margin-bottom:1.2rem; }

.footer-links { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }

.footer-bottom {
  border-top:1px solid var(--border-soft);
  padding:1.5rem 2rem;
  max-width:1260px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}

.footer-bottom p { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); letter-spacing:0.1em; }
.footer-bottom-links { display:flex; gap:2rem; list-style:none; }
.footer-bottom-links a { font-size:0.65rem; color:var(--muted); text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; transition:color 0.2s; }
.footer-bottom-links a:hover { color:var(--gold); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

.fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  nav { padding:1.2rem 2rem; }
  .page-hero { padding:9rem 2rem 4rem; }
  .footer-main { grid-template-columns:1fr 1fr; gap:2rem; }
}

@media(max-width:768px) {
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; flex-direction:column; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(8,11,16,0.98); align-items:center; justify-content:center; gap:2rem; }
  .nav-links.open { display:flex; }
  .nav-links > li > a { font-size:1.2rem; }
  .nav-dropdown { padding-top: 8px; position:static; opacity:1; pointer-events:all; transform:none; border:none; background:transparent; }
  .nav-toggle { display:flex; }
  .stats-band { grid-template-columns:repeat(2,1fr); }
  .card-grid-3, .card-grid-4 { grid-template-columns:1fr; }
  .card-grid-2 { grid-template-columns:1fr; }
  .pricing-grid, .pricing-grid.three-col { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .page-hero { padding:8rem 1.5rem 3rem; }
  .section-inner { padding:4rem 1.5rem; }
}


/* ═══════════════════════════════════════════════════
   ROBUST FADE-UP FALLBACK
   Pure CSS safety net: even if JS never runs,
   elements become visible after 1.2s via CSS animation.
═══════════════════════════════════════════════════ */
@keyframes cssReveal {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Override the base fade-up to use CSS animation as fallback */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  /* CSS fallback: reveal after 1.2s if JS doesn't add .visible */
  animation: cssReveal 0.6s ease 1.2s both;
}

/* When JS adds .visible, override the CSS animation */
.fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Hero elements: use forwards not both so they're visible before/after anim */
.hero-eyebrow,
.hero-heading,
.hero-sub,
.hero-buttons,
.ping-badge,
.scroll-hint {
  animation-fill-mode: forwards !important;
  opacity: 1;
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-up.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .hero-eyebrow,.hero-heading,.hero-sub,.hero-buttons,.ping-badge,.scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}