:root{--ink:#1c2150;--ink2:#4a4f7a;--bg:#f7f8ff;--card:#fff;--tint:#eceffd;--sun:#ffc83d;--coral:#ff6b6b;--mint:#2fcf94;--sky:#3d9bff;--vio:#8b5cf6;--brand:#3d9bff;--r:22px;--f:'Fredoka',system-ui,sans-serif;--b:'DM Sans',system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--ink:#eef0ff;--ink2:#aeb3e0;--bg:#0f1230;--card:#181c45;--tint:#14183b}}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font:400 1.05rem/1.65 var(--b);color:var(--ink);background:var(--bg);overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,h4,.logo b,.btn{font-family:var(--f)}
h1{font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.08;font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.15;font-weight:600}
h3{font-weight:600;font-size:1.2rem}
a{color:inherit}:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
.progress{position:fixed;inset:0 auto auto 0;height:4px;width:0;background:linear-gradient(90deg,var(--coral),var(--sun),var(--mint),var(--sky),var(--vio));z-index:100}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem clamp(1rem,4vw,3rem);padding-top:calc(.8rem + env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px)}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1}.logo b{font-size:1.7rem;letter-spacing:.04em}.logo small{font-size:.7rem;color:var(--ink2)}
nav{display:flex;gap:.3rem;align-items:center}nav a:not(.btn){text-decoration:none;padding:.45rem .8rem;border-radius:99px;font-weight:500;font-size:.95rem;transition:background .2s}nav a:not(.btn):hover,nav a.on{background:var(--tint)}
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;background:var(--ink);color:var(--bg);padding:.85rem 1.5rem;border-radius:99px;font-weight:600;font-size:1rem;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--sun)}.btn:active{transform:translateY(0);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}.btn.sm{padding:.55rem 1.1rem;font-size:.92rem}
.mob-only,.burger{display:none}
.burger{width:44px;height:44px;border:0;background:var(--tint);border-radius:50%;cursor:pointer;position:relative}.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:.3s}.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.burger[aria-expanded=true] span:nth-child(1){top:21px;transform:rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){top:21px;transform:rotate(-45deg)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,3rem)}
.hero-copy p{margin:1.4rem 0 2rem;max-width:56ch;color:var(--ink2)}.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.house{max-width:520px;width:100%;justify-self:center}
.roof{height:110px;background:var(--coral);clip-path:polygon(50% 0,100% 100%,0 100%);display:grid;place-items:end center;padding-bottom:.6rem;color:#fff;font:600 1.1rem var(--f);animation:drop .7s cubic-bezier(.3,1.5,.5,1) 1s both}
.blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.blk{border:0;cursor:pointer;border-radius:16px;padding:.8rem .5rem;min-height:92px;color:#14183b;font:600 .82rem/1.2 var(--f);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;animation:drop .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*.09s);transition:transform .25s,box-shadow .25s}
.blk i{font-style:normal;font-size:1.6rem}.blk:hover{transform:translateY(-5px) rotate(-2deg)}.blk[aria-pressed=true]{transform:translateY(-8px);box-shadow:0 8px 0 var(--ink)}
.blk:nth-child(7){grid-column:span 1}
.detail{margin-top:1rem;background:var(--card);border-radius:var(--r);padding:1.2rem 1.4rem;border-left:8px solid var(--c,var(--sun));min-height:130px}
.detail p{color:var(--ink2);margin:.3rem 0 .6rem;font-size:.98rem}.detail a{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.detail.swap{animation:pop .35s}
@keyframes drop{from{opacity:0;transform:translateY(-70px) scale(.9)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:.3;transform:scale(.97)}to{opacity:1;transform:none}}
.strip{background:var(--ink);color:var(--bg);text-align:center;padding:2.2rem clamp(1rem,4vw,3rem)}.strip p{font:600 clamp(1.3rem,3vw,2rem) var(--f)}.strip span{display:block;margin:.5rem auto 0;max-width:70ch;opacity:.8;font-size:.95rem}
.sec{padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,3rem);max-width:1240px;margin:auto}.tint,.cta-band{max-width:none}
.tint{background:var(--tint)}.tint>*{max-width:1180px;margin-inline:auto}
.lead{max-width:62ch;color:var(--ink2);margin:.8rem 0 2rem}.tint .lead{margin-left:auto;margin-right:auto;max-width:1180px;width:100%}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.card{grid-column:span 2;background:var(--card);border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;transition:transform .3s;display:flex;flex-direction:column;gap:.5rem}
.card:first-child,.card:nth-child(4){grid-column:span 3}.card:nth-child(7){grid-column:span 6}
.card::before{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--c);opacity:.9;transition:transform .5s}
.card:hover::before{transform:scale(2.6)}.card:hover{transform:translateY(-4px)}
.card>*{position:relative}.card p{color:var(--ink2);max-width:52ch}.card .ic{font-size:2rem}.card a{margin-top:auto;font-weight:700;text-underline-offset:4px}
.setup{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;align-content:flex-start}
.chip{cursor:pointer;border:2px solid var(--ink);background:transparent;color:var(--ink);padding:.7rem 1.1rem;border-radius:99px;font:500 1rem var(--b);transition:.2s}
.chip[aria-pressed=true]{background:var(--c);border-color:var(--c);color:#14183b;transform:scale(1.05);font-weight:700}
.bundle{background:var(--card);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.count b{font:700 3.5rem/1 var(--f)}.count span{margin-left:.5rem;color:var(--ink2)}
.meter{width:100%;height:12px;background:var(--tint);border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--sky));transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.steps-tabs{display:flex;flex-wrap:wrap;gap:.5rem}.tab{border:0;cursor:pointer;background:var(--tint);color:var(--ink);padding:.7rem 1.2rem;border-radius:99px;font:600 .95rem var(--f);transition:.25s}
.tab[aria-selected=true]{background:var(--ink);color:var(--bg)}
.ac-panel{margin-top:1.2rem;background:var(--card);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;min-height:170px}
.ac-panel .big{font-size:3.6rem;width:110px;height:110px;display:grid;place-items:center;border-radius:50%;background:var(--c)}.ac-panel p{color:var(--ink2);max-width:60ch}.ac-panel.swap{animation:pop .35s}
.kit{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:center}
.kit-form{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;width:100%}
input,select,textarea{font:inherit;padding:.75rem 1rem;border-radius:14px;border:2px solid transparent;background:var(--card);color:var(--ink);width:100%}input:focus,select:focus,textarea:focus{border-color:var(--sky);outline:0}
fieldset{border:0;padding:0}legend{font-weight:500;margin-bottom:.5rem}.swatches{display:flex;gap:.6rem;flex-wrap:wrap}
.sw{width:44px;height:44px;border-radius:50%;border:3px solid var(--card);cursor:pointer;transition:transform .2s;background:var(--c)}.sw[aria-pressed=true]{transform:scale(1.2);box-shadow:0 0 0 3px var(--ink)}
.small{font-size:.92rem;color:var(--ink2)}
.kit-stage{position:relative;height:380px;background:var(--card);border-radius:30px;overflow:hidden}
.bag,.tee,.pencil,.idcard{position:absolute}
.bag{left:12%;top:14%;width:44%;animation:float 5s ease-in-out infinite}.strap{display:block;width:50%;height:50px;margin:0 auto -8px;border:8px solid var(--brand);border-bottom:0;border-radius:40px 40px 0 0;transition:.4s}
.bag-body{background:var(--brand);aspect-ratio:4/5;border-radius:22px 22px 30px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#fff;transition:background .4s;text-align:center;padding:.5rem}
.bag-body em{font:700 2.6rem var(--f);width:68px;height:68px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;font-style:normal}.bag-body strong{font:600 1rem var(--f)}
.tee{right:8%;top:10%;width:36%;aspect-ratio:1;background:var(--sun);clip-path:polygon(25% 0,40% 8%,60% 8%,75% 0,100% 22%,86% 40%,76% 32%,76% 100%,24% 100%,24% 32%,14% 40%,0 22%);display:grid;place-items:center;font:600 .8rem var(--f);color:#14183b;text-align:center;padding-top:25%;animation:float 6s ease-in-out -2s infinite}
.idcard{right:10%;bottom:10%;width:34%;aspect-ratio:1.6;background:#fff;color:#14183b;border-radius:12px;font:600 .8rem var(--f);display:grid;place-items:center;border-bottom:8px solid var(--brand);transform:rotate(6deg);transition:.4s}
.pencil{left:8%;bottom:9%;width:46%;height:16px;background:var(--brand);border-radius:3px 12px 12px 3px;transform:rotate(-10deg);transition:.4s}
@keyframes float{50%{transform:translateY(-12px)}}
.promise h2,.promise .lead{max-width:24ch}.promise .lead{max-width:68ch}
.how{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:s;position:relative}
.how::before{content:"";position:absolute;top:28px;left:5%;height:4px;width:0;background:var(--coral);transition:width 1.6s ease-out;border-radius:4px}.how.go::before{width:90%}
.how li{counter-increment:s;position:relative;padding-top:4.2rem}.how li::before{content:counter(s);position:absolute;top:0;left:0;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 1.4rem var(--f);z-index:1}
.how p{color:var(--ink2);margin-top:.4rem}
.about .lead{margin-bottom:0}
.cta-band{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;background:var(--ink);color:var(--bg);padding:clamp(3rem,7vw,5.5rem) clamp(1rem,6vw,5rem);border-radius:40px 40px 0 0}
.cta-band p{margin-top:1rem;opacity:.85;max-width:50ch}.cta-band form{background:var(--bg);color:var(--ink);padding:1.6rem;border-radius:var(--r);display:flex;flex-direction:column;gap:.9rem}
.cta-band input,.cta-band select,.cta-band textarea{background:var(--tint)}.cta-band .btn:hover{box-shadow:0 8px 0 var(--coral)}
.err{color:var(--coral);font-weight:500;min-height:1.2em}.ok{text-align:center;padding:2rem 0}.ok b{font:700 3rem var(--f);display:block;animation:drop .6s both}
footer{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:3rem clamp(1rem,4vw,3rem) calc(2rem + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);border-top:1px solid rgba(255,255,255,.15)}
footer h4{margin-bottom:.7rem}footer ul{list-style:none;padding:0;display:grid;gap:.35rem;font-size:.95rem;opacity:.85}footer a{text-decoration:none}footer a:hover{text-decoration:underline}.flogo{font:700 1.8rem var(--f);display:block}footer small{opacity:.7}footer p{margin-top:.7rem;max-width:30ch}
@media(max-width:980px){.hero,.setup,.kit,.cta-band{grid-template-columns:1fr}.bento{grid-template-columns:repeat(2,1fr)}.card,.card:first-child,.card:nth-child(4){grid-column:span 1}.card:nth-child(7){grid-column:span 2}footer{grid-template-columns:1fr 1fr}
.desk-only{display:none}.burger{display:block}.mob-only{display:inline-block}
nav{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:stretch;background:var(--bg);padding:5.5rem 1.2rem 1.5rem;gap:.2rem;transform:translateY(-110%);transition:transform .4s cubic-bezier(.5,0,.2,1);z-index:-1;border-radius:0 0 28px 28px;box-shadow:0 20px 40px rgba(0,0,0,.15)}nav.open{transform:none}nav a:not(.btn){font-size:1.15rem;padding:.8rem 1rem}.nav{z-index:60}nav .btn{text-align:center;margin-top:.5rem}}
@media(max-width:620px){.blocks{grid-template-columns:repeat(3,1fr)}.bento{grid-template-columns:1fr}.card:nth-child(7){grid-column:span 1}.how{grid-template-columns:1fr}.how::before{display:none}.ac-panel{grid-template-columns:1fr}.kit-stage{height:320px}footer{grid-template-columns:1fr}.cta-row .btn{width:100%;text-align:center}.roof{height:80px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root[data-theme=dark]{--ink:#eef0ff;--ink2:#aeb3e0;--bg:#0f1230;--card:#181c45;--tint:#14183b}
:root[data-theme=light]{--ink:#1c2150;--ink2:#4a4f7a;--bg:#f7f8ff;--card:#fff;--tint:#eceffd}
::selection{background:var(--sun);color:#14183b}
.logo img{display:block;width:46px;height:auto;border-radius:12px;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}.logo:hover img{transform:rotate(45deg) scale(1.08)}
.logo{flex-direction:row;align-items:center;gap:.7rem}.logo small{font-weight:500}
.flogo{width:64px;height:auto;border-radius:16px;display:block;margin-bottom:.4rem}
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);transition:opacity .5s,visibility .5s}.loader img{width:110px;animation:spin 1.2s cubic-bezier(.6,0,.3,1) infinite}.loader.done{opacity:0;visibility:hidden}
@keyframes spin{to{transform:rotate(360deg)}}
.glow{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,200,61,.16),transparent 70%);opacity:0;transition:opacity .4s}.glow.on{opacity:1}
.theme{width:44px;height:44px;border:0;border-radius:50%;background:var(--tint);color:var(--ink);font-size:1.2rem;cursor:pointer;transition:transform .4s}.theme:hover{transform:rotate(180deg)}
.hero{position:relative;overflow:hidden}.hero>*{position:relative;z-index:1}
.bgstar{position:absolute!important;z-index:0!important;width:min(70vw,640px);right:-12%;top:-8%;opacity:.14;border-radius:80px;transform:rotate(var(--rot,0deg)) translateY(var(--py,0px));pointer-events:none;filter:saturate(1.2)}
.btn{transform:translate(var(--bx,0),var(--by,0))}.btn:hover{transform:translate(var(--bx,0),calc(var(--by,0) - 3px))}
.card,.bundle,.detail{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,box-shadow .3s}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:0 18px 40px rgba(28,33,80,.18)}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}.card:hover::after{opacity:1}
.marquee{overflow:hidden;padding:1.2rem 0;border-block:2px solid var(--tint);white-space:nowrap}.marquee #mq{display:inline-flex;gap:2.5rem;animation:mq 38s linear infinite;font:600 1.3rem var(--f);color:var(--ink2)}.marquee:hover #mq{animation-play-state:paused}.marquee span{display:inline-flex;gap:2.5rem;align-items:center}.marquee span::after{content:"✦";color:var(--sun)}
@keyframes mq{to{transform:translateX(-50%)}}
.faq{max-width:860px}#faq{margin-top:1.5rem;display:grid;gap:.8rem}
details{background:var(--card);border-radius:var(--r);padding:0 1.4rem;transition:box-shadow .3s}details[open]{box-shadow:0 10px 30px rgba(28,33,80,.12)}
summary{cursor:pointer;list-style:none;padding:1.1rem 0;font:600 1.1rem var(--f);display:flex;justify-content:space-between;gap:1rem}summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;line-height:1;transition:transform .3s;color:var(--coral)}details[open] summary::after{transform:rotate(135deg)}
details p{padding-bottom:1.2rem;color:var(--ink2);animation:pop .35s}
.mails{display:grid;gap:.6rem;margin-top:1.5rem;max-width:420px}
.mails button{cursor:pointer;text-align:left;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:inherit;border-radius:16px;padding:.8rem 1.1rem;font:500 1rem var(--b);display:flex;flex-direction:column;transition:.25s;position:relative}
.mails button:hover{background:rgba(255,255,255,.16);transform:translateX(6px)}.mails b{font:600 .85rem var(--f);opacity:.75}.mails button.copied::after{content:"Copied";position:absolute;right:1rem;top:50%;translate:0 -50%;background:var(--sun);color:#14183b;padding:.15rem .6rem;border-radius:99px;font:600 .8rem var(--f)}
.ok a{color:var(--sky);font-weight:700}
@media(max-width:980px){.theme{margin-left:auto}.bgstar{width:90vw;right:-30%}}
@media(hover:none){.glow{display:none}}
/* ---- layout fixes v3 ---- */
:root{--px:max(clamp(1rem,4vw,3rem),calc((100% - 1180px)/2))}
.nav,.hero,.strip,footer{padding-inline:var(--px)}
.sec,.tint{max-width:none;padding-inline:var(--px)}
.cta-band{padding-inline:max(clamp(1rem,6vw,5rem),calc((100% - 1180px)/2))}
.tint>*{max-width:none;margin-inline:0}.tint .lead{max-width:62ch;width:auto;margin:.8rem 0 2rem}
.faq>*{max-width:860px}.promise h2{max-width:26ch}
.bento{grid-auto-flow:row}
.card,.card:first-child,.card:nth-child(4),.card:nth-child(7){grid-column:span 2}
.card:nth-child(-n+2),.card:nth-child(n+6){grid-column:span 3}
.card p{max-width:none}
.bgstar{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);border-radius:0}
.blk:nth-child(7){grid-column:span 2}
.house{min-width:0}.hero-copy,.setup>*,.kit>*,.cta-band>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:980px){
 .card,.card:nth-child(-n+2),.card:nth-child(n+6),.card:nth-child(7){grid-column:span 1}
 .card:nth-child(7){grid-column:span 2}
 .hero{padding-block:2rem 3rem}.house{max-width:560px}
 .sec{padding-block:3.2rem}
}
@media(max-width:620px){
 .card,.card:nth-child(7){grid-column:span 1}
 .blk:nth-child(7){grid-column:span 3}
 .blk{min-height:84px;font-size:.78rem}.roof{font-size:1rem}
 .logo small{font-size:.65rem}.nav{gap:.5rem}
 .bgstar{opacity:.1}.theme{width:40px;height:40px}.burger{width:40px;height:40px}.burger span{left:11px;right:11px}.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:23px}.burger[aria-expanded=true] span:nth-child(1),.burger[aria-expanded=true] span:nth-child(2){top:19px}
 .detail{padding:1rem}.ac-panel .big{width:80px;height:80px;font-size:2.6rem}
 .tab{flex:1 1 auto;text-align:center}.kit-stage{height:300px}.bag{left:8%;width:48%}.tee{top:8%}.cta-band{border-radius:28px 28px 0 0}.mails{max-width:none}
}
@media(max-width:360px){h1{font-size:2rem}.logo small{display:none}.blocks{gap:6px}.blk{padding:.6rem .3rem}}
@media(min-width:1500px){body{font-size:1.1rem}}
@media(max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bento>.card{grid-column:auto!important}.bento>.card:nth-child(7){grid-column:span 2!important}}
@media(max-width:620px){.bento{grid-template-columns:minmax(0,1fr)}.bento>.card:nth-child(7){grid-column:auto!important}}
.kit-stage{height:auto;aspect-ratio:1.15;min-height:300px;container-type:inline-size}
.bag{left:7%;top:9%;width:40%}
.tee{right:6%;top:7%;width:40%;padding-top:0;align-content:center;font-size:clamp(.6rem,2.6cqw,.85rem);line-height:1.15;padding-inline:26%}
.idcard{right:7%;bottom:8%;width:38%;font-size:clamp(.6rem,2.4cqw,.85rem)}
.pencil{left:7%;bottom:9%;width:42%;height:clamp(10px,3cqw,16px)}
.bag-body strong{font-size:clamp(.7rem,3cqw,1rem)}.bag-body em{width:clamp(44px,14cqw,68px);height:clamp(44px,14cqw,68px);font-size:clamp(1.6rem,6cqw,2.6rem)}
@media(max-width:620px){.kit-stage{aspect-ratio:1;min-height:0}}
.bag{width:37%}