/* ===== НАСТРОЙКА ШРИФТОВ ===== */

/* Minecraft шрифт */
@font-face{
  font-family:'MyFont';
  src:url('fonts/minecraft.ttf') format('truetype');
}

/* Lazare Grotesk Bold */
@font-face{
  font-family:"Lazare Grotesk";
  src:
    url("/fonts/LazareGrotesk-Bold.woff2") format("woff2"),
    url("/fonts/LazareGrotesk-Bold.woff") format("woff");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}

/* Super Tasty Regular */
@font-face{
  font-family:"Super Tasty";
  src:
    url("/fonts/SuperTasty-Regular.woff2") format("woff2"),
    url("/fonts/SuperTasty-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ===== CSS ПЕРЕМЕННЫЕ ===== */
:root{
  --bg:#071106;
  --bg-2:#0b1a08;
  --card:#0f1f0c;
  --muted:#0d150b;

  --text:#e8ffe8;
  --text-dim:#b6f5c3;

  --brand:#17c964;
  --brand-2:#b8ff3e;
  --brand-3:#3effc2;
  --brand-4:#c1ff4d;
  --accent:#7dffa0;

  --border:rgba(255,255,255,0.08);
  --shadow:0 8px 30px rgba(0,0,0,0.35);
}

/* ===== СБРОС И БАЗА ===== */
*{ box-sizing:border-box }
html{ scroll-behavior:auto }
html,body{
  margin:0;
  padding:0;
  background:radial-gradient(120% 100% at 50% 0%, #046704 0%, #050a04 60%, var(--bg));
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{
  color:inherit;
  text-decoration:none;
}
.body{ font-family:'MyFont',sans-serif }

/* ===== ЛЕЙАУТ ===== */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

header{
  position:relative;
  height:92vh;
  min-height:640px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--bg-2),#061006 70%,#050a04);
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

/* ===== ФОН / ЭФФЕКТЫ ===== */
.noise{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:soft-light;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  background-size:140px 140px;
  animation:noiseShift 8s linear infinite;
}
@keyframes noiseShift{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(-140px,-140px,0) }
}

.parallax{
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:transform .15s linear;
  will-change:transform;
  opacity:.8; /* затемнение параллакса */
}

/* Анимированные плитки */
.tiles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  filter:saturate(1.05) contrast(1.02);
  will-change:transform;
}
.rows{
  position:absolute;
  inset:0;
  perspective:1000px;
}
.row{
  position:absolute;
  left:0; right:0;
  display:flex;
  gap:16px;
  padding:10px 0;
  white-space:nowrap;
  will-change:transform;
  backface-visibility:hidden;
}
.row[data-pos="top"]{ top:6% }
.row[data-pos="mid"]{ top:34% }
.row[data-pos="bot"]{ top:62% }

.track{
  display:flex;
  gap:16px;
  will-change:transform;
  animation:scrollX linear infinite;
}
.row[data-pos="top"] .track{ animation-duration:48s }
.row[data-pos="mid"] .track{ animation-duration:56s; animation-direction:reverse }
.row[data-pos="bot"] .track{ animation-duration:54s }

@keyframes scrollX{
  from{ transform:translate3d(0,0,0) }
  to{ transform:translate3d(-50%,0,0) }
}

/* Плитка */
.tile{
  flex:0 0 auto;
  width:320px;
  height:180px;
  border-radius:16px;
  overflow:hidden;
  background:#0c160a;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.5),
    0 12px 36px rgba(0,0,0,0.45);
  opacity:.7;            /* базовое затемнение плиток */
  transform:translateZ(0);
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s,
    filter .4s,
    opacity .4s;
  position:relative;
  will-change:auto;
}
.tile.is-wide{ width:420px }
.tile.is-ultra{ width:520px }

.tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* объединённый фильтр: изначально темнее/контрастнее */
  filter:brightness(0.6) saturate(0.9) contrast(1.1);
  transition:filter .45s, transform .45s, opacity .45s;
}
.tile.hovering img,
.tile.hold img{
  /* при наведении чуть светлее */
  filter:brightness(0.8) saturate(1.05);
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(80% 80% at 50% 50%, rgba(56,255,160,0) 0%, rgba(56,255,160,0) 55%, rgba(56,255,160,0.18) 100%);
  opacity:0;
  transition:opacity .45s;
  pointer-events:none;
}
.tile.hovering::after,
.tile.hold::after{ opacity:1 }

.tile:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:
    0 8px 32px rgba(23,201,100,0.22),
    0 24px 60px rgba(0,0,0,0.5);
  opacity:1;
}

