/* ============================================================
   Musician Teacher — shared design system
   Brand: Fredoka + Poppins · blue #0FA3FB / orange #FF8B00
   Built with ui-ux-pro-max rules: accessible, rounded/playful,
   soft depth, spring press, reduced-motion aware, responsive.
   ============================================================ */

:root{
  --blue:#0FA3FB; --blue-dark:#0B7FC7; --blue-soft:#E6F4FE;
  --orange:#FF8B00; --orange-dark:#DB7500; --orange-soft:#FFF1DF;
  --graphite:#3F3A36; --gray:#7A7268;
  --cloud:#F1F8FF; --peach:#FFE9D6; --white:#FFFFFF;
  --line:#E6DFD8; --line-blue:#E1EBF5;
  --success:#2E9E5B; --error:#D64545;

  --font-display:'Fredoka', sans-serif;
  --font-body:'Poppins', sans-serif;

  --radius-sm:12px; --radius:18px; --radius-lg:28px; --radius-pill:100px;
  --maxw:1160px;

  /* soft, clay-lite depth (not heavy) */
  --shadow-xs:0 2px 8px -4px rgba(63,58,54,.18);
  --shadow-sm:0 10px 24px -16px rgba(63,58,54,.35);
  --shadow-md:0 20px 44px -24px rgba(63,58,54,.30);
  --shadow-blue:0 14px 30px -14px rgba(15,163,251,.55);
  --shadow-orange:0 14px 30px -14px rgba(255,139,0,.55);

  --dur:.2s; --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--graphite);
  background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--graphite); margin:0; line-height:1.15;}
p{margin:0;}
a{color:var(--blue-dark); text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0;}

/* focus visibility (accessibility) */
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px;}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200; background:var(--blue); color:#fff;
  padding:10px 18px; border-radius:var(--radius-pill); font-weight:600; font-size:14px;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:16px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.center{text-align:center;}
.muted{color:var(--gray);}

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:14px 28px; border-radius:var(--radius-pill); border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97);}          /* spring squish */
.btn.primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-blue);}
.btn.primary:hover{background:var(--blue-dark);}
.btn.secondary{background:var(--orange); color:#fff; box-shadow:var(--shadow-orange);}
.btn.secondary:hover{background:var(--orange-dark);}
.btn.ghost{background:transparent; color:var(--graphite); border:2px solid var(--line-blue);}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue-dark);}
.btn.white{background:#fff; color:var(--blue-dark); box-shadow:var(--shadow-sm);}
.btn.sm{padding:11px 22px; font-size:14px;}
.btn.lg{padding:16px 34px; font-size:16px;}

/* ---------------- Small bits ---------------- */
.kicker{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:2.5px; color:var(--blue-dark); text-transform:uppercase;}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:var(--radius-pill); background:var(--cloud); color:var(--blue-dark);}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--orange);}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--radius-pill); background:var(--orange-soft); color:var(--orange-dark);}

/* ---------------- Header / Nav ---------------- */
header.site{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line-blue);}
.navbar{display:flex; align-items:center; justify-content:space-between; height:74px; gap:16px;}
.logo{font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:.2px; flex-shrink:0;}
.logo .b{color:var(--blue);} .logo .o{color:var(--orange);}
.navlinks{display:flex; gap:2px; align-items:center;}
.navlinks a.nav{font-size:14.5px; font-weight:500; color:var(--graphite); padding:9px 13px; border-radius:10px; opacity:.85; transition:background var(--dur) var(--ease), opacity var(--dur) var(--ease);}
.navlinks a.nav:hover{background:var(--cloud); opacity:1;}
.navlinks a.nav[aria-current="page"]{color:var(--blue-dark); opacity:1; background:var(--blue-soft);}
.nav-cta{display:flex; gap:10px; align-items:center; margin-left:8px;}
.hamburger{display:none; background:none; border:none; cursor:pointer; padding:10px; border-radius:10px;}
.hamburger:hover{background:var(--cloud);}
.hamburger span{display:block; width:24px; height:2.5px; background:var(--graphite); border-radius:2px; margin:5px 0; transition:var(--dur);}

