:root{color-scheme:light;--ink:#25283f;--muted:#515772}
*{box-sizing:border-box}
html{min-height:100%;background:#edf0fa}
body{margin:0;min-height:100svh;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}
.atmosphere,#water,.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.atmosphere{z-index:-3;background:radial-gradient(ellipse at 18% 24%,#fff 0%,transparent 48%),radial-gradient(ellipse at 77% 24%,#d0d8ff 0%,transparent 52%),radial-gradient(ellipse at 18% 86%,#a8c9f1 0%,transparent 50%),radial-gradient(ellipse at 90% 80%,#cbb6f0 0%,transparent 55%),#eff2fb}
#water{z-index:-2;opacity:0;transition:opacity 1.4s ease}
#water.ready{opacity:1}
.grain{z-index:-1;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.6' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
main{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:64px 24px;overflow:hidden}


.brand-mark{display:block;width:76px;height:48px;margin-bottom:40px;overflow:visible;stroke:#586082;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #ffffffd9)}
.mark-c{stroke:#7874a2}
h1{position:relative;margin:0;text-align:center;font-size:clamp(64px,8.9vw,142px);font-weight:500;line-height:.94;letter-spacing:-.065em}
h1 span{display:block}
h1 span:first-child{font-size:.56em;letter-spacing:.24em;text-indent:.24em;font-weight:400;margin-bottom:18px}
h1 span+span{margin-top:0}
.tagline{margin:32px 0 0;font-size:clamp(18px,1.6vw,23px);font-weight:400;letter-spacing:-.035em;color:var(--muted)}
.tagline span{color:#7770b9}
.contacts{display:flex;gap:12px;margin-top:64px;max-width:100%;justify-content:center}
.glass{min-height:60px;padding:18px 21px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:22px;border:1px solid #ffffffa8;background:linear-gradient(130deg,#ffffff85,#ffffff36 65%,#ffffff6b);box-shadow:inset 0 1px 0 #fffffff2,inset 0 -1px 0 #ffffff7a,0 8px 30px #4c57820a;backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);text-decoration:none;color:#343b59;font-size:14px;letter-spacing:-.02em;transition:transform .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap}
.glass>svg{width:19px;height:19px;flex:none;opacity:.75}
.arrow{margin-left:12px;opacity:.55;font-size:19px;line-height:1;transition:transform .25s}
.glass:focus-visible{outline:2px solid #4e4d87;outline-offset:5px}
.glass:active{transform:scale(.98)}
.edge-line{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);width:34px;height:3px;background:#ffffff90;border-radius:3px;pointer-events:none}
@media(hover:hover){.glass:hover{background:linear-gradient(130deg,#ffffffc7,#ffffff65 65%,#ffffff9c);transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 14px 40px #646da219}.glass:hover .arrow{transform:translate(2px,-2px)}}
@media(max-width:600px){main{padding:40px 22px}h1{font-size:clamp(49px,12.3vw,74px);letter-spacing:-.07em}.tagline{margin-top:24px;font-size:19px}.contacts{flex-direction:column;width:min(100%,310px);margin-top:48px;gap:10px}.glass{min-height:59px;padding:17px 20px;justify-content:flex-start;border-radius:20px;font-size:14px}.arrow{margin-left:auto}.edge-line{bottom:max(15px,env(safe-area-inset-bottom))}}
@media(max-height:650px) and (min-width:601px){main{padding:28px}h1{font-size:clamp(62px,14vh,95px)}.tagline{margin-top:20px}.contacts{margin-top:30px}.edge-line{display:none}}
@media(max-height:620px) and (max-width:600px){main{padding:28px 20px}.contacts{margin-top:32px}.tagline{margin-top:20px}.edge-line{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:600px){.brand-mark{width:64px;height:41px;margin-bottom:34px}h1 span:first-child{font-size:.61em;letter-spacing:.2em;text-indent:.2em;margin-bottom:16px}}
@media(max-height:620px){.brand-mark{width:54px;height:34px;margin-bottom:22px}h1 span:first-child{margin-bottom:12px}}
.sound-panel{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));right:26px;z-index:2;display:flex;align-items:center;max-width:calc(100% - 32px);border:1px solid #ffffffa8;border-radius:19px;background:#ffffff50;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffffb8;color:#434961}
.sound-panel button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;padding:10px 14px;font:inherit;font-size:12px;white-space:nowrap;background:none;color:inherit;cursor:pointer;border-radius:17px}
.sound-panel button:hover{background:#ffffff60}.sound-panel button:focus-visible{outline:2px solid #4e4d87;outline-offset:3px}
.sound-panel svg{width:18px;height:18px;flex:none}.sound-panel[data-sound="off"] .sound-waves{opacity:.25}
#sound-track{border-left:1px solid #ffffffb0;border-top-left-radius:0;border-bottom-left-radius:0}
#sound-status:empty{display:none}#sound-status{position:absolute;right:0;bottom:55px;padding:10px 14px;border-radius:12px;background:#f4f4fc;font-size:12px;width:260px;box-shadow:0 4px 20px #7772}
main{padding-bottom:100px}.edge-line{display:none}
@media(max-width:600px){.sound-panel{right:50%;transform:translateX(50%);bottom:max(18px,env(safe-area-inset-bottom))}main{padding-bottom:100px}}
@media(max-height:620px){main{padding-top:24px;padding-bottom:82px}.contacts{margin-top:25px}.tagline{margin-top:18px}.sound-panel{bottom:max(12px,env(safe-area-inset-bottom))}}