/* ============================================================
   Nappilos Educations — COMPLETE style.css (base + story)
   Replace the ENTIRE contents of style.css with this file.
   ============================================================ */

/* SELF-HOSTED FONTS — put woff2 files in /fonts/ folder
   (download free at gwfh.mranftl.com). Page works without
   them — falls back to system fonts until you add them. */
@font-face{font-family:'Fredoka';src:url('fonts/fredoka-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fredoka';src:url('fonts/fredoka-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fredoka';src:url('fonts/fredoka-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fredoka';src:url('fonts/fredoka-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ============ VARIABLES & RESET ============ */
:root{
  --green:#2BAE85; --green-dark:#1E8A68;
  --yellow:#FFC93C; --coral:#FF6B6B; --sky:#4D96FF; --purple:#9B5DE5;
  --cream:#FFF9F0; --ink:#2D3142; --muted:#6B7280;
  --radius:22px; --shadow:0 12px 40px rgba(45,49,66,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden}
h1,h2,h3{font-family:'Fredoka','Poppins',sans-serif}
img{max-width:100%}
.container{max-width:1180px;margin:auto;padding:0 22px}

/* ============ NAV ============ */
nav{position:fixed;top:0;width:100%;z-index:1000;background:rgba(255,249,240,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(45,49,66,.06);transition:.3s}
nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;max-width:1180px;margin:auto}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{height:54px;width:auto;display:block;transition:.3s}
nav.scrolled .logo-img{height:46px}
.nav-links{display:flex;gap:22px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:500;font-size:.9rem;transition:.2s}
.nav-links a:hover{color:var(--green)}
.btn{display:inline-block;padding:13px 30px;border-radius:50px;font-weight:600;text-decoration:none;transition:.25s;cursor:pointer;border:none;font-size:.95rem;font-family:'Poppins',sans-serif}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 8px 24px rgba(43,174,133,.3)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{transform:translateY(-3px)}
.hamburger{display:none;font-size:1.6rem;background:none;border:none;color:var(--ink);cursor:pointer}

/* ============ HERO ============ */
.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 80px;background:linear-gradient(160deg,#E8FBF3 0%,var(--cream) 45%,#FFF3D6 100%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--green);color:var(--green-dark);padding:8px 20px;border-radius:50px;font-weight:600;font-size:.85rem;margin-bottom:22px}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.12;font-weight:700}
.hero h1 .grad{background:linear-gradient(90deg,var(--coral),var(--purple),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{margin:22px 0 30px;font-size:1.06rem;color:var(--muted);max-width:560px;line-height:1.75}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.newindia{margin-top:22px;font-size:.92rem;color:var(--green-dark);font-weight:500}
.hero-visual{position:relative;text-align:center}
.hero-card{background:#fff;border-radius:30px;box-shadow:var(--shadow);padding:34px 30px;display:inline-block;transform:rotate(2deg);transition:.4s}
.hero-card:hover{transform:rotate(0) scale(1.02)}
.hero-card .emoji-row{font-size:2.3rem;margin-bottom:12px}
.hero-card h3{font-size:1.2rem;color:var(--green-dark)}
.hero-card .meta{color:var(--muted);font-size:.88rem;margin-top:8px}
.float{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:var(--shadow);animation:floaty 4s ease-in-out infinite}
.f1{width:60px;height:60px;background:#fff;top:-14px;left:4%;animation-delay:.2s}
.f2{width:52px;height:52px;background:var(--yellow);bottom:8%;left:-8%;animation-delay:1s}
.f3{width:56px;height:56px;background:var(--sky);top:38%;right:-10%;color:#fff;animation-delay:1.8s}
.f4{width:48px;height:48px;background:var(--coral);bottom:-10px;right:14%;color:#fff;animation-delay:.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Status panel — replaces old countdown */
.status{margin-top:26px;text-align:left;background:#FAFAF7;border:1px solid #EDE9E0;border-radius:16px;padding:16px 18px;display:grid;gap:10px}
.st-row{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500;color:var(--muted)}
.st-row .dot{width:10px;height:10px;border-radius:50%;background:#C7CCD6;flex:none}
.st-row.now{color:var(--green-dark)}
.st-row.now .dot{background:var(--green);box-shadow:0 0 0 4px rgba(43,174,133,.18)}
.st-row.next{color:#8a6d1a}
.st-row.next .dot{background:var(--yellow);box-shadow:0 0 0 4px rgba(255,201,60,.22)}
.st-row b{font-weight:600}

/* ============ TRUST BAR ============ */
.trust{background:var(--ink);color:#fff;padding:18px 0}
.trust .container{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;font-size:.87rem;font-weight:500}

/* ============ SECTIONS ============ */
section{padding:90px 0}
.sec-head{text-align:center;max-width:780px;margin:0 auto 56px}
.sec-head .tag{color:var(--green-dark);font-weight:600;font-size:.85rem;letter-spacing:2.5px;text-transform:uppercase}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:12px 0 16px;line-height:1.2}
.sec-head p{color:var(--muted);line-height:1.8}

/* Cards — Why / New Way */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.why-card{background:#fff;border-radius:var(--radius);padding:34px 26px;box-shadow:var(--shadow);transition:.3s;border-top:5px solid transparent}
.why-card:hover{transform:translateY(-8px);border-top-color:var(--green)}
.why-card .ic{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:18px}
.why-card h3{font-size:1.12rem;margin-bottom:10px}
.why-card p{color:var(--muted);font-size:.92rem;line-height:1.75}
.quote{margin-top:56px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:var(--radius);padding:44px;text-align:center;box-shadow:0 16px 44px rgba(43,174,133,.25)}
.quote p{font-size:1.3rem;font-family:'Fredoka',sans-serif;line-height:1.55}
.quote small{display:block;margin-top:12px;opacity:.85}

/* Understanding Children + Ecosystem */
.nature{background:linear-gradient(180deg,#FFF3D6,var(--cream))}
.nature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.nature-card{background:#fff;border-radius:var(--radius);padding:30px 22px;text-align:center;box-shadow:var(--shadow);transition:.3s;text-decoration:none;color:var(--ink);display:block}
.nature-card:hover{transform:translateY(-8px) scale(1.02)}
.nature-card .big{font-size:2.4rem;margin-bottom:14px}
.nature-card h3{font-size:1.06rem;margin-bottom:8px;color:var(--green-dark)}
.nature-card p{font-size:.88rem;color:var(--muted);line-height:1.7}
.live-pill{display:inline-block;background:#E8FBF3;color:var(--green-dark);border-radius:50px;padding:3px 12px;font-size:.68rem;font-weight:700;letter-spacing:1px;margin-bottom:10px}

/* Our Belief / Shift */
.shift-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
.shift-col{border-radius:var(--radius);padding:40px 34px;box-shadow:var(--shadow)}
.shift-col.respect{background:linear-gradient(160deg,#FFF3D6,#FFE9B8)}
.shift-col.evolve{background:#fff;border:2px dashed var(--green)}
.shift-col h3{font-size:1.35rem;margin-bottom:22px}
.shift-item{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start}
.shift-item .dot{min-width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-top:2px}
.shift-col.respect .dot{background:var(--coral)}
.shift-item p{font-size:.94rem;line-height:1.65}
.shift-item b{display:block}
.shift-item span{color:var(--muted);font-size:.87rem}
.nep-note{margin-top:40px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:36px;text-align:center}
.nep-note h3{color:var(--yellow);margin-bottom:14px;font-size:1.35rem}
.nep-note p{max-width:760px;margin:0 auto;line-height:1.8;font-size:.96rem;opacity:.92}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:8px 18px;border-radius:50px;font-size:.85rem}
.chip.light{background:#fff;border:1px solid #E5E7EB;color:var(--ink)}

/* Global */
.global-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.g-card{background:#fff;border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.3s}
.g-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,var(--coral),var(--yellow))}
.g-card:hover{transform:translateY(-8px)}
.g-card .flag{font-size:1.9rem;margin-bottom:12px}
.g-card h3{font-size:1.1rem;margin-bottom:10px}
.g-card p{color:var(--muted);font-size:.9rem;line-height:1.75}

/* Roadmap */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.phase{background:#fff;border-radius:var(--radius);padding:38px 30px;box-shadow:var(--shadow);position:relative;transition:.3s;border-bottom:6px solid var(--green)}
.phase:hover{transform:translateY(-8px)}
.phase.now{border-bottom-color:var(--coral);background:linear-gradient(180deg,#fff,#FFF6E5)}
.phase.next{border-bottom-color:var(--yellow)}
.phase .pnum{position:absolute;top:-20px;left:30px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:1.2rem;box-shadow:var(--shadow)}
.phase .pill{display:inline-block;border-radius:50px;padding:5px 16px;font-size:.72rem;font-weight:700;letter-spacing:1.5px;margin:10px 0 14px;background:#E8FBF3;color:var(--green-dark)}
.phase.now .pill{background:var(--coral);color:#fff}
.phase.next .pill{background:var(--yellow);color:var(--ink)}
.phase h3{font-size:1.28rem;margin-bottom:10px}
.phase p{color:var(--muted);font-size:.92rem;line-height:1.75}
.phase ul{margin-top:14px;list-style:none}
.phase li{font-size:.88rem;margin-bottom:8px;padding-left:22px;position:relative;color:var(--muted)}
.phase li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}

/* Features / What's Coming */
.features{background:linear-gradient(180deg,var(--cream),#E8FBF3)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.feat{background:#fff;border-radius:var(--radius);padding:34px 26px;box-shadow:var(--shadow);transition:.3s}
.feat:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(45,49,66,.13)}
.feat .ic{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:16px}
.feat h3{font-size:1.1rem;margin-bottom:10px}
.feat p{color:var(--muted);font-size:.9rem;line-height:1.75}
.soon-pill{display:inline-block;background:var(--yellow);border-radius:50px;padding:4px 14px;font-size:.7rem;font-weight:700;margin-bottom:12px;letter-spacing:1px}

/* Safety */
.safety{background:var(--ink);color:#fff}
.safety .sec-head h2{color:#fff}
.safety .sec-head p{color:rgba(255,255,255,.75)}
.safety .sec-head .tag{color:var(--yellow)}
.safe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.safe{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:28px 24px;transition:.3s}
.safe:hover{background:rgba(255,255,255,.1)}
.safe .ic{font-size:1.8rem;margin-bottom:14px}
.safe h3{font-size:1.02rem;margin-bottom:8px;color:var(--yellow)}
.safe p{font-size:.87rem;line-height:1.7;color:rgba(255,255,255,.8)}
.pledge{margin-top:34px;text-align:center}
.pledge .p-title{color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.pledge .chips .chip{background:rgba(255,255,255,.08)}

/* Waitlist */
.waitlist{text-align:center;background:linear-gradient(160deg,#E8FBF3,#FFF3D6)}
.wl-card{background:#fff;border-radius:30px;box-shadow:var(--shadow);max-width:640px;margin:auto;padding:52px 40px}
.wl-card h2{font-size:1.9rem;margin-bottom:12px}
.wl-card>p{color:var(--muted);margin-bottom:28px;line-height:1.7}
.wl-form{display:grid;gap:14px;text-align:left}
.wl-form input,.wl-form select{padding:15px 20px;border:2px solid #E5E7EB;border-radius:14px;font-size:.95rem;font-family:'Poppins',sans-serif;width:100%;transition:.2s;background:#FAFAFA}
.wl-form input:focus,.wl-form select:focus{outline:none;border-color:var(--green);background:#fff}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.6}
.consent input{width:auto;margin-top:3px;accent-color:var(--green)}
.success{display:none;background:#E8FBF3;border:2px solid var(--green);color:var(--green-dark);border-radius:14px;padding:16px;font-weight:600;margin-top:16px}
.error-msg{display:none;background:#FFE9EC;border:2px solid var(--coral);color:#C0392B;border-radius:14px;padding:14px;margin-top:14px;font-size:.9rem}

/* FAQ */
.faq-list{max-width:760px;margin:auto}
.faq-item{background:#fff;border-radius:18px;margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden}
.faq-q{width:100%;background:none;border:none;padding:22px 26px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.98rem;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.faq-q .arr{transition:.3s;color:var(--green)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 26px 22px;color:var(--muted);line-height:1.8;font-size:.93rem}
.faq-item.open .arr{transform:rotate(180deg)}

/* Footer */
footer{background:#1E222E;color:rgba(255,255,255,.75);padding:60px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-grid h4{color:#fff;margin-bottom:16px;font-size:1rem;font-family:'Fredoka',sans-serif}
.foot-grid a{display:block;color:rgba(255,255,255,.65);text-decoration:none;margin-bottom:10px;font-size:.9rem;transition:.2s}
.foot-grid a:hover{color:var(--yellow)}
.foot-logo{background:#fff;border-radius:18px;padding:12px 18px;display:inline-block;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.3s}
.foot-logo:hover{transform:translateY(-3px)}
.foot-logo img{height:64px;width:auto;display:block}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;text-align:center;font-size:.82rem;line-height:1.8}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(36px);transition:.7s ease}
.reveal.show{opacity:1;transform:none}

/* ============ STORY / TIMELINE (World & India) ============ */
.story-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:48px;flex-wrap:wrap}
.story-tab{padding:12px 30px;border-radius:50px;border:2px solid #E5E7EB;background:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;cursor:pointer;color:var(--muted);transition:.25s}
.story-tab:hover{border-color:var(--green);color:var(--green-dark)}
.story-tab.active{background:var(--ink);border-color:var(--ink);color:#fff}
.story-panel{display:none}
.story-panel.active{display:block}

.timeline{position:relative;max-width:940px;margin:auto}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green),var(--yellow),var(--coral));transform:translateX(-50%);border-radius:3px}
.t-item{position:relative;width:50%;padding:0 48px 38px}
.t-item:nth-child(odd){left:0}
.t-item:nth-child(even){left:50%}
.t-dot{position:absolute;top:2px;width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:var(--shadow);z-index:2}
.t-item:nth-child(odd) .t-dot{right:-23px}
.t-item:nth-child(even) .t-dot{left:-23px}
.t-item:nth-child(4n+2) .t-dot{border-color:var(--yellow)}
.t-item:nth-child(4n+3) .t-dot{border-color:var(--sky)}
.t-item:nth-child(4n) .t-dot{border-color:var(--coral)}
.t-card{background:#fff;border-radius:18px;padding:24px 24px 22px;box-shadow:var(--shadow);transition:.3s}
.t-card:hover{transform:translateY(-6px)}
.t-era{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:1.2px;color:var(--green-dark);background:#E8FBF3;border-radius:50px;padding:4px 12px;margin-bottom:10px}
.t-card h3{font-size:1.08rem;margin-bottom:8px}
.t-card p{color:var(--muted);font-size:.9rem;line-height:1.75}
.t-card p i{color:var(--ink);font-style:italic}

.story-hook{margin-top:20px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border-radius:var(--radius);padding:46px 40px;text-align:center;box-shadow:0 16px 44px rgba(43,174,133,.25)}
.story-hook p{font-size:1.18rem;font-family:'Fredoka',sans-serif;line-height:1.6}
.story-hook .btn{background:#fff;color:var(--green-dark);box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero p.sub{margin:22px auto 30px}
  .hero-cta{justify-content:center}
  .status{text-align:left}
  .shift-wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{position:fixed;top:64px;right:-100%;flex-direction:column;background:#fff;width:78%;height:100vh;padding:40px 30px;align-items:flex-start;box-shadow:-8px 0 30px rgba(0,0,0,.1);transition:.35s}
  .nav-links.open{right:0}
  .hamburger{display:block}
  .wl-card{padding:38px 22px}
  .logo-img{height:44px}
  .foot-logo img{height:52px}
}
@media(max-width:820px){
  .timeline::before{left:22px;transform:none}
  .t-item{width:100%;left:0!important;padding:0 0 30px 64px}
  .t-item .t-dot{left:0!important;right:auto}
  .story-hook{padding:36px 22px}
}