/* =========================================================
   QAFE — Quran Academy For Expats
   Color system pulled from logo + packages artwork
   ========================================================= */

:root {
  /* Brand */
  --c-navy:        #1B3A5C;
  --c-navy-deep:   #122941;
  --c-navy-soft:   #2A4F7A;
  --c-teal:        #5E8B7E;
  --c-teal-deep:   #3F6E61;
  --c-teal-soft:   #7FA89B;
  --c-gold:        #D4A857;
  --c-gold-bright: #E8B842;
  --c-gold-soft:   #F0D08A;

  /* Surfaces */
  --c-cream:       #FAF6EC;
  --c-cream-warm:  #F5EDD8;
  --c-cream-soft:  #FBF8F0;
  --c-white:       #FFFFFF;
  --c-blush:       #F5DDE2;
  --c-rose:        #E8A5B4;

  /* Ink */
  --c-ink:         #1F2A37;
  --c-ink-soft:    #4A5868;
  --c-muted:       #7C8896;

  /* Layout */
  --maxw: 1200px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 4px 14px rgba(27, 58, 92, 0.08);
  --shadow-md: 0 12px 32px rgba(27, 58, 92, 0.12);
  --shadow-lg: 0 24px 60px rgba(27, 58, 92, 0.18);

  --ease: cubic-bezier(.21,.61,.35,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-cream-soft);
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Background scenery ---------- */
.scene-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 90% -10%, rgba(212,168,87,0.12), transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, rgba(94,139,126,0.10), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(232,165,180,0.10), transparent 60%),
    linear-gradient(180deg, #FBF8F0 0%, #F7F1E2 100%);
}
.scene-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(212,168,87,0.10) 1px, transparent 1px),
    radial-gradient(rgba(27,58,92,0.06) 1px, transparent 1px);
  background-size: 28px 28px, 56px 56px;
  background-position: 0 0, 14px 14px;
  opacity: .55;
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}

/* Floating decorative blobs (parallax) */
.deco {
  position: absolute;
  pointer-events: none;
  opacity: .55;
  filter: drop-shadow(0 8px 20px rgba(27,58,92,0.08));
  transition: transform .25s linear;
}
.deco-flower { width: 140px; }
.deco-pattern { width: 220px; opacity: .25; }

