/* ============================================================
   PARIMATCH KZ — дизайн-система «Купон × Диагональ»
   Геометрия логотипа PM (скошенный параллелограмм) + эстетика
   беттинг-купона + детали спортивного табло.
   ============================================================ */
:root{
  --bg:#060606;
  --panel:#000000;
  --card:#0d0d0d;
  --card2:#121212;
  --line:#1e1e1e;
  --accent:#F5FE04;
  --accent-soft:rgba(245,254,4,.08);
  --txt:#e8e8e6;
  --muted:#9b9b96;
  --btn-reg:#050502;
  --btn-login:#2D2D2F;
  --skew:-12deg;
  --unskew:12deg;
  --mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    repeating-linear-gradient(115deg,transparent 0 70px,rgba(255,255,255,.012) 70px 71px),
    radial-gradient(1200px 500px at 70% -10%,rgba(245,254,4,.05),transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:#fff}
::selection{background:var(--accent);color:#000}

/* ============ СИГНАЛЬНАЯ ЛЕНТА (разделитель) ============ */
.tape,
main section:nth-of-type(3)::before,
main section:nth-of-type(6)::before{
  content:"";display:block;height:10px;margin:0 0 46px;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 14px,#0a0a0a 14px 28px);
  opacity:.85;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,10px 100%);
}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--accent) 0 55%,transparent 55.5%),
             repeating-linear-gradient(-45deg,var(--accent) 0 8px,transparent 8px 16px);
}
.header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:18px;
  padding:13px 20px;
}
.logo-link{display:flex;align-items:center;flex-shrink:0;position:relative;padding-right:22px}
.logo-link::after{
  content:"";position:absolute;right:0;top:-6px;bottom:-6px;width:2px;
  background:var(--accent);transform:skewX(var(--skew));opacity:.7;
}
.logo-link img{height:25px;width:auto}
.main-nav{display:flex;gap:2px;margin-left:6px}
.main-nav a{
  color:var(--txt);font-weight:700;font-size:13.5px;
  text-transform:uppercase;letter-spacing:1.2px;font-style:italic;
  padding:10px 15px;position:relative;transition:color .18s;
}
.main-nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;
  background:var(--accent);transform:skewX(var(--skew)) scaleX(0);
  transform-origin:left;transition:transform .22s;
}
.main-nav a:hover,.main-nav a.active{color:var(--accent)}
.main-nav a:hover::after,.main-nav a.active::after{transform:skewX(var(--skew)) scaleX(1)}
.header-actions{margin-left:auto;display:flex;gap:12px;align-items:center}

