/* moan.games — landing
   ------------------------------------------------------------------ */

:root{
  --bg:        #070709;
  --bg-2:      #0a0a10;
  --panel:     #0e0e16;
  --panel-2:   #12121c;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.18);
  --txt:       #ecebf2;
  --dim:       #9b99ad;
  --dim-2:     #6a6879;
  --bio:       #9dff2e;
  --bio-2:     #78c81b;
  --void:      #b44dff;
  --alert:     #ff4a2b;

  --disp: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sec-y: clamp(84px, 11vw, 148px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-family:var(--disp);font-weight:600;line-height:1.04;letter-spacing:-.005em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--bio);color:#07070b}

:focus-visible{outline:2px solid var(--bio);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10000;
  padding:12px 18px;background:var(--bio);color:#07070b;font-family:var(--mono);font-size:.8rem
}
.skip:focus{left:12px;top:12px}

/* --- i18n ---------------------------------------------------------- */
[data-lang="ru"]{display:none}
html.lang-ru [data-lang="ru"]{display:revert}
html.lang-ru [data-lang="en"]{display:none}

/* --- film grain + scanlines ---------------------------------------- */
.fx{position:fixed;inset:0;z-index:900;pointer-events:none}
.fx::before{
  content:"";position:absolute;inset:-150%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
  animation:grain 1.1s steps(3) infinite;
}
.fx::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  opacity:.5;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* --- nav ----------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.nav.scrolled{
  background:rgba(7,7,11,.93);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:clamp(16px,4vw,48px);
}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.mark{width:26px;height:26px;flex:none;fill:none;stroke:var(--bio);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brand-txt{font-family:var(--disp);font-weight:600;font-size:1.12rem;letter-spacing:.005em}
.brand-tld{color:var(--bio)}
.nav-links{display:flex;gap:clamp(18px,2.6vw,34px)}
.nav-links a{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--dim);transition:color .2s ease;
}
.nav-links a:hover{color:var(--bio)}
.lang{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}
.lang button{color:var(--dim-2);padding:2px;transition:color .2s ease}
.lang button:hover{color:var(--txt)}
.lang button.is-on{color:var(--bio)}
.lang-sep{color:var(--dim-2);opacity:.5}

/* --- hero ---------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:140px var(--gut) clamp(90px,14vh,140px);
  overflow:hidden;
  isolation:isolate;
}
.hero-art{position:absolute;inset:0;z-index:-1}
.scene{position:absolute;inset:0;width:100%;height:100%}

.glow{position:absolute;border-radius:50%;filter:blur(90px)}
.glow-a{
  left:50%;bottom:-18%;translate:-50% 0;
  width:min(1200px,135vw);height:min(720px,80vh);
  background:radial-gradient(closest-side,rgba(180,77,255,.30),rgba(180,77,255,0));
}
.glow-b{
  left:50%;bottom:-6%;translate:-50% 0;
  width:min(760px,90vw);height:min(400px,48vh);
  background:radial-gradient(closest-side,rgba(157,255,46,.22),rgba(157,255,46,0));
}

.sky .blink{animation:blink 3.4s ease-in-out infinite}
.sky .b2{animation-duration:4.3s;animation-delay:-1.4s}
.sky .b3{animation-duration:2.9s;animation-delay:-2.2s}
@keyframes blink{0%,44%{opacity:.12}50%,58%{opacity:1}64%,100%{opacity:.12}}

.city .blds{fill:#090910;stroke:rgba(157,255,46,.2);stroke-width:1.5}
.city .wins{opacity:.36}
.city .mast{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}

.grid path{fill:none;stroke:rgba(180,77,255,.32);stroke-width:1}

.tents{filter:drop-shadow(0 0 16px rgba(157,255,46,.34)) drop-shadow(0 0 54px rgba(180,77,255,.28))}
.tent .tl{fill:none;stroke:#090911;stroke-linecap:round}
.tent .suck circle{fill:rgba(157,255,46,.42)}
.tent{transform-box:fill-box;transform-origin:50% 100%;animation:sway 9s ease-in-out infinite}
.t1{animation-duration:9.4s;animation-delay:-.6s}
.t2{animation-duration:11s;animation-delay:-3.1s}
.t3{animation-duration:8.2s;animation-delay:-1.9s}
.t4{animation-duration:10.3s;animation-delay:-4.4s}
.t5{animation-duration:12.1s;animation-delay:-2.5s}
.t6{animation-duration:7.6s;animation-delay:-5.2s}
@keyframes sway{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.9deg)}}

.hero-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 58% at 50% 40%,rgba(7,7,9,.86),rgba(7,7,9,.3) 62%,transparent 84%),
    linear-gradient(to bottom,rgba(7,7,9,.9) 0%,rgba(7,7,9,.15) 26%,transparent 60%,var(--bg) 100%);
}

.hero-in{position:relative;z-index:2;text-align:center;max-width:920px}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--dim);
  padding:7px 14px;border:1px solid var(--line);border-radius:100px;
  background:rgba(10,10,16,.55);backdrop-filter:blur(6px);
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--bio);flex:none;
  box-shadow:0 0 0 0 rgba(157,255,46,.55);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(157,255,46,.5)}70%{box-shadow:0 0 0 9px rgba(157,255,46,0)}100%{box-shadow:0 0 0 0 rgba(157,255,46,0)}}

.wordmark{
  margin:22px 0 0;
  font-weight:700;
  font-size:clamp(3rem,10.5vw,7.4rem);
  letter-spacing:-.022em;
  line-height:.92;
  text-transform:lowercase;
  text-shadow:0 0 60px rgba(180,77,255,.3);
}
.wordmark .tld{color:var(--bio);text-shadow:0 0 34px rgba(157,255,46,.3)}

.hero-sub{
  margin-top:34px;
  font-family:var(--mono);font-size:clamp(.72rem,1.5vw,.82rem);
  text-transform:uppercase;letter-spacing:.32em;color:var(--dim);
}
.hero-lead{
  margin:26px auto 0;max-width:23ch;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.15rem,3.2vw,1.85rem);
  line-height:1.3;color:#cfcddb;
}
html.lang-ru .hero-lead{max-width:26ch}

.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:2px;
  font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;
  border:1px solid transparent;transition:.22s ease;
}
.btn-main{background:var(--bio);color:#07070b;font-weight:700;box-shadow:0 0 0 rgba(157,255,46,0)}
.btn-main:hover{background:#b3ff55;box-shadow:0 8px 34px rgba(157,255,46,.28);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{border-color:var(--bio);color:var(--bio);background:rgba(157,255,46,.06)}

/* --- ticker -------------------------------------------------------- */
.ticker{
  border-block:1px solid var(--line);
  background:linear-gradient(to bottom,rgba(157,255,46,.045),rgba(180,77,255,.04));
  overflow:hidden;padding:13px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.tick-track{
  display:flex;align-items:center;gap:26px;width:max-content;
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--dim);
  animation:tick 46s linear infinite;
}
.tick-track i{color:var(--bio);font-style:normal;font-size:.62rem;opacity:.8}
@keyframes tick{to{transform:translateX(-50%)}}

/* --- sections ------------------------------------------------------ */
.sec{position:relative;padding-block:var(--sec-y);scroll-margin-top:72px}
.sec-tight{padding-block:calc(var(--sec-y) * .72)}
.sec + .sec{border-top:1px solid rgba(255,255,255,.055)}

.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:26px;
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--dim-2);
}
.kicker b{color:var(--bio);font-weight:700}
.kicker::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--line),transparent)}

