/* ══════════════════════════════════════════════════════════════════════════
   DISHA — Full-screen ocean layout
══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:   #a78bfa;
  --purple-d: #7c3aed;
  --blue:     #60a5fa;
  --teal:     #2dd4bf;
  --pink:     #f472b6;
  --orange:   #fb923c;
  --amber:    #f59e0b;

  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.08);
  --border:   rgba(255,255,255,0.08);
  --text:     #f1f5f9;
  --text-2:   rgba(241,245,249,.55);
  --text-3:   rgba(241,245,249,.32);

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-head: 'Bricolage Grotesque', 'Inter', sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: #020b18;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ══ OCEAN VIDEO (full screen, always behind) ═══════════════════════════ */
#oceanVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}

/* Dark overlay so UI stays readable over bright footage */
#videoOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 1;
  pointer-events: none;
}

/* ══ AUTH SCREEN ════════════════════════════════════════════════════════ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6vw;
  pointer-events: none; /* let canvas receive non-interactive hits */
}

/* ── Login float (left) ─────────────────────────────────────────────── */
.auth-float {
  pointer-events: all;
  width: 400px;
  background: rgba(4, 16, 36, 0.72);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(120, 180, 255, 0.14);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 24px 80px rgba(0,0,0,.55),
    0 0 40px rgba(30,80,160,.12);
  animation: riseUp .7s cubic-bezier(.22,1,.36,1) both;
}

@keyframes riseUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* Small brand hint */
.panel-brand {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  color: rgba(148, 195, 255, 0.5);
  margin-bottom: 28px;
}

/* Heading */
.panel-heading { margin-bottom: 24px; }
.panel-heading h2 {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 700; letter-spacing: -.4px;
  color: var(--text); margin-bottom: 4px;
}
.panel-heading p { font-size: 13px; color: var(--text-3); }

