/* ==========================================================================
   HORIZON LUNA — "Gilded Midnight"
   Luxury celestial art-deco · dark aubergine + metallic gold · no white
   Mobile-first. All motion is autonomous or scroll-driven (no cursor FX).
   ========================================================================== */

:root{
  /* Purples — from near-black aubergine to lavender */
  --ink-0:#0a0613;
  --ink-1:#110a1f;
  --ink-2:#190f2d;
  --ink-3:#231441;
  --ink-4:#2f1b55;
  --purple:#57309c;
  --purple-soft:#8d6ad1;
  --lav:#c7b3ec;

  /* Metallic golds */
  --gold-1:#6e5420;
  --gold-2:#a37e2f;
  --gold-3:#c9a24b;
  --gold-4:#e6c878;
  --gold-5:#f6e7b8;

  --text:#ecdfc0;            /* champagne — never white */
  --muted:#b2a2cf;           /* dusty lavender */
  --dim:#8b7aad;

  --line:rgba(201,162,75,.20);
  --line-strong:rgba(201,162,75,.45);

  --grad-gold:linear-gradient(105deg,#8a6a2b 0%,#c9a24b 22%,#f6e7b8 50%,#c9a24b 78%,#8a6a2b 100%);
  --grad-btn:linear-gradient(135deg,#9c7a2e 0%,#d8b45e 45%,#f0dda0 60%,#c9a24b 100%);

  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-deco:'Cinzel',Georgia,serif;
  --font-body:'Jost','Trebuchet MS',sans-serif;

  --container:72rem;
  --header-h:4.5rem;
  --ease:cubic-bezier(.22,.84,.32,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-weight:300;
  background:var(--ink-0);
  color:var(--text);
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg{max-width:100%;display:block}
a{color:var(--gold-4);text-decoration:none;transition:color .3s}
a:hover{color:var(--gold-5)}
ul{list-style:none}
strong{font-weight:500}
::selection{background:var(--purple);color:var(--gold-5)}

/* Subtle vignette over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(87,48,156,.10),transparent 60%),
    radial-gradient(ellipse at 50% -10%,rgba(201,162,75,.05),transparent 55%);
}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:48rem){.container{padding-inline:2rem}}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.06;color:var(--gold-5)}
h1{font-size:clamp(2.7rem,10vw,6.2rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,5.5vw,3.4rem)}
h3{font-size:1.45rem;line-height:1.2}
h4{font-family:var(--font-deco);font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3)}
p{max-width:44rem}
.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--muted);font-weight:300}
.center{text-align:center}
.center p{margin-inline:auto}

/* Metallic shimmer text — animates on its own */
.gold-text{
  background:var(--grad-gold);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:220% center}}

.eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--font-deco);font-size:.72rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-3);
  margin-bottom:1.1rem;
}
.eyebrow::before,.center .eyebrow::after{content:"";height:1px;width:2.2rem;background:linear-gradient(90deg,transparent,var(--gold-3))}
.center .eyebrow::after{background:linear-gradient(90deg,var(--gold-3),transparent)}

.section-head{margin-bottom:3rem;max-width:46rem}
.section-head.center{margin-inline:auto}
.section-head h2{margin-bottom:1rem}
.section-head p{color:var(--muted)}

/* Art-deco separator ornament */
.deco-sep{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 1.25rem;color:var(--gold-3)}
.deco-sep::before,.deco-sep::after{content:"";height:1px;flex:1;max-width:16rem;background:linear-gradient(90deg,transparent,var(--line-strong))}
.deco-sep::after{background:linear-gradient(90deg,var(--line-strong),transparent)}
.deco-sep span{font-size:.9rem;animation:starPulse 4s ease-in-out infinite}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-deco);font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:1rem 1.9rem;border:1px solid transparent;cursor:pointer;
  transition:background-position .6s var(--ease),border-color .3s,color .3s,box-shadow .4s;
  position:relative;
}
.btn--gold{
  background:var(--grad-btn);background-size:200% auto;
  color:var(--ink-1);box-shadow:0 0 24px rgba(201,162,75,.25);
}
.btn--gold:hover{background-position:100% center;color:var(--ink-0)}
.btn--ghost{border-color:var(--line-strong);color:var(--gold-4);background:rgba(201,162,75,.04)}
.btn--ghost:hover{border-color:var(--gold-4);color:var(--gold-5)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);
  background:rgba(10,6,19,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .4s;
}
.site-header.scrolled{background:rgba(10,6,19,.92)}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-family:var(--font-deco);font-weight:700;font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--grad-gold);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmer 9s linear infinite}
.logo-sub{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);font-weight:400}
.header-right{display:flex;align-items:center;gap:1rem}

