:root{--bg:#fff7e8;--ink:#1d1d1f;--mute:#6b6b70;--acc:#ff6b2c;--acc2:#ffe6d6;--card:#fff;--line:#f0e3cf;
  --W:#f7f7f2;--Y:#ffd60a;--R:#d62828;--O:#ff7b00;--G:#16a34a;--B:#1e5bd8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",Roboto,-apple-system,sans-serif;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;line-height:1.1}
h2{font-size:clamp(28px,4.5vw,42px);margin:0 0 14px}
h3{font-size:20px;margin:6px 0}
.tiny{font-size:13px;color:var(--mute)}

/* drifting cube squares in the background */
.floaties{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.floaties i{position:absolute;width:26px;height:26px;border-radius:7px;opacity:.16;animation:drift 22s linear infinite}
.floaties i:nth-child(6n+1){background:var(--R)} .floaties i:nth-child(6n+2){background:var(--B)} .floaties i:nth-child(6n+3){background:var(--Y)}
.floaties i:nth-child(6n+4){background:var(--G)} .floaties i:nth-child(6n+5){background:var(--O)} .floaties i:nth-child(6n){background:#bbb}
.floaties i:nth-child(1){left:6%;animation-delay:-2s} .floaties i:nth-child(2){left:18%;animation-delay:-11s;width:18px;height:18px}
.floaties i:nth-child(3){left:31%;animation-delay:-6s} .floaties i:nth-child(4){left:44%;animation-delay:-16s;width:34px;height:34px}
.floaties i:nth-child(5){left:57%;animation-delay:-3s;width:20px;height:20px} .floaties i:nth-child(6){left:69%;animation-delay:-13s}
.floaties i:nth-child(7){left:80%;animation-delay:-8s;width:30px;height:30px} .floaties i:nth-child(8){left:91%;animation-delay:-19s}
.floaties i:nth-child(9){left:12%;animation-delay:-20s;width:16px;height:16px} .floaties i:nth-child(10){left:63%;animation-delay:-1s;width:22px;height:22px}
@keyframes drift{from{transform:translateY(110vh) rotate(0)}to{transform:translateY(-15vh) rotate(540deg)}}

.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,4vw,40px);background:#fff7e8e6;backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;text-decoration:none}
.logo-cube{width:28px;height:28px;border-radius:7px;background:conic-gradient(var(--R) 0 25%,var(--Y) 0 50%,var(--B) 0 75%,var(--G) 0);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:800;text-decoration:none;border:0;border-radius:999px;padding:13px 22px;box-shadow:0 6px 0 #c94b14;transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c94b14}
.btn.small{padding:8px 16px;font-size:15px;box-shadow:0 4px 0 #c94b14}
.btn.big{font-size:20px;padding:16px 28px}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 #e7d9c4}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

main{position:relative;z-index:1}
section{padding:clamp(40px,7vw,90px) clamp(16px,5vw,60px);max-width:1150px;margin:0 auto}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;padding-top:20px}
@media(min-width:900px){.hero{grid-template-columns:1fr 1.05fr;min-height:calc(100vh - 70px)}}
.hero h1{font-size:clamp(38px,6.5vw,68px);margin:0 0 14px}
.wiggle{display:inline-block;color:var(--acc);animation:wiggle 3s ease-in-out infinite;transform-origin:20% 80%}
@keyframes wiggle{0%,100%{transform:rotate(0)}6%{transform:rotate(-4deg)}12%{transform:rotate(3deg)}18%{transform:rotate(0)}}
.lead{font-size:clamp(18px,2.2vw,21px);color:#3a3a3d;max-width:520px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 10px}
.hero-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:min(78vh,640px);order:-1;padding-bottom:150px}
@media(min-width:900px){.hero-stage{order:0}}
.hero-cube{position:absolute;top:2%;left:50%;transform:translateX(-50%);width:min(92%,520px);opacity:.95;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-12px)}}
.hero-avatar{position:relative;z-index:2;filter:drop-shadow(0 18px 18px #0002)}
.pull-me{position:absolute;z-index:16;top:2%;right:4%;background:#fff;border-radius:16px;padding:8px 14px;font-weight:800;box-shadow:0 6px 18px #0002;animation:bob 1.6s ease-in-out infinite}
.pull-me::after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.pull-me.gone{opacity:0;transition:opacity .4s;animation:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.picker{position:absolute;z-index:3;bottom:84px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:#fffd;padding:6px;border-radius:999px;box-shadow:0 6px 18px #0001}
.picker button{width:46px;height:46px;border-radius:50%;border:3px solid transparent;background:#ffe9d6;padding:0;overflow:hidden;cursor:pointer;transition:transform .15s}
.picker button img{width:100%;height:220%;object-fit:cover;object-position:50% 0}
.picker button.on{border-color:var(--acc);transform:scale(1.12)}
.picker .outfit{font-size:22px;background:#fff}

/* bands + cards */
.band{text-align:center}
.steps{display:grid;gap:16px;grid-template-columns:1fr;text-align:left;margin-top:20px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border-radius:24px;padding:22px;box-shadow:0 8px 0 #f0e3cf;transition:transform .2s}
.card:hover{transform:translateY(-4px) rotate(-.5deg)}
.card p{margin:4px 0 0;color:#444}
.num{width:42px;height:42px;border-radius:12px;background:var(--acc);color:#fff;font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;transform:rotate(-6deg)}

.split{display:grid;gap:26px;align-items:center;grid-template-columns:1fr}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}.split.rev .split-copy{order:2}}
.split-copy p{font-size:19px;color:#3a3a3d}
.glowtxt{color:#ff2d95;text-shadow:0 0 12px #ff2d9566}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{padding-left:30px;position:relative;margin:8px 0}
.ticks li::before{content:"✓";position:absolute;left:0;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;top:2px}
.demo{background:#fff;border-radius:28px;padding:18px;box-shadow:0 10px 0 #f0e3cf;text-align:center}
.demo-cap{font-weight:700;background:#fff0f7;border:2px solid #ff2d95;border-radius:14px;padding:10px 14px;margin-top:6px;min-height:50px;transition:opacity .25s}

/* scan animation */
.scan{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.phone{width:150px;height:270px;border-radius:26px;background:#1d1d1f;padding:14px;position:relative;box-shadow:0 10px 0 #e7d9c4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.phone .grid{display:grid;grid-template-columns:repeat(3,34px);gap:5px;padding:7px;background:#000;border-radius:10px;outline:3px solid #fff}
.phone .grid i{height:34px;border-radius:6px;background:#555;animation:fill 6s infinite}
.phone .grid i:nth-child(1){--c:var(--R);animation-delay:.1s}.phone .grid i:nth-child(2){--c:var(--Y);animation-delay:.2s}.phone .grid i:nth-child(3){--c:var(--G);animation-delay:.3s}
.phone .grid i:nth-child(4){--c:var(--B);animation-delay:.4s}.phone .grid i:nth-child(5){--c:var(--R);animation-delay:.5s}.phone .grid i:nth-child(6){--c:var(--O);animation-delay:.6s}
.phone .grid i:nth-child(7){--c:var(--W);animation-delay:.7s}.phone .grid i:nth-child(8){--c:var(--G);animation-delay:.8s}.phone .grid i:nth-child(9){--c:var(--Y);animation-delay:.9s}
@keyframes fill{0%,15%{background:#555}25%,85%{background:var(--c)}100%{background:#555}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 6s infinite}
@keyframes flash{0%,9%{opacity:0}11%{opacity:.85}16%{opacity:0}}
.arrow{font-size:40px;color:var(--acc);animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
#solveCube{width:220px}

/* celebrate */
.party .cheer{display:flex;justify-content:center;gap:clamp(4px,2vw,24px);margin-top:16px;flex-wrap:wrap}
.cheer img{height:clamp(170px,26vw,300px);width:auto}
.bounce.in{animation:hop 1.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px) rotate(-2deg)}60%{transform:translateY(0)}}

.faq{text-align:left;max-width:760px}
.faq h2{text-align:center}
details{background:#fff;border-radius:18px;padding:14px 18px;margin:10px 0;box-shadow:0 5px 0 #f0e3cf}
summary{font-weight:800;cursor:pointer;list-style:none}
summary::after{content:"+";float:right;font-size:22px;line-height:1;color:var(--acc);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:8px 0 2px;color:#444}
.final{text-align:center;padding-bottom:110px}
footer{position:relative;z-index:1;text-align:center;padding:30px 20px 40px;border-top:1px solid var(--line)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.2,1.4,.4,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

.picker .face{background:var(--acc2)}
.try-face,.keep{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.keep{flex-direction:row;justify-content:center;gap:12px}
.linkbtn{background:none;border:0;color:var(--mute);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer}
/* photo fitting screen (shared with the app) */
.modal{position:fixed;inset:0;background:#141414f2;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:50;padding:16px;gap:12px;color:#fff;text-align:center}
.modal.on{display:flex}
.modal .row{display:flex;gap:10px}
.modal button{font:inherit;border:1px solid #ddd;background:#fff;color:#1d1d1f;border-radius:12px;padding:12px 18px;cursor:pointer}
.modal button.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:800}
[hidden]{display:none!important}
.keep .btn{white-space:nowrap;padding:11px 18px;font-size:16px}
.modal .seg{display:flex;background:#ffffff22;border-radius:999px;padding:4px;gap:4px}
.modal .seg button{border:0;border-radius:999px;padding:8px 16px;background:transparent;color:#fff;font-weight:700}
.modal .seg button.on{background:#fff;color:#1d1d1f}
.modal .seg button:disabled{opacity:.4}
.cutwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fffd;border-radius:14px;color:#1d1d1f;font-weight:700}
.cutwait[hidden]{display:none}
.spin{width:38px;height:38px;border-radius:50%;border:5px solid #ff2d9533;border-top-color:#ff2d95;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}