*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,-apple-system,sans-serif}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root{
  --kid:#FFB347;--teen:#4A6CF7;--dark:#1E1E2F;--gray:#6B7280;
  --white:#fff;--bg:#F9FAFE;--danger:#991B1B;
}
body{background:var(--bg);color:var(--dark);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* HEADER */
.site-header{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05);position:sticky;top:0;z-index:50}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0;flex-wrap:wrap;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.4rem}
.logo-icon{width:38px;height:38px;border-radius:12px 6px;background:linear-gradient(135deg,var(--kid),var(--teen));display:flex;align-items:center;justify-content:center;color:#fff}
.nav-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.nav-links a,.nav-links button{opacity:.85;transition:.2s;font-weight:500;background:none;border:none;cursor:pointer;font-size:1rem;color:var(--dark)}
.nav-links a:hover,.nav-links button:hover{opacity:1;color:var(--teen)}
.btn-outline{border:1.5px solid var(--teen);color:var(--teen)!important;padding:6px 16px;border-radius:40px;background:none;cursor:pointer}
.btn-outline:hover{background:var(--teen);color:#fff!important}

/* LAYOUT */
.main-wrap{padding:28px 20px;min-height:60vh}
.card{background:#fff;border-radius:22px;padding:26px;box-shadow:0 6px 20px rgba(0,0,0,.05);margin-bottom:20px}
.form-wrap{max-width:460px;margin:40px auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.stat{background:#fff;padding:22px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.04);text-align:center}
.stat h3{font-size:2rem;color:var(--teen)}
.stat p{color:var(--gray);font-size:.9rem}
.main-full {
  min-height: 60vh;
  padding: 0;      /* no padding — sections handle their own spacing */
}
/* FORMS */
input,textarea,select{width:100%;padding:12px 14px;border:1px solid #E5E7EB;border-radius:12px;font-size:1rem;margin-bottom:14px;font-family:inherit;background:#fff}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teen)}
label{display:block;font-weight:600;margin-bottom:6px;font-size:.92rem}
textarea{resize:vertical;min-height:90px}

/* BUTTONS */
.btn-primary{background:var(--teen);color:#fff;padding:12px 26px;border-radius:40px;border:none;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:.2s;font-size:.95rem}
.btn-primary:hover{background:#3A5BD9;transform:translateY(-1px)}
.btn-secondary{background:transparent;border:1px solid rgba(0,0,0,.12);padding:12px 24px;border-radius:40px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:var(--dark)}
.btn-secondary:hover{background:rgba(0,0,0,.03)}
.btn-danger{background:var(--danger);color:#fff;padding:12px 24px;border-radius:40px;border:none;font-weight:600;cursor:pointer}

/* FLASH */
.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:.92rem}
.flash-info{background:#E0E7FF;color:#2A44B0}
.flash-success{background:#D1FAE5;color:#065F46}
.flash-error{background:#FEE2E2;color:#991B1B}

/* POSTS */
.post{background:#fff;border-radius:22px;padding:22px;margin-bottom:20px;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.post-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.post-head img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.post-meta{font-size:.82rem;color:var(--gray)}
.post-content{margin:12px 0;white-space:pre-wrap;word-wrap:break-word}
.post-image{border-radius:14px;margin-top:10px;max-width:100%}
.post-actions{display:flex;gap:20px;margin-top:14px;font-size:.9rem;color:var(--gray);align-items:center;flex-wrap:wrap}
.post-actions button{background:none;border:none;color:inherit;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:6px}
.post-actions button:hover,.post-actions a:hover{color:var(--teen)}

/* BADGES */
.badge{display:inline-block;font-size:.72rem;padding:3px 10px;border-radius:40px;font-weight:600}
.badge-kid{background:rgba(255,179,71,.25);color:#A85E1A}
.badge-teen{background:rgba(74,108,247,.15);color:#2A44B0}
.badge-parent{background:#E0E7FF;color:#2A44B0}
.badge-admin{background:#1E1E2F;color:#FFB347}
.badge-pending{background:#FEF3C7;color:#92400E}
.badge-approved{background:#D1FAE5;color:#065F46}
.badge-rejected{background:#FEE2E2;color:#991B1B}
.badge-guardian_pending{background:#FEF3C7;color:#92400E}
.badge-hidden {background: #FEE2E2;
  color: #991B1B;}

/* LANDING */
.landing{padding:40px 0}
.hero-grid{display:flex;gap:50px;align-items:center;flex-wrap:wrap}
.hero-content{flex:1.2;min-width:300px}
.hero-content h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.15;margin-bottom:20px;font-weight:800}
.hero-content h1 .kid-h{color:var(--kid)}
.hero-content h1 .teen-h{color:var(--teen)}
.hero-content p{color:var(--gray);font-size:1.1rem;margin-bottom:26px;max-width:560px}
.split-circle{width:280px;height:280px;border-radius:50%;background:conic-gradient(from 45deg,var(--kid) 0 180deg,var(--teen) 180deg 360deg);box-shadow:0 30px 50px -20px rgba(30,30,47,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.split-circle .inner-icon{width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:#fff;border:2px solid rgba(255,255,255,.5)}
.section-header{text-align:center;margin:50px 0 34px}
.section-header h2{font-size:2.2rem;margin-bottom:10px;letter-spacing:-.02em}
.section-header p{color:var(--gray);font-size:1.05rem}
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.card-kid{background:#FFF9F0;border-top:6px solid var(--kid)}
.card-teen{background:#F0F4FF;border-top:6px solid var(--teen)}
.card-icon{font-size:2.4rem;margin-bottom:18px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:18px}
.card-kid .card-icon{background:rgba(255,179,71,.2);color:#CC7B2E}
.card-teen .card-icon{background:rgba(74,108,247,.15);color:var(--teen)}
.feature-list{list-style:none;margin:18px 0 26px}
.feature-list li{display:flex;gap:10px;margin-bottom:14px;font-size:.95rem}
.feature-list i{margin-top:5px;flex-shrink:0}
.card-kid .feature-list i{color:var(--kid)}
.card-teen .feature-list i{color:var(--teen)}

/* FOOTER */
.site-footer{background:var(--dark);color:rgba(255,255,255,.8);padding:44px 0 22px;margin-top:60px;font-size:16px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:34px;margin-bottom:32px}

.footer-brand h3{color:#fff;margin-bottom:10px;font-size:1.25rem;display:flex;gap:8px;align-items:center;line-height:1.3}
.footer-brand p{font-size:.9rem;line-height:1.55;opacity:.75;max-width:280px;margin:0}

.footer-links h5{color:#fff;margin-bottom:14px;font-size:1rem;font-weight:700;line-height:1.3;letter-spacing:0}
.footer-links ul{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:8px;font-size:.9rem;line-height:1.5}
.footer-links a{opacity:.75;font-size:.9rem;line-height:1.5;display:inline-block}
.footer-links a:hover{opacity:1}

.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;line-height:1.5;opacity:.7}

/* Footer — mobile & landscape */
@media (max-width: 900px) {
  .site-footer { padding: 36px 0 20px; }
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 26px;
  }
  .footer-brand { grid-column: 1 / -1; }  /* brand spans full width */
  .footer-brand p { max-width: none; }
  .footer-brand h3 { font-size: 1.15rem; }
}

@media (max-width: 550px) {
  .site-footer { padding: 30px 0 18px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 6px; }
  .footer-brand h3 { font-size: 1.1rem; }
  .footer-brand p { font-size: .85rem; }
  .footer-links h5 { font-size: .95rem; margin-bottom: 10px; }
  .footer-links li { font-size: .85rem; margin-bottom: 6px; }
  .footer-links a { font-size: .85rem; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    font-size: .8rem;
    padding-top: 18px;
  }
}

/* Landscape phones — narrower than 550px but wide */
@media (max-height: 500px) and (orientation: landscape) {
  .site-footer { padding: 30px 0 18px; }
  .footer-grid { gap: 22px; margin-bottom: 24px; }
  .footer-brand h3 { font-size: 1.1rem; }
  .footer-links h5 { font-size: .95rem; }
  .footer-links li,
  .footer-links a { font-size: .85rem; }
}

/* COMMENTS */
.comments{margin-top:14px;border-top:1px solid #eee;padding-top:12px}
.comment{display:flex;gap:10px;margin-bottom:12px}
.comment img{width:32px;height:32px;border-radius:50%}
.comment-body strong{font-size:.9rem}
.comment-body .post-meta{font-size:.75rem;display:inline;margin-left:4px}
.comment-body div{font-size:.92rem;word-wrap:break-word}
.comment-form{display:flex;gap:8px;margin-top:10px}
.comment-form input{margin:0;flex:1}

/* ADMIN TABLE */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:12px 10px;text-align:left;border-bottom:1px solid #f0f0f0;font-size:.9rem}
.admin-table th{font-weight:600;color:var(--gray);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.admin-table tr:hover{background:#FAFAFC}

@media(max-width:900px){
  .cards-grid{grid-template-columns:1fr}
  .hero-grid{flex-direction:column-reverse;text-align:center}
  .hero-content p{margin-left:auto;margin-right:auto}
  .split-circle{width:220px;height:220px}
  .split-circle .inner-icon{width:90px;height:90px;font-size:2.8rem}
  .section-header h2{font-size:1.7rem}
  .header-inner{flex-direction:column;align-items:stretch}
  .nav-links{justify-content:center}
}
@media(max-width:550px){
  .hero-content h1{font-size:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .admin-table th,.admin-table td{padding:8px 6px;font-size:.8rem}
}

/* ==========================================================
   LANDING PAGE — Phase B redesign
   ========================================================== */

/* ---- HERO ---- */
.hero {
  position: relative;
  padding: 60px 0 80px;
  background: radial-gradient(circle at 85% 20%, rgba(74,108,247,.10) 0%, transparent 55%),
              radial-gradient(circle at 10% 80%, rgba(255,179,71,.12) 0%, transparent 55%);
  overflow: hidden;
}

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

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(74,108,247,.2);
  color: var(--teen);
  padding: 8px 16px;
  border-radius: 40px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(74,108,247,.08);
}
.hero-pill .dot {
  width: 8px; height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
  50%     { box-shadow: 0 0 0 6px rgba(16,185,129,.05); }
}

.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--dark);
}
.hero-title .hl-kid {
  background: linear-gradient(135deg, #FFB347 0%, #FF8C42 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--gray);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.btn-hero-primary {
  background: var(--teen);
  color: #fff;
  padding: 16px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 28px -10px rgba(74,108,247,.5);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border: none;
  cursor: pointer;
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -10px rgba(74,108,247,.6);
  background: #3A5BD9;
}

.btn-hero-secondary {
  background: #fff;
  color: var(--dark);
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(0,0,0,.08);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn-hero-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--teen);
  background: #F9FAFE;
}

.hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--gray);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-trust i {
  color: var(--teen);
}

/* ---- HERO VISUAL (floating bubbles) ---- */
.hero-visual {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bubble {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 20px 40px -10px rgba(30,30,47,.15);
  animation: float 6s ease-in-out infinite;
}
.bubble span { display: block; }

.b1 { top: 10%; left: 10%;  animation-delay: 0s;   background: #FFF4E6; }
.b2 { top: 25%; right: 8%;  animation-delay: 1s;   background: #E8EEFF; }
.b3 { top: 50%; left: 4%;   animation-delay: 2s;   background: #FFEDF0; }
.b4 { top: 65%; right: 20%; animation-delay: .5s;  background: #E8FBF3; }
.b5 { top: 82%; left: 25%;  animation-delay: 1.5s; background: #FFF9E6; }
.b6 { top: 5%;  right: 30%; animation-delay: 2.5s; background: #F2E8FF; }
.b7 { top: 45%; right: 45%; animation-delay: 3s;   background: #E6F4FF; width: 70px; height: 70px; font-size: 1.8rem; }
.b8 { top: 72%; left: 55%;  animation-delay: 1.2s; background: #FFF0F5; width: 70px; height: 70px; font-size: 1.8rem; }

@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(4deg); }
}

/* ---- TWO WORLDS ---- */
.two-worlds {
  padding: 80px 0;
  background: #fff;
}

.section-eyebrow {
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teen);
  margin-bottom: 14px;
}

.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 50px;
  color: var(--dark);
}

.world-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}

.world-card {
  border-radius: 28px;
  padding: 36px 32px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.world-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.15);
}

.world-kid {
  background: linear-gradient(160deg, #FFF9F0 0%, #FFEEDD 100%);
  border: 2px solid rgba(255,179,71,.4);
}
.world-teen {
  background: linear-gradient(160deg, #F0F4FF 0%, #E4ECFF 100%);
  border: 2px solid rgba(74,108,247,.35);
}

.world-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  line-height: 1;
}

.world-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 40px;
  margin-bottom: 14px;
}
.world-kid .world-tag {
  background: rgba(255,179,71,.35);
  color: #A85E1A;
}
.world-teen .world-tag {
  background: rgba(74,108,247,.18);
  color: #2A44B0;
}

.world-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.world-list {
  list-style: none;
  margin-bottom: 26px;
}
.world-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .98rem;
  margin-bottom: 12px;
  color: #2D2D44;
}
.world-kid .world-list i { color: #E69A36; }
.world-teen .world-list i { color: var(--teen); }

.btn-world {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .95rem;
  padding: 12px 24px;
  border-radius: 40px;
  text-decoration: none;
  transition: transform .2s ease;
}
.world-kid .btn-world {
  background: #E69A36;
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(230,154,54,.5);
}
.world-teen .btn-world {
  background: var(--teen);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(74,108,247,.5);
}
.btn-world:hover { transform: translateY(-2px); }

/* ---- HOW IT WORKS ---- */
.how {
  padding: 80px 0;
  background: #F9FAFE;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}
.step {
  text-align: center;
  padding: 30px 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.1);
}
.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kid), var(--teen));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 auto 16px;
}
.step h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.step p {
  font-size: .92rem;
  color: var(--gray);
  line-height: 1.5;
}

/* ---- TRUST ---- */
.trust {
  padding: 80px 0;
  background: #fff;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}
.trust-tile {
  padding: 28px 22px;
  border-radius: 20px;
  background: #F9FAFE;
  border: 1px solid rgba(0,0,0,.04);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.trust-tile:hover {
  transform: translateY(-4px);
  background: #F0F4FF;
  border-color: rgba(74,108,247,.2);
}
.trust-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(74,108,247,.1);
  color: var(--teen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.trust-tile h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.trust-tile p {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.55;
}
.trust-cta {
  text-align: center;
}

/* ---- FINAL CTA ---- */
.final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #F0F4FF 0%, #FFF4E6 100%);
}
.final-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.final-inner h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.final-inner p {
  font-size: 1.1rem;
  color: var(--gray);
  margin-bottom: 32px;
}
.final-inner .hero-cta {
  justify-content: center;
}

/* ==========================================================
   PARENTS PAGE
   ========================================================== */

.parents-hero {
  padding: 70px 0 50px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(74,108,247,.08) 0%, transparent 60%);
}
.parents-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 18px;
  color: var(--dark);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.parents-sub {
  font-size: 1.15rem;
  color: var(--gray);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 32px;
}
.parents-hero .hero-cta {
  justify-content: center;
}

.parents-content {
  padding: 40px 0 80px;
}
.parents-content .narrow {
  max-width: 760px;
  margin: 0 auto;
}

.parents-block {
  margin-bottom: 60px;
}
.parents-block h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 26px;
}

.parents-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.parents-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.parents-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(74,108,247,.1);
  color: var(--teen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.parents-icon.no {
  background: rgba(153,27,27,.08);
  color: #991B1B;
}
.parents-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.parents-item p {
  font-size: .95rem;
  color: var(--gray);
  line-height: 1.6;
}

.parents-cta-block {
  text-align: center;
  padding: 50px 30px;
  background: linear-gradient(135deg, #F0F4FF 0%, #FFF4E6 100%);
  border-radius: 28px;
}
.parents-cta-block h2 {
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.parents-cta-block p {
  color: var(--gray);
  font-size: 1rem;
  margin-bottom: 26px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.parents-cta-block .hero-cta {
  justify-content: center;
}

/* ==========================================================
   RESPONSIVE — landing + parents
   ========================================================== */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; height: 320px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-trust { justify-content: center; }
  .world-grid { grid-template-columns: 1fr; }
  .bubble { width: 72px; height: 72px; font-size: 1.8rem; }
  .b7, .b8 { width: 58px; height: 58px; font-size: 1.5rem; }
}
@media (max-width: 550px) {
  .hero { padding: 40px 0 60px; }
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; padding: 14px 22px; }
  .hero-cta { flex-direction: column; }
  .two-worlds, .how, .trust, .final-cta { padding: 50px 0; }
  .world-card { padding: 28px 22px; }
  .parents-hero { padding: 50px 0 30px; }
  .parents-title { font-size: 1.9rem; }
  .parents-sub { font-size: 1rem; }
  .parents-content { padding: 30px 0 60px; }
  .parents-block { margin-bottom: 40px; }
  .parents-item { flex-direction: row; gap: 14px; }
  .parents-icon { width: 40px; height: 40px; font-size: 1rem; }
  .parents-cta-block { padding: 40px 24px; }
  .bubble.b7, .bubble.b8 { display: none; }
}

/* ==========================================================
   LEGAL / STATIC PAGES (terms, privacy, about, contact, safety)
   ========================================================== */

.legal-page {
  padding: 60px 0 80px;
  background: #fff;
}
.legal-page .container.narrow {
  max-width: 760px;
}
.legal-page h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 12px;
  color: var(--dark);
}
.legal-updated {
  font-size: .9rem;
  color: var(--gray);
  margin-bottom: 40px;
}
.legal-page h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 40px 0 14px;
  color: var(--dark);
}
.legal-page p {
  font-size: 1rem;
  line-height: 1.7;
  color: #2D2D44;
  margin-bottom: 16px;
}
.legal-page ul {
  margin: 0 0 20px 20px;
  padding-left: 8px;
}
.legal-page li {
  font-size: 1rem;
  line-height: 1.7;
  color: #2D2D44;
  margin-bottom: 10px;
}
.legal-page a {
  color: var(--teen);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page a:hover {
  color: #3A5BD9;
}
.legal-page .lead {
  font-size: 1.15rem;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Principles list (about page) */
.principles li {
  padding: 12px 0;
  border-bottom: 1px solid #f4f4f4;
}
.principles li:last-child {
  border-bottom: none;
}

/* Safety list (child-safety page) */
.safety-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 30px 0 50px;
}
.safety-item {
  padding: 24px 26px;
  background: #F9FAFE;
  border-radius: 18px;
  border: 1px solid rgba(74,108,247,.1);
}
.safety-item h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--dark);
}
.safety-item p {
  font-size: .95rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
}

/* Contact grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 30px 0 40px;
}
.contact-card {
  padding: 28px 24px;
  background: #F9FAFE;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.04);
  text-align: left;
  transition: transform .2s ease, border-color .2s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(74,108,247,.2);
}
.contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(74,108,247,.1);
  color: var(--teen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.contact-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.contact-card p {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.55;
  margin-bottom: 16px;
}
.btn-contact {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--teen);
  padding: 10px 18px;
  border-radius: 40px;
  background: #fff;
  border: 1.5px solid var(--teen);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn-contact:hover {
  background: var(--teen);
  color: #fff;
  text-decoration: none;
}
.contact-note {
  margin-top: 40px;
  padding: 24px;
  background: #FFF9F0;
  border-radius: 16px;
  border-left: 4px solid var(--kid);
}
.contact-note p {
  font-size: .92rem;
  margin-bottom: 10px;
}
.contact-note p:last-child {
  margin-bottom: 0;
}

/* Legal page — responsive */
@media (max-width: 550px) {
  .legal-page { padding: 40px 0 60px; }
  .legal-page h1 { font-size: 1.8rem; }
  .safety-item { padding: 20px 18px; }
  .contact-card { padding: 22px 18px; }
}

/* ==========================================================
   CLUBS
   ========================================================== */

.club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.club-card {
  display: block;
  background: #fff;
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none;
  color: inherit;
}
.club-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.1);
  border-color: rgba(74,108,247,.2);
}

.club-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.club-cat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 40px;
  background: rgba(74,108,247,.12);
  color: var(--teen);
}

.club-members {
  font-size: .8rem;
  color: var(--gray);
}

.club-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.club-card p {
  font-size: .88rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0;
}

.badge-owner {
  background: #FEF3C7;
  color: #92400E;
}
.badge-moderator {
  background: #E0E7FF;
  color: #2A44B0;
}
.badge-member {
  background: #F0F4FF;
  color: #2A44B0;
}

/* ==========================================================
   HELP CENTER
   ========================================================== */

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 30px 0 40px;
}

.help-card {
  display: block;
  padding: 26px 22px;
  background: #F9FAFE;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.04);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.help-card:hover {
  transform: translateY(-4px);
  border-color: rgba(74,108,247,.25);
  background: #F0F4FF;
  box-shadow: 0 20px 40px -15px rgba(74,108,247,.15);
}

.help-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(74,108,247,.1);
  color: var(--teen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.help-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.help-card p {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 550px) {
  .help-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .help-card {
    padding: 20px 18px;
  }
  .help-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    margin-bottom: 12px;
  }
}

/* Help: numbered step list */
.steps-list {
  list-style: none;
  counter-reset: step-counter;
  padding: 0;
  margin: 0 0 30px;
}
.steps-list li {
  counter-increment: step-counter;
  position: relative;
  padding: 14px 20px 14px 62px;
  background: #F9FAFE;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: #2D2D44;
  border-left: 3px solid rgba(74,108,247,.2);
}
.steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB347, #4A6CF7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
}

/* Help: FAQ item */
.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid #f4f4f4;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
  letter-spacing: -.01em;
}
.faq-item p {
  font-size: .98rem;
  line-height: 1.7;
  color: #2D2D44;
  margin-bottom: 12px;
}
.faq-item ul,
.faq-item ol {
  margin: 0 0 12px 20px;
  padding-left: 8px;
}
.faq-item li {
  font-size: .98rem;
  line-height: 1.7;
  color: #2D2D44;
  margin-bottom: 8px;
}

@media (max-width: 550px) {
  .steps-list li {
    padding: 12px 16px 12px 54px;
    font-size: .95rem;
  }
  .steps-list li::before {
    left: 14px;
    width: 28px;
    height: 28px;
    font-size: .82rem;
  }
  .faq-item {
    padding: 16px 0;
  }
  .faq-item h3 {
    font-size: 1rem;
  }
}

/* ==========================================================
   ONBOARDING TOUR
   ========================================================== */

.onboarding-banner {
  background: linear-gradient(135deg, #F0F4FF 0%, #FFF4E6 100%);
  border: 2px solid rgba(74,108,247,.2);
  border-radius: 22px;
  padding: 26px 28px;
  margin-bottom: 24px;
  position: relative;
  animation: onboardingSlideIn .5s ease;
}

@keyframes onboardingSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.onboarding-emoji {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.onboarding-header strong {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--dark);
  display: block;
  margin-bottom: 4px;
}

.onboarding-sub {
  color: var(--gray);
  font-size: .92rem;
}

.onboarding-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.onboarding-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.onboarding-tip-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.onboarding-tip strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--dark);
  letter-spacing: -.01em;
}

.onboarding-tip p {
  font-size: .88rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0;
}

.onboarding-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 550px) {
  .onboarding-banner {
    padding: 20px;
    border-radius: 18px;
  }
  .onboarding-header strong {
    font-size: 1.05rem;
  }
  .onboarding-emoji {
    font-size: 1.8rem;
  }
  .onboarding-tips {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .onboarding-tip {
    padding: 14px 16px;
  }
  .onboarding-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .onboarding-actions .btn-primary,
  .onboarding-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================
   HOMEPAGE v2 — engaging redesign
   ========================================================== */

/* --- Hero image --- */
.hero-v2 .hero-visual {
  position: relative;
  height: auto;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image {
  width: 100%;
  max-width: 480px;
  height: 480px;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 40px 70px -30px rgba(30,30,47,.3);
}

.hero-image-badge {
  position: absolute;
  background: #fff;
  padding: 10px 16px;
  border-radius: 40px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 12px 24px -10px rgba(30,30,47,.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.badge-top-left {
  top: 24px;
  left: -10px;
  color: #2A44B0;
}
.badge-top-left i { color: var(--teen); }

.badge-bottom-right {
  bottom: 24px;
  right: -10px;
  color: #A85E1A;
}
.badge-bottom-right i { color: var(--kid); }

/* --- Social proof bar --- */
.proof-bar {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 30px 0;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  text-align: center;
}

.proof-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-item strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--teen);
  letter-spacing: -.02em;
}

.proof-item span {
  font-size: .85rem;
  color: var(--gray);
}

/* --- Section subtitle --- */
.section-sub {
  text-align: center;
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 640px;
  margin: -30px auto 50px;
  line-height: 1.6;
}

/* --- World cards with images --- */
.world-card {
  border-radius: 28px;
  overflow: hidden;
  padding: 0;
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
}

.world-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.world-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.world-card:hover .world-image img {
  transform: scale(1.05);
}

.world-body {
  padding: 28px 28px 32px;
}

.world-kid { background: linear-gradient(160deg, #FFF9F0 0%, #FFEEDD 100%); border: 2px solid rgba(255,179,71,.4); }
.world-teen { background: linear-gradient(160deg, #F0F4FF 0%, #E4ECFF 100%); border: 2px solid rgba(74,108,247,.35); }

/* --- Showcase grid --- */
.showcase {
  padding: 80px 0;
  background: #fff;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}

.showcase-card {
  padding: 28px 24px;
  background: #F9FAFE;
  border-radius: 20px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(0,0,0,.04);
}

.showcase-card:hover {
  transform: translateY(-4px);
  background: #F0F4FF;
  box-shadow: 0 20px 40px -15px rgba(74,108,247,.15);
}

.showcase-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(74,108,247,.1);
  color: var(--teen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.showcase-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--dark);
}

.showcase-card p {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.55;
  margin: 0;
}

/* --- Schools CTA section --- */
.schools-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #F0F4FF 0%, #FFF4E6 100%);
}

.schools-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: center;
}

.schools-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 12px 0 16px;
  color: var(--dark);
}

.schools-text p {
  font-size: 1.05rem;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 26px;
}

.schools-image img {
  border-radius: 24px;
  box-shadow: 0 30px 60px -25px rgba(30,30,47,.3);
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* --- Final CTA update --- */
.final-note {
  margin-top: 24px;
  font-size: .9rem;
  color: var(--gray);
  opacity: .9;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero-image {
    max-width: 380px;
    height: 380px;
  }
  .schools-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .schools-image img {
    height: 260px;
  }
}

@media (max-width: 550px) {
  .hero-image {
    max-width: 100%;
    height: 300px;
    border-radius: 20px;
  }
  .hero-image-badge {
    font-size: .72rem;
    padding: 8px 12px;
  }
  .badge-top-left { top: 14px; left: 6px; }
  .badge-bottom-right { bottom: 14px; right: 6px; }

  .world-image { height: 180px; }
  .world-body { padding: 22px 20px 26px; }

  .showcase, .schools-cta { padding: 50px 0; }

  .proof-bar { padding: 22px 0; }
  .proof-item strong { font-size: 1.2rem; }
  .proof-item span { font-size: .8rem; }
}