/* ============================================================
   HEYA — Landing Page
   Dark-luxury · deep purple base · gold accents · pink CTAs
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* brand palette (official) */
  --bg:           #14081C;   /* page base, a touch deeper than card */
  --bg-dark:      #1A0B22;   /* BG Dark */
  --purple-900:   #0D0514;
  --purple-primary:#3D2040;
  --purple-mid:   #6B3D6A;
  --purple-light: #9B6B9A;
  --pink:         #D4608A;   /* Pink CTA */
  --pink-soft:    #E89AB5;
  --gold:         #E08CAC;   /* Rose accent */
  --gold-soft:    #F2C6D8;
  --success:      #5DCAA5;
  --light-bg:     #F8F0F8;   /* Light BG (blush) */
  --cream:        #FBF6F1;   /* warm off-white */

  /* text */
  --ink:          #1A0D18;   /* on light */
  --ink-soft:     #6E5A6A;
  --ink-muted:    #8A7085;
  --on-dark:      #F6EDF4;
  --on-dark-soft: #C09ABF;   /* lavender */
  --on-dark-mute: #8A6E8C;

  /* surfaces */
  --glass:        rgba(255,255,255,0.045);
  --glass-line:   rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.07);

  /* gradients */
  --grad-pink:    linear-gradient(135deg,#D4608A 0%, #9B6B9A 100%);
  --grad-deep:    linear-gradient(160deg,#3D2040 0%, #251328 55%, #1A0B22 100%);

  /* radii */
  --r-card: 22px;
  --r-card-sm: 18px;
  --r-input: 11px;
  --r-btn: 12px;

  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Outfit", "Cairo", system-ui, sans-serif;

  /* layout */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; margin:0; padding:0; }

/* inline SVG icons (replaces webfont) */
i.ti{ display:inline-flex; align-items:center; justify-content:center; line-height:0; vertical-align:-.14em; }
i.ti svg{ display:block; }
.logo-img{ display:block; height:1em; width:auto; }
.brand-logo{ display:block; width:auto; height:30px; }
.nav .brand-logo{ height:30px; }
.nav.scrolled .brand-logo{ height:26px; }
.footer .brand-logo{ height:34px; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust:100%; overflow-x: clip; }
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--on-dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background: rgba(212,96,138,.3); color:#fff; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size: clamp(11px,1.1vw,13px);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center::after{
  content:""; width:26px; height:1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow.center{ justify-content:center; }

h1,h2,h3{ font-family: var(--serif); font-weight:500; line-height:1.1; letter-spacing:-.01em; }
.display{
  font-size: clamp(40px, 5.2vw, 74px);
  font-weight: 500;
  line-height:1.1;
}
.h2{
  font-size: clamp(33px, 4.6vw, 54px);
  letter-spacing:-.015em;
  line-height:1.16;
}
.lede{
  font-size: clamp(16px,1.5vw,19px);
  line-height:1.6;
  color: var(--on-dark-soft);
  max-width: 46ch;
  font-weight:300;
}
em.it{ font-style: italic; }

/* ---------- Wordmark ---------- */
.wordmark{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  display:inline-block;
  line-height:1;
  white-space:nowrap;
  color: var(--gold);
}
.wordmark .wm-y{ position: relative; display:inline-block; }
.wordmark .wm-mark{
  position:absolute;
  top: -.42em; left:50%;
  transform: translateX(-50%) scaleX(-1) rotate(-4deg);
  font-size: .42em;
  font-style: normal;
  font-family: var(--sans);
  opacity:.92;
}

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--sans);
  font-size: 15px; font-weight:600;
  padding: 14px 26px;
  border-radius: var(--r-btn);
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.55em;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn i{ font-size:1.1em; }
.btn-primary{
  background: var(--grad-pink);
  color:#fff;
  box-shadow: 0 8px 30px -8px rgba(212,96,138,.55);
  position:relative;
}
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 0 0 0 rgba(212,96,138,.45);
  animation: ctaGlow 3.4s ease-in-out infinite;
  pointer-events:none;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 38px -8px rgba(212,96,138,.7); }
.btn-ghost{
  background: var(--glass);
  border-color: var(--glass-line);
  color: var(--on-dark);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{ background: rgba(255,255,255,.09); transform: translateY(-2px); }
.btn-gold{
  background: transparent;
  border-color: rgba(224,140,172,.5);
  color: var(--gold);
}
.btn-gold:hover{ background: rgba(224,140,172,.10); border-color: var(--gold); transform: translateY(-2px); }
.btn-dark{
  background: var(--purple-primary);
  color: var(--on-dark);
}
.btn-dark:hover{ transform: translateY(-2px); }

@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(212,96,138,.0); }
  50%    { box-shadow:0 0 0 10px rgba(212,96,138,.0), 0 0 26px 2px rgba(212,96,138,.30); }
}

/* ---------- Layout ---------- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gut); }
section{ position: relative; overflow-x: clip; }
header.hero{ overflow-x: clip; }
.section-pad{ padding-block: clamp(80px, 11vw, 150px); }

/* light vs dark sections */
.sec-light{ background: var(--cream); color: var(--ink); }
.sec-light .lede{ color: var(--ink-soft); }
.sec-light .eyebrow{ color: var(--purple-mid); }
.sec-light .eyebrow::before{ background: linear-gradient(90deg,transparent,var(--purple-mid)); }
.sec-light .eyebrow.center::after{ background: linear-gradient(90deg,var(--purple-mid),transparent); }
.sec-dark{ background: var(--bg-dark); }

