/* ============================================================
   DARMOWYSMS.PL — UNIFIED DESIGN SYSTEM v2
   Fonts: Syne (headings 700/800) + Outfit (body 400/500/600/700)
   ============================================================ */

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

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

:root {
  /* Brand */
  --violet:#5B3FE8;     --violet-2:#7B62F0;  --violet-bg:#EEE9FF;
  --green:#1DB87A;      --green-bg:#E4F9F0;
  --amber:#F59E0B;      --amber-bg:#FEF3C7;
  --red:#EF4444;

  /* Ink scale */
  --ink:#0D0D14;   --ink-2:#3A3A50;   --ink-3:#7A7A96;  --muted:#B8B8CC;
  --line:#E8E8F0;  --surface:#F5F5FA; --white:#FFFFFF;

  /* Legacy aliases (subpages) */
  --primary:#5B3FE8; --primary-light:#7B62F0; --primary-dark:#4A30D0;
  --secondary:#7B62F0; --accent:#A78BFA;
  --bg-main:#FFFFFF; --bg-secondary:#F5F5FA; --bg-hover:#EEE9FF;
  --text-primary:#0D0D14; --text-secondary:#3A3A50; --text-muted:#7A7A96;
  --border-light:#E8E8F0; --border-medium:#D4C9FF;
  --success:#1DB87A; --danger:#EF4444; --warning:#F59E0B;
  --shadow-sm:0 1px 3px rgba(13,13,20,.06),0 1px 2px rgba(13,13,20,.04);
  --shadow-md:0 4px 16px rgba(13,13,20,.08),0 2px 6px rgba(13,13,20,.04);
  --shadow-lg:0 12px 40px rgba(13,13,20,.12),0 4px 12px rgba(13,13,20,.06);
  --shadow-xl:0 20px 60px rgba(13,13,20,.18);
  --r-sm:10px; --r-md:16px; --r-lg:24px;
}

html { scroll-behavior:smooth }
body { font-family:'Outfit',sans-serif; background:var(--surface); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased }
.container { max-width:1120px; margin:0 auto; padding:0 24px }
h1,h2,h3 { font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.02em; color:var(--ink) }

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
.nav {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  height:64px;
}
/* When mobile menu is open, extend nav height */
.nav:has(#navMob.open) { height:auto }

.nav-inner { height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px }

/* Logo */
.nav-logo { display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0 }
.nav-logo-mark {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:#fff; box-shadow:0 4px 12px rgba(91,63,232,.3);
}
.nav-logo-text { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:800; color:var(--ink) }
.nav-logo-text span { color:var(--violet) }

/* Desktop link area */
.nav-links { display:flex; align-items:center; gap:2px; flex:1; justify-content:center }

.nav-link {
  font-size:.875rem; font-weight:600; color:var(--ink-2);
  text-decoration:none; padding:7px 13px; border-radius:8px;
  transition:background .15s, color .15s; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:'Outfit',sans-serif; line-height:1;
}
.nav-link:hover,.nav-link.active { background:var(--violet-bg); color:var(--violet) }

/* Chevron SVG */
.nav-chevron { flex-shrink:0; opacity:.5; transition:transform .2s; display:block }
.nav-drop-btn[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); opacity:.8 }

/* ── MEGA DROPDOWN ── */
.nav-drop-wrap { position:relative }

.nav-dropdown {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:8px; z-index:400; min-width:480px;
  /* Hidden by default — shown via .open class */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-dropdown.open {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Avatar dropdown — right-aligned */
.nav-avatar-dd {
  left:auto; right:0;
  transform:translateY(-6px);
  min-width:215px; padding:8px 0;
  display:flex; flex-direction:column;
}
.nav-avatar-dd.open { transform:translateY(0) }

.nav-mega { display:flex; flex-direction:row; gap:0 }

.mega-col { display:flex; flex-direction:column; gap:2px; padding:8px; flex:1 }
.mega-label {
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); padding:4px 12px 10px;
}
.mega-item {
  display:flex; align-items:flex-start; gap:11px; padding:10px 12px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
  transition:background .12s;
}
.mega-item:hover { background:var(--surface) }
.mega-ico {
  width:34px; height:34px; flex-shrink:0; border-radius:9px;
  background:var(--violet-bg); display:flex; align-items:center; justify-content:center;
  font-size:1rem; margin-top:1px;
}
.mega-item strong { font-size:.87rem; font-weight:700; color:var(--ink); display:block; line-height:1.3 }
.mega-item small { font-size:.74rem; color:var(--ink-3); line-height:1.4; margin-top:2px; display:block }
.mega-divider { width:1px; background:var(--line); margin:12px 0; flex-shrink:0 }

/* Avatar button */
.nav-avatar-wrap { position:relative }
.nav-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));
  color:#fff; font-size:.8rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; border:none;
  box-shadow:0 2px 8px rgba(91,63,232,.35);
  transition:transform .15s, box-shadow .15s;
}
.nav-avatar:hover { transform:scale(1.06); box-shadow:0 4px 14px rgba(91,63,232,.45) }
.nav-dd-name { padding:10px 16px 2px; font-weight:700; font-size:.88rem; color:var(--ink) }
.nav-dd-email { padding:0 16px 10px; font-size:.75rem; color:var(--ink-3); border-bottom:1px solid var(--line) }
.nav-avatar-dd a {
  display:flex; align-items:center; gap:8px; padding:9px 16px;
  font-size:.84rem; color:var(--ink-2); text-decoration:none; transition:background .12s;
}
.nav-avatar-dd a:hover { background:var(--surface) }
.nav-dd-logout { color:var(--red)!important; border-top:1px solid var(--line); margin-top:4px }

