:root {
  --ink:        #0F172A;
  --ink-soft:   #334155;
  --slate:      #64748B;
  --indigo:     #4F46E5;
  --indigo-d:   #4338CA;
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --emerald:    #10B981;
  --emerald-50: #ECFDF5;
  --amber:      #F59E0B;
  --amber-50:   #FFFBEB;
  --lemon:      #FEF9C3;
  --lavender:   #EDE9FE;
  --lavender2:  #DDD6FE;
  --mint:       #D1FAE5;
  --bg:         #FAFAF9;
  --surface:    #FFFFFF;
  --border:     #E5E7EB;
  --border-2:   #EEF0F2;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{ font-family:'Lexend',sans-serif; }
img,svg{display:block;}
a{color:inherit;}
:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ================= NAV ================= */
.navbar{
  position:sticky; top:0; z-index:1000;

  background:rgba(249, 249, 250, 0.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-container {
  max-width:1280px;
  margin:auto;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6%;

}
.logo{
  font-family:'Lexend',sans-serif; font-size:1.35rem; font-weight:800;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px;
}
.logo-mark{ width:30px; height:30px; flex-shrink:0; }
.nav-links{ display:flex; gap:32px; list-style:none; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-size:0.9rem; font-weight:500; transition:color 0.15s; }
.nav-links a:hover{ color:var(--indigo); }
.nav-cta{ display:flex; gap:10px; align-items:center; }

/* Mobile hamburger toggle */
.nav-toggle{
    display:none;
    width:44px;
    height:44px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s;
}

.nav-toggle:hover{
    background:#F8FAFC;
}

.nav-toggle svg{
    width:22px;
    height:22px;
}

.close{
    display:none;
}

.navbar.menu-open .hamburger{
    display:none;
}

.navbar.menu-open .close{
    display:block;
}


/* Mobile slide-down menu panel */
.mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:0 12px 24px rgba(15,23,42,.08);

    overflow:hidden;

    max-height:0;

    opacity:0;
    visibility:hidden;

    transition:max-height .35s ease,
               opacity .25s ease;
}

.mobile-menu.open{
    max-height:100vh;
    opacity:1;
    visibility:visible;
}

.mobile-menu ul{
    list-style:none;
}

.mobile-menu li a{
    display:block;
    padding:16px 24px;
    text-decoration:none;
    color:var(--ink-soft);
    border-bottom:1px solid var(--border-2);
}

.mobile-menu li:last-child a{
    border-bottom:none;
}

.mobile-menu-cta{
    padding:20px 24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mobile-menu-cta .btn{
    width:100%;
    justify-content:center;
}


.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:8px;
  font-size:0.875rem; font-weight:600;
  font-family:'Inter',sans-serif;
  cursor:pointer; border:1px solid transparent;
  transition:all 0.15s; text-decoration:none; white-space:nowrap;
}
.btn-outline{ background:none; border-color:var(--border); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-primary{ background:var(--indigo); color:#fff; }
.btn-primary:hover{ background:var(--indigo-d); }
.btn-whatsapp{ background:var(--emerald); color:#fff; }
.btn-whatsapp:hover{ background:#0d9c6f; }
.btn-lg{ padding:13px 28px; font-size:0.95rem; border-radius:10px; }
.btn-sm{ padding:6px 14px; font-size:0.95rem; border-radius:10px; }


/* ================= HERO ================= */

/* Throbing dots */
.tag-dot { width: 7px; height: 7px; background: var(--indigo); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.7);} }

/* Floating blobs */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); pointer-events: none; opacity: 0.55;
}
.blob-1 { width: 380px; height: 380px; background: var(--lavender); top: -60px; left: -80px; }
.blob-2 { width: 300px; height: 300px; background: var(--mint); bottom: 0; right: -60px; }
.blob-3 { width: 200px; height: 200px; background: var(--lemon); top: 40%; left: 10%;  }

.hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding:72px 6% 64px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px;
  align-items:center; max-width:1280px; margin:0 auto;
}
.hero-symbol{
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(280px, 42vw, 560px);
    font-weight: 900;
    line-height: 1;

    color: transparent;
    -webkit-text-stroke: 2px rgba(79,70,229,.06);

    transform: rotate(-12deg);

    pointer-events: none;
    user-select: none;

    z-index: 0;
}
.hero > *:not(.hero-symbol){
    position: relative;
    z-index: 1;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.4px;
  color:var(--indigo); background:var(--indigo-50);
  border:1px solid var(--indigo-100);
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--indigo); }
.hero h1{
  font-size:clamp(3.5rem, 3.6vw, 3rem); font-weight:700; line-height:1.15;
  letter-spacing:-0.5px; color:var(--ink); margin-bottom:18px;
}
.hero h1 em{ font-style:normal; color:var(--indigo); }
.hero-sub{
  font-size:1.05rem; color:var(--ink-soft); line-height:1.65;
  max-width:480px; margin-bottom:30px;
}
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }

