:root{
  --bg:#06090A;
  --ink:#EEF5F6;
  --muted:#8FA3A8;
  --akc:#4FE3D2;
  --line:rgba(143,163,168,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- прелоадер ---------- */
#loader{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .7s ease,visibility .7s;
}
.loader-bar{width:120px;height:1px;background:var(--line);overflow:hidden}
.loader-bar i{
  display:block;height:100%;width:40%;background:var(--akc);
  animation:slide 1.1s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
body.ready #loader{opacity:0;visibility:hidden}

/* ---------- шапка ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  padding-top:calc(18px + env(safe-area-inset-top));
}
.mark{
  color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.22em;
}
.mark span{color:var(--muted);font-weight:200}
.mark-note{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(143,163,168,.55);
}

/* ---------- сцена ---------- */
#hero{
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 34%, rgba(30,86,96,.30) 0%, rgba(6,9,10,0) 62%),
    var(--bg);
}
#gl{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  /* вертикальный свайп отдаём браузеру на скролл, горизонтальный ловим сами */
  touch-action:pan-y;
  cursor:grab;
}
#gl:active{cursor:grabbing}

/* затемнение снизу, чтобы текст читался поверх стекла */
.veil{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,9,10,.95) 0%,
    rgba(6,9,10,.72) 22%,
    rgba(6,9,10,.10) 46%,
    rgba(6,9,10,0) 62%);
}

/* ---------- текст ---------- */
.copy{
  position:absolute;z-index:10;left:0;right:0;bottom:0;
  padding:0 22px 34px;
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.copy > *{pointer-events:auto}

.eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--akc);opacity:.85;margin-bottom:14px;
}
h1{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-size:clamp(38px,10.5vw,88px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.005em;
  margin-bottom:18px;
}
h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--akc);
}
.sub{
  font-size:clamp(14px,3.6vw,17px);
  font-weight:400;
  line-height:1.6;
  color:var(--muted);
  max-width:36ch;
  margin-bottom:26px;
}
.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  border:1px solid rgba(79,227,210,.42);
  border-radius:100px;
  color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  background:rgba(79,227,210,.06);
  backdrop-filter:blur(6px);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.cta span{color:var(--akc);transition:transform .35s ease}
.cta:hover{background:rgba(79,227,210,.13);border-color:rgba(79,227,210,.75)}
.cta:hover span{transform:translateX(4px)}
.cta:active{transform:scale(.98)}

/* ---------- подсказка ---------- */
.hint{
  position:absolute;z-index:10;top:calc(50% + 6vh);left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(143,163,168,.6);
  pointer-events:none;
  animation:breathe 3.4s ease-in-out infinite;
}
.ring{
  width:15px;height:15px;border-radius:50%;
  border:1px solid rgba(79,227,210,.5);
  border-right-color:transparent;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.9}}

/* ---------- десктоп ---------- */
@media (min-width:820px){
  .topbar{padding:26px 40px}
  .copy{
    left:0;right:auto;bottom:0;
    padding:0 40px 56px;
    max-width:min(660px,52vw);
  }
  .veil{
    background:
      linear-gradient(to top, rgba(6,9,10,.92) 0%, rgba(6,9,10,.35) 26%, rgba(6,9,10,0) 52%),
      linear-gradient(to right, rgba(6,9,10,.85) 0%, rgba(6,9,10,.25) 34%, rgba(6,9,10,0) 58%);
  }
  .hint{left:auto;right:40px;top:auto;bottom:56px;transform:none}
  .eyebrow{margin-bottom:20px}
  .sub{margin-bottom:34px}
}

@media (prefers-reduced-motion:reduce){
  .hint,.ring,.loader-bar i{animation:none}
}