/* =========================================================
   NOVA BADZLINA GLOBAL — "ROYAL MIDNIGHT COQUETTE"
   Midnight navy · electric orchid · powder pink · liquid gold
   Pure CSS. No JavaScript, no frameworks, no external fonts.
   Earlier themes kept as style-celestial-BACKUP.css and
   style-midnight-BACKUP.css
   ========================================================= */

:root{
  /* --- the canvas --- */
  --midnight:    #060a1f;
  --midnight-2:  #0b1233;
  --midnight-3:  #141d47;

  /* --- atmosphere --- */
  --orchid:        #a855f7;
  --orchid-bright: #c77dff;
  --orchid-deep:   #6d28d9;

  /* --- coquette pinks, palest to deepest --- */
  --pink-soft:  #ffe6ee;   /* soft pink  */
  --pink:       #f8cddd;   /* pink       */
  --pink-deep:  #e58aad;   /* deep pink  */
  --pink-dark:  #c2447a;   /* dark pink  */

  /* --- rose gold --- */
  --rosegold:      #e9b8a4;
  --rosegold-deep: #c88a72;
  --foil-rose: linear-gradient(100deg,
            #b9705e 0%, #edc0ac 16%, #fff0e8 30%, #dda691 44%,
            #c2806b 58%, #f4d2c2 74%, #fff2ea 88%, #c88a72 100%);

  /* --- liquid white gold --- */
  --gold:        #e8d5a3;
  --gold-bright: #fffdf2;
  --gold-deep:   #c9ad6a;
  --foil: linear-gradient(100deg,
            #b99b5e 0%, #f0e2bd 16%, #fffdf5 30%, #d9c48d 44%,
            #b99b5e 58%, #f5ead0 74%, #fffdf5 88%, #c9ad6a 100%);
  /* warm gold — heavier, less white than the foil above */
  --foil-gold: linear-gradient(100deg,
            #9c7b2c 0%, #e0c76a 16%, #f7e6a8 30%, #c9a53f 44%,
            #a8842f 58%, #eed58c 74%, #fbefc0 88%, #b8942f 100%);

  /* --- text --- */
  --white:      #ffffff;
  --white-soft: rgba(255,255,255,.80);
  --white-mute: rgba(255,255,255,.55);

  /* --- lines --- */
  --line:        rgba(248,205,221,.22);
  --line-strong: rgba(248,205,221,.45);

  --radius:    18px;
  --radius-sm: 12px;

  --glow-orchid: 0 0 40px -6px rgba(168,85,247,.55), 0 0 90px -20px rgba(168,85,247,.45);
  --glow-pink:   0 0 30px -8px rgba(248,205,221,.6);
  --glow-gold:   0 0 0 1px rgba(232,213,163,.35), 0 14px 40px -14px rgba(232,213,163,.35);
  --shadow:      0 28px 70px -30px rgba(0,0,0,.9);
  --shadow-soft: 0 16px 40px -22px rgba(0,0,0,.8);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.8,.3,1);

  /* Headlines: dramatic high-contrast serif */
  --font-display:"Instrument Serif","Didot","Bodoni MT",Cambria,Georgia,serif;
  /* Decorative: airy French script — used sparingly */
  --font-script:  "Pinyon Script","Monotype Corsiva","Lucida Handwriting",
                  "Segoe Script","Brush Script MT","Apple Chancery",cursive;
  /* Everyday: structural geometric sans */
  --font-body:"Inter","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; background:var(--midnight); }

body{
  margin:0;
  color:var(--white-soft);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.8;
  letter-spacing:.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(58% 40% at 12% 4%,  rgba(168,85,247,.26), transparent 66%),
    radial-gradient(52% 38% at 90% 12%, rgba(109,40,217,.24), transparent 66%),
    radial-gradient(46% 34% at 50% 52%, rgba(248,205,221,.07), transparent 70%),
    radial-gradient(60% 42% at 84% 92%, rgba(168,85,247,.20), transparent 68%),
    linear-gradient(178deg, var(--midnight) 0%, var(--midnight-2) 38%, #080d26 72%, var(--midnight) 100%);
  background-attachment:fixed;
}

/* faint starfield */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px   at 34% 62%, rgba(248,205,221,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 12%, rgba(232,213,163,.5), transparent 60%),
    radial-gradient(1px 1px   at 76% 48%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 78%, rgba(199,125,255,.5), transparent 60%),
    radial-gradient(1px 1px   at 44% 88%, rgba(255,255,255,.4), transparent 60%);
  animation:twinkle 8s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.35; } to{ opacity:1; } }
body > *{ position:relative; z-index:1; }

/* ---------------------------------------------------------
   THE VELVET SPLIT ENTRANCE
   Two panels hold the screen, then part like theatre curtains.
   The base state is already OPEN, so if the animation never
   runs the page is never trapped behind them.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html::before,html::after{
    content:""; position:fixed; top:0; bottom:0; width:51%;
    z-index:9998; pointer-events:none;
    background:linear-gradient(180deg,#0a0f2a,#060a1f 55%,#0a0f2a);
    box-shadow:0 0 60px 10px rgba(0,0,0,.8);
  }
  html::before{
    left:0; transform:translateX(-101%);
    border-right:1px solid rgba(232,213,163,.25);
    animation:curtainL 1.5s cubic-bezier(.76,0,.24,1) 1.9s both;
  }
  html::after{
    right:0; transform:translateX(101%);
    border-left:1px solid rgba(232,213,163,.25);
    animation:curtainR 1.5s cubic-bezier(.76,0,.24,1) 1.9s both;
  }
  @keyframes curtainL{ from{ transform:translateX(0); } to{ transform:translateX(-101%); } }
  @keyframes curtainR{ from{ transform:translateX(0); } to{ transform:translateX(101%); } }

  /* the brand name glowing between the curtains */
  body::after{
    content:"Nova Badzlina Global";
    position:fixed; inset:0; z-index:9999; pointer-events:none;
    display:grid; place-items:center; text-align:center;
    font-family:var(--font-script);
    font-size:clamp(2rem,6vw,4.2rem);
    background:var(--foil);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 26px rgba(232,213,163,.55));
    opacity:0; visibility:hidden;
    animation:curtainName 2.7s ease-in-out both;
  }
  @keyframes curtainName{
    0%{ opacity:0; visibility:visible; letter-spacing:.28em; }
    20%{ opacity:1; visibility:visible; letter-spacing:.06em; }
    58%{ opacity:1; visibility:visible; letter-spacing:.06em; }
    88%{ opacity:0; visibility:visible; letter-spacing:.02em; }
    100%{ opacity:0; visibility:hidden; }
  }
}

/* ================= TYPE ================= */
h1,h2,h3{
  font-family:var(--font-display);
  /* Instrument Serif is a display face: it wants a near-1.0 leading and
     negative tracking, exactly as the brief sets out. At 400 it reads as
     editorial; bolding it would undo the whole point of the face. */
  font-weight:400; line-height:.98;
  letter-spacing:-.028em; margin:0 0 .5em;
  color:var(--white); text-wrap:balance;
}
h2{ font-size:clamp(2.1rem,4.8vw,3.6rem); }
h3{ font-size:1.28rem; }
h4{ font-family:var(--font-body); font-size:1rem; margin:0 0 .5em; color:var(--white); }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
strong{ color:var(--white); font-weight:600; }

/* liquid white gold text */
.grad{
  background:var(--foil); background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilsweep 8s ease-in-out infinite alternate;
}
@keyframes foilsweep{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

/* the tiny French script tag that floats above headings */
.eyebrow{
  font-family:var(--font-script);
  font-size:clamp(1.05rem,2vw,1.45rem);
  letter-spacing:.04em; text-transform:none; font-weight:400;
  color:var(--pink-soft); margin:0 0 .55em;
  text-shadow:0 0 22px rgba(255,230,238,.4);
}
.eyebrow::before{ content:"❦ "; color:var(--rosegold); font-size:.7em; }

/* ================= BUTTONS ================= */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 2rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  letter-spacing:.01em; text-transform:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s, border-color .35s, color .35s;
}
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%;
  width:45%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transition:left .7s var(--ease);
}
.btn:hover::after{ left:130%; }