.hero-proof{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.proof-avatars{ display:flex; }
.proof-avatars span{
  width:32px; height:32px; border-radius:50%; border:2px solid var(--bg);
  margin-left:-9px; display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; font-weight:700; color:#fff;
}
.proof-avatars span:first-child{ margin-left:0; }
.hero-proof-text{ font-size:0.85rem; color:var(--slate); }
.hero-proof-text strong{ color:var(--ink); }

.hero-visual{ position:relative; }
.hero-visual svg{ width:100%; height:auto; }

/* Stat strip below hero */
.stat-strip{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:28px 6%;
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:1280px; margin:0 auto;
}
.stat-item{ text-align:center; padding:0 12px; border-right:1px solid var(--border-2); }
.stat-item:last-child{ border-right:none; }
.stat-num{ font-family:'Lexend',sans-serif; font-size:1.5rem; font-weight:700; color:var(--ink); }
.stat-lbl{ font-size:0.78rem; color:var(--slate); margin-top:4px; }

/* ================= SECTION SHARED ================= */
section{ padding:88px 6%; }
.section-inner{ max-width:1280px; margin:0 auto; }
.section-head{ max-width:640px; margin-bottom:48px; }
.eyebrow{
  font-size:0.75rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--indigo); margin-bottom:10px;
}
.section-title{
  font-size:clamp(1.6rem, 2.6vw, 2.2rem); font-weight:700; letter-spacing:-0.5px;
  color:var(--ink); line-height:1.25; margin-bottom:12px;
}
.section-sub{ color:var(--ink-soft); font-size:0.98rem; line-height:1.65; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ================= HOW IT WORKS ================= */
.how-section{ background:var(--indigo-50); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top: 56px; background:var(--indigo-50); }
/* .how-card{ background:var(--surface); padding:32px 28px; } */
.how-icon{ width:44px; height:44px; margin-bottom:18px; }
.how-card h3{ font-size:1.02rem; font-weight:600; margin-bottom:8px; color:var(--ink); } 
.how-card p{ color:var(--slate); font-size:0.88rem; line-height:1.6; } 

.how-card {
  background:var(--surface); padding:32px 28px; border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px;
  position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.how-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(124,58,237,0.1); }
.how-card::before {
  content: attr(data-num);
  position: absolute; top: -17px; right: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 7rem; font-weight: 900;
  color: rgba(124,58,237,0.06);
  line-height: 1; pointer-events: none;
}



/* ================= SUBJECTS (full courses) ================= */
.subjects-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.subject-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:30px; transition:border-color 0.15s, box-shadow 0.15s;
  display:flex; flex-direction:column; gap:16px;
}
.subject-card:hover{ border-color:var(--ink); box-shadow:0 4px 20px rgba(15,23,42,0.05); }
.subject-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.subject-icon-wrap{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.subject-count{ font-size:0.72rem; font-weight:600; color:var(--slate); background:var(--bg); border:1px solid var(--border); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.subject-card h2{ font-size:1.3rem; font-weight:700; color:var(--ink); }
.subject-card .subj-desc{ font-size:0.88rem; color:var(--ink-soft); line-height:1.6; }
.chapter-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.ctag{ font-size:0.76rem; font-weight:500; color:var(--ink-soft); background:var(--bg); border:1px solid var(--border-2); padding:4px 11px; border-radius:6px; }
.subject-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:16px; border-top:1px solid var(--border-2); }
.subject-cta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.85rem; font-weight:600; color:var(--indigo);
  text-decoration:none;
}
.subject-cta:hover{ color:var(--indigo-d); }
.subject-cta svg{ width:15px; height:15px; }

/* ================= MICRO COURSES BY CHAPTER ================= */
.chapters-section{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.subject-block{ margin-bottom:56px; }
.subject-block:last-child{ margin-bottom:0; }
.subject-block-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--border-2);
}
.subject-block-title{ display:flex; align-items:center; gap:12px; font-size:1.1rem; font-weight:700; color:var(--ink); }
.subject-block-icon{ width:34px; height:34px; }
.subject-enrol-all{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.82rem; font-weight:600; color:var(--indigo); text-decoration:none;
  border:1px solid var(--indigo); padding:7px 15px; border-radius:8px; transition:all 0.15s;
}
.subject-enrol-all:hover{ background:var(--indigo-100); }