/* Pill switcher */
.pill-switcher {
  position: relative; display: flex;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px; padding: 3px;
  margin-bottom: 22px; gap: 3px;
}
.pill-track {
  position: absolute; top: 3px; left: 3px;
  height: calc(100% - 6px); width: calc(50% - 4.5px);
  background: rgba(100,160,255,.14);
  border: 1px solid rgba(100,160,255,.25);
  border-radius: 7px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pill-track.right { transform: translateX(calc(100% + 6px)); }
.pill {
  flex: 1; position: relative; z-index: 1;
  padding: 8px; border: none; background: transparent;
  font-size: 13px; font-weight: 500; font-family: var(--font-sans);
  color: var(--text-3); cursor: pointer; border-radius: 7px;
  transition: color .2s;
}
.pill.active { color: #93c5fd; }

/* Banner */
.msg-banner {
  padding: 10px 13px; border-radius: 8px;
  font-size: 12.5px; margin-bottom: 16px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none} }
.msg-banner.error   { background:rgba(239,68,68,.1);  color:#fca5a5; border:1px solid rgba(239,68,68,.18); }
.msg-banner.success { background:rgba(52,211,153,.1); color:#6ee7b7; border:1px solid rgba(52,211,153,.18); }

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 11px; }
.field { position: relative; display: flex; align-items: center; }
.field-icon {
  position: absolute; left: 12px;
  color: rgba(150,190,255,.4); display: flex;
  pointer-events: none; transition: color .2s;
}
.field input {
  width: 100%;
  padding: 12px 40px 12px 38px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  color: var(--text); font-size: 13.5px; font-family: var(--font-sans);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder { color: rgba(150,190,255,.3); }
.field input:focus {
  border-color: rgba(100,160,255,.4);
  background: rgba(100,160,255,.07);
  box-shadow: 0 0 0 3px rgba(60,120,255,.1);
}
.field:focus-within .field-icon { color: rgba(150,200,255,.7); }
.eye-btn {
  position: absolute; right: 10px;
  background: none; border: none;
  color: rgba(150,190,255,.3); cursor: pointer;
  display: flex; align-items: center; padding: 4px;
  transition: color .2s;
}
.eye-btn:hover { color: rgba(150,190,255,.6); }

/* CTA button */
.cta-btn {
  margin-top: 4px; width: 100%; padding: 13px 20px;
  background: linear-gradient(135deg, #1a4fd6 0%, #2563eb 50%, #1d9bf0 100%);
  border: none; border-radius: 9px;
  color: white; font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(37,99,235,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.cta-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  opacity: 0; transition: opacity .2s;
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(37,99,235,.5); }
.cta-btn:hover::before { opacity: 1; }
.cta-btn:active { transform: none; }
.cta-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.cta-arrow { transition: transform .2s; }
.cta-btn:hover .cta-arrow { transform: translateX(3px); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .7s linear infinite; }

.switch-line {
  text-align: center; font-size: 12.5px;
  color: var(--text-3); margin-top: 4px;
}
.switch-line a { color: #93c5fd; font-weight: 500; cursor: pointer; text-decoration: none; }
.switch-line a:hover { text-decoration: underline; }

/* Pending verification box */
.pending-box {
  text-align: center;
  padding: 20px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.pending-icon { font-size: 36px; margin-bottom: 12px; }
.pending-text {
  font-size: 13.5px; color: var(--text-2);
  line-height: 1.6; margin-bottom: 10px;
}
.pending-text strong { color: #93c5fd; font-weight: 600; }
.pending-hint {
  font-size: 12px; color: var(--text-3); line-height: 1.5;
}

/* ── Brand float (right) ────────────────────────────────────────────── */
.brand-float {
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  animation: riseUp .8s cubic-bezier(.22,1,.36,1) .15s both;
}

.bf-icon-wrap {
  width: 80px; height: 80px; border-radius: 22px;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,158,11,.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 0 50px rgba(245,158,11,.18), 0 0 100px rgba(245,158,11,.07);
  animation: lanternGlow 5s ease-in-out infinite;
}
@keyframes lanternGlow {
  0%,100% { box-shadow: 0 0 50px rgba(245,158,11,.18), 0 0 100px rgba(245,158,11,.07); }
  50%      { box-shadow: 0 0 70px rgba(245,158,11,.32), 0 0 130px rgba(245,158,11,.13); }
}
.bf-icon {
  width: 48px; height: 48px;
  filter: drop-shadow(0 0 14px rgba(245,158,11,.55));
}

.bf-title {
  font-family: var(--font-head);
  font-size: clamp(64px, 8vw, 110px);
  font-weight: 800; letter-spacing: 10px; line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, rgba(200,220,255,0.85) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 4px 30px rgba(100,160,255,.25));
  margin-bottom: 18px;
}

.bf-rule {
  width: 48px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.7), transparent);
  margin-bottom: 14px;
}

.bf-tagline {
  font-size: 11px; font-weight: 500;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(210, 230, 255, 0.5);
}

/* Sound button — removed
.sound-btn {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 20;
  pointer-events: all;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 18px;
  background: rgba(4,16,36,.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  color: rgba(200,220,255,.6);
  font-size: 12px; font-weight: 500; font-family: var(--font-sans);
  cursor: pointer; letter-spacing: .3px;
  transition: background .2s, border-color .2s, color .2s;
}
.sound-btn:hover { background: rgba(4,16,36,.8); border-color: rgba(245,158,11,.35); color: #fde68a; }
.sound-btn.active { border-color: rgba(245,158,11,.45); color: #fcd34d; background: rgba(245,158,11,.1); }
*/

/* ══ DASHBOARD ══════════════════════════════════════════════════════════ */
.dashboard {
  position: fixed; inset: 0; z-index: 20;
  background: #080e1a;
  overflow-y: auto;
}

.top-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 62px;
  background: rgba(8,14,26,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.nav-left { display: flex; align-items: center; gap: 32px; }
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg,#fcd34d,#f59e0b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-links { display: flex; gap: 2px; }
.nav-link {
  padding: 5px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer; text-decoration: none;
  transition: color .2s, background .2s;
}
.nav-link:hover  { color: var(--text); background: var(--surface2); }
.nav-link.active { color: var(--text); background: var(--surface2); }
.nav-right { display: flex; align-items: center; gap: 11px; }
.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#f59e0b,#ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid rgba(245,158,11,.3);
}
.nav-name { font-size: 13px; font-weight: 500; color: var(--text-2); }
.nav-logout {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: transparent;
  border: 1px solid rgba(255,255,255,.07); border-radius: 7px;
  color: var(--text-3); font-size: 12px; font-family: var(--font-sans); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.nav-logout:hover { color:#fca5a5; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.06); }

/* ── Profile dropdown ───────────────────────────────────────────────── */
.nav-profile {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
  transition: background .2s;
  position: relative;
}
.nav-profile:hover { background: var(--surface2); }

.nav-chevron {
  color: var(--text-3);
  transition: transform .2s;
}
.nav-profile.open .nav-chevron { transform: rotate(180deg); }

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 220px;
  background: #0d1c35;
  border: 1px solid rgba(100,160,255,0.18);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  z-index: 200;
}
.profile-dropdown.open {
  display: block;
  animation: fadeIn .15s ease;
}

.pd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 12px;
}
.pd-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#f59e0b,#ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: 2px solid rgba(245,158,11,0.3);
}
.pd-info { min-width: 0; }
.pd-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-email {
  font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pd-divider {
  height: 1px; background: rgba(255,255,255,0.07); margin: 2px 0 6px;
}

.pd-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border: none; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; font-family: var(--font-sans);
  cursor: pointer; text-align: left; transition: background .15s, color .15s;
}
.pd-signout {
  background: transparent; color: var(--text-2);
}
.pd-signout:hover { background: var(--surface2); color: var(--text); }

.pd-delete {
  background: transparent; color: #fca5a5;
  margin-top: 2px;
}
.pd-delete:hover { background: rgba(239,68,68,0.1); color: #f87171; }

.hero-section { padding: 0 40px; }
.hero-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 44px 0 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 6px #34d399;
  animation: sPulse 2s ease infinite;
}
@keyframes sPulse { 0%,100%{box-shadow:0 0 6px #34d399}50%{box-shadow:0 0 12px #34d399} }
.hero-heading {
  font-family: var(--font-head); font-size: 38px; font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.1;
  background: linear-gradient(135deg,#fff 0%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 7px;
}
.hero-sub { font-size: 14px; color: var(--text-2); }
.hero-stats { display: flex; gap: 10px; flex-shrink: 0; }
.stat-pill {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px 20px; background: var(--surface);
  border: 1px solid rgba(255,255,255,.06); border-radius: 12px; min-width: 82px;
  transition: border-color .2s, background .2s;
}
.stat-pill:hover { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05); }
.stat-num {
  font-family: var(--font-head); font-size: 24px; font-weight: 700;
  background: linear-gradient(135deg,#fcd34d,#f59e0b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-label { font-size: 10px; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: .8px; }

/* ══ WHY BANNER (dashboard) ═════════════════════════════════════════════ */
.why-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(167,139,250,0.1) 0%, rgba(96,165,250,0.08) 100%);
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 14px; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  animation: fadeUp .4s ease both;
}
.why-banner:hover {
  border-color: rgba(167,139,250,0.5);
  background: linear-gradient(135deg, rgba(167,139,250,0.16) 0%, rgba(96,165,250,0.12) 100%);
  transform: translateY(-2px);
}
.why-banner-left { display: flex; align-items: center; gap: 14px; }
.why-banner-icon { font-size: 26px; line-height: 1; }
.why-banner-title {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--text); letter-spacing: -.3px; margin-bottom: 3px;
}
.why-banner-sub { font-size: 12px; color: var(--text-2); }
.why-banner-arrow {
  font-size: 12px; font-weight: 600; color: var(--purple);
  white-space: nowrap; opacity: .8; transition: opacity .2s, transform .2s;
}
.why-banner:hover .why-banner-arrow { opacity: 1; transform: translateX(3px); }

.cards-area { padding: 30px 40px 60px; max-width: 1300px; }
.section-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); margin-bottom: 16px; }
.cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }

.module-card {
  position: relative; border-radius: 16px; padding: 24px;
  border: 1px solid rgba(255,255,255,.06); background: var(--surface);
  overflow: hidden; cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
  animation: fadeUp .5s ease both;
}
.module-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; border-radius:16px; }
.module-card:hover { transform: translateY(-4px) scale(1.01); }
.module-card:hover::before { opacity:1; }

.cards-grid .module-card:nth-child(1){animation-delay:.05s}
.cards-grid .module-card:nth-child(2){animation-delay:.1s}
.cards-grid .module-card:nth-child(3){animation-delay:.15s}
.cards-grid .module-card:nth-child(4){animation-delay:.2s}
.cards-grid .module-card:nth-child(5){animation-delay:.25s}
.cards-grid .module-card:nth-child(6){animation-delay:.3s}

@keyframes fadeUp { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }

.card-purple{border-color:rgba(167,139,250,.15)}
.card-purple::before{background:radial-gradient(circle at top left,rgba(124,58,237,.1),transparent 60%)}
.card-purple:hover{border-color:rgba(167,139,250,.35);box-shadow:0 10px 30px rgba(124,58,237,.15)}
.card-blue{border-color:rgba(96,165,250,.15)}
.card-blue::before{background:radial-gradient(circle at top left,rgba(37,99,235,.1),transparent 60%)}
.card-blue:hover{border-color:rgba(96,165,250,.35);box-shadow:0 10px 30px rgba(37,99,235,.15)}
.card-teal{border-color:rgba(45,212,191,.15)}
.card-teal::before{background:radial-gradient(circle at top left,rgba(13,148,136,.1),transparent 60%)}
.card-teal:hover{border-color:rgba(45,212,191,.35);box-shadow:0 10px 30px rgba(13,148,136,.15)}
.card-orange{border-color:rgba(251,146,60,.15)}
.card-orange::before{background:radial-gradient(circle at top left,rgba(234,88,12,.1),transparent 60%)}
.card-orange:hover{border-color:rgba(251,146,60,.35);box-shadow:0 10px 30px rgba(234,88,12,.15)}
.card-pink{border-color:rgba(244,114,182,.15)}
.card-pink::before{background:radial-gradient(circle at top left,rgba(190,24,93,.1),transparent 60%)}
.card-pink:hover{border-color:rgba(244,114,182,.35);box-shadow:0 10px 30px rgba(190,24,93,.15)}
.card-indigo{border-color:rgba(129,140,248,.15)}
.card-indigo::before{background:radial-gradient(circle at top left,rgba(67,56,202,.1),transparent 60%)}
.card-indigo:hover{border-color:rgba(129,140,248,.35);box-shadow:0 10px 30px rgba(67,56,202,.15)}

.mc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mc-icon{font-size:28px;line-height:1}
.mc-badge{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:var(--text-3)}
.module-card h3{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px;color:var(--text)}
.module-card p{font-size:12.5px;line-height:1.6;color:var(--text-2)}
.mc-footer{margin-top:16px}
.mc-action{font-size:12px;font-weight:600;color:var(--text-3);transition:color .2s}
.module-card:hover .mc-action{color:var(--text-2)}

/* ══ COMING SOON PANEL ══════════════════════════════════════════════════ */
.coming-soon-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 62px - 130px);
  padding: 40px;
  animation: fadeUp .4s ease both;
}

