/* ==========================================================================
   EPG v2 — светлая, современная версия
   Тёмный остаётся только "экранный" chrome: header, hero, footer, мокапы
   ========================================================================== */

:root{
  --bg:            #F6F3EC;
  --bg-alt:        #EDE7D8;
  --bg-card:       #FFFFFF;
  --dark:          #0B0F18;
  --dark-raised:   #141926;

  --ink:           #15181F;
  --ink-soft:      #6E6656;
  --ink-faint:     #9A937E;
  --on-dark:       #ECEFF6;
  --on-dark-soft:  #9AA3B8;

  --line:          rgba(21,24,31,0.10);
  --line-strong:   rgba(21,24,31,0.20);
  --line-dark:     rgba(236,239,246,0.12);
  --line-dark-strong: rgba(236,239,246,0.24);

  --amber:         #E8672B;
  --amber-bright:  #FF8A3D;
  --cyan:          #0EA391;
  --cyan-bright:   #33E6C7;

  --display: "Unbounded", "Arial Narrow", sans-serif;
  --body:    "Inter", "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 3px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* ---------- signature: pixel matrix ---------- */
.pixel-row{ display:flex; gap:6px; overflow:hidden; padding:24px 0; }
.pixel-row span{ width:6px; height:6px; flex:none; background:var(--line); animation: pixel-blink 3.6s ease-in-out infinite; }
.pixel-row span:nth-child(3n){ background:var(--amber); opacity:.5; animation-delay:0.2s; }
.pixel-row span:nth-child(7n){ background:var(--cyan); opacity:.5; animation-delay:0.6s; }
.pixel-row.on-dark span{ background:var(--line-dark); }
.pixel-row.on-dark span:nth-child(3n){ background:var(--amber-bright); opacity:.55; }
.pixel-row.on-dark span:nth-child(7n){ background:var(--cyan-bright); opacity:.55; }
@keyframes pixel-blink{ 0%,100%{ opacity:.18; } 50%{ opacity:.85; } }

.matrix-bg{
  position:absolute; inset:0;
  background-image: radial-gradient(var(--line-dark-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
  pointer-events:none;
}

/* ---------- header (dark chrome) ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,24,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px var(--pad); max-width:var(--wrap); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:14px; letter-spacing:0.02em; text-decoration:none; color:var(--on-dark); }
.logo .mark{ width:24px; height:24px; flex:none; border:1.5px solid var(--amber-bright); border-radius:3px; position:relative; }
.logo .mark::before{ content:""; position:absolute; inset:5px; background:linear-gradient(135deg,var(--amber-bright),var(--cyan-bright)); }
.logo small{ display:block; font-family:var(--body); font-weight:400; font-size:9.5px; color:var(--on-dark-soft); letter-spacing:0.03em; }

.nav-links{ display:flex; gap:4px; align-items:center; }
.nav-links a{ text-decoration:none; font-size:13.5px; color:var(--on-dark-soft); padding:8px 12px; border-radius:var(--radius); transition:color .15s ease, background .15s ease; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active{ color:var(--on-dark); background:var(--dark-raised); }

.lang-switch{ display:flex; gap:2px; background:var(--dark-raised); border:1px solid var(--line-dark-strong); border-radius:var(--radius); padding:2px; }
.lang-switch button{ background:none; border:0; color:var(--on-dark-soft); font-family:var(--mono); font-size:11px; letter-spacing:0.04em; padding:6px 9px; cursor:pointer; border-radius:2px; }
.lang-switch button.active{ background:var(--amber-bright); color:#1A0E04; font-weight:600; }

.nav-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--amber-bright); color:#1A0E04; font-weight:600; font-size:13.5px; padding:9px 16px; text-decoration:none; border-radius:var(--radius); transition:transform .15s ease, background .15s ease; white-space:nowrap; }
.nav-cta:hover{ background:#ffa565; transform:translateY(-1px); }
.burger{ display:none; background:none; border:1px solid var(--line-dark-strong); color:var(--on-dark); width:38px; height:38px; align-items:center; justify-content:center; border-radius:var(--radius); }
@media (max-width: 1040px){ .nav-links{ display:none; } .burger{ display:flex; } .nav-cta span.long{ display:none; } }

/* ---------- hero (dark chrome) ---------- */
.hero{ position:relative; background:var(--dark); color:var(--on-dark); padding:64px var(--pad) 56px; overflow:hidden; }
.hero-grid{ max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; position:relative; z-index:2; }
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-bright); display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--amber-bright); display:inline-block; }
.hero h1{ font-size:clamp(30px,4vw,48px); line-height:1.06; margin-bottom:18px; }
.hero h1 em{ font-style:normal; color:var(--cyan-bright); }
.hero p.lead{ font-size:16.5px; color:var(--on-dark-soft); max-width:44ch; margin-bottom:26px; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; text-decoration:none; font-weight:600; font-size:14px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--amber-bright); color:#1A0E04; }
.btn-primary:hover{ background:#ffa565; }
.btn-ghost{ border-color:var(--line-dark-strong); color:var(--on-dark); background:transparent; }
.btn-ghost:hover{ border-color:var(--cyan-bright); color:var(--cyan-bright); }
.btn-ghost.on-light{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost.on-light:hover{ border-color:var(--cyan); color:var(--cyan); }

.stat-strip{ display:flex; gap:30px; margin-top:34px; flex-wrap:wrap; }
.stat-strip div b{ display:block; font-family:var(--display); font-size:23px; color:var(--on-dark); }
.stat-strip div span{ font-size:11.5px; color:var(--on-dark-soft); font-family:var(--mono); }

.screen-mock{ position:relative; background:#04060A; border:9px solid #1B2130; border-radius:10px; box-shadow:0 0 0 1px var(--line-dark), 0 40px 90px -30px rgba(0,0,0,0.55), 0 0 60px -12px rgba(255,138,61,0.20); aspect-ratio:9/16; max-width:300px; margin:0 auto; overflow:hidden; }
.screen-mock video{ width:100%; height:100%; object-fit:cover; }
.screen-mock::after{ content:"НАЖИВО"; position:absolute; top:11px; left:11px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; background:rgba(0,0,0,0.55); color:var(--amber-bright); padding:4px 7px; }

/* ---------- live broadcast (moved high, trust-building) ---------- */
.live-band{ background:var(--dark-raised); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:26px var(--pad); }
.live-inner{ max-width:var(--wrap); margin:0 auto; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber-bright); animation:pixel-blink 1.3s ease-in-out infinite; flex:none; }
.live-inner .txt{ flex:1; min-width:220px; }
.live-inner .txt b{ color:var(--on-dark); font-size:14.5px; display:block; margin-bottom:2px; }
.live-inner .txt span{ color:var(--on-dark-soft); font-size:13px; }
.live-badge{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; background:rgba(255,138,61,0.14); color:var(--amber-bright); border:1px solid rgba(255,138,61,0.35); padding:5px 10px; border-radius:20px; flex:none; }

/* ---------- sections (light) ---------- */
section{ padding:72px var(--pad); }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head .eyebrow{ color:var(--amber); margin-bottom:12px; }
.section-head .eyebrow::before{ background:var(--amber); }
.section-head h2{ font-size:clamp(24px,3vw,36px); margin-bottom:12px; color:var(--ink); }
.section-head p{ color:var(--ink-soft); font-size:16.5px; }
.alt{ background:var(--bg-alt); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.card{ background:var(--bg-card); border:1px solid var(--line); box-shadow:0 1px 2px rgba(21,24,31,0.03); padding:30px; display:flex; flex-direction:column; gap:14px; border-radius:var(--radius); }
.card .tag{ font-family:var(--mono); font-size:10.5px; color:var(--cyan); letter-spacing:0.08em; text-transform:uppercase; }
.card h3{ font-size:22px; color:var(--ink); }
.card p{ color:var(--ink-soft); font-size:14.5px; }
.card ul{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.card ul li{ font-size:13.5px; color:var(--ink-soft); padding-left:17px; position:relative; }
.card ul li::before{ content:""; position:absolute; left:0; top:6px; width:5px; height:5px; background:var(--amber); }
.card .btn{ align-self:flex-start; margin-top:8px; }

/* ---------- location cards ---------- */
.loc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.loc-card{ border:1px solid var(--line); background:var(--bg-card); display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 2px rgba(21,24,31,0.03); }
.loc-card .loc-photo{ aspect-ratio:16/10; overflow:hidden; position:relative; background:#000; }
.loc-card .loc-photo video, .loc-card .loc-photo img{ width:100%; height:100%; object-fit:cover; }
.loc-card .loc-num{ position:absolute; top:10px; left:10px; font-family:var(--mono); font-size:10.5px; background:rgba(11,15,24,0.7); color:var(--amber-bright); padding:4px 8px; }
.loc-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.loc-body h3{ font-size:18px; color:var(--ink); }
.loc-body .addr{ font-size:12.5px; color:var(--ink-soft); }
.loc-specs{ display:flex; flex-direction:column; gap:5px; margin-top:6px; font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
.loc-specs b{ color:var(--ink); font-weight:600; }
.loc-specs .shows{ color:var(--cyan); }
.loc-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
.loc-actions .btn{ flex:1; justify-content:center; }
.map-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--cyan); text-decoration:none; padding:11px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); white-space:nowrap; }
.map-link:hover{ border-color:var(--cyan); background:rgba(14,163,145,0.06); }

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.reel{ position:relative; background:#000; border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:9/16; overflow:hidden; }
.reel.wide{ aspect-ratio:16/9; }
.reel video,.reel img{ width:100%; height:100%; object-fit:cover; }
.reel .reel-info{ position:absolute; left:0; right:0; bottom:0; padding:13px; background:linear-gradient(to top, rgba(0,0,0,0.85), transparent); }
.reel .reel-info b{ font-size:12.5px; color:#fff; display:block; }
.reel .reel-info span{ font-size:10.5px; color:#c9cede; font-family:var(--mono); }

/* ---------- footer (dark chrome) ---------- */
footer.site{ background:var(--dark); color:var(--on-dark); border-top:1px solid var(--line-dark); padding:46px var(--pad) 30px; }
.foot-grid{ max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot-grid h4{ font-size:11px; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.06em; color:var(--on-dark-soft); margin-bottom:14px; }
.foot-grid ul{ display:flex; flex-direction:column; gap:9px; }
.foot-grid a{ text-decoration:none; color:var(--on-dark-soft); font-size:13.5px; }
.foot-grid a:hover{ color:var(--amber-bright); }
.foot-grid p{ color:var(--on-dark-soft); }
.foot-bottom{ max-width:var(--wrap); margin:30px auto 0; padding-top:20px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--on-dark-soft); }

.page-head{ padding:44px var(--pad) 34px; border-bottom:1px solid var(--line); }
.page-head .wrap{ max-width:var(--wrap); padding-left:0; padding-right:0; }
.page-head h1{ font-size:clamp(28px,3.6vw,40px); color:var(--ink); }
.crumb{ font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-bottom:14px; }
.crumb a{ text-decoration:none; color:var(--ink-faint); }
.crumb a:hover{ color:var(--amber); }

.tariff-table{ width:100%; border-collapse:collapse; font-size:14px; }
.tariff-table caption{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); margin-bottom:12px; }
.tariff-table th,.tariff-table td{ padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; }
.tariff-table th{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); font-weight:500; }
.tariff-table td.price{ font-family:var(--mono); font-weight:600; font-size:15.5px; }
.tariff-table td.save{ color:#0E8F5E; font-family:var(--mono); font-size:12.5px; }
.tariff-table tbody tr:hover{ background:rgba(21,24,31,0.02); }
.tariff-note{ font-size:12px; color:var(--ink-faint); margin-top:12px; max-width:75ch; }
.tariff-wrap{ overflow-x:auto; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:12.5px; color:var(--ink-soft); font-family:var(--mono); letter-spacing:0.03em; }
.field input, .field select, .field textarea{ background:var(--bg-card); border:1px solid var(--line-strong); color:var(--ink); padding:12px 13px; font-family:var(--body); font-size:15px; border-radius:var(--radius); }
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); }
.radio-row{ display:flex; gap:9px; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); border:1px solid var(--line-strong); background:var(--bg-card); padding:8px 13px; cursor:pointer; border-radius:var(--radius); }
.radio-row input{ accent-color:var(--amber); }

.contact-list{ display:flex; flex-direction:column; }
.contact-list a{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:padding-left .15s ease; }
.contact-list a:hover{ padding-left:6px; color:var(--amber); }
.contact-list .k{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; }
.contact-list .v{ font-size:16px; color:var(--ink); }

.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; background:var(--bg-card); border:1px solid var(--line-strong); padding:6px 12px; color:var(--ink-soft); border-radius:20px; }

.mobile-cta{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--dark); border-top:1px solid var(--line-dark-strong); padding:12px var(--pad); gap:10px; }
@media (max-width:640px){ .mobile-cta{ display:flex; } body{ padding-bottom:66px; } }

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .screen-mock{ margin-top:16px; }
  .two-col{ grid-template-columns:1fr; }
  .loc-grid{ grid-template-columns:1fr; }
  .combo-grid{ grid-template-columns:1fr !important; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){ .gallery{ grid-template-columns:1fr; } .stat-strip{ gap:20px; } }