*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--lime:#b8f200;--lime-glow:#c8ff30;--aqua:#00dce8;--aqua-glow:#40f0f8;--cobalt:#4f7df3;--cobalt-glow:#7b9eff;--bg:#fafbfd;--text:#1a1d24;--text-secondary:#555b68;--battery-body-bg:#f1f3f7;--battery-border:#d5dae3;--cta-bg:#4f7df3;--cta-text:#fff;--chip-size:clamp(36px,5vw,44px)}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:130vh;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.page{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3vw,32px) clamp(16px,4vw,40px);position:relative;flex:1}header{width:100%;display:flex;justify-content:center;padding:clamp(12px,2.5vw,20px) 0;z-index:10}header img{height:clamp(28px,4.5vw,38px);width:auto;display:block}.hero{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(16px,3vh,32px);position:relative;z-index:2}h1{font-size:clamp(26px,5.5vw,44px);font-weight:700;line-height:1.15;letter-spacing:-0.02em;color:var(--text);max-width:480px;margin-bottom:clamp(8px,1.5vh,14px)}h1 span{background:linear-gradient(135deg,#4f7df3,#00dce8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:clamp(15px,2.8vw,18px);font-weight:400;color:var(--text-secondary);max-width:420px;line-height:1.45;margin-bottom:clamp(20px,3.5vh,32px)}.battery-stage{position:relative;width:clamp(260px,60vw,340px);height:clamp(130px,28vw,170px);display:flex;align-items:center;justify-content:center;margin-bottom:clamp(16px,2.5vh,24px);z-index:3;cursor:default}.battery-glow{position:absolute;width:clamp(180px,42vw,260px);height:clamp(180px,42vw,260px);border-radius:50%;pointer-events:none;z-index:0;transition:transform .15s ease-out,opacity .4s;opacity:.55;filter:blur(50px);will-change:transform}.battery-assembly{position:relative;z-index:2;display:flex;align-items:center}.battery-body{width:clamp(220px,50vw,290px);height:clamp(90px,19vw,118px);border-radius:clamp(22px,4.5vw,28px);border:2.5px solid var(--battery-border);background:var(--battery-body-bg);position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.7);transition:border-color .4s,box-shadow .4s}.battery-body::after{content:'';position:absolute;top:0;left:0;right:0;height:48%;background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,0));border-radius:clamp(20px,4vw,26px) clamp(20px,4vw,26px) 0 0;pointer-events:none;z-index:5}.battery-nub{width:clamp(10px,2.2vw,14px);height:clamp(30px,6.5vw,42px);border-radius:clamp(3px,0.7vw,5px);background:var(--battery-border);margin-left:-1px;z-index:1;flex-shrink:0;transition:background .4s}.battery-fill-area{position:absolute;left:clamp(6px,1.3vw,9px);top:clamp(6px,1.3vw,9px);bottom:clamp(6px,1.3vw,9px);width:76%;border-radius:clamp(16px,3.2vw,20px);overflow:hidden;z-index:3;transition:width .5s cubic-bezier(.34,1.56,.64,1)}.battery-fill-inner{width:100%;height:100%;border-radius:inherit;transition:background .45s ease;position:relative}.battery-fill-inner.solid{background:var(--lime)}.battery-fill-inner.gradient{background:linear-gradient(135deg,var(--lime),var(--aqua))}.battery-fill-inner.shimmer{background:linear-gradient(105deg,#b8f200 0,#00dce8 30%,#4f7df3 55%,#00dce8 75%,#b8f200 100%);background-size:220% 100%;animation:shimmerFlow 2.6s ease-in-out infinite}.battery-fill-inner.wave-active::before{content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);border-radius:inherit;animation:chargeWave .75s ease-out forwards;z-index:6;pointer-events:none}@keyframes shimmerFlow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes chargeWave{0%{left:-60%}100%{left:110%}}.color-chips{display:flex;gap:clamp(10px,2.2vw,14px);flex-wrap:wrap;justify-content:center;margin-bottom:clamp(18px,3vh,28px);z-index:3}.color-chip{width:var(--chip-size);height:var(--chip-size);border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;position:relative;outline:none;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.08);flex-shrink:0}.color-chip:focus-visible{border-color:#4f7df3;box-shadow:0 0 0 4px rgba(79,125,243,.25)}.color-chip.active{border-color:#1a1d24;box-shadow:0 0 0 5px rgba(26,29,36,.1),0 4px 14px rgba(0,0,0,.15);transform:scale(1.08)}.color-chip.spring{animation:chipSpring .4s cubic-bezier(.34,1.56,.64,1)}@keyframes chipSpring{0%{transform:scale(1)}30%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}.chip-lime{background:#b8f200}.chip-aqua{background:#00dce8}.chip-cobalt{background:#4f7df3}.chip-gradient{background:linear-gradient(135deg,#b8f200,#00dce8)}.chip-shimmer{background:linear-gradient(135deg,#4f7df3,#b8f200,#00dce8);background-size:200% 200%;animation:chipShimmer 3s ease-in-out infinite}@keyframes chipShimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.cta-wrap{position:sticky;bottom:clamp(16px,3vh,28px);z-index:20;width:100%;display:flex;justify-content:center;margin-top:clamp(8px,1.5vh,16px)}.cta-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--cta-bg);color:var(--cta-text);font-family:inherit;font-weight:700;font-size:clamp(15px,2.6vw,17px);padding:clamp(14px,2.2vh,18px) clamp(28px,5vw,44px);border-radius:50px;border:none;cursor:pointer;letter-spacing:-0.01em;transition:transform .35s cubic-bezier(.25,.8,.25,1.4),box-shadow .35s,background .5s;box-shadow:0 6px 22px rgba(79,125,243,.35),0 2px 6px rgba(0,0,0,.08);position:relative;overflow:hidden;outline:none;-webkit-tap-highlight-color:transparent;white-space:nowrap}.cta-button::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.22) 55%,transparent 65%);transform:translateX(-100%);transition:transform .55s ease;pointer-events:none;z-index:2}.cta-button:hover::before,.cta-button:active::before{transform:translateX(100%)}.cta-button:hover{box-shadow:0 10px 30px rgba(79,125,243,.5),0 4px 10px rgba(0,0,0,.1);transform:translateY(-2px)}.cta-button:active{transform:scale(.96);transition:transform .12s ease}.cta-button:focus-visible{box-shadow:0 0 0 5px rgba(79,125,243,.3),0 6px 22px rgba(79,125,243,.4)}.cta-button.magnetic{transition:transform .5s cubic-bezier(.25,.8,.25,1.4),box-shadow .5s,background .5s}.preview-sentinel{position:absolute;bottom:15vh;height:1px;width:1px;pointer-events:none;opacity:0}footer{width:100%;text-align:center;padding:clamp(20px,3vh,32px) 0;z-index:1;display:flex;justify-content:center;align-items:center}footer img{height:clamp(22px,3.5vw,28px);width:auto;opacity:.7;display:block}@media(max-width:480px){.battery-stage{width:clamp(220px,78vw,280px);height:clamp(110px,32vw,140px)}.battery-body{width:clamp(185px,64vw,240px);height:clamp(74px,24vw,100px);border-radius:clamp(18px,4vw,24px)}.battery-nub{width:clamp(8px,2vw,12px);height:clamp(24px,5.5vw,34px)}.battery-fill-area{left:clamp(5px,1.2vw,7px);top:clamp(5px,1.2vw,7px);bottom:clamp(5px,1.2vw,7px);border-radius:clamp(13px,2.8vw,17px)}.cta-button{width:88%;max-width:360px;text-align:center}}@media(min-width:768px){.battery-stage{width:340px;height:170px}.battery-body{width:290px;height:118px}}