/* ═══════════════════════════════════════════════════
   DR. DALYA SOLYMAN — Complete Redesign v3
   Palette: Deep Rose · Warm Ivory · Soft Gold
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
  --rose:        #7C2D3E;
  --rose-mid:    #9B3A4E;
  --rose-light:  #B44D63;
  --rose-pale:   #F9EDEF;
  --rose-ultra:  #FDF5F6;

  --gold:        #C09B5A;
  --gold-l:      #D4B478;
  --gold-d:      #A07A3A;
  --gold-pale:   #FBF6EC;

  --ivory:       #FFFCF8;
  --cream:       #F7F2EC;
  --cream-d:     #EDE6DC;
  --white:       #FFFFFF;

  --ink:         #1A0A0F;
  --ink-mid:     #3D1F27;
  --ink-light:   #7A4D58;
  --ink-muted:   #B08A94;

  --green:       #1a7a4a;
  --green-bg:    #e6f5ee;
  --green-wa:    #25D366;

  --border:      #E8DDD8;
  --border-l:    #F0E8E4;

  --sh1: 0 1px 3px rgba(124,45,62,.06);
  --sh2: 0 4px 16px rgba(124,45,62,.10);
  --sh3: 0 12px 40px rgba(124,45,62,.16);
  --sh4: 0 24px 64px rgba(124,45,62,.22);

  --font: 'Tajawal', sans-serif;
  --r1: 6px;  --r2: 10px;  --r3: 16px;
  --r4: 22px; --r5: 32px;  --rF: 999px;
}

/* ── Reset ─────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--ivory);
  color: var(--ink);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display:block; max-width:100%; }
a   { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:var(--font); border:none; background:none; }

/* ══════════════════════════════════════════
   PHONE GATE
══════════════════════════════════════════ */
.gate {
  position:fixed; inset:0; z-index:9999;
  background: linear-gradient(160deg, #3D0F1A 0%, #7C2D3E 55%, #A07A3A 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gate-card {
  background:#fff; border-radius:var(--r5);
  padding:52px 44px; max-width:440px; width:100%;
  text-align:center; position:relative; overflow:hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1);
}
.gate-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--gold), var(--gold-l), var(--gold));
}
.gate-logo {
  width:100px; height:100px; margin:0 auto 28px;
  background:var(--rose-pale); border-radius:var(--r3);
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:hidden;
}
.gate-logo img { width:100%; height:100%; object-fit:contain; }
.gate-title {
  font-size:28px; font-weight:900; color:var(--rose);
  margin-bottom:8px; letter-spacing:-.3px;
}
.gate-sub {
  font-size:15px; color:var(--ink-light); line-height:1.8;
  margin-bottom:30px;
}
.gate-input {
  width:100%; padding:16px 22px;
  border:2px solid var(--border); border-radius:var(--r2);
  font-family:var(--font); font-size:17px; color:var(--ink);
  background:var(--cream); margin-bottom:14px;
  transition:border-color .25s, box-shadow .25s;
  text-align:center; direction:ltr; letter-spacing:1px;
}
.gate-input:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(192,155,90,.15);
}
.gate-btn {
  width:100%; padding:17px;
  background:linear-gradient(135deg, var(--rose), var(--rose-mid));
  color:#fff; border-radius:var(--r2);
  font-size:17px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 4px 20px rgba(124,45,62,.4);
  transition:all .3s;
}
.gate-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,45,62,.5); }
.gate-note {
  font-size:13px; color:var(--ink-muted); margin-top:16px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar {
  background:#fff; border-bottom:1px solid var(--border-l);
  position:sticky; top:0; z-index:200; height:70px;
  box-shadow:var(--sh1);
}
.navbar-inner {
  max-width:1200px; margin:0 auto; height:100%;
  padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
/* Brand */
.nav-brand { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-brand-logo {
  width:46px; height:46px; border-radius:var(--r2);
  background:var(--rose-pale); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding:8px; overflow:hidden; flex-shrink:0;
  transition:border-color .25s;
}
.nav-brand-logo:hover { border-color:var(--rose); }
.nav-brand-logo img { width:100%; height:100%; object-fit:contain; }
.nav-brand-name  { font-size:16px; font-weight:800; color:var(--rose); line-height:1.2; }
.nav-brand-title { font-size:11px; color:var(--ink-muted); font-weight:500; }

/* Nav links */
.nav-links { display:flex; gap:4px; }
.nav-link {
  padding:8px 16px; border-radius:var(--rF);
  font-size:14px; font-weight:600; color:var(--ink-light);
  transition:all .22s; white-space:nowrap;
}
.nav-link:hover  { background:var(--rose-pale); color:var(--rose); }
.nav-link.active { background:var(--rose-pale); color:var(--rose); font-weight:700; }

/* Nav right actions */
.nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-icon {
  width:38px; height:38px; border-radius:50%;
  background:var(--cream); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-light); font-size:15px; transition:all .25s;
}
.nav-icon:hover            { background:var(--rose); color:#fff; border-color:var(--rose); }
.nav-icon:hover.wa         { background:var(--green-wa); border-color:var(--green-wa); }
.nav-icon.wa:hover         { background:var(--green-wa); border-color:var(--green-wa); }
.nav-cta {
  padding:9px 20px; border-radius:var(--rF);
  background:linear-gradient(135deg,var(--rose),var(--rose-mid));
  color:#fff; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 2px 10px rgba(124,45,62,.3);
  transition:all .25s;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,45,62,.4); }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  width:40px; height:40px; align-items:center; justify-content:center;
  background:var(--cream); border:1px solid var(--border);
  border-radius:var(--r2); cursor:pointer;
}
.nav-hamburger span {
  display:block; width:18px; height:2px;
  background:var(--ink-mid); border-radius:2px; transition:all .3s;
}
/* Mobile nav */
.nav-mobile {
  display:none; position:absolute; top:70px; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--border);
  padding:12px 20px 16px; flex-direction:column; gap:2px;
  box-shadow:var(--sh3);
}
.nav-mobile.open { display:flex; }
.nav-mobile .nav-link { font-size:15px; padding:13px 16px; border-radius:var(--r2); }