/* curved seam between sections */
.seam-top{ border-radius: 44px 44px 0 0; margin-top:-44px; position:relative; z-index:2; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d,0ms); }
.reveal.in{ opacity:1; transform:none; }
.reveal-s{ opacity:0; transform: translateY(18px) scale(.98); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d,0ms); }
.reveal-s.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-s{ opacity:1 !important; transform:none !important; }
  *{ animation:none !important; }
}

/* ---------- Background decor (blurred drifting shapes) ---------- */
.blob{ position:absolute; border-radius:50%; filter: blur(70px); pointer-events:none; z-index:0; opacity:.5; }
.blob-pink{ background: radial-gradient(circle, rgba(212,96,138,.55), transparent 70%); }
.blob-purple{ background: radial-gradient(circle, rgba(107,61,106,.6), transparent 70%); }
.blob-gold{ background: radial-gradient(circle, rgba(224,140,172,.35), transparent 70%); }
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%    { transform: translate(4%, -5%) scale(1.08); }
  66%    { transform: translate(-3%, 4%) scale(.96); }
}
.drift{ animation: drift 22s ease-in-out infinite; }
.drift-slow{ animation: drift 32s ease-in-out infinite; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gut);
  transition: background .4s, backdrop-filter .4s, padding .4s, box-shadow .4s;
}
.nav.scrolled{
  background: rgba(20,8,28,.72);
  backdrop-filter: blur(18px) saturate(1.2);
  padding-block: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.nav .wordmark{ font-size: 30px; }
.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-links a{ font-size:14.5px; color: var(--on-dark-soft); font-weight:400; transition: color .25s; }
.nav-links a:hover{ color: var(--on-dark); }
.nav-cta{ display:flex; align-items:center; gap:14px; }

/* ---------- Language toggle (segmented pill) ---------- */
.lang-toggle{
  position:relative; display:inline-flex; align-items:center; gap:0;
  padding:4px; border-radius:999px; cursor:pointer; flex-shrink:0;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(224,140,172,.36);
  backdrop-filter: blur(8px);
  transition: border-color .3s, box-shadow .3s, background .3s;
  -webkit-tap-highlight-color: transparent;
}
.lang-toggle:hover{
  border-color: rgba(224,140,172,.62);
  box-shadow: 0 0 20px -5px rgba(212,96,138,.45);
}
.lang-toggle .lt-opt{
  position:relative; z-index:1;
  width:32px; height:26px; display:grid; place-items:center;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; line-height:1;
  color: var(--on-dark-mute); transition: color .35s ease;
  user-select:none;
}
.lang-toggle .lt-ar{ font-family: "Cairo", sans-serif; font-size:15px; font-weight:700; letter-spacing:0; line-height:1; transform: translateY(-0.5px); }
.lt-thumb{
  position:absolute; top:4px; bottom:4px; left:4px; width:32px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--pink), #B0689B);
  box-shadow: 0 5px 14px -4px rgba(212,96,138,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .44s cubic-bezier(.22,.61,.36,1);
}
.lang-toggle .lt-opt[data-lang="en"]{ color:#fff; }
.lang-toggle.is-ar .lt-thumb{ transform: translateX(32px); }
.lang-toggle.is-ar .lt-opt[data-lang="en"]{ color: var(--on-dark-mute); }
.lang-toggle.is-ar .lt-opt[data-lang="ar"]{ color:#fff; }

/* Arabic mode: every heading swaps to Cairo automatically (English stays Cormorant) */
html.ar{ --serif: "Cairo", sans-serif; }
html.ar h1, html.ar h2, html.ar h3,
html.ar .display, html.ar .h2, html.ar .display em, html.ar .h2 em,
html.ar .step-num, html.ar .scr-name, html.ar .scr-stitle,
html.ar .center-name, html.ar .mc-name, html.ar .vcard h4,
html.ar .faq-q, html.ar .pm-name{
  font-family: "Cairo", sans-serif !important;
}
html.ar body{ font-family: "Cairo", "Outfit", system-ui, sans-serif; }
.nav .btn{ padding:10px 20px; font-size:14px; }
.nav-burger{ display:none; background:none; border:none; color:var(--on-dark); font-size:26px; cursor:pointer; }
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav .btn-ghost{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(91,42,90,.55), transparent 60%),
    radial-gradient(90% 70% at 10% 90%, rgba(212,96,138,.18), transparent 55%),
    var(--grad-deep);
  overflow:hidden;
  padding-top: 96px;
}
.hero-grid{
  position:relative; z-index:3;
  display:grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(30px,5vw,72px);
  align-items:center; width:100%;
}
.hero-copy .display{ margin: 22px 0 0; color: var(--on-dark); }
.hero-copy .display em{ color: #C9A96E; font-style: italic; }
.hero-copy .lede{ margin: 30px 0 38px; max-width: 33ch; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:22px; margin-top:38px; flex-wrap:wrap; }
.hero-trust .t-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--on-dark-soft); }
.hero-trust .t-item i{ color: var(--gold); font-size:17px; }
.hero-trust .divider{ width:1px; height:22px; background: var(--glass-line); }

/* hero phone stage */
.hero-stage{ position: relative; display:flex; justify-content:center; align-items:center; min-height: 560px; }

/* ---------- Phone mockup ---------- */
.phone{
  position: relative; z-index:4;
  width: 290px; height: 590px;
  background: #15081C;
  border-radius: 44px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
     0 50px 90px -30px rgba(0,0,0,.7),
     0 0 0 9px rgba(13,5,20,.55),
     inset 0 1px 1px rgba(255,255,255,.10);
  animation: phoneFloat 9s ease-in-out infinite;
}
@keyframes phoneFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%    { transform: translateY(-16px) rotate(-.6deg); }
}
.phone-screen{
  width:100%; height:100%;
  border-radius: 34px; overflow:hidden;
  background: var(--light-bg);
  position:relative;
  display:flex; flex-direction:column;
}
.phone-notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:96px; height:24px; background:#0D0514; border-radius:14px; z-index:10;
}

