/* =========================================================
   KNOWLEDGE GURUJI — DESIGN SYSTEM
========================================================= */

:root{
  --yellow: #F7B900;
  --yellow-soft: #FFD45A;
  --bg-warm: #FFFDF7;
  --bg-cream: #FFF8E8;
  --ink: #202020;
  --ink-soft: #6B6B6B;
  --navy: #202B3A;
  --white: #FFFFFF;

  --border: rgba(32,32,32,0.10);
  --border-strong: rgba(32,32,32,0.16);
  --shadow-sm: 0 2px 10px rgba(32,32,32,0.05);
  --shadow-md: 0 10px 30px rgba(32,43,58,0.08);
  --shadow-lg: 0 20px 50px rgba(32,43,58,0.12);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --font-display: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
  --container-w: 1240px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* pastel accent palette — used to rotate icon badge colors for a warmer, less corporate feel */
  --pastel-yellow-bg: #FFF1C4; --pastel-yellow-ink:#B98700;
  --pastel-peach-bg:  #FFE1D6; --pastel-peach-ink: #C15A2E;
  --pastel-mint-bg:   #DCF3E4; --pastel-mint-ink:  #1E7D50;
  --pastel-sky-bg:    #DCEBFB; --pastel-sky-ink:   #2560B0;
  --pastel-lilac-bg:  #EAE1FB; --pastel-lilac-ink: #6B3FBF;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-display);
  background: var(--bg-warm);
  color: var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
mark{ background:linear-gradient(180deg, transparent 55%, var(--yellow-soft) 55%); color:inherit; padding:0 2px; position:relative; }
.pw-banner-title mark, .section-heading mark{
  background:none; display:inline-block; position:relative;
}
.pw-banner-title mark::after, .section-heading mark::after{
  content:''; position:absolute; left:-2%; right:-2%; bottom:-0.12em; height:0.22em;
  background-repeat:no-repeat; background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10c20-8 40-8 60 0s40 8 60 0 40-8 60 0' fill='none' stroke='%23F7B900' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events:none;
}

.container{
  width:100%;
  max-width: var(--container-w);
  margin:0 auto;
  padding:0 24px;
}

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

:focus-visible{ outline:2.5px solid var(--navy); outline-offset:3px; border-radius:4px; }

/* ---------- noise overlay ---------- */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:0.025; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; white-space:nowrap;
  padding:13px 24px; border-radius:12px; border:1.5px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn svg{ transition: transform 0.25s var(--ease); flex-shrink:0; }
.btn:hover{ transform: translateY(-2px); }
.btn:hover svg{ transform: translateX(2px); }

.btn-primary{ background: var(--yellow); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--yellow-soft); box-shadow: var(--shadow-md); }