/* ---------------- Section base ---------------- */
section{scroll-margin-top:90px;}
.block{padding:88px 0;}
.block.tight{padding:64px 0;}
.bg-cloud{background:var(--cloud);}
.bg-peach{background:var(--peach);}
.bg-gradient{background:linear-gradient(135deg, var(--cloud) 0%, var(--peach) 100%);}
.sec-head{max-width:660px; margin:0 auto 52px; text-align:center;}
.sec-head.left{margin-left:0; text-align:left;}
.sec-head h2{font-size:38px; font-weight:600; margin:12px 0 14px;}
.sec-head p{font-size:16.5px; color:var(--gray);}

/* waveform divider */
.waverule{display:block; width:100%; height:20px; opacity:.5;}

/* ---------------- Page banner (sub-pages) ---------------- */
.page-hero{background:linear-gradient(135deg, var(--cloud) 0%, var(--peach) 100%); border-bottom:1px solid var(--line-blue); position:relative; overflow:hidden;}
.page-hero .wrap{position:relative; z-index:2; padding:64px 24px 66px; text-align:center;}
.page-hero h1{font-size:46px; font-weight:700; letter-spacing:-.5px;}
.page-hero h1 .b{color:var(--blue);} .page-hero h1 .o{color:var(--orange);}
.page-hero p{font-size:17px; color:var(--gray); max-width:600px; margin:18px auto 0;}
.crumbs{font-size:13px; color:var(--gray); margin-bottom:16px;}
.crumbs a{color:var(--gray);} .crumbs a:hover{color:var(--blue-dark);}