.lang-switch{display:flex;gap:.15rem;border:1px solid var(--line);padding:.2rem}
.lang-switch a{font-family:var(--font-deco);font-size:.62rem;font-weight:600;letter-spacing:.15em;padding:.3rem .55rem;color:var(--dim)}
.lang-switch a.active{background:rgba(201,162,75,.14);color:var(--gold-4)}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:2.9rem;height:2.9rem;flex-shrink:0;cursor:pointer;padding:.65rem;
  border:1px solid var(--gold-3);background:rgba(201,162,75,.14);
  box-shadow:0 0 12px rgba(201,162,75,.22);
}
.nav-toggle span{display:block;height:2px;border-radius:1px;background:var(--gold-4);transition:transform .35s var(--ease),opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Narrow phones: tighten the header row so the menu button never crowds the edge */
.header-inner{gap:.6rem}
.header-right{gap:.6rem;flex-shrink:0}
.logo{min-width:0}
@media(max-width:26.25rem){ /* ≤420px */
  .container{padding-inline:1rem}
  .logo-name{font-size:.9rem}
  .logo-sub{font-size:.5rem;letter-spacing:.22em}
  .lang-switch a{padding:.3rem .45rem}
}

.main-nav{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:49;
  background:rgba(13,8,24,.97);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;padding:1rem 1.25rem 1.75rem;gap:.1rem;
  transform:translateY(-115%);transition:transform .5s var(--ease);
}
.main-nav.open{transform:translateY(0)}
.main-nav a{
  font-family:var(--font-deco);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:.85rem .25rem;border-bottom:1px solid rgba(201,162,75,.08);
}
.main-nav a:hover{color:var(--gold-4)}
.main-nav a.active{color:var(--gold-4)}
.main-nav .header-cta{margin-top:1rem;border-bottom:none}
/* The gold CTA keeps dark text — beat the .main-nav link color rules */
.main-nav a.btn--gold{color:var(--ink-0);font-weight:700}
.main-nav a.btn--gold:hover{color:#000}

@media(min-width:72rem){
  .nav-toggle{display:none}
  .main-nav{
    position:static;transform:none;flex-direction:row;align-items:center;gap:1.15rem;
    background:none;border:none;padding:0;
  }
  .main-nav a{font-size:.63rem;letter-spacing:.14em;padding:.4rem 0;border-bottom:none;position:relative;white-space:nowrap}
  .main-nav a:not(.header-cta)::after{
    content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
    background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
  }
  .main-nav a.active::after{transform:scaleX(1)}
  .main-nav .header-cta{margin:0 0 0 .3rem;padding:.68rem 1.15rem;flex-shrink:0}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + 4.5rem) 0 5rem;
  min-height:88vh;display:flex;align-items:center;
  background:
    radial-gradient(ellipse 90% 60% at 70% 10%,rgba(87,48,156,.32),transparent 60%),
    radial-gradient(ellipse 70% 55% at 15% 85%,rgba(58,29,110,.35),transparent 65%),
    var(--ink-0);
}
.hero--sub{min-height:52vh;padding-bottom:3.5rem}
.hero-inner{position:relative;z-index:3;max-width:52rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-deco);font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-4);border:1px solid var(--line);padding:.55rem 1.1rem;margin-bottom:2rem;
  background:rgba(25,15,45,.5);
}
.hero-badge::before{content:"✦";animation:starPulse 3s ease-in-out infinite}
.hero h1 span{display:block}
.hero .lead{margin-top:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}

