:root{
  --bg:#0b0b09;
  --text:#ededed;
  --muted: rgba(237,237,237,.72);
  --muted2:#b7b7bf;

  --border: rgba(237,237,237,.085);
  --glass: rgba(255,255,255,.02);

  /* ПАЛИТРА */
  --g1:rgba(252, 197, 0, 0.891);
  --g2:rgba(214, 170, 25, 0.965);

  /* ещё ярче/непрозрачнее */
  --gBorder: rgba(252,196,0,.75); 
  --gFill1: rgba(252, 197, 0, 0.76);
  --gFill2: rgba(187, 152, 40, 0.554);

  --r12:12px;
  --r14:14px;
  --r16:16px;
  --r20:20px;
  --r28:28px;

  --shadow: 0px 10px 30px rgba(0,0,0,.38);
  --t: 240ms cubic-bezier(.2,.9,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  /* (2) ВЕСЬ САЙТ Segoe UI */
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  position:relative;
}

/* чтобы hidden всегда работал */
[hidden]{ display:none !important; }

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(252,196,0,.22) 0%, rgba(11,11,9,0) 55%),
    radial-gradient(55% 55% at 15% 30%, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 65%),
    radial-gradient(55% 55% at 85% 30%, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 65%);
  pointer-events:none;
  z-index:-1;
  opacity:.97;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.skip{
  position:absolute; left:-999px; top:0;
  padding:10px 12px;
  background:#000;
  border:1px solid var(--border);
  border-radius:10px;
  z-index:9999;
}
.skip:focus{ left:12px; top:12px; }

