/* OC Creative Design — v2 faithful replica of the Canva layout */
:root{
  --navy:#1e2a5a;
  --cream:#fff7ea;
  --cream2:#fdf1dc;
  --lime:#dceea9;
  --green:#35b558;
  --green-dark:#1f7a3d;
  --pink:#f6c9da;
  --pink-soft:#fbdce9;
  --lav:#dcd2f5;
  --hotpink:#e7548c;
  --orange:#f08a1d;
  --sky:#2fa3dd;
  --red:#cf3527;
  --shadow:0 10px 24px rgba(30,42,90,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito",system-ui,sans-serif;color:var(--navy);background:var(--cream);line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,.display{font-family:"Fredoka","Baloo 2",sans-serif;line-height:1.12}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- top nav ---------- */
.topnav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:3px solid var(--navy);
  box-shadow:0 4px 14px rgba(30,42,90,.08)}
.topnav .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Fredoka",sans-serif;
  font-weight:600;font-size:1.15rem;white-space:nowrap}
.brand img{width:44px;height:44px;object-fit:contain}
.topnav nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.topnav nav::-webkit-scrollbar{display:none}
.topnav nav a{text-decoration:none;font-weight:800;font-size:.86rem;padding:8px 10px;border-radius:999px;white-space:nowrap}
.topnav nav a:hover{background:var(--lime)}
.topnav nav a.active{background:var(--navy);color:#fff}

/* ---------- hero ---------- */
.hero{background:var(--lime);background-image:radial-gradient(rgba(255,255,255,.35) 3px,transparent 3.5px);background-size:34px 34px;
  padding:44px 0 64px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.65fr .85fr;gap:28px;align-items:start}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:700;letter-spacing:.01em;margin:6px 0 10px}
.hero h1 .w{display:inline-block;opacity:0;transform:scale(.6) translateY(16px) rotate(-3deg);
  animation:pop .55s cubic-bezier(.2,1.6,.4,1) forwards}