/* decorative floating blobs */
.blob{position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; z-index:1; pointer-events:none;}
.blob.b1{width:220px; height:220px; background:#BEE6FF; top:-60px; right:-40px;}
.blob.b2{width:160px; height:160px; background:#FFD6AE; bottom:-50px; left:-30px;}

/* ---------------- Home hero ---------------- */
.hero{background:linear-gradient(135deg, var(--cloud) 0%, var(--peach) 100%); border-bottom:1px solid var(--line-blue); position:relative; overflow:hidden;}
.hero .wrap{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:74px 0 84px;}
.hero h1{font-size:54px; font-weight:700; letter-spacing:-.5px;}
.hero h1 .b{color:var(--blue);} .hero h1 .o{color:var(--orange);}
.hero .sub{font-size:18px; color:var(--gray); margin:22px 0 30px; max-width:520px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-trust{display:flex; align-items:center; gap:12px; margin-top:26px; font-size:13.5px; color:var(--gray);}
.avatars{display:flex;}
.avatars span{width:34px; height:34px; border-radius:50%; border:2.5px solid #fff; margin-left:-10px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:13px; color:#fff;}
.avatars span:first-child{margin-left:0;}
.hero-art{display:flex; justify-content:center;}
.hero-art svg{width:100%; max-width:460px; height:auto; filter:drop-shadow(0 24px 44px rgba(63,58,54,.14));}

/* ---------------- Stats ---------------- */
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat{text-align:center; background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius); padding:26px 16px; box-shadow:var(--shadow-xs);}
.stat .num{font-family:var(--font-display); font-weight:700; font-size:36px;}
.stat .num .c1{color:var(--blue);} .stat .num .c2{color:var(--orange);}
.stat .lbl{font-size:13.5px; color:var(--gray); margin-top:2px;}

/* ---------------- Steps (how it works) ---------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:34px 30px; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.step:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.step .n{font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff; width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--blue); margin-bottom:20px; box-shadow:var(--shadow-blue);}
.step:nth-child(2) .n{background:var(--orange); box-shadow:var(--shadow-orange);}
.step:nth-child(3) .n{background:var(--blue-dark);}
.step h3{font-size:21px; font-weight:600; margin-bottom:10px;}
.step p{font-size:14.5px; color:var(--gray);}

/* ---------------- Category cards ---------------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.cat{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-blue); background:#fff; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display:flex; flex-direction:column;}
.cat:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.cat .top{height:120px; display:flex; align-items:center; justify-content:center;}
.cat .top svg{width:56px; height:56px;}
.cat .body{padding:22px 22px 26px;}
.cat h3{font-size:19px; font-weight:600; margin-bottom:8px;}
.cat p{font-size:13.5px; color:var(--gray); margin-bottom:14px;}
.cat .more{font-size:14px; font-weight:600; color:var(--blue-dark); display:inline-flex; align-items:center; gap:6px;}
.cat:hover .more{gap:10px;}

/* ---------------- Course cards (image + text) ---------------- */
.course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.course{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-blue); background:#fff; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.course:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.course .cover{height:150px; display:flex; align-items:center; justify-content:center; position:relative;}
.course .cover svg{width:64px; height:64px;}
.course .cover .tag{position:absolute; top:12px; left:12px;}
.course .body{padding:22px;}
.course h3{font-size:18px; font-weight:600; margin-bottom:8px;}
.course p{font-size:13.5px; color:var(--gray); margin-bottom:16px;}
.course .row{display:flex; align-items:center; justify-content:space-between;}
.course .lvl{font-size:12.5px; color:var(--gray); display:flex; align-items:center; gap:6px;}

/* ---------------- Instruments quick grid ---------------- */
.inst-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.inst{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius); padding:26px 18px; text-align:center; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.inst:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.inst .ic{width:52px; height:52px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--cloud);}
.inst:nth-child(even) .ic{background:var(--peach);}
.inst .name{font-family:var(--font-display); font-weight:600; font-size:16px;}
.inst .lvl{font-size:12px; color:var(--gray); margin-top:2px;}

/* ---------------- Feature grid (why choose) ---------------- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feature{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.feature:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.feature .fic{width:54px; height:54px; border-radius:16px; background:var(--cloud); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.feature:nth-child(3n+2) .fic{background:var(--peach);}
.feature h3{font-size:19px; font-weight:600; margin-bottom:8px;}
.feature p{font-size:14.5px; color:var(--gray);}

/* ---------------- Testimonials ---------------- */
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.tcard{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-xs);}
.tcard .stars{color:var(--orange); font-size:16px; letter-spacing:2px; margin-bottom:14px;}
.tcard .quote{font-size:15px; color:var(--graphite); margin-bottom:20px;}
.tcard .who{display:flex; align-items:center; gap:12px;}
.tcard .who .pic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:#fff; font-size:16px; flex-shrink:0;}
.tcard .who .meta b{font-family:var(--font-display); font-weight:600; font-size:14.5px; display:block;}
.tcard .who .meta span{font-size:12.5px; color:var(--gray);}

/* ---------------- Team / teachers ---------------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.tmember{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:26px 22px; text-align:center; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.tmember:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.tmember .ava{width:92px; height:92px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:32px; color:#fff;}
.tmember h3{font-size:18px; font-weight:600;}
.tmember .role{font-size:13px; color:var(--orange-dark); font-weight:600; margin:2px 0 10px;}
.tmember p{font-size:13px; color:var(--gray);}
.tmember .tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px;}

/* ---------------- Pricing ---------------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.plan{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:34px 30px; display:flex; flex-direction:column; box-shadow:var(--shadow-xs);}
.plan.featured{border:2px solid var(--orange); position:relative; box-shadow:var(--shadow-md);}
.plan .flag{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--orange); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:6px 15px; border-radius:var(--radius-pill);}
.plan h3{font-size:20px; font-weight:600;}
.plan .price{font-family:var(--font-display); font-weight:700; font-size:44px; margin:14px 0 2px;}
.plan .price small{font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--gray);}
.plan .desc{font-size:13.5px; color:var(--gray); margin-bottom:20px;}
.plan ul{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:11px;}
.plan li{font-size:14px; display:flex; gap:10px; align-items:flex-start;}
.plan li svg{flex-shrink:0; margin-top:3px;}
.plan .btn{width:100%; margin-top:auto;}

/* comparison table */
.cmp{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius); overflow:hidden;}
.cmp th, .cmp td{padding:15px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--line-blue);}
.cmp th{font-family:var(--font-display); font-weight:600; background:var(--cloud);}
.cmp td:not(:first-child){text-align:center;}
.cmp tr:last-child td{border-bottom:none;}