/* ══════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════ */
.page-hero {
  background:linear-gradient(160deg, var(--rose-ultra) 0%, var(--cream) 60%, var(--gold-pale) 100%);
  padding:64px 28px 52px; text-align:center;
  border-bottom:1px solid var(--border-l); position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%);
  width:600px; height:400px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(124,45,62,.06), transparent 70%);
}
.page-hero-eye {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border);
  padding:6px 18px; border-radius:var(--rF);
  font-size:12px; color:var(--rose); font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  margin-bottom:18px; box-shadow:var(--sh1);
}
.page-hero-title {
  font-size:clamp(28px,5vw,48px); font-weight:900;
  color:var(--rose); margin-bottom:14px; line-height:1.15;
}
.page-hero-desc {
  font-size:16px; color:var(--ink-light);
  max-width:540px; margin:0 auto; line-height:1.85;
}

/* ══════════════════════════════════════════
   LAYOUT HELPERS
══════════════════════════════════════════ */
.container  { max-width:1200px; margin:0 auto; padding:0 28px; }
.section    { padding:88px 0; }
.section-alt { background:var(--cream); }

.sec-hd       { text-align:center; margin-bottom:52px; }
.sec-eye      { display:inline-block; font-size:11px; font-weight:700; letter-spacing:3px; color:var(--gold-d); text-transform:uppercase; margin-bottom:10px; }
.sec-title    { font-size:clamp(24px,4vw,38px); font-weight:900; color:var(--rose); margin-bottom:12px; }
.sec-line     { width:52px; height:3px; background:linear-gradient(90deg,var(--rose),var(--gold)); margin:0 auto 16px; border-radius:2px; }
.sec-desc     { font-size:15px; color:var(--ink-light); max-width:540px; margin:0 auto; line-height:1.85; }