/* Засвет/виньетка на всём header */
header::before,
header::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
header::before{
  background:radial-gradient(circle at center,
    rgba(7,17,6,0) 0%,
    rgba(7,17,6,0) 25%,
    rgba(7,17,6,0.8) 45%,
    rgba(7,17,6,0.95) 100%);
}
header::after{
  background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode:multiply;
}

/* Контент поверх затемнений */
.hero{ position:relative; z-index:2 }

/* ===== HERO ===== */
.hero{
  margin-top:10px;
  padding:70px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center;
  backdrop-filter:none;
}

.logo{
  display:flex;
  align-items:center;
  gap:18px;
  filter:drop-shadow(0 0 10px rgba(0,0,0,0.6));
  position:relative;
  margin-bottom:2px;
}
.logo-img-wrap{
  position:relative;
  width:clamp(140px,20vw,300px);
  height:clamp(140px,20vw,300px);
  display:grid;
  place-items:center;
  overflow:visible;
  isolation:isolate;
}
.logo-img-wrap::after{
  content:"";
  position:absolute;
  inset:-12%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(184,255,62,0.18), rgba(184,255,62,0) 70%);
  filter:blur(10px);
  z-index:-1;
  pointer-events:none;
}
.logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,0.55))
    drop-shadow(0 0 22px rgba(184,255,62,0.35))
    drop-shadow(0 0 48px rgba(23,201,100,0.28))
    drop-shadow(0 0 80px rgba(61,255,150,0.18));
  animation:logoPulse 5.5s ease-in-out infinite;
  transform-origin:center;
}
@keyframes logoPulse{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.04) }
}
.logo-title{ display:none }

h1{
  font-family:"Lazare Grotesk",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(34px,6vw,72px);
  line-height:1.02;
  letter-spacing:.2px;
  margin:0;
  text-shadow:0 2px 0 #06290f, 0 16px 40px rgba(0,0,0,0.6);
}

.lead{
  max-width:900px;
  color:var(--text-dim);
  font-size:clamp(24px,3.2vw,44px);
  font-family:'MyFont',sans-serif;
  line-height:1.06;
  letter-spacing:.2px;
  text-shadow:0 1px 0 #06290f, 0 12px 28px rgba(0,0,0,0.5);
}

/* CTA */
.cta{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  flex-wrap:wrap;
  background:transparent;
  padding:0;
  border-radius:999px;
  border:0;
  backdrop-filter:none;
}

.btn{
  position:relative;
  padding:18px 34px;
  border-radius:999px;
  border:1px solid #1f3b1b;
  font-weight:900;
  letter-spacing:.3px;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
  overflow:hidden;
  isolation:isolate;
}
.btn:active{ transform:translateY(1px) }

.btn-primary{
  color:#0b1a08;
  background:
    radial-gradient(150% 200% at 50% -40%, var(--brand-2), var(--brand) 60%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12));
  box-shadow:
    0 14px 36px rgba(184,255,62,0.28),
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 0 0 1px rgba(184,255,62,0.35);
  filter:saturate(1.05);
}
.btn-primary:hover{
  transform:translateY(-1px) scale(1.02);
  filter:saturate(1.12);
}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}

.btn-primary .ring{
  position:absolute;
  inset:-2px;
  border-radius:999px;
  pointer-events:none;
  mix-blend-mode:soft-light;
}
.btn-primary .ring::before,
.btn-primary .ring::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  filter:blur(12px);
  opacity:.65;
  background:conic-gradient(from var(--a,0deg),
    rgba(184,255,62,0) 0deg,
    rgba(184,255,62,.5) 90deg,
    rgba(56,255,160,0) 180deg,
    rgba(184,255,62,.4) 270deg,
    rgba(184,255,62,0) 360deg);
  animation:orbit 4.8s linear infinite;
}
.btn-primary .ring::after{
  --a:180deg;
  animation-duration:6.2s;
  opacity:.5;
  filter:blur(16px);
}
@keyframes orbit{ to{ transform:rotate(360deg) } }