/* ============ КНОПКИ — двойной параллелограмм ============ */
.btn{
  position:relative;display:inline-block;
  font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.8px;
  font-size:13.5px;line-height:1;
  padding:14px 28px;
  transform:skewX(var(--skew));
  transition:.2s;white-space:nowrap;
  overflow:hidden;
}
.btn span{display:inline-block;transform:skewX(var(--unskew))}
.btn::before{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .45s;
}
.btn:hover::before{left:110%}
.btn-reg{
  background:var(--btn-reg);color:var(--accent);
  border:1.5px solid var(--accent);
  box-shadow:4px 4px 0 rgba(245,254,4,.28);
}
.btn-reg:hover{background:var(--accent);color:#000;box-shadow:6px 6px 0 rgba(245,254,4,.4);transform:skewX(var(--skew)) translate(-2px,-2px)}
.btn-login{
  background:var(--btn-login);color:#fff;
  border:1.5px solid var(--btn-login);
  box-shadow:4px 4px 0 rgba(255,255,255,.07);
}
.btn-login:hover{border-color:var(--accent);color:var(--accent)}
.btn-big{font-size:16.5px;padding:19px 44px}

/* Бургер */
.nav-toggle{display:none}
.burger{display:none;cursor:pointer;margin-left:auto;padding:6px}
.burger span{display:block;width:26px;height:3px;background:var(--accent);margin:5px 0;transform:skewX(var(--skew));transition:.25s}

/* ============ ТИКЕР ВЫПЛАТ ============ */
.ticker-wrap{
  background:#0a0a0a;border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;padding:9px 0;
  position:relative;
}
.ticker-wrap::before{
  content:"LIVE";position:absolute;left:0;top:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:6px;
  background:var(--accent);color:#000;
  font:800 italic 12px/1 var(--mono);letter-spacing:1px;
  padding:0 16px 0 26px;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.ticker-wrap::after{
  content:"";position:absolute;left:12px;top:50%;margin-top:-4px;z-index:3;
  width:8px;height:8px;border-radius:50%;background:#c40b0b;
  animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{50%{opacity:.25}}
.ticker{display:inline-block;animation:ticker 38s linear infinite;padding-left:110px}
.ticker-item{
  display:inline-block;margin:0 26px;
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
}
.ticker-item b{color:var(--accent);font-style:italic}
.ticker-item .tx{color:#4cd08a;font-weight:700}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============ HERO ============ */
.hero{max-width:1200px;margin:30px auto 0;padding:0 20px}
.hero-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:#0a0a0a;
}
.hero-card::after{ /* уголки-прицел */
  content:"";position:absolute;inset:10px;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/26px 2px,
    linear-gradient(var(--accent),var(--accent)) top left/2px 26px,
    linear-gradient(var(--accent),var(--accent)) bottom right/26px 2px,
    linear-gradient(var(--accent),var(--accent)) bottom right/2px 26px;
  background-repeat:no-repeat;opacity:.9;
}
.hero-card img{width:100%;object-fit:cover}
.hero-body{padding:38px 42px 44px;position:relative}
.hero h1{
  font-size:clamp(26px,4.2vw,46px);
  font-weight:900;font-style:italic;text-transform:uppercase;
  line-height:1.14;letter-spacing:.2px;color:#fff;
  max-width:900px;
}
.hero h1 em{
  font-style:italic;color:#000;
  background:var(--accent);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:1px 10px;
}
.hero-sub{margin:20px 0 28px;color:var(--muted);max-width:740px;font-size:18px}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--mono);font-size:11.5px;color:#5f5f5c;margin-top:18px;letter-spacing:.4px}

/* ============ СЕКЦИИ + СКВОЗНАЯ НУМЕРАЦИЯ ============ */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
main{counter-reset:sec}
main section{margin:64px 0;position:relative}
main section[id]{counter-increment:sec}
h2{
  position:relative;
  font-size:clamp(22px,3vw,33px);
  font-weight:900;font-style:italic;text-transform:uppercase;
  line-height:1.18;margin-bottom:22px;color:#fff;
  padding:10px 0 10px 20px;
  z-index:1;
}
h2::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:var(--accent);transform:skewX(var(--skew));
}
main section[id] > h2::after{
  content:"/" counter(sec,decimal-leading-zero);
  position:absolute;right:0;top:50%;transform:translateY(-52%);
  font:900 italic clamp(44px,7vw,86px)/1 var(--mono);
  color:transparent;
  -webkit-text-stroke:1.5px rgba(245,254,4,.22);
  letter-spacing:-2px;pointer-events:none;z-index:-1;
}
h3{
  font-size:clamp(18px,2.2vw,21px);
  font-weight:800;font-style:italic;
  margin:28px 0 12px;color:var(--accent);
}
h3::before{content:"▸ ";color:var(--accent)}
p{margin-bottom:14px}

/* Списки */
ul.checks,ol.steps{margin:14px 0 18px 4px;list-style:none}
ul.checks li{padding-left:32px;position:relative;margin-bottom:11px}
ul.checks li::before{
  content:"";position:absolute;left:0;top:5px;
  width:16px;height:16px;background:var(--accent);
  transform:skewX(var(--skew));
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
}
ol.steps{counter-reset:step}
ol.steps li{
  counter-increment:step;position:relative;
  padding:15px 18px 15px 66px;margin-bottom:0;
  background:var(--card);border:1px solid var(--line);border-bottom:none;
}
ol.steps li:last-child{border-bottom:1px solid var(--line)}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:14px;top:50%;transform:translateY(-50%) skewX(var(--skew));
  width:38px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#000;
  font:800 italic 14px/1 var(--mono);
}
ol.steps li::after{ /* линия отреза купона */
  content:"";position:absolute;left:66px;right:14px;bottom:0;
  border-bottom:1px dashed #2a2a2a;
}
ol.steps li:last-child::after{display:none}

