*{box-sizing:border-box}
:root{font-family:Manrope,Arial,sans-serif;color:#f5f1e9;background:#07090d}
html,body{margin:0;min-height:100%;background:#07090d}
body{min-height:100vh;overflow:hidden}
.background{position:fixed;inset:-4%;z-index:0;background-image:url('../images/panorama-saint-petersburg.jpg');background-size:cover;background-position:center center;animation:panorama 28s ease-in-out infinite alternate;transform:scale(1.06)}
.vignette{position:fixed;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,6,10,.72),rgba(4,6,10,.28) 50%,rgba(4,6,10,.72)),linear-gradient(180deg,rgba(4,6,10,.38),rgba(4,6,10,.12) 45%,rgba(4,6,10,.68));pointer-events:none}
.noise{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise .25s steps(2) infinite}
.hero{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;text-align:center;padding:40px}
.content{max-width:900px;animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.mark{display:flex;justify-content:center;gap:6px;margin-bottom:48px}
.mark span{width:3px;height:22px;border-radius:3px;background:#eee8dc;transform:rotate(28deg)}
.mark span:nth-child(2){height:34px;background:#c7ad86}.mark span:nth-child(3){height:22px}
.eyebrow{margin:0 0 22px;text-transform:uppercase;letter-spacing:.28em;font-size:11px;font-weight:600;color:#d1cbc1}
h1{margin:0;font-size:clamp(48px,8vw,108px);line-height:.98;letter-spacing:-.055em;font-weight:600;text-shadow:0 3px 30px rgba(0,0,0,.35)}
h1 em{font-family:'Playfair Display',serif;font-weight:500;color:#d4bd9d;letter-spacing:-.045em}
.subtitle{margin:30px auto 0;color:#d0ced0;font-size:15px;line-height:1.8;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.loader{position:relative;width:180px;height:1px;margin:52px auto 0;background:rgba(255,255,255,.28);overflow:hidden}
.loader span{display:block;width:38%;height:100%;background:#e0c9a5;animation:load 2.8s ease-in-out infinite}
.hint{position:absolute;bottom:34px;display:flex;align-items:center;gap:12px;color:#ddd8d0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 10px #000}
.hint i{width:28px;height:1px;background:#c8c0b5}
@keyframes panorama{0%{transform:scale(1.06) translateX(-1.5%)}100%{transform:scale(1.12) translateX(1.5%)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes load{0%{transform:translateX(-120%)}45%,65%{transform:translateX(250%)}100%{transform:translateX(400%)}}
@keyframes noise{0%{transform:translate(0,0)}50%{transform:translate(-1%,1%)}100%{transform:translate(1%,-1%)}}
@media(max-width:600px){.hero{padding:24px}.background{background-position:center}.mark{margin-bottom:38px}.subtitle{font-size:14px;margin-top:24px}.loader{margin-top:42px}.hint{bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}