/* ===== header ===== */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background: linear-gradient(180deg, rgba(11,11,9,.92) 0%, rgba(11,11,9,.65) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 0;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo__img{ width:34px; height:34px; border-radius:50%;}
.logo__txt{ display:flex; flex-direction:column; line-height:1.1; }
.logo__brand{ font-weight:700; font-size:14px; }
.logo__sub{ font-size:11px; color:#9a9a9a; }

.nav{ display:flex; gap:32px; }
.nav__link{
  font-size:14px;
  font-weight:600;
  color: rgba(237,237,237,.78);
  transition: color var(--t), transform var(--t);
}
.nav__link:hover{ color:#fff; transform: translateY(-1px); }

.header__actions{ display:flex; gap:12px; }

/* burger строго скрыт на ПК */
.burger{ display:none; }

/* mobile menu */
.mobile{
  position:absolute;
  right:20px;
  top:72px;
  width:min(320px, calc(100vw - 40px));
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,11,9,.92);
  backdrop-filter: blur(14px);
  border-radius: var(--r16);
  padding:12px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mobile__close{
  align-self:flex-end;
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(237,237,237,.92);
  cursor:pointer;
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.mobile__close:hover{
  transform: translateY(-1px);
  border-color: rgba(252,196,0,.45);
  background: rgba(252,196,0,.14);
}

.mobile__link{
  padding:12px 12px;
  border-radius: var(--r14);
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: rgba(237,237,237,.90);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.mobile__link:hover{
  transform: translateY(-1px);
  border-color: rgba(252,196,0,.45);
  background: rgba(252,196,0,.14);
}

/* ===== buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 24px;
  border-radius: var(--r14);
  font-weight:700;
  font-size:14px;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  border:1px solid transparent;
  will-change: transform;
  color:#fff;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.99); }

.btn--sm{ padding:8px 20px; font-size:13px; border-radius: var(--r12); }
.btn--full{ width:100%; }

.btn--primary{
  background: linear-gradient(180deg, var(--gFill1) 0%, var(--gFill2) 100%);
  border: 1px solid var(--gBorder);
  color:#fff;
}
.btn--primary:hover{
  box-shadow: 0 0 0 12px rgba(252,196,0,.12);
  border-color: rgba(252,196,0,.90);
}

.btn--outline{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
}
.btn--outline:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.btn--white{
  background:#fff;
  color:#000;
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 20px rgba(255,255,255,.20);
}
.btn--white:hover{ background:#f0f0f0; }

.copy-ico{ opacity:.95; }
.hero__arrow{ opacity:1; color:#fff; }

/* ===== hero ===== */
.hero{ padding: 92px 0 84px; }
.hero__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.hero__left{
  max-width:600px;
  margin-top: 60px; /* поставь 2–10px как надо */
}

@media (min-width: 721px){
  .hero__left{ margin-top: 6px; }
}



.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 12px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(237,237,237,.08);
  border-radius: 999px;
  font-size:13px;
  color: rgba(237,237,237,.82);
  margin-bottom:24px;
}
.pill__dot{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
  box-shadow: 0 0 18px rgba(252,196,0,.40);
}

/* (2) Hero заголовок: Segoe UI Bold 56 */
.hero__h1{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size:56px;
  line-height:1.08;
  font-weight:700;
  margin:0 0 24px;
}
.gold-text{
  background: linear-gradient(90deg, var(--g1) 0%, var(--g2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color: transparent;
}

.hero__p{
  font-size:16px;
  line-height:1.6;
  color: var(--muted2);
  margin:0 0 40px;
  max-width:540px;
}
.hero__btns{ display:flex; gap:16px; flex-wrap:wrap; }

/* hero card */
.hero-card{
  width:min(520px, 100%);
  border-radius: var(--r20);
  position:relative;
  overflow:hidden;
  padding:18px;
  box-shadow: var(--shadow);
}
.hero-card::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:50%;
  background: url("../img/hero-card-bg.png") center/cover no-repeat;
  pointer-events:none;
}
.hero-card img{
  position:relative;
  z-index:1;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.45));
}

/* ===== features ===== */
.features{ padding: 60px 0 96px; }
.features__title{
  text-align:center;
  font-size:32px;
  font-weight:700;
  margin:0;
}
.features__row{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:34px;
}
.feature{
  min-width:280px;
  text-align:center;
  padding:16px 24px;
  border-radius: var(--r16);
  border: 1px solid rgba(252,196,0,.55);
  background: radial-gradient(100% 250% at 50% -50%,
    rgba(252,196,0,.50) 0%,
    rgba(245,217,123,.22) 100%);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(252,196,0,.92);
  box-shadow: 0 0 0 14px rgba(252,196,0,.12);
}

/* (1) ТЕКСТ В "ЧЕМ МЫ ОТЛИЧАЕМСЯ" — БЕЛЫЙ */
.feature__t{
  font-weight:700;
  font-size:15px;
  margin-bottom:4px;
  color:#fff;
}
.feature__d{
  font-size:13px;
  color: rgba(255,255,255,.82);
}

/* ===== titles ===== */
.section-title{
  font-size:32px;
  font-weight:700;
  margin:0 0 16px;
}
.section-subtitle{
  margin:0 0 45px;
  font-size:16px;
  color: var(--muted);
}

/* reviews subtitle under title */
.reviews__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:-5px;
  margin-bottom:24px;
}
.reviews__head .section-subtitle{
  margin:0 0 10px;
}

/* ===== about ===== */
.about{ padding:84px 0; }
.about__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  margin-top:32px;
}
.about-card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--r20);
  padding:24px;
  position:relative;
  overflow:hidden;
  transition: transform var(--t), border-color var(--t);
}
.about-card:hover{
  transform: translateY(-2px);
  border-color: rgba(252,196,0,.30);
}
.ico{
  width:38px; height:38px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.ico__bg{
  position:absolute; inset:0;
  border-radius: var(--r14);
  border:1px solid rgba(252,196,0,.72);
  background: linear-gradient(180deg, rgba(252,196,0,.70) 0%, rgba(245,217,123,.40) 100%);
}
.ico span{ position:relative; z-index:1; font-size:18px; color:#111; }

.about-card__t{ font-size:16px; font-weight:700; margin-bottom:8px; }
.about-card__d{ font-size:14px; color: var(--muted); line-height:1.5; }

.about-card__glow{
  position:absolute; inset:0;
  background: radial-gradient(80% 80% at 50% 0%, rgba(252,196,0,.20) 0%, rgba(252,196,0,0) 100%);
  pointer-events:none;
}

/* ===== event ===== */
.event{ padding:92px 0; }
.event-card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--r28);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  position:relative;
}
.event-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 0% 0%, rgba(252,196,0,.20) 0%, rgba(252,196,0,0) 60%);
  pointer-events:none;
}

