@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@300;400;500;600&display=swap');
:root{--bg:#0c0c0b;--cream:#f5f3ee;--ink:#14130f;--ink-soft:#5a564c;--line:#e0dbcf;--accent:#f04c23;--accent-dark:#c93c19;--green:#2c6b3f;--on:#f2efe8;--on-s:#b6b2a7;--glass:rgba(16,15,13,.76);--glass-b:rgba(255,255,255,.14);
--display:'Unbounded','Manrope',sans-serif;--body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--on);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
canvas{display:block;touch-action:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--accent);color:#fff}
.logo{font-family:var(--display);font-weight:500;letter-spacing:.2em;font-size:12px;text-transform:uppercase;display:flex;align-items:center;gap:11px}
.logo i{width:20px;height:20px;border-radius:50% 50% 50% 0;background:linear-gradient(135deg,#4aa564,var(--green));display:inline-block;transform:rotate(-45deg);box-shadow:0 0 18px rgba(74,165,100,.55)}
.kick{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.kick::before{content:'';width:34px;height:1px;background:currentColor}
.t-xl{font-family:var(--display);font-weight:500;line-height:.98;letter-spacing:-.04em;font-size:clamp(40px,7.2vw,112px)}
.t-l{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.03em;font-size:clamp(28px,4.4vw,64px)}
.t-m{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.02em;font-size:clamp(20px,2.4vw,32px)}
.lead{font-size:clamp(15px,1.35vw,19px);color:var(--on-s);max-width:30em}
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:26px;box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.01em;transition:transform .3s var(--ease),background .2s,box-shadow .3s;box-shadow:0 10px 34px rgba(240,76,35,.4)}
.btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 16px 44px rgba(240,76,35,.5)}
.btn::after{content:'→';font-size:18px;transition:transform .3s var(--ease)}
.btn:hover::after{transform:translateX(4px)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);box-shadow:none;}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(28,27,24,.62);border:1px solid var(--glass-b);gap:2px;}
.seg button{min-height:44px;padding:0 22px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--on-s);transition:all .3s var(--ease)}
.seg button.on{background:var(--on);color:#0c0c0b}
.num{font-family:var(--display);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;outline:0;cursor:grab;--v:0%}
.range::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--v),rgba(255,255,255,.28) var(--v))}
.range::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.28)}
.range::-moz-range-progress{height:3px;border-radius:3px;background:var(--accent)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-13.5px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(240,76,35,.28),0 6px 20px rgba(0,0,0,.5);transition:box-shadow .2s}
.range:active::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(240,76,35,.35),0 6px 20px rgba(0,0,0,.5)}
.range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(240,76,35,.28)}
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
/* заставка */
.curtain{position:fixed;inset:0;z-index:100;background:#0a0a09;display:grid;place-items:center;transition:opacity 1.3s var(--ease),visibility 1.3s;color:var(--on)}
.curtain.out{opacity:0;visibility:hidden;pointer-events:none}
.curtain .in{text-align:center;display:grid;gap:22px;justify-items:center;transition:transform 1.3s var(--ease)}
.curtain.out .in{transform:scale(1.06)}
.curtain .logo{font-size:13px}
.curtain h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,84px);letter-spacing:-.04em;line-height:1}
.curtain p{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-s)}
.curtain .bar{width:min(260px,60vw);height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.curtain .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}

.back{display:inline-block;padding:13px 12px;margin:-13px -12px}
.scheme{position:fixed;left:14px;bottom:4px;z-index:25;font-size:12px;line-height:1.5;color:rgba(255,255,255,.82);background:rgba(10,10,9,.66);padding:2px 11px;border-radius:999px;pointer-events:none;letter-spacing:.02em;white-space:nowrap}
@media(max-width:820px){.scheme{left:12px;right:auto;bottom:auto;top:56px;font-size:12px;white-space:nowrap;max-width:calc(100vw - 24px)}}