/* ============ МЕДИА: рамки-уголки ============ */
.media-row{
  display:grid;grid-template-columns:1.15fr .85fr;gap:36px;
  align-items:center;margin:34px 0;
}
.media-row.rev{grid-template-columns:.85fr 1.15fr}
.media-row.rev .media-img{order:-1}
.media-img{position:relative;padding:12px;background:transparent}
.media-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/30px 2.5px,
    linear-gradient(var(--accent),var(--accent)) top left/2.5px 30px,
    linear-gradient(var(--accent),var(--accent)) top right/30px 2.5px,
    linear-gradient(var(--accent),var(--accent)) top right/2.5px 30px,
    linear-gradient(var(--accent),var(--accent)) bottom left/30px 2.5px,
    linear-gradient(var(--accent),var(--accent)) bottom left/2.5px 30px,
    linear-gradient(var(--accent),var(--accent)) bottom right/30px 2.5px,
    linear-gradient(var(--accent),var(--accent)) bottom right/2.5px 30px;
  background-repeat:no-repeat;
}
.media-img img{width:100%;border:1px solid var(--line)}
figure figcaption{
  font-family:var(--mono);font-size:11.5px;color:#6d6d68;
  padding:10px 4px 0;text-align:center;letter-spacing:.3px;
}
figure figcaption::before{content:"[ "}
figure figcaption::after{content:" ]"}

.wide-img{position:relative;margin:32px 0;padding:12px}
.wide-img::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/30px 2.5px,
    linear-gradient(var(--accent),var(--accent)) top left/2.5px 30px,
    linear-gradient(var(--accent),var(--accent)) bottom right/30px 2.5px,
    linear-gradient(var(--accent),var(--accent)) bottom right/2.5px 30px;
  background-repeat:no-repeat;
}
.wide-img img{width:100%;border:1px solid var(--line);margin:0 auto}