/* Aurora drift — autonomous */
.aurora{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.aurora i:nth-child(1){width:44rem;height:24rem;left:-12rem;top:-6rem;background:radial-gradient(circle,#3c2470,transparent 70%);animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:34rem;height:20rem;right:-10rem;top:18%;background:radial-gradient(circle,rgba(163,126,47,.5),transparent 70%);animation:drift2 27s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:38rem;height:22rem;left:20%;bottom:-10rem;background:radial-gradient(circle,#2a1858,transparent 70%);animation:drift3 31s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(9rem,5rem) scale(1.15)}}
@keyframes drift2{to{transform:translate(-7rem,7rem) scale(.9)}}
@keyframes drift3{to{transform:translate(6rem,-6rem) scale(1.1)}}

/* Starfield (spans injected by JS) — stars breathe, drift and sparkle */
.starfield{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.starfield b{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--gold-5);box-shadow:0 0 6px 1px rgba(230,200,120,.8);
  animation:starLife var(--dur,6s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes starLife{
  0%{opacity:.06;transform:translate(0,0) scale(.55)}
  55%{opacity:.95}
  100%{opacity:.35;transform:translate(var(--dx,14px),var(--dy,-10px)) scale(1.05)}
}
/* four-point diamond sparkles */
.starfield s{
  position:absolute;text-decoration:none;color:var(--gold-4);
  font-size:var(--fs,11px);line-height:1;
  text-shadow:0 0 8px rgba(230,200,120,.9),0 0 22px rgba(201,162,75,.5);
  animation:sparkTurn var(--dur,9s) ease-in-out var(--delay,0s) infinite;
}
.starfield s::before{content:"✦"}
@keyframes sparkTurn{
  0%,100%{opacity:.1;transform:rotate(0deg) scale(.7)}
  50%{opacity:1;transform:rotate(180deg) scale(1.1)}
}
/* shooting stars — a gold streak slips across every so often */
.starfield u{
  position:absolute;width:140px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(246,231,184,.95),transparent);
  filter:drop-shadow(0 0 4px rgba(230,200,120,.8));
  animation:shoot var(--dur,11s) linear var(--delay,0s) infinite;
}
@keyframes shoot{
  0%{opacity:0;transform:rotate(-16deg) translateX(0)}
  1.5%{opacity:.9}
  6%{opacity:0;transform:rotate(-16deg) translateX(46vw)}
  100%{opacity:0;transform:rotate(-16deg) translateX(46vw)}
}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}}
@keyframes starPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* Orbit ornament — gilded moon with rotating rings */
.orbit{
  position:absolute;z-index:2;pointer-events:none;
  width:min(30rem,84vw);aspect-ratio:1;
  right:50%;transform:translateX(50%);top:6rem;opacity:.34;
}
.orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-strong);animation:spin 40s linear infinite}
.orbit .ring--dash{inset:12%;border-style:dashed;border-color:var(--line);animation:spinBack 55s linear infinite}
.orbit .ring--tilt{inset:-6%;border-color:rgba(141,106,209,.25);transform:rotateX(60deg);animation:none}
.orbit .moon{
  position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#f0dda0 0%,#c9a24b 34%,#57309c 78%,#190f2d 100%);
  box-shadow:0 0 60px rgba(201,162,75,.35),inset -14px -12px 40px rgba(10,6,19,.7);
  animation:moonGlow 6s ease-in-out infinite alternate;
}
.orbit .sat{position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4px;border-radius:50%;
  background:var(--gold-4);box-shadow:0 0 12px 3px rgba(230,200,120,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}
@keyframes moonGlow{from{box-shadow:0 0 40px rgba(201,162,75,.25),inset -14px -12px 40px rgba(10,6,19,.7)}
  to{box-shadow:0 0 90px rgba(201,162,75,.5),inset -14px -12px 40px rgba(10,6,19,.7)}}

@media(min-width:64rem){
  .orbit{right:-4rem;top:50%;transform:translateY(-50%);opacity:.85;width:34rem}
  .hero-inner{max-width:44rem}
}

/* ---------- Marquee tape (static under scroll; bleeds past both edges) ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-1),var(--ink-0));
  padding:1.1rem 0;transform:rotate(-1.2deg);
  width:calc(100% + 8rem);margin-left:-4rem;
  margin-block:2.5rem -1rem;position:relative;z-index:3;
}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 30s linear infinite}
.marquee-track span{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.2rem,3.4vw,1.8rem);white-space:nowrap;color:var(--dim);
  display:flex;align-items:center;gap:3rem;
}
.marquee-track span::after{content:"✦";font-style:normal;font-size:.8em;color:var(--gold-3)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:5rem 0;position:relative}
.section--alt{background:linear-gradient(180deg,var(--ink-1) 0%,var(--ink-0) 100%);border-block:1px solid rgba(201,162,75,.09)}
@media(min-width:64rem){.section{padding:7.5rem 0}}

/* ---------- Grid + cards ---------- */
.grid{display:grid;gap:1.25rem}
@media(min-width:48rem){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{
  position:relative;background:linear-gradient(160deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line);padding:2rem 1.6rem;
}
.card::before,.card::after{
  content:"";position:absolute;width:1.1rem;height:1.1rem;border:1px solid var(--gold-3);opacity:.75;
}
.card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.card h3{margin:.9rem 0 .6rem}
.card p{color:var(--muted);font-size:.97rem}
.card-icon{
  width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;border:1px solid var(--line-strong);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(201,162,75,.22),rgba(25,15,45,.6));
}
.card-more{display:inline-block;margin-top:1.1rem;font-family:var(--font-deco);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}

/* ---------- Stats ---------- */
/* One row on every screen size — every number sits on the same level */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));align-items:start;gap:1rem;margin-top:4rem;text-align:center}
.stat strong{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.55rem,5.5vw,4rem);line-height:1;white-space:nowrap;
  background:var(--grad-gold);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmer 8s linear infinite;
}
.stat span{display:block;margin-top:.55rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%,rgba(87,48,156,.5),transparent 65%),
    linear-gradient(160deg,var(--ink-3),var(--ink-1));
  padding:3.6rem 1.5rem;
}
.cta-band::before,.cta-band::after{content:"";position:absolute;width:2rem;height:2rem;border:1px solid var(--gold-3)}
.cta-band::before{top:.6rem;left:.6rem;border-right:none;border-bottom:none}
.cta-band::after{bottom:.6rem;right:.6rem;border-left:none;border-top:none}
.cta-band h2{margin-bottom:.8rem}
.cta-band p{color:var(--muted);margin-inline:auto}
.cta-band .hero-actions{justify-content:center;margin-top:2rem}
@media(min-width:64rem){.cta-band{padding:5rem 3rem}}

