/* =========================================
   DGTeens — Teen Driver Safety Program
   Tone: Positive, collaborative, empowering
   Aesthetic: Bold but warm — deep navy base,
   electric teal + energetic lime accents
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Montserrat:ital,wght@0,700;0,800;0,900;1,800&display=swap');

:root {
  --electric:    #00C2FF;
  --electric-dk: #008FBB;
  --lime:        #A8FF3E;
  --lime-dk:     #7ACC1A;
  --coral:       #FF6B6B;
  --teal:        #00D4A0;
  --white:       #FFFFFF;
  --off-white:   #F0F8FF;
  --dark:        #0A1628;
  --dark-mid:    #111E35;
  --dark-card:   #162240;
  --gray:        #7A90A8;
  --gray-light:  #B8CEDE;
  --border:      rgba(255,255,255,0.08);
  --font-head:   'Montserrat', sans-serif;
  --font-body:   'Nunito', sans-serif;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow-e:    0 8px 40px rgba(0,194,255,0.25);
  --shadow-l:    0 8px 40px rgba(168,255,62,0.20);
  --transition:  0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background:var(--dark); color:var(--white); font-family:var(--font-body); font-size:16px; line-height:1.65; overflow-x:hidden; }
a { color:var(--electric); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--lime); }
img { max-width:100%; display:block; }

/* ── UTILITY ── */
.container { max-width:1140px; margin:0 auto; padding:0 24px; }
.section    { padding:96px 0; }
.text-center { text-align:center; }
.text-electric { color:var(--electric); }
.text-lime     { color:var(--lime); }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:var(--font-head); line-height:1.08; letter-spacing:-0.02em; }
h1 { font-size:clamp(40px,7vw,86px); font-weight:900; }
h2 { font-size:clamp(30px,5vw,54px); font-weight:900; }
h3 { font-size:clamp(20px,3vw,30px); font-weight:800; }
h4 { font-size:19px; font-weight:800; }
p  { color:var(--gray-light); line-height:1.75; }
.lead    { font-size:19px; color:var(--gray-light); font-weight:600; }
.eyebrow { font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--lime); display:block; margin-bottom:14px; }
.section-sub { font-size:18px; color:var(--gray-light); max-width:600px; margin:12px auto 56px; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 34px; border-radius:50px;
  font-family:var(--font-head); font-size:15px; font-weight:800;
  letter-spacing:0.04em; text-transform:uppercase;
  cursor:pointer; border:none; transition:all var(--transition); white-space:nowrap;
}
.btn-primary { background:linear-gradient(135deg,var(--electric),var(--electric-dk)); color:var(--dark); box-shadow:var(--shadow-e); }
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 48px rgba(0,194,255,0.45); color:var(--dark); }
.btn-lime { background:linear-gradient(135deg,var(--lime),var(--lime-dk)); color:var(--dark); box-shadow:var(--shadow-l); }
.btn-lime:hover { transform:translateY(-3px) scale(1.02); color:var(--dark); box-shadow:0 12px 48px rgba(168,255,62,0.4); }
.btn-outline { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.22); }
.btn-outline:hover { border-color:var(--electric); color:var(--electric); }
.btn-lg { padding:18px 48px; font-size:17px; }