.btn--primary{
  background:var(--foil); background-size:190% 100%;
  color:#2a1d05; box-shadow:var(--glow-gold);
}
.btn--primary:hover{
  transform:translateY(-3px); background-position:100% 50%;
  box-shadow:0 0 0 1px rgba(232,213,163,.6), 0 18px 50px -12px rgba(232,213,163,.5);
}
.btn--ghost{
  background:rgba(255,255,255,.04); color:var(--white);
  border-color:var(--line-strong);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  transform:translateY(-3px); color:var(--pink);
  border-color:var(--pink);
  box-shadow:var(--glow-pink), 0 0 44px -10px rgba(168,85,247,.5);
}
.btn--small{ padding:.7rem 1.35rem; font-size:.68rem; letter-spacing:.16em; }
.btn--full{ width:100%; }

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  /* a floating glass pill rather than a bar welded to the top edge */
  margin:.9rem auto 0; max-width:1240px; width:calc(100% - 1.8rem);
  padding:.75rem 1.1rem;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(248,205,221,.22);
}
.nav__brand{ display:flex; align-items:center; gap:.8rem; }
.nav__mark{
  position:relative;
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:50%;
  background:var(--foil); background-size:190% 100%;
  color:#2a1d05; font-family:var(--font-display);
  font-weight:700; font-size:.9rem;
  box-shadow:var(--glow-gold);
}
.nav__mark::after{
  content:""; position:absolute; inset:-5px;
  border:1px solid var(--rosegold); border-radius:50%;
}
.nav__name{
  display:block; line-height:1.25;
  font-family:var(--font-display);
  font-weight:700; letter-spacing:.12em; font-size:.9rem; color:var(--white);
}
.nav__name em{ font-style:normal; color:var(--pink-deep); }
/* the tagline — sits under the brand on every page */
.nav__name small{
  display:block; margin-top:.1rem;
  font-family:var(--font-script); font-weight:400;
  font-size:.92rem; letter-spacing:.02em; text-transform:none;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav__links{ display:flex; align-items:center; gap:clamp(.55rem,1.6vw,1.5rem); flex-wrap:wrap; }
.nav__links a{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white-mute); padding:.35rem 0;
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s, text-shadow .3s;
}
.nav__links a:hover{ color:var(--pink); border-bottom-color:var(--pink); text-shadow:0 0 18px rgba(248,205,221,.6); }
.nav__links a.is-active{ color:var(--gold); border-bottom-color:var(--gold); }
.nav__cta{
  padding:.6rem 1.35rem !important; border-radius:999px;
  border:1px solid var(--line-strong) !important;
  color:var(--white) !important; background:rgba(255,255,255,.05);
}
.nav__cta:hover{
  background:var(--foil); color:#2a1d05 !important;
  border-color:transparent !important; box-shadow:var(--glow-gold);
}

/* language switch */
.lang{
  display:inline-flex; border:1px solid var(--line-strong);
  border-radius:999px; overflow:hidden; background:rgba(255,255,255,.05);
}
.lang a{
  padding:.42rem .82rem; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  color:var(--white-mute); border-bottom:none !important;
  transition:background .3s, color .3s;
}
.lang a + a{ border-left:1px solid var(--line-strong); }
.lang a:hover{ background:rgba(168,85,247,.22); color:var(--pink); }
.lang a.is-on{ background:var(--foil); color:#2a1d05; }
.lang a.is-on:hover{ color:#2a1d05; }

/* ================= HERO ================= */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(4rem,10vw,8.5rem) clamp(1.2rem,4vw,2.75rem) clamp(3.5rem,8vw,6rem);
}
.hero--page{ padding-bottom:clamp(2.5rem,6vw,4rem); }

/* orchid stage lighting */
.hero__glow{
  position:absolute; inset:-25% -12% -10% -12%; pointer-events:none;
  background:
    radial-gradient(34% 40% at 20% 26%, rgba(168,85,247,.50), transparent 66%),
    radial-gradient(30% 36% at 82% 20%, rgba(199,125,255,.42), transparent 66%),
    radial-gradient(28% 32% at 56% 84%, rgba(248,205,221,.22), transparent 66%),
    radial-gradient(40% 44% at 12% 70%, rgba(109,40,217,.36), transparent 70%);
  filter:blur(28px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{   transform:translate3d(-3%,2%,0) scale(1.08); }
}
.hero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,7.2vw,5.4rem);
  font-weight:700; line-height:1.02; letter-spacing:-.028em;
  margin:0 0 .28em; color:var(--white);
  text-shadow:0 0 60px rgba(168,85,247,.4);
}
.hero__title--sm{ font-size:clamp(2rem,5.4vw,3.8rem); }
.hero__tag{
  font-family:var(--font-script);
  font-size:clamp(1.3rem,3vw,2.1rem);
  font-weight:400; color:var(--pink);
  margin:0 0 1.3rem; text-shadow:0 0 28px rgba(248,205,221,.4);
}
.hero__lede{
  max-width:60ch; color:var(--white-soft);
  font-size:clamp(.95rem,1.5vw,1.05rem); font-weight:300;
}

/* hero editorial portrait with orchid backlight */
.hero__grid{
  display:grid; grid-template-columns:1fr minmax(240px,380px);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__portrait{
  position:relative; margin:0; aspect-ratio:3/4;
  border-radius:200px 200px 20px 20px; overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 0 70px -10px rgba(168,85,247,.65), var(--shadow);
}
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero__portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(170deg, rgba(168,85,247,.28), transparent 42%, rgba(6,10,31,.55));
}
.hero__portrait figcaption{
  position:absolute; left:0; right:0; bottom:1.1rem; z-index:1; text-align:center;
  font-family:var(--font-script); font-size:1.5rem; color:var(--pink);
  text-shadow:0 2px 18px rgba(6,10,31,.9), 0 0 26px rgba(248,205,221,.45);
}

/* small French-script accent line — floats above a heading */
.script{
  font-family:var(--font-script);
  font-size:clamp(1.05rem,2vw,1.45rem);
  font-weight:400; letter-spacing:.02em; text-transform:none;
  color:var(--pink); margin:0 0 .3rem;
  text-shadow:0 0 24px rgba(248,205,221,.35);
}
.script--gold{ background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }

/* the motto — the personal line, in rose gold script above the headline */
.motto{
  font-family:var(--font-script);
  font-size:clamp(1.15rem,2.3vw,1.75rem);
  font-weight:400; letter-spacing:.02em; text-transform:none;
  margin:0 0 .45rem;
  background:var(--foil-rose); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilshift 9s ease-in-out infinite alternate;
}
@keyframes foilshift{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }
.footer__motto{
  margin:.35rem 0 0; font-family:var(--font-script);
  font-size:1.05rem; letter-spacing:.02em; text-transform:none;
  color:var(--rosegold);
}
/* where she actually is — on every page, under the motto */
.footer__loc{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:.9rem 0 0; padding:.45rem 1.1rem;
  border-radius:999px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white);
}
.footer__loc .pin{
  color:var(--pink); font-size:.85rem; line-height:1;
  text-shadow:0 0 12px rgba(248,205,221,.9);
}

.banner{
  display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.55rem 1.3rem; margin:0 0 1.6rem;
  border-radius:999px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
  font-size:.64rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
.banner__dot{
  width:7px; height:7px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 14px 2px rgba(248,205,221,.8);
}

.hero__pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.9rem 0 2.4rem; }
.hero__pills li{
  padding:.42rem 1.05rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white-mute);
  transition:border-color .35s, color .35s, box-shadow .35s, transform .35s var(--ease);
}
.hero__pills li:hover{
  border-color:var(--rosegold); color:var(--rosegold); transform:translateY(-3px);
  box-shadow:var(--glow-pink);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; margin:3.6rem 0 0; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.stats > div{ background:rgba(11,18,51,.85); padding:1.7rem 1.6rem; }
.stats dt{
  font-family:var(--font-script); font-size:1rem;
  letter-spacing:.02em; color:var(--rosegold); text-transform:none;
}
.stats dd{
  margin:.3rem 0 0; font-family:var(--font-display);
  font-size:1.7rem; font-weight:700; letter-spacing:-.02em; color:var(--white);
}

/* ================= MARQUEE ================= */
.marquee{
  overflow:hidden; padding:.9rem 0;
  background:linear-gradient(90deg, rgba(194,68,122,.20), rgba(233,184,164,.14) 32%, rgba(232,213,163,.14) 64%, rgba(168,85,247,.18));
  border-block:1px solid var(--line);
}
.marquee__track{ display:flex; gap:1.6rem; width:max-content; animation:scroll 48s linear infinite; }
.marquee__track span{
  font-size:.68rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--white-mute); white-space:nowrap;
}
.marquee__track span:nth-child(8n+1){ color:var(--pink-dark); }
.marquee__track span:nth-child(8n+3){ color:var(--rosegold); }
.marquee__track span:nth-child(8n+5){ color:var(--gold); }
.marquee__track span:nth-child(8n+7){ color:var(--pink); }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ================= SECTIONS ================= */
.section{
  padding:clamp(4.5rem,10vw,9rem) clamp(1.2rem,4vw,2.75rem);
  max-width:calc(var(--maxw) + 5rem); margin:0 auto;
}
.section--alt{
  max-width:none; position:relative;
  background:
    radial-gradient(48% 42% at 14% 8%,  rgba(168,85,247,.20), transparent 68%),
    radial-gradient(44% 38% at 88% 14%, rgba(109,40,217,.22), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border-block:1px solid var(--line);
}
.section--alt > *{ max-width:var(--maxw); margin-inline:auto; }

.section__head{ max-width:60ch; margin:0 auto clamp(3rem,6vw,4.75rem); text-align:center; }
.section__sub{ color:var(--white-soft); margin:0; font-weight:300; }
/* delicate coquette divider */
.section__head::after{
  content:"❦"; display:block; margin:2rem auto 0;
  width:230px; line-height:1; text-align:center;
  font-size:.85rem; color:var(--rosegold);
  background:
    linear-gradient(90deg, transparent, var(--pink-dark) 40%, var(--rosegold) 72%, var(--gold)) left center/88px 1px no-repeat,
    linear-gradient(90deg, var(--gold), var(--rosegold) 28%, var(--pink-dark) 60%, transparent) right center/88px 1px no-repeat;
}

.subhead{
  position:relative;
  display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap;
  max-width:var(--maxw); margin:4.5rem auto 1.9rem; padding-bottom:1.1rem;
  background:linear-gradient(90deg, var(--pink-dark), var(--rosegold) 22%, var(--gold) 46%, rgba(248,205,221,.14) 72%, transparent) bottom left/100% 1px no-repeat;
}
.subhead h3{ margin:0; font-size:1.5rem; }
.subhead span{
  font-family:var(--font-script); font-size:1.05rem;
  letter-spacing:.02em; color:var(--rosegold); text-transform:none; font-weight:400;
}

/* ---------- kinetic text reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero__title{ animation:kineticLoad 1.5s var(--ease) both .15s; }
  @keyframes kineticLoad{
    from{ opacity:0; transform:translateY(48px) scale(.97); filter:blur(16px); letter-spacing:.04em; }
    to{   opacity:1; transform:translateY(0) scale(1);      filter:blur(0);    letter-spacing:-.028em; }
  }
  @supports (animation-timeline: view()){
    .section__head h2,
    .subhead h3{
      animation:kinetic linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 24%;
    }
    @keyframes kinetic{
      from{ opacity:0; transform:translateY(58px); filter:blur(14px); }
      to{   opacity:1; transform:translateY(0);    filter:blur(0); }
    }
  }
}

/* ================= WHY / CARDS ================= */
.why{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.6rem; max-width:var(--maxw); margin-inline:auto;
}
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.6rem; max-width:var(--maxw); margin-inline:auto;
}
.cards--four{ grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); }