/* ---------- Pricing ---------- */
.price-grid{display:grid;gap:1.5rem}
@media(min-width:48rem){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:75rem){.price-grid{grid-template-columns:repeat(4,1fr)}}
.price-card{display:flex;flex-direction:column;gap:0;padding:2.2rem 1.7rem}
.price-card .pkg{font-family:var(--font-deco);font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:.8rem}
.price-card h3{margin:0 0 .4rem}
.price{
  font-family:var(--font-display);font-weight:600;font-size:1.9rem;line-height:1.1;margin-bottom:1rem;
  background:var(--grad-gold);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmer 8s linear infinite;
}
.price small{font-size:.9rem;letter-spacing:.02em}
.vat-note{font-family:var(--font-body);font-size:.78rem;font-weight:300;letter-spacing:.05em;color:var(--dim);margin:-.7rem 0 1rem}
.premium-price .vat-note{display:block;margin:.35rem 0 0}
.price-card>p{margin-bottom:1.2rem}
.feature-list{margin:0 0 1.6rem;display:flex;flex-direction:column;gap:.5rem}
.feature-list li{position:relative;padding-left:1.4rem;font-size:.94rem;color:var(--muted)}
.feature-list li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold-3);font-size:.7rem;line-height:1.9}
.price-card .btn{margin-top:auto}
.price-card--popular{border-color:var(--gold-3);box-shadow:0 0 40px rgba(201,162,75,.14)}
.popular-tag{
  position:absolute;top:-1px;right:-1px;
  font-family:var(--font-deco);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:var(--grad-btn);color:var(--ink-1);padding:.4rem .9rem;
}

