:root{--ink:#0E1519;--ink-2:#0A1013;--pale:#EEF4F6;--surface:#FFF;--text:#111A1F;--muted:#586A72;--teal:#35B6C9;--teal-deep:#1E7E8E;--cta:#FF6A3C;--cta-deep:#EF5427;--line:#D5E0E4;--pos:40%}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;overflow-x:hidden}body{font-family:"Figtree",system-ui,sans-serif;color:var(--text);background:var(--pale);-webkit-font-smoothing:antialiased}.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}.stageField{position:relative;flex:1 1 auto;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(18px,4vw,40px) 16px clamp(26px,5vw,54px);overflow:hidden}.stageField::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 46%,rgba(53,182,201,.16),rgba(14,21,25,0) 58%);pointer-events:none}.brandbar{position:absolute;top:clamp(14px,3vw,26px);left:clamp(16px,4vw,40px);display:flex;align-items:center;gap:10px;z-index:3}.brandbar img{height:clamp(24px,4vw,32px);width:auto;display:block}.wordmark{font-family:"Syne",sans-serif;font-weight:800;letter-spacing:.01em;color:#EAF6F8;font-size:clamp(15px,2.4vw,18px)}.stage{position:relative;width:min(560px,92vw);aspect-ratio:8/5;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);z-index:2;touch-action:pan-y;cursor:ew-resize}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:clamp(8px,1.6vw,12px);padding:clamp(12px,2.4vw,18px)}.grid.locked{background:linear-gradient(160deg,#141E23,#0C1418)}.grid.revealed{background:linear-gradient(160deg,#FFF,#EAF3F5);clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}.card{border-radius:12px;padding:clamp(8px,1.5vw,11px);display:flex;flex-direction:column;gap:8px}.locked .card{background:#1B272C;border:1px dashed #33474E}.revealed .card{background:var(--surface);border:1px solid var(--line)}.thumb{border-radius:8px;flex:1 1 auto;min-height:0}.locked .thumb{background:repeating-linear-gradient(45deg,#243238 0 7px,#1E2A30 7px 14px)}.revealed .card:nth-child(3n+1) .thumb{background:linear-gradient(140deg,#BEE7EE,#8FD4E0)}.revealed .card:nth-child(3n+2) .thumb{background:linear-gradient(140deg,#FFD3C2,#FFB59B)}.revealed .card:nth-child(3n+3) .thumb{background:linear-gradient(140deg,#CFE2E8,#AFC9D2)}.row{display:flex;align-items:center;gap:7px}.dot{width:clamp(14px,2.4vw,18px);height:clamp(14px,2.4vw,18px);border-radius:50%;flex:none}.locked .dot{background:#33474E}.revealed .dot{background:conic-gradient(from 210deg,var(--teal),var(--teal-deep))}.bars{flex:1 1 auto;display:flex;flex-direction:column;gap:5px}.bar{height:5px;border-radius:3px}.bar.s{width:62%}.locked .bar{background:#2C3E45}.revealed .bar{background:#DDE8EB}.locked-veil{position:absolute;inset:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:inset(0 0 0 var(--pos));display:flex;align-items:center;justify-content:center;background:rgba(10,16,19,.28);pointer-events:none}.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-weight:700;font-size:clamp(12px,2vw,13px);letter-spacing:.02em;background:rgba(13,20,23,.72);color:#CFE0E4;border:1px solid rgba(120,150,158,.35)}.chip svg{width:15px;height:15px;display:block}.handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:linear-gradient(var(--teal),#EAF6F8);z-index:4;cursor:ew-resize}.grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(40px,7vw,50px);height:clamp(40px,7vw,50px);border-radius:50%;background:#EAF6F8;box-shadow:0 6px 18px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:var(--ink)}.grip svg{width:20px;height:20px;display:block}.handle:focus-visible{outline:none}.handle:focus-visible .grip{outline:3px solid var(--cta);outline-offset:3px}.textField{flex:0 0 auto;background:var(--pale);text-align:center;padding:clamp(24px,5vw,44px) 16px clamp(18px,3vw,26px);display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vw,18px)}h1{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(38px,9vw,74px);line-height:.98;letter-spacing:-.01em;color:var(--text)}h1 .kw{color:var(--teal-deep)}.headline{filter:blur(9px);opacity:0;transition:filter .9s ease,opacity .9s ease}.headline.in{filter:blur(0);opacity:1}.sub{max-width:34ch;font-size:clamp(15px,2.6vw,18px);line-height:1.5;color:var(--muted)}.cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(2px,1vw,6px);padding:clamp(15px,2.6vw,18px) clamp(28px,5vw,40px);border-radius:999px;background:var(--cta);color:#fff;font-family:"Syne",sans-serif;font-weight:700;font-size:clamp(16px,2.8vw,19px);text-decoration:none;box-shadow:0 16px 34px -14px rgba(255,106,60,.75);transition:transform .18s ease,background .18s ease}.cta:hover{background:var(--cta-deep);transform:translateY(-2px)}.cta:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}.cta .lock,.cta .open{grid-area:1/1;width:20px;height:20px;display:block}.cta .icn{position:relative;width:20px;height:20px;display:grid}.cta .open{opacity:0;transform:scale(.7);transition:opacity .3s ease,transform .3s ease}.cta .lock{opacity:1;transition:opacity .3s ease}.cta:hover .open{opacity:1;transform:scale(1)}.cta:hover .lock{opacity:0}footer{font-family:"Syne",sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;color:var(--muted);padding-top:clamp(6px,1.4vw,12px)}@media(max-width:560px){.brandbar{position:static;justify-content:center;margin-bottom:16px}.stageField{padding-top:clamp(20px,6vw,30px)}}@media(prefers-reduced-motion:reduce){.headline{filter:none;opacity:1;transition:none}.cta{transition:none}.grid.revealed,.cta .open,.cta .lock{transition:none}}html,body{max-width:100%;overflow-x:clip}