/* ===========================================================
   AstroNumera — Home (galaxy redesign)
   All rules scoped under body.h-home to avoid affecting
   other pages that share landing.css.
   =========================================================== */

.h-home {
  --h-gold: #e3c884;
  --h-gold-light: #f6e8bd;
  --h-gold-deep: #c9a227;
  --h-text: #ece7f5;
  --h-dim: #a79fc4;
  --h-card: rgba(24, 22, 52, 0.55);
  --h-border: rgba(227, 200, 132, 0.16);
  --h-border-soft: rgba(160, 150, 200, 0.14);
  background: #07060f;
  color: var(--h-text);
  overflow-x: hidden;
}

/* ---- Galaxy background layers (fixed) ---- */
.h-galaxy-bg {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 55% 45% at 80% 26%, rgba(168, 85, 247, 0.30), transparent 60%),
    radial-gradient(ellipse 42% 38% at 93% 34%, rgba(236, 72, 153, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 50% at 16% 18%, rgba(99, 91, 235, 0.26), transparent 62%),
    radial-gradient(ellipse 75% 55% at 50% 102%, rgba(79, 70, 199, 0.20), transparent 72%),
    linear-gradient(180deg, #0a0822 0%, #0b0a26 38%, #08070f 100%);
}
.h-stars {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 74% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 42% 38%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.6px 1.6px at 88% 52%, rgba(255,245,220,0.85), transparent),
    radial-gradient(1px 1px at 12% 64%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.3px 1.3px at 60% 72%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 30% 88%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, rgba(255,250,235,0.8), transparent),
    radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.2px 1.2px at 6% 42%, rgba(255,255,255,0.6), transparent);
  background-repeat: repeat;
  background-size: 540px 540px, 620px 620px, 480px 480px, 700px 700px, 560px 560px, 600px 600px, 520px 520px, 660px 660px, 580px 580px, 500px 500px;
  animation: hTwinkle 6s ease-in-out infinite alternate;
}
@keyframes hTwinkle { from { opacity: 0.65; } to { opacity: 1; } }

.h-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.h-eyebrow {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--h-gold); font-weight: 600; margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.h-eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--h-gold)); }
.h-gold { color: var(--h-gold); }

/* ---- Buttons ---- */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 8px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer;
  text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  border: 1px solid transparent; white-space: nowrap;
}
.h-btn-primary {
  background: linear-gradient(135deg, var(--h-gold-light), var(--h-gold-deep));
  color: #1a1206; box-shadow: 0 6px 22px rgba(201, 162, 39, 0.28);
}
.h-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201, 162, 39, 0.42); }
.h-btn-ghost { background: rgba(255,255,255,0.03); color: var(--h-text); border-color: var(--h-border); }
.h-btn-ghost:hover { border-color: var(--h-gold); color: var(--h-gold); transform: translateY(-2px); }
.h-btn-lg { padding: 16px 32px; font-size: 15px; }

/* ---- Nav overrides (homepage only) ---- */
.h-home .l-nav { background: rgba(8, 7, 18, 0.55) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--h-border-soft) !important; }
.h-home .l-nav.scrolled { background: rgba(8, 7, 18, 0.92) !important; }
.h-home .l-nav-logo { display: flex; align-items: center; gap: 11px; }
.h-nav-emblem { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.h-nav-brand { display: flex; flex-direction: column; line-height: 1.05; }
.h-nav-brand .h-nav-name { font-family: "Cinzel", serif; font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--h-text); }
.h-nav-brand .h-nav-tag { font-size: 8.5px; letter-spacing: 1.5px; color: var(--h-dim); text-transform: uppercase; margin-top: 2px; }