.why__item,
.card{
  position:relative; overflow:hidden;
  padding:2.2rem 2rem; border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s, background .45s;
}
.why__item{ padding-left:3.6rem; }
.why__item::before{
  content:"❦"; position:absolute; left:1.3rem; top:2.1rem;
  color:var(--rosegold); font-size:1rem;
}
.why__item--wide{ grid-column:1/-1; }
.why__item--wide::before{ content:"✦"; color:var(--pink-dark); text-shadow:0 0 16px rgba(194,68,122,.9); }

/* ---------- the cosmic hover glow ---------- */
.why__item:hover,
.card:hover,
.demo:hover,
.media:hover,
.tier:hover,
.account:hover,
.method:hover{
  transform:translateY(-7px);
  border-color:var(--pink);
  box-shadow:
    0 0 0 1px rgba(248,205,221,.5),
    0 0 46px -6px rgba(248,205,221,.35),
    0 0 90px -12px rgba(168,85,247,.65),
    var(--shadow);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--foil); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover::before{ transform:scaleX(1); }

.why__item h3,.card h3{ font-size:1.16rem; margin-bottom:.5rem; }
.why__item p,.card p{ color:var(--white-soft); font-size:.92rem; font-weight:300; margin:0 0 .6rem; }
.card__icon{ font-size:1.7rem; display:block; margin-bottom:.85rem; }
.card__list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.card__list li{
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .78rem; border-radius:999px;
  background:rgba(248,205,221,.10); color:var(--pink);
  border:1px solid rgba(248,205,221,.2);
}
.card__flag{
  display:inline-block; margin-bottom:.8rem;
  font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.26rem .7rem; border-radius:999px;
  background:rgba(232,213,163,.12); color:var(--gold);
  border:1px solid rgba(232,213,163,.25);
}

.closer{
  max-width:68ch; margin:3rem auto 0; text-align:center;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.2rem,2.5vw,1.65rem);
  color:var(--pink); line-height:1.45;
  text-shadow:0 0 30px rgba(248,205,221,.3);
}