.chapter-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.chapter-card{
  background:var(--bg); border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:18px; display:flex; flex-direction:column; gap:9px;
  transition:border-color 0.15s, transform 0.15s;
}
.chapter-card:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.chapter-top-row{ display:flex; align-items:center; justify-content:space-between; }
.level-tag{ font-size:0.68rem; font-weight:700; padding:3px 9px; border-radius:5px; text-transform:uppercase; letter-spacing:0.3px; }
.level-easy{ background:var(--emerald-50); color:#047857; }
.level-medium{ background:var(--amber-50); color:#B45309; }
.level-hard{ background:#FEF2F2; color:#B91C1C; }
.chapter-name{ font-size:0.94rem; font-weight:600; color:var(--ink); }
.chapter-topics{ font-size:0.78rem; color:var(--slate); line-height:1.5; }
.chapter-bottom-row{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.chapter-meta{ font-size:0.72rem; color:var(--slate); }
.chapter-enrol-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.76rem; font-weight:600; color:#fff; background:var(--emerald);
  padding:6px 13px; border-radius:7px; text-decoration:none; transition:background 0.15s;
}
.chapter-enrol-btn:hover{ background:#0d9c6f; }

/* ================= FREE RESOURCES ================= */
.resources-section{ background:var(--indigo-50); }
.resources-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.resource-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:22px; display:flex; flex-direction:column; gap:12px;
  transition:box-shadow 0.15s, transform 0.15s;
}
.resource-card:hover{ box-shadow:0 6px 20px rgba(79,70,229,0.08); transform:translateY(-2px); }
.resource-icon{ width:38px; height:38px; }
.resource-card h3{ font-size:0.94rem; font-weight:600; color:var(--ink); }
.resource-card p{ font-size:0.82rem; color:var(--slate); line-height:1.55; }
.resource-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:600; color:var(--indigo); text-decoration:none; margin-top:auto; }
.resource-link:hover{ color:var(--indigo-d); }
.resources-cta{ text-align:center; margin-top:40px; }
.resources-cta p{ color:var(--ink-soft); font-size:0.9rem; margin-bottom:18px; }

/* ================= TESTIMONIALS ================= */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; gap:14px; }
.testi-quote{ font-size:0.9rem; color:var(--ink-soft); line-height:1.65; font-style:italic; }
.testi-foot{ display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px solid var(--border-2); }
.testi-avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; color:#fff; flex-shrink:0; }
.testi-name{ font-size:0.85rem; font-weight:600; color:var(--ink); }
.testi-detail{ font-size:0.75rem; color:var(--slate); }
.testi-rank{ margin-left:auto; font-size:0.72rem; font-weight:700; color:var(--emerald); background:var(--emerald-50); padding:3px 10px; border-radius:999px; white-space:nowrap; }

/* ================= WHY CHOOSE US (illustrated features) ================= */
.why-section{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.why-card{ text-align:center; padding:8px; }
.why-illustration{ width:100%; max-width:150px; margin:0 auto 18px; }
.why-card h3{ font-size:0.98rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.why-card p{ font-size:0.82rem; color:var(--slate); line-height:1.55; }

/* ================= STUDENT MOSAIC / COMMUNITY SECTION ================= */
.community-section{ position:relative; overflow:hidden; }
.community-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.community-illustration{ position:relative; }
.community-illustration svg{ width:100%; height:auto; }
.community-badge-float{
  position:absolute; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:10px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
}
.community-badge-float .cb-icon{ width:30px; height:30px; flex-shrink:0; }
.community-badge-float .cb-num{ font-family:'Lexend',sans-serif; font-size:0.95rem; font-weight:700; color:var(--ink); line-height:1.1; }
.community-badge-float .cb-lbl{ font-size:0.68rem; color:var(--slate); }
.cb-top-right{ top:6%; right:-4%; }
.cb-bottom-left{ bottom:8%; left:-6%; }

.community-list{ display:flex; flex-direction:column; gap:20px; }
.community-item{ display:flex; gap:16px; align-items:flex-start; }
.community-item-icon{ width:44px; height:44px; flex-shrink:0; }
.community-item h4{ font-size:0.98rem; font-weight:600; color:var(--ink); margin-bottom:4px; }
.community-item p{ font-size:0.86rem; color:var(--slate); line-height:1.6; }

/* ================= STUDENT AVATAR STRIP (varied illustrated avatars) ================= */
.avatar-strip-section{ background:var(--indigo-50); padding:56px 6%; }
.avatar-strip-inner{ max-width:1280px; margin:0 auto; text-align:center; }
.avatar-strip-title{ font-size:1rem; font-weight:600; color:var(--ink-soft); margin-bottom:28px; }
.avatar-row{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.student-avatar-card{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.student-avatar-card svg{ width:56px; height:56px; }
.student-avatar-card span{ font-size:0.72rem; color:var(--slate); font-weight:500; }


/* ================= FAQ ================= */
.faq-section{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--border-2); }
.faq-item:first-child{ border-top:1px solid var(--border-2); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Lexend',sans-serif; font-size:0.98rem; font-weight:600; color:var(--ink);
}
.faq-question:hover{ color:var(--indigo); }
.faq-icon{
  width:26px; height:26px; flex-shrink:0; border-radius:7px; background:var(--indigo-50);
  display:flex; align-items:center; justify-content:center; transition:transform 0.25s ease, background 0.2s;
}
.faq-icon svg{ width:13px; height:13px; transition:transform 0.25s ease; }
.faq-item.open .faq-icon{ background:var(--indigo); }
.faq-item.open .faq-icon svg path{ stroke:#fff; }
.faq-item.open .faq-icon svg{ transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-answer-inner{ padding:0 4px 20px; font-size:0.9rem; color:var(--ink-soft); line-height:1.7; max-width:640px; }



/* ================= FINAL CTA ================= */

.final-cta{
  background:var(--ink); border-radius:var(--r-lg);
  padding:56px 6%; text-align:center;
  max-width:1280px; margin:0 6% 0 6%;
  position:relative; overflow:hidden;
}
@media(min-width:1360px){ .final-cta{ margin-left:auto; margin-right:auto; } }
.final-cta h2{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:#fff; letter-spacing:-0.5px; margin-bottom:14px; }
.final-cta p{ color:#94A3B8; font-size:0.95rem; max-width:460px; margin:0 auto 30px; line-height:1.6; }
.final-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-white{ background:#fff; color:var(--ink); }
.btn-white:hover{ background:#F1F5F9; }
.btn-ghost-dark{ background:transparent; border:1px solid #334155; color:#fff; }
.btn-ghost-dark:hover{ border-color:#64748B; }

/* ================= FOOTER ================= */
footer{ padding:48px 6% 28px; border-top:1px solid var(--border); }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; max-width:1280px; margin:0 auto 40px; }
.footer-brand .logo{ margin-bottom:10px; }
.footer-brand p{ font-size:0.85rem; color:var(--slate); max-width:230px; line-height:1.6; }
.footer-col h4{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--slate); margin-bottom:14px; }
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:9px; }
.footer-col a{ color:var(--ink-soft); text-decoration:none; font-size:0.85rem; transition:color 0.15s; }
.footer-col a:hover{ color:var(--indigo); }
.footer-bottom{ max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid var(--border); padding-top:22px; }
.footer-bottom p{ font-size:0.8rem; color:var(--slate); }
.heart-icon{
    width: 1em;
    height: 1em;
    fill: #4F46E5;

    display: inline-block;
    vertical-align: -0.12em;
    margin: 0 .2em;
}


/* ================= CONTACT US ============= */
.contact-hero{ padding:56px 6% 8px; max-width:1280px; margin:0 auto; text-align:center; }
.contact-hero h1{ font-size:clamp(1.9rem,4vw,2.7rem); font-weight:700; letter-spacing:-0.5px; line-height:1.2; color:var(--ink); margin-bottom:14px; }
.contact-hero p{ color:var(--ink-soft); font-size:1rem; line-height:1.65; max-width:560px; margin:0 auto; }

/* MAIN GRID */
.contact-wrap{ max-width:1280px; margin:0 auto; padding:48px 6% 88px; }
.contact-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:28px; align-items:start; }

/* FORM CARD */
.form-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:36px;
}
.form-card h2{ font-size:1.2rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.form-card .form-sub{ font-size:0.88rem; color:var(--slate); margin-bottom:28px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:0.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.form-group input,
.form-group select,
.form-group textarea{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:9px;
  font-size:0.9rem; font-family:'Inter',sans-serif; color:var(--ink); background:var(--bg);
  outline:none; transition:border-color 0.15s, background 0.15s;
}
.form-group input::placeholder,
.form-group textarea::placeholder{ color:#94A3B8; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ border-color:var(--indigo); background:#fff; }
.form-group textarea{ resize:vertical; min-height:120px; }
.form-group select{ cursor:pointer; }

.form-error{ font-size:0.76rem; color:#DC2626; margin-top:5px; display:none; }
.form-error.show{ display:block; }
.form-group.error input,
.form-group.error select,
.form-group.error textarea{ border-color:#DC2626; }

.form-submit-row{ display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
.btn-submit{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--indigo); color:#fff; border:none; padding:13px 30px;
  border-radius:10px; font-size:0.92rem; font-weight:600; cursor:pointer;
  font-family:'Inter',sans-serif; transition:background 0.15s;
}
.btn-submit:hover{ background:var(--indigo-d); }
.btn-submit:disabled{ opacity:0.6; cursor:not-allowed; }
.form-note{ font-size:0.78rem; color:var(--slate); }

.form-success{
  display:none; align-items:flex-start; gap:14px;
  background:var(--emerald-50); border:1px solid #A7F3D0; border-radius:var(--r); padding:20px 22px;
}
.form-success.show{ display:flex; }
.form-success svg{ width:24px; height:24px; flex-shrink:0; margin-top:2px; }
.form-success h3{ font-size:0.95rem; font-weight:700; color:#047857; margin-bottom:4px; }
.form-success p{ font-size:0.84rem; color:#065F46; line-height:1.55; }

/* SIDE INFO PANEL */
.info-stack{ display:flex; flex-direction:column; gap:16px; }
.info-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:24px;
}
.info-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.info-icon{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-card h3{ font-size:0.96rem; font-weight:700; color:var(--ink); }
.info-card .info-detail{ font-size:0.87rem; color:var(--ink-soft); line-height:1.65; }
.info-card .info-detail strong{ color:var(--ink); font-weight:600; }
.info-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; color:var(--indigo); text-decoration:none; margin-top:10px; }
.info-link:hover{ color:var(--indigo-d); }

.info-card.dark{ background:var(--ink); border-color:var(--ink); }
.info-card.dark h3{ color:#fff; }
.info-card.dark .info-detail{ color:#94A3B8; }

.hours-row{ display:flex; justify-content:space-between; font-size:0.85rem; padding:7px 0; border-bottom:1px solid var(--border-2); }
.hours-row:last-child{ border-bottom:none; }
.hours-day{ color:var(--ink-soft); }
.hours-time{ color:var(--ink); font-weight:600; }

/* MAP-STYLE ADDRESS CARD */
.address-visual{
  height:120px; border-radius:var(--r-sm); overflow:hidden; position:relative; margin-bottom:16px;
  background:var(--indigo-50);
}
.address-visual svg{ width:100%; height:100%; }

/* FAQ-ish quick contact strip */
.quick-contact-strip{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:56px 6%; }
.quick-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.quick-card{ text-align:center; padding:28px 20px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg); transition:border-color 0.15s, transform 0.15s; }
.quick-card:hover{ border-color:var(--indigo); transform:translateY(-2px); }
.quick-icon{ width:46px; height:46px; margin:0 auto 14px; }
.quick-card h4{ font-size:0.94rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.quick-card p{ font-size:0.8rem; color:var(--slate); line-height:1.55; margin-bottom:14px; }

/* ================= FLOATING WHATSAPP ================= */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:52px; height:52px; border-radius:50%; background:var(--emerald);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(16,185,129,0.4); text-decoration:none;
  transition:transform 0.15s;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:24px; height:24px; }

/* ================= REVEAL ================= */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal:nth-child(1){ transition-delay: 0s; }
.reveal:nth-child(2){ transition-delay: .08s; }
.reveal:nth-child(3){ transition-delay: .16s; }
.reveal:nth-child(4){ transition-delay: .24s; }
.reveal:nth-child(5){ transition-delay: .32s; }

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:360px; margin:0 auto; }
  .subjects-grid{ grid-template-columns:1fr; }
  .how-grid{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .stat-item{ border-right:none; border-bottom:1px solid var(--border-2); padding-bottom:16px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .community-grid{ grid-template-columns:1fr; }
  .community-illustration{ order:-1; max-width:320px; margin:0 auto 20px; }
  .cb-top-right, .cb-bottom-left{ display:none; }
}
@media(max-width:900px){
  .nav-links{ display:none; }
  .nav-cta .btn-outline{ display:none; }
  .nav-toggle{ display:flex; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .avatar-row{ gap:12px; }
}

@media(min-width:901px){
  .mobile-menu{display:none;}
}