/* ============ КАРТОЧКИ-КУПОНЫ ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0}
.feature-card{
  position:relative;
  background:var(--card);border:1px solid var(--line);
  padding:26px 20px 40px;
  transition:.22s;
  /* перфорация купона сверху */
  -webkit-mask:radial-gradient(circle 5px at 12px 0,transparent 98%,#000) -12px 0/24px 100%;
  mask:radial-gradient(circle 5px at 12px 0,transparent 98%,#000) -12px 0/24px 100%;
}
.feature-card::after{ /* штрихкод */
  content:"";position:absolute;left:20px;right:20px;bottom:14px;height:12px;
  background:repeating-linear-gradient(90deg,#242420 0 2px,transparent 2px 5px,#242420 5px 6px,transparent 6px 11px);
  opacity:.75;
}
.feature-card:hover{border-color:var(--accent);transform:translateY(-4px);background:var(--card2)}
.feature-card .fc-num{
  display:inline-block;margin-bottom:10px;
  font:800 italic 13px/1 var(--mono);
  color:#000;background:var(--accent);
  padding:6px 12px;transform:skewX(var(--skew));
}
.feature-card h3{margin:0 0 8px;color:#fff;font-size:17px}
.feature-card h3::before{content:""}
.feature-card p{font-size:14.5px;color:var(--muted);margin:0}

/* ============ ТАБЛИЦЫ — линия букмекера ============ */
.info-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px}
.info-table th,.info-table td{padding:13px 16px;text-align:left;border:1px solid #1a1a1a}
.info-table th{
  background:var(--accent);color:#000;
  font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:12.5px;letter-spacing:1px;
}
.info-table tr:nth-child(even) td{background:#0b0b0b}
.info-table td{background:var(--card)}
.info-table td:first-child{font-weight:700;color:#fff}
.table-scroll{overflow-x:auto}

/* ============ СОДЕРЖАНИЕ — «линия ставок» ============ */
.toc{
  position:relative;
  background:var(--card);border:1px solid var(--line);
  border-top:4px solid var(--accent);
  padding:24px 28px;margin:36px 0;
}
.toc::before{
  content:"INDEX";position:absolute;top:-4px;right:22px;
  background:var(--accent);color:#000;
  font:800 italic 11px/1 var(--mono);letter-spacing:2px;
  padding:6px 14px 5px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.toc-title{
  font-weight:900;font-style:italic;text-transform:uppercase;
  color:#fff;margin-bottom:14px;font-size:16px;letter-spacing:.8px;
}
.toc ol{list-style:none;counter-reset:toc;columns:2;column-gap:44px}
.toc li{
  counter-increment:toc;margin-bottom:0;break-inside:avoid;
  display:flex;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px dashed #242424;
}
.toc li::before{
  content:counter(toc,decimal-leading-zero);
  font:800 italic 12px/1 var(--mono);color:var(--accent);
  flex-shrink:0;
}
.toc a{color:var(--txt);font-size:15px;flex:1}
.toc a:hover{color:var(--accent)}

/* ============ ПРОМО-БЛОК ============ */
.promo-strip{
  position:relative;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:#0c0c03;
  border:1.5px solid var(--accent);
  padding:28px 32px;margin:40px 0;
  box-shadow:8px 8px 0 rgba(245,254,4,.14);
}
.promo-strip::before{
  content:"BONUS";position:absolute;top:-13px;left:22px;
  background:var(--accent);color:#000;
  font:800 italic 11px/1 var(--mono);letter-spacing:2px;
  padding:7px 16px 6px;transform:skewX(var(--skew));
}
.promo-strip .promo-txt{flex:1;min-width:240px}
.promo-strip .promo-txt b{color:var(--accent)}
.promo-code{
  font:900 italic 18px/1 var(--mono);
  border:2px dashed var(--accent);color:var(--accent);
  padding:13px 22px;letter-spacing:1px;text-transform:uppercase;
}

/* ============ FAQ ============ */
.faq details{
  background:var(--card);border:1px solid var(--line);
  border-left:4px solid #2a2a2a;
  margin-bottom:10px;overflow:hidden;transition:border-color .2s;
}
.faq details[open]{border-left-color:var(--accent)}
.faq summary{
  cursor:pointer;padding:17px 54px 17px 20px;font-weight:700;color:#fff;
  list-style:none;position:relative;font-style:italic;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:18px;top:50%;
  transform:translateY(-50%) skewX(var(--skew));
  color:var(--accent);font:900 24px/1 var(--mono);
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--accent)}
.faq .faq-body{padding:0 20px 18px;color:var(--muted);font-size:15.5px}

/* ============ CTA БЛОК ============ */
.cta-block{
  position:relative;text-align:center;
  background:#0a0a0a;border:1px solid var(--line);
  padding:52px 30px 46px;margin:56px 0;
  overflow:hidden;
}
.cta-block::before{
  content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 14px,transparent 14px 28px);
}
.cta-block::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 200px at 50% 110%,rgba(245,254,4,.09),transparent 70%);
}
.cta-block h2{border:none;padding:0;display:inline-block}
.cta-block h2::before{display:none}
.cta-block p{color:var(--muted);max-width:640px;margin:12px auto 28px}
.cta-block .btn{position:relative;z-index:1}

/* ============ ХЛЕБНЫЕ КРОШКИ ============ */
.breadcrumbs{font-family:var(--mono);font-size:12px;color:#6c6c68;margin:20px 0 0;letter-spacing:.3px}
.breadcrumbs a{color:#94948e}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs span{color:var(--accent)}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--panel);
  border-top:1px solid var(--line);
  margin-top:80px;padding:0 0 26px;position:relative;
}
.site-footer::before{
  content:"";display:block;height:8px;margin-bottom:44px;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 12px,#0a0a0a 12px 24px);
  opacity:.65;
}
.footer-grid{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
}
.footer-grid h4{
  color:var(--accent);font-style:italic;text-transform:uppercase;
  font-size:13px;letter-spacing:1.4px;margin-bottom:14px;
}
.footer-grid p,.footer-grid li{font-size:14px;color:#84847f}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:9px;padding-left:14px;position:relative}
.footer-grid li::before{content:"▸";position:absolute;left:0;color:var(--accent);font-size:11px;top:3px}
.footer-grid a{color:#bdbdb8}
.footer-grid a:hover{color:var(--accent)}
.footer-logo img{height:22px;margin-bottom:14px}
.footer-bottom{
  max-width:1200px;margin:32px auto 0;padding:20px 20px 0;
  border-top:1px dashed #242424;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:#595954;
}
.age-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:32px;border:2px solid var(--accent);
  transform:skewX(var(--skew));
  color:var(--accent);font:900 italic 12px/1 var(--mono);flex-shrink:0;
}

/* ============ SCROLL REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ticker{animation:none}
}

/* ============ АДАПТИВ ============ */
@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .toc ol{columns:1}
  main section[id] > h2::after{opacity:.55}
}
@media(max-width:820px){
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--panel);flex-direction:column;
    border-bottom:1px solid var(--line);padding:10px 16px 18px;
  }
  .nav-toggle:checked ~ .main-nav{display:flex}
  .burger{display:block;order:3}
  .header-actions .btn{padding:11px 16px;font-size:12px}
  .media-row,.media-row.rev{grid-template-columns:1fr}
  .media-row.rev .media-img{order:0}
  .hero-body{padding:28px 24px 32px}
  main section[id] > h2::after{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .btn-big{width:100%;text-align:center}
  .promo-strip{padding:24px 20px}
  .header-actions .btn-login{display:none}
  .ticker-wrap::before{font-size:10px;padding:0 10px 0 22px}
}