/* ---------- Packages v2: START / GROW / SELL, selector, checklist, process ---------- */
@media(min-width:64rem){.price-grid--3{grid-template-columns:repeat(3,1fr)}}
.pack-for{color:var(--muted);font-size:.95rem;margin-bottom:1rem;min-height:3.1em}
.price-typ{font-size:.8rem;color:var(--dim);margin:-.6rem 0 1rem;letter-spacing:.03em}
.pkg-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem;padding:.75rem 0;margin-bottom:1.1rem;
  border-block:1px solid var(--line);font-size:.9rem;color:var(--muted);
}
.pkg-facts b{display:block;font-family:var(--font-deco);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3);font-weight:600}
.cta-micro{font-size:.75rem;color:var(--dim);text-align:center;margin-top:.7rem;letter-spacing:.03em}
.factors{margin-top:1.5rem}
.factors h3{font-size:1.25rem;margin-bottom:.3rem}
.factor-list{display:flex;flex-wrap:wrap;gap:.5rem .7rem;margin:.9rem 0}
.factor-list li{border:1px solid var(--line);padding:.35rem .8rem;font-size:.85rem;color:var(--muted)}
.promise{font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--gold-4);margin:0}

.sel-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.sel-btn{
  font-family:var(--font-body);font-size:.95rem;font-weight:400;color:var(--text);
  background:rgba(25,15,45,.6);border:1px solid var(--line);padding:.8rem 1.1rem;cursor:pointer;
  transition:border-color .3s,background .3s,color .3s;
}
.sel-btn:hover{border-color:var(--line-strong)}
.sel-btn.active{border-color:var(--gold-3);background:rgba(201,162,75,.14);color:var(--gold-5)}
.sel-btn:focus-visible{outline:2px solid var(--gold-3);outline-offset:2px}
.sel-result{display:none}
.sel-result.show{display:block}
.sel-result .rec{font-family:var(--font-deco);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-3);margin-bottom:.4rem;display:block}
.sel-result h3{margin:.2rem 0 .5rem}
.sel-result .hero-actions{margin-top:1.2rem}

.checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1rem;margin:1.4rem 0 1.6rem}
@media(min-width:48rem){.checks{grid-template-columns:repeat(4,1fr)}}
.checks li{font-size:.97rem;color:var(--muted)}
.checks li::before{content:"✓";color:var(--gold-4);margin-right:.55rem;font-weight:500}

.process{display:grid;gap:1.25rem}
@media(min-width:48rem){.process{grid-template-columns:repeat(3,1fr)}}
.process .card b{display:block;font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--gold-4);font-weight:500;line-height:1}
.process .card h3{margin:.6rem 0 .5rem}

.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;gap:.8rem;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;background:rgba(10,6,19,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease);
}
.sticky-cta.show{transform:none}
.sticky-cta span{font-size:.8rem;color:var(--muted)}
.sticky-cta .btn{padding:.75rem 1.1rem;font-size:.7rem;white-space:nowrap}
@media(min-width:64rem){.sticky-cta{display:none}}