/* ---------- Islamic & floral ornaments ---------- */
.orn {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.orn-star,
.orn-mandala,
.orn-corner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.orn-star    { background-image: url("../images/stars.webp"); }
.orn-mandala { background-image: url("../images/star2.webp"); }
.orn-corner  { background-image: url("../images/broders_stars.webp"); }
.orn-frame   { background-image: url("../images/box_star.webp"); background-position: center; background-repeat: no-repeat; background-size: contain; }

.orn-spin { animation: rotate 80s linear infinite; }
.orn-spin-rev { animation: rotate 80s linear infinite reverse; }
.orn-float { animation: float 9s ease-in-out infinite; }

/* Pink flower SVG */
.orn-flower {
  width: 100px; height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g><circle cx='60' cy='32' r='14' fill='%23F4B5C2'/><circle cx='84' cy='52' r='14' fill='%23F4B5C2'/><circle cx='84' cy='80' r='14' fill='%23E89AAB'/><circle cx='60' cy='98' r='14' fill='%23E89AAB'/><circle cx='36' cy='80' r='14' fill='%23F4B5C2'/><circle cx='36' cy='52' r='14' fill='%23F4B5C2'/><circle cx='60' cy='66' r='12' fill='%23E8B842'/><circle cx='60' cy='66' r='6' fill='%23D4A857'/></g></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.orn-flower-sprig {
  width: 140px; height: 140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%235E8B7E' stroke-width='2' stroke-linecap='round'><path d='M40 170 Q60 130 90 110 Q120 90 140 60'/><path d='M70 130 Q60 120 50 122'/><path d='M90 110 Q90 95 80 90'/><path d='M110 95 Q108 80 95 78'/></g><g><circle cx='40' cy='168' r='10' fill='%23F4B5C2'/><circle cx='52' cy='150' r='8' fill='%23E89AAB'/><circle cx='75' cy='128' r='9' fill='%23F4B5C2'/><circle cx='100' cy='102' r='10' fill='%23E89AAB'/><circle cx='128' cy='75' r='9' fill='%23F4B5C2'/><circle cx='148' cy='52' r='10' fill='%23E89AAB'/><circle cx='40' cy='168' r='3' fill='%23E8B842'/><circle cx='75' cy='128' r='3' fill='%23E8B842'/><circle cx='100' cy='102' r='3' fill='%23E8B842'/><circle cx='128' cy='75' r='3' fill='%23E8B842'/><circle cx='148' cy='52' r='3' fill='%23E8B842'/></g></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Hijab woman silhouette SVG — used on hero & why-card */
.orn-hijab {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='h' x1='0' x2='1' y1='0' y2='1'><stop offset='0' stop-color='%231B3A5C'/><stop offset='1' stop-color='%233F6E61'/></linearGradient></defs><g><path fill='url(%23h)' d='M60 14 C40 14 28 30 28 50 C28 60 32 68 38 74 L38 92 L82 92 L82 74 C88 68 92 60 92 50 C92 30 80 14 60 14 Z'/><path fill='%23F2D9C2' d='M50 50 C50 44 54 40 60 40 C66 40 70 44 70 50 C70 56 66 62 60 62 C54 62 50 56 50 50 Z'/><path fill='url(%23h)' opacity='0.95' d='M28 92 L92 92 L98 116 L22 116 Z'/><path fill='%23E8B842' opacity='0.85' d='M48 64 Q60 68 72 64 L70 70 Q60 73 50 70 Z'/></g></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Section position helpers */
.section { isolation: isolate; overflow: hidden; }
.section .container { position: relative; z-index: 1; }
.orn-tl { top: -20px; left: 0; }
.orn-tr { top: -20px; right: 0; }
.orn-bl { bottom: -20px; left: 0; }
.orn-br { bottom: -20px; right: 0; }

/* ---------- Container ---------- */
.container {
  width: min(var(--maxw), 92%);
  margin: 0 auto;
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.navbar.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  padding: 8px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: flex; align-items: center;
  font-weight: 800;
  color: var(--c-navy);
  transition: transform .25s var(--ease);
}
.nav-brand:hover { transform: scale(1.03); }
.nav-brand img {
  height: 78px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(27,58,92,0.10));
}
.navbar.scrolled .nav-brand img { height: 64px; transition: height .35s var(--ease); }
.nav-links {
  display: flex; gap: 6px; align-items: center;
}
.nav-links a {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--c-ink-soft);
  transition: color .2s, background .2s;
  position: relative;
}
.nav-links a:hover { color: var(--c-navy); background: rgba(94,139,126,0.10); }
.nav-cta {
  display: flex; gap: 10px; align-items: center;
}
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--c-cream-warm);
  color: var(--c-navy);
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-deep) 100%);
  color: var(--c-white);
  box-shadow: 0 10px 24px rgba(63,110,97,0.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(63,110,97,0.42); }
.btn-gold {
  background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 100%);
  color: var(--c-navy-deep);
  box-shadow: 0 10px 24px rgba(212,168,87,0.32);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212,168,87,0.45); }
