/* Mix 1 v2 · Golden Hour, turned up — with rhythm.
   The page itself moves from daylight (cream) to sunset (gradient) to night (ink footer).
   Loud moments: hero, framework, finale. Everything between is quieter on purpose. */
:root{--cream:#FFF8EF;--cream2:#FCEEDD;--peach:#FFE4CC;--ink:#2A1A10;--soft:#6B5444;--line:#EADBC8;--pink:#E72477;--red:#E52312;--orange:#EC640A;--yellow:#FCBC10;--grad:linear-gradient(90deg,#E72477,#E52312 35%,#EC640A 68%,#FCBC10)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{background:linear-gradient(180deg,#FFF8EF 0%,#FFF8EF 45%,#FFF1E2 70%,#FFE7D2 100%);color:var(--ink);font:16px/1.6 Poppins,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.w{max-width:1240px;margin:0 auto;padding:0 48px}
h1,h2,h3,h4{font-family:'Bricolage Grotesque';font-weight:800;letter-spacing:-.045em;line-height:.92;text-transform:lowercase}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;font-weight:600;padding:16px 28px;border-radius:99px;font-size:15px;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.b1{background:var(--grad);color:#fff;box-shadow:0 10px 24px -12px rgba(231,36,119,.7)}.b2{border:2px solid var(--ink)}.b3{background:var(--ink);color:var(--cream)}
nav{display:flex;align-items:center;gap:30px;padding:22px 48px;font-size:14px;font-weight:500;max-width:1340px;margin:0 auto;position:relative;z-index:5}
nav img{height:44px}nav .l{display:flex;gap:4px;margin-left:auto;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:99px;padding:5px}
nav .l span{padding:9px 16px;border-radius:99px}nav .l span.on{background:var(--ink);color:var(--cream)}
nav .b1{padding:11px 22px}nav .mb{display:none}
section{padding:110px 0}
.sh{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px;gap:20px}.sh h2{font-size:72px}
.more{font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:2px;white-space:nowrap}
/* stickers: max two per screen */
.stk{position:absolute;z-index:3;width:140px;height:140px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;text-align:center;font:800 18px/1 'Bricolage Grotesque';letter-spacing:-.03em;box-shadow:0 8px 0 var(--pink);animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-8px)}}
/* motion */
.mw{overflow:hidden;padding:18px 0}
.marq{overflow:hidden;background:var(--grad);color:#fff;transform:rotate(-1.5deg);width:110%;margin-left:-5%;padding:14px 0}
.marq div{display:flex;width:max-content;animation:run 32s linear infinite;font:800 34px 'Bricolage Grotesque';letter-spacing:-.04em;text-transform:lowercase;white-space:nowrap}
.marq span{padding-right:28px}
@keyframes run{to{transform:translateX(-50%)}}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.h1w span.wd{display:inline-block;animation:up .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:0;transform:translateY(40px) rotate(3deg)}}
/* swipe rows (mobile) */
.dots{display:none}
/* finale: sunset into night */
.fin{background:linear-gradient(180deg,#FCBC10 0%,#EC640A 22%,#E52312 42%,#E72477 58%,#7A1C4A 74%,#2A1A10 90%);color:#fff;margin-top:40px;border-radius:56px 56px 0 0;position:relative;overflow:hidden}
.fin .sun{position:absolute;left:50%;top:-180px;width:520px;height:520px;margin-left:-260px;border-radius:50%;background:radial-gradient(circle,#FFE38A,rgba(252,188,16,.0) 70%);opacity:.9}
.fin .cta{text-align:center;padding:130px 0 90px;position:relative}
.fin .cta h2{font-size:132px}
.fin .cta p{font-size:20px;margin:22px auto 34px;max-width:40ch;font-weight:500}
.fin .c{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.fin .wb{background:#fff;color:var(--ink)}.fin .ob{border:2px solid #fff}
.fin .stk{right:12%;top:90px;background:var(--ink);color:var(--yellow);box-shadow:0 8px 0 var(--yellow);width:124px;height:124px;font-size:16px}
.fin .part{position:relative;padding:20px 0 70px;text-align:center}.fin .part p{font-size:15px;opacity:.8;margin-bottom:16px;font-weight:500}
.fin .part .pm{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.fin .part .pm div{display:flex;width:max-content;animation:run 40s linear infinite;font:800 26px 'Bricolage Grotesque';letter-spacing:-.02em;opacity:.85}
.fin .part .pm span{padding:0 30px}
.fin .part .feat{margin-top:22px;font-size:14px;opacity:.85}.fin .part .feat b{font-weight:700}
footer{position:relative;padding:60px 0 44px;color:#E9D9C8;border-top:1px solid rgba(255,255,255,.12)}
footer .w{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer .lo{display:inline-block;background:#fff;border-radius:18px;padding:10px 14px;margin-bottom:18px}footer .lo img{height:44px}
footer h5{font:800 18px 'Bricolage Grotesque';text-transform:lowercase;margin-bottom:12px;color:var(--yellow)}
footer .nl{margin-top:22px;max-width:340px}footer .nl p{font-size:14px;margin-bottom:10px}
footer .nf{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:5px}footer .nf span{flex:1;padding:10px 16px;font-size:14px;opacity:.6}footer .nf b{background:var(--grad);color:#fff;border-radius:99px;padding:10px 18px;font-size:14px;font-weight:600}
footer li{list-style:none;padding:4px 0}footer .m{font:800 28px/1 'Bricolage Grotesque';letter-spacing:-.04em;text-transform:lowercase;max-width:16ch;color:#fff}
footer .lg{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:13px;opacity:.7;display:flex;justify-content:space-between;gap:20px}
@media (max-width:760px){
.w{padding:0 20px}
nav{padding:14px 20px;gap:10px}nav img{height:36px}nav .l{display:none}nav .b1{margin-left:auto;padding:10px 18px;font-size:14px}
nav .mb{display:flex;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--cream);align-items:center;justify-content:center;font-size:18px}
section{padding:64px 0}
.sh{margin-bottom:22px;flex-direction:column;align-items:flex-start;gap:12px}.sh h2{font-size:46px}
.stk{width:100px;height:100px;font-size:14px}
.marq{padding:10px 0}.marq div{font-size:24px}
/* horizontal swipe rows replace stacked grids */
.sw{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin:0 -20px;padding:4px 20px 8px;scroll-padding:0 20px;scrollbar-width:none}
.sw::-webkit-scrollbar{display:none}
.sw>*{flex:0 0 78%;scroll-snap-align:start}
.dots{display:flex;gap:6px;margin-top:14px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}.dots i:first-child{width:22px;border-radius:4px;background:var(--orange)}
.fin{border-radius:32px 32px 0 0}.fin .cta{padding:90px 0 50px}.fin .cta h2{font-size:68px}.fin .cta p{font-size:17px}
.fin .c{flex-direction:column;align-items:stretch;padding:0 10px}.fin .stk{right:auto;left:50%;margin-left:-50px;top:-10px;position:relative;display:flex;margin-bottom:10px}
.fin .part .pm div{font-size:20px}
footer{padding:40px 0 84px}footer .w{grid-template-columns:1fr 1fr;gap:22px}footer .w>div:first-child,footer .w>div:nth-child(4){grid-column:1/-1}
footer .m{font-size:24px}footer .lg{flex-direction:column;gap:8px}
}