/* Right buttons */
.nav-right { display:flex; gap:8px; align-items:center; flex-shrink:0 }
.nav-desktop-only { display:flex }
.nav-btn-login {
  font-size:.875rem; font-weight:600; color:var(--ink); text-decoration:none;
  padding:7px 16px; border:1.5px solid var(--line); border-radius:8px; transition:all .15s; white-space:nowrap;
}
.nav-btn-login:hover { border-color:var(--violet); color:var(--violet) }
.nav-btn-reg {
  font-size:.875rem; font-weight:700; color:#fff; text-decoration:none; padding:8px 18px;
  background:var(--violet); border-radius:8px; box-shadow:0 3px 10px rgba(91,63,232,.28);
  transition:all .15s; white-space:nowrap;
}
.nav-btn-reg:hover { background:var(--violet-2); transform:translateY(-1px) }
.nav-send-btn {
  font-size:.875rem; font-weight:700; color:#fff; text-decoration:none; padding:8px 18px;
  background:var(--violet); border-radius:8px;
  box-shadow:0 3px 10px rgba(91,63,232,.28);
  display:flex; align-items:center; gap:6px; transition:all .15s; white-space:nowrap;
}
.nav-send-btn:hover { background:var(--violet-2); transform:translateY(-1px) }

/* Hamburger */
.nav-ham {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;
  border-radius:8px; transition:background .15s;
}
.nav-ham:hover { background:var(--surface) }
.nav-ham span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all .22s }
.nav-ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav-ham.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.nav-ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ── MOBILE DRAWER ── */
.nav-mob {
  display:none;
  position:absolute; top:64px; left:0; right:0;
  background:var(--white);
  border-top:1px solid var(--line);
  box-shadow:0 8px 32px rgba(13,13,20,.12);
  z-index:190;
  /* Slide animation */
  opacity:0; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.nav-mob.open {
  display:block;
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.nav-mob-inner { padding:16px 20px 24px; max-height:calc(100vh - 80px); overflow-y:auto }

/* User card */
.mob-user-card {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--violet-bg);
  border-radius:var(--r-md); margin-bottom:4px;
}
.mob-user-av {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));
  color:#fff; font-size:.9rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.mob-user-name { font-weight:700; font-size:.9rem; color:var(--ink); line-height:1.3 }
.mob-user-email { font-size:.76rem; color:var(--ink-3); margin-top:1px }

/* Auth buttons (logged out) */
.mob-auth-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:4px }
.mob-btn-login {
  display:flex; align-items:center; justify-content:center;
  padding:11px 16px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:600; text-decoration:none;
  border:1.5px solid var(--line); color:var(--ink); transition:all .15s;
}
.mob-btn-login:hover { border-color:var(--violet); color:var(--violet) }
.mob-btn-reg {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:700; text-decoration:none;
  background:var(--violet); color:#fff;
  box-shadow:0 3px 10px rgba(91,63,232,.28); transition:all .15s;
}
.mob-btn-reg:hover { background:var(--violet-2) }

/* Separator */
.mob-sep { height:1px; background:var(--line); margin:10px 0 }

/* Section label */
.mob-section-label {
  font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); padding:12px 4px 6px;
}