.btn-ghost {
  background: rgba(255,255,255,0.7);
  color: var(--c-navy);
  border: 1px solid rgba(27,58,92,0.12);
}
.btn-ghost:hover { background: var(--c-white); transform: translateY(-2px); }
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white;
  box-shadow: 0 10px 24px rgba(37,211,102,0.30);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,211,102,0.45); }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 160px 0 100px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: rgba(212,168,87,0.15);
  color: var(--c-gold);
  border: 1px solid rgba(212,168,87,0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(212,168,87,0.25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}
.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--c-navy-deep);
  letter-spacing: -.5px;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero p.lead {
  font-size: 19px;
  line-height: 1.85;
  color: var(--c-ink-soft);
  margin: 0 0 28px;
  max-width: 560px;
}
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(94,139,126,0.20);
  padding: 12px 20px;
  border-radius: 14px;
  margin-bottom: 32px;
  font-size: 14px;
  color: var(--c-teal-deep);
  font-weight: 600;
  backdrop-filter: blur(8px);
}
.hero-trust svg { color: var(--c-teal); flex-shrink: 0; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero visual */
.hero-visual {
  position: relative;
  /* All children are position:absolute, so this box has no in-flow content.
     Without an explicit width, the grid item can shrink to 0 — then % widths
     on the img resolve to 0×0. Fill the grid track instead. */
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.hero-visual .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, var(--c-navy) 0%, var(--c-navy-deep) 55%, var(--c-navy-deep) 70%, transparent 75%);
  box-shadow:
    inset 0 0 0 1px rgba(212,168,87,0.45),
    inset 0 0 0 22px rgba(212,168,87,0.08),
    inset 0 0 0 23px rgba(212,168,87,0.35),
    0 30px 80px rgba(27,58,92,0.30);
}
.hero-visual .ring::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(212,168,87,0.45), transparent 35%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23E8B842' stroke-width='1' opacity='0.55'><polygon points='100,20 115,55 150,55 122,78 134,113 100,93 66,113 78,78 50,55 85,55'/><circle cx='100' cy='100' r='80'/><circle cx='100' cy='100' r='62'/></g></svg>");
  background-size: cover, 100% 100%;
  background-blend-mode: screen;
  opacity: .8;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, black 60%, transparent 75%);
}
.hero-visual .ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 2px dashed rgba(212,168,87,0.45);
  animation: rotate 60s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
.hero-visual .quran {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
}
.hero-visual .quran img {
  width: 72%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 20px rgba(212,168,87,0.50))
    drop-shadow(0 30px 50px rgba(0,0,0,0.45));
  animation: float 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.hero-visual .badge-mini {
  position: absolute;
  background: var(--c-white);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  color: var(--c-navy);
}
.hero-visual .badge-mini .icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-deep) 100%);
  color: white;
}
.hero-visual .badge-1 { top: 8%; right: -6%; animation: float 5s ease-in-out infinite; }
.hero-visual .badge-2 { bottom: 14%; left: -8%; animation: float 7s ease-in-out infinite reverse; }
.hero-visual .badge-3 { bottom: -2%; right: 18%; animation: float 6s ease-in-out infinite .8s; }

/* ---------- Section base ---------- */
.section {
  padding: 100px 0;
  position: relative;
}
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.eyebrow {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(94,139,126,0.12);
  color: var(--c-teal-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: .3px;
}
.section h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 0 0 14px;
  color: var(--c-navy-deep);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.3;
}
.section h2 .accent {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section .sub {
  font-size: 17px;
  color: var(--c-ink-soft);
  margin: 0;
}

/* Section dividers — Islamic ornament */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  color: var(--c-gold);
  margin: 0 auto 22px;
  max-width: 320px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .9;
}
.divider svg {
  width: 28px; height: 28px;
  filter: drop-shadow(0 1px 0 rgba(212,168,87,0.40));
}
.approach-section .divider, .approach-section .divider::before, .approach-section .divider::after {
  color: var(--c-gold-bright);
}

/* ---------- Who-for ---------- */
.who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.who-item {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px;
  background: var(--c-white);
  border-radius: var(--radius);
  border: 1px solid rgba(94,139,126,0.14);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  font-weight: 600;
  color: var(--c-navy);
}
.who-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.who-item .check {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 100%);
  color: var(--c-navy-deep);
}

/* ---------- Why QAFE ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.why-card {
  position: relative;
  padding: 28px 22px;
  background: var(--c-white);
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid rgba(212,168,87,0.16);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.why-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(212,168,87,0.10), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.why-card:hover::before { opacity: 1; }
.why-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(94,139,126,0.18) 0%, rgba(212,168,87,0.18) 100%);
  color: var(--c-teal-deep);
  position: relative;
}
.why-card .label {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.5;
  position: relative;
}

/* ---------- How it works ---------- */
.how-wrapper { position: relative; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.how-card {
  position: relative;
  padding: 36px 28px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(94,139,126,0.16);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease);
}
.how-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.how-step {
  position: absolute;
  top: -22px;
  inset-inline-start: 28px;
  font-size: 26px;
  font-weight: 900;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-soft) 100%);
  color: var(--c-gold-bright);
  box-shadow: 0 12px 24px rgba(27,58,92,0.30);
}
.how-card h3 {
  font-size: 19px;
  margin: 28px 0 10px;
  color: var(--c-navy-deep);
  font-weight: 800;
}
.how-card p { color: var(--c-ink-soft); margin: 0; font-size: 15px; line-height: 1.75; }

