:root{
  --cream:#F3EBDD; --ink:#141414; --orange:#FF751F; --yellow:#F2B423; --pink:#F08A9B; --red:#E0483B; --white:#FFFDF8;
  --display:'Lilita One',cursive; --body:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.625,.05,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--ink);line-height:1.5;overflow-x:hidden}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
b{font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* ===== Stickers / highlights ===== */
.hl{display:inline-block;background:var(--orange);color:var(--white);padding:.05em .35em .1em;border-radius:.18em;transform:rotate(-1.5deg);box-shadow:0 .12em 0 var(--ink)}
.hl.y{background:var(--yellow);color:var(--ink)}
.hl.p{background:var(--pink);color:var(--ink)}
.tag{display:inline-block;font-family:var(--display);font-size:15px;background:var(--white);border:2px solid var(--ink);border-radius:8px;padding:4px 12px;box-shadow:3px 3px 0 var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:17px;background:var(--orange);color:var(--white);border:2px solid var(--ink);border-radius:999px;padding:12px 24px;box-shadow:4px 4px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease);cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.dark{background:var(--ink);color:var(--white)}
.btn.y{background:var(--yellow);color:var(--ink)}
.btn.p{background:var(--pink);color:var(--ink)}

/* ===== Nav ===== */
nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid var(--ink);box-shadow:0 2px 0 var(--orange)}
nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
nav .wrap .btn{justify-self:end}
nav .wrap .logo{justify-self:center}
.burger{display:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--white);box-shadow:3px 3px 0 var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:3px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
nav.open .burger span:nth-child(2){opacity:0}
nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.stack .note.pos-1,.stack .note.pos-2{pointer-events:none}
nav ul{display:flex;gap:24px;list-style:none;font-weight:500;font-size:15px}
.logo{display:inline-flex;align-items:center;transform:rotate(-2deg);transition:transform .3s var(--ease)}
.logo:hover{transform:rotate(0)}
.logo img{height:60px;width:auto;display:block}

/* ===== Hero ===== */
.hero{position:relative;padding:44px 0 56px;text-align:center;overflow:hidden}
.hero .rainbow{position:absolute;top:-80px;width:440px;height:440px;z-index:0;pointer-events:none}
.hero .rainbow.l{left:-60px}
.hero .rainbow.r{right:-60px;transform:scaleX(-1)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,5vw,68px);max-width:22ch;margin:14px auto 4px;text-shadow:3px 3px 0 var(--cream),5px 5px 0 var(--ink)}
.hero h1 .sub{display:block;font-size:.72em;margin-top:.35em;line-height:1.2}
.hero h1 .brand{font-size:.85em;text-shadow:none;display:flex;justify-content:center;align-items:center;gap:.14em;margin-top:.2em}
.hero h1 .brand .hl{transform:rotate(-2deg);padding:.02em .3em .12em;border-radius:.15em;box-shadow:.08em .08em 0 var(--ink)}
.hero h1 .brand .hash{font-size:.6em;margin-left:-.05em;transform:rotate(12deg);display:inline-block}
.hero p{max-width:600px;margin:18px auto 22px;font-size:17px}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px;max-width:760px;margin-left:auto;margin-right:auto}
.pills span{font-family:var(--display);font-size:14px;border:2px solid var(--ink);border-radius:999px;padding:4px 14px;background:var(--white)}
.pills span:nth-child(3n){background:var(--yellow)} .pills span:nth-child(3n+1){background:var(--pink)} .pills span:nth-child(3n+2){background:var(--orange);color:var(--white)}

