/* /public/css/index.css — StudioBook Premium v2 */

/* ============================================================
   CSS VARIABLES (✅ original palette preserved + extended)
============================================================ */
:root {
  --bg:   #070b14;
  --bg2:  #0b1220;
  --bg3:  #0e1629;

  --panel:   rgba(255,255,255,.055);
  --panel2:  rgba(255,255,255,.08);
  --stroke:  rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.18);

  --text:  rgba(255,255,255,.93);
  --muted: rgba(255,255,255,.66);
  --faint: rgba(255,255,255,.42);

  --brand:  #8b5cf6;
  --brand2: #22c55e;
  --brand3: #38bdf8;
  --warn:   #f59e0b;

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow:  0 24px 80px rgba(0,0,0,.60);
  --shadow2: 0 10px 40px rgba(0,0,0,.44);
  --shadow3: 0 4px 18px rgba(0,0,0,.32);

  --max:  1320px;
  --pad:  18px;
  --tap:  46px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; width: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Tajawal', system-ui, -apple-system, "Segoe UI", "Noto Kufi Arabic", sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
  width: 100%;
  min-width: 0;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Full width container — padding only, no width subtraction */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* No element should break layout width */
img, video, canvas { max-width: 100%; display: block; }

/* ============================================================
   AMBIENT BACKGROUND
============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 85% 5%,  rgba(139,92,246,.14), transparent 60%),
    radial-gradient(ellipse 800px 600px at 5%  40%,  rgba(34,197,94,.09),  transparent 60%),
    radial-gradient(ellipse 900px 700px at 50% 110%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #070b14, #0b1220);
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: .16;
}
.o1 { width: 500px; height: 500px; right: -200px;  top: 80px;    background: rgba(139,92,246,.55); }
.o2 { width: 400px; height: 400px; left:  -180px;  top: 360px;   background: rgba(34,197,94,.40);  }
.o3 { width: 600px; height: 600px; left:   25%;    bottom: -320px; background: rgba(59,130,246,.32); }
.o4 { width: 300px; height: 300px; right:   10%;   bottom: 120px; background: rgba(139,92,246,.28); }

/* Grid lines */
.gridlines {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
  z-index: 0;
}

/* Noise overlay */
.noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

/* Everything above ambient layers */
.nav, main, section, footer, .backdrop, .toast, .wa-wrap,
.install-banner {
  position: relative;
  z-index: 1;
}

/* ============================================================
   NAV
============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(7,11,20,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s;
}
.nav.scrolled {
  background: rgba(7,11,20,.85);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 28px rgba(0,0,0,.40);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -.2px;
  flex-shrink: 0;
}
.brand-text { font-size: 15px; }

.logo {
  width: 34px; height: 34px;
  border-radius: 11px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.72), transparent 60%),
    linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 8px 24px rgba(139,92,246,.24);
  flex-shrink: 0;
}
.logo.sm { width: 26px; height: 26px; border-radius: 8px; }

.nav-links {
  display: none;
  gap: 4px;
  align-items: center;
}
.nav-link {
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: color .18s, background .18s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.06); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ── Mobile nav: hide "ابدأ مجانًا" CTA, style login as primary ── */
.nav-cta { display: none; }

/* On mobile, make #btnOpenAuth (تسجيل الدخول) look premium/primary */
#btnOpenAuth {
  border-color: rgba(139,92,246,.55);
  background: linear-gradient(135deg, rgba(139,92,246,.92), rgba(34,197,94,.70));
  box-shadow: 0 4px 18px rgba(139,92,246,.32);
  font-size: 13px;
  padding: 9px 16px;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}
#btnOpenAuth::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,.20), transparent 70%);
  pointer-events: none;
}
#btnOpenAuth:hover {
  box-shadow: 0 8px 28px rgba(139,92,246,.50);
  transform: translateY(-2px);
}

/* ── Buttons ── */
.btn {
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .2s var(--ease-back), background .18s, border-color .18s, box-shadow .18s;
  box-shadow: var(--shadow3);
}
.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.09);
}
.btn:active { transform: translateY(0) scale(.98); }

