:root { --bg:#fcfbff; --surface:#fff; --text:#37466f; --muted:#7482a3; --line:#e7e9f6; --blue:#7c89d8; --blue-dark:#5966c2; --red:#e49696; --red-dark:#cf8080; --yellow:#eb7f95; --max:1180px; --shadow:0 14px 32px rgba(97,106,166,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Nunito","Poppins","Segoe UI",Arial,sans-serif; color:var(--text); line-height:1.6; background:radial-gradient(circle at 8% 7%, rgba(255,213,186,.40), rgba(255,213,186,0) 36%), radial-gradient(circle at 95% 8%, rgba(208,218,255,.42), rgba(208,218,255,0) 40%), var(--bg); }
.container { width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }

header { position:sticky; top:0; z-index:60; background:linear-gradient(90deg, rgba(255,248,250,.98), rgba(246,249,255,.98)); border-bottom:1px solid #ece1f3; backdrop-filter:blur(8px); box-shadow: 0 4px 12px rgba(140,122,165,.12); }
.nav { min-height: 78px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; }
.brand { display: flex; align-items: center; gap: 0.62rem; text-decoration: none; color: #434e80; font-weight: 800; font-size: 1.14rem; flex: 0 0 auto; }
.brand img,.f-logo { width:42px; height:42px; border-radius:10px; border:1px solid #dbe6f9; object-fit:contain; background:#fff; padding:3px; }
.links { display: flex; align-items: center; gap: 1.6rem; flex-wrap: nowrap; flex: 1; justify-content: center; row-gap: .34rem; }
.links a { text-decoration: none; color: #505d8a; font-size: 0.98rem; font-weight: 700; white-space: nowrap; }
.links a:hover { color: #5966c2; }
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(89, 102, 194, .28);
  outline-offset: 2px;
}
.trust-note-wrap { padding: 0.4rem 0 0.15rem; }
.trust-note { margin: 0; text-align: center; color: #5966c2; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; }

.btn { border:0; border-radius:999px; padding:.75rem 1.2rem; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; cursor:pointer; transition: transform .16s ease, box-shadow .16s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn-primary { background: var(--yellow); color:#fff; border:1px solid #d9647d; box-shadow:0 10px 22px rgba(217,100,125,.2); }
.btn-primary:hover { background: #e34a5c; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background:#fff; color:var(--blue-dark); border:1px solid #dfe4f8; }
.nav-cta { border-radius:4px; padding:.72rem 1.08rem; min-width:120px; }

.hero { padding:1.6rem 0 1.2rem; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:1rem; align-items:stretch; }
.hero-left { border:1px solid #efcfb4; border-radius:20px; background:linear-gradient(135deg,#ffe8dc 0%,#ffd9c9 55%,#ffe7c6 100%); padding:clamp(1.2rem,2.5vw,2rem); box-shadow:var(--shadow); display:grid; align-content:space-between; }
.hero h1 { margin:0; font-size:clamp(2.15rem,5vw,3.35rem); line-height:1.08; letter-spacing:-.01em; }
.hero p { margin:.8rem 0 0; color:#2f3b5f; max-width:64ch; }
.hero-cta { margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.hero-left img {
  margin-top: 1rem;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.75);
  background: #fff;
}

.hero-right { background:#fff; border:1px solid #dfe8fc; border-radius:20px; box-shadow:var(--shadow); padding:1rem; }
.mini-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-top:.7rem; }
.m { border:1px solid #e2eafc; border-radius:12px; padding:.7rem; text-align:center; background:#f8faff; }
.m strong { display:block; color:#1f3da3; font-size:1.2rem; line-height:1; }
.m span { color:#657393; font-size:.8rem; font-weight:600; }

.section { padding:2.2rem 0; content-visibility:auto; contain-intrinsic-size:1px 760px; }
.section h2 { margin: 0; text-align: center; font-size: clamp(1.55rem, 3.3vw, 2.3rem); line-height: 1.16; letter-spacing: -0.01em; }
.sub { margin:.55rem auto 0; max-width:74ch; text-align:center; color:var(--muted); font-size:.94rem; }

.tabs { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; }
.tab { background:#fff; border:1px solid #dfe8fb; border-radius:999px; padding:.42rem .8rem; font-size:.82rem; font-weight:700; color:#35508a; }
.tab.active { background:#fff3ec; border-color:#efcfb4; color:#7b5f4d; }

.review-grid { margin-top:1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.review { background:#fff; border:1px solid #e2eafc; border-radius:14px; padding:.9rem; box-shadow:0 8px 20px rgba(29,53,116,.07); }
.review p { margin:0; color:#42557c; font-size:.87rem; }
.tags { margin-top:.55rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.tags span { background:#f3f7ff; border:1px solid #dce6fb; border-radius:999px; padding:.2rem .48rem; font-size:.73rem; color:#3a5387; font-weight:700; }
.meta { margin-top:.55rem; display:flex; justify-content:space-between; align-items:center; gap:.4rem; color:#607198; font-size:.78rem; font-weight:600; }

.stories { margin-top:1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.story { background:#fff; border:1px solid #e1e8fb; border-radius:16px; overflow:hidden; box-shadow:0 10px 22px rgba(23,48,108,.08); }
.story img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  display: block;
  background: #f6f8ff;
  padding: .35rem;
}
.story-body { padding:.85rem; }
.story h4 { margin:0; color:#214392; font-size:.96rem; }
.story p { margin:.4rem 0 0; color:var(--muted); font-size:.85rem; }
.story.testimonial {
  padding: 1rem;
  display: grid;
  gap: .55rem;
  align-content: start;
}
.story.testimonial .parent {
  display: flex;
  align-items: center;
  gap: .62rem;
}
.story.testimonial .parent img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #dfe8fb;
  background: #f6f9ff;
  object-fit: contain;
  padding: 8px;
}
.story.testimonial .stars {
  color: #d97a24;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .03em;
  margin: 0;
}
.story.testimonial .quote {
  margin: 0;
  color: #465b84;
  font-size: .9rem;
  line-height: 1.55;
}
.story.testimonial .parent-name {
  margin: 0;
  color: #304a84;
  font-size: .84rem;
  font-weight: 700;
}
.teacher-grid { margin-top:1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.teacher-card {
  background:#f8faff;
  border:1px solid #e1e9fb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(29,53,116,.07);
  padding:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.teacher-card img {
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:10px;
}

.cta-panel { margin-top:1rem; background:#f6f4ff; border:1px solid #e3def8; border-radius:16px; padding:1rem; display:flex; justify-content:space-between; align-items:center; gap:.7rem; flex-wrap:wrap; }

.faq { margin-top:1rem; display:grid; gap:.6rem; }
details { background:#fff; border:1px solid #e2eafc; border-radius:13px; padding:.78rem .9rem; }
summary { cursor:pointer; font-weight:700; color:#2b436f; font-size:.92rem; }
details p { margin:.48rem 0 0; color:var(--muted); font-size:.87rem; }

footer { margin-top:1.5rem; border-top:1px solid var(--line); padding:1.2rem 0 2rem; color:#66779b; font-size:.84rem; background:#fff; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:1rem; }
.f h6 { margin:0; color:#24489d; font-size:.87rem; }
.f a,.f p { margin:.34rem 0 0; display:block; text-decoration:none; color:#5e6f94; font-size:.8rem; line-height:1.45; }
.social-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.55rem; }
.social-row a { text-decoration: none; color: #24489d; font-size: 0.76rem; font-weight: 700; border: 1px solid #d9e5fb; border-radius: 999px; padding: 0.2rem 0.55rem; background: #f7faff; }
.footer-connect { margin-top: 0.6rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }
.c-btn { text-decoration: none; border-radius: 999px; padding: 0.32rem 0.7rem; font-size: 0.76rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.c-btn-wa { background: #d9f3e7; color: #2e6a50; border: 1px solid #bde8d6; }
.c-btn-call { background: #ffe3e3; color: #8d4f4f; border: 1px solid #f5c3c3; }
.legal { margin-top:.9rem; padding-top:.8rem; border-top:1px solid #eaf0fb; display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.replace-note { margin-top: 0.55rem; text-align: center; color: #6d7ca0; font-size: 0.78rem; font-weight: 600; }

.mobile-cta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:80; padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid #dfe8fc; backdrop-filter:blur(8px); box-shadow: 0 4px 12px rgba(140,122,165,.12); }
.mobile-cta .btn { width:100%; }

@media (max-width:1080px) {
  .nav { min-height:72px; gap:.9rem; }
  .links { gap:.92rem; justify-content:flex-start; }
  .links a { font-size:.86rem; }
  .hero-grid,.review-grid,.stories,.teacher-grid,.footer-grid,.mini-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "links links";
    min-height:auto;
    padding:.55rem 0 .35rem;
    row-gap:.45rem;
  }
  .brand { grid-area: brand; }
  .nav-cta {
    grid-area: cta;
    min-width:auto;
    padding:.52rem .86rem;
    font-size:.82rem;
  }
  .links {
    grid-area: links;
    width:100%;
    justify-content:flex-start;
    gap:.38rem;
    overflow:visible;
    flex-wrap:wrap;
    padding-bottom:0;
  }
  .links a {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    font-size:.76rem;
    line-height:1;
    background:#fff;
    border:1px solid #e1e8fb;
    border-radius:999px;
    padding:.3rem .54rem;
  }
  .brand span { font-size:1rem; }
}
@media (max-width:720px) {
  .container { width:min(var(--max), calc(100% - .9rem)); }
  .nav { gap:.4rem; }
  .brand img { width:36px; height:36px; }
  .brand span { font-size:.95rem; }
  .nav-cta { padding:.42rem .66rem; font-size:.76rem; }
  .hero { padding:1rem 0 .75rem; }
  .section { padding:1.45rem 0; }
  .hero h1 { font-size: clamp(1.82rem, 8.6vw, 2.28rem); line-height: 1.12; }
  .hero p { font-size:.92rem; }
  .hero-grid,.review-grid,.stories,.teacher-grid,.footer-grid,.mini-stats { grid-template-columns:1fr; }
  .story img { height: 230px; }
  .hero-cta a,.cta-panel .btn,.mobile-cta .btn { width:100%; }
  body { padding-bottom:68px; }
  .mobile-cta { display:block; }
}