/* ===================== HERO ===================== */
.h-home .l-hero, .h-hero {
  position: relative; min-height: auto;
  padding: 130px 0 70px; overflow: visible;
  background: none;
}
.h-hero-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  text-align: left; /* override .l-hero text-align:center from landing.css on desktop too */
}
.h-hero-text { position: relative; z-index: 3; text-align: left; }
.h-hero-title {
  font-family: "Cormorant Garamond", "Georgia", serif; font-weight: 500;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.12; margin: 0 0 22px;
  letter-spacing: 0.3px; color: var(--h-text);
}
.h-hero-desc { font-size: 16px; line-height: 1.75; color: var(--h-dim); max-width: 480px; margin: 0 0 30px; }
.h-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero emblem */
.h-hero-emblem {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; max-width: 520px; margin: 0 auto; width: 100%;
}
.h-emblem-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(227, 200, 132, 0.22));
  position: relative; z-index: 2;
}
.h-emblem-ring {
  position: absolute; inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 60%, rgba(168, 85, 247, 0.10) 72%, transparent 78%);
  z-index: 1;
}
.h-emblem-ring::before, .h-emblem-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(227, 200, 132, 0.12);
}
.h-emblem-ring::after { inset: 9%; border-color: rgba(168, 85, 247, 0.14); }
.h-emblem-spin {
  position: absolute; inset: -2%; border-radius: 50%;
  border: 1px dashed rgba(227, 200, 132, 0.10);
  animation: hSpin 60s linear infinite;
}
@keyframes hSpin { to { transform: rotate(360deg); } }

/* Floating number particles (kept) */
.h-home .l-num-particle {
  position: absolute; font-family: "Cinzel", serif; font-weight: 600;
  color: var(--h-gold); pointer-events: none; z-index: 1;
  animation: hFloat linear infinite;
  text-shadow: 0 0 14px rgba(227, 200, 132, 0.4);
}
@keyframes hFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-26px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ===================== SERVICES ===================== */
.h-services { padding: 30px 0 20px; position: relative; z-index: 2; }
.h-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.h-card {
  background: var(--h-card); border: 1px solid var(--h-border-soft);
  border-radius: 16px; padding: 26px 20px; text-align: center;
  text-decoration: none; display: flex; flex-direction: column; align-items: center;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
.h-card:hover { transform: translateY(-6px); border-color: var(--h-border); background: rgba(34, 30, 66, 0.6); }
.h-card-icon {
  width: 66px; height: 66px; border-radius: 50%;
  border: 1px solid var(--h-border); display: flex; align-items: center; justify-content: center;
  color: var(--h-gold); margin-bottom: 18px;
  background: radial-gradient(circle, rgba(227,200,132,0.08), transparent 70%);
}
.h-card-title { font-family: "Cinzel", serif; font-size: 16px; font-weight: 600; letter-spacing: 0.8px; color: var(--h-text); margin: 0 0 9px; text-transform: uppercase; }
.h-card-desc { font-size: 12.5px; line-height: 1.6; color: var(--h-dim); margin: 0 0 16px; flex: 1; }
.h-card-link { font-size: 12.5px; font-weight: 600; color: var(--h-gold); letter-spacing: 0.5px; }
.h-card:hover .h-card-link { color: var(--h-gold-light); }

/* ===================== BENEFITS ===================== */
.h-benefits { padding: 70px 0 60px; position: relative; z-index: 2; }
.h-section-head {
  text-align: center; font-family: "Cinzel", serif; font-size: 15px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--h-gold); margin-bottom: 44px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.h-section-head::before, .h-section-head::after { content: ""; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--h-gold), transparent); }
.h-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.h-benefit { display: flex; gap: 15px; align-items: flex-start; }
.h-benefit-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--h-border); display: flex; align-items: center; justify-content: center;
  color: var(--h-gold); background: rgba(227,200,132,0.05);
}
.h-benefit-title { font-size: 14px; font-weight: 700; color: var(--h-text); margin: 0 0 6px; letter-spacing: 0.3px; }
.h-benefit-desc { font-size: 12.5px; line-height: 1.6; color: var(--h-dim); margin: 0; }