.btn.primary {
  border-color: rgba(139,92,246,.50);
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(34,197,94,.72));
  box-shadow: 0 6px 24px rgba(139,92,246,.28);
  position: relative;
  overflow: hidden;
}
.btn.primary:hover { box-shadow: 0 10px 32px rgba(139,92,246,.44); }
.btn-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.18), transparent 70%);
  pointer-events: none;
}
.btn.ghost {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.btn.icon {
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 13px;
}
.btn.close { width: 44px; height: 44px; padding: 0; border-radius: 13px; }
.btn.x     { width: 44px; height: 44px; padding: 0; border-radius: 13px; }

/* Hamburger */
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  display: block;
  width: 18px; height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 6px;
  position: relative;
  content: "";
}
.hamburger span::before { position: absolute; top: -6px; left: 0; }
.hamburger span::after  { position: absolute; top:  6px; left: 0; }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 700;
}
.mobile-menu a:hover { background: rgba(255,255,255,.06); color: var(--text); }
.mobile-menu-actions { padding-top: 8px; }

/* ============================================================
   HERO
============================================================ */
.hero { padding: 36px 0 0; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

/* Hero Copy */
.hero-copy { display: flex; flex-direction: column; gap: 0; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
  width: fit-content;
}
.eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand2);
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,.06); }
}

.headline {
  font-size: clamp(30px, 5.5vw, 58px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.6px;
  margin: 0 0 14px;
}
.headline-accent {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subhead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.hero-btn     { padding: 13px 22px; font-size: 15px; }
.hero-btn-ghost { padding: 13px 20px; font-size: 15px; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.trust-badge {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
}
.t-ic { font-size: 14px; }
.install-badge {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  /* Colorful gradient like primary but green-teal toned */
  border-color: rgba(34,197,94,.55);
  background: linear-gradient(135deg, rgba(34,197,94,.88), rgba(56,189,248,.70));
  box-shadow:
    0 0 0 4px rgba(34,197,94,.12),
    0 6px 22px rgba(34,197,94,.28);
  color: #fff;
  position: relative;
  overflow: hidden;
  /* pulsing glow ring */
  animation: installPulse 2.6s ease-in-out infinite;
}
.install-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.22), transparent 65%);
  pointer-events: none;
}
.install-badge:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 6px rgba(34,197,94,.16),
    0 10px 32px rgba(34,197,94,.42);
}
@keyframes installPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 6px 22px rgba(34,197,94,.28); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,.06), 0 6px 26px rgba(34,197,94,.38); }
}

/* Hero Visual */
.hero-visual {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  min-width: 0;
}

.photo-wrap {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.03);
}
.ph1 {
  width: 100%;
  height: clamp(200px, 55vw, 420px);
  object-fit: cover;
  display: block;
  animation: heroFloat 9s ease-in-out infinite;
  filter: saturate(1.06) contrast(1.02);
}
@keyframes heroFloat {
  0%,100% { transform: scale(1.04) translateY(0); }
  50%      { transform: scale(1.07) translateY(-8px); }
}
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    transparent 40%,
    rgba(7,11,20,.40) 100%
  );
  pointer-events: none;
}

/* Float cards on hero image */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(10,16,30,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  font-size: 11px;
  /* constrain so they don't overflow the image on small screens */
  max-width: calc(55% - 8px);
}
.float-a { bottom: 10px; right: 10px; }
.float-b { top: 10px; left: 10px; }
.float-icon { font-size: 17px; flex-shrink: 0; }
.float-label { color: var(--muted); font-weight: 600; font-size: 10px; line-height: 1.3; }
.float-val   { font-weight: 900; font-size: 12px; white-space: nowrap; }