/* home screen content */
.scr-header{ background: linear-gradient(180deg,#3D2040,#251328); padding: 38px 16px 18px; }
.scr-greet{ font-size:12px; color: var(--on-dark-soft); }
.scr-name{ font-size:20px; font-weight:600; color:#fff; font-family:var(--serif); }
.scr-search{ background: rgba(255,255,255,.10); border-radius:11px; padding:9px 12px; margin-top:12px; font-size:12px; color: rgba(255,255,255,.4); display:flex; align-items:center; gap:7px; }
.scr-body{ flex:1; padding:14px; overflow:hidden; }
.scr-stitle{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:9px; font-family:var(--serif); }
.scr-featured{ background: linear-gradient(135deg,#3D2040,#251328); border-radius:16px; padding:14px; margin-bottom:13px; box-shadow:0 10px 24px -12px rgba(61,32,64,.6); }
.scr-fbadge{ background: var(--gold); border-radius:20px; padding:3px 10px; font-size:10px; font-weight:700; color:#1A0D18; display:inline-block; margin-bottom:9px; }
.scr-fimg{ width:100%; height:64px; border-radius:11px; margin-bottom:9px; overflow:hidden; }
.scr-ftitle{ font-size:14px; font-weight:600; color:#fff; margin-bottom:2px; }
.scr-fplace{ font-size:10px; color: var(--on-dark-soft); margin-bottom:9px; }
.scr-fprice{ display:flex; align-items:flex-end; justify-content:space-between; }
.scr-new{ font-size:20px; font-weight:700; color: var(--gold); line-height:1; }
.scr-old{ font-size:11px; color: rgba(255,255,255,.32); text-decoration:line-through; }
.scr-pct{ background: var(--pink); border-radius:20px; padding:4px 10px; font-size:11px; font-weight:700; color:#fff; }
.scr-chips{ display:flex; gap:6px; margin-bottom:11px; }
.scr-chip{ padding:5px 12px; border-radius:20px; font-size:10px; font-weight:600; background:#fff; color: var(--ink-muted); border:1px solid transparent; white-space:nowrap; }
.scr-chip.on{ border-color: var(--purple-light); color: var(--purple-mid); }
.scr-deal{ background:#fff; border-radius:14px; padding:9px; display:flex; gap:10px; margin-bottom:8px; box-shadow:0 6px 16px -10px rgba(61,32,64,.3); }
.scr-deal-img{ width:52px; height:52px; border-radius:11px; flex-shrink:0; }
.scr-deal-name{ font-size:12px; font-weight:600; color:var(--ink); }
.scr-deal-place{ font-size:10px; color: var(--ink-muted); margin:1px 0 5px; }
.scr-deal-price{ display:flex; gap:7px; align-items:center; }
.scr-deal-new{ font-size:13px; font-weight:700; color: var(--pink); }
.scr-deal-old{ font-size:10px; color: var(--ink-muted); text-decoration:line-through; }

/* phone screen slideshow */
.pscreen{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--light-bg); opacity:0; transform: translateX(7%); transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.pscreen.is-on{ opacity:1; transform: translateX(0); pointer-events:auto; }
.scr-back{ font-size:15px; color:rgba(255,255,255,.55); margin-bottom:4px; }
.code-card{ background:#fff; border-radius:18px; padding:18px 16px; text-align:center; box-shadow:0 12px 28px -16px rgba(61,32,64,.4); }
.cc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cc-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.cc-code{ font-size:27px; font-weight:700; letter-spacing:.14em; color:var(--purple-primary); }
.cc-qr{ width:118px; height:118px; margin:14px auto 12px; border-radius:14px; background:#FAF0F6; display:grid; place-items:center; font-size:84px; color:#1A0D18; }
.cc-foot{ font-size:10.5px; color:var(--ink-muted); line-height:1.45; }

/* real photos used inside phone/portal thumbnails */
.g-laser{ background: #2D0A3A url("img/offer-laser.jpg") center/cover no-repeat; }
.g-glow{  background: #D8B0E8 url("img/offer-facial.jpg") center/cover no-repeat; }
.g-hydra{ background: #B07AA8 url("img/offer-lips.jpg") center/cover no-repeat; }

/* ---------- Floating offer cards around phone ---------- */
.float-card{
  position:absolute; z-index:5;
  background: rgba(33,16,40,.55);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(16px) saturate(1.3);
  border-radius:15px;
  padding:11px 15px;
  display:flex; align-items:center; gap:10px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  white-space:nowrap;
  animation: floaty var(--fdur,11s) ease-in-out infinite;
  animation-delay: var(--fdelay,0s);
  transition: box-shadow .45s ease, border-color .45s ease, background .45s ease;
  cursor: default;
}
.float-card:hover{
  animation-play-state: paused;
  border-color: rgba(212,96,138,.45);
  background: rgba(40,20,48,.62);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.6), 0 0 26px -2px rgba(212,96,138,.45), inset 0 0 0 1px rgba(212,96,138,.12);
}
.float-card .fc-ic{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; flex-shrink:0;
  font-size:17px;
}
.fc-ic.pink{ background: rgba(212,96,138,.16); color: var(--pink-soft); }
.fc-ic.gold{ background: rgba(224,140,172,.16); color: var(--gold); }
.fc-ic.green{ background: rgba(93,202,165,.16); color: var(--success); }
.fc-ic.lav{ background: rgba(155,107,154,.20); color: var(--on-dark-soft); }
.float-card .fc-t{ font-size:13.5px; font-weight:600; color:var(--on-dark); }
.float-card .fc-s{ font-size:11px; color: var(--on-dark-mute); }
@keyframes floaty{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(var(--fx,0), var(--fy,-14px)); }
}
/* positions */
.fc-1{ top: 2%;  left: 2%;  --fy:-16px; --fdur:10s; }
.fc-2{ top: 18%; right: -12%; --fy:13px; --fdur:12s; --fdelay:-3s; }
.fc-3{ top: 50%; left: -7%; --fy:-12px; --fdur:11s; --fdelay:-1.5s; }
.fc-4{ bottom: 11%; right: -13%; --fy:-15px; --fdur:13s; --fdelay:-4s; }
.fc-5{ bottom: 1%; left: 3%; --fy:12px; --fdur:10.5s; --fdelay:-2s; }
.fc-6{ top: -2%; right: -3%; --fy:-13px; --fdur:12.5s; --fdelay:-5s; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions, .hero-trust{ justify-content:center; }
  .eyebrow{ justify-content:center; }
  .fc-3{ left:-4%; } .fc-2{ right:-2%; } .fc-4{ right:-2%; }
}
@media (max-width: 520px){
  .float-card .fc-s{ display:none; }
  .float-card{ padding:8px 11px; font-size:12px; }
  .float-card .fc-ic{ width:26px; height:26px; font-size:14px; }
  .fc-1,.fc-3,.fc-5{ left:0%; }
  .fc-2,.fc-4,.fc-6{ right:0%; }
  .hero-stage{ min-height: 500px; }
  .phone{ transform: scale(.9); }
  .why-visual{ height: 440px; }
  .why-pop{ height: 420px; }
  .why-frame{ height: 340px; }
  .vcard, .portal{ width: 100%; }
}

/* ============================================================
   GENERIC SECTION HEADER
   ============================================================ */
.sec-head{ max-width: 720px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .h2{ margin-top:18px; padding-bottom:.08em; }
.sec-head .h2 em{ color: var(--pink); }
#categories .sec-head .h2 em{ color: #C9A96E; }
#membership .sec-head .h2 em{ color: #C9A96E; }
.sec-light .sec-head .h2 em{ color: var(--purple-mid); }
.sec-head p{ margin-top:40px; }
.sec-head.center p.lede{ margin-left:auto; margin-right:auto; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{
  display:grid; grid-template-columns: repeat(4,1fr); gap:22px;
  margin-top: 60px; position:relative;
}
.step{
  position:relative;
  background:#fff;
  border:1px solid rgba(61,32,64,.08);
  border-radius: var(--r-card);
  padding: 30px 26px 32px;
  box-shadow: 0 24px 50px -34px rgba(61,32,64,.35);
}
.step-num{
  font-family:var(--serif); font-size:14px; font-weight:600;
  color: var(--pink); letter-spacing:.05em;
}
.step-ic{
  width:58px; height:58px; border-radius:17px;
  background: linear-gradient(135deg, rgba(212,96,138,.14), rgba(155,107,154,.14));
  color: var(--purple-mid);
  display:grid; place-items:center; font-size:27px;
  margin: 18px 0 20px;
}
.step h3{ font-size:23px; color:var(--ink); }
.step p{ font-size:14.5px; color: var(--ink-soft); margin-top:9px; line-height:1.55; }
.step-connect{
  position:absolute; top:54px; right:-13px; width:26px; height:2px;
  background: linear-gradient(90deg, var(--purple-light), transparent);
  z-index:2;
}
@media (max-width: 980px){ .steps{ grid-template-columns: repeat(2,1fr); } .step-connect{ display:none; } }
@media (max-width: 520px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   CATEGORIES
   ============================================================ */
.cats{ display:grid; grid-template-columns: repeat(6,1fr); gap:18px; margin-top:56px; }
.cat{
  background: var(--glass);
  border:1px solid var(--glass-line);
  border-radius: var(--r-card);
  padding: 34px 22px;
  text-align:center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), background .4s, border-color .4s;
  cursor:default;
}
.cat:hover{ transform: translateY(-8px); background: rgba(255,255,255,.07); border-color: rgba(224,140,172,.35); }
.cat-ic{
  width:74px; height:74px; margin:0 auto 20px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:32px; color: var(--gold);
  background: radial-gradient(circle at 35% 30%, rgba(224,140,172,.28), rgba(224,140,172,.05));
  border:1px solid rgba(224,140,172,.32);
  box-shadow: 0 0 26px -4px rgba(224,140,172,.5), inset 0 0 14px rgba(224,140,172,.14);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease;
}
.cat-ic i{ filter: drop-shadow(0 0 9px rgba(224,140,172,.65)); }
.cat:hover .cat-ic{ transform: scale(1.08) rotate(4deg); box-shadow: 0 0 40px 2px rgba(224,140,172,.78), inset 0 0 18px rgba(224,140,172,.22); }
.cat h3{ font-size:21px; color:var(--on-dark); }
.cat p{ font-size:12.5px; color: var(--on-dark-mute); margin-top:6px; }
@media (max-width: 980px){ .cats{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .cats{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   WHY HEYA
   ============================================================ */
.why-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px,5vw,72px); align-items:center; }
.why-list{ display:flex; flex-direction:column; gap:14px; margin-top:48px; }
.why-item{
  display:flex; gap:18px; align-items:flex-start;
  background:#fff; border:1px solid rgba(61,32,64,.07);
  border-radius: var(--r-card-sm); padding:22px 24px;
  box-shadow:0 18px 40px -34px rgba(61,32,64,.4);
  transition: transform .4s, box-shadow .4s;
}
.why-item:hover{ transform: translateX(6px); box-shadow:0 22px 48px -30px rgba(61,32,64,.5); }
.why-item .wic{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center; font-size:22px; color:#fff;
  background: var(--grad-pink);
}
.why-item h3{ font-size:21px; color:var(--ink); }
.why-item p{ font-size:14px; color: var(--ink-soft); margin-top:4px; }
.why-visual{ position:relative; height:520px; }
.why-frame{ position:absolute; left:0; right:0; bottom:0; height:400px; border-radius:28px; overflow:hidden;
  background: radial-gradient(120% 100% at 50% 0%, rgba(212,96,138,.22), transparent 62%), linear-gradient(158deg,#F5E4EF 0%, #E7D3E8 55%, #DCC6E0 100%);
  box-shadow: 0 44px 80px -42px rgba(61,32,64,.5), inset 0 1px 0 rgba(255,255,255,.5); }

/* pulsing soft glow behind the subject */
.wf-glow{ position:absolute; left:50%; top:46%; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.7), rgba(212,96,138,.18) 45%, transparent 70%);
  transform:translate(-50%,-50%); filter:blur(4px);
  animation: wfGlow 7s ease-in-out infinite; }
@keyframes wfGlow{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.14);} }

/* concentric expanding rings */
.wf-rings{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); }
.wf-rings span{ position:absolute; left:50%; top:50%; width:180px; height:180px; margin:-90px 0 0 -90px;
  border:1.5px solid rgba(255,255,255,.55); border-radius:50%;
  transform:translate(-50%,-50%) scale(.5); opacity:0;
  animation: wfRing 6s ease-out infinite; }
.wf-rings span:nth-child(2){ animation-delay:2s; }
.wf-rings span:nth-child(3){ animation-delay:4s; }
@keyframes wfRing{ 0%{ transform:scale(.45); opacity:0;} 18%{ opacity:.6;} 100%{ transform:scale(1.7); opacity:0;} }

/* floating beauty chips */
.wf-chip{ position:absolute; width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px); color: var(--purple-primary); font-size:20px;
  box-shadow: 0 14px 30px -12px rgba(61,32,64,.45), inset 0 1px 0 rgba(255,255,255,.7); z-index:4;
  animation: wfChip 6s ease-in-out infinite; }
.wf-chip-1{ top:60px; left:28px; animation-delay:0s; }
.wf-chip-2{ top:150px; right:24px; color:#E08CAC; animation-delay:1.4s; }
.wf-chip-3{ bottom:90px; left:40px; color:#9B6B9A; animation-delay:2.8s; }
@keyframes wfChip{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-13px);} }

/* the cut-out subject photo — floats gently, pops above the frame */
.why-pop{ position:absolute; left:50%; bottom:0; width:auto; height:500px; max-width:96%; z-index:3;
  object-fit:contain; object-position:bottom center;
  transform:translateX(-50%); transform-origin:bottom center;
  filter: drop-shadow(0 30px 40px rgba(61,32,64,.32));
  animation: wfFloat 8s ease-in-out infinite; }
@keyframes wfFloat{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-16px);} }

/* inviting placeholder look (shown until the user drops a photo) */
#why-photo::part(empty){
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(212,96,138,.06));
  border: 1.6px dashed rgba(155,107,154,.5);
  border-radius: 22px;
  color: var(--purple-primary);
  gap: 10px;
  animation: wfHint 4.5s ease-in-out infinite;
}
@keyframes wfHint{ 0%,100%{ box-shadow: inset 0 0 0 0 rgba(212,96,138,0);} 50%{ box-shadow: inset 0 0 36px -8px rgba(212,96,138,.28);} }

@media (max-width: 900px){
  .why-grid{ grid-template-columns:1fr; }
  .why-grid > div:first-child{ display:contents; }
  .why-grid .sec-head{ order:1; }
  .why-grid .why-visual{ order:2; }
  .why-grid .why-list{ order:3; margin-top:8px; }
}

/* ============================================================
   PARTNER (clinics)
   ============================================================ */
.partner-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px,5vw,80px); align-items:center; }
.partner-feats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:38px; }
.pf{
  background: var(--glass); border:1px solid var(--glass-line);
  border-radius: var(--r-card-sm); padding:22px;
}
.pf i{ font-size:24px; color: var(--gold); }
.pf h3{ font-size:18px; font-family:var(--sans); font-weight:600; color:var(--on-dark); margin:12px 0 6px; }
.pf p{ font-size:13.5px; color: var(--on-dark-mute); line-height:1.5; }
@media (max-width: 900px){ .partner-grid{ grid-template-columns:1fr; } .partner-grid > div:last-child{ order:-1; } }
@media (max-width: 460px){ .partner-feats{ grid-template-columns:1fr; } }

/* ---------- Portal mock (glassmorphism, dark luxury) ---------- */
.portal{
  background: linear-gradient(165deg, rgba(61,32,64,.55), rgba(26,11,34,.85));
  border:1px solid var(--glass-line);
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.portal-bar{ display:flex; align-items:center; gap:7px; margin-bottom:22px; }
.portal-bar .dot{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.14); }
.portal-bar .lbl{ margin-left:auto; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--on-dark-mute); }

/* offer management list */
.pm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pm-head h4{ font-family:var(--sans); font-size:17px; font-weight:600; color:#fff; }
.pm-head span{ font-size:12px; color: var(--on-dark-mute); display:block; margin-top:2px; }
.pm-add{ background: var(--grad-pink); color:#fff; border:none; border-radius:20px; padding:8px 16px; font-size:12.5px; font-weight:600; font-family:var(--sans); cursor:pointer; }
.pm-deal{
  display:flex; gap:13px; align-items:center;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:15px; padding:13px; margin-bottom:11px;
}
.pm-deal .pm-img{ width:48px; height:48px; border-radius:12px; flex-shrink:0; }
.pm-deal .pm-info{ flex:1; min-width:0; }
.pm-deal .pm-name{ font-size:14px; font-weight:600; color:#fff; }
.pm-deal .pm-price{ font-size:13px; color: var(--gold); margin-top:2px; }
.pm-deal .pm-price s{ color: var(--on-dark-mute); font-size:11px; margin-left:4px; }
.pm-deal .pm-pill{ margin-top:7px; }
.pm-actions{ display:flex; gap:7px; }
.mini-btn{ font-size:11px; padding:5px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--on-dark-soft); cursor:pointer; font-family:var(--sans); }
.mini-btn.del{ color:#E0857C; border-color: rgba(224,133,124,.3); }

/* status pills */
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 11px; border-radius:20px; }
.pill.active{ background: rgba(93,202,165,.14); color: var(--success); border:1px solid rgba(93,202,165,.3); }
.pill.review{ background: rgba(224,140,172,.14); color: var(--gold); border:1px solid rgba(224,140,172,.3); }
.pill.rejected{ background: rgba(224,133,124,.14); color:#E0857C; border:1px solid rgba(224,133,124,.3); }

/* portal slideshow */
image-slot.pm-img{ display:block; }
.portal-slides{ position:relative; flex:1; min-height:300px; }
.pslide{ position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); pointer-events:none; }
.pslide.is-on{ opacity:1; transform:none; pointer-events:auto; }
.portal-dots{ display:flex; gap:7px; justify-content:center; margin-top:20px; }
.portal-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); transition:all .4s; cursor:pointer; }
.portal-dots span.is-on{ background:var(--pink); width:22px; border-radius:4px; }

/* stats screen */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:13px; }
.stat-tile{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px 10px; text-align:center; }
.st-n{ font-size:24px; font-weight:700; color:var(--gold); line-height:1; }
.st-l{ font-size:10.5px; color:var(--on-dark-mute); margin-top:6px; }
.stat-chart{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px 16px; }
.sc-head{ font-size:11px; color:var(--on-dark-soft); margin-bottom:12px; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:78px; }
.bars span{ flex:1; height:var(--h); border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--pink),rgba(155,107,154,.45)); }
.bars span:last-child{ background:linear-gradient(180deg,var(--gold),rgba(224,140,172,.4)); }
.stat-top{ margin-top:13px; background:rgba(224,140,172,.08); border:1px solid rgba(224,140,172,.2); border-radius:13px; padding:13px 16px; font-size:13px; color:var(--on-dark); display:flex; align-items:center; gap:8px; }
.stat-top span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.stat-top b{ margin-left:auto; font-size:16px; color:var(--gold); }