.btn-primary::after{
  content:"";
  position:absolute;
  top:-40%; left:-60%;
  width:120%; height:180%;
  background:radial-gradient(60% 60% at 0% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
  transform:rotate(12deg);
  animation:gloss 3.4s ease-in-out infinite alternate;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
@keyframes gloss{
  from{ transform:rotate(12deg) translateX(-6%) }
  to{ transform:rotate(12deg) translateX(6%) }
}

/* ===== СЕКЦИИ ===== */
section{ padding:80px 0 }

.block{
  background:linear-gradient(180deg,var(--card),#0b1709);
  border:1px solid var(--border);
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
}
.block .list{
  display:grid;
  gap:14px;
  margin-top:12px;
}

.row-box{
  display:flex;
  gap:12px;
  align-items:center;
  background:var(--muted);
  border:1px solid #152413;
  padding:12px 14px;
  border-radius:14px;
}
.row-icon{
  width:28px; height:28px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#0a2a14;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
}

/* ===== МАКЕТ ВЫБОРА РОЛЕЙ ===== */
.container{
  display:flex;
  min-height:500px;
  margin-top:40px;
  border:2px solid #333;
  border-radius:12px;
  overflow:hidden;
  background:#1e1e1e;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.sidebar{
  width:320px;
  background:#2c2c2c;
  border-right:2px solid #3e3e3e;
  display:flex;
  flex-direction:column;
  padding:20px 0;
}
.sidebar button{
  font-family:'Press Start 2P',monospace;
  background:#3e3e3e;
  border:none;
  border-left:4px solid transparent;
  color:#fff;
  padding:16px 20px;
  text-align:left;
  cursor:pointer;
  font-size:.8em;
  margin:4px 20px;
  transition:all .2s ease;
  text-shadow:1px 1px 0 #000;
  border-radius:0 6px 6px 0;
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  gap:8px;
}
.sidebar button::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(23,201,100,0.1), transparent);
  transform:translateX(-100%);
  transition:transform .3s ease;
}
.sidebar button:hover::before{ transform:translateX(100%) }
.sidebar button:hover{
  background:#4e4e4e;
  color:#7dffa0;
  border-left-color:var(--brand);
  transform:translateX(4px);
  box-shadow:2px 0 10px rgba(23,201,100,0.2);
}
.sidebar button.active{
  background:#3e3e3e;
  color:var(--brand);
  border-left-color:var(--brand);
  box-shadow:inset 4px 0 0 var(--brand);
  font-weight:bold;
}
.sidebar button.active:hover{
  background:#4e4e4e;
  color:#7dffa0;
}

.content{
  flex:1;
  padding:30px;
  background:#1e1e1e;
  overflow-y:auto;
  position:relative;
}
.content h1{
  font-family:'Press Start 2P',monospace;
  font-size:1.2em;
  color:#fff;
  margin:0 0 20px 0;
  text-shadow:2px 2px 0 #000;
  padding-bottom:10px;
  border-bottom:2px solid #3e3e3e;

  display:flex;
  align-items:center;
  gap:10px;
}
.content h1 .icon{
  width:22px; height:22px;
  stroke:currentColor;
  stroke-width:2.2;
}
.content ul{
  font-family:'Press Start 2P',monospace;
  font-size:.8em;
  color:#e8ffe8;
  list-style:none;
  padding:0;
  margin:0 0 20px 0;
}
.content li{
  margin-bottom:10px;
  padding:8px 0 8px 20px;
  position:relative;
  line-height:1.5;
  opacity:.9;
}
.content li::before{
  content:'▸';
  position:absolute;
  left:0;
  color:var(--brand);
  font-size:.9em;
}

.highlight{
  color:var(--brand);
  font-family:'Press Start 2P',monospace;
  font-size:.8em;
  padding:12px;
  background:rgba(23,201,100,0.1);
  border:1px solid rgba(23,201,100,0.3);
  border-radius:6px;
  margin-top:20px;
  text-align:center;
  text-shadow:1px 1px 0 #000;
}

/* Анимация появления контента */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:translateY(0) }
}
.content h1,
.content ul,
.content .highlight{ animation:fadeIn .3s ease-out }