/* UI Preview card */
.ui-preview-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.90);
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: var(--shadow2);
}
.uip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
}
.uip-dots { display: flex; gap: 5px; }
.uip-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.uip-dots span:nth-child(1) { background: #ff5f57; }
.uip-dots span:nth-child(2) { background: #ffbd2e; }
.uip-dots span:nth-child(3) { background: #28ca41; }
.uip-title { flex: 1; font-size: 12px; font-weight: 800; text-align: center; }
.uip-badge {
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(139,92,246,.20);
  border: 1px solid rgba(139,92,246,.30);
  color: rgba(196,181,253,.95);
}
.uip-body { padding: 12px 14px; display: grid; gap: 10px; }
.uip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.uip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.uip-dot.ok    { background: var(--brand2); box-shadow: 0 0 6px rgba(34,197,94,.45); }
.uip-dot.warn  { background: var(--warn);   box-shadow: 0 0 6px rgba(245,158,11,.45); }
.uip-dot.brand { background: var(--brand);  box-shadow: 0 0 6px rgba(139,92,246,.45); }
.uip-info { flex: 1; display: grid; gap: 2px; }
.uip-name { font-size: 12px; font-weight: 800; }
.uip-sub  { font-size: 11px; color: var(--muted); font-weight: 600; }
.uip-amount { font-size: 12px; font-weight: 800; }
.ok-text   { color: var(--brand2); }
.warn-text { color: var(--warn); }
.brand-text-col { color: var(--brand); }

.uip-progress-wrap { margin-top: 2px; }
.uip-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 5px;
}
.uip-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.uip-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* Ribbon — seamless infinite scroll */
.ribbon {
  margin-top: 36px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  padding: 0;
  /* prevent ribbon from creating horizontal scroll */
  width: 100%;
  position: relative;
}
/* Faint fade edges so ribbon blends into page */
.ribbon::before,
.ribbon::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.ribbon::before {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.ribbon::after {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}

.ribbon-track {
  display: flex;
  align-items: center;
  /* width must be exactly 2× the natural content so -50% loops perfectly */
  width: max-content;
  padding: 11px 0;
  /* seamless: animation moves exactly half total width */
  animation: ribbonScroll 28s linear infinite;
  will-change: transform;
}
/* Pause on hover for readability */
.ribbon:hover .ribbon-track { animation-play-state: paused; }

@keyframes ribbonScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ribbon-item {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  padding: 0 18px;
  white-space: nowrap;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.ribbon-sep {
  color: var(--brand);
  font-size: 9px;
  flex-shrink: 0;
  opacity: .7;
}

/* ============================================================
   TRUST SECTION
============================================================ */
.trust-section {
  padding: 40px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: border-color .22s, background .22s, transform .22s var(--ease-back);
}
.trust-item:hover {
  border-color: rgba(139,92,246,.28);
  background: rgba(139,92,246,.06);
  transform: translateY(-2px);
}
.trust-ic { font-size: 26px; flex-shrink: 0; }
.trust-item b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.trust-item p { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; }

/* ============================================================
   SECTIONS SHARED
============================================================ */
.section { padding: 56px 0; }

.section-head {
  text-align: center;
  margin-bottom: 52px;
}
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.24);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.section-title-text {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.18;
  margin: 0 0 12px;
  letter-spacing: -.4px;
}
.accent {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-sub {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

/* ============================================================
   FEATURES SECTION
============================================================ */
.features-section { padding-top: 20px; }

/* Feature blocks: alternating layout */
.feature-blocks { display: flex; flex-direction: column; gap: 64px; margin-bottom: 64px; }

.feature-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.feature-num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--brand);
  margin-bottom: 8px;
}
.feature-icon-big {
  font-size: 36px;
  margin-bottom: 12px;
  display: inline-block;
}
.feature-title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  margin: 0 0 12px;
  letter-spacing: -.3px;
}
.feature-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  font-weight: 500;
  margin: 0 0 18px;
}
.feature-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.80);
  font-weight: 700;
}
.feature-list li::before {
  content: '✦';
  color: var(--brand2);
  font-size: 9px;
  flex-shrink: 0;
}

/* Feature visual cards */
.feature-visual { width: 100%; }

.fv-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(11,18,32,.88);
  backdrop-filter: blur(16px);
  padding: 16px;
  box-shadow: var(--shadow2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .25s, box-shadow .25s;
}
.fv-card:hover {
  border-color: rgba(139,92,246,.28);
  box-shadow: 0 16px 56px rgba(0,0,0,.50), 0 0 0 1px rgba(139,92,246,.14);
}
.fv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.fv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.fv-item.confirmed { border-color: rgba(34,197,94,.18); background: rgba(34,197,94,.05); }
.fv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fv-dot.ok    { background: var(--brand2); }
.fv-dot.warn  { background: var(--warn); }
.fv-dot.brand { background: var(--brand); }
.fv-item b    { display: block; font-size: 12px; font-weight: 800; }
.fv-item span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }

/* Financial stats */
.fv-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.fv-stat {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.fv-stat-label { display: block; font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.fv-stat-val   { display: block; font-size: 13px; font-weight: 900; }
.fv-bar-wrap { display: grid; gap: 5px; }
.fv-bar-bg {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.fv-bar-fg {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.fv-bar-pct { font-size: 11px; font-weight: 800; color: var(--brand2); }

/* Calendar card */
.cal-card { padding: 14px 12px; }
.cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 11px;
  text-align: center;
}
.cal-label { color: var(--faint); font-weight: 800; font-size: 10px; padding: 2px 0; }
.cal-day {
  padding: 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  cursor: default;
}
.cal-day.dot-ok   { background: rgba(34,197,94,.18);  color: rgba(134,239,172,.95); font-weight: 900; }
.cal-day.dot-warn { background: rgba(245,158,11,.18); color: rgba(252,211,77,.95);  font-weight: 900; }
.cal-day.today    { background: rgba(139,92,246,.22); color: #fff; font-weight: 900; }
.cal-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.leg {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
}
.leg.ok   { background: rgba(34,197,94,.55); }
.leg.warn { background: rgba(245,158,11,.55); }

/* Chart card */
.chart-card { min-height: 180px; }
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding: 0 4px;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: rgba(139,92,246,.35);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background .3s;
}
.bar.active { background: linear-gradient(180deg, var(--brand), rgba(139,92,246,.60)); }
.bar.dim    { background: rgba(255,255,255,.08); }
.bar span {
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
  font-weight: 700;
}
.chart-note {
  font-size: 12px;
  font-weight: 800;
  color: var(--brand2);
  text-align: center;
  margin-top: 8px;
}

/* Packages preview */
.pkg-preview-list { display: grid; gap: 7px; }
.pkg-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 12px;
  font-weight: 700;
}
.pkg-preview-item.highlighted {
  background: rgba(139,92,246,.10);
  border-color: rgba(139,92,246,.28);
}
.pkg-name    { font-weight: 900; }
.pkg-details { color: var(--muted); flex: 1; padding: 0 8px; font-size: 11px; }
.pkg-price   { color: var(--brand2); font-weight: 900; }

/* Mobile card */
.mobile-card { align-items: center; }
.mobile-frame {
  width: 80px;
  padding: 8px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  margin-inline: auto;
}
.mobile-screen { display: grid; gap: 6px; }
.ms-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.ms-bar.short { width: 55%; }
.ms-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ms-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ms-dot.ok   { background: var(--brand2); }
.ms-dot.warn { background: var(--warn); }
.ms-lines { display: grid; gap: 3px; flex: 1; }
.ms-lines div { height: 4px; border-radius: 2px; background: rgba(255,255,255,.10); }
.ms-lines div:last-child { width: 65%; }
.ms-btn {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  margin-top: 4px;
}
.pwa-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  font-size: 11px;
  font-weight: 800;
  color: rgba(134,239,172,.95);
  margin-top: 4px;
}

/* Mini feature cards */
.mini-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini-card {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: border-color .22s, background .22s, transform .22s var(--ease-back);
}
.mini-card:hover {
  border-color: rgba(139,92,246,.28);
  background: rgba(139,92,246,.06);
  transform: translateY(-3px);
}
.mini-ic { font-size: 26px; margin-bottom: 10px; }
.mini-card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 900; }
.mini-card p  { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.7; }

/* ============================================================
   HOW IT WORKS
============================================================ */
.hiw-section { background: rgba(255,255,255,.016); }

.steps-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 0 0 20px;
}
.steps-line {
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: auto;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand2), transparent);
  border-radius: 999px;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(139,92,246,.35);
  position: relative;
  z-index: 1;
}
.step-card {
  flex: 1;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(11,18,32,.80);
  backdrop-filter: blur(12px);
  transition: border-color .22s, transform .22s var(--ease-back);
}
.step-card:hover {
  border-color: rgba(139,92,246,.24);
  transform: translateX(-4px);
}
.step-icon { font-size: 28px; margin-bottom: 8px; }
.step-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 900; }
.step-card p  { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; font-weight: 500; }

.hiw-cta { text-align: center; margin-top: 44px; }
.hiw-btn { padding: 14px 32px; font-size: 15px; }

