/* ==========================================================================
   PakMatch theme styles
   Ported from the original Tailwind config (emerald / gold / rose / cream)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@500;700&display=swap');

:root{
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-200:#a7f3d0; --emerald-300:#6ee7b7;
  --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --emerald-800:#065f46; --emerald-900:#064e3b; --emerald-950:#022c22;

  --gold-50:#fffbeb; --gold-100:#fef3c7; --gold-200:#fde68a; --gold-300:#fcd34d; --gold-400:#fbbf24;
  --gold-500:#f59e0b; --gold-600:#d97706; --gold-700:#b45309; --gold-800:#92400e; --gold-900:#78350f;

  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-400:#fb7185; --rose-500:#f43f5e; --rose-600:#e11d48;

  --cream-50:#fdfaf5; --cream-100:#faf3e8; --cream-200:#f5e6d0;

  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af;
  --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --gray-950:#030712;

  --shadow-glass: 0 8px 32px rgba(31,38,135,.07);
  --shadow-gold: 0 4px 24px rgba(245,158,11,.25);
  --shadow-emerald: 0 4px 24px rgba(5,150,105,.25);
  --shadow-luxury: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', serif;

  --bg: var(--cream-50);
  --fg: #1a1a1a;
}

html.dark-mode{ --bg:#0a0f0d; --fg:#f0ede8; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.pakmatch{
  margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; transition:background-color .3s,color .3s;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:1280px; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .container{ padding:0 1.5rem; } }
@media(min-width:1024px){ .container{ padding:0 2rem; } }

.section-title{ font-family:var(--font-serif); font-size:2.5rem; font-weight:600; line-height:1.15; margin:0; }
@media(min-width:768px){ .section-title{ font-size:3rem; } }

.text-gradient-gold{ background:linear-gradient(90deg,var(--gold-500),var(--gold-400),var(--gold-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-gradient-emerald{ background:linear-gradient(90deg,var(--emerald-600),var(--emerald-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; padding:.85rem 1.5rem; border-radius:.85rem; border:none; transition:all .2s; font-size:.95rem; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--emerald-600); color:#fff; box-shadow:var(--shadow-emerald); }
.btn-primary:hover{ background:var(--emerald-700); }
.btn-gold{ background:linear-gradient(90deg,var(--gold-500),var(--gold-600)); color:#fff; box-shadow:var(--shadow-gold); }
.btn-outline{ background:transparent; border:2px solid var(--emerald-600); color:var(--emerald-700); }
.btn-outline:hover{ background:var(--emerald-600); color:#fff; }
.btn-lg{ padding:1rem 2rem; font-size:1rem; }
.btn-sm{ padding:.5rem 1rem; font-size:.85rem; }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:600; padding:.35rem .75rem; border-radius:999px; }
.badge-verified{ background:var(--emerald-100); color:var(--emerald-700); }
.badge-premium{ background:linear-gradient(90deg,var(--gold-100),var(--gold-200)); color:var(--gold-800); }
html.dark-mode .badge-verified{ background:rgba(5,150,105,.2); color:var(--emerald-300); }
html.dark-mode .badge-premium{ background:rgba(217,119,6,.2); color:var(--gold-300); }

.glass-card{ background:rgba(255,255,255,.7); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.4); box-shadow:var(--shadow-glass); }
html.dark-mode .glass-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

/* Islamic pattern background (matches original SVG data-uri) */
.pattern-bg{ position:absolute; inset:0; opacity:.4; background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23059669' fill-opacity='0.05'%3E%3Cpath d='M40 0L50 20L70 20L55 32L62 52L40 40L18 52L25 32L10 20L30 20Z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:50; transition:all .3s; background:transparent; }
.navbar.is-scrolled{ background:rgba(255,255,255,.9); backdrop-filter:blur(20px); box-shadow:var(--shadow-luxury); border-bottom:1px solid rgba(167,243,208,.5); }
html.dark-mode .navbar.is-scrolled{ background:rgba(3,7,18,.9); border-bottom-color:rgba(6,78,59,.3); }
.navbar__inner{ display:flex; align-items:center; justify-content:space-between; height:5rem; }
.navbar__logo{ display:flex; align-items:center; gap:.5rem; background:none; border:none; padding:0; }
.navbar__logo-mark{ width:2.25rem; height:2.25rem; border-radius:.75rem; background:linear-gradient(135deg,var(--emerald-600),var(--emerald-800)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-emerald); }
.navbar__logo-mark span{ color:#fff; font-family:var(--font-serif); font-weight:700; font-size:1.1rem; }
.navbar__logo-text{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.navbar__logo-text b{ font-family:var(--font-serif); font-size:1.25rem; color:var(--emerald-800); }
html.dark-mode .navbar__logo-text b{ color:var(--emerald-400); }
.navbar__logo-text small{ font-size:.6rem; color:var(--gold-600); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }

.navbar__links{ display:none; align-items:center; gap:.25rem; }
@media(min-width:768px){ .navbar__links{ display:flex; } }
.navbar__link{ background:none; border:none; padding:.5rem 1rem; border-radius:.5rem; font-size:.9rem; font-weight:500; color:var(--gray-700); }
.navbar__link:hover{ background:var(--emerald-50); color:var(--emerald-700); }
html.dark-mode .navbar__link{ color:var(--gray-300); }
html.dark-mode .navbar__link:hover{ background:rgba(5,150,105,.15); color:var(--emerald-400); }

.navbar__actions{ display:flex; align-items:center; gap:.5rem; }
.icon-btn{ background:none; border:none; padding:.5rem; border-radius:.5rem; color:var(--gray-600); position:relative; }
.icon-btn:hover{ background:var(--gray-100); }
html.dark-mode .icon-btn{ color:var(--gray-400); }
html.dark-mode .icon-btn:hover{ background:var(--gray-800); }
.icon-btn .dot{ position:absolute; top:2px; right:2px; width:1rem; height:1rem; border-radius:999px; background:var(--rose-500); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

.navbar__auth{ display:flex; align-items:center; gap:.5rem; }
.navbar__signin{ display:none; background:none; border:none; padding:.5rem 1rem; font-size:.9rem; font-weight:500; color:var(--emerald-700); border-radius:.5rem; }
@media(min-width:640px){ .navbar__signin{ display:inline-block; } }
html.dark-mode .navbar__signin{ color:var(--emerald-400); }

.user-menu{ position:relative; }
.user-menu__trigger{ display:flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-radius:.85rem; background:var(--emerald-50); border:none; }
html.dark-mode .user-menu__trigger{ background:rgba(5,150,105,.2); }
.user-menu__avatar{ width:1.75rem; height:1.75rem; border-radius:999px; background:var(--emerald-200); color:var(--emerald-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.user-menu__dropdown{ position:absolute; right:0; top:calc(100% + .5rem); width:14rem; background:#fff; border-radius:1rem; box-shadow:var(--shadow-luxury); border:1px solid var(--gray-100); overflow:hidden; display:none; }
.user-menu.is-open .user-menu__dropdown{ display:block; }
html.dark-mode .user-menu__dropdown{ background:var(--gray-900); border-color:var(--gray-800); }
.user-menu__head{ padding:.85rem 1rem; border-bottom:1px solid var(--gray-100); }
html.dark-mode .user-menu__head{ border-color:var(--gray-800); }
.user-menu__item{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.65rem 1rem; background:none; border:none; font-size:.85rem; color:var(--gray-700); }
.user-menu__item:hover{ background:var(--emerald-50); }
html.dark-mode .user-menu__item{ color:var(--gray-300); }
html.dark-mode .user-menu__item:hover{ background:rgba(5,150,105,.15); }
.user-menu__item.danger{ color:var(--rose-600); }

.navbar__mobile-toggle{ display:inline-flex; background:none; border:none; padding:.5rem; border-radius:.5rem; color:var(--gray-600); }
@media(min-width:768px){ .navbar__mobile-toggle{ display:none; } }

.navbar__mobile-menu{ display:none; border-top:1px solid var(--gray-100); padding:.75rem 0; }
.navbar__mobile-menu.is-open{ display:block; }
html.dark-mode .navbar__mobile-menu{ border-color:var(--gray-800); }
.navbar__mobile-menu .navbar__link{ display:block; width:100%; text-align:left; padding:.65rem 1rem; }
.navbar__mobile-auth{ display:flex; gap:.5rem; padding:.5rem 1rem 0; }
.navbar__mobile-auth .btn{ flex:1; justify-content:center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--cream-50); }
html.dark-mode .hero{ background:var(--gray-950); }
.hero__glow-1{ position:absolute; top:5rem; right:0; width:600px; height:600px; border-radius:999px; background:radial-gradient(circle,rgba(167,243,208,.4),transparent 70%); filter:blur(60px); }
.hero__glow-2{ position:absolute; bottom:0; left:0; width:400px; height:400px; border-radius:999px; background:radial-gradient(circle,rgba(253,230,138,.3),transparent 70%); filter:blur(60px); }
.hero__inner{ position:relative; padding:6rem 0 4rem; display:grid; gap:3rem; align-items:center; }
@media(min-width:1024px){ .hero__inner{ grid-template-columns:1fr 1fr; gap:4rem; } }
.hero__content{ order:2; }
.hero__visual{ order:1; }
@media(min-width:1024px){ .hero__content{ order:1; } .hero__visual{ order:2; } }

.hero__quote{ display:inline-flex; align-items:center; gap:.75rem; background:rgba(255,255,255,.8); border:1px solid rgba(167,243,208,.6); border-radius:1rem; padding:.75rem 1rem; margin-bottom:2rem; }
html.dark-mode .hero__quote{ background:rgba(255,255,255,.05); border-color:rgba(6,78,59,.4); }
.hero__quote-icon{ width:2rem; height:2rem; border-radius:999px; background:var(--emerald-100); color:var(--emerald-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
html.dark-mode .hero__quote-icon{ background:rgba(5,150,105,.3); }
.hero__quote-arabic{ font-family:var(--font-urdu); font-size:.85rem; color:var(--emerald-700); text-align:right; }
html.dark-mode .hero__quote-arabic{ color:var(--emerald-400); }
.hero__quote-ref{ font-size:.75rem; color:var(--gray-500); margin-top:.15rem; }

.hero h1{ font-family:var(--font-serif); font-size:2.75rem; font-weight:700; line-height:1.1; margin:0 0 1.5rem; color:var(--gray-900); }
html.dark-mode .hero h1{ color:#fff; }
@media(min-width:768px){ .hero h1{ font-size:3.75rem; } }
@media(min-width:1024px){ .hero h1{ font-size:4.5rem; } }

.hero p.lede{ font-size:1.125rem; color:var(--gray-600); line-height:1.7; margin:0 0 2rem; max-width:32rem; }
html.dark-mode .hero p.lede{ color:var(--gray-400); }

.hero__badges{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.hero__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(min-width:640px){ .hero__stats{ grid-template-columns:repeat(4,1fr); } }
.hero__stat{ text-align:center; }
.hero__stat-icon{ color:var(--emerald-600); margin-bottom:.25rem; }
html.dark-mode .hero__stat-icon{ color:var(--emerald-400); }
.hero__stat-value{ font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--gray-900); }
html.dark-mode .hero__stat-value{ color:#fff; }
.hero__stat-label{ font-size:.75rem; color:var(--gray-500); }

.hero__figure{ position:relative; border-radius:1.5rem; overflow:hidden; box-shadow:var(--shadow-luxury); aspect-ratio:4/5; max-width:28rem; margin:0 auto; }
.hero__figure img{ width:100%; height:100%; object-fit:cover; }
.hero__figure-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(2,44,34,.6),transparent 60%); }
.hero__figure-card{ position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem; border-radius:1rem; padding:1rem; }
.hero__figure-card-row{ display:flex; align-items:center; gap:.75rem; }
.hero__figure-avatar{ width:2.5rem; height:2.5rem; border-radius:999px; background:var(--emerald-100); color:var(--emerald-700); display:flex; align-items:center; justify-content:center; font-weight:700; }
.hero__figure-card-name{ font-size:.9rem; font-weight:600; color:#1f2937; margin:0; }
.hero__figure-card-sub{ font-size:.75rem; color:#6b7280; margin:0; }
.hero__figure-match{ margin-left:auto; text-align:right; }
.hero__figure-match b{ font-size:1.1rem; color:var(--emerald-600); display:block; }
.hero__figure-match span{ font-size:.7rem; color:#6b7280; }

.hero__float{ position:absolute; border-radius:1rem; padding:.65rem .85rem; }
.hero__float--tl{ top:-1rem; left:-1rem; display:none; }
.hero__float--br{ bottom:-1rem; right:-1rem; display:none; }
@media(min-width:640px){ .hero__float--tl, .hero__float--br{ display:block; } }
.hero__float-row{ display:flex; align-items:center; gap:.5rem; }
.hero__float-icon{ width:2rem; height:2rem; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.hero__float-icon--gold{ background:var(--gold-100); color:var(--gold-600); }
.hero__float-icon--emerald{ background:var(--emerald-100); color:var(--emerald-600); }
.hero__float b{ font-size:.75rem; color:#1f2937; display:block; }
.hero__float span{ font-size:.6rem; color:#6b7280; }

.hero__figure-2{ position:absolute; top:2rem; right:-2rem; width:9rem; height:12rem; border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-luxury); border:4px solid #fff; display:none; }
html.dark-mode .hero__figure-2{ border-color:var(--gray-900); }
@media(min-width:1024px){ .hero__figure-2{ display:block; } }

.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero__scroll span{ font-size:.7rem; color:var(--gray-400); letter-spacing:.2em; text-transform:uppercase; }
.hero__scroll-pill{ width:1.25rem; height:2rem; border-radius:999px; border:2px solid var(--gray-300); display:flex; justify-content:center; padding-top:.4rem; }
.hero__scroll-pill i{ width:.25rem; height:.5rem; border-radius:999px; background:var(--emerald-500); display:block; }

/* ==========================================================================
   Sections shared
   ========================================================================== */
.section{ position:relative; padding:6rem 0; overflow:hidden; }
.section--cream{ background:var(--cream-50); }
html.dark-mode .section--cream{ background:var(--gray-900); }
.section__eyebrow{ display:inline-block; color:var(--emerald-600); font-size:.85rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; margin-bottom:1rem; }
html.dark-mode .section__eyebrow{ color:var(--emerald-400); }
.section__head{ text-align:center; max-width:40rem; margin:0 auto 4rem; position:relative; }
.section__lede{ color:var(--gray-500); font-size:1.1rem; margin-top:1rem; }
html.dark-mode .section__lede{ color:var(--gray-400); }
.section__title-row{ color:var(--gray-900); }
html.dark-mode .section__title-row{ color:#fff; }

/* Features grid */
.features-grid{ position:relative; display:grid; gap:2rem; grid-template-columns:1fr; }
@media(min-width:640px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .features-grid{ grid-template-columns:repeat(3,1fr); } }
.feature-card{ background:#fff; border-radius:1.25rem; padding:2rem; box-shadow:var(--shadow-glass); border:1px solid var(--gray-100); transition:transform .2s, box-shadow .2s; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-luxury); }
html.dark-mode .feature-card{ background:rgba(255,255,255,.03); border-color:var(--gray-800); }
.feature-card__icon{ width:3.25rem; height:3.25rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.feature-card__icon--emerald{ background:var(--emerald-100); color:var(--emerald-700); }
.feature-card__icon--gold{ background:var(--gold-100); color:var(--gold-700); }
.feature-card__icon--rose{ background:var(--rose-100); color:var(--rose-600); }
html.dark-mode .feature-card__icon--emerald{ background:rgba(5,150,105,.2); }
html.dark-mode .feature-card__icon--gold{ background:rgba(217,119,6,.2); }
html.dark-mode .feature-card__icon--rose{ background:rgba(225,29,72,.2); }
.feature-card h3{ font-family:var(--font-serif); font-size:1.3rem; margin:0 0 .35rem; color:var(--gray-900); }
html.dark-mode .feature-card h3{ color:#fff; }
.feature-card .urdu{ font-family:var(--font-urdu); font-size:.8rem; color:var(--emerald-600); margin:0 0 .75rem; }
.feature-card p{ color:var(--gray-500); font-size:.9rem; line-height:1.65; margin:0; }
html.dark-mode .feature-card p{ color:var(--gray-400); }

/* How it works */
.steps-grid{ position:relative; display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media(min-width:768px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .steps-grid{ grid-template-columns:repeat(4,1fr); } }
.step{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.step__icon-wrap{ position:relative; margin-bottom:1.5rem; }
.step__icon{ width:4rem; height:4rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; border:1px solid; box-shadow:var(--shadow-glass); }
.step__num{ position:absolute; top:-.5rem; right:-.5rem; width:1.75rem; height:1.75rem; border-radius:999px; background:#fff; border:2px solid; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
html.dark-mode .step__num{ background:var(--gray-900); }
.step h3{ font-family:var(--font-serif); font-size:1.25rem; margin:0 0 .25rem; color:var(--gray-900); }
html.dark-mode .step h3{ color:#fff; }
.step .urdu{ font-family:var(--font-urdu); font-size:.75rem; font-weight:500; margin:0 0 .75rem; }
.step p{ color:var(--gray-500); font-size:.9rem; line-height:1.6; margin:0; }
html.dark-mode .step p{ color:var(--gray-400); }
.tone-emerald{ color:var(--emerald-700); border-color:var(--emerald-200); }
.tone-gold{ color:var(--gold-700); border-color:var(--gold-200); }
.tone-rose{ color:var(--rose-600); border-color:var(--rose-100); }
.tone-emerald.bg{ background:var(--emerald-100); }
.tone-gold.bg{ background:var(--gold-100); }
.tone-rose.bg{ background:var(--rose-100); }

.steps-cta{ text-align:center; margin-top:4rem; }
.steps-cta__card{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:1.5rem; background:rgba(255,255,255,.8); border:1px solid rgba(167,243,208,.6); border-radius:1.25rem; padding:1.25rem 2rem; }
html.dark-mode .steps-cta__card{ background:rgba(255,255,255,.05); border-color:rgba(6,78,59,.4); }
.steps-cta__card p:first-child{ font-family:var(--font-serif); font-size:1.1rem; font-weight:600; margin:0; color:var(--gray-900); }
html.dark-mode .steps-cta__card p:first-child{ color:#fff; }
.steps-cta__card p:last-child{ font-size:.85rem; color:var(--gray-500); margin:.15rem 0 0; }

/* Match cards */
.matches-layout{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media(min-width:1024px){ .matches-layout{ grid-template-columns:280px 1fr; } }
.filters-panel{ background:#fff; border-radius:1.25rem; padding:1.5rem; box-shadow:var(--shadow-glass); border:1px solid var(--gray-100); height:fit-content; }
html.dark-mode .filters-panel{ background:rgba(255,255,255,.03); border-color:var(--gray-800); }
.filters-panel h4{ display:flex; align-items:center; gap:.5rem; font-size:1rem; margin:0 0 1rem; color:var(--gray-900); }
html.dark-mode .filters-panel h4{ color:#fff; }
.filters-panel label{ display:block; font-size:.8rem; font-weight:600; color:var(--gray-600); margin:1rem 0 .35rem; }
html.dark-mode .filters-panel label{ color:var(--gray-400); }
.select-field, .input-field{ width:100%; padding:.65rem .9rem; border-radius:.75rem; border:1px solid var(--gray-200); background:rgba(255,255,255,.8); font-size:.85rem; color:var(--gray-800); }
html.dark-mode .select-field, html.dark-mode .input-field{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; }

.match-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:640px){ .match-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1280px){ .match-grid{ grid-template-columns:repeat(3,1fr); } }
.match-card{ background:#fff; border-radius:1.25rem; overflow:hidden; box-shadow:var(--shadow-glass); border:1px solid var(--gray-100); transition:transform .2s; }
.match-card:hover{ transform:translateY(-4px); }
html.dark-mode .match-card{ background:rgba(255,255,255,.03); border-color:var(--gray-800); }
.match-card__photo{ position:relative; aspect-ratio:3/4; }
.match-card__photo img{ width:100%; height:100%; object-fit:cover; }
.match-card__photo.locked img{ filter:blur(10px); }
.match-card__lock{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:rgba(0,0,0,.35); color:#fff; text-align:center; padding:1rem; }
.match-card__score{ position:absolute; top:.75rem; right:.75rem; background:rgba(255,255,255,.92); border-radius:999px; padding:.25rem .65rem; font-size:.75rem; font-weight:700; color:var(--emerald-700); }
.match-card__badges{ position:absolute; top:.75rem; left:.75rem; display:flex; flex-direction:column; gap:.35rem; }
.match-card__body{ padding:1.1rem; }
.match-card__body h4{ margin:0 0 .15rem; font-family:var(--font-serif); font-size:1.15rem; color:var(--gray-900); }
html.dark-mode .match-card__body h4{ color:#fff; }
.match-card__body .meta{ font-size:.8rem; color:var(--gray-500); margin:0 0 .75rem; }
.match-card__actions{ display:flex; gap:.5rem; margin-top:.75rem; }
.match-card__actions button{ flex:1; padding:.55rem; border-radius:.65rem; border:1px solid var(--gray-200); background:#fff; }
html.dark-mode .match-card__actions button{ background:transparent; border-color:var(--gray-700); color:#fff; }
.match-card__actions .like{ background:var(--emerald-600); color:#fff; border:none; }

/* Membership */
.plans-grid{ display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media(min-width:640px){ .plans-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .plans-grid{ grid-template-columns:repeat(4,1fr); } }
.plan-card{ position:relative; border-radius:1.5rem; overflow:hidden; border:2px solid var(--gray-200); background:#fff; display:flex; flex-direction:column; }
html.dark-mode .plan-card{ background:rgba(255,255,255,.03); border-color:var(--gray-700); }
.plan-card.popular{ border-color:var(--gold-300); transform:scale(1.03); z-index:2; }
.plan-card__ribbon{ position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--gold-500); color:#fff; font-size:.7rem; font-weight:700; padding:.3rem 1rem; border-radius:0 0 .5rem .5rem; }
.plan-card__head{ padding:2rem 1.5rem 1.5rem; text-align:center; }
.plan-card__icon{ width:2.75rem; height:2.75rem; border-radius:999px; margin:0 auto .75rem; display:flex; align-items:center; justify-content:center; }
.plan-card__head h3{ font-family:var(--font-serif); font-size:1.4rem; margin:0; color:var(--gray-900); }
html.dark-mode .plan-card__head h3{ color:#fff; }
.plan-card__head .urdu{ font-family:var(--font-urdu); font-size:.8rem; color:var(--gray-500); margin:.15rem 0 1rem; }
.plan-card__price{ font-family:var(--font-serif); font-size:2rem; font-weight:700; color:var(--gray-900); }
html.dark-mode .plan-card__price{ color:#fff; }
.plan-card__price span{ font-size:.85rem; font-weight:400; color:var(--gray-500); }
.plan-card__body{ padding:0 1.5rem 1.75rem; flex:1; display:flex; flex-direction:column; }
.plan-card__features{ list-style:none; margin:0 0 1.5rem; padding:0; flex:1; }
.plan-card__features li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--gray-600); margin-bottom:.6rem; }
html.dark-mode .plan-card__features li{ color:var(--gray-400); }
.plan-card__features li svg{ flex-shrink:0; margin-top:.15rem; color:var(--emerald-600); }
.plan-card .btn{ width:100%; justify-content:center; }

/* Success stories */
.stories-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media(min-width:768px){ .stories-grid{ grid-template-columns:repeat(2,1fr); } }
.story-card{ display:flex; gap:1.5rem; background:#fff; border-radius:1.5rem; padding:1.5rem; box-shadow:var(--shadow-glass); border:1px solid var(--gray-100); }
html.dark-mode .story-card{ background:rgba(255,255,255,.03); border-color:var(--gray-800); }
.story-card__photo{ width:6.5rem; height:6.5rem; border-radius:1rem; overflow:hidden; flex-shrink:0; }
.story-card__photo img{ width:100%; height:100%; object-fit:cover; }
.story-card h4{ font-family:var(--font-serif); font-size:1.2rem; margin:0 0 .15rem; color:var(--gray-900); }
html.dark-mode .story-card h4{ color:#fff; }
.story-card .meta{ font-size:.75rem; color:var(--gray-500); margin:0 0 .6rem; }
.story-card p.story{ font-size:.85rem; color:var(--gray-600); line-height:1.6; margin:0 0 .6rem; }
html.dark-mode .story-card p.story{ color:var(--gray-400); }
.story-card .via{ font-size:.75rem; color:var(--emerald-600); font-weight:600; }

/* Footer */
.site-footer{ background:var(--emerald-950); color:#fff; position:relative; overflow:hidden; }
.site-footer .pattern-bg{ opacity:.1; }
.footer-cta{ border-bottom:1px solid rgba(6,78,59,.5); text-align:center; padding:3rem 0; position:relative; }
.footer-cta .crescent{ font-size:2.5rem; margin-bottom:1rem; }
.footer-cta h3{ font-family:var(--font-serif); font-size:2rem; margin:0 0 .75rem; }
.footer-cta p{ color:var(--emerald-300); max-width:32rem; margin:0 auto 1.5rem; }
.footer-cta .actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.footer-cta .btn-outline-light{ border:2px solid var(--emerald-600); color:var(--emerald-300); background:transparent; padding:.85rem 2rem; border-radius:.85rem; font-weight:600; }

.footer-main{ position:relative; padding:3rem 0; }
.footer-cols{ display:grid; gap:2rem; grid-template-columns:repeat(2,1fr); margin-bottom:3rem; }
@media(min-width:768px){ .footer-cols{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .footer-cols{ grid-template-columns:repeat(6,1fr); } }
.footer-brand{ grid-column:span 2; }
.footer-brand__logo{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.footer-brand__logo-mark{ width:2.25rem; height:2.25rem; border-radius:.75rem; background:var(--emerald-700); display:flex; align-items:center; justify-content:center; }
.footer-brand__logo-mark span{ color:#fff; font-family:var(--font-serif); font-weight:700; }
.footer-brand p{ color:var(--emerald-300); font-size:.85rem; line-height:1.6; margin-bottom:1.1rem; }
.footer-contact div{ display:flex; align-items:center; gap:.5rem; color:var(--emerald-400); font-size:.75rem; margin-bottom:.4rem; }
.footer-col h4{ font-size:.85rem; margin:0 0 .75rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:.5rem; }
.footer-col a{ color:var(--emerald-400); font-size:.75rem; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-bottom{ border-top:1px solid rgba(6,78,59,.5); padding-top:1.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer-bottom p{ color:var(--emerald-500); font-size:.75rem; margin:0; }
.footer-social{ display:flex; gap:.6rem; }
.footer-social a{ width:2rem; height:2rem; border-radius:.5rem; background:rgba(6,78,59,.5); color:var(--emerald-400); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--emerald-700); color:#fff; }
.footer-apps{ display:flex; align-items:center; gap:.6rem; }
.footer-apps span{ font-size:.75rem; color:var(--emerald-500); }
.footer-apps button{ padding:.4rem .75rem; background:rgba(6,78,59,.5); border:none; border-radius:.5rem; font-size:.75rem; color:var(--emerald-300); }

/* ==========================================================================
   Auth modal
   ========================================================================== */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.is-open{ display:flex; }
.modal-box{ background:#fff; border-radius:1.5rem; width:100%; max-width:26rem; padding:2rem; position:relative; max-height:90vh; overflow-y:auto; }
html.dark-mode .modal-box{ background:var(--gray-900); color:#fff; }
.modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--gray-500); }
.modal-tabs{ display:flex; gap:.5rem; margin-bottom:1.5rem; background:var(--gray-100); border-radius:.85rem; padding:.25rem; }
html.dark-mode .modal-tabs{ background:var(--gray-800); }
.modal-tabs button{ flex:1; padding:.6rem; border-radius:.65rem; border:none; background:none; font-weight:600; font-size:.85rem; color:var(--gray-600); }
.modal-tabs button.active{ background:#fff; color:var(--emerald-700); box-shadow:0 1px 3px rgba(0,0,0,.1); }
html.dark-mode .modal-tabs button{ color:var(--gray-400); }
html.dark-mode .modal-tabs button.active{ background:var(--gray-900); color:var(--emerald-400); }
.modal-box h2{ font-family:var(--font-serif); font-size:1.5rem; margin:0 0 .25rem; }
.modal-box .sub{ font-size:.85rem; color:var(--gray-500); margin:0 0 1.5rem; }
.form-group{ margin-bottom:1rem; }
.form-group label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.35rem; color:var(--gray-700); }
html.dark-mode .form-group label{ color:var(--gray-300); }
.form-msg{ font-size:.8rem; padding:.6rem .85rem; border-radius:.65rem; margin-bottom:1rem; display:none; }
.form-msg.error{ background:var(--rose-50); color:var(--rose-600); display:block; }
.form-msg.success{ background:var(--emerald-50); color:var(--emerald-700); display:block; }
.form-note{ font-size:.75rem; color:var(--gray-400); margin-top:1rem; text-align:center; }

/* Dashboard-lite (logged in) */
.dash{ padding:7rem 0 4rem; min-height:60vh; }
.dash__head{ display:flex; align-items:center; gap:1.25rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.dash__avatar{ width:4.5rem; height:4.5rem; border-radius:999px; background:var(--emerald-100); color:var(--emerald-700); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; }
html.dark-mode .dash__avatar{ background:rgba(5,150,105,.25); }
.dash__head h2{ font-family:var(--font-serif); margin:0; font-size:1.6rem; color:var(--gray-900); }
html.dark-mode .dash__head h2{ color:#fff; }
.dash__head p{ margin:.15rem 0 0; color:var(--gray-500); font-size:.9rem; }
.dash-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:768px){ .dash-grid{ grid-template-columns:repeat(3,1fr); } }
.dash-card{ background:#fff; border-radius:1.25rem; padding:1.5rem; box-shadow:var(--shadow-glass); border:1px solid var(--gray-100); }
html.dark-mode .dash-card{ background:rgba(255,255,255,.03); border-color:var(--gray-800); }
.dash-card h3{ font-size:1rem; margin:0 0 .5rem; color:var(--gray-900); }
html.dark-mode .dash-card h3{ color:#fff; }
.dash-card p{ font-size:.85rem; color:var(--gray-500); margin:0; }
.notice-demo{ background:var(--gold-50); border:1px dashed var(--gold-300); color:var(--gold-800); font-size:.8rem; padding:1rem 1.25rem; border-radius:1rem; margin-bottom:2rem; }
html.dark-mode .notice-demo{ background:rgba(217,119,6,.1); border-color:rgba(217,119,6,.4); color:var(--gold-300); }

/* utilities */
.mt-8{ margin-top:2rem; } .hidden{ display:none !important; }
.flex-center{ display:flex; align-items:center; justify-content:center; }

/* ==========================================================================
   Real profile system (dashboard tabs, edit form, photo/gallery/CNIC upload)
   ========================================================================== */

.pm-status-pill{ margin-left:auto; padding:.35rem .9rem; border-radius:999px; font-size:.75rem; font-weight:700; text-transform:capitalize; }
.pm-status-pending{ background:var(--gold-100); color:var(--gold-700); }
.pm-status-approved{ background:var(--emerald-100); color:var(--emerald-700); }
.pm-status-rejected{ background:var(--rose-100); color:var(--rose-600); }
.pm-status-suspended{ background:var(--gray-200); color:var(--gray-600); }
html.dark-mode .pm-status-pending{ background:rgba(245,158,11,.18); }
html.dark-mode .pm-status-approved{ background:rgba(5,150,105,.2); }
html.dark-mode .pm-status-rejected{ background:rgba(244,63,94,.18); }

.dash-tabs{ display:flex; gap:.5rem; margin:2rem 0 1.5rem; border-bottom:1px solid var(--gray-200); flex-wrap:wrap; }
html.dark-mode .dash-tabs{ border-color:var(--gray-800); }
.dash-tab{ background:none; border:none; padding:.75rem 1rem; font-weight:600; font-size:.85rem; color:var(--gray-500); border-bottom:2px solid transparent; }
.dash-tab.active{ color:var(--emerald-600); border-color:var(--emerald-600); }

.pm-alert{ padding:.9rem 1.1rem; border-radius:.85rem; font-size:.85rem; margin-bottom:1.5rem; }
.pm-alert-info{ background:var(--emerald-50); color:var(--emerald-800); }
.pm-alert-warning{ background:var(--rose-50); color:var(--rose-600); }
html.dark-mode .pm-alert-info{ background:rgba(5,150,105,.12); }
html.dark-mode .pm-alert-warning{ background:rgba(244,63,94,.12); }

.pm-completion-card{ background:#fff; border-radius:1.25rem; padding:1.5rem; box-shadow:var(--shadow-glass); border:1px solid var(--gray-100); margin-bottom:1.5rem; }
html.dark-mode .pm-completion-card{ background:rgba(255,255,255,.03); border-color:var(--gray-800); }
.pm-completion-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.pm-completion-head h3{ margin:0; font-size:1rem; }
#pm-completion-pct{ font-weight:700; color:var(--emerald-600); font-size:1.1rem; }
.pm-progress-track{ height:.6rem; background:var(--gray-100); border-radius:999px; overflow:hidden; }
html.dark-mode .pm-progress-track{ background:var(--gray-800); }
.pm-progress-fill{ height:100%; background:linear-gradient(90deg,var(--emerald-500),var(--emerald-400)); transition:width .4s ease; }
.pm-hint{ font-size:.78rem; color:var(--gray-500); margin:.6rem 0 0; }
.pm-link-btn{ background:none; border:none; padding:0; color:var(--emerald-600); font-weight:600; font-size:.8rem; cursor:pointer; }
.pm-roadmap-note{ font-size:.75rem; color:var(--gray-400); text-align:center; margin-top:2rem; padding-top:1.5rem; border-top:1px dashed var(--gray-200); }
html.dark-mode .pm-roadmap-note{ border-color:var(--gray-800); }

.dash-panel[hidden]{ display:none; }
.pm-form-section{ margin-bottom:2rem; }
.pm-form-section h3{ font-family:var(--font-serif); font-size:1.3rem; margin:0 0 1rem; color:var(--gray-900); }
html.dark-mode .pm-form-section h3{ color:#fff; }
.pm-form-grid{ display:grid; grid-template-columns:1fr; gap:1rem 1.25rem; }
@media(min-width:768px){ .pm-form-grid{ grid-template-columns:1fr 1fr; } }
.pm-span-2{ grid-column:1 / -1; }
.pm-req{ color:var(--rose-500); }
.pm-field-error{ display:block; font-size:.75rem; color:var(--rose-600); margin-top:.25rem; min-height:1em; }

.pm-photo-row{ display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.pm-photo-preview{ width:6rem; height:6rem; border-radius:999px; overflow:hidden; background:var(--emerald-100); color:var(--emerald-700); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; flex-shrink:0; }
.pm-photo-preview img{ width:100%; height:100%; object-fit:cover; }
.pm-photo-actions{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.pm-photo-actions .btn{ cursor:pointer; }

.pm-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media(min-width:640px){ .pm-gallery-grid{ grid-template-columns:repeat(6,1fr); } }
.pm-gallery-item{ position:relative; aspect-ratio:1; border-radius:.75rem; overflow:hidden; }
.pm-gallery-item img{ width:100%; height:100%; object-fit:cover; }
.pm-gallery-remove{ position:absolute; top:.25rem; right:.25rem; width:1.5rem; height:1.5rem; border-radius:999px; border:none; background:rgba(0,0,0,.6); color:#fff; line-height:1; cursor:pointer; font-size:1rem; }
.pm-gallery-add{ aspect-ratio:1; border-radius:.75rem; border:2px dashed var(--gray-300); display:flex; align-items:center; justify-content:center; font-size:1.75rem; color:var(--gray-400); cursor:pointer; }
html.dark-mode .pm-gallery-add{ border-color:var(--gray-700); }

.pm-cnic-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px){ .pm-cnic-grid{ grid-template-columns:1fr 1fr; } }
.pm-cnic-box{ padding:1rem; border-radius:1rem; border:1px solid var(--gray-200); }
html.dark-mode .pm-cnic-box{ border-color:var(--gray-800); }
.pm-cnic-box h4{ margin:0 0 .5rem; font-size:.9rem; }
.pm-uploaded-ok{ color:var(--emerald-600); font-size:.8rem; font-weight:600; margin:0 0 .6rem; }