/* ── NAVBAR ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 24px; background:rgba(10,22,40,0.93); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:all var(--transition); }
.navbar-inner { max-width:1140px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:72px; }
.navbar-logo { font-family:var(--font-head); font-size:22px; font-weight:900; letter-spacing:-0.02em; color:var(--white); display:flex; align-items:center; gap:2px; }
.navbar-logo .logo-dg    { color:var(--electric); }
.navbar-logo .logo-teens { color:var(--lime); }
.navbar-nav { display:flex; gap:28px; list-style:none; align-items:center; }
.navbar-nav a { font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-light); transition:color var(--transition); }
.navbar-nav a:hover, .navbar-nav a.active { color:var(--electric); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--white); margin:5px 0; transition:all var(--transition); border-radius:2px; }

/* ── HERO ── */
.hero { min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; background:var(--dark); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 20% 50%, rgba(0,194,255,0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 30%, rgba(168,255,62,0.06) 0%, transparent 60%); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:10px; background:rgba(168,255,62,0.10); border:1px solid rgba(168,255,62,0.35); padding:8px 18px; border-radius:50px; margin-bottom:24px; font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--lime); }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--lime); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }
.hero h1 { margin-bottom:22px; }
.hero-h1-grad { display:block; background:linear-gradient(90deg,var(--electric),var(--lime)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:18px; color:var(--gray-light); margin-bottom:36px; max-width:500px; line-height:1.75; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }
.hero-stats { display:flex; gap:36px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--border); }
.hero-stat-num { font-family:var(--font-head); font-size:36px; font-weight:900; color:var(--white); line-height:1; }
.hero-stat-num span { color:var(--electric); }
.hero-stat-label { font-size:12px; color:var(--gray); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; font-weight:700; }

/* ── SCORE MOCKUP ── */
.hero-visual { display:flex; align-items:center; justify-content:center; }
.score-mockup { background:var(--dark-card); border-radius:24px; border:1px solid rgba(0,194,255,0.25); padding:32px 28px; width:300px; box-shadow:var(--shadow-e); }
.score-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.score-app-name { font-family:var(--font-head); font-size:15px; font-weight:900; color:var(--electric); }
.score-live { font-size:11px; color:var(--lime); font-weight:800; letter-spacing:0.08em; }
.score-ring-wrap { display:flex; justify-content:center; margin-bottom:24px; position:relative; }
.score-ring { width:120px; height:120px; border-radius:50%; border:8px solid rgba(255,255,255,0.06); border-top-color:var(--lime); border-right-color:var(--electric); display:flex; align-items:center; justify-content:center; animation:spin-slow 8s linear infinite; position:relative; }
@keyframes spin-slow { to { transform:rotate(360deg); } }
.score-inner { position:absolute; animation:spin-slow 8s linear infinite reverse; text-align:center; }
.score-num { font-family:var(--font-head); font-size:36px; font-weight:900; color:var(--white); line-height:1; }
.score-label { font-size:10px; color:var(--gray); font-weight:700; letter-spacing:0.1em; }
.score-friends { margin-bottom:18px; }
.score-friends-label { font-size:11px; font-family:var(--font-head); font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); margin-bottom:10px; }
.friend-row { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:rgba(255,255,255,0.04); border-radius:var(--radius-sm); margin-bottom:6px; }
.friend-name { font-size:13px; font-weight:700; color:var(--gray-light); }
.friend-score { font-family:var(--font-head); font-size:14px; font-weight:900; }
.friend-score.top   { color:var(--lime); }
.friend-score.mid   { color:var(--electric); }
.friend-score.low   { color:var(--coral); }
.score-cta-tag { font-size:12px; color:var(--gray); font-weight:700; text-align:center; padding:10px; background:rgba(168,255,62,0.06); border-radius:var(--radius-sm); border:1px solid rgba(168,255,62,0.15); }

/* ── HOW PROGRAM WORKS ── */
.how { background:var(--dark-mid); }
.steps-t { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; position:relative; }
.steps-t::before { content:''; position:absolute; top:40px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg,var(--electric),var(--lime)); z-index:0; }
.step-t { text-align:center; position:relative; z-index:1; }
.step-t-num { width:80px; height:80px; border-radius:50%; background:var(--dark-card); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:26px; font-weight:900; color:var(--electric); margin:0 auto 20px; position:relative; transition:all var(--transition); }
.step-t-num::before { content:''; position:absolute; inset:-3px; border-radius:50%; z-index:-1; background:linear-gradient(135deg,var(--electric),var(--lime)); }
.step-t:hover .step-t-num { transform:scale(1.1); box-shadow:0 0 0 8px rgba(0,194,255,0.1); }
.step-t h4 { margin-bottom:8px; font-size:17px; }
.step-t p  { font-size:14px; max-width:220px; margin:0 auto; }