/* ---------- Plans ---------- */
.plans-section { background: linear-gradient(180deg, var(--c-cream-soft) 0%, var(--c-cream-warm) 100%); }
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  border: 1px solid rgba(94,139,126,0.18);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan-popular {
  border-color: rgba(212,168,87,0.45);
  box-shadow: 0 24px 50px rgba(212,168,87,0.20);
  transform: scale(1.02);
  background:
    linear-gradient(180deg, rgba(212,168,87,0.06), transparent 30%),
    var(--c-white);
}
.plan-popular::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-teal) 50%, var(--c-gold-bright) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.plan-badge {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 100%);
  color: var(--c-navy-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 12px 24px rgba(212,168,87,0.40);
  white-space: nowrap;
}
.plan-price-old {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #C03939;
  margin-bottom: 8px;
  position: relative;
  direction: ltr;
}
.plan-price-old::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 2.5px;
  background: #C03939;
  transform: translate(-50%, -50%) rotate(-12deg);
  border-radius: 2px;
  opacity: .9;
}
.plan-price-block {
  padding: 22px 16px;
  background: linear-gradient(135deg, var(--c-teal-deep) 0%, var(--c-teal) 100%);
  color: var(--c-white);
  border-radius: 16px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.plan-price-block::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
}
.plan-price-main {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  direction: ltr;
  position: relative;
  z-index: 1;
}
.plan-price {
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}
.plan-price-currency {
  font-size: 26px;
  font-weight: 800;
  align-self: flex-start;
  margin-top: 8px;
}
.plan-price-period {
  display: block;
  font-size: 16px;
  font-weight: 700;
  opacity: .95;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.plan h3 {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--c-navy-deep);
  font-weight: 800;
}
.plan-desc { color: var(--c-ink-soft); margin: 0 0 20px; font-size: 14px; line-height: 1.7; }
.plan-features { margin: 0 0 24px; flex: 1; }
.plan-features li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--c-ink);
  border-bottom: 1px dashed rgba(94,139,126,0.14);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features .check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(94,139,126,0.16);
  color: var(--c-teal-deep);
}
.plan .btn { width: 100%; }

.plans-note {
  margin: 50px auto 0;
  max-width: 680px;
  text-align: center;
  padding: 22px 26px;
  background: var(--c-white);
  border-radius: 18px;
  border: 1px dashed rgba(94,139,126,0.30);
  color: var(--c-teal-deep);
  font-weight: 600;
  display: flex; align-items: center; gap: 14px; justify-content: center;
}

/* ---------- Approach ---------- */
.approach-section {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 50%, var(--c-teal-deep) 100%);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.approach-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 80% 100%, rgba(212,168,87,0.20), transparent 60%),
    radial-gradient(800px 500px at 10% 0%, rgba(232,165,180,0.10), transparent 60%);
  pointer-events: none;
}
.approach-section .container { position: relative; z-index: 1; }
.approach-section h2 { color: var(--c-white); }
.approach-section .eyebrow { background: rgba(212,168,87,0.18); color: var(--c-gold-bright); }
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
.approach-card {
  padding: 30px 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,168,87,0.20);
  border-radius: var(--radius);
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform .3s, background .3s;
}
.approach-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.10); }
.approach-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 100%);
  color: var(--c-navy-deep);
}
.approach-card .label { font-weight: 700; font-size: 16px; }

/* ---------- Trial ---------- */
.trial-card {
  background: linear-gradient(135deg, var(--c-cream-warm) 0%, var(--c-cream) 100%);
  border-radius: var(--radius-lg);
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212,168,87,0.30);
}
.trial-card::before {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(212,168,87,0.18), transparent 70%);
  top: -120px; left: -120px;
  border-radius: 50%;
}
.trial-card::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(94,139,126,0.18), transparent 70%);
  bottom: -100px; right: -100px;
  border-radius: 50%;
}
.trial-card h2 { font-size: 36px; margin: 0 0 16px; color: var(--c-navy-deep); position: relative; }
.trial-card .meta {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(94,139,126,0.16);
  color: var(--c-teal-deep);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}
