/* ===========================================
   PLAYTHRU MASTER STYLES (Patch v12)
   This file replaces your existing style.css.
   Includes base tokens + section themes + responsive spacing.
   =========================================== */

/* --- COLOR TOKENS --- */
:root {
  --clr-purple:#7C4DFF;
  --clr-teal:#00C4CC;
  --clr-orange:#FF9B32;
  --clr-dark:#0F0F1A;
  --clr-light:#FFFFFF;
  --radius-lg:1.25rem;
  --radius-md:.75rem;
  --radius-sm:.4rem;
  --fs-h1:clamp(2.25rem,5vw,3.5rem);
  --fs-h2:clamp(1.75rem,4vw,2.5rem);
  --fs-h3:clamp(1.25rem,3vw,1.75rem);
  --fs-body:1rem;
  --space-section-mobile:4.5rem;
  --space-section-desktop:7rem;
}

html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',sans-serif;font-size:var(--fs-body);line-height:1.5;background:var(--clr-light);color:var(--clr-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img{max-width:100%;height:auto;display:block;}

.top-nav{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid rgba(0,0,0,.08);}
.brand-logo{height:48px;width:auto;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;}
.nav-links{display:flex;gap:1rem;}
.nav-links a{text-decoration:none;color:var(--clr-dark);font-weight:600;font-family:'Poppins',sans-serif;}

.hero{min-height:90vh;display:grid;place-items:center;text-align:center;padding:5rem 1rem 3rem;position:relative;overflow:hidden;}
.playful-hero{
  background:
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' x='0' y='0' fill='%237C4DFF' fill-opacity='.08'/%3E%3C/svg%3E") repeat,
    linear-gradient(135deg,var(--clr-purple) 0%,var(--clr-teal) 100%);
  color:var(--clr-light);
}
.hero-logo{width:160px;margin-inline:auto;margin-bottom:1.25rem;}
.hero-logo-wrap{display:inline-block;position:relative;}
.animated-logo{animation:floaty 3.5s ease-in-out infinite,glowPulse 2.5s ease-in-out infinite alternate;}
.enhanced-entry{opacity:0;animation:logoEntry .8s ease-out forwards, floaty 3.5s ease-in-out infinite 1s, glowPulse 2.5s ease-in-out infinite alternate 1s;}
@keyframes logoEntry{0%{opacity:0;transform:scale(.6) rotate(-8deg);}70%{opacity:1;transform:scale(1.05) rotate(2deg);}100%{opacity:1;transform:scale(1) rotate(0deg);}}
@keyframes floaty{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.02);}}
@keyframes glowPulse{0%{filter:drop-shadow(0 0 0 rgba(255,255,255,.0));}100%{filter:drop-shadow(0 0 12px rgba(255,255,255,.75));}}

/* HERO tagline refinements */
.hero-tagline-main,
.hero h1.hero-tagline-main{font-family:'Poppins',sans-serif;font-weight:800;line-height:1.05;letter-spacing:.5px;margin:.25em 0;text-shadow:0 2px 8px rgba(0,0,0,.35);}
.hero-tagline-sub,
.hero-sub,
.hero-tagline-sub.pro-sub{font-size:1.25rem;font-weight:600;letter-spacing:.2px;margin:.25em auto;max-width:28ch;}
.hero-tagline-emp,
.pro-emp{font-size:1.05rem;font-style:italic;font-weight:500;opacity:.95;max-width:40ch;margin:1em auto 2em;}
@media (max-width:480px){
  .hero-tagline-sub,.hero-sub{font-size:1.05rem;}
  .hero-tagline-emp,.pro-emp{font-size:.95rem;}
}

/* CTA */
.cta-btn{display:inline-block;padding:.9rem 2rem;font-size:1.125rem;font-weight:700;font-family:'Poppins',sans-serif;color:var(--clr-light);background:var(--clr-orange);border:none;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;}
.cta-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 4px 16px rgba(0,0,0,.25);}

.scroll-cue{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);}
.scroll-cue span{width:24px;height:36px;border:2px solid var(--clr-light);border-radius:12px;display:inline-block;position:relative;}
.scroll-cue span::after{content:'';position:absolute;left:50%;top:8px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--clr-light);animation:scrollDot 1.5s infinite;}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0);}50%{opacity:1;transform:translate(-50%,8px);}100%{opacity:0;transform:translate(-50%,16px);}}