/* ================= SLIDER ================= */
.slider{ position:relative; max-width:var(--maxw); margin-inline:auto; }
.slider__radio{ position:absolute; opacity:0; pointer-events:none; }
.slider__viewport{
  overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.slider__track{ display:flex; width:600%; transition:transform .8s var(--ease); }
#s1:checked ~ .slider__viewport .slider__track{ transform:translateX(0%); }
#s2:checked ~ .slider__viewport .slider__track{ transform:translateX(-16.6667%); }
#s3:checked ~ .slider__viewport .slider__track{ transform:translateX(-33.3333%); }
#s4:checked ~ .slider__viewport .slider__track{ transform:translateX(-50%); }
#s5:checked ~ .slider__viewport .slider__track{ transform:translateX(-66.6667%); }
#s6:checked ~ .slider__viewport .slider__track{ transform:translateX(-83.3333%); }

.slide{ width:16.6667%; display:grid; grid-template-columns:1.1fr .9fr; min-height:400px; }
.slide__body{ padding:clamp(1.8rem,4vw,3.2rem); padding-left:max(4.9rem,4vw); align-self:center; }
.slide__tag{
  font-family:var(--font-script); font-size:1.05rem;
  color:var(--gold); margin-bottom:.7rem; text-transform:none; letter-spacing:.02em;
}
.slide h3{ font-size:clamp(1.5rem,3vw,2.3rem); }
.slide p{ color:var(--white-soft); max-width:46ch; font-weight:300; }
.slide__meta{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.6rem; }
.slide__meta li{
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:999px;
  border:1px solid var(--line); color:var(--white-mute); background:rgba(255,255,255,.04);
}
.slide__art{ position:relative; display:grid; place-items:center; overflow:hidden; }
.slide__art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(1.6px 1.6px at 24% 28%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 20%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 46% 76%, rgba(255,255,255,.85), transparent 60%);
}
.slide__art span{
  font-family:var(--font-display); font-size:clamp(4rem,10vw,8rem);
  font-weight:700; letter-spacing:-.05em; color:rgba(255,255,255,.92);
  text-shadow:0 8px 50px rgba(0,0,0,.5);
}
.slide--1 .slide__art{ background:linear-gradient(150deg,#a855f7,#4c1d95); }
.slide--2 .slide__art{ background:linear-gradient(150deg,#e58aad,#6d28d9); }
.slide--3 .slide__art{ background:linear-gradient(150deg,#c9ad6a,#4c1d95); }
.slide--4 .slide__art{ background:linear-gradient(150deg,#7c3aed,#131a45); }
.slide--5 .slide__art{ background:linear-gradient(150deg,#f8cddd,#8b2f6d); }
.slide--6 .slide__art{ background:linear-gradient(150deg,#6d28d9,#0b1233); }

.slider__arrows{ position:absolute; left:0; right:0; top:0; bottom:calc(1.6rem + 7px); pointer-events:none; }
.slider__arrows .arrow{ display:none; }
.arrow{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%;
  border:1px solid var(--line-strong); background:rgba(6,10,31,.75);
  backdrop-filter:blur(8px); cursor:pointer; z-index:5;
  transition:background .35s, box-shadow .35s, border-color .35s;
}
.arrow::before{
  content:""; position:absolute; top:50%; left:50%;
  width:9px; height:9px;
  border-top:2px solid var(--pink); border-right:2px solid var(--pink);
}
.arrow--prev{ left:16px; }
.arrow--prev::before{ transform:translate(-35%,-50%) rotate(-135deg); }
.arrow--next{ right:16px; }
.arrow--next::before{ transform:translate(-65%,-50%) rotate(45deg); }
.arrow:hover{ background:rgba(168,85,247,.35); border-color:var(--pink); box-shadow:var(--glow-orchid); }

#s1:checked ~ .slider__arrows .arrow:nth-child(1),
#s1:checked ~ .slider__arrows .arrow:nth-child(2),
#s2:checked ~ .slider__arrows .arrow:nth-child(3),
#s2:checked ~ .slider__arrows .arrow:nth-child(4),
#s3:checked ~ .slider__arrows .arrow:nth-child(5),
#s3:checked ~ .slider__arrows .arrow:nth-child(6),
#s4:checked ~ .slider__arrows .arrow:nth-child(7),
#s4:checked ~ .slider__arrows .arrow:nth-child(8),
#s5:checked ~ .slider__arrows .arrow:nth-child(9),
#s5:checked ~ .slider__arrows .arrow:nth-child(10),
#s6:checked ~ .slider__arrows .arrow:nth-child(11),
#s6:checked ~ .slider__arrows .arrow:nth-child(12){ display:block; }

.slider__dots{ display:flex; justify-content:center; gap:.6rem; margin-top:1.6rem; }
.dot{
  width:30px; height:6px; border-radius:999px;
  background:rgba(248,205,221,.25); cursor:pointer;
  transition:background .4s, width .4s var(--ease), box-shadow .4s;
}
.dot:hover{ background:var(--pink); }
#s1:checked ~ .slider__dots .dot:nth-child(1),
#s2:checked ~ .slider__dots .dot:nth-child(2),
#s3:checked ~ .slider__dots .dot:nth-child(3),
#s4:checked ~ .slider__dots .dot:nth-child(4),
#s5:checked ~ .slider__dots .dot:nth-child(5),
#s6:checked ~ .slider__dots .dot:nth-child(6){
  background:var(--foil); width:54px; box-shadow:var(--glow-gold);
}

/* ================= THE VOICEOVER SALON ================= */
.audio-hero{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.6rem; max-width:var(--maxw); margin-inline:auto;
}
.audio-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:1.6rem; max-width:var(--maxw); margin-inline:auto;
}
.demo{
  position:relative; padding:1.8rem;
  border:1px solid rgba(248,205,221,.35); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.demo--feature{
  border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box, var(--foil) border-box;
  box-shadow:var(--shadow), 0 0 60px -18px rgba(232,213,163,.45);
}
.demo__top{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.4rem; }
.demo h3,.demo h4{ margin:0; font-family:var(--font-display); }
.demo h4{ font-size:1.15rem; font-weight:700; }
.demo__lang{
  font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.28rem .72rem; border-radius:999px; white-space:nowrap; border:1px solid;
}
.demo__lang--bm{  background:rgba(232,213,163,.12); color:var(--gold); border-color:rgba(232,213,163,.3); }
.demo__lang--en{  background:rgba(168,85,247,.16); color:var(--orchid-bright); border-color:rgba(168,85,247,.35); }
.demo__lang--mix{ background:rgba(248,205,221,.12); color:var(--pink); border-color:rgba(248,205,221,.3); }
.demo p{ color:var(--white-soft); font-size:.88rem; margin:.25rem 0 1.1rem; font-weight:300; }
.demo audio{
  width:100%; height:42px; display:block; border-radius:999px;
  outline:none; color-scheme:dark;
}

.legend{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:0 auto 2.6rem; max-width:var(--maxw); }
.legend li{
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.34rem .95rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--white-mute);
}

/* ================= THE UGC GALLERY ================= */
.media-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.4rem; max-width:var(--maxw); margin-inline:auto;
}
.media-grid--photo{ grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
/* asymmetric magazine rhythm — some tiles run taller */
.media-grid > .media:nth-child(4n+2) .media__frame{ aspect-ratio:3/4; }
.media-grid > .media:nth-child(4n+4) .media__frame{ aspect-ratio:4/5; }

.media{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.media__frame{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  background:linear-gradient(160deg,#1a1246,#0b1233 60%,#2a1148);
  display:grid; place-items:center;
}
.media__frame--wide{ aspect-ratio:4/5; }
.media__frame::before{
  content:"❦"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:2rem; color:rgba(248,205,221,.22);
}
/* luxury media treatment — moody while idle, lifts and zooms on hover */
.media__frame video,
.media__frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  color:transparent; font-size:0;
  filter:brightness(.55) saturate(.85) contrast(1.05);
  transform:scale(1);
  transition:filter .6s var(--ease), transform .8s var(--ease);
}
.media:hover .media__frame video,
.media:hover .media__frame img{
  filter:brightness(1) saturate(1.05) contrast(1);
  transform:scale(1.07);
}
.media__frame video{ background:#0b1233; }
/* YouTube embeds sit in the same 9:16 frame as a local player.
   An <iframe> is plain HTML — no JavaScript of our own involved. */
.media__frame iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:#0b1233;
}

/* gold category overlay sits on the frame.
   Lifted clear of the native video control bar so a two-line title
   never collides with the play button. */
.media__cap{
  position:absolute; left:0; right:0; bottom:2.6rem; z-index:2;
  padding:1.6rem 1.1rem .6rem;
  background:linear-gradient(180deg, transparent, rgba(6,10,31,.92) 55%);
  pointer-events:none;
}
/* photo tiles have no control bar, so their caption can sit lower */
.media-grid--photo .media__cap{ bottom:0; padding-bottom:.95rem; }
.media__cap strong{
  display:block; font-family:var(--font-display); font-size:.98rem;
  font-weight:700; color:var(--white);
}
.media__cap em{ font-style:normal; font-size:.66rem; color:var(--white-mute); letter-spacing:.05em; }
.media__tag{
  display:inline-block; margin-top:.5rem;
  font-size:.56rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.24rem .62rem; border-radius:999px;
  background:rgba(232,213,163,.16); color:var(--gold);
  border:1px solid rgba(232,213,163,.3);
}
.media__ph{ position:relative; z-index:0; text-align:center; padding:1rem; color:var(--white-mute); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }

.dropnote{
  max-width:var(--maxw); margin:0 auto 2.6rem;
  padding:1.2rem 1.4rem; border-radius:var(--radius-sm);
  border:1px dashed var(--line-strong); background:rgba(255,255,255,.035);
  color:var(--white-soft); font-size:.86rem; font-weight:300;
}
.dropnote code{
  background:rgba(232,213,163,.14); padding:.12rem .45rem;
  border-radius:5px; font-size:.85em; color:var(--gold); font-weight:600;
}

/* ================= ACCOUNTS ================= */
.accounts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.7rem; max-width:var(--maxw); margin-inline:auto; }
.account{
  position:relative; padding:2.3rem 2.1rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.account--ugc{
  border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box, var(--foil) border-box;
  box-shadow:var(--shadow), 0 0 60px -20px rgba(232,213,163,.4);
}
.account__handle{
  font-family:var(--font-display); font-size:1.6rem; font-weight:700;
  margin:.2rem 0 .45rem; word-break:break-word; color:var(--white);
}
.account__for{ color:var(--white-soft); font-size:.9rem; margin-bottom:1.4rem; font-weight:300; }
.account__links{ display:grid; gap:.55rem; }
.account__links a{
  display:flex; align-items:center; gap:.8rem;
  padding:.8rem 1.05rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  font-size:.85rem; font-weight:500;
  transition:border-color .35s, background .35s, transform .35s var(--ease), box-shadow .35s;
}
.account__links a:hover{
  border-color:var(--pink); background:rgba(168,85,247,.14);
  transform:translateX(5px); color:var(--pink); box-shadow:var(--glow-pink);
}
.account__links .go{ margin-left:auto; color:var(--gold); }

/* ================= TIERS ================= */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.7rem; align-items:start; }
.tier{
  position:relative; padding:2.5rem 2.1rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:.4rem;
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.tier--featured{
  border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box, var(--foil) border-box;
  box-shadow:var(--shadow), 0 0 70px -20px rgba(232,213,163,.45);
}
.tier__badge{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  padding:.32rem 1rem; border-radius:999px;
  background:var(--foil); color:#2a1d05;
  font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap; box-shadow:var(--glow-gold);
}
.tier__price{
  font-family:var(--font-display); font-size:1.8rem; font-weight:700;
  letter-spacing:-.02em; margin:0 0 .9rem; color:var(--pink);
}
.tier ul{ display:grid; gap:.55rem; margin-bottom:1.7rem; }
.tier li{ position:relative; padding-left:1.4rem; font-size:.88rem; color:var(--white-soft); font-weight:300; }
.tier li::before{ content:"❦"; position:absolute; left:0; color:var(--gold); font-size:.7rem; }
.tier .btn{ margin-top:auto; }
.note{ text-align:center; color:var(--white-mute); font-size:.82rem; margin-top:2rem; font-weight:300; }

/* ================= TERMS / ALERTS ================= */
.terms{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; max-width:var(--maxw); margin-inline:auto;
  box-shadow:var(--shadow-soft);
}
.terms > div{ background:rgba(11,18,51,.9); padding:1.9rem 1.8rem; }
.terms dt{
  font-family:var(--font-script); font-size:1rem;
  color:var(--pink); margin-bottom:.35rem; text-transform:none; letter-spacing:.02em;
}
.terms dd{ margin:0; font-size:1.05rem; font-weight:600; color:var(--white); }
.terms dd small{ display:block; font-weight:300; font-size:.82rem; color:var(--white-soft); margin-top:.4rem; }
.terms--names{ grid-template-columns:1fr; margin:1.9rem 0; }
.terms--names dd{ font-family:var(--font-display); font-size:1.3rem; }

.alert{
  max-width:var(--maxw); margin:1.9rem auto 0;
  padding:1.3rem 1.5rem; border-radius:var(--radius-sm);
  border:1px solid rgba(248,205,221,.35);
  background:linear-gradient(160deg, rgba(248,205,221,.09), rgba(168,85,247,.07));
  color:var(--white-soft); font-size:.88rem; font-weight:300;
  box-shadow:var(--shadow-soft);
}
.alert strong{ color:var(--pink); }
.warn{
  max-width:var(--maxw); margin:1.9rem auto 0;
  padding:1.3rem 1.5rem; border-radius:var(--radius-sm);
  border:1px solid rgba(232,213,163,.35);
  background:linear-gradient(160deg, rgba(232,213,163,.09), rgba(168,85,247,.06));
  color:var(--white-soft); font-size:.88rem; font-weight:300;
  box-shadow:var(--shadow-soft);
}
.warn strong{ color:var(--gold); }

/* ================= FORM ================= */
.form{
  max-width:880px; margin-inline:auto;
  padding:clamp(1.8rem,4.5vw,3.2rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.form__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--wide{ grid-column:1/-1; }
.field > label{
  font-size:.66rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.field > label small{ text-transform:none; letter-spacing:normal; font-weight:400; color:var(--white-mute); }
.field .req{ color:var(--pink); font-size:1.15em; }
.field input,
.field select,
.field textarea{
  width:100%; padding:1rem 1.1rem;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong);
  background:rgba(255,255,255,.06); color:var(--white);
  font-family:inherit; font-size:1rem; font-weight:500; line-height:1.5;
  color-scheme:dark;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.field select{ padding-right:2.6rem; cursor:pointer; }
.field select option{ background:#0b1233; color:#ffffff; font-size:1rem; font-weight:500; }
.field select option:checked{ background:#2a1148; color:#ffffff; }
.field textarea{ min-height:155px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--pink); background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(248,205,221,.14), 0 0 36px -8px rgba(168,85,247,.6);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.42); }
.field small{ font-size:.8rem; color:var(--white-mute); font-weight:300; }

.checks{ display:grid; gap:.75rem; margin-top:.2rem; }
.check{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1.1rem 1.2rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:.92rem; color:var(--white-soft); cursor:pointer; font-weight:300;
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.check:hover{ border-color:var(--pink); background:rgba(168,85,247,.12); box-shadow:var(--glow-pink); }
.check input{ width:24px; height:24px; margin-top:.15rem; accent-color:#e58aad; flex:none; }
.check strong{ color:var(--white); }

.form__actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.form__actions .btn{ flex:1 1 230px; }
fieldset{ border:none; margin:0; padding:0; }
legend{
  padding:0; margin:0 0 1.2rem;
  font-family:var(--font-script); font-size:1.35rem;
  letter-spacing:.02em; text-transform:none; color:var(--pink); font-weight:400;
}
.form__block + .form__block{ margin-top:3rem; padding-top:3rem; border-top:1px solid var(--line); }

.paylist{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.paylist li{
  font-size:.66rem; font-weight:600; letter-spacing:.12em;
  padding:.34rem .88rem; border-radius:999px;
  border:1px solid var(--line); color:var(--white-mute); background:rgba(255,255,255,.04);
}
.paylist li.soon{ opacity:.55; border-style:dashed; }

/* ================= ABOUT ================= */
.about{
  display:grid; grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  max-width:var(--maxw); margin-inline:auto;
}
.about__portrait{
  position:relative; margin:0; aspect-ratio:3/4;
  border-radius:180px 180px 20px 20px; overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 0 70px -12px rgba(168,85,247,.6), var(--shadow);
}
.about__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.about__portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(170deg, rgba(168,85,247,.26), transparent 42%, rgba(6,10,31,.5));
}
.about__text p{ color:var(--white-soft); font-weight:300; }

.checklist{ display:grid; gap:.7rem; margin-top:1.7rem; }
.checklist li{ position:relative; padding-left:1.9rem; color:var(--white-soft); font-size:.9rem; font-weight:300; }
.checklist li::before{
  content:"❦"; position:absolute; left:0; top:.1rem;
  color:var(--gold); font-size:.72rem;
}

/* ================= CONTACT ================= */
.contact{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.8rem,4vw,3rem); align-items:start; max-width:var(--maxw); margin-inline:auto; }
.contact__left p{ color:var(--white-soft); max-width:52ch; font-weight:300; }
.contact__rows{ display:grid; gap:.75rem; margin-top:2rem; }
.contact__row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:1.1rem 1.3rem; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:rgba(255,255,255,.04);
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.contact__row span{ font-family:var(--font-script); font-size:.98rem; color:var(--pink); text-transform:none; letter-spacing:.02em; }
.contact__row strong{ font-size:.95rem; word-break:break-word; color:var(--white); }
a.contact__row:hover{ border-color:var(--pink); transform:translateX(5px); box-shadow:var(--glow-pink); }
.contact__card{
  padding:2.3rem 2.1rem; border-radius:var(--radius);
  border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box, var(--foil) border-box;
  box-shadow:var(--shadow), 0 0 60px -20px rgba(232,213,163,.4);
}
.contact__card h3{ margin-bottom:1.1rem; }

/* ================= METHODS / HOURS ================= */
.methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.7rem; max-width:var(--maxw); margin-inline:auto; }
.method{
  position:relative; display:flex; flex-direction:column;
  padding:2.3rem 2rem; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.method--wa{
  border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box,
             linear-gradient(120deg,#25d366,#a855f7) border-box;
  box-shadow:var(--shadow), 0 0 60px -20px rgba(37,211,102,.45);
}
.method__icon{ font-size:1.9rem; line-height:1; margin-bottom:.9rem; }
.method__label{ font-family:var(--font-script); font-size:1.05rem; color:var(--pink); margin:0 0 .45rem; text-transform:none; letter-spacing:.02em; }
.method__value{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin:0 0 .6rem; word-break:break-word; color:var(--white); }
.method p{ color:var(--white-soft); font-size:.88rem; margin:0 0 1.5rem; font-weight:300; }
.method .btn{ margin-top:auto; }

.hours{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; max-width:var(--maxw); margin-inline:auto;
  box-shadow:var(--shadow-soft);
}
.hours > div{ background:rgba(11,18,51,.9); padding:1.8rem 1.7rem; }
.hours dt{ font-family:var(--font-script); font-size:1rem; color:var(--pink); margin-bottom:.35rem; text-transform:none; letter-spacing:.02em; }
.hours dd{ margin:0; font-size:1.02rem; font-weight:600; color:var(--white); }
.hours dd small{ display:block; font-weight:300; font-size:.82rem; color:var(--white-soft); margin-top:.35rem; }

/* ================= PAYMENT ================= */
.pay{ max-width:var(--maxw); margin-inline:auto; }
.pay__radio{ position:absolute; opacity:0; pointer-events:none; }
.pay__tabs{ display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center; margin-bottom:2.2rem; }
.pay__tabs label{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.4rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--white-mute); cursor:pointer; white-space:nowrap;
  transition:border-color .35s, background .35s, color .35s, transform .35s var(--ease), box-shadow .35s;
}
.pay__tabs label:hover{ border-color:var(--pink); color:var(--pink); transform:translateY(-3px); box-shadow:var(--glow-pink); }
#pay1:checked ~ .pay__tabs label:nth-child(1),
#pay2:checked ~ .pay__tabs label:nth-child(2),
#pay3:checked ~ .pay__tabs label:nth-child(3),
#pay4:checked ~ .pay__tabs label:nth-child(4),
#pay5:checked ~ .pay__tabs label:nth-child(5){
  background:var(--foil); color:#2a1d05; border-color:transparent; box-shadow:var(--glow-gold);
}
.pay__panel{ display:none; }
#pay1:checked ~ .pay__panels .pay__panel:nth-child(1),
#pay2:checked ~ .pay__panels .pay__panel:nth-child(2),
#pay3:checked ~ .pay__panels .pay__panel:nth-child(3),
#pay4:checked ~ .pay__panels .pay__panel:nth-child(4),
#pay5:checked ~ .pay__panels .pay__panel:nth-child(5){ display:block; }

.paycard{
  position:relative; padding:clamp(1.9rem,4.5vw,3rem);
  border-radius:var(--radius); border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box, var(--foil) border-box;
  box-shadow:var(--shadow), 0 0 70px -22px rgba(232,213,163,.4);
}
.paycard--plain{
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
}
.paycard h3{ font-size:clamp(1.4rem,2.8vw,1.9rem); margin-bottom:.45rem; }
.paycard > p{ color:var(--white-soft); max-width:62ch; font-weight:300; }

.bankrows{
  display:grid; gap:1px; margin:1.8rem 0;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden;
}
.bankrow{
  background:rgba(11,18,51,.92); padding:1.35rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; justify-content:space-between;
}
.bankrow dt{ font-family:var(--font-script); font-size:.98rem; color:var(--pink); margin:0; text-transform:none; letter-spacing:.02em; }
.bankrow dd{ margin:0; font-size:1.05rem; font-weight:600; text-align:right; word-break:break-word; color:var(--white); }
.bankrow dd.acct{
  font-family:"Consolas","SF Mono",ui-monospace,monospace;
  font-size:1.4rem; letter-spacing:.1em; color:var(--gold);
}

.steps{ counter-reset:step; display:grid; gap:.9rem; margin:1.6rem 0 0; padding:0; list-style:none; }
.steps li{ position:relative; padding-left:2.8rem; color:var(--white-soft); font-size:.92rem; font-weight:300; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:.05rem;
  width:1.85rem; height:1.85rem; display:grid; place-items:center;
  border-radius:50%; background:var(--foil); color:#2a1d05;
  font-size:.74rem; font-weight:800; box-shadow:var(--glow-gold);
}
.steps strong{ color:var(--white); }

.qrwrap{
  margin:1.8rem auto .9rem; max-width:400px;
  border-radius:var(--radius); overflow:hidden;
  background:#eeedf3; aspect-ratio:1206 / 1090;
  box-shadow:var(--shadow), 0 0 60px -18px rgba(232,213,163,.4);
  border:1px solid var(--line-strong);
}
.qrwrap img{ width:100%; height:100%; object-fit:cover; object-position:top center; color:transparent; font-size:0; }
.qrnote{ max-width:400px; margin:0 auto; text-align:center; color:var(--white-mute); font-size:.8rem; font-weight:300; }

.contactpay{ display:grid; gap:.65rem; margin-top:1.7rem; }
.contactpay a{
  display:flex; align-items:center; gap:.8rem;
  padding:.95rem 1.2rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:.9rem; font-weight:500;
  transition:border-color .35s, background .35s, transform .35s var(--ease), box-shadow .35s;
}
.contactpay a:hover{ border-color:var(--pink); background:rgba(168,85,247,.14); transform:translateX(5px); color:var(--pink); box-shadow:var(--glow-pink); }
.contactpay a .go{ margin-left:auto; color:var(--gold); }

/* ================= CTA ================= */
.cta{
  position:relative; overflow:hidden; text-align:center;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(2.6rem,5.5vw,4.2rem) clamp(1.4rem,4vw,3rem);
  border-radius:var(--radius); border:1px solid transparent;
  background:linear-gradient(var(--midnight-2),var(--midnight-2)) padding-box, var(--foil) border-box;
  box-shadow:var(--shadow), 0 0 80px -24px rgba(232,213,163,.45);
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 56% at 12% 10%, rgba(168,85,247,.35), transparent 70%),
    radial-gradient(44% 54% at 88% 90%, rgba(248,205,221,.20), transparent 70%);
}
.cta > *{ position:relative; }
.cta p{ color:var(--white-soft); max-width:58ch; margin-inline:auto; font-weight:300; }
.cta .hero__actions{ justify-content:center; margin-top:1.8rem; }

/* ================= FLOATING WHATSAPP ================= */
.wa-float{
  position:fixed; right:clamp(.8rem,2vw,1.5rem); bottom:clamp(.8rem,2vw,1.5rem);
  z-index:90; display:flex; align-items:center; gap:.6rem;
  padding:.95rem 1.35rem; border-radius:999px;
  background:linear-gradient(120deg,#2bd07a,#128c4a);
  color:#04310f; font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 0 40px -8px rgba(37,211,102,.75), 0 18px 40px -14px rgba(0,0,0,.7);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-float:hover{ transform:translateY(-4px); box-shadow:0 0 60px -6px rgba(37,211,102,.9), 0 24px 50px -14px rgba(0,0,0,.8); }
.wa-float .wa-float__icon{ font-size:1.15rem; line-height:1; }

/* ================= FOOTER ================= */
.footer{
  border-top:1px solid var(--line);
  padding:3.4rem clamp(1.2rem,4vw,2.75rem);
  background:linear-gradient(180deg, rgba(168,85,247,.10), rgba(6,10,31,.6));
}
.footer__inner{ max-width:var(--maxw); margin-inline:auto; display:flex; flex-wrap:wrap; gap:1.7rem; align-items:center; justify-content:space-between; }
.footer__brand{ font-family:var(--font-display); font-weight:700; letter-spacing:.1em; margin:0; font-size:1.15rem; color:var(--white); }
.footer__brand em{ font-style:normal; color:var(--pink); }
.footer__brand::before{ content:"❦ "; color:var(--gold); font-size:.75em; }
.footer__line{ margin:.3rem 0 0; color:var(--white-mute); font-size:.82rem; font-weight:300; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.3rem; }
.footer__nav a{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white-mute); transition:color .3s, text-shadow .3s; }
.footer__nav a:hover{ color:var(--pink); text-shadow:0 0 16px rgba(248,205,221,.6); }
.footer__copy{ margin:0; color:rgba(255,255,255,.4); font-size:.76rem; width:100%; font-weight:300; }

/* =========================================================
   PRINT DOCUMENTS
   Contracts, invoices and receipts stay on light paper — a
   client-facing document should never print midnight navy.
   The palette shifts to navy ink with gold and pink accents.
   ========================================================= */
.doc{
  max-width:920px; margin:0 auto;
  padding:clamp(1.8rem,5vw,3.5rem);
  background:#fffdfb; color:#0d1435;
  border:1px solid rgba(232,213,163,.6); border-radius:var(--radius);
  box-shadow:var(--shadow);
  font-family:var(--font-body); font-size:.96rem; line-height:1.75;
}
.doc h1,.doc h2,.doc h3{ color:#0d1435; font-family:var(--font-display); }
.doc p{ color:#2a2340; }
.doc__head{ text-align:center; padding-bottom:1.6rem; border-bottom:2px solid var(--gold-deep); }
.doc__title{ font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.2rem); font-weight:700; margin:0 0 .3rem; }
.doc__sub{ margin:0; font-family:var(--font-script); font-size:1.2rem; color:#7a5a8f; letter-spacing:.02em; text-transform:none; }
.doc__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem; margin:1.6rem 0 2.2rem; }
.doc__meta dt{ font-weight:800; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#8a6d1f; margin-bottom:.25rem; }
.doc__meta dd{ margin:0; font-size:.9rem; color:#0d1435; }
.parties{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-bottom:2.4rem; }
.party{ padding:1.3rem 1.4rem; border:1.5px solid rgba(232,213,163,.7); border-radius:var(--radius-sm); background:rgba(248,205,221,.07); }
.party h3{ font-family:var(--font-body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#8a6d1f; margin:0 0 .8rem; font-weight:800; }
.party p{ margin:0 0 .35rem; font-size:.9rem; color:#0d1435; }
.party strong{ color:#0d1435; }
.clause{ margin:0 0 1.9rem; }
.clause h3{
  font-family:var(--font-body); font-size:1rem; font-weight:800; margin:0 0 .6rem;
  padding-bottom:.4rem; border-bottom:1px solid rgba(232,213,163,.6);
  display:flex; gap:.7rem; align-items:baseline; color:#0d1435;
}
.clause h3 span{
  display:inline-grid; place-items:center; flex:none;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--foil); color:#2a1d05; font-size:.7rem; font-weight:900;
}
.clause p{ margin:0 0 .7rem; color:#2a2340; }
.clause strong{ color:#0d1435; }
.clause ul li{ position:relative; padding-left:1.3rem; margin-bottom:.4rem; color:#2a2340; }
.clause ul li::before{ content:"❦"; position:absolute; left:0; color:var(--gold-deep); }
.fill{ display:inline-block; min-width:9rem; border-bottom:1.5px dotted #6b5a8a; padding:0 .4rem; }
.fill--lg{ min-width:100%; } .fill--med{ min-width:16rem; }
.tick{ display:grid; gap:.5rem; margin:.6rem 0 1rem; }
.tick li{ padding-left:0 !important; color:#2a2340; }
.tick li::before{ content:none !important; }
.tickbox{ display:inline-block; width:1rem; height:1rem; border:1.5px solid #4a3b6b; border-radius:3px; margin-right:.6rem; vertical-align:-2px; }
.sign{ margin-top:2.6rem; padding-top:2rem; border-top:2px solid var(--gold-deep); }
.sign__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2.5rem; margin-top:1.6rem; }
.sign__block p{ margin:0 0 .5rem; font-size:.9rem; color:#0d1435; }
.sign__line{ border-bottom:1.5px solid #0d1435; height:3.2rem; margin-bottom:.4rem; }
.sign__label{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#8a6d1f; font-weight:800; }
.doc__note{ margin-top:2rem; padding:1.1rem 1.3rem; border:1px dashed rgba(232,213,163,.8); border-radius:var(--radius-sm); background:rgba(248,205,221,.09); font-size:.85rem; color:#3a3050; }
.doc__note strong{ color:#0d1435; }

.doc__brandbar{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; padding-bottom:1.4rem; margin-bottom:1.8rem; border-bottom:2px solid var(--gold-deep); }
.doc__logo{ display:flex; align-items:center; gap:.8rem; }
.doc__logo .nav__mark{ width:46px; height:46px; font-size:1rem; }
.doc__logoname{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:.06em; color:#0d1435; line-height:1.3; }
.doc__logoname em{ font-style:normal; color:#b0447a; }
.doc__logoname small{ display:block; font-family:var(--font-script); font-size:1rem; letter-spacing:.02em; text-transform:none; color:#8a6d1f; font-weight:400; }
.doc__kind{ text-align:right; }
.doc__kind h1{ font-family:var(--font-display); margin:0; font-size:clamp(1.6rem,4.5vw,2.4rem); letter-spacing:.04em; color:#0d1435; }
.doc__kind p{ margin:.2rem 0 0; font-size:.82rem; color:#5a4a72; }
.items{ width:100%; border-collapse:collapse; margin:1.6rem 0 0; font-size:.9rem; }
.items thead th{ text-align:left; padding:.75rem .8rem; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:#8a6d1f; border-bottom:2px solid var(--gold-deep); white-space:nowrap; }
.items tbody td{ padding:.85rem .8rem; vertical-align:top; border-bottom:1px solid rgba(232,213,163,.45); color:#0d1435; }
.items .num{ text-align:right; white-space:nowrap; }
.items__desc strong{ display:block; } .items__desc span{ font-size:.84rem; color:#5a4a72; }
.items-wrap{ overflow-x:auto; }
.totals{ display:flex; justify-content:flex-end; margin-top:1.4rem; }
.totals dl{ width:100%; max-width:360px; margin:0; display:grid; grid-template-columns:1fr auto; gap:.55rem 1.5rem; font-size:.92rem; color:#0d1435; }
.totals dt{ color:#5a4a72; } .totals dd{ margin:0; text-align:right; font-weight:700; }
.totals .grand{ grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:1.5rem; margin-top:.7rem; padding-top:.9rem; border-top:2px solid var(--gold-deep); font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#0d1435; }
.totals .grand span:last-child{ text-align:right; }
.totals .due{ grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:1.5rem; margin-top:.5rem; padding:.7rem .9rem; background:rgba(229,138,173,.18); border-radius:8px; font-weight:800; color:#a02461; }
.totals .due span:last-child{ text-align:right; }
.stamp{ display:inline-block; transform:rotate(-8deg); padding:.7rem 1.6rem; margin:1.2rem 0; border:4px double #1a7a4a; border-radius:10px; color:#1a7a4a; font-family:var(--font-display); font-size:1.9rem; font-weight:700; letter-spacing:.14em; }
.stamp small{ display:block; font-family:var(--font-script); font-size:.9rem; letter-spacing:.06em; font-weight:400; text-align:center; margin-top:.2rem; text-transform:none; }
.stamp--wrap{ text-align:center; }
.payhere{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:1.8rem; padding:1.3rem 1.4rem; border:1.5px solid rgba(232,213,163,.7); border-radius:var(--radius-sm); background:rgba(232,213,163,.12); }
.payhere h3{ font-family:var(--font-body); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#8a6d1f; margin:0 0 .7rem; font-weight:800; }
.payhere p{ margin:0 0 .3rem; font-size:.9rem; color:#0d1435; }
.payhere strong{ color:#0d1435; }
.payhere .acctno{ font-family:"Consolas",ui-monospace,monospace; font-size:1.15rem; font-weight:700; letter-spacing:.06em; color:#a02461; }
.payhere img{ max-width:150px; border-radius:8px; }

.printbar{ max-width:920px; margin:0 auto 1.6rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.printhint{
  display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  padding:.85rem 1.35rem; border-radius:999px;
  border:1px dashed var(--line-strong); background:rgba(255,255,255,.05);
  font-size:.78rem; font-weight:500; color:var(--white-soft); letter-spacing:.04em;
}
.printhint em{ font-style:normal; color:var(--white-mute); }
.printhint kbd{
  display:inline-block; padding:.15rem .5rem;
  border:1px solid var(--line-strong); border-bottom-width:3px; border-radius:6px;
  background:rgba(255,255,255,.1); color:var(--white);
  font-family:"Consolas",ui-monospace,monospace; font-size:.82em; font-weight:700;
}

/* ================= RESPONSIVE ================= */
/* =========================================================
   MEET — the introduction video on the homepage
   ========================================================= */
.meet{
  display:grid; grid-template-columns:minmax(260px,360px) 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  max-width:var(--maxw); margin-inline:auto;
}
.meet__frame{
  position:relative; margin:0; aspect-ratio:9/16; overflow:hidden;
  border-radius:200px 200px 22px 22px;
  border:1px solid var(--line-strong);
  box-shadow:0 0 70px -10px rgba(168,85,247,.65), var(--shadow);
  background:linear-gradient(160deg,#1a1246,#0b1233 60%,#2a1148);
}
.meet__frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.meet__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  border-radius:inherit;
  background:linear-gradient(170deg, rgba(168,85,247,.18), transparent 40%, rgba(6,10,31,.35));
}
.meet__text h2{ margin-top:0; }
.meet__text p{ color:var(--white-soft); font-weight:300; }
.meet__facts{
  display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:1.6rem 0 2rem;
}
.meet__facts li{
  padding:.5rem 1.1rem; border-radius:999px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.05);
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white);
}
@media (max-width:900px){
  .meet{ grid-template-columns:1fr; }
  .meet__frame{ max-width:320px; margin-inline:auto; }
}

/* =========================================================
   FORM VALIDATION — HTML5 constraints, CSS feedback, no JS
   :user-invalid only fires AFTER the visitor has interacted,
   so nothing turns red before they have typed a character.
   ========================================================= */
.field__err{
  display:none; margin-top:.4rem;
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  color:#ff9ec4;
}
.field__err::before{ content:"⚠ "; }
.field__ok{
  display:none; margin-top:.4rem;
  font-size:.76rem; font-weight:600; color:var(--gold);
}
.field__ok::before{ content:"✓ "; }

.form input:user-invalid,
.form select:user-invalid,
.form textarea:user-invalid{
  border-color:#ff6fa5 !important;
  box-shadow:0 0 0 3px rgba(255,111,165,.18) !important;
}
.form input:user-invalid ~ .field__err,
.form select:user-invalid ~ .field__err,
.form textarea:user-invalid ~ .field__err{ display:block; }

.form input:user-valid,
.form select:user-valid,
.form textarea:user-valid{
  border-color:var(--gold-deep) !important;
  box-shadow:0 0 0 3px rgba(232,213,163,.16) !important;
}
.form input:user-valid ~ .field__ok,
.form select:user-valid ~ .field__ok,
.form textarea:user-valid ~ .field__ok{ display:block; }

/* fallback for browsers without :user-invalid — only flags a field
   once it actually has content in it */
@supports not selector(:user-invalid){
  .form input:not(:placeholder-shown):invalid,
  .form textarea:not(:placeholder-shown):invalid{
    border-color:#ff6fa5 !important;
  }
  .form input:not(:placeholder-shown):invalid ~ .field__err,
  .form textarea:not(:placeholder-shown):invalid ~ .field__err{ display:block; }
}

.form__note{
  max-width:var(--maxw); margin:0 auto 2rem;
  font-size:.86rem; color:var(--white-soft);
}
.form__note .req{ color:var(--pink-deep); font-weight:700; }

/* =========================================================
   PRICING PAGE — plans, billing toggle, comparison table
   The toggle is hidden radios + labels + sibling selectors.
   No JavaScript anywhere.
   ========================================================= */
.crumbs{
  max-width:var(--maxw); margin:0 auto 1.6rem; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--white-mute);
}
.crumbs a{ color:var(--pink); }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ color:var(--white); }

/* ---- billing toggle ---- */
.billing{ display:flex; justify-content:center; margin:0 0 1rem; }
/* the radios must sit BEFORE .billing for the ~ selector to reach the labels,
   so they are hidden by id rather than by descendant selector */
#bill-month, #bill-quarter,
.billing input{
  position:absolute; width:1px; height:1px; opacity:0;
  pointer-events:none; clip-path:inset(50%);
}
.billing__ui{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem;
  border-radius:999px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
}
.billing__ui label{
  cursor:pointer; padding:.6rem 1.4rem; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white-mute); transition:color .3s, background .3s, box-shadow .3s;
}
.billing__ui label small{
  display:inline-block; margin-left:.5rem; padding:.1rem .5rem; border-radius:999px;
  font-size:.86em; letter-spacing:.08em;
  background:rgba(194,68,122,.22); color:var(--pink);
}
#bill-month:checked ~ .billing .billing__ui label[for="bill-month"],
#bill-quarter:checked ~ .billing .billing__ui label[for="bill-quarter"]{
  background:var(--foil); color:#2a1d05; box-shadow:var(--glow-gold);
}
.billing__note{
  text-align:center; font-size:.85rem; color:var(--white-soft); margin:0 0 3rem;
}
/* swap which price is visible */
.price__q, .billing__note--q{ display:none; }
#bill-quarter:checked ~ * .price__m{ display:none; }
#bill-quarter:checked ~ * .price__q{ display:block; }
#bill-quarter:checked ~ .billing__note--m{ display:none; }
#bill-quarter:checked ~ .billing__note--q{ display:block; }

/* ---- plan cards ---- */
.plans{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.6rem; max-width:var(--maxw); margin-inline:auto; align-items:start;
}
.plan{
  position:relative; overflow:hidden;
  padding:2.4rem 2rem; border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.plan::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    var(--pink-dark) 0%, var(--pink) 34%, var(--rosegold) 62%, var(--gold) 100%);
  opacity:.55; transition:opacity .45s var(--ease);
}
.plan:hover{
  transform:translateY(-6px); border-color:var(--pink);
  box-shadow:0 0 0 1px rgba(248,205,221,.5), 0 0 46px -6px rgba(248,205,221,.35),
             0 0 90px -12px rgba(168,85,247,.65), var(--shadow);
}
.plan:hover::after{ opacity:1; }
.plan--featured{ border-color:var(--gold-deep); box-shadow:var(--glow-gold), var(--shadow-soft); }
.plan__flag{
  position:absolute; top:0; right:1.6rem;
  padding:.4rem 1rem; border-radius:0 0 10px 10px;
  background:var(--foil); color:#2a1d05;
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.plan h3{ margin:0; font-family:var(--font-display); font-size:1.5rem; color:var(--white); }
.plan__price{ margin:1rem 0 .2rem; }
.plan__price b{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  letter-spacing:-.02em; color:var(--white);
}
.plan__price em{ font-style:normal; font-size:.8rem; color:var(--white-mute); margin-left:.3rem; }
.plan__alt{ font-size:.76rem; color:var(--rosegold); margin:0 0 1rem; }
.plan__sub{ color:var(--white-soft); font-size:.88rem; font-weight:300; margin:0 0 1.4rem; }
.plan ul{ list-style:none; padding:0; margin:0 0 1.8rem; }
.plan li{
  position:relative; padding-left:1.5rem; margin-bottom:.6rem;
  font-size:.86rem; color:var(--white-soft);
}
.plan li::before{ content:"❦"; position:absolute; left:0; color:var(--rosegold); font-size:.8rem; }
.plan .btn{ width:100%; }

/* ---- comparison table ---- */
.compare-wrap{ max-width:var(--maxw); margin-inline:auto; overflow-x:auto; }
.compare{
  width:100%; min-width:620px; border-collapse:collapse;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
}
.compare thead th{
  text-align:left; padding:1.1rem 1.2rem;
  background:linear-gradient(120deg,#0b1233,#1b1350);
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.compare thead th:first-child{ color:var(--white); }
.compare tbody td{
  padding:1rem 1.2rem; font-size:.86rem; color:var(--white-soft);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.compare tbody tr:nth-child(even) td{ background:rgba(255,255,255,.055); }
.compare tbody tr:last-child td{ border-bottom:none; }
.compare td:first-child{ color:var(--white); font-weight:600; }
.compare .y{ color:var(--pink); font-weight:700; }
.compare .g{ color:var(--gold); font-weight:700; }
.compare .n{ color:var(--white-mute); }

/* =========================================================
   FAQ — native <details>, no JavaScript
   ========================================================= */
.faq{ max-width:860px; margin-inline:auto; }
.faq details{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  margin-bottom:1rem; transition:border-color .4s, box-shadow .4s;
}
.faq details::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--pink-dark), var(--rosegold) 55%, var(--gold));
  opacity:0; transition:opacity .4s;
}
.faq details[open], .faq details:hover{
  border-color:var(--pink);
  box-shadow:0 0 40px -14px rgba(168,85,247,.6), var(--shadow-soft);
}
.faq details[open]::after{ opacity:1; }
.faq summary{
  cursor:pointer; list-style:none; padding:1.3rem 3.2rem 1.3rem 1.6rem;
  font-family:var(--font-display); font-size:1.06rem; font-weight:700; color:var(--white);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:1.5rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-size:1.4rem; font-weight:300; color:var(--rosegold);
  transition:transform .35s var(--ease), color .35s;
}
.faq details[open] summary::after{ content:"−"; color:var(--pink); }
.faq__a{ padding:0 1.6rem 1.4rem; color:var(--white-soft); font-size:.92rem; font-weight:300; }
.faq__a p{ margin:0 0 .8rem; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__group{
  max-width:860px; margin:3.4rem auto 1.4rem;
  font-family:var(--font-script); font-size:1.4rem; color:var(--rosegold);
}
.faq__group:first-of-type{ margin-top:0; }

/* =========================================================
   BACK TO TOP — sits above the WhatsApp button
   ========================================================= */
.totop{
  position:fixed; right:1.5rem; bottom:5.9rem; z-index:60;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--foil); color:#2a1d05;
  font-size:1.1rem; font-weight:700;
  box-shadow:var(--glow-gold), var(--shadow-soft);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.totop:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(232,213,163,.6), 0 18px 50px -12px rgba(232,213,163,.5); }

/* =========================================================
   THE METAL TRIM
   A hairline running dark pink -> pink -> rose gold -> gold
   across the top of every card, so the full palette is
   visible on the page rather than only in the tokens.
   ========================================================= */
.why__item::after,
.card::after,
.demo::after,
.tier::after,
.account::after,
.method::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    var(--pink-dark) 0%, var(--pink-deep) 18%, var(--pink) 34%,
    var(--pink-soft) 46%, var(--rosegold) 62%, var(--rosegold-deep) 74%,
    var(--gold) 88%, var(--gold-bright) 100%);
  opacity:.55; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.why__item:hover::after,
.card:hover::after,
.demo:hover::after,
.tier:hover::after,
.account:hover::after,
.method:hover::after{ opacity:1; }

/* category chips alternate gold and rose gold down the gallery */
.media:nth-child(even) .media__tag{
  background:rgba(233,184,164,.16); color:var(--rosegold);
  border-color:rgba(233,184,164,.34);
}
/* soft-pink ghost button, dark-pink press state */
.btn--ghost{ border-color:rgba(233,184,164,.5); }
.btn--ghost:hover{ border-color:var(--pink-soft); color:var(--pink-soft); }
.btn--ghost:active{ border-color:var(--pink-dark); }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__portrait{ max-width:300px; order:-1; }
  .about{ grid-template-columns:1fr; }
  .about__portrait{ max-width:300px; }
  .contact{ grid-template-columns:1fr; }
  .slide{ grid-template-columns:1fr; min-height:0; }
  .slide__body{ padding:1.8rem clamp(1.2rem,5vw,2rem) 2rem; }
  .slide__art{ order:-1; min-height:200px; }
  .slide__art span{ font-size:3.4rem; }
  .slider__arrows{ bottom:auto; height:200px; }
}
@media (max-width:640px){
  .nav{ justify-content:center; }
  .nav__links{ justify-content:center; gap:.8rem; }
  .nav__name{ font-size:.76rem; }
  .nav__name small{ font-size:.82rem; }
  .arrow{ width:40px; height:40px; }
  .arrow--prev{ left:8px; } .arrow--next{ right:8px; }
  .hero__pills li{ font-size:.58rem; padding:.34rem .78rem; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .media-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .lang a{ padding:.4rem .68rem; font-size:.62rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- PRINT — documents on paper ---------- */
@media print{
  @page{ margin:12mm 10mm; }
  *,*::before,*::after{
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
    color-adjust:exact !important;
  }
  html,body{ background:#fffdfb !important; color:#0d1435 !important; font-size:10.5pt; line-height:1.6; }
  html::before,html::after,body::before,body::after{ display:none !important; }
  .nav,.footer,.wa-float,.printbar,.hero,.marquee,.standalone-hint{ display:none !important; }
  .section{ padding:0 !important; max-width:none !important; }
  .section--alt{ background:none !important; border:none !important; }
  .doc{ max-width:none; margin:0; padding:0; background:#fffdfb !important; border:none !important; box-shadow:none !important; border-radius:0; font-size:10.5pt; }
  .clause,.sign,.party,.payhere,.totals,.doc__note,.stamp--wrap{ break-inside:avoid; page-break-inside:avoid; }
  .items tr{ break-inside:avoid; page-break-inside:avoid; }
  a{ text-decoration:none !important; }
}


/* ================= FADE-RISE =================
   The staggered entrance from the brief: opacity 0 to 1 with a 20px
   lift, 0.8s ease-out, and two delayed variants. Behind a motion guard,
   because an animation nobody asked for is worse than none. */
@media (prefers-reduced-motion: no-preference){
  .fade-rise,
  .hero__copy > *,
  .section__head > *{
    animation:fade-rise .8s cubic-bezier(.22,1,.36,1) both;
  }
  .hero__copy > *:nth-child(2),
  .section__head > *:nth-child(2){ animation-delay:.2s; }
  .hero__copy > *:nth-child(3),
  .section__head > *:nth-child(3){ animation-delay:.4s; }
  .hero__copy > *:nth-child(n+4){ animation-delay:.55s; }

  @keyframes fade-rise{
    from{ opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:translateY(0); }
  }
}