/* ---------------- FAQ accordion ---------------- */
.faq-list{max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
details.faq{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius); padding:4px 24px; box-shadow:var(--shadow-xs);}
details.faq summary{list-style:none; cursor:pointer; padding:20px 0; font-family:var(--font-display); font-weight:500; font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary .plus{flex-shrink:0; width:24px; height:24px; position:relative;}
details.faq summary .plus::before, details.faq summary .plus::after{content:""; position:absolute; background:var(--blue); border-radius:2px;}
details.faq summary .plus::before{top:11px; left:3px; right:3px; height:2.5px;}
details.faq summary .plus::after{left:11px; top:3px; bottom:3px; width:2.5px; transition:transform var(--dur) var(--ease);}
details.faq[open] summary .plus::after{transform:scaleY(0);}
details.faq p{padding:0 0 22px; font-size:14.5px; color:var(--gray);}

/* ---------------- Blog ---------------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.post{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display:flex; flex-direction:column;}
.post:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.post .cover{height:160px; display:flex; align-items:center; justify-content:center;}
.post .cover svg{width:60px; height:60px;}
.post .body{padding:24px; display:flex; flex-direction:column; flex:1;}
.post .cat-tag{font-size:11.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--blue-dark); margin-bottom:10px;}
.post h3{font-size:18px; font-weight:600; margin-bottom:10px; line-height:1.3;}
.post p{font-size:13.5px; color:var(--gray); margin-bottom:16px;}
.post .meta{margin-top:auto; font-size:12.5px; color:var(--gray); display:flex; gap:12px;}

/* ---------------- Contact form ---------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:start;}
.info-card{background:var(--cloud); border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:34px;}
.info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.info-row .ic{width:44px; height:44px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-xs);}
.info-row b{font-family:var(--font-display); font-size:15px; display:block; margin-bottom:2px;}
.info-row span{font-size:13.5px; color:var(--gray);}
.form-card{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-sm);}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px;}
.field label .req{color:var(--error);}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--graphite);
  padding:13px 15px; border:1.5px solid var(--line-blue); border-radius:var(--radius-sm); background:var(--white);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{border-color:#C7D8EC;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-soft);}
.field textarea{resize:vertical; min-height:120px;}
.field .help{font-size:12px; color:var(--gray); margin-top:6px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-note{font-size:12.5px; color:var(--gray); margin-top:14px;}

/* ---------------- CTA band ---------------- */
.ctaband{padding:96px 0;}
.ctabox{background:linear-gradient(135deg, var(--blue) 0%, #37B6FF 100%); border-radius:var(--radius-lg); padding:62px 48px; text-align:center; color:#fff; position:relative; overflow:hidden;}
.ctabox h2{color:#fff; font-size:40px; font-weight:700; margin-bottom:14px;}
.ctabox p{color:rgba(255,255,255,.92); font-size:17px; max-width:520px; margin:0 auto 30px;}
.ctabox .fineprint{margin-top:18px; font-size:13px; color:rgba(255,255,255,.85);}
.ctabox .wavebg{position:absolute; left:0; right:0; bottom:-6px; opacity:.28; pointer-events:none;}

/* ---------------- Footer ---------------- */
footer.site{background:#fff; border-top:1px solid var(--line-blue); padding:60px 0 34px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px;}
.foot-brand .logo{font-size:22px; margin-bottom:14px;}
.foot-brand p{font-size:14px; color:var(--gray); max-width:280px;}
.foot-col h4{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray); margin-bottom:16px;}
.foot-col a{display:block; font-size:14px; color:var(--graphite); opacity:.82; padding:6px 0;}
.foot-col a:hover{opacity:1; color:var(--blue-dark);}
.foot-bottom{border-top:1px solid var(--line-blue); padding-top:26px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; color:var(--gray); flex-wrap:wrap;}
.socials{display:flex; gap:10px;}
.socials a{width:36px; height:36px; border-radius:50%; background:var(--cloud); display:flex; align-items:center; justify-content:center;}
.socials a:hover{background:var(--peach);}

/* ---------------- Scroll reveal ---------------- */
.reveal{transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.pre{opacity:0; transform:translateY(22px);}   /* JS adds .pre so no-JS keeps content visible */
.reveal.in{opacity:1; transform:none;}

/* ---------------- Responsive ---------------- */
@media(max-width:1024px){
  .navlinks{display:none; position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--line-blue); padding:14px 20px 22px; gap:2px; box-shadow:var(--shadow-md);}
  .navlinks.open{display:flex;}
  .navlinks a.nav{padding:13px 12px; font-size:16px;}
  .nav-cta{margin-left:0; margin-top:10px; flex-direction:column; align-items:stretch;}
  .hamburger{display:block;}
  .cat-grid, .inst-grid, .team-grid{grid-template-columns:repeat(2,1fr);}
  .course-grid, .features, .tgrid, .blog-grid, .steps, .pgrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:34px; padding:54px 0 62px;}
  .hero-art{order:-1;} .hero-art svg{max-width:340px;}
  .hero h1{font-size:44px;}
  .contact-grid{grid-template-columns:1fr; gap:28px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px;}
}
@media(max-width:680px){
  .block{padding:60px 0;}
  .statgrid{grid-template-columns:repeat(2,1fr);}
  .steps, .course-grid, .features, .tgrid, .blog-grid, .pgrid, .cat-grid, .inst-grid, .team-grid{grid-template-columns:1fr;}
  .hero h1{font-size:36px;} .page-hero h1{font-size:34px;}
  .sec-head h2, .ctabox h2{font-size:29px;}
  .form-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}

/* ============================================================
   Enhancements — richer visuals + tasteful animation
   ============================================================ */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-18px)}}