/* ============================================================
   SHOWCASE (✅ id="showcase")
============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.shot {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  padding: 14px;
  transition: border-color .22s, transform .22s var(--ease-back);
}
.shot:hover {
  border-color: rgba(139,92,246,.24);
  transform: translateY(-3px);
}
.shot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 800;
}
.shot-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.25);
  color: rgba(196,181,253,.90);
  font-weight: 800;
}
.shot-body { display: flex; flex-wrap: wrap; gap: 6px; }
.shot-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.shot-chip.ok   { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.24);  color: rgba(134,239,172,.90); }
.shot-chip.warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.24); color: rgba(252,211,77,.90);  }
.shot-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.shot-box {
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}

/* Mini calendar */
.cal-mini { font-size: 12px; }
.cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: var(--faint);
  font-weight: 800;
  font-size: 11px;
  margin-bottom: 6px;
}
.cal-grid-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-cell {
  height: 20px;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
}
.cal-cell.dot-ok   { background: rgba(34,197,94,.28); }
.cal-cell.dot-warn { background: rgba(245,158,11,.28); }

/* Mini form */
.form-mini { display: grid; gap: 7px; }
.form-line {
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
}
.form-line:nth-child(2) { width: 75%; }
.form-area {
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.form-btn {
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(139,92,246,.50), rgba(34,197,94,.35));
}