/* SECTION BASE */
.section{padding:var(--space-section-mobile) 1rem;position:relative;}
.section-inner{max-width:1200px;margin-inline:auto;}
.section-inner.narrow{max-width:700px;}
@media (min-width:768px){
  .section{padding:var(--space-section-desktop) 1rem;}
  .section-inner.narrow{max-width:720px;}
}
.section h2{font-family:'Poppins',sans-serif;font-size:var(--fs-h2);margin-top:0;margin-bottom:.75em;text-align:center;}
.section-inner.narrow p{max-width:60ch;margin-inline:auto;}

/* ALT BACKGROUNDS */
.alt-bg{background:rgba(124,77,255,.05);}
.alt-bg-light{background:rgba(0,196,204,.05);}
.alt-bg-light2{background:rgba(255,155,50,.10);}

/* LEVEL CARDS */
.levels .level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem;margin-top:2rem;}
.level-card{background:var(--clr-light);border:2px solid var(--clr-purple);border-radius:var(--radius-lg);padding:2rem 1.5rem;text-align:center;transition:transform .15s,box-shadow .15s;}
.level-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 4px 20px rgba(0,0,0,.15);}
.level-card h3{font-family:'Poppins',sans-serif;font-size:var(--fs-h3);margin:0 0 .5rem;color:var(--clr-purple);}
.level-card span{font-size:.9em;color:var(--clr-dark);opacity:.8;}

/* WHY MATTERS */
.why-matters ul{list-style:none;margin:0;padding:0;}
.why-points li{margin-bottom:1.25rem;font-size:1.125rem;}
.why-points strong{color:var(--clr-purple);}

/* JOIN FORM */
.join form{display:grid;gap:1.25rem;margin-top:2rem;}
.join label{display:grid;gap:.5rem;font-weight:600;font-family:'Poppins',sans-serif;}
.join input,.join select,.join textarea{padding:.75rem;font-size:1rem;font-family:'Inter',sans-serif;border:2px solid var(--clr-purple);border-radius:var(--radius-md);background:var(--clr-light);color:var(--clr-dark);}
.join .contact-alt{margin-top:2rem;text-align:center;font-size:1rem;}
.join .contact-alt a{color:var(--clr-purple);text-decoration:none;font-weight:700;}
.hidden{display:none;}

/* COMING SOON */
.coming-soon{background:var(--clr-purple);color:var(--clr-light);text-align:center;}
.coming-soon p{font-size:1.25rem;}

/* FOOTER */
.site-footer{background:var(--clr-dark);color:var(--clr-light);text-align:center;padding:4rem 1rem;}
.footer-logo{width:100px;margin-inline:auto;margin-bottom:1.5rem;}
.footer-nav{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.footer-nav a{color:var(--clr-light);text-decoration:none;font-family:'Poppins',sans-serif;font-weight:600;}
.footer-contact{margin-bottom:1rem;}
.footer-contact a{color:var(--clr-teal);text-decoration:none;}
.footer-copy{font-size:.875rem;opacity:.8;}

/* DIVIDERS (existing) */
.divider-bottom{position:absolute;left:0;right:0;bottom:0;height:60px;overflow:hidden;line-height:0;}
.divider-bottom.wave-purple-teal::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' fill-opacity='1' d='M0,64L80,90.7C160,117,320,171,480,181.3C640,192,800,160,960,133.3C1120,107,1280,85,1360,74.7L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E") center/cover no-repeat;}
.divider-bottom.wave-teal-light::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M0,0L48,21.3C96,43,192,85,288,112C384,139,480,149,576,149.3C672,149,768,139,864,144C960,149,1056,171,1152,181.3C1248,192,1344,192,1392,192H1440V0H1392C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0Z'/%3E%3C/svg%3E") center/cover no-repeat;}
.divider-bottom.wave-orange-light::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M0,96L60,101.3C120,107,240,117,360,133.3C480,149,600,171,720,181.3C840,192,960,192,1080,181.3C1200,171,1320,149,1380,138.7L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'/%3E%3C/svg%3E") center/cover no-repeat;}
.divider-bottom.angle-purple::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,var(--clr-purple) 51%);}
.divider-bottom.angle-teal::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom left,transparent 49%,var(--clr-teal) 51%);}

/* ===========================================
   SECTION THEMES: Mission / Motto / Vision
   =========================================== */