.cs-card {
  position: relative;
  text-align: center;
  max-width: 560px;
  width: 100%;
  background: linear-gradient(160deg, rgba(26,47,90,0.6), rgba(8,14,26,0.8));
  border: 1px solid rgba(100,160,255,0.18);
  border-radius: 28px;
  padding: 56px 48px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(26,79,214,0.08);
}

.cs-glow {
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(29,155,240,0.18), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cs-icon {
  font-size: 52px;
  margin-bottom: 20px;
  line-height: 1;
  filter: drop-shadow(0 4px 16px rgba(29,155,240,0.3));
}

.cs-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: #60a5fa;
  background: rgba(96,165,250,0.1);
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 20px;
}

.cs-title {
  font-family: var(--font-head);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(135deg, #fff 0%, rgba(200,220,255,0.8) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 16px;
}

.cs-rule {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, #1a4fd6, #1d9bf0);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.cs-message {
  font-size: 15px; line-height: 1.75;
  color: var(--text-2);
  max-width: 400px;
  margin: 0 auto 32px;
}

.cs-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.cs-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(96,165,250,0.25);
  transition: background .3s;
}

.cs-dot--active {
  background: #1d9bf0;
  box-shadow: 0 0 8px rgba(29,155,240,0.6);
}

.cs-tagline {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-3);
}
.cs-back-btn {
  margin-top: 20px; padding: 8px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-2); font-size: 12px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cs-back-btn:hover { background: var(--surface2); color: var(--text); border-color: rgba(255,255,255,.15); }