.trial-list { position: relative; margin-bottom: 24px; }
.trial-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-size: 16px;
  color: var(--c-ink);
  font-weight: 600;
}
.trial-list li .check {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-deep) 100%);
  color: white;
}
.trial-card .free-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-white);
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--c-teal-deep);
  border: 1px dashed rgba(94,139,126,0.40);
  margin-bottom: 24px;
}
.trial-visual {
  position: relative;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.trial-visual img { width: 90%; filter: drop-shadow(0 30px 50px rgba(27,58,92,0.20)); animation: float 7s ease-in-out infinite; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--c-white);
  border-radius: var(--radius);
  border: 1px solid rgba(94,139,126,0.14);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .3s, border-color .3s;
}
.faq-item.open { border-color: rgba(212,168,87,0.40); box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%;
  padding: 22px 24px;
  text-align: right;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 16px; font-weight: 700;
  color: var(--c-navy-deep);
}
.faq-q .toggle {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(94,139,126,0.12);
  color: var(--c-teal-deep);
  display: grid; place-items: center;
  transition: transform .3s, background .3s, color .3s;
}
.faq-item.open .faq-q .toggle {
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--c-gold-bright), var(--c-gold));
  color: var(--c-navy-deep);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.faq-a-inner { padding: 0 24px 22px; color: var(--c-ink-soft); line-height: 1.85; }

/* ---------- Final CTA ---------- */
.final-cta {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 50%, var(--c-teal-deep) 100%);
  color: var(--c-white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 80% 100%, rgba(212,168,87,0.20), transparent 60%),
    radial-gradient(800px 500px at 10% 0%, rgba(232,165,180,0.10), transparent 60%);
}
.final-cta-inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.final-cta h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin: 0 0 16px;
  color: var(--c-white);
  font-weight: 900;
}
.final-cta p { font-size: 18px; color: rgba(255,255,255,0.85); margin: 0 0 30px; }
.final-cta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer {
  background: var(--c-cream-warm);
  padding: 50px 0 30px;
  border-top: 1px solid rgba(94,139,126,0.18);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 30px;
}
.footer-brand { max-width: 360px; }
.footer-brand img { height: 60px; margin-bottom: 16px; }
.footer-brand p { color: var(--c-ink-soft); font-size: 15px; line-height: 1.85; }
.footer h4 {
  font-size: 16px;
  color: var(--c-navy-deep);
  margin: 0 0 16px;
  font-weight: 800;
}
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: var(--c-ink-soft); font-size: 14px; transition: color .2s; }
.footer ul a:hover { color: var(--c-teal-deep); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(94,139,126,0.18);
  text-align: center;
  color: var(--c-muted);
  font-size: 13px;
}

/* ---------- Floating WhatsApp ---------- */
.float-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 16px 34px rgba(37,211,102,0.45);
  z-index: 90;
  animation: pulseRing 2.5s infinite;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.float-wa:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(37,211,102,0.55); }