/* Links */
.mob-link {
  display:flex; align-items:center; gap:10px;
  padding:12px 8px; font-size:.93rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; border-radius:var(--r-sm); transition:background .12s, color .12s;
}
.mob-link:hover { background:var(--surface); color:var(--ink) }
.mob-link-primary { font-weight:700; color:var(--violet)!important; background:var(--violet-bg); margin-bottom:4px }
.mob-link-primary:hover { background:var(--violet-bg); opacity:.85 }
.mob-link-danger { color:var(--red)!important }
.mob-link-danger:hover { background:#FEF2F2 }

/* Prevent body scroll when drawer open */
body.nav-open { overflow:hidden }

/* ═══════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════ */
.main-content { min-height:70vh }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer { background:var(--ink); padding:56px 0 28px }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px }
.ft-brand p { font-size:.84rem; color:rgba(255,255,255,.4); margin-top:12px; line-height:1.65; max-width:240px }
.ft-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.ft-badge {
  font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.1);
}
.ft-col h4 {
  font-family:'Syne',sans-serif; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); margin-bottom:16px;
}
.ft-col a { display:block; font-size:.84rem; color:rgba(255,255,255,.55); text-decoration:none; margin-bottom:11px; transition:color .15s }
.ft-col a:hover { color:#fff }
.ft-bot {
  border-top:1px solid rgba(255,255,255,.07); padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.ft-copy { font-size:.78rem; color:rgba(255,255,255,.3) }
.ft-links { display:flex; gap:20px }
.ft-links a { font-size:.78rem; color:rgba(255,255,255,.3); text-decoration:none; transition:color .15s }
.ft-links a:hover { color:rgba(255,255,255,.7) }

/* ═══════════════════════════════════════════
   LANDING PAGE — index.php
═══════════════════════════════════════════ */
.lp-body { background:var(--white) }
.lp-body .main-content { padding:0 }

/* Hero */
.hero {
  padding:80px 0 64px;
  background:radial-gradient(ellipse 60% 50% at 70% 0%,rgba(91,63,232,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 40% at 10% 80%,rgba(29,184,122,.05) 0%,transparent 70%),
             var(--white);
}
.hero-inner { display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:center }
.hero-tag {
  display:inline-flex; align-items:center; gap:7px; background:var(--violet-bg); color:var(--violet);
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; margin-bottom:20px;
}
.hero-tag-dot { width:6px; height:6px; border-radius:50%; background:var(--violet); animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hero-title { font-family:'Syne',sans-serif; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; line-height:1.1; color:var(--ink); letter-spacing:-.02em; margin-bottom:18px }
.hero-title em { font-style:normal; color:var(--violet) }
.hero-sub { font-size:1.05rem; color:var(--ink-2); line-height:1.65; max-width:500px; margin-bottom:32px }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--white); border:1.5px solid var(--line); border-radius:8px; padding:6px 12px; font-size:.82rem; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm) }
.dot { width:7px; height:7px; border-radius:50% }
.dot-g{background:var(--green)}.dot-v{background:var(--violet)}.dot-a{background:var(--amber)}
.hero-cta { display:flex; gap:12px; flex-wrap:wrap }

.btn-primary-lg { display:inline-flex; align-items:center; gap:8px; background:var(--violet); color:#fff; font-size:1rem; font-weight:700; padding:13px 28px; border-radius:var(--r-sm); text-decoration:none; box-shadow:0 5px 20px rgba(91,63,232,.3); transition:all .18s }
.btn-primary-lg:hover { background:var(--violet-2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(91,63,232,.4) }
.btn-ghost-lg { display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--ink-2); font-size:1rem; font-weight:600; padding:13px 24px; border-radius:var(--r-sm); text-decoration:none; border:1.5px solid var(--line); transition:all .18s }
.btn-ghost-lg:hover { border-color:var(--violet); color:var(--violet) }

/* Hero form */
.hero-form { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden }
.hero-form::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--violet),var(--violet-2),#A78BFA) }
.hf-title { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; color:var(--ink); margin-bottom:4px }
.hf-sub { font-size:.8rem; color:var(--ink-3); margin-bottom:20px }
.ff { margin-bottom:14px }
.ff label { display:block; font-size:.78rem; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px }
.ff-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.ff-row label { margin-bottom:0 }
.char-c { font-size:.75rem; color:var(--muted); font-weight:500 }
.ff input,.ff textarea { width:100%; padding:11px 14px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:.92rem; font-family:'Outfit',sans-serif; color:var(--ink); transition:border-color .15s,box-shadow .15s; resize:none }
.ff input:focus,.ff textarea:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,63,232,.12); background:var(--white) }
.btn-send { width:100%; padding:13px; background:var(--violet); color:#fff; border:none; border-radius:var(--r-sm); font-size:.95rem; font-weight:700; font-family:'Outfit',sans-serif; cursor:pointer; box-shadow:0 4px 16px rgba(91,63,232,.28); transition:all .18s; display:flex; align-items:center; justify-content:center; gap:8px }
.btn-send:hover { background:var(--violet-2); transform:translateY(-1px) }
.hf-note { font-size:.73rem; color:var(--ink-3); text-align:center; margin-top:10px }

/* Stats bar */
.stats { padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface) }
.stats-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap }
.stat { text-align:center; padding:8px 40px }
.stat+.stat { border-left:1px solid var(--line) }
.stat-v { font-family:'Syne',sans-serif; font-size:1.7rem; font-weight:800; color:var(--ink); line-height:1 }
.stat-v span { color:var(--violet) }
.stat-l { font-size:.76rem; color:var(--ink-3); margin-top:3px; font-weight:500 }

/* Section labels */
.sec-label { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); margin-bottom:12px }
.sec-title { font-family:'Syne',sans-serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:10px }
.sec-sub { font-size:1rem; color:var(--ink-2); max-width:520px }
.sec-head { margin-bottom:48px }

