/* Platin Casino (Spain) — semantic HTML + CSS */
:root{
  --bg:#0f2540;           /* dark blue background */
  --panel:#122a3a;        /* slightly lighter panel */
  --panel-2:#1f2a4a;
  --fg:#f5f7f2;           /* near-white */
  --muted:#a0b4c8;        /* muted text */
  --lime:#00d4aa;         /* teal accent (Platin Casino brand) */
  --lime-2:#00c9a7;
  --border:rgba(255,255,255,.08);
  --container:1180px;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:#a0d4ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.flow>*+*{margin-top:1rem}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(15,37,64,.9),rgba(15,37,64,.7));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.branding{display:flex;align-items:center;gap:24px}
.branding .logo img{height:28px}
.header-nav{display:flex;gap:22px}
.header-nav a{color:#a0d4ff;opacity:.95;font-size:.95rem;letter-spacing:.02em}
.header-cta{display:flex;gap:12px}
.header-cta-mobile{display:none;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;padding:12px 24px;border-radius:50px;border:none;font-size:15px;line-height:1.5;text-decoration:none;cursor:pointer;transition:all 0.3s ease}
.btn--outline{border:2px solid #0a1a2e;color:#ffffff;background:#0a1a2e;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.btn--outline:hover{background:#0d1b2a;color:#ffffff;border-color:#0d1b2a;box-shadow:0 4px 8px rgba(0,0,0,0.3);transform:translateY(-1px)}
.btn--outline:active{background:#1a1f3a;transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.btn--lime{background:#FF6B9D;color:#ffffff;border:none;box-shadow:0 2px 8px rgba(255,107,157,0.4)}
.btn--lime:hover{background:#FF4081;text-decoration:none;box-shadow:0 4px 12px rgba(255,107,157,0.5);transform:translateY(-1px)}
.btn--lime:active{background:#E91E63;transform:translateY(0);box-shadow:0 1px 4px rgba(255,107,157,0.3)}
.btn--lime:disabled{background:#E6E6E6;color:#9B9B9B;cursor:not-allowed;box-shadow:none;transform:none}

/* Page header (title) */
.page-title{padding:28px 0 10px;text-align:center}
.page-title 

/* Meta row */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 18px}
.meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem}
.meta .dot{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.meta .star{color:#0a0;display:inline-flex;align-items:center;gap:6px}
.meta strong{color:var(--fg)}

/* Hero banner with neon lime border */
.hero{padding:10px 0 28px}
.promo{padding:20px;background:linear-gradient(180deg,var(--panel-2),var(--panel));position:relative;box-shadow:var(--shadow);border:2px solid rgba(0,212,170,.55)}
.promo::before{content:"";position:absolute;inset:-6px;border-radius:22px;background:radial-gradient(closest-side,rgba(0,212,170,.35),transparent 70%);filter:blur(10px);z-index:-1}
.promo__inner{border-radius:14px;border:1px solid rgba(255,255,255,.08);padding:26px;text-align:center}
.kicker{display:inline-block;background:#0f2540;color:#a0ffea;border:1px solid rgba(0,212,170,.6);padding:.35rem .6rem;border-radius:6px;font-size:.85rem;letter-spacing:.06em}
.promo 
.promo .big{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:.3px}
.caption{margin-top:8px;color:var(--muted);font-size:.9rem;text-align:center}

/* Quick overview */
.section{padding:20px 0}
.section 
.overview{display:grid}
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.brand-right{display:flex;flex-direction:column;gap:14px}
.brand-right figure{border:1px solid rgba(0,212,170,.4);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}

/* Footer */
.site-footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted);text-align:center}
.footer__inner{display:flex;flex-direction:column;gap:20px}
.footer__top-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;padding:0}
.footer__top-nav a{color:#a0d4ff;font-size:14px;text-decoration:none;transition:color 0.3s ease}
.footer__top-nav a:hover{color:#00d4aa;text-decoration:none}
.footer__separator{height:1px;background:rgba(255,255,255,.06);width:100%}
.footer__payments-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 0}
.footer__app-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.footer__social-copyright{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.footer__social{display:flex;gap:12px;align-items:center}
.footer__social-icon{color:#a0d4ff;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color 0.3s ease}
.footer__social-icon:hover{color:#00d4aa}
.footer__copy{margin:0;font-size:12px;color:#a0b4c8}
.footer__disclaimer{text-align:right;font-size:11px;color:#8f9988;line-height:1.5;max-width:100%}
@media (max-width:640px){
  .footer__top-nav{flex-direction:column;gap:12px;text-align:center}
  .footer__social-copyright{flex-direction:column;gap:12px}
  .footer__disclaimer{text-align:center}
}


/* === Font: Jost === */
body{font-family:"Jost", Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif}

/* === Header buttons (as in screenshot) === */
.btn{border-radius:50px;font-weight:600;padding:12px 24px;font-size:15px;line-height:1.5;transition:all 0.3s ease}
.btn--outline{border:2px solid #0a1a2e;color:#ffffff;background:#0a1a2e;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.btn--outline:hover{background:#0d1b2a;color:#ffffff;border-color:#0d1b2a;box-shadow:0 4px 8px rgba(0,0,0,0.3);transform:translateY(-1px)}
.btn--outline:active{background:#1a1f3a;transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.btn--lime{background:#FF6B9D;color:#ffffff;border:none;box-shadow:0 2px 8px rgba(255,107,157,0.4)}
.btn--lime:hover{background:#FF4081;box-shadow:0 4px 12px rgba(255,107,157,0.5);transform:translateY(-1px)}
.btn--lime:active{background:#E91E63;transform:translateY(0);box-shadow:0 1px 4px rgba(255,107,157,0.3)}
.btn--lime:disabled{background:#E6E6E6;color:#9B9B9B;box-shadow:none;transform:none;cursor:not-allowed}

/* === FAQ Pampas-style section (как на pampasbet.net) === */
.faq-pampas{
  margin-top:40px;
}
.faq-pampas__wrap{
  max-width:1180px;
  margin:0 auto;
}
.faq-pampas__heading{
  margin:0 0 24px;
  font-size:32px;
  font-weight:700;
  color:#ffffff;
  text-align:left;
}
.faq-pampas__list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-pampas__item{
  background:#0f2540;
  border-radius:999px;
  overflow:hidden;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.08);
}
.faq-pampas__item[open]{
  border-radius:16px;
}
.faq-pampas__summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 26px;
  cursor:pointer;
  position:relative;
}
/* прячем стандартный треугольник details во всех браузерах */
.faq-pampas__summary::-webkit-details-marker{display:none}
.faq-pampas__summary::marker{content:"";display:none}
.faq-pampas__icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#00d4aa;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  font-weight:700;
  flex-shrink:0;
  font-size:18px;
}
.faq-pampas__question{
  font-size:18px;
  font-weight:600;
}
.faq-pampas__chevron{
  margin-left:auto;
  width:16px;
  height:16px;
  border-right:2px solid #ffffff;
  border-bottom:2px solid #ffffff;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq-pampas__item[open] .faq-pampas__chevron{
  transform:rotate(-135deg);
}
.faq-pampas__content{
  padding:0 26px 18px 80px;
  font-size:16px;
  color:#a0d4ff;
}
@media (max-width:640px){
  .faq-pampas__heading{font-size:26px}
  .faq-pampas__item{border-radius:16px}
  .faq-pampas__summary{padding:16px 18px}
  .faq-pampas__content{padding:0 18px 16px 66px}
}


/* === Mobile header improvements === */
@media (max-width:640px){
  .header__bar{padding:14px 0;flex-wrap:nowrap;gap:8px;align-items:center}
  .branding{flex:0 0 auto}
  .branding .logo img{height:28px}
  .header-nav, .header-cta{display:none}
  .header-cta-mobile{display:none !important}
  .nav-drawer{margin-left:0;position:relative;flex:0 0 auto}
  .nav-drawer summary{list-style:none}
  .nav-drawer summary::-webkit-details-marker{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:2px solid rgba(255,255,255,.9);background:transparent;color:#fff;flex-shrink:0}
  .hamburger svg{width:22px;height:22px}
  .nav-panel{position:absolute;right:0;top:54px;min-width:230px;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px;z-index:60}
  .nav-panel a{padding:.6rem .75rem;border-radius:10px;color:#a0d4ff}
  .nav-panel a:hover{background:rgba(255,255,255,.06);text-decoration:none}
}

/* Optional larger H1 on mobile to match ref */
@media (max-width:640px){
  .page-title 
}

/* === Drawer visibility controls (desktop vs mobile) === */
.nav-drawer{display:none} /* hidden by default (desktop) */
@media (max-width:640px){
  .header-nav, .header-cta{display:none}
  .header-cta-mobile{display:none !important}
  .nav-drawer{display:block;margin-left:auto;position:relative;z-index:100}
  .nav-panel{position:absolute;right:0;top:54px}
}

/* === Sizing & Typography === */
html{font-size:18px}




/* Hero banner exact width on desktop */
@media (min-width:1180px){
  .promo-wrapper, .faq__wrap{max-width:1170px;margin-inline:auto}
}

.promo{border:3px solid rgba(0,212,170,.8)}
.promo__inner{border-radius:24px;border:1px solid rgba(255,255,255,.14);padding:34px}

/* FAQ width and card style */
.faq .container{padding-inline:24px}
.faq__wrap{}
.faq__list{max-width:1170px;margin-inline:auto}
.faq-item{border-radius:18px}

/* Header button exact sizes */
.btn{border-radius:50px}
.btn--outline,.btn--lime{height:50px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:15px;line-height:1.5}
.btn--outline{min-width:145px}
.btn--lime{min-width:165px}

/* Mobile header paddings already match container; ensure drawer only mobile */
.nav-drawer{display:none}
@media (max-width:640px){
  .header-nav, .header-cta{display:none}
  .nav-drawer{display:block;margin-left:auto;position:relative;z-index:100}
  .nav-panel{position:absolute;right:0;top:54px}
  .branding .logo img{height:28px}
}

/* === TYPOGRAPHY: exact sizes per request === */




/* === HERO banner exact design === */

.promo{border:2px solid #00d4aa;border-radius:20px 0 20px 0;overflow:hidden}
.promo__inner{border-radius:16px;border:1px solid rgba(255,255,255,.12);padding:32px}

/* === FAQ exact width === */
.faq__wrap, .faq__list{max-width:1170px;margin-inline:auto}

/* === Banner exact width === */
.promo-wrapper{max-width:1170px;margin-inline:auto;width:100%}
@media (max-width:1220px){ .promo-wrapper{max-width:calc(100% - 48px)} } /* keep 24px side padding on small screens */

/* Banner border + corners per spec */
.promo{border:2px solid #00d4aa;border-radius:20px 0 20px 0;box-shadow:none}
.promo__inner{border-radius:16px}

/* Typography exact sizes */
body{font-size:18px}





/* === TYPOGRAPHY (authoritative) === */
/* 1) Base text size fixed 18px */
body{font-size:18px}

/* 2) H2 always 35px and lime color */
h2{font-size:35px;line-height:1.2;font-weight:700;color:#2ED3C6}

/* 3) H3 across the site is 45px by default */
h3{font-size:25px;line-height:1.25;font-weight:700;color:#7FEFE6}

/* 4) But in FAQ section H3 must be 20px */
.faq h3{font-size:20px;line-height:1.35;font-weight:700;color:#7FEFE6}

/* H4, H5, H6 colors */
h4,h5,h6{color:#7FEFE6}

/* WordPress block headings */
.wp-block-heading{color:inherit}
h1.wp-block-heading,h2.wp-block-heading{color:#2ED3C6 !important}
h1.wp-block-heading.has-white-color,h2.wp-block-heading.has-white-color{color:#2ED3C6 !important}
h3.wp-block-heading,h4.wp-block-heading,h5.wp-block-heading,h6.wp-block-heading{color:#7FEFE6 !important}
h3.wp-block-heading.has-white-color,h4.wp-block-heading.has-white-color,h5.wp-block-heading.has-white-color,h6.wp-block-heading.has-white-color{color:#7FEFE6 !important}
h3.step__title,h3.faq-pampas__heading{color:#7FEFE6 !important}

/* (H1 left as previously defined; if needed we can set explicitly) */

/* === HEADER FIX v2 === */

/* 1) Align menu and buttons vertically */
.site-header .header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
}

/* 2) Logo size */
.branding .logo img {
  width: 150px;
  height: auto;
}

/* 3) Menu ACCOUNT / PROMOTIONS */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-nav a {
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
}
.header-nav a:hover {
  color: #00d4aa;
  text-decoration: none;
}

/* 4) CTA group */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Login button */
.btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 145px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  border: 2px solid #0a1a2e;
  border-radius: 50px;
  background: #0a1a2e;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.btn--outline:hover {
  background: #0d1b2a;
  color: #ffffff;
  border-color: #0d1b2a;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.btn--outline:active {
  background: #1a1f3a;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Register button */
.btn--lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 165px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  border: none;
  border-radius: 50px;
  background: #FF6B9D;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,107,157,0.4);
  transition: all 0.3s ease;
}
.btn--lime:hover {
  background: #FF4081;
  box-shadow: 0 4px 12px rgba(255,107,157,0.5);
  transform: translateY(-1px);
}
.btn--lime:active {
  background: #E91E63;
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255,107,157,0.3);
}
.btn--lime:disabled {
  background: #E6E6E6;
  color: #9B9B9B;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* === HEADER FIX v3 — stronger button text === */
.btn--outline,
.btn--lime { font-weight: 600; font-size: 15px; }

@media (max-width: 640px) {
  .site-header .header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 10px;
  }
  .branding { flex: 1; display:flex; align-items:center; }
  .branding .logo img { height: 28px; }
  .header-nav, .header-cta { display: none; }
  .nav-drawer { display: block; position: relative; z-index: 100; margin-left:auto; }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 2px solid #fff; color: #fff;
  }
  .hamburger svg { width: 22px; height: 22px; }
  .nav-panel {
    position: absolute; right: 0; top: 54px; min-width: 230px;
    background: #122a3a; border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 12px; display: grid; gap: 8px;
  }
  .nav-panel a { padding: .6rem .75rem; border-radius: 10px; color: #a0d4ff; text-decoration:none; }
  .nav-panel a:hover { background: rgba(255,255,255,.06); }
}


/* === HEADER FIX v5 — hamburger, mobile buttons, desktop logo === */

/* 3) Desktop logo width 180px (mobile keeps height rule) */
.branding .logo img { width: 180px; height: auto; }

/* 1) Remove white border around hamburger */
.hamburger {
  border: none !important;
  background: transparent !important;
  color: #fff;
}

/* 2) Mobile nav buttons: inherit desktop .btn styles (no extra padding/hover from nav links) */
@media (max-width: 640px) {
  .nav-panel a { padding: .6rem .75rem; }                /* normal links keep padding */
  .nav-panel a.btn { padding: 0; }                       /* buttons use their own sizing */
  .nav-panel a.btn:hover { background: inherit; }        /* keep button-specific hover only */
  .nav-panel a:not(.btn):hover { background: rgba(255,255,255,.06); }
}

/* === HERO FIX v6 — H1 / meta / promo === */

/* 1) H1 Betovo Casino Review */
.page-title h1,
h1 {
  font-size: 45px;
  font-weight: 700;
  color: #2ED3C6;
}

/* 2) Updated on (left) / Rating (right) */
.meta-row,
.promo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #ffffff;
  gap: 16px;
}
.promo-meta { margin-top: 1.5rem; }

/* 3) .promo width + visuals */
.promo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.375rem; /* 70px */
  border: 2px solid #00d4aa;
  border-radius: 20px 0px 20px 0px;
  background: rgba(10, 26, 46, 0.6);
  box-shadow:
    0 0 25px rgba(193, 252, 62, 0.25),
    0 0 8px rgba(193, 252, 62, 0.20) inset;
}

/* Optional: make inner keep its rounding */
.promo__inner { border-radius: 16px; }

@media (max-width: 640px) {
  .meta-row { font-size: 14px; }
  .promo { padding: 2rem; }
}


/* === HERO FIX v7 — exact promo width 1180px (box-sizing border-box) === */
.promo {
  width: 1180px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4.375rem;
  border: 2px solid #00d4aa;
  border-radius: 20px 0 20px 0;
  box-shadow: 0 0 25px rgba(193, 252, 62, 0.25);
  background: rgba(10, 26, 46, 0.6);
}


/* === HERO FIX v8 — align .promo exactly under logo/header grid === */
.promo {
  width: 1180px;
  box-sizing: border-box;
  padding: 4.375rem;
  border: 2px solid #00d4aa;
  border-radius: 20px 0 20px 0;
  box-shadow: 0 0 25px rgba(193, 252, 62, 0.25);
  background: rgba(10, 26, 46, 0.6);
  margin-left: calc((100% - 1200px) / 2 + 10px);
}
@media (max-width: 1300px) {
  .promo { margin-left: auto; margin-right: auto; width: 90%; }
}


/* === HERO FIX v9 — meta icons for Updated/Rating === */
.promo-meta img.icon,
.meta-row img.icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  display: inline-block;
}


/* === HERO FIX v10 — remove legacy bullets/stars & keep only SVG icons === */
.promo-updated::before,
.promo-rating::before { content: none !important; display: none !important; }

.promo-meta img.icon,
.meta-row img.icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}


/* === OVERVIEW — fixed 1180px & left alignment === */
.container.overview {
  width: 1180px;
  box-sizing: border-box;
  margin-left: calc((100% - 1200px)/2 + 10px);
  margin-right: 0;
  padding-inline: 0;
}
@media (max-width: 1300px){
  .container.overview{ width:100%; margin-left:auto; margin-right:auto; padding-inline:10px; }
}


/* === FAQ exact width alignment (1180px) === */
#faq .container {
  width: 1180px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0;
}


/* === FAQ exact fixed width (1180px aligned with overview) === */
#faq .container,
#faq .faq__wrap,
#faq .faq__list {
  width: 1180px !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-inline: 0 !important;
}


/* === FINAL FIX: FAQ full 1180px width aligned to overview === */
.faq {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.faq .container,
.faq__wrap,
.faq__list {
  width: 1180px !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}


/* --- Imported content helpers (wp / howto / anchors) --- */
.main-content{padding-top:1rem}
.wrapper{margin:1.25rem 0}
.bgi-block{border-radius:var(--radius); overflow:hidden}
.picture-text{
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
  padding:1.5rem 0;
  position:relative;
  overflow:hidden;
  background-color:rgba(15, 37, 64, 0.3);
}
.picture-text::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/img/background.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.3;
  z-index:1;
  pointer-events:none;
  filter:hue-rotate(100deg) saturate(2.5);
}
.picture-text::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,212,170,.2), rgba(0,201,167,.15));
  mix-blend-mode:screen;
  z-index:1;
  pointer-events:none;
}
.picture-text > *{
  position:relative;
  z-index:2;
}
.picture-text__content{
  padding:0 1rem;
  position:relative;
  z-index:2;
}

/* Page Title and Intro Text */
.page-title-main{
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:800;
  color:#2ED3C6;
  margin:0 0 20px;
  line-height:1.2;
  text-align:left;
}
.page-intro-text{
  color:#ffffff;
  font-size:1rem;
  line-height:1.6;
  margin:0 0 32px;
  opacity:0.9;
  text-align:left;
}

/* Picture Text with Neon Border (Reference Design) */
.picture-text-neon{
  padding:32px 0;
  margin:0 0 24px;
  text-align:center;
}
.picture-text-neon__outer{
  position:relative;
  border:2px solid #00d4aa;
  border-radius:20px 0 20px 0;
  padding:0;
  background:transparent;
  box-shadow:
    0 0 10px rgba(0,212,170,.8),
    0 0 20px rgba(0,212,170,.6),
    0 0 30px rgba(0,212,170,.4),
    0 0 40px rgba(0,212,170,.3),
    0 0 8px rgba(0,212,170,.2) inset;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  filter:drop-shadow(0 0 8px rgba(0,212,170,.6));
}
.picture-text-neon__outer::before{
  content:"";
  position:absolute;
  inset:-4px;
  border:2px solid #00d4aa;
  border-radius:20px 0 20px 0;
  opacity:0.5;
  filter:blur(8px);
  z-index:-1;
  pointer-events:none;
}
.picture-text-neon__outer::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid rgba(0,212,170,.4);
  border-radius:20px 0 20px 0;
  opacity:0.7;
  filter:blur(4px);
  z-index:-1;
  pointer-events:none;
}
.picture-text-neon__inner{
  position:relative;
  background:rgba(10, 26, 46, 0.6);
  border-radius:16px;
  padding:70px 40px;
  overflow:hidden;
  box-sizing:border-box;
  text-align:center;
}
.picture-text-neon__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/img/background.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.15;
  z-index:1;
  filter:hue-rotate(100deg) saturate(2.5);
}
.picture-text-neon__inner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,212,170,.35), rgba(0,201,167,.25));
  mix-blend-mode:screen;
  z-index:1;
}
.picture-text-neon__kicker{
  margin-bottom:28px;
  position:relative;
  z-index:2;
}
.picture-text-neon__label{
  display:inline-block;
  background:#0b0f0a;
  color:#00d4aa;
  padding:10px 24px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  border:1px solid rgba(0,212,170,.5);
  position:relative;
  z-index:2;
}
.picture-text-neon__title{
  font-size:clamp(2.5rem, 5vw, 4rem);
  font-weight:800;
  color:#2ED3C6;
  margin:0 0 32px;
  text-shadow:0 0 20px rgba(227,184,115,.5), 0 0 40px rgba(227,184,115,.3);
  line-height:1.1;
  position:relative;
  z-index:2;
}
.picture-text-neon__buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.picture-text-neon__buttons .btn{
  min-width:140px;
}
.top-spacer{display:none!important}

.wp-block-image img{max-width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border)}
.wp-block-table{overflow-x:auto; margin:1rem 0}
.wp-block-table table{width:100%; border-collapse:collapse; min-width:560px}
.wp-block-table th{background:rgba(0,201,167,.14); color:var(--text); text-align:left}
.wp-block-table th,.wp-block-table td{border:1px solid var(--border); padding:.75rem}
.wp-block-table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)}

/* === Footer — стили как у шапки === */
.site-footer{
  padding:24px 0 26px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(15,37,64,.9),rgba(15,37,64,.9));
  color:#a0d4ff;
  text-align:left;
  margin-top:40px;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.footer__top{
  display:flex;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.footer__brand{
  max-width:520px;
}
.footer__logo{
  width:170px;
  height:auto;
  margin-bottom:12px;
}
.footer__text{
  margin:0;
  font-size:14px;
  color:#a0b4c8;
}
.footer__payments{
  min-width:260px;
}
.footer__nav{
  min-width:180px;
}
.footer__nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer__nav-list a{
  color:#a0d4ff;
  font-size:14px;
  text-decoration:none;
}
.footer__nav-list a:hover{
  color:#00d4aa;
  text-decoration:none;
}
.footer__title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:600;
  color:#ffffff;
}
.footer__payments-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.footer__pay-icon{
  height:22px;
  width:auto;
  display:block;
  object-fit:contain;
}
.footer__pay-icon[src$=".svg"]{
  filter:brightness(0) saturate(100%) invert(68%) sepia(8%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(85%);
}
.footer__pay-pill{
  padding:6px 12px;
  border-radius:999px;
  background:#122a3a;
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  color:#a0d4ff;
}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:12px;
  font-size:12px;
  color:#8f9988;
  text-align:center;
}
.footer__copy{
  margin:0;
}
@media (max-width:640px){
  .footer__top{
    flex-direction:column;
  }
  .footer__brand{max-width:100%}
}

.table-of-contents-wrapper{margin:1rem 0 1.5rem}
.table-of-contents{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.table-of-contents__title{
  display:block;
  padding:.75rem 1rem;
  background:rgba(0,0,0,.2);
  border:none;
  cursor:pointer;
  font-weight:600;
  color:var(--fg);
  list-style:none;
  user-select:none;
  position:relative;
  transition:background 0.2s;
}
.table-of-contents__title:hover{
  background:rgba(0,0,0,.3);
}
.table-of-contents__title::-webkit-details-marker{display:none}
.table-of-contents__title::marker{display:none}
.table-of-contents__title::after{
  content:"▼";
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  transition:transform 0.2s;
  font-size:0.75rem;
  opacity:0.7;
}
.table-of-contents[open] .table-of-contents__title::after{
  transform:translateY(-50%) rotate(180deg);
}
.table-of-contents__nav{
  padding:.75rem 1rem;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease-out, padding 0.3s ease-out;
}
.table-of-contents[open] .table-of-contents__nav{
  max-height:800px;
  padding:.75rem 1rem;
}
.table-of-contents__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.table-of-contents__list a{
  display:block;
  padding:.45rem .7rem;
  border-radius:8px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--fg);
  transition:all 0.2s;
}
.table-of-contents__list a:hover{
  border-color:rgba(0,201,167,.55);
  background:rgba(0,201,167,.08);
}

.howto888{border:1px solid var(--border); border-radius:var(--radius); padding:1rem; background:rgba(255,255,255,.02)}
.howto888__block{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem}
.howto888__item{flex:1 1 240px}
.step__body{border:1px solid var(--border); border-radius:var(--radius); padding:1rem; background:rgba(0,0,0,.18); height:100%}
.step__body>span{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; border:1px solid var(--border); margin-bottom:.5rem}
.step__title{margin:.35rem 0 .5rem}
.step__text{margin:.5rem 0 0}
.howto888__image img{display:block; width:100%; height:auto}

.gift-block{border:1px solid var(--border); border-radius:var(--radius); padding:1rem; background:rgba(0,0,0,.1); backdrop-filter:blur(2px)}
.gift-block__icon{display:flex; justify-content:center; margin-bottom:0.75rem}
.gift-block__icon svg{width:46px; height:46px; fill:#00d4aa; filter:drop-shadow(0 0 10px rgba(0,212,170,.9)) drop-shadow(0 0 20px rgba(0,212,170,.6))}
.gift-block__text{margin:.75rem 0; color:#00d4aa; font-weight:600; text-align:center}
.gift-block__button .site-button{width:100%}
.gift-block__buttons{
  display:flex !important;
  gap:12px !important;
  margin-top:1rem !important;
  flex-direction:row !important;
  justify-content:center !important;
}
.gift-block__buttons .btn{
  flex:0 1 auto !important;
  min-width:140px !important;
  text-align:center !important;
  justify-content:center !important;
}

/* Gift Block Neon Style */
.gift-block--neon{
  border:1px solid rgba(0,212,170,.4) !important;
  background:rgba(11,15,10,.6) !important;
  box-shadow:0 0 15px rgba(0,212,170,.3) !important;
}
.gift-block--neon .gift-block__icon{
  display:flex;
  justify-content:center;
  margin-bottom:0.75rem;
}
.gift-block--neon .gift-block__icon svg{
  width:46px !important;
  height:46px !important;
  fill:#00d4aa !important;
  filter:drop-shadow(0 0 10px rgba(0,212,170,.9)) drop-shadow(0 0 20px rgba(0,212,170,.6)) !important;
}
.gift-block--neon .gift-block__text{
  color:#00d4aa !important;
  font-weight:600 !important;
  text-align:center;
  margin-bottom:1rem;
}
.gift-block__buttons{
  display:flex !important;
  gap:12px !important;
  margin-top:1rem !important;
  flex-direction:row !important;
  justify-content:center !important;
}
.gift-block__buttons .btn{
  flex:0 1 auto !important;
  min-width:140px !important;
  text-align:center !important;
  justify-content:center !important;
}

@media (max-width:720px){
  .picture-text__content{padding:0 .75rem}
  .wp-block-table table{min-width:520px}
}

@media (max-width:1300px){
  .picture-text-neon__outer{
    max-width:90%;
  }
}

@media (max-width:640px){
  .page-title-main{
    font-size:1.75rem;
    margin-bottom:16px;
  }
  .page-intro-text{
    font-size:0.95rem;
    margin-bottom:24px;
  }
  .picture-text-neon{
    padding:24px 0;
  }
  .picture-text-neon__outer{
    border-radius:16px 0 16px 0;
    max-width:calc(100% - 20px);
    margin-left:10px;
    margin-right:10px;
  }
  .picture-text-neon__inner{
    padding:40px 24px;
    border-radius:12px;
  }
  .picture-text-neon__title{
    font-size:2rem;
    margin-bottom:28px;
  }
  .picture-text-neon__buttons{
    flex-direction:column;
    width:100%;
  }
  .picture-text-neon__buttons .btn{
    width:100%;
  }
}