/* ── TEEN BENEFITS (self-coach) ── */
.teen-section { background:var(--dark); }
.teen-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.teen-features { display:flex; flex-direction:column; gap:20px; }
.teen-feature { display:flex; gap:16px; padding:20px 22px; background:var(--dark-card); border-radius:var(--radius); border:1px solid var(--border); transition:all var(--transition); }
.teen-feature:hover { border-color:rgba(0,194,255,0.25); transform:translateX(4px); }
.teen-feature-icon { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,rgba(0,194,255,0.15),rgba(168,255,62,0.10)); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.teen-feature h4 { margin-bottom:4px; font-size:16px; }
.teen-feature p  { font-size:14px; }

/* ── FRIENDS LEADERBOARD ── */
.friends-section { background:var(--dark-mid); }
.friends-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:48px; }
.leaderboard { background:var(--dark-card); border-radius:var(--radius); border:1px solid rgba(0,194,255,0.2); padding:32px 28px; box-shadow:var(--shadow-e); }
.lb-header { font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
.lb-tag { font-size:11px; color:var(--lime); background:rgba(168,255,62,0.1); padding:4px 10px; border-radius:50px; border:1px solid rgba(168,255,62,0.2); }
.lb-row { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:8px; transition:background var(--transition); }
.lb-row:hover { background:rgba(255,255,255,0.04); }
.lb-row.you { background:rgba(0,194,255,0.08); border:1px solid rgba(0,194,255,0.2); }
.lb-rank { font-family:var(--font-head); font-size:18px; font-weight:900; width:28px; text-align:center; flex-shrink:0; }
.lb-rank.gold   { color:#FFD700; }
.lb-rank.silver { color:#C0C0C0; }
.lb-rank.bronze { color:#CD7F32; }
.lb-rank.you-rank { color:var(--electric); }
.lb-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:13px; font-weight:900; flex-shrink:0; }
.lb-name { flex:1; font-size:14px; font-weight:700; color:var(--gray-light); }
.lb-name.you-name { color:var(--white); }
.lb-score-bar { flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; margin:0 8px; overflow:hidden; }
.lb-score-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--electric),var(--lime)); }
.lb-score-num { font-family:var(--font-head); font-size:15px; font-weight:900; min-width:36px; text-align:right; flex-shrink:0; }
.lb-score-num.top { color:var(--lime); }
.lb-score-num.you-score { color:var(--electric); }
.friends-copy h3 { margin-bottom:16px; }
.friends-copy p  { margin-bottom:20px; }
.friends-point { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.friends-point-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
.friends-point p { font-size:15px; margin:0; }

/* ── PARENT SECTION ── */
.parent-section { background:var(--dark); }
.parent-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.parent-copy h2 { margin-bottom:16px; }
.parent-copy p  { margin-bottom:20px; font-size:16px; }
.parent-feature-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.parent-feature-list li { display:flex; align-items:center; gap:12px; font-size:15px; color:var(--gray-light); font-weight:600; padding:12px 16px; background:var(--dark-card); border-radius:var(--radius-sm); border:1px solid var(--border); }
.parent-feature-list li::before { content:'✓'; color:var(--lime); font-weight:900; font-family:var(--font-head); font-size:14px; flex-shrink:0; }
.coaching-card { background:var(--dark-card); border-radius:var(--radius); border:1px solid rgba(0,194,255,0.2); padding:32px 28px; }
.coaching-card-title { font-family:var(--font-head); font-size:14px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--electric); margin-bottom:20px; }
.convo-block { margin-bottom:14px; }
.convo-label { font-size:10px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:5px; }
.convo-label.skip  { color:var(--coral); }
.convo-label.try   { color:var(--lime); }
.convo-text { padding:12px 14px; border-radius:var(--radius-sm); font-size:13px; font-style:italic; font-weight:600; line-height:1.6; }
.convo-text.skip { background:rgba(255,107,107,0.08); color:#FFAAAA; border-left:3px solid var(--coral); }
.convo-text.try  { background:rgba(168,255,62,0.07); color:#CCFFAA; border-left:3px solid var(--lime); }

/* ── COMPARISON TABLE ── */
.compare { background:var(--dark-mid); }
.compare-table { width:100%; border-collapse:collapse; margin-top:48px; border-radius:var(--radius); overflow:hidden; }
.compare-table th { padding:18px 20px; text-align:left; font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; background:var(--dark-card); color:var(--gray); }
.compare-table th.us { background:rgba(0,194,255,0.12); color:var(--electric); }
.compare-table td { padding:14px 20px; font-size:14px; color:var(--gray-light); font-weight:600; border-bottom:1px solid var(--border); vertical-align:middle; }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tr:hover td { background:rgba(255,255,255,0.02); }
.compare-table td.feature-name { color:var(--white); font-weight:700; font-size:14px; }
.compare-table td.us-col { background:rgba(0,194,255,0.04); }
.check  { color:var(--lime); font-size:18px; font-weight:900; }
.cross  { color:rgba(255,255,255,0.2); font-size:18px; }
.partial { color:var(--electric); font-size:13px; font-weight:700; }

/* ── PRICING ── */
.pricing-t { background:var(--dark); }
.pricing-card-t { max-width:520px; margin:56px auto 0; background:var(--dark-card); border-radius:20px; border:2px solid var(--electric); padding:52px 44px; box-shadow:var(--shadow-e); position:relative; text-align:center; }
.pricing-badge-t { position:absolute; top:-16px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--electric),var(--lime)); color:var(--dark); padding:5px 22px; border-radius:50px; font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; }
.pricing-tier-t { font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--electric); margin-bottom:6px; }
.pricing-amt-t  { font-family:var(--font-head); font-size:72px; font-weight:900; color:var(--white); line-height:1; }
.pricing-amt-t sup { font-size:28px; vertical-align:super; color:var(--electric); }
.pricing-amt-t sub { font-size:18px; color:var(--gray); font-family:var(--font-body); }
.pricing-note-t { font-size:13px; color:var(--gray); margin:8px 0 28px; }
.pricing-div-t  { height:1px; background:var(--border); margin:24px 0; }
.pricing-list-t { list-style:none; text-align:left; margin-bottom:32px; }
.pricing-list-t li { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--gray-light); padding:10px 0; border-bottom:1px solid var(--border); font-weight:600; }
.pricing-list-t li:last-child { border:none; }
.pricing-list-t li::before { content:'✓'; color:var(--lime); font-weight:900; font-family:var(--font-head); flex-shrink:0; }