/* Features grid */
.features { padding:80px 0 }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.feat-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:28px 24px; box-shadow:var(--shadow-sm); transition:all .2s; position:relative; overflow:hidden }
.feat-card:hover { border-color:rgba(91,63,232,.25); box-shadow:var(--shadow-md); transform:translateY(-2px) }
.feat-ico { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px }
.fi-v{background:var(--violet-bg)}.fi-g{background:var(--green-bg)}.fi-a{background:var(--amber-bg)}
.feat-card h3 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; color:var(--ink); margin-bottom:8px }
.feat-card p { font-size:.86rem; color:var(--ink-2); line-height:1.6 }
.feat-tag { position:absolute; top:16px; right:16px; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:6px }
.t-new{background:var(--green-bg);color:var(--green)}.t-hot{background:#FFF0E8;color:#F97316}

/* How it works */
.how { padding:80px 0; background:var(--surface) }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative }
.steps::before { content:''; position:absolute; top:28px; left:calc(12.5% + 14px); right:calc(12.5% + 14px); height:1px; background:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 8px,transparent 8px,transparent 16px) }
.step { text-align:center; position:relative }
.step-n { width:56px; height:56px; border-radius:50%; background:var(--white); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; color:var(--violet); margin:0 auto 16px; box-shadow:var(--shadow-sm); position:relative; z-index:1 }
.step-ico { font-size:1.3rem; display:block; margin-bottom:10px }
.step h3 { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:800; color:var(--ink); margin-bottom:6px }
.step p { font-size:.82rem; color:var(--ink-3); line-height:1.55 }

/* Benefits */
.benefits { padding:80px 0 }
.ben-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center }
.ben-text { padding-right:24px }
.ben-list { list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:28px }
.ben-item { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); transition:all .18s }
.ben-item:hover { border-color:rgba(91,63,232,.2); box-shadow:var(--shadow-md) }
.ben-ico { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1rem }
.bi-v{background:var(--violet-bg)}.bi-g{background:var(--green-bg)}.bi-a{background:var(--amber-bg)}.bi-r{background:#FFF0E8}
.ben-item h4 { font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:2px }
.ben-item p { font-size:.8rem; color:var(--ink-3); line-height:1.5 }

/* Landing streak card (decorative) */
.lp-streak-card { background:linear-gradient(135deg,#1a0f3c 0%,#2d1b69 50%,#1e1040 100%); border-radius:var(--r-lg); padding:32px; color:#fff; box-shadow:0 16px 48px rgba(91,63,232,.25); position:relative; overflow:hidden }
.lp-streak-card::before { content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; border-radius:50%; background:rgba(167,139,250,.1) }
.lp-streak-card::after { content:''; position:absolute; bottom:-30px; left:20px; width:120px; height:120px; border-radius:50%; background:rgba(29,184,122,.07) }
.sk-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px }
.sk-days { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap }
.sd { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700 }
.sd-done{background:rgba(29,184,122,.25);color:#6EE7B7;border:1px solid rgba(29,184,122,.3)}
.sd-today{background:var(--violet);color:#fff;box-shadow:0 4px 12px rgba(91,63,232,.5)}
.sd-future{background:rgba(255,255,255,.06);color:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.08)}
.sk-miles { display:flex; flex-direction:column; gap:8px; position:relative; z-index:1 }
.sk-m { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:8px 12px }
.sk-m-lbl { font-size:.8rem; color:rgba(255,255,255,.7); font-weight:600 }
.sk-m-rew { font-size:.78rem; font-weight:800; color:#A78BFA }
.sk-bar-w { flex:1; margin:0 12px; height:4px; background:rgba(255,255,255,.1); border-radius:2px }
.sk-bar { height:4px; border-radius:2px; background:linear-gradient(90deg,var(--violet),#A78BFA) }

/* CTA section */
.cta-sec { padding:80px 0 }
.cta-box { background:linear-gradient(135deg,var(--violet) 0%,var(--violet-2) 60%,#8B5CF6 100%); border-radius:var(--r-lg); padding:60px 64px; display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; overflow:hidden }
.cta-box::before { content:''; position:absolute; top:-60px; right:-60px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.06) }
.cta-box::after { content:''; position:absolute; bottom:-40px; left:100px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.04) }
.cta-tw { position:relative; z-index:1 }
.cta-title { font-family:'Syne',sans-serif; font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; color:#fff; margin-bottom:10px }
.cta-sub { font-size:.95rem; color:rgba(255,255,255,.75); max-width:440px }
.cta-acts { display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1 }
.btn-cta-w { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--violet); font-size:.95rem; font-weight:800; padding:13px 28px; border-radius:var(--r-sm); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.15); transition:all .18s; white-space:nowrap }
.btn-cta-w:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2) }
.btn-cta-o { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); color:#fff; font-size:.95rem; font-weight:700; padding:13px 24px; border-radius:var(--r-sm); text-decoration:none; border:1.5px solid rgba(255,255,255,.25); transition:all .18s; white-space:nowrap }
.btn-cta-o:hover { background:rgba(255,255,255,.2) }

/* Blog strip */
.blog { padding:0 0 80px }
.bp-hdr { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px }
.bp-all { font-size:.86rem; font-weight:700; color:var(--violet); text-decoration:none }
.bp-all:hover { text-decoration:underline }
.bp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.bp-card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; text-decoration:none; transition:all .18s; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm) }
.bp-card:hover { border-color:rgba(91,63,232,.2); box-shadow:var(--shadow-md); transform:translateY(-2px) }
.bp-emo { font-size:1.6rem; margin-bottom:4px }
.bp-cat { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--violet) }
.bp-title { font-family:'Syne',sans-serif; font-size:.98rem; font-weight:800; color:var(--ink); line-height:1.3 }
.bp-exc { font-size:.8rem; color:var(--ink-3); line-height:1.55; flex:1 }
.bp-meta { display:flex; gap:12px; font-size:.73rem; color:var(--muted); margin-top:auto }
.bp-arr { font-size:.8rem; font-weight:700; color:var(--violet); margin-top:4px }