.btn-dark{ background: var(--navy); color: var(--bg-warm); }
.btn-dark:hover{ background:#2b3a50; box-shadow: var(--shadow-md); }

.btn-ghost{ background:transparent; color: var(--navy); border-color: var(--border-strong); }
.btn-ghost:hover{ border-color: var(--navy); }

.btn-outline{ background:transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color: var(--bg-warm); }

.btn-outline-dark{ background:transparent; color: var(--navy); border-color: rgba(32,43,58,0.35); }
.btn-outline-dark:hover{ border-color: var(--navy); background: rgba(32,43,58,0.06); }

.btn-lg{ padding:15px 28px; font-size:16px; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-block{ width:100%; margin-top:20px; }

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: transparent;
  border-bottom:1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(255,253,247,0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom:1px solid var(--border);
  box-shadow: 0 4px 24px rgba(32,32,32,0.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:84px; transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .header-inner{ height:72px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark-wrap{
  display:flex; align-items:center; justify-content:center;
  width:auto; height:70px; border-radius:12px; overflow:hidden; flex-shrink:0;
}
.brand-mark{ width:auto; max-width:280px; height:100%; object-fit:contain; display:block; }
.brand-mark-wrap-footer{
  background: var(--bg-warm); padding:4px 6px; border-radius:12px;
}
.brand-word{ display:flex; flex-direction:column; line-height:1.1; }
.brand-word-main{ font-size:18px; font-weight:600; color: var(--navy); letter-spacing:-0.01em; }
.brand-word-main b{ font-weight:800; }
.brand-word-tag{
  font-family:'Caveat', cursive; font-size:14px; font-weight:600;
  color: var(--yellow); margin-top:-2px;
}

.main-nav ul{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  position:relative; font-size:15px; font-weight:500; color: var(--ink);
  padding:6px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--yellow); transition: width 0.3s var(--ease);
}
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:16px; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:transparent; border:none; padding:0;
}
.hamburger span{
  display:block; width:22px; height:2px; background: var(--navy); margin:0 auto;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-backdrop{
  display:none;
  position:fixed; inset:0; z-index:1099;
  background:rgba(15,20,28,0.5);
  backdrop-filter: blur(2px);
  opacity:0; transition: opacity 0.35s var(--ease);
}
.mobile-menu-backdrop.is-open{ opacity:1; }

.mobile-menu{
  display:none;
  position:fixed; top:0; right:0; bottom:0; z-index:1100;
  width:min(84vw, 340px);
  background: var(--bg-warm);
  box-shadow: -20px 0 50px rgba(32,32,32,0.18);
  padding:20px 22px 28px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.mobile-menu-title{ font-size:15px; font-weight:700; color: var(--navy); letter-spacing:0.02em; }
.mobile-menu-close{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background: var(--white); display:flex; align-items:center; justify-content:center; color: var(--navy);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.mobile-menu-close:hover{ background: var(--bg-cream); transform: rotate(90deg); }
.mobile-menu ul{ display:flex; flex-direction:column; }
.mobile-menu li{
  opacity:0; transform: translateX(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mobile-menu.is-open li{ opacity:1; transform:none; }
.mobile-menu li:nth-child(1){ transition-delay:0.04s; }
.mobile-menu li:nth-child(2){ transition-delay:0.08s; }
.mobile-menu li:nth-child(3){ transition-delay:0.12s; }
.mobile-menu li:nth-child(4){ transition-delay:0.16s; }
.mobile-menu li:nth-child(5){ transition-delay:0.20s; }
.mobile-menu li:nth-child(6){ transition-delay:0.24s; }
.mobile-menu li:nth-child(7){ transition-delay:0.28s; }
.mobile-menu li:nth-child(8){ transition-delay:0.32s; }
.mobile-menu li a{ display:block; padding:14px 4px; font-size:16px; font-weight:600; color: var(--navy); border-bottom:1px solid var(--border); }
.mobile-menu li a:active{ color:#B98700; }
body.menu-open{ overflow:hidden; }

/* =========================================================
   PROMO IMAGE SLIDER — pure image banner carousel
========================================================= */
.promo-slider{
  position:relative;
  margin-top:84px;
  background: var(--bg-warm);
  padding-bottom:16px;
}
.promo-slider-track{
  position:relative; width:100%;
  aspect-ratio: 1983 / 793;
  overflow:hidden;
  background: var(--navy);
}
@media (max-width: 720px){
  .promo-slider-track{ aspect-ratio: 1440 / 640; max-height:none; }
}
.promo-slide{
  position:absolute; inset:0;
  opacity:0; transform: scale(1.02);
  pointer-events:none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.promo-slide.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.promo-slide picture{ display:block; width:100%; height:100%; }
.promo-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.promo-arrow{ position:absolute; top:50%; transform: translateY(-50%); z-index:4; }
.promo-arrow-left{ left:24px; }
.promo-arrow-right{ right:24px; }
.promo-dots{ display:flex; gap:7px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

/* =========================================================
   HERO — PW-style banner slider
========================================================= */
.hero{
  position:relative;
  padding:0;
  background: var(--bg-warm);
}

.pw-banner-wrap{ position:relative; width:100%; }

.hero-slider{
  position:relative; min-height:460px; width:100%;
  overflow:hidden;
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 55%, var(--bg-warm) 100%);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transform: translateX(24px);
  pointer-events:none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.hero-slide.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }

.pw-banner-glow{
  position:absolute; top:-10%; right:-6%; width:60%; height:120%;
  background: radial-gradient(circle, rgba(247,185,0,0.14) 0%, transparent 70%);
  pointer-events:none;
}
.pw-banner-glow::before, .pw-banner-glow::after{
  content:''; position:absolute; width:34px; height:34px; opacity:0.55; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7B900' stroke-width='1.6'%3E%3Cpath d='M12 2l1.8 5.6L19 9l-5.2 1.4L12 16l-1.8-5.6L5 9l5.2-1.4L12 2z'/%3E%3C/svg%3E");
}
.pw-banner-glow::before{ top:6%; left:-4%; width:26px; height:26px; transform: rotate(-12deg); }
.pw-banner-glow::after{ bottom:14%; left:14%; width:20px; height:20px; opacity:0.4; }
.hero-slider::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image: radial-gradient(rgba(32,43,58,0.05) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 30% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 30% 40%, #000 0%, transparent 70%);
}
.pw-banner-stairs{ position:absolute; inset:0; pointer-events:none; opacity:0.5; }
.pw-banner-stairs span{
  position:absolute; right:6%; bottom:8%; display:block; background: rgba(32,43,58,0.06); border-radius:6px;
}
.pw-banner-stairs span:nth-child(1){ width:90px; height:20px; right:8%; bottom:8%; }
.pw-banner-stairs span:nth-child(2){ width:90px; height:60px; right:16%; bottom:8%; }
.pw-banner-stairs span:nth-child(3){ width:90px; height:100px; right:24%; bottom:8%; }
.pw-banner-stairs span:nth-child(4){ width:90px; height:140px; right:32%; bottom:8%; }

.pw-banner-content{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1fr 0.95fr; align-items:center; gap:30px;
  padding:56px 56px; min-height:460px;
  max-width: var(--container-w); margin:0 auto;
}

.pw-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color: var(--navy); background: rgba(32,43,58,0.06); border:1px solid rgba(32,43,58,0.14);
  padding:7px 14px 7px 10px; border-radius:999px; margin-bottom:22px;
  transform: rotate(-1.5deg);
}
.eyebrow-dot{ width:7px; height:7px; border-radius:50%; background: var(--navy); flex-shrink:0; }

.pw-banner-title{
  font-size: clamp(32px, 4.4vw, 54px); font-weight:800; letter-spacing:-0.02em;
  line-height:1.14; color: var(--navy); max-width:14ch;
}
.pw-banner-title mark{ color:#B98700; background:none; }

.pw-banner-sub{ font-size:17px; color: rgba(32,43,58,0.68); margin-top:20px; max-width:42ch; line-height:1.6; }

.pw-banner-cta-row{ display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-cta-row{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; }
.pw-cta{
  display:inline-flex; align-items:center; gap:8px; background: var(--yellow); color: var(--navy);
  font-weight:700; font-size:15.5px; padding:14px 26px; border-radius:999px;
  box-shadow: 0 10px 24px rgba(247,185,0,0.25);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pw-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(247,185,0,0.32); }
.pw-cta-ghost{
  color: var(--navy); font-weight:600; font-size:15px; padding:14px 4px;
  border-bottom:1.5px solid rgba(32,43,58,0.3); transition: border-color 0.25s var(--ease);
}
.pw-cta-ghost:hover{ border-color: #B98700; }

.pw-banner-visual{ position:relative; display:flex; justify-content:center; align-items:center; }
.pw-banner-photo{
  width:100%; max-width:420px; aspect-ratio: 4 / 3.3; object-fit:cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border:1px solid rgba(32,43,58,0.1);
}

.pw-float-badge{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background: var(--white); color: var(--navy); font-size:12.5px; font-weight:700;
  padding:9px 14px; border-radius:999px; box-shadow: var(--shadow-md);
  animation-name: floaty; animation-duration:5.5s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  animation-delay: var(--delay, 0s);
}
.pfb-1{ top:8%; left:2%; }
.pfb-2{ bottom:10%; right:4%; }

.float-anim{ animation: floaty 5.5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

/* slider arrows + dots (shared: also styled generically for reuse) */
.slider-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,253,247,0.25);
  background: rgba(255,253,247,0.1); color: var(--bg-warm); display:flex; align-items:center; justify-content:center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  backdrop-filter: blur(6px);
}
.slider-arrow:hover{ background: var(--yellow); color: var(--navy); transform: translateY(-1px); }
.pw-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:4;
  border-color: rgba(32,43,58,0.14); background: rgba(32,43,58,0.06); color: var(--navy);
}
.pw-arrow-left{ left:24px; }
.pw-arrow-right{ right:24px; }
.pw-arrow:hover{ transform: translateY(-50%) translateY(-1px); }
.promo-arrow:hover{ transform: translateY(-50%) translateY(-1px); }

.pw-dots{ padding-top:22px; padding-bottom:36px; }
.slider-dots{ display:flex; gap:7px; justify-content:center; margin-top:0; flex-wrap:wrap; }
.slider-dots button{
  width:7px; height:7px; border-radius:50%; background: var(--border-strong); border:none; padding:0;
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.slider-dots button.is-active{ background: var(--yellow); width:20px; border-radius:6px; }

/* ---------- phone mockup + app dashboard (reused in App Showcase / Final CTA) ---------- */
.phone-frame{
  position:relative; z-index:2;
  width:270px; height:552px;
  background: var(--navy); border-radius:40px;
  padding:12px; box-shadow: var(--shadow-lg);
  border:1px solid rgba(32,43,58,0.6);
}
.phone-notch{
  position:absolute; top:12px; left:50%; transform: translateX(-50%);
  width:90px; height:22px; background: var(--navy); border-radius:0 0 14px 14px; z-index:3;
}
.phone-screen{
  position:relative; width:100%; height:100%; background: var(--bg-warm);
  border-radius:30px; padding:34px 18px 18px; overflow:hidden;
}
.app-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.app-hi{ font-size:11px; color: var(--ink-soft); }
.app-name{ font-size:15px; font-weight:700; color: var(--navy); }
.app-avatar{
  width:34px; height:34px; border-radius:50%; background: var(--yellow); color: var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}
.app-class-picker{ font-size:12px; color: var(--ink-soft); margin-bottom:14px; font-weight:500; }
.chip-row{ display:flex; gap:6px; margin-top:8px; }
.chip{ font-size:11px; font-weight:600; padding:6px 11px; border-radius:999px; background: var(--white); border:1px solid var(--border); color: var(--ink-soft); }
.chip-active{ background: var(--navy); color: var(--bg-warm); border-color: var(--navy); }

.app-card{ background: var(--white); border:1px solid var(--border); border-radius:16px; padding:14px; margin-bottom:16px; box-shadow: var(--shadow-sm); }
.app-card-label{ font-size:11px; color: var(--ink-soft); font-weight:500; }
.app-card-title{ font-size:14px; font-weight:700; color: var(--navy); margin-top:2px; }
.progress-track{ height:6px; background: var(--bg-cream); border-radius:999px; margin-top:10px; overflow:hidden; }
.progress-fill{ height:100%; background: var(--yellow); border-radius:999px; }
.progress-label{ font-size:11px; color: var(--ink-soft); display:block; margin-top:6px; }

.app-section-label{ font-size:12px; font-weight:700; color: var(--navy); margin:14px 0 8px; }
.app-lesson-list{ background: var(--white); border:1px solid var(--border); border-radius:16px; padding:4px 12px; box-shadow: var(--shadow-sm); }
.app-lesson-row{ display:flex; align-items:center; gap:10px; padding:10px 0; }
.app-lesson-row + .app-lesson-row{ border-top:1px solid var(--border); }
.app-lesson-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.app-lesson-title{ font-size:12.5px; font-weight:600; color: var(--navy); }
.app-lesson-sub{ font-size:10.5px; color: var(--ink-soft); margin-top:2px; }

.app-subject-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.app-subject-tile{
  background: var(--white); border:1px solid var(--border); border-radius:12px; padding:12px 10px;
  font-size:12px; font-weight:600; color: var(--navy); text-align:center;
}
.app-subject-grid-lg{ grid-template-columns:1fr 1fr 1fr; }

.floating-card{
  position:absolute; z-index:3; background: var(--white); border:1px solid var(--border);
  border-radius:16px; padding:12px 14px; display:flex; align-items:center; gap:10px;
  box-shadow: var(--shadow-md); animation-name: floaty; animation-duration:5.5s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  animation-delay: var(--delay, 0s);
}
.fc-icon{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fc-icon-yellow{ background: var(--yellow); }
.fc-icon-navy{ background: var(--navy); }
.fc-title{ font-size:12.5px; font-weight:700; color: var(--navy); }
.fc-sub{ font-size:11px; color: var(--ink-soft); }

/* =========================================================
   TRUST STRIP
========================================================= */
.trust-strip{ background: var(--navy); padding:26px 0; }
.trust-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.trust-item{ display:flex; align-items:center; gap:10px; color: var(--bg-warm); font-size:14.5px; font-weight:600; }

/* =========================================================
   SECTION SHELL
========================================================= */
.section{ padding:110px 0; }
.section-tint{ background: var(--bg-cream); position:relative; overflow:hidden; }
.section-tint::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:520px; height:520px; border-radius:50%; top:-220px; right:-160px;
  background: radial-gradient(circle, rgba(247,185,0,0.10) 0%, transparent 70%);
}
.section-tint::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; border-radius:50%; bottom:-200px; left:-140px;
  background: radial-gradient(circle, rgba(32,43,58,0.05) 0%, transparent 70%);
}
.section-tint > .container{ position:relative; z-index:1; }
.section-head{ max-width:660px; margin-bottom:56px; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-hand); font-size:22px; font-weight:700; letter-spacing:0.01em;
  text-transform:none; color:#B98700; background:none;
}
.section-eyebrow::before{
  content:''; width:8px; height:8px; border-radius:50%; background: var(--yellow); flex-shrink:0;
  box-shadow: 0 0 0 4px rgba(247,185,0,0.18);
}
.section-heading{ font-size: clamp(30px, 4vw, 48px); font-weight:800; letter-spacing:-0.02em; color: var(--navy); margin-top:6px; line-height:1.15; }
.section-sub{ font-size:17.5px; color: var(--ink-soft); margin-top:14px; max-width:56ch; line-height:1.65; }
.section-cta-row{ margin-top:44px; text-align:center; }

/* =========================================================
   CLASS CARDS
========================================================= */
.page-hero{ padding:150px 0 60px; background: var(--bg-cream); text-align:center; }
.page-hero .section-eyebrow{ justify-content:center; }
.page-hero .section-heading{ margin-top:10px; }
.page-hero .section-sub{ max-width:56ch; margin:14px auto 0; }
.page-hero-crumbs{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; color: var(--ink-soft); margin-bottom:14px; }
.page-hero-crumbs a{ color: var(--ink-soft); }
.page-hero-crumbs a:hover{ color: var(--navy); }
.class-jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.class-jump a{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--border);
  font-size:14px; font-weight:600; color: var(--navy); background: var(--bg-warm);
  transition: all 0.2s var(--ease);
}
.class-jump a:hover, .class-jump a.is-active{ background: var(--navy); color: var(--bg-warm); border-color: var(--navy); }
.class-detail{ scroll-margin-top:100px; padding:70px 0; border-bottom:1px solid var(--border); }
.class-detail:last-of-type{ border-bottom:none; }
.class-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.class-detail-title{ display:flex; align-items:center; gap:16px; }
.class-detail-num{
  width:64px; height:64px; border-radius:16px; background: var(--navy); color: var(--yellow);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; flex-shrink:0;
}
.class-detail-title h2{ font-size:26px; font-weight:800; color: var(--navy); }
.class-detail-title p{ font-size:14.5px; color: var(--ink-soft); margin-top:4px; max-width:52ch; }
.class-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; }
.class-card{
  position:relative; background: var(--white); border:1.5px solid var(--border);
  border-radius: var(--radius-md); padding:26px 22px; display:flex; flex-direction:column; gap:14px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.class-card:nth-child(even){ background: var(--bg-cream); }
.class-card:hover{ transform: translateY(-6px); border-color: var(--yellow); box-shadow: var(--shadow-md); }
.class-card-featured{ background: var(--navy) !important; color: var(--bg-warm); }
.class-card-featured .class-desc{ color: rgba(255,253,247,0.72); }
.class-card-featured:hover{ border-color: var(--yellow); }

.class-badge{
  position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:700;
  background: var(--yellow); color: var(--navy); padding:4px 9px; border-radius:999px; letter-spacing:0.02em;
}
.class-card-top{ display:flex; flex-direction:column; gap:12px; }
.class-illustration{
  width:52px; height:52px; border-radius:14px; background: var(--bg-cream);
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.35s var(--ease);
}
.class-card:hover .class-illustration{ transform: scale(1.08); }
.class-illustration-dark{ background: rgba(255,253,247,0.1); }
.class-number{ font-size:22px; font-weight:800; letter-spacing:-0.01em; }
.class-desc{ font-size:14.5px; color: var(--ink-soft); line-height:1.55; flex-grow:1; }
.class-link{
  display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600;
  color: var(--navy);
}
.class-card-featured .class-link{ color: var(--yellow); }
.class-card:hover .class-link svg{ transform: translateX(4px); }
.class-link svg{ transition: transform 0.25s var(--ease); }

/* =========================================================
   FEATURES
========================================================= */
.feature-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.feature-block{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:28px 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-block:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feature-icon{
  width:46px; height:46px; border-radius:12px; background: var(--bg-cream);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  transition: transform 0.3s var(--ease);
}
.feature-block:hover .feature-icon{ transform: scale(1.08) rotate(-4deg); }
.feature-block:nth-child(5n+1) .feature-icon{ background: var(--pastel-yellow-bg); }
.feature-block:nth-child(5n+2) .feature-icon{ background: var(--pastel-peach-bg); }
.feature-block:nth-child(5n+3) .feature-icon{ background: var(--pastel-mint-bg); }
.feature-block:nth-child(5n+4) .feature-icon{ background: var(--pastel-sky-bg); }
.feature-block:nth-child(5n+5) .feature-icon{ background: var(--pastel-lilac-bg); }
.feature-block h3{ font-size:18px; font-weight:700; color: var(--navy); margin-bottom:8px; }
.feature-block p{ font-size:14.5px; color: var(--ink-soft); line-height:1.6; }

/* =========================================================
   LEARNING EXPERIENCE (asymmetric)
========================================================= */
.learning-inner{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:60px; align-items:center; }
.learning-left{ position:relative; }
.deco-circle{ position:absolute; width:120px; height:120px; border-radius:50%; border:1.5px solid rgba(247,185,0,0.35); top:-40px; left:-40px; z-index:0; }
.deco-line{ position:absolute; width:2px; height:70px; background: var(--yellow); bottom:-20px; left:14px; z-index:0; }
.learning-left > *{ position:relative; z-index:1; }
.learning-left .btn{ margin-top:30px; }

.learning-right{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mini-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:20px; display:flex; gap:12px; align-items:flex-start;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mini-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.mini-card:nth-child(2){ transform: translateY(18px); }
.mini-card:nth-child(2):hover{ transform: translateY(14px); }
.mini-card:nth-child(4){ transform: translateY(18px); }
.mini-card:nth-child(4):hover{ transform: translateY(14px); }
.mini-icon{ width:36px; height:36px; border-radius:10px; background: var(--bg-cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform 0.3s var(--ease); }
.mini-card:hover .mini-icon{ transform: scale(1.1) rotate(-4deg); }
.mini-card:nth-child(5n+1) .mini-icon{ background: var(--pastel-yellow-bg); }
.mini-card:nth-child(5n+2) .mini-icon{ background: var(--pastel-peach-bg); }
.mini-card:nth-child(5n+3) .mini-icon{ background: var(--pastel-mint-bg); }
.mini-card:nth-child(5n+4) .mini-icon{ background: var(--pastel-sky-bg); }
.mini-card:nth-child(5n+5) .mini-icon{ background: var(--pastel-lilac-bg); }
.mini-card h4{ font-size:15px; font-weight:700; color: var(--navy); margin-bottom:4px; }
.mini-card p{ font-size:13px; color: var(--ink-soft); line-height:1.5; }

/* =========================================================
   SUBJECTS
========================================================= */
.subject-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.subject-card{
  position:relative; overflow:hidden;
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:24px; text-align:left; display:flex; flex-direction:column; gap:14px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.subject-card:hover{ transform: translateY(-5px); border-color: var(--yellow); }
.subject-pattern{ position:absolute; top:-20px; right:-20px; opacity:0.08; }
.subject-icon{ width:44px; height:44px; border-radius:12px; background: var(--bg-cream); display:flex; align-items:center; justify-content:center; transition: transform 0.3s var(--ease); }
.subject-card:hover .subject-icon{ transform: scale(1.1) rotate(-4deg); }
.subject-card:nth-child(5n+1) .subject-icon{ background: var(--pastel-yellow-bg); }
.subject-card:nth-child(5n+2) .subject-icon{ background: var(--pastel-peach-bg); }
.subject-card:nth-child(5n+3) .subject-icon{ background: var(--pastel-mint-bg); }
.subject-card:nth-child(5n+4) .subject-icon{ background: var(--pastel-sky-bg); }
.subject-card:nth-child(5n+5) .subject-icon{ background: var(--pastel-lilac-bg); }
.subject-name{ font-size:16px; font-weight:700; color: var(--navy); position:relative; z-index:1; }

/* =========================================================
   APP SHOWCASE
========================================================= */
.app-showcase{ background: var(--bg-cream); overflow:hidden; }
.app-showcase-inner{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.app-showcase-visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:560px; }

.stack-screen{
  position:absolute; width:230px; height:480px; border-radius:34px; background: var(--white);
  border:1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ss-1{ transform: rotate(-9deg) translateX(-70px); opacity:0.7; }
.ss-2{ transform: rotate(9deg) translateX(70px); opacity:0.55; }

.phone-frame-lg{ width:280px; height:572px; }

.store-row{ display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
.playstore-badge{
  display:flex; align-items:center; gap:10px; background: var(--navy); color: var(--bg-warm);
  padding:11px 18px; border-radius:12px; transition: transform 0.25s var(--ease);
}
.playstore-badge:hover{ transform: translateY(-2px); }
.playstore-badge small{ display:block; font-size:10px; letter-spacing:0.03em; opacity:0.75; }
.playstore-badge strong{ display:block; font-size:16px; font-weight:700; }

.qr-row{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.qr-placeholder{
  width:64px; height:64px; border-radius:12px; background: var(--white); border:1.5px dashed var(--border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.qr-row p{ font-size:13.5px; color: var(--navy); font-weight:600; line-height:1.4; }
.qr-row p span{ font-weight:400; color: var(--ink-soft); font-size:12.5px; }

.fc-a{ top:6%; left:0%; }
.fc-b{ top:44%; right:-4%; }
.fc-c{ bottom:8%; left:8%; }

/* =========================================================
   HOW IT WORKS
========================================================= */
.steps-row{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step-line{
  position:absolute; top:22px; left:6%; right:6%; height:0;
  border-top:2px dotted var(--border-strong); z-index:0;
}
.step-item{ position:relative; z-index:1; }
.step-num{ display:block; font-size:13px; font-weight:700; color: var(--yellow); letter-spacing:0.03em; margin-bottom:12px; }
.step-icon{
  width:52px; height:52px; border-radius:14px; background: var(--white); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease);
}
.step-item:hover .step-icon{ transform: scale(1.08) rotate(-4deg); }
.step-item:nth-child(4n+1) .step-icon{ background: var(--pastel-yellow-bg); border-color: transparent; }
.step-item:nth-child(4n+2) .step-icon{ background: var(--pastel-peach-bg); border-color: transparent; }
.step-item:nth-child(4n+3) .step-icon{ background: var(--pastel-mint-bg); border-color: transparent; }
.step-item:nth-child(4n+4) .step-icon{ background: var(--pastel-sky-bg); border-color: transparent; }
.step-item h3{ font-size:18px; font-weight:700; color: var(--navy); margin-bottom:8px; }
.step-item p{ font-size:14.5px; color: var(--ink-soft); line-height:1.6; }

/* =========================================================
   EXAM PREPARATION
========================================================= */
.exam-prep{ position:relative; background: var(--navy); overflow:hidden; }
.exam-bg{ position:absolute; top:50%; right:-8%; transform: translateY(-50%); opacity:0.5; }
.section-head-light .section-eyebrow-light{ color: var(--yellow); }
.section-heading-light{ color: var(--bg-warm); }
.section-heading-light mark{ background:none; color: var(--yellow); }

.exam-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.exam-card{
  background: rgba(255,253,247,0.05); border:1px solid rgba(255,253,247,0.14); border-radius: var(--radius-md);
  padding:26px 22px; transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.exam-card:hover{ transform: translateY(-5px); background: rgba(255,253,247,0.09); }
.exam-num{ font-size:13px; font-weight:700; color: var(--yellow); }
.exam-card h3{ font-size:18px; font-weight:700; color: var(--bg-warm); margin:12px 0 8px; }
.exam-card p{ font-size:14px; color: rgba(255,253,247,0.65); line-height:1.6; }

/* =========================================================
   BLOG / UPDATES
========================================================= */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
  border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.blog-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-media{ display:block; overflow:hidden; aspect-ratio: 400/260; }
.blog-media svg{ width:100%; height:100%; transition: transform 0.5s var(--ease); }
.blog-card:hover .blog-media svg{ transform: scale(1.06); }
.blog-body{ padding:22px; }
.blog-meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; margin-bottom:12px; }
.blog-cat{ font-weight:700; color:#B98700; background: var(--bg-cream); padding:4px 10px; border-radius:999px; }
.blog-date{ color: var(--ink-soft); }
.blog-body h3{ font-size:19px; font-weight:700; color: var(--navy); line-height:1.35; margin-bottom:10px; }
.blog-body p{ font-size:14px; color: var(--ink-soft); line-height:1.6; margin-bottom:16px; }
.read-more{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color: var(--navy); }
.read-more svg{ transition: transform 0.25s var(--ease); }
.blog-card:hover .read-more svg{ transform: translateX(4px); }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testi-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md); padding:28px;
}
.testi-stars{ color: var(--yellow); font-size:16px; letter-spacing:2px; margin-bottom:14px; }
.testi-text{ font-size:15px; color: var(--ink); line-height:1.65; margin-bottom:22px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:42px; height:42px; border-radius:50%; background: var(--navy); color: var(--bg-warm);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0;
}
.testi-name{ font-size:14.5px; font-weight:700; color: var(--navy); }
.testi-class{ font-size:12.5px; color: var(--ink-soft); }

/* =========================================================
   PARENTS
========================================================= */
.parents-section{ background: var(--bg-cream); }
.parents-inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:50px; align-items:center; }
.parents-points{ display:flex; flex-direction:column; gap:22px; }
.parent-point{ display:flex; gap:16px; align-items:flex-start; }
.parent-num{
  width:38px; height:38px; border-radius:50%; background: var(--navy); color: var(--yellow);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.parent-point h3{ font-size:17px; font-weight:700; color: var(--navy); margin-bottom:4px; }
.parent-point p{ font-size:14.5px; color: var(--ink-soft); line-height:1.6; }

/* =========================================================
   FOR PARENTS — TRUST SECTION
========================================================= */
.trust-parents-section{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--bg-warm) 0%, #FFF6E4 100%);
}
.trust-parents-decor{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.tp-blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:0.5; }
.tp-blob-1{
  width:420px; height:420px; right:-140px; top:-120px;
  background: radial-gradient(circle at 30% 30%, rgba(247,185,0,0.28), rgba(247,185,0,0) 70%);
}
.tp-blob-2{
  width:320px; height:320px; left:-120px; bottom:-100px;
  background: radial-gradient(circle at 30% 30%, rgba(108,78,240,0.16), rgba(108,78,240,0) 70%);
}
.tp-dots{
  position:absolute; left:6%; bottom:10%; width:110px; height:70px;
  background-image: radial-gradient(rgba(32,43,58,0.18) 1.6px, transparent 1.6px);
  background-size:14px 14px; opacity:0.5;
}

.trust-parents-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}

.trust-parents-sub{ font-size:15.5px; color: var(--ink-soft); line-height:1.7; margin:16px 0 30px; max-width:46ch; }

.trust-stats{ display:flex; gap:28px; margin-bottom:34px; flex-wrap:wrap; }
.trust-stat-num{ font-size:26px; font-weight:800; color: var(--navy); letter-spacing:-0.02em; }
.trust-stat-label{ font-size:12.5px; color: var(--ink-soft); font-weight:600; margin-top:2px; }

.trust-parents-panel{
  position:relative;
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:34px 30px 28px; box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; gap:22px;
}

.trust-point{ display:flex; gap:16px; align-items:flex-start; }
.trust-point:not(:last-of-type){ padding-bottom:22px; border-bottom:1px solid var(--border); }
.trust-point h3{ font-size:16.5px; font-weight:700; color: var(--navy); margin-bottom:4px; }
.trust-point p{ font-size:14px; color: var(--ink-soft); line-height:1.6; }

.trust-icon{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.trust-icon-yellow{ background: var(--bg-cream); color:#B87E00; }
.trust-icon-navy{ background: rgba(32,43,58,0.08); color: var(--navy); }
.trust-icon-purple{ background: rgba(108,78,240,0.12); color:#6C4EF0; }

.trust-badge{
  display:flex; align-items:center; gap:12px; margin-top:4px; padding-top:20px; border-top:1px solid var(--border);
}
.trust-badge-avatars{ display:flex; flex-shrink:0; }
.trust-badge-avatars span{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--white); margin-left:-8px;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-soft) 100%);
}
.trust-badge-avatars span:first-child{ margin-left:0; }
.trust-badge-avatars span:nth-child(2){ background: linear-gradient(135deg, var(--navy) 0%, #3A4A63 100%); }
.trust-badge-avatars span:nth-child(3){ background: linear-gradient(135deg, #6C4EF0 0%, #9C86F5 100%); }
.trust-badge p{ font-size:13px; font-weight:600; color: var(--navy); }

@media (max-width: 900px){
  .trust-parents-inner{ grid-template-columns:1fr; gap:36px; }
  .trust-parents-panel{ padding:26px 22px 22px; }
}

/* =========================================================
   CONNECT / SOCIAL
========================================================= */
.connect-section{ background: var(--bg-warm); }
.connect-head{ text-align:center; max-width:620px; margin:0 auto 44px; }
.connect-head .section-eyebrow{ justify-content:center; }
.connect-sub{ font-size:15.5px; color: var(--ink-soft); line-height:1.6; margin-top:14px; }

.connect-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}

.connect-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:30px 26px 26px; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  overflow:hidden;
}
.connect-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background: var(--connect-accent, var(--navy));
}
.connect-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(32,43,58,0.16);
}

.connect-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--connect-accent-soft, var(--bg-cream));
  color: var(--connect-accent, var(--navy));
  flex-shrink:0;
}

.connect-platform{
  font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--connect-accent, var(--ink-soft));
}
.connect-body h3{ font-size:19px; font-weight:800; color: var(--navy); margin-top:4px; letter-spacing:-0.01em; }
.connect-desc{ font-size:14px; color: var(--ink-soft); line-height:1.6; margin-top:8px; }

.connect-cta{
  margin-top:8px; display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color: var(--navy);
}
.connect-cta svg{ transition: transform 0.3s var(--ease); }
.connect-card:hover .connect-cta svg{ transform: translate(2px,-2px); }

.connect-card-instagram{ --connect-accent:#D6249F; --connect-accent-soft:#FBE3F2; }
.connect-card-instagram::before{ background: linear-gradient(90deg,#FEDA75,#D62976,#4F5BD5); }
.connect-card-youtube{ --connect-accent:#FF0000; --connect-accent-soft:#FFE3E3; }
.connect-card-whatsapp{ --connect-accent:#25D366; --connect-accent-soft:#E3FBEC; }

@media (max-width: 900px){
  .connect-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   FINAL CTA
========================================================= */
.final-cta{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, #FFF3D0 0%, var(--bg-warm) 55%, var(--bg-cream) 100%);
  padding:100px 0 0;
}
.final-cta-decor{ position:absolute; inset:0; pointer-events:none; }
.fc-circle{ position:absolute; border-radius:50%; border:1.5px solid rgba(32,43,58,0.08); }
.fc-circle-1{ width:340px; height:340px; right:6%; top:10%; }
.fc-circle-2{ width:200px; height:200px; right:20%; bottom:-10%; }
.final-cta-decor::before, .final-cta-decor::after{
  content:''; position:absolute; width:26px; height:26px; opacity:0.55;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7B900' stroke-width='1.6'%3E%3Cpath d='M12 2l1.8 5.6L19 9l-5.2 1.4L12 16l-1.8-5.6L5 9l5.2-1.4L12 2z'/%3E%3C/svg%3E");
}
.final-cta-decor::before{ top:16%; left:7%; width:24px; height:24px; transform: rotate(8deg); }
.final-cta-decor::after{ top:26%; left:14%; width:14px; height:14px; opacity:0.35; }

.final-cta-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 0.9fr; align-items:center; gap:30px; }
.final-cta-copy h2{ font-size: clamp(32px, 4.4vw, 52px); font-weight:800; color: var(--navy); letter-spacing:-0.02em; line-height:1.12; }
.final-cta-copy p{ font-size:17.5px; color: var(--ink-soft); margin-top:16px; max-width:44ch; }
.final-cta-copy .hero-cta-row{ margin-top:32px; }

.final-cta-trust{ display:flex; align-items:center; gap:12px; margin-top:28px; }
.final-cta-avatars{ display:flex; flex-shrink:0; }
.final-cta-avatars span{
  width:32px; height:32px; border-radius:50%; margin-left:-10px;
  border:2px solid var(--bg-warm); background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-soft) 100%);
}
.final-cta-avatars span:first-child{ margin-left:0; background: linear-gradient(135deg, var(--navy) 0%, #354256 100%); }
.final-cta-avatars span:nth-child(3){ background: linear-gradient(135deg, #6C4EF0 0%, #9C86F5 100%); }
.final-cta-trust p{ margin:0; font-size:13.5px; font-weight:600; color: var(--ink-soft); max-width:22ch; }

.final-cta-visual{ display:flex; justify-content:center; align-items:flex-end; height:100%; }
.phone-frame-cta{ transform: translateY(24px); }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background: var(--navy); color: rgba(255,253,247,0.82); padding-top:80px; }
.footer-inner{ display:grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap:36px; padding-bottom:56px; border-bottom:1px solid rgba(255,253,247,0.1); }
.brand-footer{ margin-bottom:16px; }
.brand-word-main-light{ color: var(--bg-warm); }
.brand-word-tag-light{ color: var(--yellow); }
.footer-desc{ font-size:14px; line-height:1.65; color: rgba(255,253,247,0.6); max-width:34ch; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,253,247,0.2);
  display:flex; align-items:center; justify-content:center; transition: background 0.25s var(--ease), border-color .25s var(--ease);
}
.footer-social a:hover{ background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

.footer-col h4{ font-size:14.5px; font-weight:700; color: var(--bg-warm); margin-bottom:18px; letter-spacing:0.02em; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color: rgba(255,253,247,0.62); transition: color 0.2s var(--ease); }
.footer-col a:hover{ color: var(--yellow); }

.footer-bottom{ padding:24px 24px; font-size:13px; color: rgba(255,253,247,0.5); text-align:center; }

/* =========================================================
   TEACHERS
========================================================= */
.teacher-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.teacher-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:26px 22px; text-align:center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.teacher-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--yellow); }
.teacher-photo{
  position:relative;
  width:88px; height:88px; margin:0 auto 18px; border-radius:50%; overflow:hidden;
  border:2px solid var(--bg-cream);
}
.teacher-photo::after{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px dashed var(--border-strong);
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease);
}
.teacher-card:hover .teacher-photo::after{ transform: rotate(35deg); border-color: var(--yellow); }
.teacher-photo svg{ width:100%; height:100%; }
.teacher-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.teacher-name{ font-size:16.5px; font-weight:700; color: var(--navy); margin-bottom:4px; }
.teacher-role{ font-size:12.5px; font-weight:600; color:#B98700; margin-bottom:12px; }
.teacher-bio{ font-size:13.5px; color: var(--ink-soft); line-height:1.6; }

/* =========================================================
   FAQ
========================================================= */
.faq-inner{ max-width:880px; }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  overflow:hidden; transition: border-color 0.3s var(--ease);
}
.faq-item.is-open{ border-color: var(--yellow); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; padding:20px 22px;
  font-size:15.5px; font-weight:600; color: var(--navy);
}
.faq-chevron{ flex-shrink:0; transition: transform 0.3s var(--ease); color: var(--ink-soft); }
.faq-item.is-open .faq-chevron{ transform: rotate(180deg); color: var(--yellow); }
.faq-answer{
  max-height:0; overflow:hidden; transition: max-height 0.35s var(--ease);
}
.faq-item.is-open .faq-answer{ max-height:220px; }
.faq-answer p{ padding:0 22px 20px; font-size:14.5px; color: var(--ink-soft); line-height:1.65; }

/* =========================================================
   PLAYSTORE BADGE (image)
========================================================= */
.playstore-badge-img{ display:inline-flex; transition: transform 0.25s var(--ease); border-radius:10px; overflow:hidden; }
.playstore-badge-img:hover{ transform: translateY(-2px); }
.playstore-badge-img img{ height:54px; width:auto; display:block; border-radius:10px; }

[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1080px){
  .class-grid{ grid-template-columns:repeat(3,1fr); }
  .feature-grid{ grid-template-columns:repeat(3,1fr); }
  .subject-grid{ grid-template-columns:repeat(3,1fr); }
  .teacher-grid{ grid-template-columns:repeat(5,1fr); gap:14px; }
  .teacher-card{ padding:20px 12px; }
  .teacher-photo{ width:74px; height:74px; margin-bottom:14px; }
  .steps-row{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .step-line{ display:none; }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-track{ grid-template-columns:1fr; }
}

@media (max-width: 960px){
  .main-nav{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .hamburger{ display:flex; }
  .mobile-menu{ display:block; }
  .mobile-menu-backdrop{ display:block; }

  .hero-slider{ min-height:auto; }
  .hero-slide{ position:relative; }
  .hero-slide:not(.is-active){ display:none; }
  .pw-banner-content{ grid-template-columns:1fr; padding:40px 28px; text-align:left; gap:28px; }
  .pw-banner-visual{ order:-1; }
  .pw-banner-photo{ max-width:280px; }
  .pw-banner-title{ max-width:100%; }
  .pw-arrow{ display:none; }

  .learning-inner{ grid-template-columns:1fr; }
  .learning-right{ order:2; }

  .app-showcase-inner{ grid-template-columns:1fr; }
  .app-showcase-visual{ order:-1; margin-bottom:10px; transform: scale(0.85); }

  .parents-inner{ grid-template-columns:1fr; gap:32px; }

  .final-cta-inner{ grid-template-columns:1fr; text-align:center; }
  .final-cta-copy p{ margin-left:auto; margin-right:auto; }
  .final-cta-copy .hero-cta-row{ justify-content:center; }
  .final-cta-visual{ margin-top:20px; }

  .footer-inner{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px){
  .section{ padding:64px 0; }
  .section-head{ margin-bottom:40px; }
  .hero{ padding:0; }
  .trust-strip{ padding:20px 0; }
  .trust-inner{ justify-content:flex-start; gap:20px 28px; }
  .class-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .subject-grid{ grid-template-columns:repeat(2,1fr); }
  .teacher-grid{ grid-template-columns:repeat(5,1fr); gap:8px; }
  .teacher-card{ padding:16px 8px; }
  .teacher-photo{ width:62px; height:62px; margin-bottom:10px; }
  .teacher-name{ font-size:14px; }
  .teacher-role{ font-size:11px; margin-bottom:8px; }
  .teacher-bio{ display:none; }
  .steps-row{ grid-template-columns:1fr; row-gap:28px; }
  .blog-grid{ grid-template-columns:1fr; }
  .exam-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .hero-cta-row .btn, .pw-banner-cta-row .btn{ flex:1 1 auto; }

  .header-inner{ height:90px; }
  .site-header.is-scrolled .header-inner{ height:80px; }
  .brand-mark-wrap{ height:68px; }
  .brand-mark{ max-width:230px; }
  .brand-word-main{ font-size:16px; }

  .final-cta{ padding-top:70px; }
  .phone-frame-cta{ transform:none; }

  .qr-row{ flex-wrap:wrap; }
  .store-row{ gap:12px; }
}

@media (max-width: 600px){
  .section{ padding:52px 0; }
  .section-head{ margin-bottom:32px; }
  .section-cta-row{ margin-top:32px; }
  .section-sub{ font-size:15.5px; }

  .pw-banner-content{ padding:36px 20px; gap:22px; }
  .pw-banner-sub{ font-size:15.5px; }
  .pw-eyebrow{ font-size:11.5px; }
  .pw-banner-cta-row{ gap:12px; margin-top:24px; }
  .hero-cta-row{ gap:12px; margin-top:24px; }

  .class-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .class-card{ padding:20px 16px; }
  .feature-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .feature-block{ padding:22px 16px; }
  .subject-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .subject-card{ padding:18px; }
  .teacher-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .teacher-card{ padding:20px 14px; }
  .teacher-photo{ width:70px; height:70px; margin-bottom:12px; }
  .exam-grid{ grid-template-columns:1fr; gap:14px; }
  .testi-card{ padding:22px; }
  .footer-inner{ grid-template-columns:1fr; text-align:left; }

  .learning-right{ grid-template-columns:1fr; }
  .mini-card:nth-child(2), .mini-card:nth-child(4){ transform:none; }
  .mini-card:nth-child(2):hover, .mini-card:nth-child(4):hover{ transform: translateY(-4px); }

  .app-showcase-visual{ transform: scale(0.72); min-height:420px; }
  .store-row{ flex-direction:column; align-items:flex-start; gap:14px; }

  .final-cta-copy h2{ font-size: clamp(26px, 7vw, 34px); }
  .final-cta-copy .hero-cta-row{ flex-direction:column; align-items:stretch; }
  .final-cta-copy .hero-cta-row .btn{ width:100%; }

  .parent-point{ gap:12px; }

  .back-to-top{ width:42px; height:42px; right:14px; bottom:14px; }
}

@media (max-width: 480px){
  .container{ padding:0 18px; }
  .class-grid{ grid-template-columns:1fr 1fr; }
  .exam-grid{ grid-template-columns:1fr; }
  .phone-frame{ width:230px; height:470px; }
  .phone-frame-lg{ width:230px; height:470px; }
  .stack-screen{ display:none; }
  .pw-banner-title{ font-size: clamp(26px, 8vw, 36px); line-height:1.2; }
  .pw-banner-content{ padding:32px 20px; }
  .pw-banner-photo{ max-width:220px; }

  .header-inner{ height:82px; }
  .site-header.is-scrolled .header-inner{ height:72px; }
  .brand-mark-wrap{ height:60px; }
  .brand-mark{ max-width:200px; }
  .brand-word-tag{ display:none; }

  .section-heading{ font-size: clamp(24px, 7.5vw, 32px); }
  .section-eyebrow{ font-size:11px; }

  .btn{ font-size:14px; padding:12px 20px; }
  .btn-lg{ padding:14px 22px; font-size:15px; }

  .trust-item{ font-size:13px; gap:8px; }
  .trust-item svg{ width:18px; height:18px; }

  .faq-question{ padding:16px 16px; font-size:14.5px; }
  .faq-answer p{ padding:0 16px 16px; font-size:13.5px; }

  .teacher-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .blog-body{ padding:18px; }
  .app-lesson-title{ font-size:12px; }
}

@media (max-width: 380px){
  .class-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .subject-grid{ grid-template-columns:1fr 1fr; }
  .teacher-grid{ grid-template-columns:1fr; }
  .phone-frame{ width:200px; height:410px; }
  .phone-frame-lg{ width:200px; height:410px; }
  .brand-mark-wrap{ height:54px; }
  .brand-mark{ max-width:180px; }
  .brand-word-main{ font-size:14.5px; }
  .header-actions{ gap:10px; }
}
/* ---------- QR code popup modal ---------- */
.qr-placeholder{
  border:none;
  padding:0;
  background:transparent;
}
.qr-placeholder:hover,
.qr-placeholder:focus-visible{
  transform: translateY(-2px);
  transition: transform 0.2s var(--ease);
}

.qr-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.qr-modal[hidden]{ display:none; }

.qr-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(32,32,32,0.55);
  backdrop-filter: blur(3px);
  animation: qrFadeIn 0.2s var(--ease);
}

.qr-modal-card{
  position:relative;
  z-index:1;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 30px;
  width:100%;
  max-width:340px;
  text-align:center;
  animation: qrPopIn 0.25s var(--ease);
}

.qr-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg-warm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}
.qr-modal-close:hover{ background:var(--bg-cream); }

.qr-modal-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.qr-modal-card h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:18px;
}

.qr-modal-code{
  width:100%;
  max-width:220px;
  margin:0 auto 18px;
  padding:14px;
  border:1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background:var(--white);
}
.qr-modal-code svg{ width:100%; height:auto; display:block; }

.qr-modal-hint{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:14px;
}

@keyframes qrFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes qrPopIn{
  from{ opacity:0; transform:scale(0.92) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

body.qr-modal-open{ overflow:hidden; }

/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:1200;
  height:3px; width:0%;
  background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow-soft) 100%);
  box-shadow: 0 0 10px rgba(247,185,0,0.5);
  transition: width 0.1s linear;
}

/* =========================================================
   BACK TO TOP
========================================================= */
.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:900;
  width:46px; height:46px; border-radius:50%;
  background: var(--navy); color: var(--yellow); border:1px solid rgba(255,253,247,0.15);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(12px) scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.25s var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--yellow); color: var(--navy); transform: translateY(-3px); }

/* =========================================================
   MODERN CARD INTERACTIONS (hover lift + glow border)
========================================================= */
.feature-block, .class-card, .subject-card, .teacher-card, .blog-card,
.exam-card, .testi-card, .mini-card, .app-showcase-visual, .faq-item{
  will-change: transform;
}

.feature-block, .subject-card, .class-card, .teacher-card, .blog-card, .mini-card{
  position:relative;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.feature-block::before, .subject-card::before, .class-card::before, .teacher-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: linear-gradient(135deg, var(--yellow) 0%, transparent 40%, transparent 60%, var(--yellow-soft) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity 0.35s var(--ease); pointer-events:none;
}
.feature-block:hover::before, .subject-card:hover::before, .class-card:hover::before, .teacher-card:hover::before{ opacity:1; }

.btn-primary, .btn-dark, .pw-cta{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-dark::after, .pw-cta::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.65s var(--ease);
  pointer-events:none;
}
.btn-primary:hover::after, .btn-dark:hover::after, .pw-cta:hover::after{ left:130%; }

/* subtle animated gradient glow behind the yellow eyebrow pill */
.pw-eyebrow, .section-eyebrow{ position:relative; }

@keyframes fadeSlideUp{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   CLASS TABS — modern switcher, one class shown at a time
========================================================= */
.class-tabs-section{ padding-top:20px; position:relative; }

.class-explorer{
  position:relative; background: var(--bg-warm); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border:1px solid rgba(32,43,58,0.06);
  padding: 34px 34px 40px; overflow:hidden;
}
.class-explorer::before{
  content:''; position:absolute; top:-90px; right:-90px; width:260px; height:260px;
  border-radius:50%; background: radial-gradient(circle, rgba(247,185,0,0.16) 0%, transparent 70%);
  pointer-events:none;
}
.class-explorer::after{
  content:''; position:absolute; bottom:-100px; left:-70px; width:220px; height:220px;
  border-radius:50%; background: radial-gradient(circle, rgba(32,43,58,0.06) 0%, transparent 70%);
  pointer-events:none;
}

.class-tabs-bar{
  position:relative; z-index:1; display:flex; gap:10px; overflow-x:auto; padding:2px 2px 22px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.class-tabs-bar::-webkit-scrollbar{ display:none; }
.class-tab-btn{
  position:relative; flex:0 0 auto; display:flex; align-items:center; gap:9px;
  padding:14px 24px; border-radius:999px; border:1.5px solid var(--border);
  background: var(--bg-cream); color: var(--ink); font-family:inherit;
  font-size:15px; font-weight:700; letter-spacing:-0.01em; cursor:pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.class-tab-btn:hover{ border-color: var(--yellow); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.class-tab-btn .tab-board-dot{
  width:7px; height:7px; border-radius:50%; background: var(--yellow); flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(247,185,0,0.25);
}
.class-tab-btn.is-active{
  background: linear-gradient(135deg, var(--navy) 0%, #2b3a50 100%);
  color: var(--bg-warm); border-color: var(--navy);
  box-shadow: 0 10px 26px rgba(32,43,58,0.28);
  transform: translateY(-2px) scale(1.03);
}
.class-tab-btn.is-active .tab-board-dot{ background: var(--yellow); box-shadow: 0 0 0 3px rgba(247,185,0,0.35); }

.class-panels{ position:relative; z-index:1; }
.class-panel{ display:none; }
.class-panel.is-active{ display:block; animation: fadeSlideUp 0.5s var(--ease); }

.class-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:34px; padding-bottom:26px; border-bottom:1.5px dashed rgba(32,43,58,0.14);
}
.class-panel-head-left{ display:flex; align-items:center; gap:20px; }
.class-panel-icon{
  position:relative; width:68px; height:68px; border-radius:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--navy) 0%, #2b3a50 100%);
  box-shadow: 0 12px 26px rgba(32,43,58,0.26);
}
.class-panel-icon::after{
  content:''; position:absolute; inset:-6px; border-radius:24px;
  border:1.5px dashed rgba(247,185,0,0.5); pointer-events:none;
}
.class-panel-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.class-panel-title{ font-size: clamp(26px, 3.4vw, 36px); font-weight:800; letter-spacing:-0.02em; color: var(--navy); line-height:1.1; }
.board-year-pill{
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-soft) 100%); color: var(--navy);
  font-size:12px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; box-shadow: var(--shadow-sm);
}
.class-panel-sub{ font-size:16px; color: var(--ink-soft); line-height:1.6; margin-top:8px; max-width:52ch; }

.class-panel-nav{ display:flex; gap:10px; flex-shrink:0; }
.class-panel-nav-btn{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border);
  background: var(--bg-cream); display:flex; align-items:center; justify-content:center;
  color: var(--navy); cursor:pointer; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease);
}
.class-panel-nav-btn:hover{ border-color: var(--yellow); background: var(--pastel-yellow-bg); transform: translateY(-2px); }
.class-panel-nav-btn:disabled{ opacity:0.3; cursor:not-allowed; transform:none; }

.class-panel-subjects-label{
  font-size:12.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.class-panel-subjects-label::before{
  content:''; width:16px; height:2px; background: var(--yellow); border-radius:2px;
}

.class-explorer .subject-grid{ gap:16px; }
.class-explorer .subject-card{ background: var(--bg-cream); border-color: rgba(32,43,58,0.06); }
.class-explorer .subject-card:hover{ background: var(--bg-warm); box-shadow: var(--shadow-md); }

@media (max-width: 640px){
  .class-explorer{ padding:22px 18px 28px; border-radius:var(--radius-md); }
  .class-tab-btn{ padding:11px 17px; font-size:13.5px; }
  .class-panel-icon{ width:54px; height:54px; border-radius:16px; }
  .class-panel-head{ margin-bottom:24px; padding-bottom:18px; }
  .class-panel-head-left{ gap:14px; }
}