
@font-face{font-family:Oswald;src:url(Oswald.ttf) format("truetype");font-weight:200 700;font-display:swap}
:root{--o:#E8821E;--od:#C4651A;--brass:#c9a46a;--navy:#0B3563;--ink:#050b16;--txt:#e9eef6;--mut:#9fb0c8}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);font:17px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;overflow-x:hidden}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.lang{position:fixed;top:18px;right:20px;z-index:5;display:flex;gap:6px}
.lang button{background:#0b1a33cc;color:var(--txt);border:1px solid #2a4266;border-radius:999px;padding:6px 12px;font:600 13px Oswald,sans-serif;letter-spacing:1px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--o);border-color:var(--o);color:#111}
main{position:relative;z-index:2}
section{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:12vh 7vw}
.hero{position:relative;flex-direction:column;justify-content:flex-end;padding-bottom:13vh;text-align:center}
.word{font:700 clamp(54px,10vw,148px)/.95 Oswald,sans-serif;letter-spacing:.04em;margin:0;color:#f4f7fb;text-shadow:0 0 30px #ffffff40,0 4px 0 #8a96a8}
.word b{color:var(--o);text-shadow:0 0 34px #e8821e99,0 4px 0 var(--od)}
.tag{font-size:clamp(17px,2vw,24px);margin:14px 0 0;color:#eef3fa;text-shadow:0 2px 12px #000,0 0 3px #000}
.soon{display:block;margin-top:16px;font:600 16px Oswald,sans-serif;letter-spacing:5px;text-transform:uppercase;color:#ffe6c9;text-shadow:0 0 6px #000,0 0 14px #000,0 2px 4px #000,0 0 28px #e8821e}
.hero>*:not(.cue){opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.9,.3,1)}
.hero.on>*{opacity:1;transform:none}.hero.on .tag{transition-delay:.25s}.hero.on .soon{transition-delay:.5s}
.cue{position:absolute;bottom:2.5vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font:600 clamp(16px,1.6vw,20px) Oswald,sans-serif;letter-spacing:5px;text-shadow:0 0 14px #000,0 2px 6px #000,0 0 3px #000;animation:cue 1.3s ease-in-out infinite}
.cue::after{content:"";width:20px;height:20px;border-right:4px solid var(--o);border-bottom:4px solid var(--o);transform:rotate(45deg);filter:drop-shadow(0 0 6px #e8821e)}
@keyframes cue{50%{transform:translate(-50%,9px);opacity:.35}}
.card{max-width:760px;background:linear-gradient(160deg,#0d1f3cbf,#071325cc);border:1px solid #23406a;border-radius:26px;padding:38px 42px;-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);box-shadow:0 30px 80px #0009}
.card h2{font:600 clamp(30px,4vw,46px)/1.1 Oswald,sans-serif;margin:0 0 14px;letter-spacing:.02em}.card h2 b{color:var(--o)}
.card p{margin:10px 0;color:#d2dceb}
.facts{margin:16px 0 0;padding-top:12px;border-top:1px solid #23406a;color:#cfe0f5;font-size:15px}
.final{text-align:center}.final .card{text-align:center}
footer{position:relative;z-index:2;text-align:center;color:#c9d6e8;font-size:13px;padding:18px 0 22px;background:#050b16e6}
.reveal{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.9,.3,1)}.reveal.in{opacity:1;transform:none}
.wide{max-width:1080px;width:100%}
.flow{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;position:relative;counter-reset:f}
.flow:before{content:"";position:absolute;left:4%;right:4%;top:23px;height:2px;background:linear-gradient(90deg,#23406a,#e8821e,#23406a)}
.flow:after{content:"";position:absolute;top:17px;left:4%;width:14px;height:14px;border-radius:50%;background:var(--o);box-shadow:0 0 18px 4px #e8821ecc;animation:run 7s linear infinite}
@keyframes run{to{left:calc(96% - 14px)}}
.flow li{position:relative;text-align:center;padding-top:58px;font-size:15px;color:#d2dceb}
.flow li:before{counter-increment:f;content:counter(f);position:absolute;top:0;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background:#0a1a33;border:2px solid var(--o);font:700 22px/44px Oswald,sans-serif;color:#fff;text-align:center;z-index:1}
.flow b{display:block;font:600 18px/1.2 Oswald,sans-serif;letter-spacing:.02em;color:#fff;margin-bottom:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1080px;width:100%}
.two .card{max-width:none}
.card ul{margin:12px 0 0;padding:0;list-style:none}
.card ul li{position:relative;padding:7px 0 7px 30px;color:#d2dceb;border-top:1px solid #1a3150}
.card ul li:first-child{border-top:0}
.card ul li:before{content:"";position:absolute;left:4px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--o);box-shadow:0 0 10px #e8821e}
.who{font:600 13px Oswald,sans-serif;letter-spacing:3px;color:var(--o);text-transform:uppercase}
.split{display:flex;margin:20px 0 8px;border-radius:16px;overflow:hidden;border:1px solid #2f5180;font:600 15px/1.3 Oswald,sans-serif;letter-spacing:.02em}
.split div{padding:16px 14px}.split .m{flex:4;background:linear-gradient(135deg,#e8821e,#c4651a);color:#111}.split .f{flex:1.3;background:#12305a;color:#e9eef6}
.split small{display:block;font:400 13px "Segoe UI",system-ui,sans-serif;opacity:.85;margin-top:4px}
.platewrap{perspective:1100px;margin:26px auto 6px;width:min(560px,100%)}
.frame{position:relative;padding:5.2% 4.2% 7.4%;border-radius:22px;background:linear-gradient(160deg,#f4f6f9,#9aa3ae 35%,#e9edf2 55%,#6d7682);box-shadow:0 0 60px #e8821e55,0 0 120px #7fb4ff33,0 30px 60px #000a;transform-style:preserve-3d;transition:transform .25s ease-out;animation:halo 3.6s ease-in-out infinite}
@keyframes halo{50%{box-shadow:0 0 90px #e8821e99,0 0 160px #7fb4ff55,0 30px 60px #000a}}
.frame .ft,.frame .fb{position:absolute;left:0;right:0;text-align:center;font:600 clamp(9px,2.1vw,14px)/1 Oswald,sans-serif;letter-spacing:.32em;color:#1d2735;text-transform:uppercase}
.frame .ft{top:1.6%}.frame .fb{bottom:2.2%}
.plate{position:relative;aspect-ratio:2/1;border-radius:12px;background:radial-gradient(120% 90% at 30% 20%,#ffffff,#eef2f7 55%,#d9e0ea);box-shadow:inset 0 0 0 2px #c6ccd6,inset 0 -6px 14px #0002;overflow:hidden}
.plate:after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,#ffffffd0 50%,transparent 58%);transform:translateX(-60%);animation:shine 4.2s ease-in-out infinite}
@keyframes shine{0%,35%{transform:translateX(-60%)}75%,100%{transform:translateX(60%)}}
.plate .ca{position:absolute;top:5%;left:0;right:0;text-align:center;font:italic 700 clamp(20px,5.4vw,40px)/1 "Brush Script MT","Segoe Script","Lucida Handwriting","Dancing Script",cursive;color:#c8102e;text-shadow:0 1px 0 #fff}
.plate .tab{position:absolute;top:7%;width:11%;aspect-ratio:1.5;border-radius:3px;font:700 clamp(8px,1.8vw,12px)/1 Oswald,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0005}
.plate .t1{left:4%;background:var(--o);color:#111}.plate .t2{right:4%;background:#0B3563;color:#fff}
.chars{position:absolute;top:28%;left:0;right:0;display:flex;justify-content:center;gap:2.2%;height:46%}
.chars span{display:inline-block;padding:0 .4%;text-align:center;font:600 clamp(40px,12.5vw,98px)/1 Oswald,sans-serif;color:#0b2a6b;text-shadow:0 1px 0 #fff,0 -1px 0 #0003,2px 3px 3px #0004;transform-origin:50% 50%;backface-visibility:hidden}
.chars span.flip{animation:flip .5s ease-in-out}
@keyframes flip{50%{transform:rotateX(90deg)}}
.plate .area{position:absolute;bottom:6%;left:0;right:0;text-align:center;font:600 clamp(10px,2.7vw,18px)/1 Oswald,sans-serif;letter-spacing:.18em;color:#c8102e;text-transform:uppercase;transition:opacity .5s}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.chips span{padding:8px 16px;border-radius:999px;border:1px solid var(--o);color:#fff;background:#e8821e22;box-shadow:0 0 18px #e8821e44;font:600 15px Oswald,sans-serif;letter-spacing:.04em}
.note{color:var(--mut);font-size:14px}
.art{color:#7f91aa;font-size:12px;margin-top:4px}
@media (max-width:900px){.flow{grid-template-columns:1fr;gap:4px;padding-left:4px}.flow:before{left:27px;right:auto;top:6%;bottom:6%;width:2px;height:auto;background:linear-gradient(#23406a,#e8821e,#23406a)}
 .flow:after{left:21px;top:6%;animation:runv 7s linear infinite}@keyframes runv{to{top:calc(94% - 14px)}}
 .flow li{text-align:left;padding:6px 0 14px 66px;min-height:56px}.flow li:before{left:0;transform:none}.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.flow:after,.plate:after,.frame{animation:none}}
@media (max-width:760px){.card{padding:26px 22px}}
@media (prefers-reduced-motion:reduce){.hero>*:not(.cue),.reveal{opacity:1;transform:none;transition:none}.cue,.go:before{animation:none}}

/* слово ч223 (Ш37 П5): две кнопки — клиенту «Get early access», мастеру «Join as a pro»; окно-форма; телефон не берём (TCPA) */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.go{font:600 16px Oswald,sans-serif;letter-spacing:1.5px;padding:13px 22px;border-radius:12px;border:2px solid var(--o);background:var(--o);color:#111;cursor:pointer;box-shadow:0 8px 30px #e8821e55}
.go.alt{background:#0b1a33d9;color:#fff}.go{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,filter .25s}.go:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 36px #e8821e88}.go:before{content:"";position:absolute;top:-10%;left:-70%;width:45%;height:120%;background:linear-gradient(100deg,#fff0,#ffffffa6,#fff0);transform:skewX(-22deg);animation:wipe 3.4s ease-in-out infinite;pointer-events:none}.go.alt:before{animation-delay:1.7s;background:linear-gradient(100deg,#fff0,#ffd2a666,#fff0)}@keyframes wipe{0%,58%{left:-70%}100%{left:135%}} /* слово ч223-р3: без стрелок; по кнопке пробегает блик, как скребок по чистому стеклу */
.hero.on .cta{transition-delay:.75s}
dialog.join{max-width:440px;width:calc(100vw - 32px);background:linear-gradient(160deg,#0d1f3c,#071325);color:var(--txt);border:1px solid #2e5180;border-radius:20px;padding:26px 24px 20px;box-shadow:0 30px 90px #000c}
dialog.join::backdrop{background:#020610b3;backdrop-filter:blur(3px)}
.join h3{font:600 28px/1.1 Oswald,sans-serif;margin:0 0 8px}.join p{margin:0 0 14px;color:#c9d6e8;font-size:15px}
.join label{display:block;font-size:14px;color:#c9d6e8;margin:12px 0 5px}
.join input[type=email],.join input[inputmode]{width:100%;font:16px system-ui,sans-serif;padding:11px 12px;border-radius:10px;border:1px solid #3a5a86;background:#06101f;color:#fff}
.join .kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.join .kinds label{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid #3a5a86;border-radius:10px;padding:8px 6px;cursor:pointer;text-align:center;line-height:1.2}.join .kinds label:has(:checked){border-color:var(--o);background:#e8821e1f}.join .kinds input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:2px solid #9fb0c8;border-radius:50%;display:grid;place-content:center;background:transparent}.join .kinds input:checked{border-color:var(--o)}.join .kinds input:checked:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--o)}
.join .agree{display:flex;gap:9px;align-items:flex-start;font-size:13px}.join .agree input{margin-top:3px}
.join .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}.join .row a{color:var(--mut);font-size:13px}
.join .x{position:absolute;top:10px;right:12px;background:none;border:0;color:#9fb0c8;font-size:26px;cursor:pointer}
.join .msg{min-height:20px;margin-top:10px;font-size:14px;color:#ffb37a}.join .msg.ok{color:#8fe3a8}
.join .sw{display:grid}.join .sw>*{grid-area:1/1}.join.pro .c,.join:not(.pro) .p{visibility:hidden} /* слово ч223-р2: тексты клиента и мастера в одной клетке — окно одного размера */
footer a{color:#c9d6e8}
.endlogo{margin-top:12px;border-radius:24px}
.join .ts{display:flex;justify-content:center;margin:6px 0 0}.join .ts:empty{margin:0}
@media (max-width:560px){.split{font-size:14px;margin:16px 0 6px;border-radius:14px}.split div{padding:11px 10px}.split .f{flex:1.7}.split small{font-size:12px;margin-top:2px}}
