/*
Theme Name: Kiddos Fitness
Theme URI: https://example.com/kiddos-fitness
Author: Kiddos Fitness
Author URI: https://example.com
Description: A vibrant, modern one-page landing theme for an online academy that coaches children's fitness trainers. Features an animated hero, count-up stats, illustrated lecture scenes, a mentors section, and Customizer slots so you can swap in real photos with zero code.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kiddos-fitness
Tags: one-page, landing, custom-colors, custom-logo, fitness, education
*/

:root{
  --bg:#FFFBF2; --surface:#FFFFFF; --ink:#16213E; --muted:#5C6478;
  --coral:#FF5C39; --coral-deep:#E8431F; --teal:#15B886; --sun:#FFC83D;
  --sky:#2DA8F5; --grape:#7C5CFC; --line:#ECE5D6;
  --shadow:0 18px 40px -18px rgba(22,33,62,.28);
  --shadow-sm:0 8px 22px -12px rgba(22,33,62,.25);
  --r-lg:30px; --r-md:20px; --r-sm:14px; --maxw:1160px;
  --display:"Fredoka",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--coral)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:1.4rem;font-weight:600}
.lead{font-size:1.13rem;color:var(--muted);max-width:34ch}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:700;font-size:1rem;padding:15px 26px;border-radius:999px;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 12px 24px -10px rgba(255,92,57,.7)}
.btn-primary:hover{transform:translateY(-2px);background:var(--coral-deep);box-shadow:0 18px 30px -10px rgba(255,92,57,.8)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-2px)}
/* shine sweep on filled buttons */
.btn-primary::before,.btn-light::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);transform:translateX(-130%);transition:transform .6s ease;z-index:-1}
.btn-primary:hover::before,.btn-light:hover::before{transform:translateX(130%)}
a:focus-visible,button:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:999px}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,251,242,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease,background .25s ease}
header.nav.scrolled{box-shadow:0 10px 30px -18px rgba(22,33,62,.4);background:rgba(255,251,242,.94)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink)}
.brand .mark{width:40px;height:40px;flex:0 0 40px}
.brand img.custom-logo{width:auto;height:42px}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-weight:600;font-size:.97rem;color:var(--muted);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:11px 20px;font-size:.95rem}