/* CTA bar */
.cta {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(34,197,94,.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cta b    { font-size: 16px; display: block; margin-bottom: 3px; }
.cta span { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ============================================================
   PRICING (✅ id="pricing")
============================================================ */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.pricing-card {
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
  transition: border-color .22s, transform .22s var(--ease-back), box-shadow .22s;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}
.pricing-card.featured {
  border-color: rgba(139,92,246,.40);
  background: linear-gradient(160deg, rgba(139,92,246,.12), rgba(34,197,94,.06));
}
.pricing-card.featured:hover {
  box-shadow: 0 20px 60px rgba(139,92,246,.25);
}
.pricing-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.20), transparent 70%);
  pointer-events: none;
}
.pricing-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.24);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.pricing-title { display: block; font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.pricing-desc  {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  margin: 0 0 18px;
}
.pricing-btn   { width: 100%; margin-bottom: 18px; padding: 13px; font-size: 15px; }
.pricing-list  {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
}
.pricing-list.muted { color: var(--muted); }

/* ============================================================
   FAQ (✅ id="faq")
============================================================ */
.faq { display: grid; gap: 10px; }
.qa {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  transition: border-color .22s;
}
.qa[open] { border-color: rgba(139,92,246,.28); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 15px 16px;
  font-weight: 800;
  font-size: 14px;
  list-style: none;
  user-select: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa-arrow {
  font-size: 20px;
  color: var(--brand);
  transition: transform .25s var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.qa[open] .qa-arrow { transform: rotate(90deg); }
.qa p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
  padding: 28px 0 36px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: 16px;
}
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
}
.foot small { color: var(--faint); font-weight: 700; font-size: 12px; }
.footer-links {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}
.footer-links a:hover { color: var(--text); }

/* ============================================================
   AUTH MODAL (✅ all IDs preserved, style enhanced)
============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

#authBackdrop.backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
}
#authBackdrop[style*="display: flex"] {
  animation: bdIn .18s ease-out both;
}
@keyframes bdIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(520px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(11,18,32,.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  overflow: hidden;
}
.auth-modal { animation: modalIn .28s var(--ease-back) both; }
@keyframes modalIn {
  from { transform: scale(.94) translateY(12px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.modal-head {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.modal-head b { font-size: 15px; font-weight: 900; }
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tab {
  padding: 13px 10px;
  text-align: center;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 0;
  transition: color .18s, background .18s;
}
.tab.active {
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-bottom: 2px solid var(--brand);
}
.modal-body {
  padding: 18px;
  display: grid;
  gap: 14px;
  max-height: min(70vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 800; }
.field input {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
  min-height: var(--tap);
  font-size: 15px;
  font-weight: 700;
  transition: border-color .18s;
}
.field input:focus { border-color: rgba(139,92,246,.55); background: rgba(139,92,246,.04); }
.row2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hint { font-size: 12px; color: var(--faint); line-height: 1.75; font-weight: 600; }
.submit { width: 100%; padding: 13px 14px; border-radius: 16px; font-size: 15px; }

@media (max-width: 560px) {
  #authBackdrop.backdrop {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #authBackdrop .modal {
    width: 100% !important;
    height: auto !important;
    max-height: 92svh !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }
  #authBackdrop .modal-body {
    max-height: calc(92svh - 56px - 50px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   TOAST
============================================================ */
.toast {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(620px, calc(100% - var(--pad) * 2));
  background: rgba(11,18,32,.94);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: 12px 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 9999;
  box-shadow: var(--shadow2);
}
.toast b    { font-size: 13px; }
.toast span { color: var(--muted); font-size: 12px; font-weight: 700; }

/* ============================================================
   SCROLL ANIMATIONS — CSS-only (IntersectionObserver adds .is-visible)
   No GSAP, no scroll listeners — zero lag on mobile
============================================================ */

/* Default hidden state — use transform+opacity only (GPU-accelerated) */
.gsap-fade-up,
.gsap-reveal,
.gsap-feature,
.gsap-step,
.gsap-stagger > *,
.trust-item,
.mini-card,
.fv-card {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.45s cubic-bezier(.2,.8,.2,1),
    transform 0.45s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* Hero elements are above-fold — skip delay, show immediately */
.gsap-fade-up {
  transition-delay: 0s;
}
/* Stagger hero copy items */
.hero-copy .gsap-fade-up:nth-child(1) { transition-delay: 0.05s; }
.hero-copy .gsap-fade-up:nth-child(2) { transition-delay: 0.12s; }
.hero-copy .gsap-fade-up:nth-child(3) { transition-delay: 0.19s; }
.hero-copy .gsap-fade-up:nth-child(4) { transition-delay: 0.26s; }
.hero-copy .gsap-fade-up:nth-child(5) { transition-delay: 0.33s; }

.gsap-hero-visual {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(.2,.8,.2,1) 0.2s,
              transform 0.55s cubic-bezier(.2,.8,.2,1) 0.2s;
  will-change: opacity, transform;
}

/* Stagger children inside .gsap-stagger containers */
.gsap-stagger > *:nth-child(1) { transition-delay: 0.04s; }
.gsap-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.gsap-stagger > *:nth-child(3) { transition-delay: 0.20s; }
.gsap-stagger > *:nth-child(4) { transition-delay: 0.28s; }

/* .is-visible — added by IntersectionObserver */
.gsap-fade-up.is-visible,
.gsap-reveal.is-visible,
.gsap-feature.is-visible,
.gsap-step.is-visible,
.gsap-stagger > *.is-visible,
.trust-item.is-visible,
.mini-card.is-visible,
.fv-card.is-visible,
.gsap-hero-visual.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero fires on DOM ready via JS — CSS handles transition */
/* (DOMContentLoaded adds .is-visible to .gsap-fade-up and .gsap-hero-visual) */

/* Progress bars smooth fill */
.uip-bar-fill,
.fv-bar-fg {
  transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}

/* Chart bars smooth height */
.chart-bars .bar {
  transition: height 0.7s cubic-bezier(.2,.8,.2,1);
}
.chart-bars .bar:nth-child(2) { transition-delay: 0.08s; }
.chart-bars .bar:nth-child(3) { transition-delay: 0.16s; }
.chart-bars .bar:nth-child(4) { transition-delay: 0.24s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gsap-fade-up, .gsap-reveal, .gsap-feature, .gsap-step,
  .gsap-stagger > *, .trust-item, .mini-card, .fv-card,
  .gsap-hero-visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   ✅ NEW: WHATSAPP FLOATING BUTTON — fixed bottom-right
============================================================ */
.wa-wrap {
  position: fixed;
  bottom: 24px;
  /* Physical right side of screen — works in both LTR and RTL */
  right: 24px;
  left: 10px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;  /* tooltip aligns to the right */
  gap: 10px;
}
.wa-tooltip {
  background: rgba(10,16,30,.94);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  box-shadow: var(--shadow2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.wa-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wa-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  box-shadow: 0 6px 22px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.28);
  transition: transform .22s var(--ease-back), box-shadow .22s;
  overflow: visible;    /* allow pulse ring to show */
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
}
.wa-btn:hover {
  transform: scale(1.10);
  box-shadow: 0 10px 32px rgba(37,211,102,.52), 0 4px 12px rgba(0,0,0,.32);
}
.wa-btn:active { transform: scale(.96); }
.wa-btn svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
}

/* Pulse ring */
.wa-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,.28);
  animation: waPulse 2.6s ease-out infinite;
  z-index: 0;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.90); opacity: 0;  }
}