/* ══ DELETE CONFIRM MODAL ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
}

.modal-box {
  background: #0d1c35;
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%; max-width: 380px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: riseUp .2s cubic-bezier(.22,1,.36,1);
}

.modal-icon {
  width: 52px; height: 52px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 18px;
}

.modal-title {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 700;
  color: var(--text); margin-bottom: 10px;
}

.modal-msg {
  font-size: 13px; line-height: 1.65;
  color: var(--text-2); margin-bottom: 28px;
}

.modal-actions {
  display: flex; gap: 10px;
}

.modal-btn {
  flex: 1; padding: 12px;
  border-radius: 10px; border: none;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.modal-btn:active { transform: scale(0.98); }

.modal-cancel {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-2);
}
.modal-cancel:hover { background: rgba(255,255,255,0.09); color: var(--text); }

.modal-confirm {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5;
}
.modal-confirm:hover { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.5); }
.modal-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* ══ WHY DISHA PAGE ═════════════════════════════════════════════════════ */
.why-page { padding: 30px 40px 60px; max-width: 1300px; animation: fadeUp .4s ease both; }
.why-page-inner { max-width: 960px; }

.why-page-header { margin-bottom: 28px; }
.why-back-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer; margin-bottom: 20px;
  transition: background .15s, color .15s, border-color .15s;
}
.why-back-btn:hover { background: var(--surface2); color: var(--text); border-color: rgba(255,255,255,.15); }