.float-wa .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
}
.float-wa .label {
  display: inline-block;
  white-space: nowrap;
  padding-inline-end: 4px;
}
@keyframes pulseRing {
  0% { box-shadow: 0 16px 34px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 16px 34px rgba(37,211,102,0.45), 0 0 0 22px rgba(37,211,102,0); }
  100% { box-shadow: 0 16px 34px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 560px) {
  .float-wa {
    bottom: 16px;
    right: 16px;
    padding: 8px 14px 8px 10px;
    font-size: 13px;
    gap: 8px;
  }
  .float-wa .icon { width: 36px; height: 36px; }
  .float-wa .icon svg { width: 22px; height: 22px; }
  .float-wa .label { padding-inline-end: 2px; }
}
@media (max-width: 360px) {
  .float-wa { padding: 6px 10px 6px 8px; font-size: 12px; }
  .float-wa .icon { width: 32px; height: 32px; }
}

/* ---------- Auth pages ---------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-cream-soft);
}
.auth-side {
  position: relative;
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 50%, var(--c-teal-deep) 100%);
  color: var(--c-white);
  padding: 60px 50px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.auth-side::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 500px at 100% 0%, rgba(232,165,180,0.18), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(212,168,87,0.22), transparent 60%),
    radial-gradient(500px 400px at 50% 50%, rgba(94,139,126,0.18), transparent 65%);
  pointer-events: none;
}
.auth-orn {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.20));
}
.auth-orn-tl {
  top: 0px; right: 0px; transform: rotate(90deg);
  width: 320px; height: 320px;
  background: url("../images/broders_stars.webp") no-repeat center / contain;
  opacity: .45;
}
.auth-orn-bl {
  bottom: 0px; left: 0px; transform: rotate(270deg);
  width: 300px; height: 300px;
  background: url("../images/broders_stars.webp") no-repeat center / contain;
  opacity: .40;
}
.auth-orn-mandala-1 {
  top: 40px; left: 8%;
  width: 140px; height: 140px;
  background: url("../images/star2.webp") no-repeat center / contain;
  opacity: .14;
  animation: rotate 80s linear infinite;
}
.auth-orn-mandala-2 {
  bottom: 60px; right: 12%;
  width: 110px; height: 110px;
  background: url("../images/star2.webp") no-repeat center / contain;
  opacity: .18;
  animation: rotate 80s linear infinite reverse;
}
.auth-orn-flower {
  width: 110px; height: 110px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g><circle cx='60' cy='32' r='14' fill='%23F4B5C2'/><circle cx='84' cy='52' r='14' fill='%23F4B5C2'/><circle cx='84' cy='80' r='14' fill='%23E89AAB'/><circle cx='60' cy='98' r='14' fill='%23E89AAB'/><circle cx='36' cy='80' r='14' fill='%23F4B5C2'/><circle cx='36' cy='52' r='14' fill='%23F4B5C2'/><circle cx='60' cy='66' r='12' fill='%23E8B842'/><circle cx='60' cy='66' r='6' fill='%23D4A857'/></g></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 40px; left: 12%;
  opacity: .55;
  animation: float 9s ease-in-out infinite;
}
.auth-side-inner {
  position: relative;
  z-index: 1;
  max-width: 460px;
}
.auth-side .brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 36px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(212,168,87,0.30);
  padding: 10px 18px;
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.auth-side .brand img {
  height: 84px;
  width: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.30));
}
.auth-side h1 {
  font-size: 38px;
  font-weight: 900;
  margin: 0 0 18px;
  line-height: 1.3;
}
.auth-side h1 .accent {
  background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.auth-side p { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.85; margin: 0 0 30px; }
.auth-side ul li {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
}
.auth-side ul li .check {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(212,168,87,0.20);
  color: var(--c-gold-bright);
  border: 1px solid rgba(212,168,87,0.50);
}

.auth-form-wrap {
  padding: 60px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.auth-form {
  width: 100%;
  max-width: 440px;
}
.auth-form .back-home {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-ink-soft);
  font-size: 14px;
  margin-bottom: 24px;
  font-weight: 600;
}
.auth-form .back-home:hover { color: var(--c-teal-deep); }
.auth-form h2 {
  font-size: 32px;
  margin: 0 0 8px;
  color: var(--c-navy-deep);
  font-weight: 900;
}
.auth-form .lead { color: var(--c-ink-soft); margin: 0 0 28px; font-size: 15px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(94,139,126,0.22);
  border-radius: 12px;
  background: var(--c-white);
  font-family: inherit;
  font-size: 15px;
  color: var(--c-ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(94,139,126,0.14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field .err {
  display: block;
  font-size: 12px;
  color: #B83A3A;
  margin-top: 4px;
}
.phone-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 10px;
  direction: ltr;
}
.phone-row select {
  font-weight: 700;
  color: var(--c-navy-deep);
  background: var(--c-cream-soft);
  border-color: rgba(94,139,126,0.30);
  cursor: not-allowed;
  text-align: center;
}
.phone-row select:disabled {
  opacity: 1;
  background: linear-gradient(135deg, rgba(212,168,87,0.10), rgba(94,139,126,0.06));
}
.phone-row input {
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.auth-form .btn { width: 100%; margin-top: 8px; }
.auth-form .alt {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--c-ink-soft);
}
.auth-form .alt a { color: var(--c-teal-deep); font-weight: 700; }

.alert {
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}
.alert-success { background: rgba(94,139,126,0.14); color: var(--c-teal-deep); border: 1px solid rgba(94,139,126,0.30); }
.alert-error { background: rgba(184,58,58,0.10); color: #B83A3A; border: 1px solid rgba(184,58,58,0.25); }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-l { transform: translateX(40px); }
.reveal-r { transform: translateX(-40px); }
.reveal-l.in, .reveal-r.in { transform: translateX(0); }

[data-stagger] > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---------- Dashboard ---------- */
.dashboard {
  padding-top: 130px;
  padding-bottom: 60px;
  min-height: 100vh;
}
.dash-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.dash-greeting h1 {
  margin: 6px 0 4px;
  font-size: 32px;
  font-weight: 900;
  color: var(--c-navy-deep);
}
.dash-greeting .muted { color: var(--c-muted); margin: 0; font-size: 14px; }
.dash-section-head {
  text-align: center;
  margin: 16px auto 36px;
  max-width: 640px;
}
.dash-section-head h2 {
  font-size: 28px;
  font-weight: 900;
  color: var(--c-navy-deep);
  margin: 0 0 10px;
}

.dash-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(94,139,126,0.14);
}
.dash-card h2 {
  font-size: 26px;
  color: var(--c-navy-deep);
  margin: 0 0 10px;
  font-weight: 800;
}
.dash-card h3 {
  font-size: 18px;
  color: var(--c-navy-deep);
  margin: 0 0 14px;
  font-weight: 800;
}
.dash-card p { color: var(--c-ink-soft); line-height: 1.85; }
.dash-card .muted { color: var(--c-muted); }