/* ══════════════════════════════════════════
   HOMEPAGE HERO
══════════════════════════════════════════ */
.hero {
  background:linear-gradient(160deg, var(--cream) 0%, var(--cream-d) 50%, var(--rose-pale) 100%);
  padding:80px 0; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; bottom:-150px; left:-150px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(192,155,90,.07), transparent 70%);
  pointer-events:none;
}
.hero-grid {
  max-width:1200px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1fr 400px; gap:64px; align-items:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border);
  padding:9px 20px; border-radius:var(--rF);
  font-size:13px; color:var(--rose); font-weight:600;
  margin-bottom:24px; box-shadow:var(--sh1);
}
.hero-title {
  font-size:clamp(36px,6vw,64px);
  font-weight:900; line-height:1.12; margin-bottom:10px; letter-spacing:-.5px;
}
.hero-title .accent { color:var(--rose); }
.hero-title .gold   { color:var(--gold-d); }
.hero-role { font-size:18px; color:var(--ink-light); font-weight:500; margin-bottom:20px; }
.hero-quote {
  font-size:16px; line-height:2; color:var(--ink-mid);
  border-right:3px solid var(--gold);
  padding-right:20px; margin-bottom:36px; font-style:italic;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* Hero image */
.hero-img-wrap  { position:relative; }
.hero-img-frame {
  border-radius:var(--r5); overflow:hidden;
  box-shadow:var(--sh4); aspect-ratio:3/4; position:relative;
}
.hero-img-frame img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-img-badge {
  position:absolute; bottom:22px; right:22px;
  background:#fff; border-radius:var(--r3);
  padding:14px 18px; box-shadow:var(--sh3); text-align:center;
}
.hero-img-badge-num { font-size:28px; font-weight:900; color:var(--rose); line-height:1; }
.hero-img-badge-lbl { font-size:11px; color:var(--ink-muted); margin-top:3px; }

/* ══════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════ */
.stats-bar {
  background:linear-gradient(135deg, var(--rose) 0%, #3D0F1A 100%);
  padding:52px 0;
}
.stats-inner {
  max-width:1200px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-item { text-align:center; color:#fff; padding:16px 8px; }
.stat-item + .stat-item { border-right:1px solid rgba(255,255,255,.12); }
.stat-num { font-size:clamp(30px,5vw,48px); font-weight:900; color:var(--gold-l); line-height:1; margin-bottom:6px; }
.stat-lbl { font-size:14px; opacity:.8; font-weight:500; }

/* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
.about-grid {
  display:grid; grid-template-columns:380px 1fr; gap:72px; align-items:center;
}
.about-img-frame {
  border-radius:var(--r5); overflow:hidden;
  box-shadow:var(--sh4); aspect-ratio:3/4; position:relative;
}
.about-img-frame img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.about-img-badge {
  position:absolute; top:22px; right:22px;
  background:linear-gradient(135deg,var(--rose),var(--rose-mid));
  color:#fff; padding:10px 16px; border-radius:var(--r2);
  font-size:12px; font-weight:700; letter-spacing:.5px;
}
.about-eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; color:var(--gold-d); text-transform:uppercase; margin-bottom:12px; display:block; }
.about-title { font-size:clamp(26px,4vw,38px); font-weight:900; color:var(--rose); margin-bottom:20px; line-height:1.2; }
.about-quote {
  background:linear-gradient(135deg, var(--rose-pale), var(--cream));
  border-right:4px solid var(--rose);
  padding:18px 22px; border-radius:0 var(--r2) var(--r2) 0;
  font-size:16px; font-style:italic; color:var(--rose-mid);
  font-weight:600; line-height:1.75; margin:22px 0;
}
.about-body p { font-size:15px; line-height:2; color:var(--ink-mid); margin-bottom:14px; }
.about-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.about-tag {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:var(--rF);
  background:#fff; border:1.5px solid var(--border);
  font-size:13px; color:var(--ink-mid); font-weight:600;
  box-shadow:var(--sh1); transition:all .22s;
}
.about-tag:hover { border-color:var(--rose); color:var(--rose); }
.about-tag i { color:var(--gold-d); }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px;
}
.card {
  background:#fff; border-radius:var(--r4);
  border:1px solid var(--border-l);
  box-shadow:var(--sh1);
  transition:transform .3s, box-shadow .3s;
  display:flex; flex-direction:column; overflow:hidden;
}
.card:hover { transform:translateY(-5px); box-shadow:var(--sh3); }

.card-cover {
  aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,var(--rose-pale),var(--cream));
  display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
}
.card-cover img { width:100%; height:100%; object-fit:cover; }
.card-cover-icon { font-size:52px; color:var(--rose-light); opacity:.35; }

.card-lock {
  position:absolute; inset:0;
  background:rgba(28,10,15,.52);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; gap:8px; backdrop-filter:blur(3px);
}
.card-lock i    { font-size:26px; }
.card-lock span { font-size:13px; font-weight:600; }

.price-badge {
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg,var(--rose),var(--rose-mid));
  color:#fff; padding:5px 14px; border-radius:var(--rF);
  font-size:12px; font-weight:700;
}
.price-badge.free {
  background:linear-gradient(135deg, var(--green), #22c55e);
}

.card-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.card-type {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:1px;
  color:var(--rose); text-transform:uppercase; margin-bottom:8px;
}
.card-type i { color:var(--gold-d); }
.card-title { font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px; line-height:1.35; }
.card-desc  { font-size:14px; color:var(--ink-light); line-height:1.75; margin-bottom:14px; flex:1; }
.card-meta  { display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.card-meta-item { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-muted); }
.card-meta-item i { color:var(--gold-d); }
.card-foot  {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:14px; border-top:1px solid var(--border-l);
}
.card-price      { font-size:22px; font-weight:900; color:var(--rose); }
.card-price-free { font-size:14px; font-weight:700; color:var(--green); display:inline-flex; align-items:center; gap:5px; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:var(--rF);
  font-size:15px; font-weight:700; border:none;
  transition:all .28s; cursor:pointer; white-space:nowrap;
  font-family:var(--font);
}
.btn-bord {
  background:linear-gradient(135deg, var(--rose), var(--rose-mid));
  color:#fff; box-shadow:0 3px 16px rgba(124,45,62,.32);
}
.btn-bord:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,45,62,.42); }

.btn-gold-fill {
  background:linear-gradient(135deg, var(--gold), var(--gold-l));
  color:#fff; box-shadow:0 3px 16px rgba(192,155,90,.32);
}
.btn-gold-fill:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(192,155,90,.42); }

.btn-outline {
  background:transparent; color:var(--rose);
  border:2px solid var(--rose);
}
.btn-outline:hover { background:var(--rose); color:#fff; }

.btn-wa {
  background:#25D366; color:#fff;
  box-shadow:0 3px 16px rgba(37,211,102,.3);
}
.btn-wa:hover { background:#128C7E; transform:translateY(-1px); }

.btn-sm { padding:9px 18px; font-size:14px; }
.btn-xs { padding:6px 12px; font-size:13px; }

/* ══════════════════════════════════════════
   AUDIO
══════════════════════════════════════════ */
audio { width:100%; height:40px; accent-color:var(--rose); }

/* ══════════════════════════════════════════
   PDF LIST
══════════════════════════════════════════ */
.pdf-list { display:flex; flex-direction:column; gap:8px; }
.pdf-item {
  display:flex; align-items:center; gap:12px;
  background:var(--rose-ultra); border:1px solid var(--border-l);
  border-radius:var(--r2); padding:12px 16px;
}
.pdf-icon { color:var(--rose); font-size:20px; flex-shrink:0; }
.pdf-info { flex:1; min-width:0; }
.pdf-name { font-size:14px; font-weight:700; color:var(--ink-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-size { font-size:12px; color:var(--ink-muted); margin-top:2px; }
.pdf-dl {
  padding:8px 16px; background:var(--rose); color:#fff;
  border-radius:var(--r1); font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .25s; flex-shrink:0; text-decoration:none;
}
.pdf-dl:hover { background:var(--rose-mid); transform:translateY(-1px); }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.test-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.test-card {
  background:#fff; padding:28px; border-radius:var(--r4);
  border:1px solid var(--border-l); box-shadow:var(--sh1);
}
.test-stars  { color:var(--gold); margin-bottom:14px; letter-spacing:2px; font-size:16px; }
.test-text   { font-size:15px; line-height:1.9; color:var(--ink-mid); margin-bottom:18px; font-style:italic; }
.test-author { font-size:14px; font-weight:700; color:var(--rose); display:flex; align-items:center; gap:10px; }
.test-author::before { content:''; display:block; width:24px; height:2px; background:var(--gold); border-radius:2px; }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.modal {
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(28,10,15,.82); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:16px;
}
.modal.open { display:flex; }
.modal-box {
  background:#fff; border-radius:var(--r5);
  padding:36px; max-width:660px; width:100%;
  position:relative; max-height:90vh; overflow-y:auto;
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
}
.modal-close {
  position:absolute; top:14px; left:14px;
  width:36px; height:36px; border-radius:50%;
  background:var(--cream); border:1px solid var(--border);
  cursor:pointer; font-size:14px; color:var(--ink-mid);
  display:flex; align-items:center; justify-content:center;
  transition:all .22s;
}
.modal-close:hover { background:var(--rose); color:#fff; border-color:var(--rose); }
.modal-type  { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--gold-d); text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.modal-title { font-size:22px; font-weight:900; color:var(--rose); margin-bottom:12px; padding-left:44px; }
.modal-desc  { font-size:15px; color:var(--ink-light); line-height:1.85; margin-bottom:22px; }
.modal-audio-wrap {
  background:linear-gradient(135deg,var(--rose-pale),var(--cream));
  border-radius:var(--r3); padding:20px;
  border:1px solid var(--border-l); margin-bottom:10px;
}
.modal-audio-label { font-size:13px; color:var(--ink-muted); margin-bottom:10px; display:flex; align-items:center; gap:6px; font-weight:600; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:99999;
  background:var(--ink); color:#fff;
  padding:14px 22px; border-radius:var(--r3);
  font-size:15px; font-weight:600;
  transform:translateY(100px); opacity:0;
  transition:all .4s ease; pointer-events:none;
  box-shadow:var(--sh4);
}
.toast.show { transform:translateY(0); opacity:1; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  background:linear-gradient(160deg, #1A0A0F 0%, #3D1F27 100%);
  color:rgba(255,255,255,.78); padding:64px 0 28px;
}
.footer-inner  { max-width:1200px; margin:0 auto; padding:0 28px; }
.footer-grid   { display:grid; grid-template-columns:2fr 1fr 1fr; gap:52px; margin-bottom:48px; }
.footer-brand-logo { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.footer-logo-img {
  width:50px; height:50px; border-radius:var(--r2);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; padding:10px; overflow:hidden;
}
.footer-logo-img img { width:100%; filter:brightness(0) invert(1) opacity(.9); }
.footer-brand-name { font-size:16px; font-weight:800; color:var(--gold-l); }
.footer-brand-sub  { font-size:12px; color:rgba(255,255,255,.4); margin-top:2px; }
.footer-brand-desc { font-size:14px; line-height:1.9; opacity:.62; }
.footer-social { display:flex; gap:10px; margin-top:20px; }
.footer-social a {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.65); font-size:15px; transition:all .25s;
}
.footer-social a:hover { background:var(--rose); border-color:var(--rose); color:#fff; }
.footer-col h4 { font-size:12px; font-weight:700; color:var(--gold-l); margin-bottom:18px; letter-spacing:1px; text-transform:uppercase; }
.footer-col ul { list-style:none; }
.footer-col ul li a {
  font-size:14px; color:rgba(255,255,255,.58); line-height:2.4;
  display:flex; align-items:center; gap:9px; transition:color .22s;
}
.footer-col ul li a i { color:var(--gold-d); width:14px; text-align:center; font-size:12px; }
.footer-col ul li a:hover { color:var(--gold-l); }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin-bottom:22px; }
.footer-bottom  { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-copy    { font-size:13px; opacity:.38; }
.footer-tagline { font-size:13px; opacity:.38; }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.empty-state { text-align:center; padding:72px 20px; grid-column:1/-1; }
.empty-state i { font-size:54px; color:var(--border); display:block; margin-bottom:18px; }
.empty-state h3 { font-size:20px; font-weight:700; color:var(--ink-light); margin-bottom:8px; }
.empty-state p  { font-size:15px; color:var(--ink-muted); }

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 1024px)
══════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-grid   { grid-template-columns:1fr 340px; gap:48px; }
  .about-grid  { grid-template-columns:300px 1fr; gap:48px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-grid .footer-brand { grid-column:1/-1; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
══════════════════════════════════════════ */
@media (max-width:768px) {
  /* Navbar */
  .navbar-inner { padding:0 16px; }
  .nav-links  { display:none; }
  .nav-cta    { display:none; }
  .nav-icon   { width:34px; height:34px; font-size:14px; }
  .nav-hamburger { display:flex; }

  /* Hero */
  .hero { padding:48px 0 52px; }
  .hero-grid {
    grid-template-columns:1fr; gap:0;
    display:flex; flex-direction:column-reverse;
  }
  .hero-grid > .hero-img-wrap {
    max-width:280px; width:100%; margin:0 auto 32px;
  }
  .hero-title { font-size:38px; }
  .hero-btns  { flex-direction:column; }
  .hero-btns .btn { width:100%; justify-content:center; }

  /* Stats */
  .stats-inner {
    grid-template-columns:repeat(2,1fr);
  }
  .stat-item + .stat-item { border-right:none; }
  .stat-item { border-bottom:1px solid rgba(255,255,255,.1); }
  .stat-item:nth-child(even) { border-right:1px solid rgba(255,255,255,.1); }
  .stat-item:nth-last-child(-n+2) { border-bottom:none; }

  /* About */
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .about-img-frame { max-width:280px; margin:0 auto; }

  /* Layout */
  .container { padding:0 16px; }
  .section   { padding:56px 0; }

  /* Cards */
  .cards-grid { grid-template-columns:1fr; gap:16px; }

  /* Footer */
  .footer { padding:44px 0 20px; }
  .footer-inner { padding:0 16px; }
  .footer-grid  { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }

  /* Gate */
  .gate-card { padding:36px 22px; }

  /* Page hero */
  .page-hero { padding:48px 16px 40px; }

  /* Modal */
  .modal-box { padding:24px 16px; border-radius:var(--r4); }
  .modal-title { font-size:18px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
══════════════════════════════════════════ */
@media (max-width:480px) {
  .hero-title { font-size:32px; }
  .stat-num   { font-size:30px; }
  .section    { padding:44px 0; }
  .nav-icon.hide-xs { display:none; }
}

/* ═══════════════════════════════════════════════════
   ADVANCED EFFECTS LAYER — v4
   Glassmorphism · Scroll Reveals · Ripples · Micro-interactions
   ═══════════════════════════════════════════════════ */

/* ── Page loader bar ── */
.page-loader{
  position:fixed; top:0; right:0; left:0; height:3px; z-index:99999;
  width:0%; background:linear-gradient(90deg,var(--gold),var(--rose-l),var(--gold));
  background-size:200% 100%;
  animation:loaderShimmer 1.2s linear infinite;
  transition:width .4s ease, opacity .4s ease;
  border-radius:0 0 4px 4px;
}
@keyframes loaderShimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

/* ── Smoother base transitions ── */
a, button, .card, .nav-link, .nav-icon, .btn { transition-timing-function: cubic-bezier(.4,0,.2,1); }

/* ════════════════════════════════
   NAVBAR — glass on scroll
════════════════════════════════ */
.navbar{
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, height .3s ease;
}
.navbar.scrolled{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(124,45,62,.10);
  height:64px;
}
.navbar.scrolled .navbar-inner{ height:64px; }
.navbar.scrolled .nav-brand-logo{ width:40px; height:40px; }

/* nav-link underline grow animation */
.nav-link{ position:relative; overflow:hidden; }
.nav-link span{ position:relative; z-index:1; }
.nav-link::before{
  content:''; position:absolute; inset:0;
  background:var(--rose-pale); border-radius:var(--rF);
  transform:scaleX(0); transform-origin:center;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.nav-link:hover::before, .nav-link.active::before{ transform:scaleX(1); }
.nav-link:hover, .nav-link.active{ background:transparent; }

/* nav icons bounce */
.nav-icon{ transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, border-color .25s; }
.nav-icon:hover{ transform: translateY(-3px) scale(1.08); }
.nav-icon.wa:hover{ transform: translateY(-3px) scale(1.1) rotate(-6deg); }

.nav-cta{ position:relative; overflow:hidden; }
.nav-cta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.nav-cta:hover::after{ transform:translateX(120%); }

/* brand logo subtle float */
.nav-brand-logo{ transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .25s; }
.nav-brand:hover .nav-brand-logo{ transform: rotate(-4deg) scale(1.06); border-color:var(--gold); }

/* ════════════════════════════════
   HAMBURGER — morphs to X
════════════════════════════════ */
.nav-hamburger{ transition: background .25s, border-color .25s; }
.nav-hamburger span{ transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .25s; }
.nav-hamburger.active{ background:var(--rose); border-color:var(--rose); }
.nav-hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); background:#fff; }
.nav-hamburger.active span:nth-child(2){ opacity:0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); background:#fff; }

/* ════════════════════════════════
   MOBILE NAV — glass slide panel
════════════════════════════════ */
.nav-overlay{
  position:fixed; inset:0; z-index:400;
  background:rgba(26,10,15,0);
  backdrop-filter:blur(0px);
  pointer-events:none;
  transition: background .4s ease, backdrop-filter .4s ease;
}
.nav-overlay.open{
  background:rgba(26,10,15,.45);
  backdrop-filter:blur(3px);
  pointer-events:auto;
}

.nav-mobile{
  position:fixed; top:0; left:0; bottom:0; z-index:401;
  width:min(86vw, 360px);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,.4);
  box-shadow: -10px 0 50px rgba(26,10,15,.25);
  transform: translateX(-105%);
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column;
  padding: 28px 22px;
  overflow-y:auto;
}
.nav-mobile.open{ transform: translateX(0); }

.nav-mobile-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:22px; margin-bottom:18px;
  border-bottom:1px solid rgba(124,45,62,.12);
}
.nav-mobile-logo{
  width:50px; height:50px; border-radius:14px;
  background:rgba(255,255,255,.6); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:10px; overflow:hidden;
}
.nav-mobile-logo img{ width:100%; height:100%; object-fit:contain; }
.nav-mobile-name{ font-size:15px; font-weight:800; color:var(--rose); }
.nav-mobile-sub{ font-size:11px; color:var(--ink-mu); margin-top:2px; }

.nav-mobile-links{ display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-mobile-link{
  display:flex; align-items:center; gap:14px;
  padding:15px 14px; border-radius:14px;
  font-size:15px; font-weight:700; color:var(--ink-m);
  opacity:0; transform:translateX(-24px);
  transition: background .22s, color .22s, transform .22s;
}
.nav-mobile.open .nav-mobile-link{
  animation: navItemIn .42s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(.08s + var(--d) * .055s);
}
@keyframes navItemIn{ to{ opacity:1; transform:translateX(0); } }
.nav-mobile-link i:first-child{
  width:34px; height:34px; border-radius:10px;
  background:var(--rose-pale); color:var(--rose);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  flex-shrink:0; transition:background .22s, color .22s;
}
.nav-mobile-link span{ flex:1; }
.nav-mobile-link .arrow{ font-size:11px; color:var(--ink-mu); opacity:0; transform:translateX(-6px); transition:all .22s; }
.nav-mobile-link:active{ background:var(--rose-pale); transform:scale(.98) translateX(0); }
.nav-mobile-link.active{ background:var(--rose-pale); }
.nav-mobile-link.active i:first-child{ background:var(--rose); color:#fff; }
.nav-mobile-link:hover .arrow, .nav-mobile-link.active .arrow{ opacity:1; transform:translateX(0); }

.nav-mobile-foot{
  padding-top:18px; border-top:1px solid rgba(124,45,62,.12);
  opacity:0; transform:translateY(14px);
}
.nav-mobile.open .nav-mobile-foot{
  animation: navItemUp .42s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(.08s + var(--d) * .055s);
}
@keyframes navItemUp{ to{ opacity:1; transform:translateY(0); } }
.nav-mobile-wa{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#25D366; color:#fff; padding:14px; border-radius:14px;
  font-size:14px; font-weight:700; margin-bottom:16px;
  box-shadow:0 4px 16px rgba(37,211,102,.3); transition:transform .25s;
}
.nav-mobile-wa:active{ transform:scale(.97); }
.nav-mobile-social{ display:flex; gap:10px; justify-content:center; }
.nav-mobile-social a{
  width:42px; height:42px; border-radius:50%;
  background:var(--cream); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-l); font-size:16px; transition:all .25s;
}
.nav-mobile-social a:active{ background:var(--rose); color:#fff; transform:scale(.92); }

body.nav-lock{ overflow:hidden; }

/* ════════════════════════════════
   GATE — animated entrance + blobs
════════════════════════════════ */
.gate{ overflow:hidden; }
.gate-blob{
  position:absolute; border-radius:50%; filter:blur(60px);
  opacity:.35; pointer-events:none;
  animation: blobFloat 9s ease-in-out infinite;
}
.gate-blob-1{
  width:380px; height:380px; top:-120px; right:-100px;
  background:radial-gradient(circle, var(--gold-l), transparent 70%);
  animation-delay:0s;
}
.gate-blob-2{
  width:320px; height:320px; bottom:-100px; left:-100px;
  background:radial-gradient(circle, var(--rose-l), transparent 70%);
  animation-delay:-4.5s;
}
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-30px) scale(1.12); }
}
.gate-card{
  animation: gatePopIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes gatePopIn{
  from{ opacity:0; transform:scale(.88) translateY(24px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.gate-logo{ animation: logoSpin .7s cubic-bezier(.34,1.56,.64,1) .15s both; }
@keyframes logoSpin{
  from{ opacity:0; transform:rotate(-12deg) scale(.6); }
  to{ opacity:1; transform:rotate(0) scale(1); }
}
.gate-input-wrap{ position:relative; }
.gate-input{ position:relative; }
.gate-input:focus{ transform:scale(1.015); }

.gate-btn{ position:relative; overflow:hidden; }
.gate-btn-loader{
  display:none; position:absolute; inset:0;
  align-items:center; justify-content:center;
}
.gate-btn-loader::after{
  content:''; width:20px; height:20px; border-radius:50%;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation: spin .7s linear infinite;
}
.gate-btn.loading .gate-btn-text{ opacity:0; }
.gate-btn.loading .gate-btn-loader{ display:flex; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ════════════════════════════════
   RIPPLE EFFECT (buttons)
════════════════════════════════ */
.btn, .nav-cta, .pdf-dl{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.5);
  transform:scale(0); opacity:1;
  animation: rippleAnim .65s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleAnim{
  to{ transform:scale(1); opacity:0; }
}
.btn-outline .ripple{ background:rgba(124,45,62,.18); }

/* ════════════════════════════════
   BUTTON micro-interactions
════════════════════════════════ */
.btn{ transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s; }
.btn:active{ transform: scale(.96) !important; }
.btn i{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.btn:hover i{ transform: translateX(-3px); }
.btn-wa:hover i{ transform: scale(1.15) rotate(-8deg); }

/* ════════════════════════════════
   CARD hover polish
════════════════════════════════ */
.card{
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s;
}
.card:hover{
  transform: translateY(-8px);
  border-color: rgba(124,45,62,.18);
}
.card-cover img{ transition: transform .55s cubic-bezier(.16,1,.3,1); }
.card:hover .card-cover img{ transform: scale(1.07); }
.card-cover-icon{ transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.card:hover .card-cover-icon{ transform: scale(1.1) rotate(-5deg); }
.price-badge{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.card:hover .price-badge{ transform: translateY(-2px) scale(1.05); }

/* ════════════════════════════════
   ABOUT TAG hover
════════════════════════════════ */
.about-tag{ transition: all .28s cubic-bezier(.34,1.56,.64,1); }
.about-tag:hover{ transform: translateY(-3px) scale(1.04); box-shadow: var(--sh2); }

/* ════════════════════════════════
   STAT NUMBERS pop
════════════════════════════════ */
.stat-item{ transition: transform .3s ease; }
.stat-num{ display:inline-block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.stat-item:hover .stat-num{ transform: scale(1.08); }

/* ════════════════════════════════
   TESTIMONIAL hover
════════════════════════════════ */
.test-card{ transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.test-card:hover{ transform: translateY(-6px) rotate(-.3deg); box-shadow:var(--sh3); }
.test-stars{ display:inline-block; }
.test-card:hover .test-stars{ animation: starsPulse .5s ease; }
@keyframes starsPulse{ 50%{ transform:scale(1.1); } }

/* ════════════════════════════════
   MODAL — smoother open/close
════════════════════════════════ */
.modal{
  transition: background .25s ease;
}
.modal-box{
  transform: scale(.9) translateY(30px); opacity:0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.modal.open .modal-box{ transform: scale(1) translateY(0); opacity:1; }
.modal.closing .modal-box{ transform: scale(.92) translateY(16px); opacity:0; }
.modal-close{ transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.modal-close:hover{ transform: rotate(90deg); }

/* ════════════════════════════════
   PDF row hover
════════════════════════════════ */
.pdf-item{ transition: transform .25s, box-shadow .25s, border-color .25s; }
.pdf-item:hover{ transform: translateX(-4px); border-color: var(--rose); box-shadow:var(--sh1); }
.pdf-dl{ transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.pdf-dl:hover{ transform: translateY(-2px) scale(1.04); }

/* ════════════════════════════════
   SCROLL REVEAL ANIMATIONS
════════════════════════════════ */
.reveal{
  opacity:0; transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-in{ opacity:1; transform:translateY(0); }

/* Stagger children inside cards-grid */
.cards-grid .card.reveal{ transition-delay: calc(var(--i, 0) * 60ms); }

/* Hero entrance (always animate on load, not scroll-based) */
.hero-text{ animation: heroTextIn .8s cubic-bezier(.16,1,.3,1) both; }
.hero-img-wrap{ animation: heroImgIn .9s cubic-bezier(.16,1,.3,1) .12s both; }
@keyframes heroTextIn{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes heroImgIn{ from{ opacity:0; transform:translateX(-28px) scale(.96); } to{ opacity:1; transform:none; } }
.hero-badge{ animation: badgePop .6s cubic-bezier(.34,1.56,.64,1) .2s both; }
@keyframes badgePop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }

/* Floating accent on hero image badge */
.hero-img-badge{ animation: floatY 3.2s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ════════════════════════════════
   TOAST bounce
════════════════════════════════ */
.toast{ transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease; }

/* ════════════════════════════════
   PAGE HERO entrance
════════════════════════════════ */
.page-hero-eye{ animation: badgePop .55s cubic-bezier(.34,1.56,.64,1) .05s both; }
.page-hero-title{ animation: heroTextIn .6s cubic-bezier(.16,1,.3,1) .12s both; }
.page-hero-desc{ animation: heroTextIn .6s cubic-bezier(.16,1,.3,1) .2s both; }

/* ════════════════════════════════
   LINK underline sweep (footer + about)
════════════════════════════════ */
.footer-col ul li a{ position:relative; }
.footer-col ul li a i{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.footer-col ul li a:hover i{ transform: translateX(-3px) scale(1.15); }
.footer-social a{ transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.footer-social a:hover{ transform: translateY(-4px) rotate(-6deg); }

/* ════════════════════════════════
   REDUCED MOTION SUPPORT
════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════
   MOBILE TUNING for new effects
════════════════════════════════ */
@media (max-width:768px){
  .gate-blob{ display:none; }
  .nav-mobile{ width:88vw; padding:24px 18px; }
}