/* HERO */
.hero{position:relative;padding:70px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.3rem);margin:18px 0 20px}
.hero h1 .pop{position:relative;color:var(--coral);white-space:nowrap}
.hero h1 .pop svg{position:absolute;left:-4%;bottom:-14px;width:108%;height:18px}
.hero p.lead{max-width:42ch;font-size:1.18rem}
.hero-actions{display:flex;gap:14px;margin:30px 0 26px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:14px}
.avatars{display:flex}
.avatars span{width:40px;height:40px;border-radius:50%;border:3px solid var(--bg);margin-left:-12px;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:#fff;font-size:.95rem}
.avatars span:first-child{margin-left:0}
.trust small{font-size:.9rem;color:var(--muted);font-weight:500;line-height:1.35;display:block}
.trust small b{color:var(--ink);font-weight:700}
.hero-art{position:relative}
.hero-photo img{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;aspect-ratio:6/5;object-fit:cover}

/* floating illustration motion */
.float{animation:float 5s ease-in-out infinite}
.float.slow{animation-duration:7s}
.float.delay{animation-delay:-2.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.bounce{animation:bounce 2.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* hero load sequence (only when JS is on, so no-JS users still see content) */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
html.js .hero-copy>*{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both}
html.js .hero-copy>*:nth-child(1){animation-delay:.05s}
html.js .hero-copy>*:nth-child(2){animation-delay:.15s}
html.js .hero-copy>*:nth-child(3){animation-delay:.25s}
html.js .hero-copy>*:nth-child(4){animation-delay:.35s}
html.js .hero-copy>*:nth-child(5){animation-delay:.45s}
html.js .hero-art{animation:popIn .9s .2s cubic-bezier(.2,.7,.2,1) both}
html.js .hero h1 .pop svg path{stroke-dasharray:260;animation:draw .9s .65s ease both}

/* STATS */
.stats{background:var(--ink);border-radius:var(--r-lg);padding:38px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(255,200,61,.22),transparent 70%)}
.stat{text-align:center;position:relative;z-index:1}
.stat .num{font-family:var(--display);font-weight:700;font-size:2.6rem;color:#fff;line-height:1}
.stat .num.c{color:var(--sun)}.stat .num.t{color:var(--teal)}.stat .num.s{color:var(--coral)}.stat .num.k{color:var(--sky)}
.stat .lbl{color:#B9C0D4;font-size:.9rem;font-weight:600;margin-top:8px}

/* FEATURES */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature + .feature{margin-top:96px}
.feature.flip .feat-art{order:-1}
.feat-copy ul{list-style:none;margin:26px 0 30px;display:grid;gap:14px}
.feat-copy li{display:flex;gap:13px;align-items:flex-start;font-weight:500}
.feat-copy li .tick{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.feat-copy li .tick svg{width:14px;height:14px}
.feat-art{position:relative}
.scene-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line)}
.scene-frame img{width:100%;aspect-ratio:600/460;object-fit:cover;display:block}
.sticker{position:absolute;font-family:var(--display);font-weight:600;color:#fff;font-size:.85rem;padding:9px 16px;border-radius:999px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:7px;z-index:2}
.sticker.is-live{animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(232,67,31,.5)}50%{box-shadow:0 0 0 9px rgba(232,67,31,0)}}

/* SECTION HEADS */
.cur-head{text-align:center;max-width:640px;margin:0 auto 54px}
.cur-head .lead{margin:16px auto 0;max-width:52ch}

/* CURRICULUM */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 26px;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:28px;height:28px;color:#fff}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}
.card .mod{font-family:var(--display);font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.08em}

/* MENTORS */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mentor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;padding-bottom:24px;transition:transform .2s ease,box-shadow .2s ease}
.mentor:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.mentor-photo{aspect-ratio:1/1;background:#FFE7CE;overflow:hidden}
.mentor-photo img,.mentor-photo svg{width:100%;height:100%;object-fit:cover;display:block}
.mentor-name{margin:18px 24px 4px}
.mentor-role{margin:0 24px;color:var(--muted);font-size:.92rem;font-weight:600}

/* TESTIMONIAL */
.quote-wrap{background:linear-gradient(135deg,#FFF3DB,#FFE9DE);border-radius:var(--r-lg);padding:56px;position:relative;overflow:hidden}
.quote-wrap::before{content:"\201C";position:absolute;font-family:var(--display);font-size:13rem;line-height:1;color:var(--coral);opacity:.18;top:-10px;left:28px}
.quote-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;position:relative;z-index:1}
.quote-grid blockquote{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;letter-spacing:-.01em}
.quote-by{display:flex;align-items:center;gap:14px;margin-top:24px}
.quote-by .av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:#fff;font-size:1.2rem;background:var(--grape)}
.quote-by b{display:block}
.quote-by span{color:var(--muted);font-size:.92rem}
.quote-seal{width:150px;height:150px;flex:0 0 150px;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* FINAL CTA */
.cta-band{background:var(--coral);border-radius:var(--r-lg);padding:64px 40px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#FFE3DA;font-size:1.15rem;max-width:46ch;margin:0 auto 30px}
.cta-band .btn-light{font-size:1.05rem;padding:17px 32px}
.cta-band .blob{position:absolute;border-radius:50%;opacity:.5}
.cta-band .b1{width:200px;height:200px;background:var(--sun);left:-60px;bottom:-70px;animation:float 8s ease-in-out infinite}
.cta-band .b2{width:150px;height:150px;background:var(--coral-deep);right:-40px;top:-50px;opacity:.6;animation:float 6s ease-in-out infinite reverse}

/* FOOTER */
footer.site-footer{padding:60px 0 40px;border-top:1px solid var(--line);margin-top:96px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px}
.foot-links{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h4{font-family:var(--body);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a{display:block;color:var(--ink);font-weight:600;font-size:.95rem;margin-bottom:10px;opacity:.85}
.foot-col a:hover{color:var(--coral-deep);opacity:1}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.grid-3 .reveal:nth-child(2),.team-grid .reveal:nth-child(2){transition-delay:.08s}
.grid-3 .reveal:nth-child(3),.team-grid .reveal:nth-child(3){transition-delay:.16s}
.grid-3 .reveal:nth-child(4){transition-delay:.24s}
.grid-3 .reveal:nth-child(5){transition-delay:.32s}
.grid-3 .reveal:nth-child(6){transition-delay:.4s}

/* RESPONSIVE */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-art{max-width:520px;margin:0 auto}
  .feature{grid-template-columns:1fr;gap:34px}
  .feature.flip .feat-art{order:0}
  .feat-art{max-width:560px;margin:0 auto;width:100%}
  .quote-grid{grid-template-columns:1fr;gap:24px}
  .quote-seal{display:none}
}
@media (max-width:760px){
  .nav-links{display:none}
  .grid-3,.team-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
  .section{padding:70px 0}
  .quote-wrap{padding:38px 26px}
  .cta-band{padding:48px 24px}
}
@media (max-width:430px){
  .hero-actions .btn{width:100%}
  .nav-cta .btn-ghost{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  html.js .hero-copy>*,html.js .hero-art{opacity:1;transform:none}
}