.event-card__left{
  flex:2;
  padding:40px;
  border-right:1px solid var(--border);
}
.event-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  background: rgba(252,196,0,.18);
  border:1px solid rgba(252,196,0,.52);
  border-radius:999px;
  margin-bottom:24px;
  color: rgba(255,255,255,.92);
  font-size:14px;
}
.event-card__h{
  font-size:24px;
  font-weight:700;
  margin-bottom:16px;
}
.event-card__p{
  font-size:15px;
  line-height:1.6;
  color: var(--muted);
  margin:0 0 32px;
  max-width:700px;
}
.event-card__btns{ display:flex; gap:16px; flex-wrap:wrap; }

.event-card__right{
  flex:1;
  min-width:300px;
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.timer__label{ font-size:16px; color: rgba(237,237,237,.78); margin-bottom:16px; }
.timer{
  display:flex;
  gap:12px;
  margin-bottom:24px;
}
.timer__item{
  flex:1;
  text-align:center;
  padding:12px;
  border-radius: var(--r16);
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
  transition: transform var(--t), border-color var(--t);
}
.timer__item:hover{
  transform: translateY(-2px);
  border-color: rgba(252,196,0,.45);
}
.timer__v{ font-size:20px; font-weight:700; margin-bottom:4px; }
.timer__u{ font-size:12px; color: rgba(237,237,237,.64); }
.timer__foot{ font-size:14px; color: rgba(237,237,237,.60); }

/* ===== reviews ===== */
.reviews{ padding:96px 0 92px; }
.reviews__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.review{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--r20);
  padding:24px;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform var(--t), border-color var(--t);
}
.review:hover{
  transform: translateY(-2px);
  border-color: rgba(252,196,0,.30);
}
.review__q{
  font-size:48px;
  line-height:1;
  color: rgba(252,196,0,.24);
  font-family: serif;
}
.review__t{
  color: var(--muted);
  font-size:15px;
  line-height:1.5;
  margin-top:-6px;
}
.review__bot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--border);
  padding-top:16px;
}
.review__link{
  color:#2e76ba;
  text-decoration:none;
  text-shadow: 0 0 14px rgba(58,160,255,.45);

  /* подчеркивание без сдвига текста */
  background-image: linear-gradient(90deg, rgba(58,160,255,.95), rgba(58,160,255,.95));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;

  transition: background-size var(--t), text-shadow var(--t), color var(--t);
}

.review__link:hover{
  background-size: 100% 2px;
  text-shadow: 0 0 18px rgba(58,160,255,.65);
}


.stars{
  color: rgba(245,217,123,.98);
  letter-spacing:2px;
}

