/* Folkaboo — design system */
:root{
  --cream:#FFF7EA;--cream2:#FCEFD9;--paper:#FFFDF8;--ink:#2A2140;--ink2:#5A5170;--faint:#8E86A0;
  --coral:#FF7A59;--coral2:#FFB59E;--teal:#17A39C;--leaf:#5FB55A;--sun:#FFC547;--sky:#8DD3F0;--plum:#7B5CC4;--berry:#E8577E;
  --line:rgba(42,33,64,.1);
  --display:'Baloo 2',ui-rounded,system-ui,sans-serif;--sans:'Nunito',system-ui,sans-serif;
  --r:28px;--shadow:0 18px 50px -18px rgba(42,33,64,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.kick.t{color:var(--teal)}.kick.p{color:var(--plum)}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.6vw,84px);line-height:.98;letter-spacing:-.02em}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.015em;margin:10px 0 16px}
.h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.8vw,32px);line-height:1.08;margin:8px 0 10px}
.hl{background:linear-gradient(transparent 62%,rgba(255,197,71,.65) 62%);padding:0 .08em}
.lead{color:var(--ink2);font-size:19px;max-width:600px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.small{font-size:14px;color:var(--faint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;padding:15px 26px;border-radius:999px;transition:transform .25s,box-shadow .25s;white-space:nowrap}
.btn.c{background:var(--coral);color:#fff;box-shadow:0 10px 0 -2px #D9583A,0 18px 30px -10px rgba(255,122,89,.6)}
.btn.c:hover{transform:translateY(-2px)}
.btn.c:active{transform:translateY(4px);box-shadow:0 4px 0 -2px #D9583A}
.btn.o{background:#fff;border:2px solid var(--ink);color:var(--ink)}
.btn.o:hover{background:var(--ink);color:#fff}
.btn.s{font-size:15px;padding:10px 18px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.center .cta{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:14px;padding:7px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,247,234,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.01em}
.logo svg{width:38px;height:38px}
.nl{display:flex;gap:26px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink2)}
.nl a:hover,.nl a.on{color:var(--coral)}
@media(max-width:860px){.nl{display:none}}
/* sections */
section{padding:100px 0;position:relative}
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wave{display:block;width:100%;height:60px}
.band{background:var(--ink);color:#fff}
.band .lead{color:rgba(255,255,255,.75)}
.band .card{background:#3A3054;border-color:rgba(255,255,255,.08);box-shadow:none}
.band .small{color:rgba(255,255,255,.55)}
.foot{padding:50px 0 40px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;color:var(--faint);font-size:14px}
.foot a:hover{color:var(--coral)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
/* characters */
.kin{display:inline-block}
.kin .head{transform-origin:50% 90%;animation:nod 3.2s ease-in-out infinite}
.kin .eye{transform-origin:center;animation:blink 4.6s infinite}
.kin.b .head{animation-delay:-1.1s}.kin.b .eye{animation-delay:-2s}
.kin.c .head{animation-delay:-2.2s}.kin.c .eye{animation-delay:-3.1s}
.kin.d .head{animation-delay:-.6s}.kin.d .eye{animation-delay:-1.4s}
.hop{animation:hop 2.4s cubic-bezier(.3,.7,.4,1) infinite}
.hop.b{animation-delay:-.6s}.hop.c{animation-delay:-1.2s}.hop.d{animation-delay:-1.8s}
@keyframes nod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}section{padding:80px 0}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}.card{padding:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}