/* ===================== ABOUT (text left, portal right) ===================== */
.h-about {
  position: relative; z-index: 2; overflow: hidden;
  min-height: 560px; display: flex; align-items: center; padding: 50px 0;
}
.h-about-photo {
  position: absolute; top: 0;
  right: max(32px, calc((100% - 1180px) / 2 + 32px));
  height: 100%; width: auto; aspect-ratio: 1300 / 867;
  background: url('about-portal.jpg') center center / cover no-repeat;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, #000 56%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, #000 56%, #000 84%, transparent 100%);
}
.h-about::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,6,15,0.6) 0%, transparent 14%, transparent 84%, rgba(7,6,15,0.8) 100%);
}
.h-about-inner { position: relative; z-index: 2; width: 100%; }
.h-about-text { max-width: 430px; }
.h-h2 { font-family: "Cormorant Garamond", "Georgia", serif; font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; letter-spacing: 0.3px; margin: 0 0 22px; color: var(--h-text); }
.h-about-text p { font-size: 15px; line-height: 1.8; color: var(--h-dim); margin: 0 0 28px; }

/* ===================== CTA BANNER (full-width band, no box) ===================== */
.h-cta {
  position: relative; z-index: 2;
  margin: 0; padding: 32px 0 16px;
  background:
    radial-gradient(ellipse 42% 135% at 9% 50%, rgba(99, 91, 235, 0.32), transparent 62%),
    radial-gradient(ellipse 52% 145% at 94% 50%, rgba(236, 72, 153, 0.26), transparent 62%),
    linear-gradient(180deg, rgba(18,14,48,0) 0%, rgba(18,14,48,0.85) 16%, rgba(12,10,34,0.9) 84%, rgba(12,10,34,0) 100%);
}
.h-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.2px 1.2px at 28% 66%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 45% 24%, rgba(255,245,220,0.85), transparent),
    radial-gradient(1.6px 1.6px at 62% 72%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 78% 34%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.3px 1.3px at 88% 60%, rgba(255,250,235,0.92), transparent),
    radial-gradient(1px 1px at 34% 86%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 70% 16%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 54% 48%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.4px 1.4px at 20% 52%, rgba(255,255,255,0.78), transparent);
  background-repeat: repeat;
  background-size: 280px 200px, 320px 240px, 260px 180px, 300px 220px, 340px 200px,
                   290px 210px, 270px 190px, 310px 230px, 250px 170px, 330px 210px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: hTwinkle 5s ease-in-out infinite alternate;
}
.h-cta .h-container { position: relative; z-index: 1; }
.h-cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap;
  /* Chinese wraps the title/sub to fewer lines than ID/EN, so their block is much shorter —
     without a fixed height here, align-items:center re-centers around that shorter height and
     the whole row (including the form on the right) visibly jumps position on language switch.
     Locking min-height to the tallest (ID/EN) case keeps the form's vertical position constant
     across all three languages. */
  min-height: 150px;
}
.h-cta-title { font-family: "Cormorant Garamond", "Georgia", serif; font-size: clamp(26px, 3vw, 40px); font-weight: 500; color: var(--h-text); margin: 0 0 10px; max-width: 620px; line-height: 1.22; letter-spacing: 0.3px; }
.h-cta-sub { font-size: 14px; color: var(--h-dim); margin: 0; max-width: 560px; line-height: 1.6; }

/* ---- Newsletter form (replaces the old single CTA button) ---- */
/* Wraps the form + status message together as one flex item, so the status text (which is
   text-align:right) aligns against the form's own width — not the full section width, which
   made it look disconnected/off-center relative to the input+button above it. */