/* ============================================================
   RESPONSIVE: TABLET 640px+
============================================================ */
@media (min-width: 640px) {
  .trust-grid     { grid-template-columns: 1fr 1fr; }
  .mini-features  { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .showcase       { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE: DESKTOP 860px+
============================================================ */
@media (min-width: 860px) {
  :root { --pad: 24px; }

  /* Nav desktop: show links, hide hamburger, show CTA */
  .nav-links  { display: flex; }
  .hamburger  { display: none; }
  .nav-cta    { display: inline-flex; }

  /* Restore #btnOpenAuth to normal ghost style on desktop (CTA handles primary) */
  #btnOpenAuth {
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.06);
    box-shadow: var(--shadow3);
    font-size: 14px;
    padding: 10px 16px;
    min-height: var(--tap);
  }
  #btnOpenAuth::before { display: none; }
  #btnOpenAuth:hover {
    box-shadow: var(--shadow3);
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.09);
    transform: translateY(-2px);
  }

  .hero { padding: 64px 0 0; }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .hero-visual {
    flex-direction: column;
    overflow: visible;
  }
  .ph1 { height: clamp(240px, 32vw, 420px); }

  .trust-section  { padding: 52px 0; }
  .trust-grid     { grid-template-columns: 1fr 1fr 1fr 1fr; }

  .feature-block  { grid-template-columns: 1fr 1fr; }
  .feature-block.reverse .feature-content { order: 2; }
  .feature-block.reverse .feature-visual  { order: 1; }

  .steps-timeline {
    grid-template-columns: 1fr 1fr;
    padding-right: 0;
    padding-left: 0;
  }
  .steps-line   { display: none; }
  .step         { flex-direction: column; align-items: flex-start; }

  .showcase { grid-template-columns: 1fr 1fr 1fr; }
  .pricing  { grid-template-columns: 1fr 1fr; }
  .row2     { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  :root { --pad: 32px; }
  .hero { padding: 80px 0 0; }
}

/* ============================================================
   MOBILE-FIRST FIXES (max-width: 859px)
   Ensure nothing overflows, proportions look good on phones
============================================================ */
@media (max-width: 859px) {
  /* Tighten hero padding on mobile */
  .hero { padding: 24px 0 0; }

  /* Headline slightly smaller for narrow screens */
  .headline {
    font-size: clamp(26px, 8vw, 42px);
    letter-spacing: -.3px;
  }

  /* Hero actions — stack on very small */
  .hero-actions { flex-direction: column; gap: 8px; }
  .hero-btn, .hero-btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 15px;
  }

  /* Trust badges row — allow scroll if needed */
  .trust-row { gap: 6px; }

  /* Section padding reduced on mobile */
  .section { padding: 36px 0; }
  .trust-section { padding: 28px 0; }
  .section-head { margin-bottom: 32px; }

  /* Feature blocks: single column, no overflow */
  .feature-block { grid-template-columns: 1fr; gap: 20px; }
  .feature-block.reverse .feature-content { order: unset; }
  .feature-block.reverse .feature-visual  { order: unset; }
  .feature-blocks { gap: 44px; }

  /* Steps: single column */
  .steps-timeline {
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 0;
  }
  .steps-line { display: block; }

  /* Mini features: 2 columns on mobile */
  .mini-features { grid-template-columns: 1fr 1fr; }

  /* Showcase: 1 column on mobile */
  .showcase { grid-template-columns: 1fr; }

  /* Pricing: 1 column on mobile */
  .pricing { grid-template-columns: 1fr; }

  /* Hide the UI preview card on mobile to save space */
  .ui-preview-card { display: none; }

  /* Wider container on small phones — less padding */
  :root { --pad: 14px; }
}

