.hero{position:relative;overflow:hidden;padding-block:clamp(48px,8vw,96px) clamp(64px,10vw,120px);background:radial-gradient(900px 520px at 78% -10%,rgba(159,216,182,.12),transparent 60%),radial-gradient(680px 480px at 8% 18%,rgba(255,209,102,.08),transparent 55%)}.hero-glow{position:absolute;width:520px;height:520px;right:-120px;top:40px;background:var(--grad-hero);filter:blur(140px);opacity:.16;border-radius:50%;z-index:0}.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.hero-copy{animation:rise .8s ease both}.hero-title{font-size:clamp(2.5rem,5.6vw,4.1rem);margin-bottom:22px}.hero-sub{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--text-dim);max-width:34em;margin-bottom:34px}.hero-actions{margin-bottom:38px}.hero-proof{display:flex;gap:38px;list-style:none}.hero-proof li{display:flex;flex-direction:column}.hero-proof strong{font-family:var(--font-display);font-size:1.9rem;font-weight:700;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-proof span{font-size:.85rem;color:var(--text-faint);letter-spacing:.02em}.hero-visual{position:relative;display:grid;place-items:center;animation:rise 1s ease .15s both}.hero-board{width:min(420px,100%)}@media(max-width:920px){.hero-inner{grid-template-columns:1fr;text-align:center;gap:48px}.hero-sub{margin-inline:auto}.hero-actions .store-buttons,.hero-proof{justify-content:center}.hero-board{max-width:380px;margin-inline:auto}}@media(max-width:480px){.hero-proof{gap:26px}}.pb{width:min(420px,100%);display:flex;flex-direction:column;gap:12px}.pb-stage{position:relative;aspect-ratio:1;padding:14px;border-radius:22px;background:linear-gradient(160deg,var(--surface-2),var(--bg-2));border:1px solid var(--border-strong);box-shadow:var(--shadow-md),var(--shadow-glow);touch-action:none;overflow:hidden}.pb-cells,.pb-rects{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(var(--n, 5),1fr);grid-template-rows:repeat(var(--n, 5),1fr);gap:5px}.pb-rects{z-index:2}.pb-cell{display:grid;place-items:center;border-radius:7px;background:#ffffff0a}.pb-cell b{font-family:var(--font-display);font-weight:700;font-size:clamp(.8rem,2.2vw,1.15rem);color:var(--text)}.pb-rect{display:grid;place-items:center;border-radius:9px;border:1.5px solid rgba(255,255,255,.5);box-shadow:0 4px 12px #00000047;cursor:pointer}.pb-rect span{font-family:var(--font-display);font-weight:700;font-size:clamp(.85rem,2.3vw,1.25rem);color:#181d25}.pb-rect.pop{animation:pb-pop .42s cubic-bezier(.2,1.5,.4,1)}@keyframes pb-pop{0%{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}.pb-preview{border-radius:9px;opacity:.85;border:2px dashed rgba(255,255,255,.9);z-index:3;pointer-events:none}.pb-msg{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none}.pb-try,.pb-win{display:none}.pb-msg[data-state=try]{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(2px);pointer-events:auto}.pb-msg[data-state=try] .pb-try{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#0e1218;background:var(--grad-btn);box-shadow:0 12px 30px #6fc49b66;animation:pb-breathe 1.8s ease-in-out infinite}.pb-try svg{width:18px;height:18px}@keyframes pb-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.pb-msg[data-state=win]{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(3px);pointer-events:auto}.pb-msg[data-state=win] .pb-win{display:flex;flex-direction:column;align-items:center;gap:16px;animation:pb-rise .4s ease both}.pb-win b{font-family:var(--font-display);font-size:1.5rem;color:var(--green-bright)}.pb-next{padding:12px 24px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:#0e1218;background:var(--grad-btn);box-shadow:0 10px 26px #6fc49b57}@keyframes pb-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.pb-bar{display:flex;align-items:center;gap:12px;padding:0 4px}.pb-level{flex:none;font-family:var(--font-display);font-weight:700;font-size:.82rem;color:#0e1218;background:var(--green);padding:5px 12px;border-radius:999px}.pb-tip{font-size:.86rem;color:var(--text-dim)}.pb-confetti{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;z-index:5;animation:pb-fall 1.3s ease-in forwards}@keyframes pb-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(360px) rotate(540deg);opacity:0}}@media(prefers-reduced-motion:reduce){.pb-try,.pb-confetti{animation:none}}.features-head{text-align:center;max-width:640px;margin-inline:auto;margin-bottom:clamp(40px,6vw,68px)}.features-head h2{font-size:clamp(2rem,4.4vw,3rem)}.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.bento-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease,opacity .7s ease}.bento-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}.bento-card h3{font-size:1.2rem;color:var(--green)}.bento-card p{color:var(--text-dim);font-size:.95rem;margin-top:auto}.span-2{grid-column:span 2}.bento-board{flex:1;display:grid;place-items:center;min-height:150px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border);padding:16px}.mini{position:relative;display:grid;width:min(180px,100%);aspect-ratio:1}.mini-cells,.mini-rects{grid-area:1 / 1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}.mini-cell{border-radius:6px;background:#ffffff0a}.mini-rect{display:grid;place-items:center;border-radius:8px;border:1.5px solid rgba(255,255,255,.5)}.mini-rect span{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:#181d25}.bento-text{display:flex;flex-direction:column;gap:8px}.bento-regions{display:flex;gap:10px;height:92px;align-items:center;justify-content:center;border-radius:14px;background:var(--bg-2);border:1px solid var(--border)}.bento-regions span{width:38px;height:38px;border-radius:11px;box-shadow:var(--shadow-sm);animation:float-y 3s ease-in-out infinite}.bento-regions span:nth-child(2){animation-delay:.2s}.bento-regions span:nth-child(3){animation-delay:.4s}.bento-regions span:nth-child(4){animation-delay:.6s}.bento-regions span:nth-child(5){animation-delay:.8s}.bento-modes{display:flex;flex-direction:column;gap:10px}.mode-row{display:flex;align-items:center;gap:12px}.mode-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--mc);background:color-mix(in srgb,var(--mc) 16%,var(--bg-2));border:1px solid color-mix(in srgb,var(--mc) 30%,transparent)}.mode-ico svg{width:19px;height:19px}.mode-text{display:flex;flex-direction:column;line-height:1.25}.mode-text b{font-family:var(--font-display);font-size:.94rem;color:var(--text)}.mode-text small{font-size:.78rem;color:var(--text-faint)}.bento-powerups{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pu{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--text);padding:9px 10px;border-radius:11px;background:color-mix(in srgb,currentColor 14%,transparent);border:1px solid color-mix(in srgb,currentColor 30%,transparent)}.pu-ico{display:inline-grid;place-items:center}.pu-ico svg{width:18px;height:18px}.bento-levels{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-height:64px}.lvl{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;background:var(--bg-2);border:1px solid var(--border);color:var(--text-faint)}.lvl.done{color:#0e1218;background:linear-gradient(135deg,var(--green-bright),var(--green));border-color:transparent}.lvl.now{color:#0e1218;background:linear-gradient(135deg,var(--gold),#f0b429);border-color:transparent;box-shadow:0 0 18px -2px var(--gold);animation:float-y 2.4s ease-in-out infinite}.lvl.lock{color:var(--text-faint)}.lvl.lock svg{width:20px;height:20px}.bento-badge{width:60px;height:60px;display:grid;place-items:center;border-radius:16px;background:var(--bg-2);border:1px solid var(--border);color:var(--green);animation:float-y 5s ease-in-out infinite}.bento-badge svg{width:30px;height:30px}@media(prefers-reduced-motion:reduce){.bento-regions span,.lvl.now,.bento-badge{animation:none}}@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.span-2{grid-column:span 2}}@media(max-width:560px){.bento{grid-template-columns:1fr}.span-2{grid-column:span 1}}.how-head{text-align:center;max-width:640px;margin-inline:auto;margin-bottom:clamp(40px,6vw,68px)}.how-head h2{font-size:clamp(2rem,4.4vw,3rem)}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none}.how-step{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,opacity .7s ease}.how-step:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}.how-visual{position:relative;display:grid;width:min(200px,70%);aspect-ratio:1;margin:0 auto 14px;padding:12px;border-radius:16px;background:var(--bg-2);border:1px solid var(--border)}.hv-cells,.hv-rects{grid-area:1 / 1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px;padding:12px}.hv-cell{display:grid;place-items:center;border-radius:6px;background:#ffffff0d}.hv-clue{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--text)}.hv-rect{display:grid;place-items:center;border-radius:7px;border:1.5px solid rgba(255,255,255,.5);animation:rect-in .4s ease both}.hv-rect span{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#181d25}@keyframes rect-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.how-num{font-family:var(--font-display);font-weight:700;font-size:1.5rem}.how-step h3{font-size:1.25rem}.how-step p{color:var(--text-dim);font-size:.95rem}@media(max-width:820px){.how-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}.cta-card{position:relative;overflow:hidden;text-align:center;padding:clamp(40px,7vw,80px) clamp(24px,5vw,64px);border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--surface-2),var(--bg-2));border:1px solid var(--border-strong);box-shadow:var(--shadow-md)}.cta-ring{position:absolute;width:460px;height:460px;top:-220px;left:50%;transform:translate(-50%);background:var(--grad-hero);filter:blur(120px);opacity:.2;border-radius:50%}.cta-content{position:relative;z-index:1}.cta-chips{display:flex;justify-content:center;gap:10px;margin-bottom:26px}.cta-chip{width:34px;height:34px;border-radius:10px;box-shadow:0 6px 16px #00000059;animation:float-y 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .15s)}.cta-card h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:16px}.cta-card p{color:var(--text-dim);font-size:1.05rem;max-width:40ch;margin:0 auto 32px}.cta-actions{display:flex;justify-content:center}@media(prefers-reduced-motion:reduce){.cta-chip{animation:none}}