/* ===== ФОРМА ЗАЯВКИ ===== */
.pixel-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:20px 20px;
  pointer-events:none;
  z-index:-1;
  opacity:.1;
}

.application-box{
  background:#1e1e1e;
  border:2px solid #333;
  border-radius:12px;
  padding:30px;
  width:1160px;
  max-width:100%;
  box-sizing:border-box;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  position:relative;
  overflow:hidden;
  margin:20px auto 0;
}

.mc-title{
  text-align:center;
  margin-bottom:30px;
  position:relative;
}
.mc-title h1{
  font-family:"Press Start 2P","Lazare Grotesk",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;
  font-size:clamp(22px,4vw,36px);
  color:#fff;
  text-shadow:2px 2px 0 #000;
  margin-bottom:10px;
  position:relative;
  display:inline-block;
}
.mc-title h1::after{
  content:'';
  position:absolute;
  bottom:-8px; left:10%; right:10%;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--brand-3), var(--brand), var(--brand-3), transparent);
}
.mc-subtitle{
  color:var(--text-dim);
  margin-top:10px;
  text-shadow:1px 1px 0 #000;
  font-family:'Press Start 2P','MyFont',sans-serif;
  font-size:.9em;
  opacity:.9;
}

.form-section{
  margin-bottom:20px;
  background:#2c2c2c;
  border:2px solid #3e3e3e;
  border-radius:8px;
  padding:20px;
  position:relative;
}
.section-title{
  background:#3e3e3e;
  color:#fff;
  padding:10px 20px;
  margin:-20px -20px 20px -20px;
  border-radius:6px 6px 0 0;
  font-family:'Press Start 2P',monospace;
  font-size:.9em;
  font-weight:400;
  text-shadow:1px 1px 0 #000;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:2px solid #333;
}
.section-title::before{ font-size:1.2em }

.mc-input-group{ margin-bottom:15px }

.mc-label{
  display:block;
  color:var(--text);
  margin-bottom:8px;
  font-size:.85em;
  text-shadow:1px 1px 0 #000;
  font-family:'Press Start 2P','MyFont',sans-serif;
  opacity:.9;
}

.mc-input,
.mc-select,
textarea.mc-input{
  width:100%;
  padding:12px 15px;
  background:#1e1e1e;
  border:2px solid #3e3e3e;
  color:#fff;
  font-family:'Press Start 2P','MyFont',monospace;
  font-size:.85em;
  outline:none;
  transition:all .2s;
  border-radius:4px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3);
}
.mc-input:focus,
.mc-select:focus,
textarea.mc-input:focus{
  border-color:var(--brand);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3),
    0 0 8px rgba(23,201,100,0.4);
  background:#242424;
}

.mc-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2317c964'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
}
textarea.mc-input{
  min-height:100px;
  resize:vertical;
  line-height:1.4;
}

/* Плейсхолдеры */
.mc-input::placeholder,
.mc-select::placeholder,
textarea.mc-input::placeholder{
  color:#666;
  opacity:.7;
}