@keyframes gshift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shine{0%{left:-60%}60%,100%{left:130%}}
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}

/* animated hero gradient + drifting blobs + floating notes */
.hero, .page-hero{background-size:170% 170%; animation:gshift 18s ease-in-out infinite alternate;}
.blob.b1{animation:drift 11s ease-in-out infinite;}
.blob.b2{animation:drift 14s ease-in-out infinite reverse;}
.float-note{position:absolute; z-index:1; opacity:.55; animation:floaty 6s ease-in-out infinite; pointer-events:none;}
.float-note.n2{animation-duration:7.5s; animation-delay:-2s;}
.float-note.n3{animation-duration:5.5s; animation-delay:-1s;}

/* shine sweep on primary buttons */
.btn.primary{position:relative; overflow:hidden;}
.btn.primary::after{content:""; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg);}
.btn.primary:hover::after{animation:shine .8s ease;}

/* light trust bar */
.trustbar{background:var(--cloud); border-bottom:1px solid var(--line-blue);}
.trustbar .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:center; padding:16px 24px; font-size:14px; color:var(--gray); text-align:center;}
.trustbar b{color:var(--graphite); font-family:var(--font-display); font-weight:600;}
.trustbar .sep{color:var(--orange); font-weight:700;}

/* trust badges row */
.badgerow{display:flex; flex-wrap:wrap; gap:14px 20px; justify-content:center;}
.badgerow .tb{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-pill); padding:11px 20px; box-shadow:var(--shadow-xs);}

/* text + image split */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:50px; align-items:center;}
.split.reverse .split-media{order:-1;}
.img-frame{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-blue); background:#fff; box-shadow:var(--shadow-md);}
.img-frame img{width:100%; height:auto; display:block;}

/* check lists from copy */
.list-check{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:15px;}
.list-check li{display:flex; gap:12px; font-size:15.5px; color:var(--gray);}
.list-check li svg{flex-shrink:0; margin-top:4px;}
.list-check li b{color:var(--graphite); font-weight:600;}