.why-page-title-row { display: flex; align-items: center; gap: 16px; }
.why-page-icon { font-size: 36px; line-height: 1; }
.why-page-heading {
  font-family: var(--font-head); font-size: 30px; font-weight: 800;
  letter-spacing: -1px; line-height: 1.1;
  background: linear-gradient(135deg,#fff 0%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 5px;
}
.why-page-sub { font-size: 13px; color: var(--text-2); }

/* Section tabs */
.why-tabs {
  display: flex; gap: 6px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 0;
}
.why-tab {
  padding: 9px 20px; border: none; background: transparent;
  color: var(--text-3); font-size: 12.5px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.why-tab:hover { color: var(--text-2); }
.why-tab.active { color: var(--purple); border-bottom-color: var(--purple); }

/* Section content */
.why-section-intro {
  font-size: 14px; color: var(--text-2); line-height: 1.7;
  max-width: 640px; margin-bottom: 24px;
}

/* Audience grid (WHY / WHAT) */
.why-audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.why-audience-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
  transition: border-color .2s, background .2s;
}
.why-audience-card:hover { border-color: rgba(167,139,250,.25); background: rgba(167,139,250,.04); }
.why-aud-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 14px; padding: 4px 10px; border-radius: 20px; display: inline-block;
}
.aud-single  { background: rgba(167,139,250,.12); color: #c4b5fd; border: 1px solid rgba(167,139,250,.2); }
.aud-couple  { background: rgba(96,165,250,.12);  color: #93c5fd; border: 1px solid rgba(96,165,250,.2); }
.aud-parent  { background: rgba(45,212,191,.12);  color: #5eead4; border: 1px solid rgba(45,212,191,.2); }

/* Objections grid (WHAT IF) */
.why-objections-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.why-objection-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
  transition: border-color .2s;
}
.why-objection-card:hover { border-color: rgba(251,146,60,.25); }
.why-obj-icon { font-size: 28px; line-height: 1; margin-bottom: 10px; }
.why-obj-title {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--text); margin-bottom: 12px;
}

/* PDCA grid (HOW) */
.why-pdca-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.why-pdca-card {
  border-radius: 14px; padding: 20px; border: 1px solid;
  transition: transform .2s;
}
.why-pdca-card:hover { transform: translateY(-3px); }
.pdca-plan  { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); }
.pdca-do    { background: rgba(45,212,191,.08);  border-color: rgba(45,212,191,.2); }
.pdca-check { background: rgba(251,146,60,.08);  border-color: rgba(251,146,60,.2); }
.pdca-act   { background: rgba(244,114,182,.08); border-color: rgba(244,114,182,.2); }
.pdca-letter {
  font-family: var(--font-head); font-size: 36px; font-weight: 800;
  line-height: 1; margin-bottom: 2px;
}
.pdca-plan  .pdca-letter { color: #c4b5fd; }
.pdca-do    .pdca-letter { color: #5eead4; }
.pdca-check .pdca-letter { color: #fdba74; }
.pdca-act   .pdca-letter { color: #f9a8d4; }
.pdca-name {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-2); margin-bottom: 14px;
}

/* Shared list */
.why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.why-list li {
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  padding-left: 16px; position: relative;
}
.why-list li::before {
  content: '·'; position: absolute; left: 4px;
  color: var(--text-3); font-size: 14px; line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
  .auth-screen { padding: 0 4vw; }
  .bf-title { font-size: 72px; }
  .cards-grid { grid-template-columns: repeat(2,1fr); }
  .why-pdca-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  html, body { overflow: auto; }
  .auth-screen { flex-direction: column; padding: 40px 20px; gap: 40px; position: relative; min-height: 100vh; }
  .auth-float { width: 100%; max-width: 400px; }
  .bf-title { font-size: 52px; letter-spacing: 5px; }
  .top-nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hero-inner { flex-direction: column; align-items: flex-start; }
  .hero-heading { font-size: 28px; }
  .cards-area { padding: 24px 20px 60px; }
  .cards-grid { grid-template-columns: 1fr; }
  .why-page { padding: 24px 20px 60px; }
  .why-audience-grid { grid-template-columns: 1fr; }
  .why-objections-grid { grid-template-columns: 1fr; }
  .why-pdca-grid { grid-template-columns: repeat(2,1fr); }
}