/* ============================================================
   VERY SMALL PHONES (max-width: 400px)
============================================================ */
@media (max-width: 400px) {
  :root { --pad: 12px; }
  .headline   { font-size: 26px; }
  .hero-eyebrow { font-size: 11px; padding: 7px 12px; }
  .subhead    { font-size: 14px; }
  .trust-badge { font-size: 11px; padding: 6px 10px; }
  .section-title-text { font-size: 22px; }
  .mini-features { grid-template-columns: 1fr 1fr; }

  /* Float cards smaller text on tiny screens */
  .float-label { font-size: 9px; }
  .float-val   { font-size: 11px; }
  .float-card  { padding: 6px 10px; gap: 6px; }
}


/* ============================================================
   ✅ NEW: SUBSCRIPTION PLANS SECTION — id="plans"
============================================================ */
.plans-section {
  padding: 56px 0;
}

/* Animate plan cards on scroll */
.plan-card {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.45s cubic-bezier(.2,.8,.2,1),
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    border-color .25s,
    box-shadow .25s;
  will-change: opacity, transform;
}
.plan-card.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger plan cards */
.plans-grid .plan-card:nth-child(1) { transition-delay: 0.04s; }
.plans-grid .plan-card:nth-child(2) { transition-delay: 0.14s; }
.plans-grid .plan-card:nth-child(3) { transition-delay: 0.24s; }

/* Grid layout */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* Base card */
.plan-card {
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.82);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.plan-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(139,92,246,.30);
  box-shadow: 0 20px 60px rgba(0,0,0,.50);
}

/* Featured (6-month) card */
.plan-card.plan-featured {
  border-color: rgba(139,92,246,.50);
  background: linear-gradient(
    155deg,
    rgba(139,92,246,.18) 0%,
    rgba(34,197,94,.07) 60%,
    rgba(11,18,32,.85) 100%
  );
  box-shadow:
    0 0 0 1px rgba(139,92,246,.20),
    0 16px 56px rgba(139,92,246,.18);
}
.plan-card.plan-featured:hover {
  border-color: rgba(139,92,246,.65);
  box-shadow:
    0 0 0 1px rgba(139,92,246,.35),
    0 28px 70px rgba(139,92,246,.32);
}

/* Glowing orb behind featured card */
.plan-glow {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.22), transparent 68%);
  pointer-events: none;
}

/* Decorative stars on featured */
.plan-stars {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 11px;
  color: rgba(196,181,253,.35);
  letter-spacing: 4px;
  pointer-events: none;
  font-weight: 900;
}

/* Badge wrapper */
.plan-badge-wrap {
  display: flex;
}
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  color: var(--brand2);
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.30);
  border-radius: 999px;
  padding: 5px 14px;
  width: fit-content;
}

/* Plan header block */
.plan-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-name {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -.2px;
}

/* Price display */
.plan-price {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.plan-amount {
  font-size: clamp(44px, 8vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,255,255,.68));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Featured price gets brand gradient */
.plan-card.plan-featured .plan-amount {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plan-currency {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  padding-bottom: 10px;
  line-height: 1;
}
.plan-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.65;
}

/* CTA button */
.plan-btn {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  border-radius: 16px;
  text-decoration: none;
  justify-content: center;
  letter-spacing: -.1px;
}

/* Features block */
.plan-features-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-features-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Feature list with check icons */
.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.plan-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  line-height: 1.4;
}
/* Circle check icon via CSS */
.plan-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    rgba(34,197,94,.12)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%2322c55e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  border: 1.5px solid rgba(34,197,94,.32);
}

/* ── Plans: Responsive ── */
@media (min-width: 640px) {
  .plans-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Featured spans full width on 2-col layout (tablet) */
  .plan-card.plan-featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 860px) {
  .plans-grid {
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: start;
  }
  /* Reset featured span on 3-col */
  .plan-card.plan-featured {
    grid-column: auto;
    /* Featured card slightly elevated */
    margin-top: -14px;
    margin-bottom: -14px;
  }
  .plan-card.plan-featured:hover {
    transform: translateY(-10px) !important;
  }
}

/* Reduced motion: skip plan card animations */
@media (prefers-reduced-motion: reduce) {
  .plan-card {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color .22s, box-shadow .22s !important;
  }
}


.ph1{
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
  border-radius: inherit;
}