/* founder note */
.founder{max-width:840px; margin:0 auto; background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:36px 40px; display:flex; gap:30px; align-items:center; box-shadow:var(--shadow-sm);}
.founder .por{width:120px; height:120px; border-radius:20px; flex-shrink:0; overflow:hidden; box-shadow:var(--shadow-sm);}
.founder .por img{width:100%; height:100%; object-fit:cover;}
.founder blockquote{margin:0; font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.45; color:var(--graphite);}
.founder .by{font-size:14px; color:var(--gray); margin-top:12px; font-weight:500;}

/* quotes marquee (supplementary) */
.marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-track{display:flex; gap:16px; width:max-content; animation:marquee 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.qchip{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-pill); padding:12px 22px; font-size:14px; white-space:nowrap; box-shadow:var(--shadow-xs); color:var(--gray);}
.qchip b{color:var(--blue-dark);}

/* filter chips + search */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px;}
.chip{font-family:var(--font-body); font-weight:500; font-size:13.5px; padding:9px 18px; border-radius:var(--radius-pill); border:1.5px solid var(--line-blue); background:#fff; color:var(--graphite); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.chip:hover{border-color:var(--blue);}
.chip.active{background:var(--blue); color:#fff; border-color:var(--blue);}
.searchbar{max-width:440px; margin:0 auto 26px; position:relative;}
.searchbar input{width:100%; padding:13px 16px 13px 46px; border:1.5px solid var(--line-blue); border-radius:var(--radius-pill); font-family:var(--font-body); font-size:15px;}
.searchbar input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-soft);}
.searchbar svg{position:absolute; left:17px; top:50%; transform:translateY(-50%);}

/* newsletter */
.newsletter{max-width:660px; margin:0 auto; text-align:center; background:var(--cloud); border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:44px 40px;}
.newsletter form{display:flex; gap:10px; max-width:440px; margin:22px auto 0;}
.newsletter input{flex:1; padding:14px 18px; border:1.5px solid var(--line-blue); border-radius:var(--radius-pill); font-size:15px; font-family:var(--font-body);}
.newsletter input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-soft);}

/* whatsapp button */
.btn.whatsapp{background:#25D366; color:#fff; box-shadow:0 10px 22px -10px rgba(37,211,102,.7);}
.btn.whatsapp:hover{background:#1EB457;}

/* video testimonials */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.video-card{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-blue); box-shadow:var(--shadow-xs); background:#fff; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.video-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.video-card img{width:100%; display:block;}
.video-card .lbl{padding:16px 20px; font-family:var(--font-display); font-weight:500; font-size:15px;}
.video-card .lbl span{display:block; font-family:var(--font-body); font-size:12.5px; color:var(--gray); margin-top:2px;}

/* curriculum levels */
.levels{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.level{background:#fff; border:1px solid var(--line-blue); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-xs); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.level:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.level h3{font-size:20px; margin:14px 0 8px;}
.level p{font-size:14px; color:var(--gray);}

/* featured blog post */
.featured-post{display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--line-blue); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); margin-bottom:40px;}
.featured-post .fp-media{min-height:280px; display:flex; align-items:center; justify-content:center;}
.featured-post .fp-media svg{width:96px; height:96px;}
.featured-post .fp-body{padding:42px;}
.featured-post .fp-body h3{font-size:26px; margin:12px 0 12px;}
.featured-post .fp-body p{color:var(--gray); font-size:15.5px; margin-bottom:22px;}

/* card grids reveal on filter */
.hidden{display:none !important;}

@media(max-width:900px){
  .split{grid-template-columns:1fr; gap:32px;}
  .split.reverse .split-media{order:0;}
  .video-grid, .levels{grid-template-columns:1fr;}
  .founder{flex-direction:column; text-align:center; padding:32px 26px;}
  .featured-post{grid-template-columns:1fr;}
  .featured-post .fp-media{min-height:200px;}
}
@media(max-width:520px){
  .newsletter form{flex-direction:column;}
}

/* ---------------- Reduced motion ---------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .reveal, .reveal.pre{opacity:1 !important; transform:none !important;}
}