/* center screen */
.center-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.center-ava{ width:58px; height:58px; border-radius:18px; background:linear-gradient(135deg,#6B3D6A,#3D2040); border:1px solid rgba(224,140,172,.3); display:grid; place-items:center; color:var(--gold); font-size:26px; flex-shrink:0; }
.center-name{ font-family:var(--serif); font-size:23px; color:#fff; }
.center-loc{ font-size:12.5px; color:var(--on-dark-soft); display:flex; align-items:center; gap:5px; margin-top:3px; }
.center-pills{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.center-rate{ font-size:12.5px; color:var(--gold); display:inline-flex; align-items:center; gap:5px; }
.center-rows{ display:flex; flex-direction:column; gap:0; }
.crow{ display:flex; align-items:center; justify-content:space-between; padding:13px 2px; border-top:1px solid rgba(255,255,255,.07); }
.crow:first-child{ border-top:none; }
.crow .cl{ font-size:13px; color:var(--on-dark-mute); }
.crow .cv{ font-size:13.5px; color:#fff; font-weight:500; }
.crow .cv.ok{ color:var(--success); }

/* ============================================================
   CODE VERIFICATION SECTION
   ============================================================ */
.verify-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items:center; }
.verify-stage{ position:relative; min-height: 470px; display:flex; align-items:center; justify-content:center; perspective:1400px; }

.vcard{
  width: 360px; max-width:100%;
  background: linear-gradient(165deg, rgba(61,32,64,.6), rgba(20,8,28,.92));
  border:1px solid var(--glass-line);
  border-radius: 26px;
  padding: 34px 30px;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  position:absolute;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  text-align:center;
}
.vcard.is-out{ opacity:0; transform: translateY(20px) scale(.97); pointer-events:none; }
.vcard.is-in{ opacity:1; transform:none; }

.v-key{
  width:54px; height:54px; margin:0 auto 18px; border-radius:16px;
  border:1px solid rgba(224,140,172,.4);
  display:grid; place-items:center; font-size:24px; color:var(--gold);
}
.vcard h4{ font-family:var(--serif); font-size:26px; color:#fff; margin-bottom:8px; }
.vcard .v-sub{ font-size:13.5px; color: var(--on-dark-soft); line-height:1.5; margin-bottom:24px; }
.v-input-row{ display:flex; gap:11px; align-items:stretch; margin-bottom:16px; }
.v-input{
  flex:1; background: rgba(13,5,20,.6); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:14px; text-align:center;
  font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:.22em;
  color: var(--gold); transition: border-color .3s, box-shadow .3s;
}
.v-input.focus{ border-color: var(--pink); box-shadow:0 0 0 3px rgba(212,96,138,.18); }
.v-verify{ background: var(--grad-pink); color:#fff; border:none; border-radius:12px; padding:0 22px; font-size:14.5px; font-weight:600; font-family:var(--sans); cursor:pointer; }
.v-msg{ border-radius:12px; padding:12px; font-size:13px; font-weight:500; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.v-msg.show{ opacity:1; transform:none; }
.v-msg.err{ background: rgba(224,133,124,.10); border:1px solid rgba(224,133,124,.3); color:#E0857C; }
.v-msg.ok{ background: rgba(93,202,165,.10); border:1px solid rgba(93,202,165,.3); color: var(--success); }
.v-foot{ font-size:12px; color: var(--on-dark-mute); margin-top:20px; line-height:1.5; }

/* confirmed card */
.v-check{
  width:88px; height:88px; margin:0 auto 18px; border-radius:50%;
  border:2px solid var(--success);
  display:grid; place-items:center; color: var(--success); font-size:40px;
  position:relative;
}
.v-check::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--success); opacity:0;
}
.vcard.is-in .v-check::before{ animation: ring 2.6s ease-out .2s infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.45); opacity:0; } }
.v-member-title{ color: var(--success) !important; }
.v-code-tag{ font-family:var(--sans); letter-spacing:.22em; color: var(--gold); font-size:14px; margin-bottom:22px; }
.v-field{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:13px 16px; margin-bottom:10px; text-align:left;
}
.v-field .vl{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--on-dark-mute); }
.v-field .vv{ font-size:16px; font-weight:600; color:#fff; margin-top:3px; }
@media (max-width: 900px){ .verify-grid{ grid-template-columns:1fr; } }

/* ============================================================
   DUBAI LAUNCH
   ============================================================ */
.dubai{ text-align:center; position:relative; overflow:hidden; }
.dubai-skyline{ display:none; }
#dubai{ padding-bottom: clamp(40px,5vw,64px); }
.coverage{ margin: 44px auto 0; display:flex; flex-direction:column; align-items:center; gap:32px; }
.cov-radar{ position:relative; width:min(360px,74vw); aspect-ratio:1; display:grid; place-items:center; }
.cov-ring{ position:absolute; border-radius:50%; }
.ring-uae{ width:100%; height:100%; border:1.5px dashed rgba(201,169,110,.5); }
.ring-dubai{ width:58%; height:58%; border:1.5px solid rgba(224,140,172,.6);
  background: radial-gradient(circle, rgba(224,140,172,.14), transparent 70%);
  box-shadow: 0 0 50px -8px rgba(224,140,172,.45); }
.cov-core{ position:absolute; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-size:28px; color:#fff; background:linear-gradient(135deg,var(--pink),#B0689B);
  box-shadow:0 10px 28px -6px rgba(212,96,138,.7), inset 0 1px 0 rgba(255,255,255,.3); z-index:3; }
.cov-wave{ position:absolute; width:58%; height:58%; border-radius:50%; border:1.5px solid rgba(224,140,172,.55); animation: covWave 3.6s ease-out infinite; }
.cov-wave:nth-child(2){ animation-delay:1.2s; }
.cov-wave:nth-child(3){ animation-delay:2.4s; }
@keyframes covWave{ 0%{ transform:scale(.5); opacity:.75; } 100%{ transform:scale(1.72); opacity:0; } }
.cov-status{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.cov-chip{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px;
  font-size:14px; font-weight:600; border:1px solid var(--glass-line); background:rgba(255,255,255,.04); color:var(--on-dark); }
.cov-chip .cdot{ width:9px; height:9px; border-radius:50%; }
.cov-chip.is-live .cdot{ background:var(--pink); box-shadow:0 0 0 4px rgba(212,96,138,.18); }
.cov-chip.is-soon{ color:var(--on-dark-soft); }
.cov-chip.is-soon .cdot{ background:#C9A96E; box-shadow:0 0 0 4px rgba(201,169,110,.18); }
@media (max-width:560px){ .cov-core{ width:54px; height:54px; font-size:24px; } .coverage{ gap:28px; } }

/* ============================================================
   MEMBERSHIP
   ============================================================ */
.member-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items:center; }
.member-stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height: 380px; perspective:1200px; }
.mcard{
  width: 400px; max-width:100%; aspect-ratio: 1.6/1;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 80% 10%, rgba(224,140,172,.30), transparent 55%),
    linear-gradient(150deg, #4A2350, #1F1026);
  border:1px solid rgba(224,140,172,.3);
  box-shadow: 0 50px 90px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  padding: 28px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  transform: rotateY(-14deg) rotateX(6deg);
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.member-stage.in .mcard{ transform: rotateY(0deg) rotateX(0deg); }
.mcard .shine{ position:absolute; top:-60%; left:-30%; width:60%; height:220%; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent); }
.member-stage.in .mcard .shine{ animation: shine 4.5s ease-in-out 1s infinite; }
@keyframes shine{ 0%{ left:-40%; } 55%,100%{ left:130%; } }
.mcard .mc-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.mcard .mc-chip{ width:42px; height:32px; border-radius:7px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); opacity:.9; }
.mcard .mc-tier{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--gold); }
.mcard .mc-name{ font-family:var(--serif); font-size:24px; color:#fff; }
.mcard .mc-id{ font-family:var(--sans); letter-spacing:.2em; font-size:14px; color: var(--on-dark-soft); margin-top:4px; }
.mcard .mc-foot{ display:flex; align-items:flex-end; justify-content:space-between; }
.mc-unlock{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12px; font-weight:600; color: var(--success);
  background: rgba(93,202,165,.12); border:1px solid rgba(93,202,165,.3);
  padding:6px 12px; border-radius:20px;
  opacity:0; transform: translateY(8px);
}
.member-stage.in .mc-unlock{ animation: popIn .6s ease 1.1s forwards; }
@keyframes popIn{ to{ opacity:1; transform:none; } }
@media (max-width: 900px){
  .member-grid{ grid-template-columns:1fr; }
  .member-grid > div:last-child{ order:-1; text-align:center; }
  #membership .sec-head{ margin-inline:auto; }
  #membership .hero-trust{ justify-content:center; }
  #membership .store-row{ justify-content:center !important; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width: 820px; margin: 54px auto 0; }
.faq-item{ border-bottom:1px solid rgba(61,32,64,.12); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 26px 4px; font-family:var(--serif); font-size: clamp(19px,2.2vw,24px); color:var(--ink); }
.faq-q .fq-ic{ flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(61,32,64,.18); display:grid; place-items:center; font-size:18px;
  color: var(--purple-mid); transition: transform .4s, background .3s, color .3s; }
.faq-item.open .fq-ic{ transform: rotate(45deg); background: var(--purple-mid); color:#fff; border-color:var(--purple-mid); }
.faq-a{ overflow:hidden; max-height:0; transition: max-height .5s ease; }
.faq-a-inner{ padding: 0 4px 26px; font-size:15.5px; color: var(--ink-soft); line-height:1.65; max-width: 64ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{
  text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(91,42,90,.6), transparent 60%),
    var(--grad-deep);
}
.final .display{ color:#fff; margin-bottom:32px; line-height:1.12; }
.final .display em{ color: #C9A96E; font-style:italic; }
.final .lede{ margin: 0 auto 40px; }
.final-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.store-row{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.store-badge{ display:flex; align-items:center; gap:11px; background: rgba(255,255,255,.05); border:1px solid var(--glass-line);
  border-radius:13px; padding:11px 18px; transition: background .3s, transform .3s; cursor:pointer; }
.store-badge:hover{ background: rgba(255,255,255,.1); transform: translateY(-2px); }
.store-badge i{ font-size:26px; color:#fff; }
.store-badge .sb-s{ font-size:10px; color: var(--on-dark-soft); }
.store-badge .sb-b{ font-size:15px; font-weight:600; color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background: var(--purple-900); padding: 60px var(--gut) 40px; }
.footer-grid{ max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
.footer .wordmark{ font-size:32px; }
.footer-col h5{ font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-bottom:16px; font-weight:600; }
.footer-col a{ display:block; font-size:14px; color: var(--on-dark-soft); margin-bottom:11px; transition: color .25s; }
.footer-col a:hover{ color:#fff; }
.footer-about{ font-size:14px; color: var(--on-dark-soft); line-height:1.6; margin-top:18px; max-width: 34ch; }
.footer-mail{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:14px; color: var(--gold);
  text-decoration:none; transition: color .25s; }
.footer-mail:hover{ color:#E0C690; }
.footer-mail i{ font-size:16px; }
.footer-bottom{ max-width:var(--maxw); margin: 46px auto 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13px; color: var(--on-dark-mute); }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px; } }
@media (max-width: 440px){ .footer-grid{ grid-template-columns: 1fr; } }