/* ── STATS ── */
.stats-t { background:var(--dark-mid); }
.stats-grid-t { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:56px; }
.stat-card-t { background:rgba(255,255,255,0.04); padding:40px 24px; text-align:center; transition:background var(--transition); }
.stat-card-t:hover { background:rgba(255,255,255,0.07); }
.stat-num-t { font-family:var(--font-head); font-size:clamp(36px,4vw,56px); font-weight:900; line-height:1; margin-bottom:8px; background:linear-gradient(135deg,var(--electric),var(--lime)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label-t { font-size:13px; color:var(--gray-light); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.stat-source-t { font-size:11px; color:var(--gray); margin-top:6px; font-style:italic; }

/* ── TESTIMONIALS ── */
.testi-t { background:var(--dark); }
.testi-grid-t { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.testi-card-t { background:var(--dark-card); border-radius:var(--radius); border:1px solid var(--border); padding:32px 28px; transition:all var(--transition); }
.testi-card-t:hover { border-color:rgba(0,194,255,0.25); transform:translateY(-4px); }
.testi-stars-t { font-size:16px; margin-bottom:14px; color:var(--lime); letter-spacing:2px; }
.testi-text-t  { font-size:15px; font-style:italic; color:var(--gray-light); line-height:1.75; margin-bottom:22px; font-weight:600; }
.testi-author-t { display:flex; align-items:center; gap:12px; }
.testi-avatar-t { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--electric),var(--lime)); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:15px; font-weight:900; color:var(--dark); }
.testi-name-t { font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--white); }
.testi-role-t { font-size:12px; color:var(--gray); }

/* ── CTA BAND ── */
.cta-t { background:linear-gradient(135deg,#061422 0%,#0B2218 100%); padding:96px 0; text-align:center; position:relative; overflow:hidden; }
.cta-t::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0,194,255,0.10) 0%, transparent 70%); }
.cta-t h2 { margin-bottom:14px; position:relative; }
.cta-t p  { color:var(--gray-light); font-size:18px; margin-bottom:36px; max-width:520px; margin-left:auto; margin-right:auto; position:relative; font-weight:600; }
.cta-actions-t { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ── FAQ ── */
.faq-t { background:var(--dark-mid); }
.faq-list-t { max-width:760px; margin:56px auto 0; }
.faq-item-t { border-bottom:1px solid var(--border); }
.faq-q-t { width:100%; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:22px 0; text-align:left; font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--white); transition:color var(--transition); }
.faq-q-t:hover { color:var(--electric); }
.faq-icon-t { font-size:20px; color:var(--electric); transition:transform 0.3s ease; flex-shrink:0; margin-left:16px; }
.faq-item-t.open .faq-icon-t { transform:rotate(45deg); }
.faq-ans-t { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-ans-t p { color:var(--gray-light); font-size:16px; padding-bottom:22px; line-height:1.75; }

/* ── FOOTER ── */
.footer-t { background:#060B14; border-top:1px solid var(--border); padding:64px 0 32px; }
.footer-grid-t { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand-t { font-family:var(--font-head); font-size:22px; font-weight:900; }
.footer-brand-t .dg    { color:var(--electric); }
.footer-brand-t .teens { color:var(--lime); }
.footer-desc-t { font-size:14px; color:var(--gray); margin-top:12px; max-width:280px; line-height:1.7; }
.footer-head-t { font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--electric); margin-bottom:18px; }
.footer-links-t { list-style:none; }
.footer-links-t li { margin-bottom:10px; }
.footer-links-t a { font-size:14px; color:var(--gray); transition:color var(--transition); font-weight:600; }
.footer-links-t a:hover { color:var(--white); }
.footer-bottom-t { border-top:1px solid var(--border); padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy-t { font-size:13px; color:var(--gray); }
.footer-legal-t { display:flex; gap:24px; }
.footer-legal-t a { font-size:13px; color:var(--gray); }
.footer-legal-t a:hover { color:var(--white); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up:nth-child(2) { transition-delay:0.1s; }
.fade-up:nth-child(3) { transition-delay:0.2s; }
.fade-up:nth-child(4) { transition-delay:0.3s; }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .hero-grid      { grid-template-columns:1fr; }
  .hero-visual    { display:none; }
  .steps-t        { grid-template-columns:1fr 1fr; }
  .steps-t::before{ display:none; }
  .teen-grid      { grid-template-columns:1fr; }
  .friends-grid   { grid-template-columns:1fr; }
  .parent-grid    { grid-template-columns:1fr; }
  .stats-grid-t   { grid-template-columns:1fr 1fr; }
  .testi-grid-t   { grid-template-columns:1fr; }
  .footer-grid-t  { grid-template-columns:1fr 1fr; }
  .compare-table  { font-size:13px; }
}
@media (max-width:640px) {
  .navbar-nav { display:none; }
  .navbar-nav.open { display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; background:var(--dark); padding:24px; gap:16px; border-bottom:1px solid var(--border); }
  .nav-toggle { display:block; }
  .hero-actions { flex-direction:column; }
  .stats-grid-t { grid-template-columns:1fr 1fr; }
  .footer-grid-t { grid-template-columns:1fr; }
  .steps-t { grid-template-columns:1fr; }
  .compare-table th, .compare-table td { padding:10px 12px; font-size:12px; }
}

/* ── Install grid responsive ── */
.install-grid { grid-template-columns: repeat(3,1fr) !important; }
@media (max-width: 900px) { .install-grid { grid-template-columns: 1fr !important; } }