.dash-pending {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.dash-status-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.dash-status-icon-pending {
  background: linear-gradient(135deg, rgba(212,168,87,0.20), rgba(212,168,87,0.40));
  color: var(--c-gold);
  border: 1px solid rgba(212,168,87,0.45);
  animation: pulse 2.4s infinite;
}
.dash-status-icon-active {
  background: linear-gradient(135deg, rgba(94,139,126,0.20), rgba(94,139,126,0.45));
  color: var(--c-teal-deep);
  border: 1px solid rgba(94,139,126,0.50);
}

.dash-actions {
  margin-top: 20px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
}
@media (max-width: 880px) {
  .dash-grid { grid-template-columns: 1fr; }
}

.dash-card-primary {
  background: linear-gradient(135deg, var(--c-cream-warm), var(--c-cream));
  border-color: rgba(212,168,87,0.30);
}
.dash-plan-summary {
  margin-top: 14px;
  padding: 18px;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(94,139,126,0.16);
}
.dash-plan-summary-name {
  font-weight: 900;
  font-size: 22px;
  color: var(--c-navy-deep);
}
.dash-plan-summary-meta {
  margin-top: 4px;
  color: var(--c-ink-soft);
  font-size: 14px;
}
.dash-plan-summary-price {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-teal-deep);
  letter-spacing: .3px;
}

.dash-meta-list { display: grid; gap: 12px; }
.dash-meta-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--c-cream-soft);
  border-radius: 10px;
}
.dash-meta-list .meta-label { color: var(--c-muted); font-size: 13px; font-weight: 600; }
.dash-meta-list .meta-value { color: var(--c-navy); font-weight: 700; }