/* SEO box */
.seo { padding:40px 0 60px; background:var(--surface) }
.seo-box { background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:36px 40px; box-shadow:var(--shadow-sm) }
.seo-box h2 { font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800; color:var(--ink); margin-bottom:14px }
.seo-box h3 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; color:var(--ink); margin:20px 0 8px }
.seo-box p { font-size:.88rem; color:var(--ink-2); line-height:1.65 }
.seo-box ul { list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:8px }
.seo-box ul li { font-size:.88rem; color:var(--ink-2); display:flex; align-items:center; gap:8px }

/* Login popup */
.popup { position:fixed; inset:0; background:rgba(13,13,20,.55); backdrop-filter:blur(4px); z-index:1000; display:none; align-items:center; justify-content:center; padding:24px }
.popup.open { display:flex }
.popup-card { background:var(--white); border-radius:var(--r-lg); padding:40px 36px; max-width:440px; width:100%; box-shadow:var(--shadow-lg); position:relative; animation:popIn .25s cubic-bezier(.34,1.56,.64,1) }
@keyframes popIn { from{opacity:0;transform:scale(.92) translateY(12px)} to{opacity:1;transform:none} }
.popup-x { position:absolute; top:16px; right:16px; background:var(--surface); border:none; border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:1.1rem; color:var(--ink-3); transition:all .15s; display:flex; align-items:center; justify-content:center }
.popup-x:hover { background:var(--line); color:var(--ink) }
.popup-ico { font-size:2.2rem; margin-bottom:14px }
.popup-title { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:800; color:var(--ink); margin-bottom:8px }
.popup-txt { font-size:.9rem; color:var(--ink-2); margin-bottom:22px }
.popup-perks { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:28px }
.popup-perk { display:flex; gap:10px; align-items:center; padding:10px 14px; background:var(--surface); border-radius:var(--r-sm); font-size:.86rem; color:var(--ink-2); font-weight:500 }
.popup-perk strong { color:var(--ink) }
.popup-btn-r { display:block; width:100%; padding:13px; text-align:center; background:var(--violet); color:#fff; font-size:.95rem; font-weight:700; border-radius:var(--r-sm); text-decoration:none; margin-bottom:10px; box-shadow:0 4px 14px rgba(91,63,232,.28); transition:all .18s }
.popup-btn-r:hover { background:var(--violet-2) }
.popup-btn-l { display:block; width:100%; padding:12px; text-align:center; background:var(--white); color:var(--ink-2); font-size:.9rem; font-weight:600; border:1.5px solid var(--line); border-radius:var(--r-sm); text-decoration:none; transition:all .18s }
.popup-btn-l:hover { border-color:var(--violet); color:var(--violet) }
.popup-note { font-size:.74rem; color:var(--ink-3); text-align:center; margin-top:14px }

/* ═══════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════ */
.alert { padding:14px 18px; border-radius:var(--r-sm); margin-bottom:20px; display:flex; align-items:flex-start; gap:10px; border:1.5px solid; font-size:.9rem; font-weight:500 }
.alert-success { background:#ECFDF5; color:#065F46; border-color:var(--green) }
.alert-error   { background:#FEF2F2; color:#991B1B; border-color:var(--red) }
.alert-warning { background:#FFFBEB; color:#92400E; border-color:var(--amber) }

/* ═══════════════════════════════════════════
   BUTTONS (generic)
═══════════════════════════════════════════ */
.btn { padding:11px 22px; border:none; border-radius:var(--r-sm); font-size:.95rem; font-weight:700; font-family:'Outfit',sans-serif; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; justify-content:center; gap:6px }
.btn-primary { background:var(--violet); color:#fff; border:1.5px solid transparent; box-shadow:0 3px 12px rgba(91,63,232,.28) }
.btn-primary:hover { background:var(--violet-2); transform:translateY(-1px); box-shadow:0 6px 18px rgba(91,63,232,.38) }
.btn-secondary { background:var(--white); color:var(--ink); border:1.5px solid var(--line) }
.btn-secondary:hover { border-color:var(--violet); color:var(--violet) }
.btn-warning { background:var(--amber); color:#fff; border:1.5px solid var(--amber) }
.btn-warning:hover { background:#DC8A09 }
.btn-block { width:100% }

/* Legacy nav btn classes */
.btn-login  { padding:9px 20px; border-radius:8px; text-decoration:none!important; font-weight:600; font-size:.88rem; transition:all .2s; background:var(--white); border:1.5px solid var(--violet); color:var(--violet)!important }
.btn-login:hover { background:var(--violet-bg) }
.btn-register { padding:9px 20px; border-radius:8px; text-decoration:none!important; font-weight:600; font-size:.88rem; transition:all .2s; background:var(--violet); color:#fff!important; border:1.5px solid transparent; box-shadow:0 3px 10px rgba(91,63,232,.28) }
.btn-register:hover { background:var(--violet-2); transform:translateY(-1px) }
.btn-logout { padding:9px 20px; border-radius:8px; text-decoration:none!important; font-weight:600; font-size:.88rem; transition:all .2s; background:var(--surface); color:var(--red)!important; border:1.5px solid var(--line) }
.btn-logout:hover { background:var(--red); color:#fff!important; border-color:var(--red) }
.user-email { font-size:.82rem; color:var(--ink-3); padding:4px 10px; background:var(--surface); border-radius:8px; border:1px solid var(--line) }

/* ═══════════════════════════════════════════
   AUTH FORMS
═══════════════════════════════════════════ */
.auth-container { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:32px 20px }
.auth-card { background:var(--white); border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:48px; max-width:500px; width:100% }
.auth-card h1 { margin-bottom:8px }
.subtitle { color:var(--ink-3); margin-bottom:28px; font-size:.95rem }
.form-group { margin-bottom:20px }
.form-group label { display:block; margin-bottom:7px; font-weight:600; color:var(--ink-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:11px 14px; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:.95rem; font-family:'Outfit',sans-serif; color:var(--ink); transition:border-color .15s,box-shadow .15s }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,63,232,.12); background:var(--white) }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }

/* Login page extras */
.auth-logo-row { text-align:center; margin-bottom:28px }
.auth-ico { font-size:2.4rem; margin-bottom:12px }
.auth-logo-row h1 { margin-bottom:6px }

.remember-row { margin-top:-4px; margin-bottom:22px }
.remember-label {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:.88rem; color:var(--ink-2); font-weight:500;
  text-transform:none; letter-spacing:0;
}
.remember-label input[type="checkbox"] { display:none }
.remember-box {
  width:18px; height:18px; flex-shrink:0; border-radius:5px;
  border:2px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.remember-label input:checked ~ .remember-box {
  background:var(--violet); border-color:var(--violet);
}
.remember-label input:checked ~ .remember-box::after {
  content:'✓'; color:#fff; font-size:.7rem; font-weight:900; line-height:1;
}

.auth-divider {
  display:flex; align-items:center; gap:12px; margin:20px 0;
  color:var(--muted); font-size:.82rem;
}
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--line) }

.auth-footer-links { text-align:center; font-size:.88rem; color:var(--ink-3) }
.auth-footer-links a { color:var(--violet); font-weight:700; text-decoration:none }
.auth-footer-links a:hover { text-decoration:underline }

/* ═══════════════════════════════════════════
   DASHBOARD WRAPPER
═══════════════════════════════════════════ */
.dash-wrap { padding:32px 0 60px }
.dash-page-header { margin-bottom:28px }
.dash-page-header h1 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:6px }
.dash-page-header p { font-size:.95rem; color:var(--ink-3) }

.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:24px }
.dash-card { background:var(--white); border-radius:var(--r-md); padding:28px; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:all .2s }
.dash-card:hover { box-shadow:var(--shadow-md); border-color:rgba(91,63,232,.2) }
.dash-card h2 { font-size:1.05rem; font-weight:800; color:var(--ink); margin-bottom:18px; display:flex; align-items:center; gap:8px }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line) }
.stat-row:last-child { border-bottom:none }
.stat-row span { color:var(--ink-3); font-size:.9rem; font-weight:500 }
.stat-row strong { color:var(--ink); font-size:1.35rem; font-weight:800 }
.dash-card .btn-block { margin-top:18px }

/* Quick actions */
.quick-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:24px; margin-bottom:28px }
.action-btn { background:var(--white); padding:24px 16px; border-radius:var(--r-md); text-align:center; text-decoration:none; color:var(--ink); font-weight:700; font-size:.9rem; font-family:'Outfit',sans-serif; border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:110px; transition:all .2s; gap:8px; cursor:pointer }
.action-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--violet); color:var(--violet) }

