/* Lirion Merge Tower Defence — лендинг.
   Палитра снята с графики самой игры: доминанты иконок башен — тёплый коричневый
   (#603000, #483000) и золото (#A87818). Отсюда тёмно-коричневая земля и золотой
   акцент, а не произвольная «игровая» неонка.
   Тема одна, тёмная, намеренно: это витрина игры, а не документ. Поэтому фон и
   цвета заданы явно и не зависят от темы браузера. */

:root{
  --ground:#15100B;        /* страница */
  --surface:#1E1710;       /* карточка, панель */
  --raised:#2A2118;        /* приподнятое, ховер */
  --line:#3A2E22;

  --gold:#D9A441;          /* акцент: кнопки, подписи, активное */
  --gold-dim:#8A6A2C;
  --steel:#7E99AB;         /* холодный противовес, очень дозированно */

  --ink:#F4ECE0;           /* заголовки */
  --body:#CDBFAC;          /* текст */
  --muted:#8E8070;         /* подписи */

  --fd:"Russo One", system-ui, sans-serif;     /* дисплей, есть кириллица */
  --fs:"Onest", system-ui, -apple-system, sans-serif;

  --w:1280px;              /* ширина контента, как у референса */
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:var(--fs);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ——— шапка ——— */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:28px;
  padding:14px 24px;
  background:rgba(21,16,11,0);
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s;
}
.hdr.stuck{background:rgba(21,16,11,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.hdr .logo{flex:none}
.hdr nav{display:flex;gap:26px;margin-left:auto}
.hdr nav a{
  font-family:var(--fd);font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--body);transition:color .15s;
}
.hdr nav a:hover,.hdr nav a.on{color:var(--gold)}
.hdr .lang{display:flex;gap:6px;font-size:13px;color:var(--muted)}
.hdr .lang a.on{color:var(--gold)}
.burger{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;margin-left:auto;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:.2s}
.burger span:nth-child(1){top:11px} .burger span:nth-child(2){top:16px} .burger span:nth-child(3){top:21px}

/* ——— обложка ——— */
.hero{position:relative;min-height:760px;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 70% 20%, rgba(217,164,65,.14), transparent 60%),
  radial-gradient(90% 70% at 10% 90%, rgba(126,153,171,.10), transparent 60%),
  var(--ground);}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.8)}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,16,11,.55) 0%,rgba(21,16,11,.2) 40%,var(--ground) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center}
.hero__logo{margin-bottom:26px}
.hero h1{
  font-family:var(--fd);font-weight:400;
  font-size:clamp(34px,5.4vw,62px);line-height:1.04;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 18px;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.sub{font-size:19px;max-width:46ch;margin:0 0 32px;color:var(--body)}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:10px;
  background:var(--gold);color:#1B1206;
  font-family:var(--fd);font-size:15px;letter-spacing:.02em;
  transition:filter .15s, transform .15s;
}
.store:hover{filter:brightness(1.08);transform:translateY(-1px)}
.store.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.store.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ——— секции ——— */
.sec{padding:96px 0;position:relative}
.sec--alt{background:var(--surface)}
.sec__eyebrow{
  font-family:var(--fd);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;
}
.sec h2{
  font-family:var(--fd);font-weight:400;
  font-size:clamp(26px,3.6vw,42px);line-height:1.1;
  color:var(--ink);margin:0 0 18px;text-wrap:balance;
}
.sec p{max-width:58ch;margin:0 0 14px}
.sec p:last-child{margin-bottom:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split--flip .split__media{order:-1}
.split__text{max-width:520px}

/* ——— сетка башен (реальная графика игры) ——— */
.towers{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;margin-top:38px}
.tower{
  background:linear-gradient(180deg,var(--raised),var(--surface));
  border:1px solid var(--line);border-radius:var(--r);
  padding:10px;text-align:center;
  transition:border-color .18s, transform .18s;
}
.tower:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.tower img{width:100%;height:auto;image-rendering:auto}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:40px}
.stats div{background:var(--surface);padding:22px 20px;text-align:center}
.stats .n{font-family:var(--fd);font-size:34px;color:var(--gold);line-height:1}
.stats .k{font-size:14px;color:var(--muted);margin-top:6px}

/* ——— заглушки под графику художника ——— */
.ph{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    repeating-linear-gradient(45deg, rgba(217,164,65,.045) 0 12px, transparent 12px 24px),
    var(--surface);
  border:2px dashed var(--gold-dim);border-radius:var(--r);
  color:var(--muted);text-align:center;padding:22px;
}
.ph b{font-family:var(--fd);font-size:14px;color:var(--gold);letter-spacing:.05em}
.ph span{font-size:13px;line-height:1.45}
.ph code{font-size:12px;color:var(--steel);background:rgba(126,153,171,.1);padding:2px 6px;border-radius:4px}
.ph--phone{aspect-ratio:9/16;max-width:360px;margin:0 auto;width:100%}
.ph--logo{width:260px;height:70px;border-radius:8px;padding:10px}
.ph--logo-hero{width:100%;max-width:440px;height:120px}
.ph--video{aspect-ratio:9/16;max-width:380px;margin:0 auto;width:100%}

/* ——— подвал ——— */
.ftr{background:#100C08;border-top:1px solid var(--line);padding:56px 0 40px;margin-top:0}
.ftr__row{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.ftr__col h4{font-family:var(--fd);font-weight:400;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.ftr__col a{display:block;font-size:15px;color:var(--muted);padding:3px 0;transition:color .15s}
.ftr__col a:hover{color:var(--gold)}
.ftr__legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}

/* ——— появление при прокрутке ——— */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ——— адаптив ——— */
@media (max-width:980px){
  .hero{min-height:0;padding:104px 0 64px}
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero__media{order:-1}
  .split{grid-template-columns:1fr;gap:34px}
  .split--flip .split__media{order:0}
  .hdr nav{display:none}
  .hdr nav.open{
    display:flex;flex-direction:column;gap:16px;
    position:absolute;top:100%;left:0;right:0;
    padding:20px 24px;background:rgba(21,16,11,.98);border-bottom:1px solid var(--line);
  }
  .burger{display:block}
  .hdr .lang{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .sec{padding:64px 0}
  .towers{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .stores{flex-direction:column;align-items:stretch}
  .store{justify-content:center}
}