/* ===== discord ===== */
.discord{ padding:92px 0 120px; }
.discord__card{
  position:relative;
  overflow:hidden;
  border-radius: var(--r16);
  border:1px solid rgba(255,255,255,.10);
  padding:48px;
  background: linear-gradient(105deg, rgba(252,196,0,.52) 0%, rgba(245,217,123,.30) 100%);
}
.discord__content{ position:relative; z-index:2; max-width:600px; }
.discord__h{ font-size:32px; font-weight:700; margin-bottom:24px; color:#fff; }
.discord__p{ font-size:16px; line-height:1.6; color:#e5e7eb; margin-bottom:32px; }
.discord__icon{
  position:absolute;
  right:-3%;
  top:15%;
  transform: translateY(-50%);
  width:200px;
  opacity:100;
  z-index:1;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}

/* ===== footer ===== */
.footer{
  background: rgba(0,0,0,.18);
  border-top:1px solid var(--border);
  padding:40px 0;
}
.footer__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.footer__copy{ font-size:14px; color: rgba(237,237,237,.68); }
.footer__links{ display:flex; gap:32px; }
.footer__links a{
  font-size:14px;
  color: rgba(237,237,237,.72);
  transition: color var(--t), transform var(--t);
}
.footer__links a:hover{ color:#fff; transform: translateY(-1px); }

/* ===== toast ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:46px;
  transform: translateX(-50%) translateY(18px);
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(252,196,0,.55);
  background: rgba(11,11,9,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2000;

  opacity:0;
  pointer-events:none;
  transition: opacity var(--t), transform var(--t);
}
.toast__dot{
  width:9px; height:9px; border-radius:50%;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
  box-shadow: 0 0 18px rgba(252,196,0,.45);
}
.toast__txt{
  font-size:15px;
  font-weight:600;
  color:#fff;
}
.toast.toast--show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* ===== responsive ===== */
@media (max-width: 720px){
  .nav, .header__actions{ display:none; }

  .burger{
    display:inline-flex;
    width:44px; height:44px;
    border-radius: var(--r14);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    cursor:pointer;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
  }
  .burger:hover{
    transform: translateY(-1px);
    border-color: rgba(252,196,0,.55);
    box-shadow: 0 0 0 12px rgba(252,196,0,.12);
  }
  .burger span{
    display:block;
    width:18px; height:2px;
    margin:5px auto;
    background: rgba(237,237,237,.92);
    border-radius:2px;
  }

  .hero__row{ flex-direction:column; text-align:center; }
  .hero__left{ max-width:100%; display:flex; flex-direction:column; align-items:center; }
  .hero__p{ max-width: 560px; }
  .hero__btns{ justify-content:center; }

  .about__grid{ grid-template-columns: repeat(2, 1fr); }
  .event-card{ flex-direction:column; }
  .event-card__left{ border-right:none; border-bottom:1px solid var(--border); }
  .event-card__right{ align-items:center; text-align:center; }
  .reviews__grid{ grid-template-columns: 1fr; }

  /* hero h1 адаптив */
  .hero__h1{ font-size:42px; }
}

@media (max-width: 600px){
  .hero{ padding:70px 0 70px; }
  .hero__h1{ font-size:42px; }

  .about{ padding:80px 0; }
  .about__grid{ grid-template-columns: 1fr; }

  .discord__card{ padding:32px; }
  .discord__h{ font-size:24px; }
  .discord__icon{ width:150px; opacity:.28; right:-10px; }

  .footer__row{ flex-direction:column; }

  .toast{ bottom:58px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* =========================
   MOBILE PATCH (ONLY PHONE)
   ========================= */
@media (max-width: 720px){

  /* (1) Burger: три полоски одна под другой */
  .burger{
    display:flex;               /* вместо inline-flex */
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
  }
  .burger span{
    display:block;
    width:18px;
    height:2px;
    margin:0;                   /* убираем авто-марджины, чтобы не “в ряд” */
    border-radius:2px;
  }

  /* (2) Анимация появления/ухода mobile menu */
  .mobile{
    opacity:0;
    transform: translateY(-10px) scale(.98);
    pointer-events:none;
    transition: opacity var(--t), transform var(--t);
  }
  .mobile.is-open{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
  }

  /* (3) Hero-card картинка: скрыть на мобилке */
  .hero__right{
    display:none !important;
  }

  .hero 

  /* (6) Hero чуть выше: уменьшаем верхний отступ секции */
  .hero{
    padding-top: 52px !important;    /* было выше — делаем компактнее */
    padding-bottom: 64px !important;
  }
  /* если ты добавлял margin-top на hero__left — убираем на мобилке */
  .hero__left{
    margin-top: 0 !important;
  }

  /* (4) ABOUT: 4 блока по центру, как в “Чем мы отличаемся” */
  .about__grid{
    justify-items:center;            /* центрируем карточки в гриде */
    text-align:center;
  }
  .about-card{
    text-align:center;
  }
  .ico{
    margin-left:auto;
    margin-right:auto;
  }

  /* (5) EVENT: центрируем контент королевской битвы */
  .event-card__left,
  .event-card__right{
    text-align:center;
  }
  .event-card__btns{
    justify-content:center;
  }
  .event-tag{
    justify-content:center;
  }

  /* (7) Header: отступ справа для лого+названия и расстояние между строками */
  .logo{
    padding-right: 10px;             /* отступ справа */
  }
  .logo__brand{
    margin-bottom: 3px;              /* пару пикселей между названием и подзаголовком */
  }

  /* (8) Меньше расстояния между секциями (только мобилка) */
  .features{ padding: 46px 0 64px !important; }
  .about{    padding: 64px 0 !important; }
  .event{    padding: 64px 0 !important; }
  .reviews{  padding: 64px 0 64px !important; }
  .discord{  padding: 64px 0 84px !important; }
}

@media (max-width: 600px){
  /* чуть компактнее на совсем маленьких */
  .hero{ padding-top: 44px !important; padding-bottom: 56px !important; }
  .features{ padding: 42px 0 58px !important; }
  .about{ padding: 58px 0 !important; }
  .event{ padding: 58px 0 !important; }
  .reviews{ padding: 58px 0 58px !important; }
  .discord{ padding: 58px 0 78px !important; }
}