/* ═══════════════════════════════════════════
   STREAK CARD (dashboard — dark)
═══════════════════════════════════════════ */
.streak-section { margin-top:24px }
.streak-card-dark {
  background:linear-gradient(135deg,#1a0f3c 0%,#2d1b69 50%,#1e1040 100%);
  border-radius:var(--r-lg); padding:32px; color:#fff;
  box-shadow:0 16px 48px rgba(91,63,232,.25);
  position:relative; overflow:hidden;
}
.streak-card-dark::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:rgba(167,139,250,.08) }
.streak-card-dark::after  { content:''; position:absolute; bottom:-30px; left:20px; width:140px; height:140px; border-radius:50%; background:rgba(29,184,122,.06) }
.scd-inner { position:relative; z-index:1 }

.scd-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px }
.scd-header h2 { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:800; color:#fff; margin:0 }
.scd-best { font-size:.78rem; color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); padding:4px 10px; border-radius:20px; border:1px solid rgba(255,255,255,.12) }
.scd-best strong { color:#A78BFA }

.scd-alert { border-radius:10px; padding:10px 14px; font-size:.83rem; font-weight:600; margin-bottom:18px }
.scd-alert-ok  { background:rgba(29,184,122,.15); border:1px solid rgba(29,184,122,.3); color:#6EE7B7 }
.scd-alert-err { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#FCA5A5 }
.scd-desc { font-size:.84rem; color:rgba(255,255,255,.6); margin-bottom:18px; line-height:1.5 }

/* Milestones */
.scd-milestones { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px }
.scd-pill { display:flex; flex-direction:column; align-items:center; padding:8px 14px; border-radius:10px; font-size:.72rem; gap:3px; position:relative; transition:all .15s }
.scd-pill-default { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1) }
.scd-pill-reached { background:rgba(29,184,122,.2); border:1px solid rgba(29,184,122,.35) }
.scd-pill-next    { background:rgba(91,63,232,.35); border:1px solid rgba(167,139,250,.5); box-shadow:0 0 0 2px rgba(167,139,250,.2) }
.scd-pill-days   { font-weight:800; color:#fff }
.scd-pill-reward { font-weight:600; color:#A78BFA }
.scd-pill-check  { position:absolute; top:-7px; right:-7px; background:#22C55E; color:#fff; border-radius:50%; width:16px; height:16px; font-size:.6rem; display:flex; align-items:center; justify-content:center }

/* Day icons */
.scd-days { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px }
.scd-day  { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem }
.scd-day-done  { background:rgba(29,184,122,.2); border:1px solid rgba(29,184,122,.3) }
.scd-day-today { background:var(--violet); box-shadow:0 4px 12px rgba(91,63,232,.5) }
.scd-day-next  { background:rgba(255,255,255,.08); border:1px solid rgba(167,139,250,.4); animation:scd-pulse 1.6s infinite }
.scd-day-empty { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08) }
@keyframes scd-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,.4)} 50%{box-shadow:0 0 0 5px rgba(167,139,250,0)} }

/* Progress */
.scd-bar-bg { background:rgba(255,255,255,.1); border-radius:99px; height:8px; overflow:hidden; margin-bottom:10px }
.scd-bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--violet),#A78BFA); transition:width .5s ease }
.scd-bar-labels { display:flex; justify-content:space-between; font-size:.76rem; color:rgba(255,255,255,.45) }
.scd-bar-labels strong { color:#A78BFA }

/* Ad slots within streak */
.streak-ads { display:grid; grid-template-columns:160px 1fr 160px; gap:20px; margin-top:24px; align-items:start }
.streak-ad-col { display:flex; flex-direction:column; align-items:center; gap:6px }
.streak-ad-lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em }
.streak-ad-slot { width:100%; min-height:250px; background:var(--surface); border:1px dashed var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--muted) }
.streak-ad-center { grid-column:2 }