.h-newsletter-col { flex-shrink: 0; }
.h-newsletter { display: flex; align-items: center; gap: 10px; }
.h-newsletter[hidden] { display: none; }
.h-newsletter-input {
  background: rgba(255,255,255,0.05); border: 1px solid var(--h-border); border-radius: 8px;
  color: var(--h-text); font-size: 14px; padding: 13px 16px; outline: none; min-width: 240px;
  font-family: "Montserrat", "Segoe UI", sans-serif; transition: border-color 0.18s;
}
.h-newsletter-input::placeholder { color: var(--h-dim); }
.h-newsletter-input:focus { border-color: var(--h-gold); }
.h-newsletter-btn { flex-shrink: 0; }
.h-newsletter-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.h-newsletter-success {
  display: flex; align-items: center; gap: 8px;
  background: rgba(107,201,107,0.08); border: 1px solid rgba(107,201,107,0.35); border-radius: 8px;
  color: #6bc96b; font-size: 14px; padding: 13px 16px;
  font-family: "Montserrat", "Segoe UI", sans-serif;
}
.h-newsletter-success[hidden] { display: none; }
.h-newsletter-status {
  margin: 6px 0 0; font-size: 13px; text-align: left; min-height: 1.4em;
  position: relative; z-index: 1;
}
.h-newsletter-status.success { color: #6bc96b; }
.h-newsletter-status.error { color: #e0644a; }
@media (max-width: 640px) {
  .h-newsletter { flex-direction: column; align-items: stretch; width: 100%; }
  .h-newsletter-input { min-width: 0; }
  .h-newsletter-status { text-align: left; }
}

/* ===================== FOOTER ===================== */
.h-footer { position: relative; z-index: 2; border-top: 1px solid var(--h-border-soft); background: rgba(7, 6, 14, 0.6); padding: 56px 0 26px; }
.h-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.h-footer-brand .l-nav-logo { margin-bottom: 16px; }
.h-footer-desc { font-size: 13px; line-height: 1.7; color: var(--h-dim); margin: 0 0 18px; max-width: 260px; }
.h-socials { display: flex; gap: 12px; }
.h-socials a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--h-border-soft); display: flex; align-items: center; justify-content: center; color: var(--h-dim); transition: color 0.18s, border-color 0.18s; }
.h-socials a:hover { color: var(--h-gold); border-color: var(--h-gold); }
.h-footer-col h4 { font-family: "Cinzel", serif; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--h-gold); margin: 0 0 16px; }
.h-footer-col ul { list-style: none; padding: 0; margin: 0; }
.h-footer-col li { margin-bottom: 10px; }
.h-footer-col a, .h-footer-col span { font-size: 13px; color: var(--h-dim); text-decoration: none; transition: color 0.16s; }
.h-footer-col a:hover { color: var(--h-gold); }
.h-footer-bottom { text-align: center; font-size: 12px; color: var(--h-dim); margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--h-border-soft); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 940px) {
  .h-hero-inner { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .h-hero-text { order: 2; }
  .h-hero-emblem { order: 1; max-width: 320px; margin: 0 auto 4px; }
  .h-cards { grid-template-columns: repeat(2, 1fr); }
  .h-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .h-about { min-height: auto; flex-direction: column; align-items: stretch; padding: 28px 0 30px; }
  .h-about-inner { order: 1; }
  .h-about-photo {
    position: relative; order: 2;
    width: calc(100% - 36px); height: auto; margin: 64px auto 0;
    right: auto; align-self: center;
    aspect-ratio: 1300 / 867;
    background-position: center center; background-size: cover;
    border-radius: 16px;
    -webkit-mask-image: none; mask-image: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  .h-about-text { max-width: 100%; display: flex; flex-direction: column; }
  .h-about-text p { margin-bottom: 0; }
  .h-about-text .h-btn { margin-top: 18px; display: flex; }
  .h-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .h-cta { padding: 46px 0; }
  .h-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 22px; }
}
@media (max-width: 560px) {
  .h-container, .h-hero-inner { padding: 0 18px; }
  .h-home .l-hero, .h-hero { padding: 108px 0 50px; }
  .h-cards { grid-template-columns: 1fr; }
  .h-benefits-grid { grid-template-columns: 1fr; }
  .h-footer-grid { grid-template-columns: 1fr; }
  .h-nav-brand .h-nav-tag { display: none; }
}

/* ===========================================================
   LIGHT MODE — "Dawn Celestial"
   Active when user toggles theme (no data-theme="dark").
   =========================================================== */
html:not([data-theme="dark"]) .h-home {
  --h-gold: #9a7b1e;
  --h-gold-light: #b8902a;
  --h-gold-deep: #7d6212;
  --h-text: #2a2114;
  --h-dim: #6d5f48;
  --h-card: rgba(255, 252, 245, 0.85);
  --h-border: rgba(154, 123, 30, 0.30);
  --h-border-soft: rgba(120, 100, 50, 0.20);
  background: #f4ecdc;
  color: #2a2114;
}

/* Dawn sky background */
html:not([data-theme="dark"]) .h-galaxy-bg {
  background:
    radial-gradient(ellipse 55% 45% at 80% 26%, rgba(168, 130, 225, 0.16), transparent 60%),
    radial-gradient(ellipse 42% 38% at 93% 34%, rgba(236, 160, 190, 0.15), transparent 58%),
    radial-gradient(ellipse 55% 50% at 16% 18%, rgba(140, 150, 235, 0.13), transparent 62%),
    radial-gradient(ellipse 75% 55% at 50% 102%, rgba(220, 195, 130, 0.22), transparent 72%),
    linear-gradient(180deg, #f8f1e3 0%, #f4ecdd 40%, #efe6d3 100%);
}
/* Hide white stars on light bg; dawn gradient carries the mood */
html:not([data-theme="dark"]) .h-stars { display: none; }

/* Nav — light translucent */
html:not([data-theme="dark"]) .h-home .l-nav {
  background: rgba(250, 245, 235, 0.68) !important;
  border-bottom: 1px solid rgba(154, 123, 30, 0.18) !important;
}
html:not([data-theme="dark"]) .h-home .l-nav.scrolled {
  background: rgba(250, 245, 235, 0.93) !important;
}

/* Emblem images need a dark medallion in light mode: screen blend
   washes out on a light page, so disable it and frame the gold
   artwork on a solid dark coin. */
html:not([data-theme="dark"]) .h-home .l-nav-emblem {
  mix-blend-mode: normal;
  background: #0e0b24;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(40, 30, 80, 0.22);
}
html:not([data-theme="dark"]) .h-hero-emblem::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle, #0d0a20 56%, #161232 100%);
  box-shadow: 0 12px 50px rgba(40, 30, 80, 0.25);
  z-index: 1;
}

/* Cards & surfaces */
html:not([data-theme="dark"]) .h-card:hover { background: rgba(255, 255, 255, 0.95); }

/* About portal — light mode: present as a framed "window" card instead of a
   dark image bleeding into the cream (the edge-fade looks muddy on light bg).
   A rounded card + soft shadow + hairline gold border + warm glow makes the
   dark portal read as a deliberate "window to the cosmos". */
html:not([data-theme="dark"]) .h-about::after { display: none; }
html:not([data-theme="dark"]) .h-about-photo {
  -webkit-mask-image: none; mask-image: none;
  border-radius: 20px;
  box-shadow:
    0 26px 70px rgba(58, 42, 104, 0.24),
    0 0 64px rgba(201, 162, 39, 0.12),
    0 0 0 1px rgba(154, 123, 30, 0.32);
}
/* Vertical-centered framed card only on desktop (photo is absolute there).
   Center with top/height insets — NOT transform — because GSAP animates the
   photo's transform (scale) and would bake a translate into the inline style
   that survives a theme toggle, shifting the image out of place. */
@media (min-width: 941px) {
  html:not([data-theme="dark"]) .h-about-photo {
    top: 14%; height: 72%;
  }
}

/* CTA banner — light */
html:not([data-theme="dark"]) .h-cta {
  background:
    radial-gradient(ellipse 42% 135% at 9% 50%, rgba(150, 150, 235, 0.20), transparent 62%),
    radial-gradient(ellipse 52% 145% at 94% 50%, rgba(236, 160, 190, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(251,246,236,0) 0%, rgba(250,243,228,0.85) 16%, rgba(247,239,222,0.9) 84%, rgba(244,236,220,0) 100%);
}
html:not([data-theme="dark"]) .h-cta::before { display: none; }

/* Footer — light */
html:not([data-theme="dark"]) .h-footer {
  background: rgba(250, 245, 235, 0.72);
}