.badge-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.badge-active   { background: rgba(94,139,126,0.16); color: var(--c-teal-deep); }
.badge-trialing { background: rgba(212,168,87,0.18); color: var(--c-gold); }
.badge-past_due, .badge-unpaid, .badge-paused { background: rgba(184,58,58,0.12); color: #B83A3A; }
.badge-canceled, .badge-incomplete_expired { background: rgba(0,0,0,0.08); color: var(--c-muted); }
.badge-incomplete { background: rgba(212,168,87,0.18); color: var(--c-gold); }

.dash-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 22px;
  border: 1px solid;
  flex-wrap: wrap;
}
.dash-banner-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.dash-banner-text { flex: 1; min-width: 200px; font-size: 14.5px; line-height: 1.7; }
.dash-banner-text strong { font-weight: 800; }
.dash-banner-error {
  background: rgba(184,58,58,0.06);
  border-color: rgba(184,58,58,0.24);
  color: #8a2d2d;
}
.dash-banner-error .dash-banner-icon {
  background: rgba(184,58,58,0.14);
  color: #B83A3A;
}
.dash-banner-info {
  background: rgba(94,139,126,0.06);
  border-color: rgba(94,139,126,0.24);
  color: var(--c-teal-deep);
}
.dash-banner-info .dash-banner-icon {
  background: rgba(94,139,126,0.14);
  color: var(--c-teal-deep);
}
.dash-banner-success {
  background: rgba(212,168,87,0.08);
  border-color: rgba(212,168,87,0.40);
  color: var(--c-navy-deep);
}
.dash-banner-success .dash-banner-icon {
  background: linear-gradient(135deg, var(--c-gold-bright), var(--c-gold));
  color: var(--c-navy-deep);
}
.dash-banner-warn {
  background: rgba(212,168,87,0.06);
  border-color: rgba(212,168,87,0.36);
  color: #8a6a1f;
}
.dash-banner-warn .dash-banner-icon {
  background: rgba(212,168,87,0.18);
  color: var(--c-gold);
}

.alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.alt-card {
  padding: 18px;
  border-radius: 14px;
  background: var(--c-cream-soft);
  border: 1px solid rgba(94,139,126,0.16);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .25s, transform .25s;
}
.alt-card:hover { border-color: rgba(94,139,126,0.40); transform: translateY(-2px); }
.alt-card-name { font-weight: 800; color: var(--c-navy-deep); font-size: 16px; }
.alt-card-meta { font-size: 13px; color: var(--c-muted); }
.alt-card-price { font-weight: 800; color: var(--c-teal-deep); font-size: 18px; margin: 4px 0 8px; }
.alt-card .btn { width: 100%; }

.dash-payments {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.dash-payments th, .dash-payments td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(94,139,126,0.12);
}
.dash-payments th { text-align: right; color: var(--c-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.dash-payments tr:last-child td { border-bottom: none; }

.refund-details summary { list-style: none; cursor: pointer; }
.refund-details summary::-webkit-details-marker { display: none; }
.refund-form {
  margin-top: 10px;
  padding: 14px;
  background: var(--c-cream-soft);
  border: 1px solid rgba(94,139,126,0.20);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px;
}
.refund-form input, .refund-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(94,139,126,0.24);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  margin-top: 4px;
}
.refund-form textarea { resize: vertical; }

.refund-list { margin-top: 10px; padding: 0; list-style: none; }
.refund-list li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(94,139,126,0.14);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px;
}

.plans-grid-dash {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Currency toggle on landing */
.currency-switch {
  display: inline-flex;
  margin: 0 auto 22px;
  background: var(--c-white);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(94,139,126,0.20);
  box-shadow: var(--shadow-sm);
  gap: 2px;
}
.currency-switch button {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--c-ink-soft);
  transition: background .25s, color .25s;
  display: inline-flex; align-items: center; gap: 6px;
}
.currency-switch button.is-active {
  background: linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-deep) 100%);
  color: white;
  box-shadow: 0 6px 14px rgba(63,110,97,0.25);
}
.currency-switch button:hover:not(.is-active) {
  background: rgba(94,139,126,0.10);
  color: var(--c-teal-deep);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { padding: 130px 0 70px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan-popular { transform: none; }
  .how-grid { grid-template-columns: 1fr; }
  .trial-card { grid-template-columns: 1fr; padding: 36px 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-side { padding: 40px 28px; min-height: 220px; }
  .auth-form-wrap { padding: 40px 24px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute; top: 70px; right: 4%; left: 4%;
    background: var(--c-white);
    border-radius: var(--radius);
    padding: 14px;
    gap: 4px;
    box-shadow: var(--shadow-md);
  }
  .who-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .section { padding: 70px 0; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .why-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .trial-card { padding: 28px 20px; }
  .auth-form-wrap, .auth-side { padding: 32px 20px; }
  .auth-form h2 { font-size: 26px; }
  .nav-brand-name { display: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}