/* Premium panel */
.premium{
  position:relative;border:1px solid var(--gold-2);
  background:
    radial-gradient(ellipse 80% 100% at 50% -30%,rgba(87,48,156,.45),transparent 60%),
    linear-gradient(165deg,#241541,#120a20);
  padding:2.8rem 1.6rem;overflow:hidden;
}
.premium::before{content:"";position:absolute;inset:.55rem;border:1px solid rgba(201,162,75,.25);pointer-events:none}
.premium-head{text-align:center;max-width:40rem;margin:0 auto 2.6rem}
.premium-head .tag{
  display:inline-block;font-family:var(--font-deco);font-size:.62rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;background:var(--grad-btn);color:var(--ink-1);padding:.45rem 1.1rem;margin-bottom:1.3rem;
}
.premium-head h3{font-size:clamp(1.8rem,5vw,2.6rem)}
.premium-head p{color:var(--muted);margin-top:.9rem}
.premium-price{margin-top:1.4rem;font-family:var(--font-display)}
.premium-price em{display:block;font-style:normal;font-size:.8rem;font-family:var(--font-deco);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.premium-price strong{
  font-size:clamp(2.4rem,7vw,3.6rem);font-weight:600;
  background:var(--grad-gold);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shimmer 7s linear infinite;
}
.premium-grid{display:grid;gap:2rem}
@media(min-width:48rem){.premium-grid{grid-template-columns:repeat(2,1fr)}}
.premium-grid h4{margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.premium-cta{text-align:center;margin-top:2.6rem}
@media(min-width:64rem){.premium{padding:4rem 3.5rem}}

/* ---------- Examples ---------- */
.example-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.example-visual{
  position:relative;height:11rem;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 120% at 50% -30%,rgba(87,48,156,.55),transparent 70%),
    linear-gradient(160deg,var(--ink-3),var(--ink-1));
}
.example-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(246,231,184,.09) 48%,transparent 62%);
  background-size:250% 100%;animation:sheen 6s linear infinite;
}
/* both endpoints hold the band fully off-canvas, so the loop restart is invisible */
@keyframes sheen{
  0%{background-position:220% 0}
  55%{background-position:-120% 0}
  100%{background-position:-120% 0}
}
.example-visual span{
  font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.6rem;color:var(--gold-4);
}
.example-body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.example-body .pkg{font-family:var(--font-deco);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.example-body h3{margin:.5rem 0 .5rem;font-size:1.3rem}
.example-body p{font-size:.94rem;color:var(--muted);margin-bottom:1.2rem}
.soon{
  margin-top:auto;align-self:flex-start;
  font-family:var(--font-deco);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-3);border:1px dashed var(--line-strong);padding:.45rem .9rem;
  animation:starPulse 3.5s ease-in-out infinite;
}

/* ---------- FAQ ---------- */
.faq-list{max-width:50rem;margin-inline:auto;display:flex;flex-direction:column;gap:.9rem}
.faq-item{border:1px solid var(--line);background:linear-gradient(160deg,var(--ink-2),var(--ink-1))}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.4rem;font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--gold-5);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"✦";flex-shrink:0;color:var(--gold-3);font-size:.8rem;transition:transform .45s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-item .faq-a{padding:0 1.4rem 1.4rem;color:var(--muted);font-size:.97rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:2.5rem}
@media(min-width:64rem){.contact-grid{grid-template-columns:1.25fr 1fr;gap:3.5rem}}
.form-panel{padding:2.2rem 1.6rem}
@media(min-width:48rem){.form-panel{padding:2.6rem 2.2rem}}
.form-panel h3{margin-bottom:1.6rem}
.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--font-deco);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3);margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;background:rgba(10,6,19,.6);border:1px solid var(--line);
  color:var(--text);font-family:var(--font-body);font-size:1rem;font-weight:300;
  padding:.85rem 1rem;transition:border-color .3s,box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-3);box-shadow:0 0 0 3px rgba(201,162,75,.14);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-3) 50%),linear-gradient(135deg,var(--gold-3) 50%,transparent 50%);
  background-position:calc(100% - 1.2rem) 55%,calc(100% - .9rem) 55%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--ink-1);color:var(--text)}
.field textarea{min-height:9rem;resize:vertical}
.form-note{font-size:.8rem;color:var(--dim);margin-top:1rem}
.form-success,.form-limit{
  display:none;border:1px solid var(--gold-3);background:rgba(201,162,75,.08);
  color:var(--gold-4);padding:1rem 1.2rem;margin-bottom:1.4rem;font-size:.95rem;
}
.form-success.show,.form-limit.show{display:block}

.info-stack{display:flex;flex-direction:column;gap:1rem}
.info-item{display:flex;gap:1.1rem;align-items:flex-start;padding:1.4rem 1.5rem}
.info-item .card-icon{flex-shrink:0;width:2.6rem;height:2.6rem;font-size:1.05rem}
.info-item h4{margin-bottom:.2rem}
.info-item p,.info-item a{font-size:.97rem;color:var(--muted);word-break:break-word}
.info-item a:hover{color:var(--gold-4)}

/* Steps timeline */
.steps{margin-top:2.2rem;position:relative;padding-left:1.6rem}
.steps::before{content:"";position:absolute;left:.35rem;top:.4rem;bottom:.4rem;width:1px;
  background:linear-gradient(180deg,var(--gold-3),rgba(201,162,75,.05))}
.step{position:relative;padding-bottom:1.6rem}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-1.6rem;top:.42rem;width:9px;height:9px;border-radius:50%;
  background:var(--gold-3);box-shadow:0 0 10px rgba(201,162,75,.7)}