/* Mission pixel gradient */
#mission{position:relative;padding:0;background:transparent;overflow:hidden;}
#mission .section-inner{position:relative;}
#mission::before{content:"";position:absolute;top:0;left:0;right:0;height:80px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%237C4DFF' fill-opacity='.85' d='M0,160 L1440,0 L1440,160 Z'/%3E%3C/svg%3E") center/cover no-repeat;}
#mission::after{content:"";position:absolute;bottom:0;left:0;right:0;height:48px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 48' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='12' height='48' x='0' y='0' fill='%2300C4CC' fill-opacity='.25'/%3E%3C/svg%3E") repeat-x;opacity:.25;}
#mission .section-inner{padding-top:calc(var(--space-section-mobile) + 40px);padding-bottom:var(--space-section-mobile);background:linear-gradient(135deg,rgba(124,77,255,.18) 0%,rgba(0,196,204,.18) 100%),url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237C4DFF' stroke-opacity='.15' stroke-width='1'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3C/g%3E%3C/svg%3E") repeat;background-blend-mode:overlay;border-radius:0;}
@media (min-width:768px){
  #mission .section-inner{padding-top:calc(var(--space-section-desktop) + 40px);padding-bottom:var(--space-section-desktop);border-radius:var(--radius-lg);}
}

/* Motto purple strike */
#motto{position:relative;background:var(--clr-purple);color:var(--clr-light);text-align:center;padding-top:calc(var(--space-section-mobile) + 40px);padding-bottom:calc(var(--space-section-mobile) + 40px);overflow:hidden;}
#motto::before{content:"";position:absolute;top:0;left:-10%;width:120%;height:80px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF9B32' d='M0,0 L1440,80 L1440,0 Z'/%3E%3C/svg%3E") center/cover no-repeat;}
#motto::after{content:"";position:absolute;bottom:0;left:-10%;width:120%;height:80px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300C4CC' d='M0,80 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center/cover no-repeat;}
#motto{background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 50%),radial-gradient(circle at 70% 80%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 60%),url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23FFFFFF' fill-opacity='.08'/%3E%3C/svg%3E") repeat,var(--clr-purple);}
#motto .motto-block{background:rgba(255,255,255,.1);border:2px solid var(--clr-light);border-radius:var(--radius-lg);padding:1.75rem 1.25rem;margin:0 auto;max-width:700px;font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:.75px;font-size:2rem;line-height:1.2;}
#motto .motto-block p{margin:0;text-transform:uppercase;}
@media (max-width:640px){
  #motto{padding-top:calc(var(--space-section-mobile) + 30px);padding-bottom:calc(var(--space-section-mobile) + 30px);}
  #motto .motto-block{font-size:1.65rem;max-width:90%;padding:1.5rem 1rem;}
}
@media (max-width:480px){
  #motto .motto-block{font-size:1.45rem;}
}

/* Vision sunrise */
#vision{position:relative;padding:0;background:transparent;overflow:hidden;text-align:center;}
#vision::before{content:"";position:absolute;top:0;left:0;right:0;height:90px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF9B32' d='M0,90 C360,0 1080,0 1440,90 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center/cover no-repeat;}
#vision::after{content:"";position:absolute;bottom:0;left:0;right:0;height:90px;opacity:.9;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300C4CC' d='M0,0 C360,90 1080,90 1440,0 L1440,90 L0,90 Z'/%3E%3C/svg%3E") center/cover no-repeat;}
#vision .section-inner{position:relative;padding-top:calc(var(--space-section-mobile) + 40px);padding-bottom:var(--space-section-mobile);background:linear-gradient(180deg,rgba(255,155,50,.18) 0%,rgba(255,255,255,.0) 100%),url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' x='0' y='0' fill='%23FF9B32' fill-opacity='.15'/%3E%3C/svg%3E") repeat;background-blend-mode:overlay;}
@media (min-width:768px){
  #vision .section-inner{padding-top:calc(var(--space-section-desktop) + 40px);padding-bottom:var(--space-section-desktop);}
}

/* EMAIL LINK */
.email-link{text-decoration:none;color:var(--clr-teal);font-weight:700;}
.email-link:hover{text-decoration:underline;}

/* MOBILE NAV */
@media (max-width:640px){
  .nav-links{position:absolute;inset:100% 0 auto 0;background:rgba(255,255,255,.98);flex-direction:column;padding:1rem;gap:1.25rem;transform:translateY(-150%);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s;}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-toggle{display:block;}
}