h2{font-size:clamp(1.9rem,4.4vw,3.3rem)}
.h2-lead{max-width:18ch}
html.lang-ru .h2-lead{max-width:21ch}

.lead-p{margin-top:20px;max-width:56ch;color:var(--dim);font-size:1.05em}

.split{display:grid;gap:clamp(34px,5vw,80px);align-items:start}
@media (min-width:900px){ .split{grid-template-columns:1.1fr .9fr} }

.body{margin-top:22px;max-width:58ch;color:#c4c2d2}
.body.dim{color:var(--dim);font-size:.97em}

/* spec sheet */
.spec{border-top:1px solid var(--line)}
.spec > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:14px 2px;border-bottom:1px dashed var(--line);
}
.spec dt{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--dim-2);flex:none}
.spec dd{text-align:right;font-size:.95rem;color:var(--txt)}
.redacted{
  font-family:var(--mono);font-size:.78rem;letter-spacing:-.06em;
  color:rgba(157,255,46,.34);
  animation:flick 5.5s steps(1) infinite;
}
@keyframes flick{0%,92%{opacity:1}93%{opacity:.35}94%{opacity:1}97%{opacity:.5}98%{opacity:1}}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--bio)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--bio);animation:pulse 2.4s ease-out infinite}

/* --- pillar cards -------------------------------------------------- */
.cards{display:grid;gap:14px;margin-top:44px;grid-template-columns:1fr}
@media (min-width:620px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .cards{grid-template-columns:repeat(4,1fr)} }