/* ═══════════════════════════════════════════
   OTHER SUBPAGE COMPONENTS
═══════════════════════════════════════════ */
.sms-form-card { background:var(--white); border-radius:var(--r-lg); padding:40px; border:1px solid var(--line); box-shadow:var(--shadow-md); max-width:680px; margin:0 auto; position:relative; overflow:hidden }
.sms-form-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--violet),var(--violet-2),#A78BFA) }
.sms-form-card h1 { margin-bottom:8px }
.sms-form-card>p { color:var(--ink-3); margin-bottom:28px; font-size:.95rem }
#charCount { float:right; color:var(--muted); font-size:.85rem }
#result { margin-top:20px }

.history-table { width:100%; background:var(--white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm) }
.history-table th { background:var(--surface); padding:14px 18px; text-align:left; font-weight:700; font-size:.78rem; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em; border-bottom:2px solid var(--line) }
.history-table td { padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink-3); font-size:.9rem }
.history-table tr:last-child td { border-bottom:none }
.history-table tr:hover td { background:var(--surface) }

.badge { padding:5px 12px; border-radius:20px; font-size:.78rem; font-weight:700; display:inline-block }
.badge-pending { background:var(--amber-bg); color:#92400E; border:1px solid var(--amber) }
.badge-sent    { background:var(--green-bg);  color:#065F46; border:1px solid var(--green) }
.badge-rejected,.badge-failed { background:#FEF2F2; color:#991B1B; border:1px solid var(--red) }

.promo-card,.consent-card { background:var(--white); border-radius:var(--r-lg); padding:40px; border:1px solid var(--line); box-shadow:var(--shadow-md); max-width:680px; margin:0 auto }
.promo-card h1,.consent-card h1 { margin-bottom:10px }
.promo-card>p,.consent-card>p { color:var(--ink-3); margin-bottom:22px; font-size:.95rem }
.promo-form { display:flex; gap:12px; margin:28px 0 }
.promo-form input { flex:1; padding:11px 14px }
.promo-form button { padding:11px 28px; white-space:nowrap }
.promo-info { background:var(--violet-bg); padding:22px; border-radius:var(--r-sm); margin-top:28px; border:1px solid rgba(91,63,232,.15) }
.promo-info h3 { margin-bottom:14px; color:var(--violet); font-weight:700; font-size:1rem }
.promo-info ul { list-style:none; padding:0 }
.promo-info li { padding:8px 0; font-size:.9rem; color:var(--ink-2); display:flex; align-items:center; gap:8px }
.promo-info li::before { content:"✓"; color:var(--violet); font-weight:700; font-size:1.1rem }

.consent-item { padding:18px; border:1.5px solid var(--line); border-radius:var(--r-sm); margin-bottom:14px; background:var(--white); transition:all .2s }
.consent-item:hover { border-color:var(--violet); background:var(--violet-bg) }
.consent-item label { display:flex; align-items:flex-start; cursor:pointer; font-size:.95rem; line-height:1.6; color:var(--ink) }
.consent-item input[type="checkbox"] { margin-right:14px; margin-top:3px; width:20px; height:20px; cursor:pointer; accent-color:var(--violet); flex-shrink:0 }

.consent-row { padding:14px; margin:10px 0; background:var(--surface); border-radius:var(--r-sm); border:1px solid var(--line); transition:all .2s }
.consent-row:hover { background:var(--violet-bg) }
.consent-row label { display:flex; align-items:center; cursor:pointer; font-size:.92rem; color:var(--ink) }
.consent-row input[type="checkbox"] { margin-right:10px; width:18px; height:18px; cursor:pointer; accent-color:var(--violet) }

.police-warning { background:var(--amber-bg); border:2px solid var(--amber); border-radius:var(--r-md); padding:22px; margin-bottom:28px; text-align:center; font-size:.95rem; line-height:1.7; box-shadow:var(--shadow-sm) }
.police-warning strong { color:var(--red); font-weight:700 }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1024px) {
  .nav-links { gap:0 }
  .nav-link { padding:7px 9px; font-size:.82rem }
  .nav-dropdown { min-width:420px }
}

@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; gap:40px }
  .hero-form { max-width:520px }
  .feat-grid { grid-template-columns:1fr 1fr }
  .steps { grid-template-columns:1fr 1fr }
  .steps::before { display:none }
  .ben-grid { grid-template-columns:1fr }
  .ben-text { padding-right:0 }
  .lp-streak-card { display:none }
  .cta-box { flex-direction:column; text-align:center; padding:40px 28px }
  .ft-grid { grid-template-columns:1fr 1fr }
  .bp-grid { grid-template-columns:1fr 1fr }
  .streak-ads { grid-template-columns:1fr }
  .streak-ad-col:not(.streak-ad-center) { display:none }
  .streak-ad-center { grid-column:1 }
}