/* ===== Marquee ===== */
.marquee{background:var(--orange);color:var(--white);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:14px 0;font-family:var(--display);font-size:20px;white-space:nowrap}
.marquee .track{display:inline-flex;gap:40px;animation:scroll 22s linear infinite;padding-right:40px}
.marquee .track span::after{content:"•";margin-left:40px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ===== Concept (dark) ===== */
.concept{background:var(--ink);color:var(--cream);padding:30px 0;position:relative;overflow:hidden}
.concept .stripes{position:absolute;right:-30px;top:-20px;width:220px;height:60%;opacity:.9;transform:skewX(-12deg)}
.concept .inner{position:relative;max-width:820px;background:var(--ink);margin:0 auto;text-align:center;padding:50px 40px}
.concept .tag{color:var(--ink)}
.concept h2{font-size:clamp(36px,5vw,64px);color:var(--white)}
.concept p{max-width:540px;margin:26px auto 32px;font-size:17px;color:#d9d2c4}
.handle{display:none}
.handle.tl{top:-6px;left:-6px}.handle.tr{top:-6px;right:-6px}.handle.bl{bottom:-6px;left:-6px}.handle.br{bottom:-6px;right:-6px}

/* ===== Team cards ===== */
.team{padding:110px 0;background:
  repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(20,20,20,.12) calc(25% - 1px) 25%)}
.team .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px 32px;align-items:start}
.team .intro{grid-column:1/-1;max-width:620px;margin-bottom:10px}
.team h2{font-size:clamp(40px,4.6vw,60px);margin-bottom:20px}
.team .intro p{margin-bottom:24px}
.card{position:relative;max-width:340px;margin:0 auto}
.card:nth-child(3n){margin-top:56px}
.card .frame{border:2px solid var(--ink);border-radius:14px;padding:12px;background:var(--white);box-shadow:6px 6px 0 var(--ink);transition:transform .5s var(--ease)}
.card:hover .frame{transform:rotate(-1.5deg) translateY(-4px)}
.card .art{height:230px;border-radius:8px;display:grid;place-items:center;position:relative;overflow:hidden;border:2px solid var(--ink)}
.card .art .big{font-family:var(--display);font-size:96px;color:var(--ink);opacity:.18;position:absolute;right:-10px;bottom:-28px;line-height:1}
.card .art svg{width:96px;height:96px}
.card .role{position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(-2deg);white-space:nowrap}
.card .name{position:absolute;left:14px;bottom:14px;font-family:var(--display);font-size:20px;background:var(--orange);color:var(--white);padding:5px 14px;border-radius:6px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.card .desc{padding:16px 8px 6px;font-size:14.5px;text-align:center}
.card.orange .art{background:var(--orange)} .card.yellow .art{background:var(--yellow)} .card.pink .art{background:var(--pink)}

/* ===== Leviers bars ===== */
.levers{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:200px 1fr;border-top:2px solid var(--ink)}
.levers .side{display:grid;place-items:center;padding:60px 20px}
.levers .side h2{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(36px,4vw,52px);color:var(--white)}
.levers ul{list-style:none}
.levers li{font-family:var(--display);font-size:clamp(24px,3vw,38px);text-align:center;padding:22px 20px;border-bottom:2px solid var(--ink);border-left:2px solid var(--ink);color:var(--ink);display:flex;justify-content:center;align-items:center;gap:20px;transition:padding-left .4s var(--ease)}
.levers li small{font-family:var(--body);font-size:15px;font-weight:500;opacity:.8}
.levers li:hover{padding-left:60px}
.levers li:nth-child(1){background:var(--orange);color:var(--white)}
.levers li:nth-child(2){background:var(--pink)}
.levers li:nth-child(3){background:var(--yellow)}
.levers li:nth-child(4){background:var(--orange);color:var(--white)}
.levers li:nth-child(5){background:var(--pink)}
.levers li:nth-child(6){background:var(--yellow);border-bottom:0}

/* ===== Why ===== */
.why{padding:110px 0;background:var(--cream);border-top:2px solid var(--ink);position:relative}
.why .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.why h2{font-size:clamp(38px,4.6vw,58px);margin-bottom:20px}
.why p{font-size:16px;margin-bottom:28px;max-width:440px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tile{border:2px solid var(--ink);border-radius:14px;padding:20px 18px 18px;box-shadow:5px 5px 0 var(--ink);background:var(--white);transition:transform .4s var(--ease)}
.tile:hover{transform:translate(-2px,-3px)}
.tile:nth-child(1){background:var(--orange);color:var(--white)}.tile:nth-child(2){background:var(--yellow)}.tile:nth-child(3){background:var(--white)}.tile:nth-child(4){background:var(--orange);color:var(--white)}
.tile h3{font-size:22px;margin-bottom:8px}
.tile p{font-size:14px;margin:0}

/* ===== Vs ===== */
.vs{padding:40px 0 110px}
.vs .row{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.vs .box{border:2px solid var(--ink);border-radius:16px;padding:28px;background:var(--white);box-shadow:6px 6px 0 var(--ink)}
.vs .box h3{font-size:26px;margin-bottom:14px}
.vs .box ul{list-style:none;font-size:15px}
.vs .box li{padding:6px 0;border-bottom:1px dashed rgba(20,20,20,.25)}
.vs .box li:last-child{border:0}
.vs .box li::before{content:"✕ ";color:var(--red);font-weight:700}
.vs .box.us{background:var(--orange);color:var(--white);transform:rotate(1deg)}
.vs .box.us li{border-color:rgba(255,255,255,.4)}
.vs .box.us li::before{content:"✓ ";color:var(--ink)}
.vs .badge{font-family:var(--display);font-size:40px;background:var(--ink);color:var(--cream);width:90px;height:90px;border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg)}

/* ===== Testimonials / stack ===== */
.love{padding:100px 0 140px;text-align:center;position:relative;overflow:hidden}
.love .bigword{font-family:var(--display);font-size:clamp(56px,8.5vw,110px);line-height:.85;color:var(--ink);opacity:.95;letter-spacing:-.02em}
.love .bigword em{font-style:normal;background:var(--orange);color:var(--cream);padding:0 .15em;border-radius:.08em;transform:rotate(2deg);display:inline-block}
.stack{position:relative;width:min(460px,90%);margin:10px auto 0;height:230px;cursor:pointer;user-select:none;touch-action:pan-y}
.note{position:absolute;inset:0;background:var(--white);border:2px solid var(--ink);border-radius:14px;padding:24px 26px;text-align:left;box-shadow:4px 4px 0 var(--ink);transition:transform .6s var(--ease),opacity .4s}
.note.pos-0{transform:rotate(-3deg);z-index:3}
.note.pos-1{transform:rotate(3deg) translate(10px,12px);z-index:2}
.note.pos-2{transform:rotate(-1deg) translate(-4px,22px);z-index:1}
.stack-nav{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:40px}
.stack-nav .btn{padding:8px 16px}
.stack-nav .btn.y{background:var(--orange);color:var(--white)}
.note .who{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:700}
.note .who i{width:38px;height:38px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);display:inline-block}
.note p{font-size:16.5px;line-height:1.4}
.note small{display:block;margin-top:12px;opacity:.6;font-size:12px}

/* ===== CTA / footer ===== */
.cta{background:var(--ink);color:var(--cream);padding:100px 0;text-align:center;border-top:2px solid var(--ink)}
.cta h2{font-size:clamp(40px,6vw,80px);color:var(--white);text-shadow:4px 4px 0 var(--orange)}
.cta p{max-width:520px;margin:22px auto 32px;font-size:18px}
.cta .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.cta .chips span{font-size:13px;font-weight:700;border:2px solid var(--ink);background:var(--cream);color:var(--ink);border-radius:999px;padding:4px 12px}
footer{background:var(--ink);color:var(--cream);padding:50px 0;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
footer .wrap>span{justify-self:end}
footer .logo{justify-self:start;width:max-content}
footer ul{justify-self:center}
footer .logo{transform:rotate(2deg);background:var(--cream);padding:6px 12px;border-radius:10px}
footer .logo img{height:40px}
footer ul{display:flex;gap:20px;list-style:none;opacity:.8}

/* ===== Reveal ===== */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.has-gsap [data-reveal]{transition:none;opacity:1;transform:none}
.has-gsap .note{transition:transform .6s var(--ease)}
.has-gsap .tile,.has-gsap .vs .box,.has-gsap .duel .col{transition:none}
.has-gsap .btn{transition:box-shadow .25s var(--ease)}
.has-gsap.reduce [data-reveal]{opacity:1;transform:none}
.line{overflow:hidden;padding:0 .12em .16em;margin:0 -.12em -.16em}
nav{transition:box-shadow .3s}
nav.scrolled{box-shadow:0 2px 0 var(--orange),0 10px 30px rgba(20,20,20,.08)}
nav.scrolled .logo{transform:rotate(0)}
.btn{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.marquee .track{animation:none}}

@media (max-width:900px){
  nav .wrap{grid-template-columns:auto 1fr auto auto;gap:10px;height:68px}
  nav .wrap .logo{justify-self:start;order:0}
  nav .wrap .btn{order:1;padding:8px 14px!important;font-size:14px!important;white-space:nowrap}
  .burger{order:2;display:flex}
  nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:2px solid var(--ink);flex-direction:column;gap:0;padding:8px 0;box-shadow:0 12px 30px rgba(20,20,20,.12)}
  nav.open ul{display:flex}
  nav ul li a{display:block;padding:14px 24px;font-family:var(--display);font-size:20px;border-top:1px dashed rgba(20,20,20,.2)}
  nav ul li:first-child a{border-top:0}
  footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  footer .wrap>span{justify-self:center}
  footer ul{flex-wrap:wrap;justify-content:center;gap:12px 18px}
  .hero .rainbow{width:200px;opacity:.6}
  .team .grid{grid-template-columns:1fr}
  .team .intro{grid-column:auto}
  .card:nth-child(3n){margin-top:0}
  .team .grid{gap:36px}
  .levers{grid-template-columns:1fr}
  .levers .side h2{writing-mode:horizontal-tb;transform:none}
  .levers li{border-left:0}
  .why .grid,.vs .row{grid-template-columns:1fr}
  .vs .badge{margin:0 auto}
  .stack{height:260px}
}

/* ===== Inner pages ===== */
.phero{position:relative;padding:80px 0 70px;text-align:center;overflow:hidden;border-bottom:2px solid var(--ink)}
.phero .rainbow{position:absolute;top:-200px;width:520px;height:520px;pointer-events:none;opacity:.9}
.phero .rainbow.l{left:-120px}.phero .rainbow.r{right:-120px;transform:scaleX(-1)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(40px,5.6vw,74px);max-width:20ch;margin:16px auto 0;text-shadow:3px 3px 0 var(--cream),5px 5px 0 var(--ink)}
.phero p{max-width:620px;margin:22px auto 0;font-size:17px}
.crumb{font-size:13px;font-weight:500;opacity:.7}
.crumb a:hover{text-decoration:underline}
.prose{padding:90px 0}
.prose .wrap{max-width:1000px}
.block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:56px 0;border-bottom:2px dashed rgba(20,20,20,.25)}
.block:last-child{border:0}
.block.rev > :first-child{order:2}
.block h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:14px}
.block p{margin-bottom:14px;font-size:16px}
.block ul{list-style:none;margin:8px 0 14px}
.block li{padding:8px 0 8px 30px;position:relative;font-size:15.5px}
.block li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border:2px solid var(--ink);border-radius:4px;background:var(--yellow);transform:rotate(-6deg)}
.block .aside{border:2px solid var(--ink);border-radius:16px;padding:28px;box-shadow:6px 6px 0 var(--ink);background:var(--white);position:relative}
.block .aside .sticker{position:absolute;top:-16px;left:24px}
.block .aside.y{background:var(--yellow)}.block .aside.p{background:var(--pink)}.block .aside.o{background:var(--orange);color:var(--white)}.block .aside.k{background:var(--ink);color:var(--cream)}
.block .aside h3{font-size:24px;margin:8px 0 12px}
.block .aside .bigq{font-family:var(--display);font-size:clamp(26px,2.6vw,34px);line-height:1.1}
.band{background:var(--ink);color:var(--cream);padding:80px 0;text-align:center}
.band .display{font-size:clamp(30px,3.8vw,50px);max-width:22ch;margin:0 auto 30px;color:var(--white)}
.duel{padding:90px 0}
.duel .cols{display:grid;grid-template-columns:1fr 80px 1fr;gap:28px;align-items:start}
.duel .col{border:2px solid var(--ink);border-radius:18px;padding:32px 30px;box-shadow:7px 7px 0 var(--ink);background:var(--white)}
.duel .col.them{transform:rotate(-.6deg)}
.duel .col.us{background:var(--orange);color:var(--white);transform:rotate(.8deg)}
.duel .col.us li{border-color:rgba(255,255,255,.4)}
.duel .col h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:10px}
.duel .col > p{font-size:15px;margin-bottom:18px;opacity:.85}
.duel .col ul{list-style:none}
.duel .col li{padding:10px 0 10px 30px;border-bottom:1px dashed rgba(20,20,20,.3);position:relative;font-size:15.5px}
.duel .col li:last-child{border:0}
.duel .col li::before{position:absolute;left:0;font-weight:700}
.duel .them li::before{content:"✕";color:var(--red)}
.duel .us li::before{content:"✓"}
.duel .vsb{font-family:var(--display);font-size:34px;background:var(--ink);color:var(--cream);width:80px;height:80px;border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg);position:sticky;top:120px;margin-top:40px}
.reasons{padding:0 0 90px}
.reasons h2{font-size:clamp(32px,4vw,52px);text-align:center;margin-bottom:40px}
.reasons .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reasons .grid .tile:nth-child(1){background:var(--pink)}.reasons .grid .tile:nth-child(2){background:var(--yellow)}.reasons .grid .tile:nth-child(3){background:var(--orange);color:var(--white)}.reasons .grid .tile:nth-child(4){background:var(--orange);color:var(--white)}.reasons .grid .tile:nth-child(5){background:var(--yellow)}.reasons .grid .tile:nth-child(6){background:var(--pink)}
.reasons .tile{font-size:16px;font-weight:500;padding:22px 20px}
.reasons .tile p{font-size:15.5px}
.contact{padding:90px 0 110px}
.contact .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.contact h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:18px}
.contact .grid > div > p{margin-bottom:24px}
.cbox{border:2px solid var(--ink);border-radius:14px;padding:18px 20px;background:var(--white);box-shadow:5px 5px 0 var(--ink);margin-bottom:14px;display:flex;gap:14px;align-items:center}
.cbox i{width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-style:normal;font-size:18px;flex:none}
.cbox b{display:block;font-family:var(--display);font-weight:400;font-size:17px}
.form{border:2px solid var(--ink);border-radius:18px;padding:32px;background:var(--white);box-shadow:8px 8px 0 var(--ink);position:relative;transform:rotate(.6deg)}
.form .sticker{position:absolute;top:-16px;right:24px;background:var(--orange);color:var(--white)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px}
.form input,.form textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--cream);outline:none;transition:box-shadow .2s}
.form input:focus,.form textarea:focus{box-shadow:3px 3px 0 var(--ink);background:var(--white)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{margin-top:20px;width:100%;justify-content:center}
.form small{display:block;margin-top:12px;font-size:12px;opacity:.65}
@media (max-width:900px){
  .block,.duel .cols,.contact .grid{grid-template-columns:1fr}
  .block.rev > :first-child{order:0}
  .duel .vsb{position:static;margin:0 auto}
  .reasons .grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .phero .rainbow{width:300px;height:300px;top:-120px}
}
.aside .tag,.form .tag,.band .tag,.cta .tag{color:var(--ink)}
@media (max-width:900px){
  .hero .rainbow{width:260px;height:260px;top:-130px;opacity:1}
  .hero{padding-top:70px}
  .hero h1{line-height:1.02;text-shadow:2px 2px 0 var(--cream),3px 3px 0 var(--ink)}
  .concept .stripes{display:none}
  .phero .rainbow{width:240px;height:240px;top:-130px}
}

@media (max-width:900px){.logo img{height:44px}}

.legal h2{font-size:26px;margin:36px 0 10px}
.legal p,.legal li{font-size:15.5px;margin-bottom:12px}
.legal ul{padding-left:22px;margin-bottom:14px}
.legal a{text-decoration:underline}