.step h4{color:var(--gold-4);letter-spacing:.14em;margin-bottom:.25rem}
.step p{font-size:.94rem;color:var(--muted)}

/* ---------- Prose (privacy) ---------- */
.prose{max-width:46rem}
.prose h2{font-size:1.5rem;margin:2.6rem 0 .8rem;color:var(--gold-4)}
.prose p,.prose li{color:var(--muted)}
.prose ul{margin:.8rem 0;display:flex;flex-direction:column;gap:.4rem}
.prose ul li{position:relative;padding-left:1.3rem}
.prose ul li::before{content:"✦";position:absolute;left:0;color:var(--gold-3);font-size:.65rem;line-height:2}
.prose .updated{font-size:.85rem;color:var(--dim);font-style:italic}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-0),#070410);
  padding:4rem 0 2rem;position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;left:50%;top:-14rem;width:34rem;height:20rem;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(87,48,156,.22),transparent 70%);pointer-events:none;
}
.footer-grid{display:grid;gap:2.5rem;position:relative}
@media(min-width:48rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand p{color:var(--dim);font-size:.94rem;margin-top:.9rem;max-width:20rem}
.footer-col h4{margin-bottom:1.1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.55rem}
.footer-col a,.footer-col span{font-size:.94rem;color:var(--muted)}
.footer-col a:hover{color:var(--gold-4)}
.footer-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(201,162,75,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.8rem;color:var(--dim);position:relative;
}

/* ---------- Scroll reveals ---------- */
[data-reveal]{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform}
[data-reveal="up"]{transform:translateY(2.2rem)}
[data-reveal="left"]{transform:translateX(-2.5rem)}
[data-reveal="right"]{transform:translateX(2.5rem)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal].in-view{opacity:1;transform:none}

/* Hairline that draws itself on scroll */
.draw-line{height:1px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.draw-line.in-view{transform:scaleX(1)}

/* ---------- Scroll-driven effects ---------- */
/* thin gold progress hairline riding on top of the header */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:var(--grad-gold);background-size:220% auto;
  transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 8px rgba(201,162,75,.55);
  animation:shimmer 7s linear infinite;
}
/* layers the scroll handler moves at different speeds */
.px{will-change:transform}

/* ---------- Intro (page-open) — a five-act celestial overture ----------
   Act I   (0.0–0.9s)  a gold flare blooms out of darkness, stars wake up
   Act II  (0.4–2.4s)  three orbit rings draw themselves around the void
   Act III (1.3–3.0s)  the gilded moon rises into the rings, halo swells
   Act IV  (2.3–3.8s)  the wordmark condenses out of light, hairlines extend
   Act V   (4.7–5.8s)  the curtain dissolves upward into the page          */
.intro{
  position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 34%,rgba(87,48,156,.38),transparent 65%),
    var(--ink-0);
  animation:introOut 1.1s var(--ease) 4.7s forwards;
}
.intro .starfield{opacity:0;animation:introFade 1.6s ease .35s forwards}
.intro-flare{
  position:absolute;left:50%;top:50%;width:46rem;height:46rem;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(246,231,184,.9) 0%,rgba(201,162,75,.35) 18%,rgba(87,48,156,.18) 42%,transparent 68%);
  animation:introFlare 2.4s var(--ease) .1s both;
}
/* moon pinned to the exact centre of the screen; wordmark hangs below it */
.intro-scene{
  position:absolute;left:50%;top:50%;translate:-50% -50%; /* individual property: JS flight animates `transform` without disturbing this */
  width:clamp(13rem,44vw,19rem);aspect-ratio:1;
}
.intro-text{
  position:absolute;left:50%;top:calc(50% + clamp(6.5rem,22vw,9.5rem) + 2.2rem);
  transform:translateX(-50%);
}
.intro-orbits{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;overflow:visible} /* explicit size + escape the global svg{max-width:100%} cap */
.intro-orbits .io{
  fill:none;stroke:var(--gold-3);stroke-width:.55;opacity:.65;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:ioDraw 1.9s var(--ease) forwards;
}
.intro-orbits .io-1{animation-delay:.45s}
.intro-orbits .io-2{stroke:rgba(141,106,209,.8);stroke-dasharray:2 3;stroke-dashoffset:100;animation-delay:.75s}
.intro-orbits .io-3{stroke:rgba(201,162,75,.45);animation-delay:1.05s}
.intro-spinner{
  position:absolute;inset:-6.5%;border-radius:50%;opacity:0;
  animation:introFade 1s ease 1.5s forwards,spin 7s linear 1.5s infinite;
}
.intro-spinner .sat{
  position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--gold-4);box-shadow:0 0 14px 4px rgba(230,200,120,.85);
}
.intro-moon{
  position:absolute;inset:24%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#f0dda0 0%,#c9a24b 38%,#57309c 80%,#190f2d 100%);
  box-shadow:0 0 60px rgba(201,162,75,.45),inset -12px -10px 34px rgba(10,6,19,.72);
  animation:introMoon 1.9s var(--ease) 1.3s both,moonGlow 5s ease-in-out 3.2s infinite alternate;
}
.intro-text{display:flex;align-items:center;gap:1.2rem;max-width:92vw}
.intro-line{
  height:1px;width:clamp(2rem,10vw,6rem);flex-shrink:1;
  background:linear-gradient(90deg,transparent,var(--gold-3));
  transform:scaleX(0);transform-origin:right;
  animation:introLine 1.2s var(--ease) 2.75s forwards;
}
.intro-line--r{background:linear-gradient(90deg,var(--gold-3),transparent);transform-origin:left}
.intro-name{
  font-family:var(--font-deco);font-weight:700;font-size:clamp(1.2rem,5vw,2rem);
  letter-spacing:.42em;text-transform:uppercase;text-indent:.42em;text-align:center;white-space:nowrap;
  background:var(--grad-gold);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:introName 1.5s var(--ease) 2.3s both,shimmer 7s linear infinite;
}
.intro-sub{
  font-family:var(--font-deco);font-size:.62rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;text-indent:.34em;color:var(--dim);text-align:center;
  animation:introSub 1.3s var(--ease) 2.9s both;
}
@keyframes introFlare{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  22%{opacity:1}
  60%{transform:translate(-50%,-50%) scale(1);opacity:.5}
  100%{transform:translate(-50%,-50%) scale(1.15);opacity:.22}
}
@keyframes ioDraw{to{stroke-dashoffset:0}}
@keyframes introFade{to{opacity:1}}
@keyframes introMoon{0%{opacity:0;transform:translateY(38%) scale(.5)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes introName{
  0%{opacity:0;letter-spacing:.9em;text-indent:.9em;filter:blur(10px)}
  100%{opacity:1;letter-spacing:.42em;text-indent:.42em;filter:none}
}
@keyframes introSub{from{opacity:0;transform:translateY(.8rem);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes introLine{to{transform:scaleX(1)}}
/* plain fade so the flying moon's landing position stays true */
@keyframes introOut{
  0%{opacity:1}
  100%{opacity:0;visibility:hidden}
}

/* Moon handoff: the page's own moon stays dark until the intro moon lands on it */
body.has-intro .orbit .moon{opacity:0}
body.has-intro.moon-landed .orbit .moon{opacity:1;transition:opacity .5s ease}

/* Hero waits for the curtain, then plays its own entrance */
body.has-intro .hero [data-reveal]{transition-delay:calc(var(--d,0s) + 4.7s)}
/* Skip the intro on repeat visits within the same session */
body.no-intro .intro{display:none}
body.no-intro .hero [data-reveal]{transition-delay:var(--d,0s)}

/* ---------- Page transitions (between sites) ----------
   Enter: a dark veil fades away as soon as the page paints (pure CSS, no flash).
   Exit: JS raises .page-veil before following an internal link.            */
body::before{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  background:var(--ink-0);opacity:0;
  animation:pageIn .55s ease-out both;
}
@keyframes pageIn{from{opacity:1}to{opacity:0}}
.page-veil{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  background:var(--ink-0);opacity:0;transition:opacity .3s ease;
}
.page-veil.on{opacity:1;pointer-events:auto}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-reveal]{opacity:1;transform:none}
  .intro{display:none}
  html{scroll-behavior:auto}
}