/* Mobile breakpoint — hide desktop nav, show hamburger */
@media(max-width:720px) {
  .nav-links { display:none }
  .nav-desktop-only { display:none!important }
  .nav-ham { display:flex }
  .nav-mob { display:none } /* shown via .open */
}

@media(max-width:640px) {
  .container { padding:0 16px }
  .hero { padding:48px 0 40px }
  .feat-grid,.steps { grid-template-columns:1fr 1fr }
  .stat { padding:8px 20px }
  .ft-grid { grid-template-columns:1fr }
  .cta-box { padding:32px 20px }
  .seo-box { padding:24px 20px }
  .auth-card { padding:28px 20px }
  .sms-form-card,.promo-card,.consent-card { padding:28px 18px }
  .dashboard-grid { grid-template-columns:1fr }
  .quick-actions { grid-template-columns:repeat(2,1fr) }
  .form-row { grid-template-columns:1fr }
  .bp-grid { grid-template-columns:1fr }
  .streak-card-dark { padding:22px 18px }
  .scd-days { gap:4px }
  .scd-day { width:32px; height:32px; font-size:.8rem }
  .history-table th,.history-table td { padding:10px 12px; font-size:.82rem }
}

@media(max-width:420px) {
  .quick-actions { grid-template-columns:1fr }
  .mob-auth-btns { grid-template-columns:1fr }
}