/* Кнопка отправки */
.mc-button{
  background:linear-gradient(to bottom,#4e4e4e,#3e3e3e);
  color:#fff;
  border:2px solid #333;
  border-radius:6px;
  padding:15px 30px;
  font-family:'Press Start 2P',monospace;
  font-size:.9em;
  font-weight:400;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:30px auto 0;
  width:100%;
  max-width:320px;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 0 #2a2a2a;
}
.mc-button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 #2a2a2a, 0 0 15px rgba(23,201,100,0.3);
  background:linear-gradient(to bottom,#5e5e5e,#4e4e4e);
  border-color:var(--brand);
}
.mc-button:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #2a2a2a;
}
.mc-button::before{
  content:'▶';
  font-size:.8em;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.5; transform:scale(1.1) }
}
.mc-button.is-loading{ pointer-events:none }
.mc-button.is-success{ background:linear-gradient(to bottom,#2f6a3d,#1c3b24)!important }
.mc-button.is-error{ background:linear-gradient(to bottom,#5d2424,#290606)!important }

/* Телеграм и подсказки */
.telegram-info{
  background:#2c2c2c;
  border:2px solid #3e3e3e;
  border-radius:8px;
  padding:15px;
  margin:25px 0;
  text-align:center;
  position:relative;
  font-family:'Press Start 2P',monospace;
}
.telegram-info strong{
  color:var(--brand);
  display:block;
  margin-bottom:10px;
  font-size:.9em;
  text-shadow:1px 1px 0 #000;
}
.tg-link{
  color:var(--brand);
  text-decoration:none;
  font-weight:400;
  display:inline-block;
  margin:5px;
  padding:8px 16px;
  background:#1e1e1e;
  border:2px solid #3e3e3e;
  border-radius:4px;
  transition:all .2s;
  font-family:'Press Start 2P',monospace;
  font-size:.8em;
}
.tg-link:hover{
  background:#3e3e3e;
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
  color:#7dffa0;
  border-color:var(--brand);
}

/* Поле Telegram (унифицированные стили, если решите использовать обёртку) */
.telegram-input-wrapper{
  display:flex;
  align-items:center;
  gap:8px;
  background:#1e1e1e;
  border:2px solid #3e3e3e;
  border-radius:4px;
  padding:0 12px;
  transition:all .2s;
}
.telegram-input-wrapper:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 8px rgba(23,201,100,0.3);
  background:#242424;
}
.telegram-prefix{
  color:var(--brand);
  font-family:'Press Start 2P',monospace;
  font-size:.85em;
  font-weight:bold;
  text-shadow:1px 1px 0 #000;
  user-select:none;
}
.telegram-input{
  border:none;
  background:transparent;
  color:#fff;
  font-family:'Press Start 2P',monospace;
  font-size:.85em;
  padding:12px 0;
  width:100%;
  outline:none;
}
.telegram-input::placeholder{ color:#666; opacity:.7 }
.telegram-icon{ display:inline-block; margin-right:6px; vertical-align:middle; font-size:1.1em }

.telegram-info-box{
  background:rgba(23,201,100,0.1);
  border:1px solid rgba(23,201,100,0.3);
  border-radius:6px;
  padding:12px;
  margin-top:10px;
  font-family:'Press Start 2P',monospace;
  font-size:.75em;
  color:#b6f5c3;
  text-shadow:1px 1px 0 #000;
}
.telegram-info-box a{
  color:var(--brand);
  text-decoration:none;
  font-weight:bold;
}
.telegram-info-box a:hover{
  color:#7dffa0;
  text-decoration:underline;
}

/* Валидация */
input:valid{ border-color:var(--brand) }
input:invalid:not(:placeholder-shown){ border-color:#ff4757 }

.validation-message{
  font-size:.75em;
  margin-top:5px;
  padding:5px 10px;
  border-radius:4px;
  display:none;
}
input:invalid:not(:placeholder-shown) ~ .validation-message{
  display:block;
  background:rgba(255,71,87,0.1);
  color:#ff6b81;
  border:1px solid rgba(255,71,87,0.3);
}

/* Иконки */
.icon-xl{ width:48px; height:48px; stroke:var(--brand,#17c964); stroke-width:2.2 }
.sidebar button .icon{ width:18px; height:25px; stroke:currentColor; stroke-width:2 }

/* Нижний пояс текста в форме */
.application-box > div:last-child{
  text-align:center;
  margin-top:25px;
  color:#7ba76d;
  font-size:.8em;
  border-top:1px solid #3e3e3e;
  padding-top:15px;
  font-family:'Press Start 2P',monospace;
  opacity:.8;
}

/* Лоадер-точки */
.loading-dots{
  display:inline-block;
  width:20px;
  text-align:left;
  font-family:monospace;
}
.loading-dots::after{
  content:'...';
  animation:dots 1.5s steps(4,end) infinite;
}
@keyframes dots{
  0%,20%{ content:'.' }
  40%{ content:'..' }
  60%,100%{ content:'...' }
}

/* ===== ПОДВАЛ ===== */
footer{
  padding:50px 0 70px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.2);
}
.brands{
  display:flex;
  gap:26px;
  justify-content:center;
  align-items:center;
  opacity:.8;
}

.footer-bottom{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.footer-link{
  color:var(--text-dim);
  font-weight:700;
  letter-spacing:.14px;
  opacity:.92;
  transition:color .15s ease, opacity .15s ease, text-decoration-color .15s ease;
  text-decoration:underline;
  text-decoration-color:transparent;
}
.footer-link:hover{
  color:var(--text);
  opacity:1;
  text-decoration-color:rgba(255,255,255,.3);
}
.footer-sep{
  width:1px;
  height:14px;
  background:var(--border);
  opacity:.8;
}

/* ===== АДАПТИВ ===== */

/* Планшеты/малые десктопы */
@media (max-width:1199px){
  .staff{ grid-template-columns:repeat(2,1fr) }
}

/* Мобильные до 740px */
@media (max-width:740px){
  header{
    height:86vh;
    min-height:560px;
  }
  .staff{ grid-template-columns:1fr }
  .tile{ width:260px; height:140px }
  .tile.is-wide{ width:340px }
  .tile.is-ultra{ width:420px }
  .lead{ font-size:clamp(22px,5.6vw,36px) }
}

/* Контейнер ролей — адаптив */
@media (max-width:926px){
  .container{
    flex-direction:column;
    margin:40px 20px 0;
    min-height:auto;
  }
  .sidebar{
    width:100%;
    border-right:none;
    border-bottom:2px solid #3e3e3e;
    padding:15px 0;
    flex-direction:row;
    overflow-x:auto;
    white-space:nowrap;
  }
  .sidebar button{
    flex:0 0 auto;
    margin:4px 10px;
    padding:12px 15px;
    font-size:.7em;
    border-left:none;
    border-bottom:4px solid transparent;
    border-radius:6px 6px 0 0;
    text-align:center;
    min-width:140px;
  }
  .sidebar button:hover{
    transform:translateY(-2px);
    border-left-color:transparent;
    border-bottom-color:var(--brand);
  }
  .sidebar button.active{
    border-left-color:transparent;
    border-bottom-color:var(--brand);
    box-shadow:inset 0 4px 0 var(--brand);
  }
  .content{ padding:20px }
  .content h1{ font-size:1em }
  .content ul{ font-size:.75em }
  .highlight{ font-size:.75em }

  .application-box{
    width:calc(100% - 40px);
    margin:20px 20px 0;
    padding:20px;
    border-width:1px;
  }
  .mc-title h1{ font-size:clamp(18px,5vw,28px) }
  .mc-subtitle{ font-size:.8em }
  .mc-button{
    padding:12px 20px;
    font-size:.8em;
    max-width:280px;
  }
  .form-section{ padding:15px }
  .section-title{
    padding:8px 15px;
    margin:-15px -15px 15px -15px;
    font-size:.8em;
  }
  .mc-input,
  .mc-select,
  textarea.mc-input{
    padding:10px 12px;
    font-size:.8em;
  }
  .tg-link{
    padding:6px 12px;
    font-size:.7em;
  }
}

/* Очень маленькие экраны */
@media (max-width:480px){
  .application-box{
    width:calc(100% - 20px);
    margin:20px 10px 0;
    padding:15px;
  }
  .mc-button{ max-width:100% }
  .footer-sep{ display:none }
  .container{ margin:40px 10px 0 }
  .sidebar{ padding:10px 0 }
  .sidebar button{
    padding:10px 12px;
    font-size:.65em;
    min-width:120px;
    margin:4px 8px;
  }
  .content{ padding:15px }
  .content h1{
    font-size:.9em;
    margin-bottom:15px;
  }
  .content li{
    padding:6px 0 6px 16px;
    font-size:.7em;
  }
}