.card{
  position:relative;padding:28px 24px 30px;border-radius:3px;
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  overflow:hidden;transition:border-color .25s ease,transform .25s ease;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--bio),transparent);
  opacity:0;transition:opacity .3s ease;
}
.card:hover{border-color:rgba(157,255,46,.34);transform:translateY(-3px)}
.card:hover::before{opacity:.75}
.card .ic{width:34px;height:34px;color:var(--bio);margin-bottom:20px}
.card .ic .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card .ic .s2{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:.5}
.card .ic .f{fill:currentColor}
.card h3{
  font-size:1.08rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;
}
.card p{margin-top:11px;font-size:.93rem;line-height:1.6;color:var(--dim)}

/* --- city rows ----------------------------------------------------- */
.rows{display:grid;gap:0;margin-top:48px}
.row{
  display:grid;gap:6px 30px;padding:30px 0;border-top:1px solid var(--line);
  transition:background .25s ease;
}
.row:last-child{border-bottom:1px solid var(--line)}
.row-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--bio);opacity:.7}
.row h3{font-size:1.28rem;text-transform:uppercase;letter-spacing:.06em}
.row p:not(.row-n){color:var(--dim);max-width:62ch}
@media (min-width:860px){
  .row{grid-template-columns:70px minmax(180px,250px) 1fr;align-items:start;gap:0 40px}
  .row-n{padding-top:6px}
  .row p:not(.row-n){margin:0}
}
.row:hover{background:rgba(157,255,46,.022)}

/* --- escalation ---------------------------------------------------- */
.esc{display:grid;gap:12px;margin-top:46px;grid-template-columns:1fr}
@media (min-width:560px){ .esc{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .esc{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1180px){ .esc{grid-template-columns:repeat(6,1fr)} }

.lv{
  position:relative;padding:22px 18px 20px;border-radius:3px;
  background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--c);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.lv:hover{transform:translateY(-3px);box-shadow:0 14px 40px -18px var(--c)}
.lv .ic{width:32px;height:32px;margin-bottom:16px}
.lv .ic .f{fill:var(--c)}
.lv .ic .b{fill:var(--panel)}
.lv h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.09em;color:var(--txt)}
.lv p{margin-top:9px;font-size:.84rem;line-height:1.55;color:var(--dim);flex:1}
.lv .meter{display:flex;gap:3px;margin-top:20px}
.lv .meter i{height:3px;flex:1;background:rgba(255,255,255,.1);border-radius:1px}

.lv1{--c:#77758a} .lv2{--c:#4a7fd6} .lv3{--c:#2fb9a6}
.lv4{--c:#9dff2e} .lv5{--c:#ffa02e} .lv6{--c:#ff3b2b}

.lv1 .meter i:nth-child(-n+1),
.lv2 .meter i:nth-child(-n+2),
.lv3 .meter i:nth-child(-n+3),
.lv4 .meter i:nth-child(-n+4),
.lv5 .meter i:nth-child(-n+5),
.lv6 .meter i:nth-child(-n+6){background:var(--c);box-shadow:0 0 8px -1px var(--c)}

/* --- tags / status ------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{
  padding:8px 14px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;color:var(--dim);
  transition:.22s ease;
}
.tag:hover{border-color:rgba(157,255,46,.4);color:var(--bio);background:rgba(157,255,46,.05)}

.status{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line)}
.status li{
  padding:15px 2px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--dim);
  display:flex;align-items:center;gap:12px;
}
.status li::before{content:"";width:5px;height:5px;background:var(--bio);flex:none;rotate:45deg}

/* --- contact ------------------------------------------------------- */
.contact{text-align:left}
.mail{
  display:inline-block;margin-top:32px;
  font-family:var(--disp);font-weight:500;
  font-size:clamp(1.5rem,5vw,2.9rem);letter-spacing:-.01em;
  color:var(--bio);
  background-image:linear-gradient(var(--bio),var(--bio));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s ease;
}
.mail:hover{background-size:100% 1px}

/* --- footer -------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:34px;background:var(--bg-2)}
.foot-in{
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;color:var(--dim-2);
}

/* --- scroll reveal (JS adds .rv) ----------------------------------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:760px){
  .nav-links{display:none}
  .hero{padding-top:120px}
  .hero-sub{letter-spacing:.2em}
  .eyebrow{letter-spacing:.14em;font-size:.66rem}
  .contact .mail{font-size:clamp(1.35rem,7.5vw,2rem);word-break:break-word}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}