.hero h1 .w:nth-child(1){animation-delay:.05s}.hero h1 .w:nth-child(2){animation-delay:.18s}
.hero h1 .w:nth-child(3){animation-delay:.31s}.hero h1 .w:nth-child(4){animation-delay:.44s}
.hero h1 .w:nth-child(5){animation-delay:.57s}.hero h1 .w:nth-child(6){animation-delay:.70s}
@keyframes pop{to{opacity:1;transform:scale(1) translateY(0) rotate(0)}}
.circled{position:relative;display:inline-block;padding:0 .08em}
.circled svg{position:absolute;left:-6%;top:-16%;width:112%;height:136%;overflow:visible;pointer-events:none}
.circled path{fill:none;stroke:#f4791f;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1s .8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-sub{font-weight:800;font-size:1.08rem;max-width:34em}
.hero-strip{width:min(430px,90%);margin-top:14px}

.collage{position:relative;height:480px;margin-top:26px}
.collage .logo-big{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:290px;z-index:3;
  filter:drop-shadow(0 12px 20px rgba(30,42,90,.25))}
.collage .word{position:absolute;z-index:4;filter:drop-shadow(0 6px 10px rgba(30,42,90,.25))}
.collage .word.art{width:215px;left:2%;top:0;transform:rotate(-6deg)}
.collage .word.design{width:275px;left:0;bottom:2%;transform:rotate(3deg)}
.collage .word.build{width:250px;right:1%;bottom:0;transform:rotate(-3deg)}
.collage .word.story{width:255px;right:0;top:2%;transform:rotate(5deg)}
.ph{position:absolute;background:#fff;padding:8px 8px 22px;border-radius:6px;box-shadow:var(--shadow);z-index:2}
.ph img{border-radius:3px;object-fit:cover;width:100%;height:100%}
.ph.p1{width:215px;height:170px;left:24%;top:-8px;transform:rotate(-4deg)}
.ph.p2{width:200px;height:160px;right:23%;bottom:6px;transform:rotate(4deg)}
.ph.p3{width:180px;height:150px;left:6%;top:38%;transform:rotate(5deg)}
.hero-poster{transform:rotate(2deg);background:#fff;padding:10px;border-radius:8px;box-shadow:var(--shadow);
  transition:transform .25s}
.hero-poster:hover{transform:rotate(0) scale(1.02)}
.hero-poster figcaption{text-align:center;font-family:"Fredoka",sans-serif;font-weight:600;padding:8px 4px 2px}
a.poster-link{text-decoration:none}

/* ---------- bands & sections ---------- */
section{padding:58px 0}
.band-green{background:var(--green);color:#fff}
.band-green h2{color:#fff}
.band-tag{display:inline-block;background:#fff;color:var(--green-dark);font-family:"Fredoka",sans-serif;
  font-weight:600;padding:6px 16px;border-radius:999px;transform:rotate(-1.5deg);margin-bottom:14px}
h2.section-title{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:14px}
.lede{font-size:1.06rem;font-weight:600;max-width:62em}
.wave{display:block;width:100%;height:36px;margin-bottom:-1px}
.wave.flip{transform:scaleY(-1)}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.card{background:#fff;border-radius:10px;padding:10px 10px 14px;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .25s}
.card:nth-child(odd){transform:rotate(-1.6deg)}
.card:nth-child(even){transform:rotate(1.6deg)}
.card:hover{transform:rotate(0) translateY(-6px)}
.card img{border-radius:6px;width:100%;height:210px;object-fit:cover}
.card h3{text-align:center;font-size:1.18rem;padding-top:10px}

.trial{background:var(--cream2);text-align:center}
.trial h2{font-size:clamp(2rem,4vw,3.1rem)}
.trial .facts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 22px}
.fact{background:#fff;border:2.5px solid var(--navy);border-radius:999px;padding:7px 18px;font-weight:900;
  box-shadow:3px 3px 0 var(--navy)}
.fact:nth-child(1){transform:rotate(-1.5deg)}.fact:nth-child(3){transform:rotate(1.5deg)}
.btn{display:inline-block;background:var(--hotpink);color:#fff;font-family:"Fredoka",sans-serif;font-weight:600;
  font-size:1.15rem;text-decoration:none;padding:15px 30px;border-radius:999px;border:3px solid var(--navy);
  box-shadow:5px 5px 0 var(--navy);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--navy)}
.signup-strip{width:min(560px,92%);margin:10px auto 0}

.pink{background:var(--pink-soft)}
.founder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:start}
.founder-photo{background:#fff;padding:10px 10px 26px;border-radius:6px;box-shadow:var(--shadow);transform:rotate(-2.5deg)}
.founder-photo img{border-radius:3px}
.founder-photo figcaption{text-align:center;font-family:"Fredoka",sans-serif;font-weight:600;padding-top:8px}
.sticker{background:#fff;border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);margin-top:18px}
.sticker:nth-of-type(odd){transform:rotate(-.6deg)}
.sticker h3{margin-bottom:6px;font-size:1.35rem}

.students{background:#fff}
.collage-band{columns:4;column-gap:16px;margin-top:24px}
.collage-band figure{break-inside:avoid;background:#fff;padding:7px 7px 18px;border-radius:5px;box-shadow:var(--shadow);margin-bottom:16px}
.collage-band figure:nth-child(3n){transform:rotate(1.6deg)}
.collage-band figure:nth-child(3n+1){transform:rotate(-1.6deg)}
.collage-band img{border-radius:3px;width:100%}

.schedule{background:var(--lav)}
.sched-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:22px}
.sched-day{background:#fff;border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.sched-day:nth-child(odd){transform:rotate(-1deg)}
.sched-day:nth-child(even){transform:rotate(1deg)}
.sched-day h3{font-size:1.15rem;margin-bottom:4px}
.sched-day p{font-weight:800}
.center{text-align:center}

footer{background:var(--cream);border-top:3px solid var(--navy);padding:38px 0 46px;text-align:center}
footer .f-logo{width:92px;margin:0 auto 8px}
footer p{font-weight:700}
footer a{text-decoration:none;border-bottom:2px dotted var(--hotpink)}
footer a:hover{color:var(--hotpink)}

/* ---------- subpages ---------- */
.subpage{min-height:100vh;padding:26px 14px 70px}
.subpage .back{display:inline-block;background:#fff;color:var(--navy);font-family:"Fredoka",sans-serif;font-weight:600;
  text-decoration:none;padding:9px 20px;border-radius:999px;border:3px solid var(--navy);box-shadow:4px 4px 0 var(--navy);margin-bottom:22px}
.subcol{max-width:880px;margin:0 auto}
.subcol .poster-top{background:#fff;padding:12px;border-radius:10px;box-shadow:var(--shadow);transform:rotate(-.8deg)}
.subcol h1{text-align:center;color:#fff;font-size:clamp(2rem,5vw,3.2rem);margin:10px 0 20px;
  text-shadow:3px 3px 0 rgba(30,42,90,.35)}
.gallery{columns:3;column-gap:14px;margin-top:22px}
.gallery figure{break-inside:avoid;background:#fff;padding:7px 7px 16px;border-radius:5px;box-shadow:var(--shadow);margin-bottom:14px}
.gallery figure:nth-child(3n){transform:rotate(1.5deg)}
.gallery figure:nth-child(3n+1){transform:rotate(-1.5deg)}
.gallery img{border-radius:3px;width:100%}
.gallery figure.cutout{background:transparent;box-shadow:none;padding:0;transform:none}
.gallery figure.cutout img{filter:drop-shadow(0 8px 12px rgba(30,42,90,.3))}
.bg-red{background:var(--red)}
.bg-orange{background:var(--orange)}
.bg-sky{background:var(--sky)}
.bg-pinkgrad{background:linear-gradient(160deg,#f7a8c4,#e7548c 55%,#c94f9e)}
.bg-cream{background:var(--cream)}

.mini-head{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:26px 22px;text-align:center}
.mini-head .mini-word{width:min(430px,85%);margin:0 auto}
.mini-head .use-strip{width:min(520px,92%);margin:12px auto 0}
.mini-head .ads-strip{width:min(470px,90%);margin:14px auto 0}
.video-block{margin-top:30px;text-align:center}
.video-block .strip{width:min(600px,94%);margin:0 auto 6px}
.video-block .strip.learn{width:min(520px,90%)}
.video-frame{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
  border:6px solid #fff;background:#000;margin-top:10px}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-note{font-family:"Fredoka",sans-serif;font-weight:600;margin-top:8px}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .collage-band{columns:2}
  .gallery{columns:2}
  .founder-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-poster{max-width:420px;margin:8px auto 0}
  .collage{height:430px}
  .collage .logo-big{width:220px}
  .collage .word.art{width:150px}.collage .word.design{width:195px}
  .collage .word.build{width:175px}.collage .word.story{width:180px}
  .ph.p1{width:160px;height:130px}.ph.p2{width:150px;height:120px}.ph.p3{width:135px;height:115px}
}
@media (max-width:700px){
  .topnav .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;min-height:0}
  .topnav nav{margin-left:0;width:100%}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .gallery{columns:1}
  .collage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-items:center}
  .collage .logo-big,.collage .word,.collage .ph{position:static;transform:none}
  .collage .logo-big{grid-column:1/-1;width:190px}
  .collage .ph{width:100%;height:auto}
  .collage .ph img{height:130px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .w{opacity:1;transform:none}
  .circled path{stroke-dashoffset:0}
  .reveal{opacity:1;transform:none}
}