/* ============================================================
   AHF — ALMATY HANDBALL FEDERATION
   Official Design System CSS v2.0
   Official Palette:
     Primary:   #0D2843 (Deep Navy)  #729CBD (Steel Blue)  #FFFFFF (White)  #808080 (Tech Gray)
     Glow:      #C4E3F5 (Glow Blue)  #F0F8FF (Glow Ice)
     Extended:  #0D2843 #2B4C6F #4A7396 #82AAC8
   Fonts: Montserrat (headings) + Inter (body)
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === OFFICIAL AHF PALETTE === */
  --navy-deep:    #0D2843;   /* Deep Navy  — primary dark */
  --navy-mid:     #2B4C6F;   /* Navy Medium */
  --navy-light:   #4A7396;   /* Blue Dark */
  --navy-card:    #112238;   /* Card background */
  --steel:        #729CBD;   /* Steel Blue — key accent */
  --steel-light:  #82AAC8;   /* Blue Light */
  --steel-pale:   #C4E3F5;   /* Glow Blue */
  --ice:          #F0F8FF;   /* Glow Ice — light bg */
  --gray:         #808080;   /* Tech Gray */
  --gray-light:   #B0B8C1;
  --white:        #FFFFFF;
  --off-white:    #F5F9FC;

  /* === SEMANTIC ALIASES === */
  --blue:         var(--navy-mid);
  --blue-light:   var(--navy-light);
  --blue-bright:  var(--steel);
  --blue-accent:  var(--steel-light);
  --blue-glow:    rgba(13,40,67,0.25);

  /* === STATUS COLORS === */
  --gold:         #C9963B;
  --gold-light:   #E6B84A;
  --silver:       #9CA3AF;
  --green:        #2E7D5B;
  --red:          #C0392B;

  /* === DESIGN TOKENS === */
  --shadow-sm:    0 2px 8px rgba(13,40,67,0.10);
  --shadow-md:    0 4px 24px rgba(13,40,67,0.16);
  --shadow-lg:    0 8px 48px rgba(13,40,67,0.22);
  --shadow-blue:  0 4px 20px rgba(114,156,189,0.35);
  --shadow-card:  0 2px 16px rgba(13,40,67,0.10);

  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --transition:   0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ---------- HTML & BODY ---------- */
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--white);
  color: var(--navy-deep);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ---------- LAYOUT HELPERS ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.section-py    { padding: 80px 0; }
.section-py-sm { padding: 48px 0; }
.section-py-lg { padding: 112px 0; }

.bg-dark  { background: var(--navy-deep); color: var(--white); }
.bg-navy  { background: var(--navy-card); color: var(--white); }
.bg-light { background: var(--ice); }
.bg-pale  { background: var(--off-white); }
.center   { text-align: center; }

/* ---------- TYPOGRAPHY ---------- */
.section-label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 10px;
}
.section-label.light { color: var(--steel-pale); }
.section-label.gold  { color: var(--gold); }

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.18;
  margin-bottom: 16px;
}
.section-title.light { color: var(--white); }

.section-sub {
  font-size: 16px;
  color: var(--gray);
  max-width: 560px;
  line-height: 1.7;
}
.section-sub.light { color: rgba(255,255,255,0.72); }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 16px;
}
.section-header.center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.text-body  { color: #4a6070; line-height: 1.8; margin-bottom: 16px; }
.sub-title  {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--navy-mid);
}
.text-small { font-size: 13px; color: var(--gray); }
.text-steel { color: var(--steel) !important; }
.text-green { color: var(--green) !important; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.60);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,0.60); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--steel-pale); }
.breadcrumb i { font-size: 9px; }
.breadcrumb span { color: var(--white); }

/* ---------- BUTTONS ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--navy-mid);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  transition: all var(--transition);
  border: 2px solid var(--navy-mid);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-primary.btn-lg  { padding: 15px 36px; font-size: 15px; }
.btn-primary.btn-xl  { padding: 17px 48px; font-size: 16px; }
.btn-primary.btn-full { width: 100%; justify-content: center; }

.btn-steel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--steel);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid var(--steel);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-steel:hover {
  background: var(--steel-light);
  border-color: var(--steel-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}
.btn-steel.btn-lg { padding: 15px 36px; font-size: 15px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: transparent;
  color: var(--navy-deep);
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid var(--navy-mid);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-outline:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--white);
}
.btn-outline.btn-lg { padding: 15px 36px; font-size: 15px; }

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: transparent;
  color: var(--white);
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255,255,255,0.45);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-outline-light:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.12);
}
.btn-outline-light.btn-lg { padding: 15px 36px; font-size: 15px; }

.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: transparent;
  color: var(--navy-mid);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--navy-mid);
  transition: all var(--transition);
}
.btn-outline-sm:hover { background: var(--navy-mid); color: var(--white); }

.btn-nav-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  transition: color var(--transition);
  white-space: nowrap;
}
.btn-nav-login:hover { color: var(--steel-pale); }

/* Кнопка «Вступить» — акцентная, зелёная */
.btn-nav-join {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  transition: all var(--transition);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(34,197,94,0.35);
}
.btn-nav-join:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,197,94,0.45);
  color: #fff;
}

.btn-nav-register {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background: var(--steel);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-nav-register:hover {
  background: var(--steel-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
}

.btn-sm-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--navy-mid);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  transition: all var(--transition);
}
.btn-sm-primary:hover { background: var(--navy-deep); }

.btn-sm-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  color: var(--steel);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--steel);
  transition: all var(--transition);
}
.btn-sm-outline:hover { background: var(--steel); color: var(--white); }

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: all var(--transition);
}
.navbar.scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,0.35);
  background: rgba(13,40,67,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  /* Горизонтальный логотип тёмно-синий → инвертируем в белый для тёмного navbar */
  filter: brightness(0) invert(1);
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.nav-logo:hover .nav-logo-img { opacity: 0.80; }

/* Текстовая подпись рядом с логотипом */
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  border-left: 1.5px solid rgba(255,255,255,0.18);
  padding-left: 10px;
}
.nav-logo-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 1px;
  line-height: 1.1;
}
.nav-logo-sub {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nav-logo-text { display: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  flex-wrap: nowrap;
}

.nav-link {
  padding: 8px 12px;
  color: rgba(255,255,255,0.72);
  font-size: 11.5px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.8px;
  transition: color var(--transition);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--white); }
.nav-link.active {
  color: var(--steel-pale);
  border-bottom-color: var(--steel);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(114,156,189,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(43,76,111,0.5) 0%, transparent 55%),
    linear-gradient(135deg, #0D2843 0%, #112238 45%, #0D2843 100%);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(114,156,189,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,156,189,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at center, black 40%, transparent 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 80px;
}

.hero-text { display: flex; flex-direction: column; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(114,156,189,0.15);
  border: 1px solid rgba(114,156,189,0.3);
  color: var(--steel-pale);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  width: fit-content;
}
.hero-badge i { color: var(--steel); font-size: 10px; }

.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.0;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.hero-title-accent { color: var(--steel); }

.hero-slogan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 36px;
  padding-left: 16px;
  border-left: 3px solid var(--steel);
}
.hero-slogan span:first-child {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--steel-pale);
  letter-spacing: 2px;
}
.slogan-kz, .slogan-kk {
  font-size: 13px;
  color: rgba(255,255,255,0.50);
  font-style: italic;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-emblem-wrap {
  position: relative;
  width: 340px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-emblem-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114,156,189,0.25) 0%, transparent 70%);
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.hero-emblem-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(114,156,189,0.25);
  animation: spin-ring 20s linear infinite;
}
@keyframes spin-ring { to { transform: rotate(360deg); } }

.hero-emblem-img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 8px 32px rgba(13,40,67,0.5));
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 18px;
  animation: bounce 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ---------- STATS SECTION ---------- */
.stats-section {
  background: var(--navy-mid);
  padding: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  padding: 36px 24px;
  text-align: center;
  position: relative;
  transition: background var(--transition);
}
.stat-card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.12);
}
.stat-card:last-child::after { display: none; }
.stat-card:hover { background: rgba(255,255,255,0.05); }

.stat-value {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.60);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- ABOUT PREVIEW ---------- */
.about-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-preview-text p {
  color: #4a6070;
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 15px;
}

.about-preview-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0 32px;
  padding: 20px;
  background: var(--ice);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--steel);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.info-item i {
  width: 36px;
  height: 36px;
  background: var(--navy-mid);
  color: var(--white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.info-item strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  margin-bottom: 2px;
}
.info-item span { font-size: 15px; font-weight: 600; color: var(--navy-deep); }

/* Фото президента в info-item */
.info-president-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--steel);
  box-shadow: 0 2px 10px rgba(21,101,192,0.2);
}
.info-president-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-mid), var(--steel));
  transform: scaleX(0);
  transition: transform var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature-icon i { color: var(--white); font-size: 18px; }
.feature-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 6px;
}
.feature-card p { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* ---------- QUICK ACCESS ---------- */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.quick-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  cursor: pointer;
}
.quick-card:hover {
  background: rgba(114,156,189,0.12);
  border-color: rgba(114,156,189,0.35);
  transform: translateY(-2px);
}

.quick-icon {
  width: 48px;
  height: 48px;
  background: var(--steel);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-icon i { color: var(--white); font-size: 20px; }

.quick-text { flex: 1; }
.quick-text strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 3px;
}
.quick-text span { font-size: 12px; color: rgba(255,255,255,0.55); }

.quick-arrow { color: rgba(255,255,255,0.35); font-size: 12px; flex-shrink: 0; }
.quick-card:hover .quick-arrow { color: var(--steel-pale); }

/* ---------- NEWS SECTION (HOME) ---------- */
.news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
}

.news-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--steel-pale);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.news-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.news-card-featured .news-img-wrap { aspect-ratio: 16/9; }

.news-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-card:hover .news-img-wrap img { transform: scale(1.04); }

.news-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--navy-mid);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}

.news-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.news-date {
  font-size: 12px;
  color: var(--steel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}
.news-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.35;
  margin-bottom: 10px;
}
.news-card-featured .news-title { font-size: 20px; }
.news-excerpt { font-size: 14px; color: var(--gray); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.news-read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}
.news-read-more:hover { color: var(--steel); }

/* ---------- CTA SECTION ---------- */
.cta-section {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  right: -200px;
  top: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114,156,189,0.12) 0%, transparent 70%);
}

.cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cta-text h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
}
.cta-text p { color: rgba(255,255,255,0.70); font-size: 16px; margin-bottom: 28px; }

.cta-plans {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-plan {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plan-role {
  font-size: 11px;
  color: rgba(255,255,255,0.60);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.plan-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--steel-pale);
}

.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.cta-payment-logos { text-align: center; }
.payment-label { font-size: 12px; color: rgba(255,255,255,0.50); margin-bottom: 8px; display: block; }
.payment-icons { display: flex; gap: 8px; justify-content: center; }

.payment-badge {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  background: rgba(255,255,255,0.08);
}
.payment-badge.kaspi { color: #FF0000; background: rgba(255,0,0,0.08); border-color: rgba(255,0,0,0.3); }
.payment-badge.halyk { color: #00A65A; background: rgba(0,166,90,0.08); border-color: rgba(0,166,90,0.3); }

/* ---------- PARTNERS PREVIEW ---------- */
.partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.partner-logo {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  transition: all var(--transition);
}
.partner-logo:hover { transform: translateY(-2px); }

/* Светлый логотип на светлом фоне — без инверсии */
.partner-logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: grayscale(0.1);
  transition: filter var(--transition);
}
.partner-logo:hover .partner-logo-img { filter: grayscale(0); }

/* MIG лого — чуть крупнее т.к. вертикальный */
.partner-logo-mig .partner-logo-img {
  height: 72px;
}

.partner-placeholder {
  background: var(--ice);
  border: 2px dashed var(--steel-pale);
  border-radius: var(--radius-sm);
  min-width: 160px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  gap: 4px;
}
.partner-placeholder span { font-size: 14px; font-weight: 700; color: var(--gray); text-align: center; }

.center-action { text-align: center; }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  right: 5%;
  bottom: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114,156,189,0.15) 0%, transparent 70%);
}

.page-hero-content { position: relative; z-index: 1; }

.page-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.page-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.68);
  max-width: 520px;
  line-height: 1.65;
}

/* ---------- BADGES / TAGS ---------- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.badge-active { background: rgba(46,125,91,0.12); color: var(--green); border: 1px solid rgba(46,125,91,0.3); }
.badge-soon   { background: rgba(201,150,59,0.12); color: var(--gold); border: 1px solid rgba(201,150,59,0.3); }
.badge-done   { background: rgba(128,128,128,0.12); color: var(--gray); border: 1px solid rgba(128,128,128,0.3); }
.badge-navy   { background: var(--navy-mid); color: var(--white); }
.badge-steel  { background: var(--steel); color: var(--white); }

/* ---------- CARDS ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card-dark {
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 28px;
  color: var(--white);
  transition: all var(--transition);
}
.card-dark:hover { border-color: rgba(114,156,189,0.3); }

/* ---------- FORMS ---------- */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.input-icon-wrap { position: relative; }
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
  width: 16px;
  text-align: center;
}

.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea {
  padding-left: 44px !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-deep);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(114,156,189,0.2);
}
textarea { resize: vertical; min-height: 110px; }

.input-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  font-size: 14px;
  padding: 4px;
  transition: color var(--transition);
}
.input-toggle:hover { color: var(--navy-deep); }

.form-row { display: flex; gap: 16px; }
.form-row-between { justify-content: space-between; align-items: center; }
.form-col { flex: 1; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--navy-deep);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--steel); }

.forgot-link {
  font-size: 13px;
  color: var(--steel);
  font-weight: 600;
  transition: color var(--transition);
}
.forgot-link:hover { color: var(--navy-mid); }

.form-hint { font-size: 12px; color: var(--gray); margin-top: 5px; }
.form-error { font-size: 12px; color: var(--red); margin-top: 5px; display: none; }

/* ---------- AUTH PAGES ---------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-promo {
  background: linear-gradient(145deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
  position: relative;
  overflow: hidden;
}

.auth-promo-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 20% 20%, rgba(114,156,189,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(43,76,111,0.5) 0%, transparent 60%);
}

.auth-promo-content { position: relative; z-index: 2; }

.auth-logo-img {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 32px;
}

.auth-promo-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.auth-promo-sub {
  font-size: 15px;
  color: var(--steel-pale);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 36px;
}

.auth-promo-features { display: flex; flex-direction: column; gap: 12px; }
.apf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
}
.apf-item i { color: var(--steel-pale); font-size: 14px; }

.auth-balls {
  position: absolute;
  bottom: 40px;
  right: 40px;
}
.auth-ball {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(114,156,189,0.25);
}
.auth-ball-1 { width: 80px; height: 80px; bottom: 0; right: 0; }
.auth-ball-2 { width: 50px; height: 50px; bottom: 48px; right: 64px; }

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
  background: var(--white);
}

.auth-form-container { width: 100%; max-width: 400px; }

/* ── Фикс placeholder и font для auth полей ── */
.auth-form-container input::placeholder,
.auth-form-container .input-icon-wrap input::placeholder {
  font-style: normal;
  color: #94a3b8;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}
.auth-form-container input,
.auth-form-container .input-icon-wrap input {
  font-style: normal;
  font-family: 'Inter', sans-serif;
}

.auth-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 32px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--gray);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--steel-pale);
}

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 16px;
}
.auth-switch a {
  color: var(--navy-mid);
  font-weight: 700;
}
.auth-switch a:hover { color: var(--steel); }

.auth-legal {
  text-align: center;
  font-size: 12px;
  color: var(--gray);
}
.auth-legal a { color: var(--steel); }

/* ---------- DASHBOARD ---------- */
.dashboard-page { padding-top: 68px; background: var(--ice); min-height: 100vh; }

.dashboard-header {
  background: var(--navy-deep);
  padding: 32px 0;
}
.dashboard-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dashboard-avatar {
  width: 64px;
  height: 64px;
  background: var(--steel);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--white);
  font-weight: 700;
  flex-shrink: 0;
}

.dashboard-user-info h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.dashboard-user-info p { font-size: 14px; color: rgba(255,255,255,0.60); }
.dashboard-user-info .badge { margin-left: 8px; }

.dashboard-body { padding: 40px 0; }
.dashboard-grid { display: grid; grid-template-columns: 260px 1fr; gap: 32px; }

.dashboard-sidebar { display: flex; flex-direction: column; gap: 8px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
  transition: all var(--transition);
}
.sidebar-link:hover, .sidebar-link.active {
  background: var(--navy-mid);
  color: var(--white);
}
.sidebar-link i { width: 18px; text-align: center; }

.dashboard-main { display: flex; flex-direction: column; gap: 24px; }

.db-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.db-stat-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.db-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-stat-icon.navy { background: rgba(13,40,67,0.1); }
.db-stat-icon.steel { background: rgba(114,156,189,0.15); }
.db-stat-icon.gold { background: rgba(201,150,59,0.12); }
.db-stat-icon i { font-size: 20px; }
.db-stat-icon.navy i { color: var(--navy-deep); }
.db-stat-icon.steel i { color: var(--steel); }
.db-stat-icon.gold i { color: var(--gold); }
.db-stat-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-deep);
}
.db-stat-lbl { font-size: 12px; color: var(--gray); font-weight: 600; }

/* ---------- ABOUT PAGE ---------- */
.about-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.mission-text p { font-size: 15px; color: #4a6070; line-height: 1.8; margin-bottom: 14px; }
.mission-goals { display: flex; flex-direction: column; gap: 12px; }
.goal-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ice);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--steel);
}
.goal-item i { color: var(--steel); margin-top: 2px; flex-shrink: 0; }
.goal-item span { font-size: 14px; color: var(--navy-deep); line-height: 1.5; }

.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.leader-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition);
  text-align: center;
}
.leader-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.leader-card:first-child { grid-column: span 1; }

.leader-photo {
  width: 100%;
  aspect-ratio: 3/2;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.leader-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--steel), var(--glow));
  z-index: 2;
}
/* Фото руководителя */
.leader-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.leader-card:hover .leader-photo-img {
  transform: scale(1.04);
}
/* Карточка президента — увеличенная */
.leader-card-has-photo {
  grid-column: span 1;
}
.leader-card-has-photo .leader-photo {
  aspect-ratio: 3/4;
}
.leader-card-has-photo .leader-name {
  font-size: 17px;
  color: var(--navy-deep);
}
.leader-card-has-photo .leader-role {
  color: var(--steel);
  font-weight: 700;
}
/* Бейдж ПРЕЗИДЕНТ */
.leader-card-has-photo .leader-photo::before {
  content: attr(data-badge);
  position: absolute;
  top: 14px; left: 14px;
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 5px;
  z-index: 3;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
}
/* Тренер — зелёный бейдж */
.leader-card-has-photo:nth-child(3) .leader-photo::before {
  background: linear-gradient(135deg, #2e7d32, #43a047);
}
/* Вице-президент — steel бейдж */
.leader-card-has-photo:nth-child(2) .leader-photo::before {
  background: linear-gradient(135deg, #37617a, #4a90a4);
}

.leader-body { padding: 20px 24px 24px; text-align: left; }
.leader-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 4px;
}
.leader-role {
  font-size: 13px;
  color: var(--steel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.leader-desc { font-size: 13px; color: var(--gray); line-height: 1.6; margin-bottom: 14px; }

/* Leader award badge */
.leader-award {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d4a017, #f0c040);
  color: #5a3800;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.leader-award i { font-size: 11px; }

/* Leader directions list */
.leader-directions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-top: 4px;
}
.leader-dir-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}
.leader-dir-item i {
  color: var(--steel);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ========================================
   MEMBERSHIP PAGE
   ======================================== */

/* --- Member ID sample card --- */
.member-id-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: center;
}
.member-id-text .text-body { color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.member-id-text .text-body strong { color: var(--navy-deep); }
.member-id-important {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--ice);
  border: 1px solid var(--steel-pale);
  border-left: 4px solid var(--navy-deep);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--navy-deep);
  line-height: 1.5;
  margin-top: 20px;
}
.member-id-important i { color: var(--navy-mid); font-size: 16px; flex-shrink: 0; margin-top: 2px; }

.member-id-card-wrap {
  display: flex;
  justify-content: center;
}
.member-id-sample-card {
  width: 320px;
  background: linear-gradient(145deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(13,40,67,0.35);
  color: var(--white);
}
.mid-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mid-card-logo { height: 32px; width: auto; object-fit: contain; }
.mid-card-org {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  line-height: 1.3;
}
.mid-card-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.mid-card-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.mid-card-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}
.mid-card-role {
  font-size: 11px;
  color: var(--steel-pale);
  margin-bottom: 6px;
}
.mid-card-id {
  font-family: 'Montserrat', monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--glow);
  letter-spacing: 1px;
}
.mid-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 14px;
  background: rgba(0,0,0,0.2);
}
.mid-card-status.active { font-size: 11px; color: #4ade80; font-weight: 700; letter-spacing: 0.5px; }
.mid-card-valid { font-size: 10px; color: rgba(255,255,255,0.4); }

/* --- Membership categories --- */
.membership-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.membership-cat-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}
.membership-cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cat-card-top {
  padding: 24px 20px 16px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-icon-wrap {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.cat-labels { flex: 1; }
.cat-label-ru {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}
.cat-label-en {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}
.cat-price-wrap { text-align: right; }
.cat-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--glow);
  line-height: 1;
}
.cat-period { font-size: 11px; color: rgba(255,255,255,0.5); }
.cat-divider { height: 1px; background: var(--steel-pale); }
.cat-rights { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; gap: 0; }
.cat-rights-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.cat-right-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--navy-deep);
  line-height: 1.4;
  margin-bottom: 8px;
}
.cat-right-item i { color: var(--steel); font-size: 11px; flex-shrink: 0; margin-top: 3px; }
.cat-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--gray);
  line-height: 1.4;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--steel-pale);
}
.cat-note i { color: #e09c35; font-size: 11px; flex-shrink: 0; margin-top: 2px; }
.cat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--navy-deep);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
  margin-top: auto;
}
.cat-btn:hover { background: var(--navy-mid); }

/* --- Registration steps --- */
.reg-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.reg-step-card {
  text-align: center;
  padding: 28px 20px;
  position: relative;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  margin: 0 8px;
  transition: all var(--transition);
}
.reg-step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.reg-step-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--steel);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.reg-step-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--white);
  font-size: 20px;
}
.reg-step-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}
.reg-step-desc { font-size: 12px; color: var(--gray); line-height: 1.5; }
.reg-step-arrow {
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  color: var(--steel);
  font-size: 14px;
  z-index: 2;
}

/* --- Payment info section --- */
.payment-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.text-body.light { color: rgba(255,255,255,0.75); margin-bottom: 14px; line-height: 1.7; }
.text-body.light strong { color: var(--steel-pale); }
.payment-banks {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}
.payment-bank-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  text-align: center;
  flex: 1;
}
.payment-bank-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}
.kaspi-color { color: #FF2D2D; }
.halyk-color { color: #00C46A; }
.payment-bank-sub { font-size: 12px; color: rgba(255,255,255,0.45); }

.payment-summary-table {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pay-sum-title {
  padding: 16px 20px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--steel-pale);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pay-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 12px;
}
.pay-sum-row span:first-child { display: flex; align-items: center; gap: 8px; }
.pay-sum-row i { color: var(--steel); font-size: 13px; width: 16px; }
.pay-sum-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--glow);
  white-space: nowrap;
}
.pay-sum-note {
  padding: 14px 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  display: flex;
  gap: 8px;
  align-items: center;
}
.pay-sum-note i { color: var(--steel); }

/* --- Statuses --- */
.statuses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.status-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
  transition: all var(--transition);
}
.status-card:hover { box-shadow: var(--shadow-sm); }
.status-badge-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.status-badge-lg i { font-size: 14px; }
.status-green { background: #dcfce7; color: #166534; }
.status-gold  { background: #fef9c3; color: #854d0e; }
.status-red   { background: #fee2e2; color: #991b1b; }
.status-desc { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* --- Important CTA box --- */
.important-cta-box {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--white);
  border: 2px solid var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  flex-wrap: wrap;
}
.important-icon {
  font-size: 32px;
  color: #e09c35;
  flex-shrink: 0;
}
.important-content { flex: 1; min-width: 200px; }
.important-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.important-text { font-size: 14px; color: var(--gray); line-height: 1.6; margin: 0; }
.important-text strong { color: var(--navy-deep); }

/* Copyright block */
.copyright-block {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  flex-wrap: wrap;
}
.copyright-mig-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(1.15);
}
.copyright-text {
  flex: 1;
  min-width: 200px;
}
.copyright-text p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 6px 0;
}
.copyright-text p:last-child { margin-bottom: 0; }
.copyright-text strong { color: var(--steel-pale); }
.copyright-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ---------- ABOUT OVERVIEW ---------- */
.about-overview-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}
.about-overview-text .text-body { margin-bottom: 14px; color: var(--gray); line-height: 1.7; }
.about-overview-text .text-body strong { color: var(--navy-deep); }
.about-overview-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-stat-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: all var(--transition);
}
.about-stat-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.about-stat-icon {
  width: 40px; height: 40px;
  background: var(--navy-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  color: var(--white);
  font-size: 15px;
}
.about-stat-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1;
  margin-bottom: 4px;
}
.about-stat-label { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- MISSION STATEMENT ---------- */
.mission-statement {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-left: 4px solid var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 36px 40px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.mission-quote-icon {
  font-size: 32px;
  color: var(--steel);
  flex-shrink: 0;
  margin-top: 4px;
}
.mission-quote-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--navy-deep);
  line-height: 1.7;
  margin: 0;
}

/* ---------- AIMS & TASKS ---------- */
.aims-tasks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.aims-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.aim-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.aim-item:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.aim-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--steel);
  line-height: 1;
  flex-shrink: 0;
  min-width: 28px;
}
.aim-text { font-size: 14px; color: var(--navy-deep); line-height: 1.5; font-weight: 500; }

.tasks-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.task-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--ice);
  border-radius: var(--radius-sm);
}
.task-icon {
  width: 36px; height: 36px;
  background: var(--navy-deep);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 14px;
  flex-shrink: 0;
}
.task-text { font-size: 14px; color: var(--navy-mid); line-height: 1.4; }

/* ---------- PRINCIPLES ---------- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.principle-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  transition: all var(--transition);
}
.principle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--steel); }
.principle-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--white);
  font-size: 18px;
}
.principle-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.4;
}

/* ---------- INTERNATIONAL ---------- */
.intl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.text-body.light { color: rgba(255,255,255,0.75); margin-bottom: 20px; line-height: 1.7; }
.intl-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.intl-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--steel-pale);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.intl-rights {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 28px;
}
.intl-rights-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--steel-pale);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}
.intl-right-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.intl-right-item i { color: var(--steel); flex-shrink: 0; margin-top: 3px; }
.intl-jurisdiction {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.intl-jurisdiction i { color: var(--steel); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.intl-jur-title { font-size: 11px; color: var(--steel-pale); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.intl-jur-text { font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 500; }

/* ---------- LEGAL STATUS BOX ---------- */
.legal-status-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--ice);
  border: 1px solid var(--steel-pale);
  border-left: 4px solid var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 20px;
}
.legal-status-icon {
  font-size: 28px;
  color: var(--navy-mid);
  flex-shrink: 0;
  margin-top: 2px;
}
.legal-status-text {
  font-size: 15px;
  color: var(--navy-deep);
  line-height: 1.7;
  margin: 0;
}
.legal-status-text strong { color: var(--navy-deep); }
.legal-status-summary {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.legal-status-summary p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.7;
  font-style: italic;
}

/* ---------- LEGAL BLOCK ---------- */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.legal-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--ice);
  border-radius: var(--radius-sm);
}
.legal-item .li-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  margin-bottom: 3px;
  font-weight: 600;
}
.legal-item .li-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
}

/* ---------- DOCUMENTS PAGE ---------- */
.docs-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.docs-tab {
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--steel-pale);
  color: var(--navy-deep);
  transition: all var(--transition);
  background: var(--white);
}
.docs-tab:hover, .docs-tab.active {
  background: var(--navy-mid);
  color: var(--white);
  border-color: var(--navy-mid);
}

.docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.doc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
}
.doc-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }

.doc-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.doc-icon.pdf { background: rgba(192,57,43,0.12); color: #C0392B; }
.doc-icon.word { background: rgba(41,128,185,0.12); color: #2980B9; }
.doc-icon.excel { background: rgba(39,174,96,0.12); color: #27AE60; }
.doc-icon.lock { background: rgba(201,150,59,0.12); color: var(--gold); }

.doc-body { flex: 1; min-width: 0; }
.doc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-meta { font-size: 12px; color: var(--gray); }
.doc-actions { flex-shrink: 0; }
.doc-locked { opacity: 0.6; }
.doc-locked .doc-title::after {
  content: ' 🔒';
  font-size: 11px;
}

/* ---------- TEAMS PAGE ---------- */
.team-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.team-filter-btn {
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--steel-pale);
  background: var(--white);
  color: var(--navy-deep);
  transition: all var(--transition);
}
.team-filter-btn:hover, .team-filter-btn.active {
  background: var(--navy-mid);
  color: var(--white);
  border-color: var(--navy-mid);
}

.teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.team-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.team-card-header {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  padding: 24px;
  text-align: center;
}
.team-card-header i { font-size: 36px; color: rgba(255,255,255,0.35); }

.team-card-body { padding: 20px; }
.team-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 4px;
}
.team-city { font-size: 13px; color: var(--steel); margin-bottom: 12px; }
.team-stats { display: flex; gap: 16px; }
.team-stat { text-align: center; }
.team-stat-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-deep);
}
.team-stat-lbl { font-size: 11px; color: var(--gray); text-transform: uppercase; }

/* ---------- TOURNAMENTS PAGE ---------- */
.tournament-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tournament-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.tournament-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tournament-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 4px;
}
.tournament-type { font-size: 13px; color: var(--steel); }

.tournament-meta { display: flex; flex-direction: column; gap: 6px; }
.t-meta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4a6070; }
.t-meta-item i { width: 16px; color: var(--steel); font-size: 12px; }

.tournaments-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px; }

.schedule-table { width: 100%; border-collapse: collapse; }
.schedule-table th {
  background: var(--navy-deep);
  color: var(--white);
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.schedule-table td { padding: 14px 16px; border-bottom: 1px solid var(--steel-pale); font-size: 14px; }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr:hover td { background: var(--ice); }

/* ---------- NEWS PAGE ---------- */
.news-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.news-featured-row {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}
.news-featured-img { aspect-ratio: 16/8; }
.news-featured-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }

.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-tab {
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--steel-pale);
  background: var(--white);
  color: var(--navy-deep);
  transition: all var(--transition);
}
.filter-tab:hover, .filter-tab.active {
  background: var(--navy-mid);
  color: var(--white);
  border-color: var(--navy-mid);
}

/* ---------- PARTNERS PAGE ---------- */
.sponsorship-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.sponsorship-card {
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sponsorship-card.gold-tier {
  background: linear-gradient(135deg, #C9963B, #E6B84A);
  color: var(--white);
}
.sponsorship-card.platinum-tier {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  color: var(--white);
}
.sponsorship-card.title-tier {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: var(--white);
}
.tier-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tier-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 4px;
}
.tier-period { font-size: 13px; opacity: 0.75; margin-bottom: 20px; }
.tier-perks { list-style: none; text-align: left; }
.tier-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
  opacity: 0.9;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tier-perks li:last-child { border-bottom: none; }
.tier-perks li i { font-size: 12px; opacity: 0.7; }

/* ---------- CONTACTS PAGE ---------- */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-icon {
  width: 44px;
  height: 44px;
  background: var(--navy-mid);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  flex-shrink: 0;
}
.contact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  font-weight: 600;
  margin-bottom: 3px;
}
.contact-value { font-size: 15px; font-weight: 600; color: var(--navy-deep); }
.contact-value a { color: var(--steel); }
.contact-value a:hover { color: var(--navy-mid); }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 36px;
}
.contact-form-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 24px;
}

/* ---------- 404 PAGE ---------- */
.not-found-page {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  background: var(--white);
}
.not-found-code {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(80px, 15vw, 140px);
  font-weight: 900;
  color: var(--navy-mid);
  line-height: 1;
  margin-bottom: 0;
  text-shadow: 0 0 60px rgba(114,156,189,0.35);
}
.not-found-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 12px;
}
.not-found-sub { color: var(--gray); font-size: 16px; margin-bottom: 36px; }

/* ---------- THANK YOU PAGE ---------- */
.thankyou-page {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  background: var(--ice);
}
.thankyou-check {
  width: 80px;
  height: 80px;
  background: rgba(46,125,91,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 36px;
  color: var(--green);
}
.thankyou-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  font-weight: 900;
  color: var(--navy-deep);
  margin-bottom: 10px;
}
.thankyou-sub { font-size: 18px; color: var(--gray); margin-bottom: 36px; }

/* ---------- REGISTRATION PAGE ---------- */
.register-page { padding-top: 68px; background: var(--ice); min-height: 100vh; }
.register-wrap { max-width: 680px; margin: 0 auto; padding: 60px 24px; }
.register-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-lg);
  padding: 48px;
}
.register-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 6px;
}
.register-sub { font-size: 15px; color: var(--gray); margin-bottom: 36px; }

.role-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
.role-option {
  position: relative;
  cursor: pointer;
}
.role-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  text-align: center;
}
.role-option input:checked + .role-card {
  border-color: var(--navy-mid);
  background: rgba(43,76,111,0.06);
}
.role-card i { font-size: 24px; color: var(--steel); }
.role-card .role-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-deep);
}
.role-card .role-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-mid);
  font-family: 'Montserrat', sans-serif;
}

.register-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  font-weight: 600;
}
.register-divider::before, .register-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--steel-pale);
}

.payment-section {
  background: var(--ice);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 24px;
}
.payment-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 12px;
}
.payment-options { display: flex; gap: 10px; }
.payment-opt {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 13px;
  font-weight: 700;
  background: var(--white);
}
.payment-opt:hover { border-color: var(--steel); }
.payment-opt.selected { border-color: var(--navy-mid); background: rgba(43,76,111,0.06); }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.72);
  margin-top: auto;
}

.footer-top { padding: 64px 0 40px; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 40px;
}

.footer-logo-wrap {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.footer-logo-img {
  height: 80px;
  width: 80px;
  object-fit: contain;
  /* Круглая эмблема — без инверсии, содержит белые элементы */
  filter: none;
  border-radius: 50%;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.footer-tagline strong { color: rgba(255,255,255,0.90); display: block; margin-bottom: 3px; }
.footer-tagline span { color: rgba(255,255,255,0.45); font-size: 12px; }

.footer-motto {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-socials { display: flex; gap: 10px; }
.social-link {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.60);
  transition: all var(--transition);
}
.social-link:hover {
  background: var(--steel);
  border-color: var(--steel);
  color: var(--white);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--steel-pale); }

.footer-contacts { display: flex; flex-direction: column; gap: 10px; }
.footer-contacts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.footer-contacts li i { color: var(--steel); font-size: 12px; margin-top: 3px; flex-shrink: 0; }
.footer-contacts li a { color: rgba(255,255,255,0.55); }
.footer-contacts li a:hover { color: var(--steel-pale); }

.footer-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0 24px; }

.footer-bottom { padding: 20px 0; }
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-bottom-left p {
  font-size: 12px;
  color: rgba(255,255,255,0.40);
  margin-bottom: 2px;
}
.footer-bottom-left strong { color: rgba(255,255,255,0.60); }

/* MIG operator block in footer bottom */
.footer-operator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.footer-operator-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.30);
  font-weight: 600;
  white-space: nowrap;
}
.footer-mig-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  /* тёмная версия MIG — белый текст, хорошо на тёмном фоне */
  opacity: 0.88;
  transition: opacity var(--transition);
}
.footer-mig-logo:hover { opacity: 1; }

.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.40);
  transition: color var(--transition);
}
.footer-legal a:hover { color: var(--steel-pale); }

/* ---------- ALERTS ---------- */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.alert-success { background: rgba(46,125,91,0.10); border: 1px solid rgba(46,125,91,0.3); color: var(--green); }
.alert-error   { background: rgba(192,57,43,0.10); border: 1px solid rgba(192,57,43,0.3); color: var(--red); }
.alert-info    { background: rgba(114,156,189,0.10); border: 1px solid rgba(114,156,189,0.3); color: var(--navy-mid); }
.alert i { flex-shrink: 0; }

/* ---------- LOADING ---------- */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 40px; padding-top: 100px; }
  .hero-visual { order: -1; }
  .hero-emblem-img { width: 220px; height: 220px; }
  .hero-emblem-wrap { width: 260px; height: 260px; }
  .about-preview-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-grid .news-card:first-child { grid-column: span 2; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tournaments-grid { grid-template-columns: 1fr; }
  .teams-grid { grid-template-columns: repeat(2, 1fr); }
  .leadership-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-page { grid-template-columns: 1fr; }
  .auth-promo { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-sidebar { display: none; }
  /* About page new sections */
  .about-overview-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-overview-stats { grid-template-columns: repeat(4, 1fr); }
  .aims-tasks-grid { grid-template-columns: 1fr; gap: 48px; }
  .principles-grid { grid-template-columns: repeat(3, 1fr); }
  .intl-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Membership page */
  .member-id-grid { grid-template-columns: 1fr; gap: 36px; }
  .membership-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .reg-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .reg-step-arrow { display: none; }
  .payment-info-grid { grid-template-columns: 1fr; gap: 32px; }
  .statuses-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .section-py { padding: 56px 0; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: var(--navy-deep);
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 4px;
    z-index: 999;
  }
  .nav-links.open .nav-link {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
  }
  .nav-hamburger { display: flex; }
  .nav-actions .btn-nav-login { display: none; }
  .nav-actions .btn-nav-join {
    padding: 8px 12px;
    font-size: 12px;
  }
  .nav-actions .btn-nav-register { display: none; }
  .hero-title { font-size: clamp(32px, 8vw, 52px); }
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn-primary, .hero-actions .btn-outline { width: 100%; justify-content: center; }
  .quick-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .news-grid .news-card:first-child { grid-column: span 1; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card::after { display: none; }
  .stat-card { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .feature-cards { grid-template-columns: 1fr; }
  .cta-plans { flex-direction: column; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .db-stats-grid { grid-template-columns: 1fr; }
  .about-mission { grid-template-columns: 1fr; gap: 32px; }
  .leadership-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .sponsorship-grid { grid-template-columns: 1fr; }
  .contacts-grid { grid-template-columns: 1fr; }
  .legal-grid { grid-template-columns: 1fr; }
  .role-selector { grid-template-columns: 1fr 1fr; }
  .news-page-grid { grid-template-columns: 1fr; }
  .news-featured-row { grid-column: span 1; grid-template-columns: 1fr; }
  .teams-grid { grid-template-columns: 1fr; }
  .register-card { padding: 28px 20px; }
  .auth-form-side { padding: 60px 24px; }
  .page-hero { padding: 80px 0 40px; }
  /* About page new sections */
  .about-overview-stats { grid-template-columns: repeat(2, 1fr); }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-statement { padding: 24px; gap: 16px; }
  .mission-quote-text { font-size: 15px; }
  .legal-status-box { flex-direction: column; gap: 16px; }
  /* Membership page */
  .membership-cats-grid { grid-template-columns: 1fr 1fr; }
  .statuses-grid { grid-template-columns: 1fr; }
  .important-cta-box { flex-direction: column; text-align: center; }
  .member-id-sample-card { width: 100%; max-width: 320px; }
}

@media (max-width: 480px) {
  .btn-primary.btn-xl { padding: 14px 28px; font-size: 14px; }
  .hero-emblem-img { width: 180px; height: 180px; }
  .role-selector { grid-template-columns: 1fr; }
  .payment-options { flex-direction: column; }
  /* About page new sections */
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .about-overview-stats { grid-template-columns: 1fr 1fr; }
  .aims-tasks-grid { gap: 32px; }
  /* Membership page */
  .membership-cats-grid { grid-template-columns: 1fr; }
  .reg-steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .statuses-grid { grid-template-columns: 1fr; }
  .payment-banks { flex-direction: column; }
}

/* =========================================
   DOCUMENTS / GOVERNANCE — PAYWALL SYSTEM
   ========================================= */

/* ─── Access Banner ──────────────────────── */
.docs-access-banner {
  background: var(--ice);
  border-bottom: 1px solid var(--steel-pale);
  padding: 28px 0;
}
.access-banner-grid {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.access-tier-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  position: relative;
}
.access-tier-card.tier-paid { border-color: #d4a017; }
.tier-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.tier-free .tier-icon  { background: #dcfce7; color: #166534; }
.tier-paid .tier-icon  { background: #fef9c3; color: #854d0e; }
.tier-body { flex: 1; }
.tier-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 2px;
}
.tier-sub  { font-size: 10px; color: var(--steel); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.tier-desc { font-size: 12px; color: var(--gray); line-height: 1.4; }
.tier-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}
.tier-badge-green { background: #dcfce7; color: #166534; }
.tier-badge-gold  { background: #fef9c3; color: #854d0e; }
.access-tier-arrow {
  color: var(--steel);
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 4px;
}
.access-rbac-box {
  flex: 1;
  min-width: 220px;
  background: var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  color: var(--white);
}
.rbac-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--steel-pale);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rbac-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 7px;
  color: rgba(255,255,255,0.8);
}
.rbac-rule i { flex-shrink: 0; margin-top: 2px; font-size: 12px; }
.rbac-deny  i { color: #f87171; }
.rbac-allow i { color: #4ade80; }
.rbac-paid  i { color: #fbbf24; }
.rbac-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--steel-pale);
  text-decoration: underline;
}
.rbac-link:hover { color: var(--white); }

/* ─── Category tabs ─────────────────────── */
.docs-cats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.docs-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all var(--transition);
}
.docs-cat-tab i { font-size: 12px; }
.docs-cat-tab:hover { border-color: var(--steel); color: var(--navy-deep); }
.docs-cat-tab.active {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--white);
}

/* ─── Paywall Doc Cards ──────────────────── */
.docs-paywall-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dpw-card {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition: all var(--transition);
  position: relative;
}
.dpw-card:hover { box-shadow: var(--shadow-sm); border-color: var(--steel); }
.dpw-card.paid   { border-left: 3px solid #d4a017; }
.dpw-card.member { border-left: 3px solid var(--steel); }
.dpw-card.public { border-left: 3px solid #22c55e; }

/* Type icon */
.dpw-type-icon {
  width: 52px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 20px;
}
.dpw-type-icon.pdf   { background: #fee2e2; color: #991b1b; }
.dpw-type-icon.word  { background: #dbeafe; color: #1e40af; }
.dpw-type-icon.excel { background: #dcfce7; color: #166534; }
.dpw-type-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Info block */
.dpw-info { flex: 1; min-width: 0; }
.dpw-info-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.dpw-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.3;
  flex: 1;
}
.dpw-badges { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.dpw-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.access-public { background: #dcfce7; color: #166534; }
.access-member { background: #dbeafe; color: #1e40af; }
.access-paid   { background: #fef9c3; color: #854d0e; }
.dpw-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--ice);
  border: 1px solid var(--steel-pale);
  border-radius: 8px;
  color: var(--steel);
  white-space: nowrap;
}
.dpw-desc { font-size: 12px; color: var(--gray); line-height: 1.5; margin-bottom: 6px; }
.dpw-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--gray);
}
.dpw-meta i { margin-right: 4px; color: var(--steel); }

/* Action panel */
.dpw-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 130px;
}
.dpw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  width: 100%;
  text-align: center;
}
.dpw-btn-preview {
  background: var(--ice);
  color: var(--navy-mid);
  border: 1px solid var(--steel-pale);
}
.dpw-btn-preview:hover { background: var(--steel-pale); color: var(--navy-deep); }
.dpw-btn-preview.dpw-btn-free { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

.dpw-btn-download {
  background: var(--navy-deep);
  color: var(--white);
}
.dpw-btn-download:hover { background: var(--navy-mid); }
.dpw-btn-download.dpw-btn-member { background: var(--steel); }
.dpw-btn-download.dpw-btn-member:hover { background: var(--navy-mid); }
.dpw-btn-download.dpw-btn-locked {
  background: linear-gradient(135deg, #d4a017, #f0c040);
  color: #5a3800;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
}
.dpw-btn-download.dpw-btn-locked:hover { filter: brightness(1.05); }
.dpw-price {
  font-size: 14px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
}
.dpw-unlock-label { font-size: 10px; font-weight: 600; opacity: 0.8; }

/* ─── Modal ─────────────────────────────── */
.dpw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dpw-modal-overlay.open { display: flex; }
.dpw-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 36px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  animation: modalSlideIn 0.25s ease;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dpw-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ice);
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.dpw-modal-close:hover { background: var(--steel-pale); color: var(--navy-deep); }

/* Modal content variants */
.modal-access-denied { text-align: center; }
.modal-access-icon { font-size: 48px; margin-bottom: 16px; }
.modal-access-icon.denied { color: #ef4444; }
.modal-access-icon.purchase { color: #d4a017; }
.modal-title { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy-deep); margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 20px; }
.modal-price-display {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 16px 0;
}
.modal-sub { font-size: 12px; color: var(--gray); margin-top: -10px; margin-bottom: 20px; }
.modal-payment-btns { display: flex; gap: 10px; }
.modal-btn-kaspi {
  flex: 1; padding: 12px; border: 2px solid #FF2D2D; background: #fff5f5;
  border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; color: #FF2D2D; font-size: 15px;
  transition: all var(--transition);
}
.modal-btn-kaspi:hover { background: #FF2D2D; color: var(--white); }
.modal-btn-halyk {
  flex: 1; padding: 12px; border: 2px solid #00C46A; background: #f0fdf4;
  border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; color: #00C46A; font-size: 15px;
  transition: all var(--transition);
}
.modal-btn-halyk:hover { background: #00C46A; color: var(--white); }
.modal-operator-note {
  font-size: 11px; color: var(--gray); margin-top: 14px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.modal-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal-btn-primary {
  padding: 12px 24px; background: var(--navy-deep); color: var(--white);
  border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background var(--transition);
}
.modal-btn-primary:hover { background: var(--navy-mid); }
.modal-btn-outline {
  padding: 12px 24px; background: transparent; color: var(--navy-deep);
  border: 2px solid var(--steel-pale); border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: all var(--transition);
}
.modal-btn-outline:hover { border-color: var(--navy-deep); }

/* ─── Protection Features ────────────────── */
.docs-protection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dp-item {
  text-align: center;
  padding: 24px 16px;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.dp-item:hover { box-shadow: var(--shadow-sm); }
.dp-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--white);
  font-size: 18px;
}
.dp-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}
.dp-desc { font-size: 12px; color: var(--gray); line-height: 1.5; }

/* ─── Rules & CTA section ────────────────── */
.docs-rules-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}
.docs-rules-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.docs-rule-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.docs-rule-item i { flex-shrink: 0; margin-top: 2px; }
.docs-rule-item i.fa-check-circle { color: #4ade80; }
.docs-rule-item i.fa-times-circle { color: #f87171; }
.docs-rule-item i.fa-info-circle { color: #60a5fa; }
.docs-rule-deny { color: rgba(255,255,255,0.6); }
.docs-cta-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 28px;
}
.docs-cta-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.docs-cta-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: 20px; }
.docs-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.docs-cta-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  line-height: 1.4;
}

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .docs-protection-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-rules-grid { grid-template-columns: 1fr; gap: 32px; }
  .access-banner-grid { flex-direction: column; align-items: stretch; }
  .access-tier-arrow { transform: rotate(90deg); align-self: center; }
}
@media (max-width: 768px) {
  .dpw-card { flex-wrap: wrap; }
  .dpw-actions { flex-direction: row; min-width: unset; width: 100%; }
  .dpw-btn { flex: 1; }
  .docs-protection-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .dpw-actions { flex-direction: column; }
  .docs-protection-grid { grid-template-columns: 1fr; }
  .modal-payment-btns { flex-direction: column; }
}

/* ---------- TIMELINE / HISTORY SECTION ---------- */
.timeline {
  position: relative;
  padding: 20px 0;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--steel), var(--navy-mid), transparent);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 40px;
  position: relative;
}
.timeline-item:last-child { margin-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 14px;
  height: 14px;
  background: var(--steel);
  border-radius: 50%;
  border: 3px solid var(--off-white);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(114,156,189,0.25);
  z-index: 2;
}

/* LEFT item: year left, card right */
.timeline-left { flex-direction: row; }
.timeline-left .timeline-year {
  text-align: right;
  width: calc(50% - 28px);
  padding-right: 20px;
  padding-top: 8px;
  flex-shrink: 0;
}
.timeline-left .timeline-card {
  margin-left: calc(50% + 28px);
  width: calc(50% - 28px);
  flex-shrink: 0;
}

/* RIGHT item: card left, year right */
.timeline-right { flex-direction: row; }
.timeline-right .timeline-year {
  order: 2;
  text-align: left;
  width: calc(50% - 28px);
  padding-left: 20px;
  padding-top: 8px;
  flex-shrink: 0;
}
.timeline-right .timeline-card {
  order: 1;
  width: calc(50% - 28px);
  flex-shrink: 0;
  text-align: right;
  margin-right: calc(50% + 28px - (50% - 28px));
}

/* Fix: proper placement using absolute/relative */
.timeline-item { position: relative; min-height: 60px; }
.timeline-year {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--navy-mid);
  line-height: 1;
}
.timeline-left .timeline-year { right: 50%; padding-right: 28px; top: 6px; text-align: right; }
.timeline-right .timeline-year { left: 50%; padding-left: 28px; top: 6px; }

.timeline-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  width: calc(50% - 48px);
}
.timeline-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.timeline-left .timeline-card { left: calc(50% + 28px); }
.timeline-right .timeline-card { right: calc(50% + 28px); }

.timeline-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 6px;
}
.timeline-desc { font-size: 13px; color: var(--gray); line-height: 1.55; }

/* Each item needs height based on card */
.timeline-item { padding-bottom: 0; margin-bottom: 48px; }

@media (max-width: 768px) {
  .timeline::before { left: 20px; }
  .timeline-dot { left: 20px; }
  .timeline-year,
  .timeline-left .timeline-year,
  .timeline-right .timeline-year {
    position: static;
    text-align: left;
    padding: 0;
    font-size: 18px;
    min-width: 52px;
    flex-shrink: 0;
  }
  .timeline-card,
  .timeline-left .timeline-card,
  .timeline-right .timeline-card {
    position: static;
    width: auto;
    flex: 1;
    text-align: left;
    margin: 0;
  }
  .timeline-item {
    flex-direction: row;
    padding-left: 48px;
    gap: 12px;
  }
  .timeline-right .timeline-year { order: unset; }
  .timeline-right .timeline-card { order: unset; }
}


.legal-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.legal-operator-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.legal-operator-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.40);
  font-weight: 600;
}
.legal-mig-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  opacity: 0.90;
  transition: opacity var(--transition);
}
.legal-mig-logo:hover { opacity: 1; }
.legal-operator-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
}

/* card-dark labels / values — proper contrast */
.card-dark .li-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.40);
  margin-bottom: 3px;
  font-weight: 600;
}
.card-dark .li-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

/* ---------- SCROLL-IN ANIMATIONS ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up-delay-1 { transition-delay: 0.10s; }
.fade-up-delay-2 { transition-delay: 0.20s; }
.fade-up-delay-3 { transition-delay: 0.30s; }
.fade-up-delay-4 { transition-delay: 0.40s; }

/* ---------- STAT COUNTER ANIMATION ---------- */
.stat-value.counting {
  color: var(--steel-pale);
  transition: color 0.3s;
}

/* ---------- NEWS FEATURED ROW FIX ---------- */
.news-featured-row a { display: block; }

/* ---------- HERO EMBLEM — enhanced glow ring ---------- */
.hero-emblem-ring-outer {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(114,156,189,0.12);
  animation: spin-ring 30s linear infinite reverse;
}

/* ---------- PARTNERS PAGE — media section grid ---------- */
@media (max-width: 900px) {
  .quick-grid-benefits { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .legal-top-row { flex-direction: column; }
  .legal-operator-block { align-items: flex-start; }
}

/* ---------- TOAST NOTIFICATION ---------- */
.ahf-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy-deep);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
  border-left: 4px solid var(--steel);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

/* ---------- SCROLL TO TOP BUTTON ---------- */
.scroll-top-btn {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--navy-mid);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  transform: translateY(16px);
  transition: all var(--transition);
  border: none;
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--steel); transform: translateY(-2px); }

/* ---------- REGISTRATION LOGO ---------- */
.register-logo-wrap {
  text-align: center;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.register-logo-wrap img {
  height: 52px;
  width: auto;
  object-fit: contain;
  /* тёмно-синий лого на светлом фоне — сохраняем оригинальные цвета */
}

/* ---------- PRINT ---------- */
@media print {
  .navbar, .footer, .hero-scroll-hint { display: none; }
  main { padding-top: 0; }
}

/* =========================================
   PROGRAM PAGE — Handball 2026–2035
   ========================================= */

/* ─── Hero ─────────────────────────────── */
.prog-hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(160deg, #081d2f 0%, #0d2843 40%, #163d5e 70%, #1a5276 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
}
.prog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(114,156,189,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(196,227,245,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.prog-hero::after {
  content: '2026';
  position: absolute;
  right: -40px; bottom: -60px;
  font-family: 'Montserrat', sans-serif;
  font-size: 300px;
  font-weight: 900;
  color: rgba(255,255,255,0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.prog-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(8,29,47,0.6) 100%);
  pointer-events: none;
}
.prog-hero-inner {
  position: relative;
  z-index: 2;
  color: var(--white);
  max-width: 720px;
}
.prog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(114,156,189,0.2);
  border: 1px solid rgba(114,156,189,0.35);
  color: var(--steel-pale);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.prog-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(52px, 8vw, 100px);
  font-weight: 900;
  line-height: 0.9;
  margin-bottom: 24px;
  color: var(--white);
}
.prog-hero-accent {
  color: var(--steel-pale);
  display: block;
}
.prog-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 28px;
}
.prog-hero-motto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.motto-ru {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
}
.motto-en {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}
.motto-divider { color: rgba(255,255,255,0.3); }
.prog-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── About section ─────────────────────── */
.prog-about-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: center;
}
.prog-about-text .text-body { color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.prog-about-text .text-body strong { color: var(--navy-deep); }
.prog-key-goal {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--ice);
  border: 1px solid var(--steel-pale);
  border-left: 4px solid var(--navy-deep);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 20px;
}
.pkg-icon {
  width: 40px; height: 40px;
  background: var(--navy-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 15px;
  flex-shrink: 0;
}
.pkg-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--steel);
  margin-bottom: 5px;
}
.pkg-text { font-size: 14px; color: var(--navy-deep); line-height: 1.5; }

.prog-about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.prog-stat {
  background: var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  color: var(--white);
}
.prog-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--steel-pale);
  line-height: 1;
  margin-bottom: 6px;
}
.prog-stat-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.4px; }

/* ─── Philosophy ─────────────────────────── */
.prog-philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 48px;
}
.text-body.light { color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 14px; }
.prog-philo-quote {
  border-left: 3px solid var(--steel);
  padding: 12px 20px;
  margin: 20px 0 0;
  font-size: 15px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}
.prog-philo-pillars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.philo-pillar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: all var(--transition);
}
.philo-pillar:hover { background: rgba(255,255,255,0.09); }
.philo-pillar-icon {
  width: 44px; height: 44px;
  background: rgba(114,156,189,0.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--steel-pale);
  font-size: 18px;
  flex-shrink: 0;
}
.philo-pillar-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.philo-pillar-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; }

.prog-motto-banner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.motto-banner-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
}
.motto-banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.motto-banner-ru {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.motto-banner-en {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── Phases ─────────────────────────────── */
.prog-phases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.prog-phase-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition);
}
.prog-phase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.phase-header {
  padding: 28px 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.phase-one .phase-header   { background: var(--navy-deep); }
.phase-two .phase-header   { background: var(--navy-mid); }
.phase-three .phase-header { background: linear-gradient(135deg, #1a5276, #2471a3); }
.phase-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
}
.phase-years {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--steel-pale);
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 10px;
}
.phase-title {
  padding: 0 24px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  background: inherit;
}
.phase-one .phase-title   { background: var(--navy-deep); }
.phase-two .phase-title   { background: var(--navy-mid); }
.phase-three .phase-title { background: linear-gradient(135deg, #1a5276, #2471a3); }
.phase-items {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-top: none;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--navy-deep);
  line-height: 1.4;
}
.phase-item i { color: var(--steel); font-size: 12px; flex-shrink: 0; margin-top: 3px; }

/* ─── Projects grid ──────────────────────── */
.prog-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prog-project-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}
.prog-project-card:last-child { grid-column: span 1; }
.prog-project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.proj-icon-wrap {
  padding: 24px 24px 16px;
  font-size: 28px;
  border-bottom: 3px solid transparent;
}
.proj-gold .proj-icon-wrap   { background: linear-gradient(135deg, #d4a017, #f0c040); color: #5a3800; border-color: #b8860b; }
.proj-steel .proj-icon-wrap  { background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid)); color: var(--steel-pale); }
.proj-navy .proj-icon-wrap   { background: linear-gradient(135deg, #1a3a5c, var(--navy-mid)); color: var(--white); }
.proj-green .proj-icon-wrap  { background: linear-gradient(135deg, #166534, #16a34a); color: #dcfce7; }
.proj-body { padding: 16px 24px 24px; flex: 1; }
.proj-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--steel);
  margin-bottom: 6px;
}
.proj-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
  line-height: 1.3;
}
.proj-desc { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* ─── International ──────────────────────── */
.prog-intl-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}
.prog-intl-partners {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prog-intl-item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--ice);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  transition: all var(--transition);
}
.prog-intl-item:hover { border-color: var(--steel); background: var(--white); }
.prog-intl-icon {
  width: 40px; height: 40px;
  background: var(--navy-deep);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 15px;
  flex-shrink: 0;
}
.prog-intl-abbr {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 2px;
}
.prog-intl-label { font-size: 12px; color: var(--gray); line-height: 1.3; }

/* ─── Values ─────────────────────────────── */
.prog-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.prog-value-card {
  background: var(--white);
  border: 1px solid var(--steel-pale);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  transition: all var(--transition);
}
.prog-value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pv-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: var(--white);
  font-size: 20px;
}
.pv-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 8px;
}
.pv-desc { font-size: 12px; color: var(--gray); line-height: 1.5; }
.prog-legacy-banner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--navy-deep);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  color: var(--white);
}
.prog-legacy-banner i { font-size: 24px; color: var(--steel-pale); flex-shrink: 0; margin-top: 2px; }
.prog-legacy-banner p { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0; }
.prog-legacy-banner strong { color: var(--steel-pale); }

/* ─── Partnership ────────────────────────── */
.prog-partner-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}
.prog-partner-logos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prog-partner-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.prog-partner-logo { height: 40px; width: auto; object-fit: contain; }
.prog-partner-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.prog-partner-placeholder i { color: var(--steel); }
.prog-partner-role {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
}
.prog-partner-open {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.prog-partner-open i { color: var(--steel); font-size: 18px; }
.prog-partner-open a { color: var(--steel-pale); margin-left: auto; font-size: 12px; }

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .prog-about-grid { grid-template-columns: 1fr; gap: 36px; }
  .prog-about-stats { grid-template-columns: repeat(4, 1fr); }
  .prog-philosophy { grid-template-columns: 1fr; gap: 32px; }
  .prog-phases-grid { grid-template-columns: 1fr; }
  .prog-projects-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-intl-grid { grid-template-columns: 1fr; gap: 32px; }
  .prog-values-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-partner-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .prog-hero { min-height: auto; padding: 100px 0 60px; }
  .prog-hero-title { font-size: clamp(40px, 12vw, 72px); }
  .prog-about-stats { grid-template-columns: repeat(2, 1fr); }
  .prog-projects-grid { grid-template-columns: 1fr; }
  .prog-values-grid { grid-template-columns: 1fr 1fr; }
  .prog-hero-cta { flex-direction: column; }
  .prog-motto-banner { flex-direction: column; gap: 10px; }
  .prog-motto-banner .motto-banner-line { width: 100%; height: 1px; }
}
@media (max-width: 480px) {
  .prog-about-stats { grid-template-columns: 1fr 1fr; }
  .prog-values-grid { grid-template-columns: 1fr; }
  .prog-phases-grid { gap: 16px; }
}


/* ─── Program page: missing helpers ─────── */
.prog-philo-text .section-label.light,
.prog-philo-text .section-title.light { color: var(--white); }
.prog-philo-text .text-body.light { color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 16px; }
.prog-partner-text .section-label.light,
.prog-partner-text .section-title.light { color: var(--white); }
.prog-partner-text .text-body.light { color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 14px; }
@media (max-width: 768px) {
  .prog-partner-logos { flex-direction: row; flex-wrap: wrap; }
}

/* =========================================
   COOPERATION PAGE — Международное сотрудничество
   ========================================= */

/* ─── Hero ─────────────────────────────── */
.coop-hero {
  position: relative;
  min-height: 80vh;
  background: linear-gradient(155deg, #06111c 0%, #0a1f33 35%, #122d47 65%, #1a4060 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
}
.coop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 25%, rgba(100,160,210,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 35% 55% at 5% 85%, rgba(180,220,250,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.coop-hero::after {
  content: 'MOU';
  position: absolute;
  right: -20px; bottom: -80px;
  font-family: 'Montserrat', sans-serif;
  font-size: 260px;
  font-weight: 900;
  color: rgba(255,255,255,0.022);
  pointer-events: none;
  line-height: 1;
}
.coop-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(6,17,28,0.6) 0%, transparent 70%);
  pointer-events: none;
}
.coop-hero-inner {
  position: relative; z-index: 2;
  max-width: 780px;
}
.coop-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--steel-pale);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.coop-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -2px;
}
.coop-hero-accent { color: var(--glow); display: block; }
.coop-hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 620px;
}
.coop-hero-sub strong { color: var(--steel-pale); }
.coop-hero-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.coop-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 0.3px;
}
.coop-tag i { color: var(--steel); font-size: 11px; }

/* ─── Memo intro ─────────────────────────── */
.coop-memo-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}
.coop-memo-text .text-body { color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.coop-memo-text .text-body strong { color: var(--navy-deep); font-weight: 700; }
.coop-validity {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--ice);
  border: 1px solid var(--border);
  border-left: 4px solid var(--steel);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 24px;
}
.coop-validity i { color: var(--steel); font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.coop-validity-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray); margin-bottom: 4px; }
.coop-validity-date { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 800; color: var(--navy-deep); }
.coop-validity-note { font-size: 12px; color: var(--gray); margin-top: 2px; }

/* Memo card */
.coop-memo-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.coop-mc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy-deep);
  color: var(--white);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.coop-mc-header i { font-size: 16px; color: var(--steel-pale); }
.coop-mc-body { padding: 20px; }
.coop-mc-project { margin-bottom: 16px; }
.coop-mc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray); margin-bottom: 4px; }
.coop-mc-value { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy-deep); line-height: 1.35; }
.coop-mc-divider { height: 1px; background: var(--border); margin: 14px 0; }
.coop-mc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.coop-mc-row:last-child { border-bottom: none; }
.coop-mc-row .coop-mc-label { margin: 0; font-size: 11px; }
.coop-mc-row .coop-mc-value { font-size: 12px; font-weight: 600; color: var(--navy-deep); }
.coop-mc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
}
.coop-mc-status i { font-size: 7px; }

/* ─── Parties ──────────────────────────── */
.coop-parties-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.coop-party-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px 22px;
  text-align: center;
  transition: var(--transition);
  overflow: hidden;
}
.coop-party-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.coop-party-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.party-gov::before  { background: linear-gradient(90deg, #1e3a5f, #2e6da4); }
.party-mig::before  { background: linear-gradient(90deg, #b8860b, #d4a017); }
.party-ahf::before  { background: linear-gradient(90deg, #1a4a7a, #2471a3); }
.party-ajf::before  { background: linear-gradient(90deg, #dc2626, #ef4444); }
.coop-party-num {
  position: absolute;
  top: 12px; right: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--border);
  line-height: 1;
}
.coop-party-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
}
.party-gov .coop-party-icon  { background: linear-gradient(135deg, #1e3a5f, #2e6da4); color: var(--white); }
.party-mig .coop-party-icon  { background: linear-gradient(135deg, #92710d, #c4990a); color: var(--white); }
.party-ahf .coop-party-icon  { background: linear-gradient(135deg, #1a4a7a, #2471a3); color: var(--white); }
.party-ajf .coop-party-icon  { background: linear-gradient(135deg, #991b1b, #dc2626); color: var(--white); }
.coop-party-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.4;
  margin-bottom: 8px;
}
.coop-party-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
}

/* ─── Goal / Ecosystem ─────────────────── */
.coop-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.coop-goal-text .section-label.light,
.coop-goal-text .section-title.light { color: var(--white); }
.coop-goal-text .text-body.light { color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 16px; }
.coop-goal-quote {
  border-left: 3px solid var(--steel);
  padding: 14px 20px;
  margin: 24px 0 0;
  background: rgba(255,255,255,0.06);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  font-style: italic;
  line-height: 1.6;
}
.coop-ecosystem-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.coop-eco-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 16px 18px;
  transition: var(--transition);
}
.coop-eco-item:hover { background: rgba(255,255,255,0.11); border-color: var(--steel); }
.coop-eco-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--navy-mid), var(--steel));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--white);
  flex-shrink: 0;
}
.coop-eco-text { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; padding-top: 9px; }

/* ─── Subject ───────────────────────────── */
.coop-subject-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.coop-subject-grid .text-body { color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.coop-subject-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coop-subject-item {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  transition: var(--transition);
}
.coop-subject-item:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.coop-subject-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--steel);
  flex-shrink: 0;
  line-height: 1;
  min-width: 36px;
}
.coop-subject-text { font-size: 14px; color: var(--navy-deep); font-weight: 500; line-height: 1.4; }

/* ─── AHF Role ──────────────────────────── */
.coop-role-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 48px;
  box-shadow: var(--shadow-sm);
}
.coop-role-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ice);
}
.coop-role-logo { height: 52px; width: auto; object-fit: contain; }
.coop-role-header .section-label { margin-bottom: 4px; display: block; }
.coop-role-header .section-title { margin: 0; }
.coop-role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.coop-role-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--ice);
  border-radius: 10px;
  padding: 14px 16px;
}
.coop-role-icon {
  width: 28px; height: 28px;
  background: var(--navy-deep);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}
.coop-role-text { font-size: 13px; color: var(--navy-deep); line-height: 1.45; font-weight: 500; }

/* ─── Obligations ───────────────────────── */
.coop-obl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.coop-obl-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.coop-obl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.coop-obl-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
}
.obl-gov::after { background: linear-gradient(90deg, #1e3a5f, #2e6da4); }
.obl-mig::after { background: linear-gradient(90deg, #b8860b, #d4a017); }
.obl-fed::after { background: linear-gradient(90deg, #1a4a7a, #dc2626); }
.coop-obl-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.obl-gov .coop-obl-icon { background: linear-gradient(135deg, #1e3a5f, #2e6da4); color: var(--white); }
.obl-mig .coop-obl-icon { background: linear-gradient(135deg, #92710d, #c4990a); color: var(--white); }
.obl-fed .coop-obl-icon { background: linear-gradient(135deg, #1a4a7a, #b91c1c); color: var(--white); }
.coop-obl-party {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 16px;
  line-height: 1.3;
}
.coop-obl-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coop-obl-list li {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.coop-obl-list li i { color: var(--steel); font-size: 12px; margin-top: 3px; flex-shrink: 0; }

/* ─── Infrastructure ────────────────────── */
.coop-infra-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.coop-infra-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 24px 16px 20px;
  text-align: center;
  transition: var(--transition);
}
.coop-infra-card:hover { background: rgba(255,255,255,0.12); border-color: var(--steel); transform: translateY(-3px); }
.coop-infra-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.coop-infra-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(100,160,210,0.3), rgba(60,110,160,0.2));
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--steel-pale);
  margin: 0 auto 12px;
}
.coop-infra-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.3;
}
.coop-infra-desc { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.4; }

/* Standards row */
.coop-standards-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.coop-std-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-right: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.coop-std-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 6px 12px;
}
.coop-std-abbr { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: var(--steel-pale); }
.coop-std-name { font-size: 10px; color: rgba(255,255,255,0.45); }

/* ─── International status ──────────────── */
.coop-intl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.coop-intl-grid .text-body { color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.coop-intl-activities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.coop-intl-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 16px;
  gap: 12px;
  transition: var(--transition);
}
.coop-intl-act:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.coop-intl-act-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--steel-pale);
}
.coop-intl-act-text { font-size: 13px; color: var(--navy-deep); font-weight: 600; line-height: 1.4; }

/* ─── Significance ──────────────────────── */
.coop-sig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.coop-sig-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  transition: var(--transition);
}
.coop-sig-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--steel); }
.coop-sig-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--steel-pale);
  margin: 0 auto 16px;
}
.coop-sig-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 10px;
}
.coop-sig-desc { font-size: 13px; color: var(--gray); line-height: 1.6; }

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1200px) {
  .coop-infra-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .coop-memo-grid    { grid-template-columns: 1fr; gap: 32px; }
  .coop-parties-grid { grid-template-columns: repeat(2, 1fr); }
  .coop-goal-grid    { grid-template-columns: 1fr; gap: 36px; }
  .coop-subject-grid { grid-template-columns: 1fr; gap: 36px; }
  .coop-role-grid    { grid-template-columns: repeat(2, 1fr); }
  .coop-obl-grid     { grid-template-columns: 1fr; }
  .coop-intl-grid    { grid-template-columns: 1fr; gap: 36px; }
  .coop-sig-grid     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .coop-hero { padding: 100px 0 60px; min-height: auto; }
  .coop-hero-title { letter-spacing: -1px; }
  .coop-hero-tags { gap: 8px; }
  .coop-parties-grid { grid-template-columns: repeat(2, 1fr); }
  .coop-role-wrap { padding: 28px 20px; }
  .coop-role-grid { grid-template-columns: 1fr; }
  .coop-infra-grid { grid-template-columns: repeat(2, 1fr); }
  .coop-intl-activities { grid-template-columns: 1fr; }
  .coop-sig-grid { grid-template-columns: 1fr; }
  .coop-standards-row { gap: 8px; }
}
@media (max-width: 480px) {
  .coop-parties-grid { grid-template-columns: 1fr; }
  .coop-infra-grid   { grid-template-columns: 1fr 1fr; }
  .coop-hero-badge   { font-size: 10px; }
}

/* =========================================
   TOURNAMENTS PAGE — Соревнования и календарь
   ========================================= */

/* ─── Hero ─────────────────────────────── */
.tour-hero {
  position: relative;
  min-height: 78vh;
  background: linear-gradient(150deg, #050e18 0%, #0c1f32 35%, #14314f 65%, #1c446b 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0 80px;
}
.tour-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(120,170,220,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 30% 60% at 5% 80%,  rgba(180,220,250,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.tour-hero::after {
  content: 'AHF';
  position: absolute; right: -30px; bottom: -60px;
  font-family: 'Montserrat', sans-serif;
  font-size: 280px; font-weight: 900;
  color: rgba(255,255,255,0.022);
  pointer-events: none; line-height: 1;
}
.tour-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(5,14,24,0.65) 0%, transparent 70%);
  pointer-events: none;
}
.tour-hero-inner { position: relative; z-index: 2; max-width: 820px; }
.tour-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: var(--steel-pale); font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 7px 16px; border-radius: 50px; margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.tour-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 7.5vw, 82px); font-weight: 900;
  color: var(--white); line-height: 1.05; margin-bottom: 20px; letter-spacing: -2px;
}
.tour-hero-accent { color: var(--glow); display: block; }
.tour-hero-sub {
  font-size: 16px; color: rgba(255,255,255,0.72);
  line-height: 1.7; margin-bottom: 28px; max-width: 600px;
}
.tour-hero-stats {
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.tour-hs-div { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }
.tour-hs-num {
  font-family: 'Montserrat', sans-serif; font-size: 26px;
  font-weight: 900; color: var(--white); line-height: 1;
}
.tour-hs-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }
.tour-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── About section ─────────────────────── */
.tour-about-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start;
}
.tour-about-grid .text-body { color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.tour-about-grid .text-body strong { color: var(--navy-deep); font-weight: 700; }
.tour-cal-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gray); margin-bottom: 12px; font-weight: 600;
}
.tour-cat-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 8px;
  transition: var(--transition);
}
.tour-cat-item:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.tour-cat-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.cal-regional .tour-cat-icon { background: linear-gradient(135deg,#1a4a7a,#2471a3); color:#fff; }
.cal-national .tour-cat-icon { background: linear-gradient(135deg,#0d4726,#15803d); color:#fff; }
.cal-intl     .tour-cat-icon { background: linear-gradient(135deg,#312e81,#4338ca); color:#fff; }
.cal-youth    .tour-cat-icon { background: linear-gradient(135deg,#b45309,#d97706); color:#fff; }
.cal-social   .tour-cat-icon { background: linear-gradient(135deg,#0e7490,#0891b2); color:#fff; }
.tour-cat-label { font-size: 13px; font-weight: 600; color: var(--navy-deep); }

/* ─── Tournaments grid ──────────────────── */
.tour-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tour-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: var(--transition); position: relative; overflow: hidden;
}
.tour-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--navy-deep), var(--steel));
}
.tour-card-featured { border-color: var(--steel); }
.tour-card-featured::before { background: linear-gradient(90deg, #b8860b, #d4a017); height: 4px; }
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tour-card-top {
  display: flex; align-items: center; justify-content: space-between;
}
.tour-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--steel-pale);
}
.tour-card-featured .tour-card-icon { background: linear-gradient(135deg, #92710d, #c4990a); }
.tour-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 50px;
}
.tag-gold  { background: #fef3c7; color: #92400e; }
.tag-navy  { background: #dbeafe; color: #1e40af; }
.tag-rose  { background: #fce7f3; color: #9d174d; }
.tag-green { background: #dcfce7; color: #14532d; }
.tag-teal  { background: #cffafe; color: #164e63; }
.tag-steel { background: #e0f2fe; color: #075985; }
.tour-card-title {
  font-family: 'Montserrat', sans-serif; font-size: 15px;
  font-weight: 700; color: var(--navy-deep); line-height: 1.3;
}
.tour-card-desc { font-size: 13px; color: var(--gray); line-height: 1.5; flex: 1; }
.tour-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tour-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--gray);
}
.tour-meta-item i { color: var(--steel); font-size: 10px; }
.tour-card-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 5px 12px; border-radius: 50px; width: fit-content;
}
.status-active   { background: #dcfce7; color: #14532d; }
.status-upcoming { background: #dbeafe; color: #1e40af; }
.status-done     { background: #f1f5f9; color: var(--gray); }

/* ─── Schedule table extras ─────────────── */
.tour-schedule-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.match-date  { color: var(--navy-deep); font-weight: 700; }
.match-time  { color: var(--steel); font-weight: 700; }
.match-team  { font-weight: 600; color: var(--navy-deep); }
.match-vs    { text-align: center; font-weight: 900; font-size: 12px; color: var(--gray); }
.match-venue { color: var(--gray); font-size: 12px; }
.match-venue i { color: var(--steel); font-size: 10px; margin-right: 3px; }

/* ─── Participation ─────────────────────── */
.tour-part-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.tour-part-text .section-label.light,
.tour-part-text .section-title.light { color: var(--white); }
.tour-part-text .text-body.light { color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 20px; }
.tour-req-list { display: flex; flex-direction: column; gap: 12px; }
.tour-req-item {
  display: flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 14px 18px;
  transition: var(--transition);
}
.tour-req-item:hover { background: rgba(255,255,255,0.13); border-color: var(--steel); }
.tour-req-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-mid), var(--steel));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--white);
}
.tour-req-text { font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 500; }
.tour-reg-steps {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 28px 24px;
}
.tour-steps-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45); margin-bottom: 20px; font-weight: 600;
}
.tour-step { margin-bottom: 20px; }
.tour-step:last-child { margin-bottom: 0; }
.tour-step-num {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 900;
  color: var(--steel); letter-spacing: 1px; margin-bottom: 6px;
}
.tour-step-body { display: flex; gap: 12px; align-items: flex-start; }
.tour-step-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--steel-pale);
}
.tour-step-title { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.tour-step-desc  { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* ─── Results & Media ───────────────────── */
.tour-rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.tour-rm-grid .text-body { color: var(--gray); line-height: 1.7; }
.tour-result-cards, .tour-media-cards { display: flex; flex-direction: column; gap: 12px; }
.tour-result-card, .tour-media-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; transition: var(--transition);
}
.tour-result-card:hover, .tour-media-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.tour-result-icon, .tour-media-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--steel-pale);
}
.tour-result-label, .tour-media-label { font-size: 13px; font-weight: 700; color: var(--navy-deep); margin-bottom: 2px; }
.tour-result-desc,  .tour-media-desc  { font-size: 12px; color: var(--gray); line-height: 1.4; }

/* ─── CTA Block ─────────────────────────── */
.tour-cta-block {
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap;
}
.tour-cta-text .section-label.light,
.tour-cta-text .section-title.light { color: var(--white); }
.tour-cta-text .text-body.light { color: rgba(255,255,255,0.72); line-height: 1.7; max-width: 520px; }
.tour-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .tour-about-grid { grid-template-columns: 1fr; gap: 36px; }
  .tour-grid        { grid-template-columns: repeat(2, 1fr); }
  .tour-part-grid   { grid-template-columns: 1fr; gap: 36px; }
  .tour-rm-grid     { grid-template-columns: 1fr; gap: 40px; }
  .tour-cta-block   { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .tour-hero { padding: 100px 0 60px; min-height: auto; }
  .tour-hero-title { letter-spacing: -1px; }
  .tour-hero-stats { gap: 16px; }
  .tour-grid { grid-template-columns: 1fr; }
  .tour-hero-cta { flex-direction: column; }
}
@media (max-width: 480px) {
  .tour-about-grid  { grid-template-columns: 1fr; }
  .tour-cta-actions { width: 100%; }
  .tour-cta-actions .btn-steel,
  .tour-cta-actions .btn-outline-light { width: 100%; justify-content: center; }
}

/* =========================================
   DASHBOARD — Личный кабинет AHF
   ========================================= */

/* ─── Lock screen ───────────────────────── */
.db-lock-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #06111c 0%, #0d2843 100%);
  padding: 40px 20px;
}
.db-lock-inner { text-align: center; max-width: 440px; }
.db-lock-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--steel-pale); margin: 0 auto 24px;
}
.db-lock-inner h2 { color: var(--white); font-family: 'Montserrat',sans-serif; font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.db-lock-inner p  { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; margin-bottom: 28px; }
.db-lock-actions  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ─── Wrap layout ───────────────────────── */
.db-wrap {
  display: flex; min-height: 100vh;
  padding-top: 64px; /* navbar height */
  background: #f0f4f8;
}

/* ─── Sidebar ───────────────────────────── */
.db-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--navy-deep);
  display: flex; flex-direction: column;
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  transition: transform 0.3s ease;
  z-index: 100;
}
.db-sidebar-header {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.db-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--steel), var(--navy-mid));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat',sans-serif; font-size: 16px;
  font-weight: 800; color: var(--white); flex-shrink: 0;
}
.db-sidebar-name {
  font-family: 'Montserrat',sans-serif; font-size: 13px;
  font-weight: 700; color: var(--white); line-height: 1.3;
}
.db-sidebar-mid {
  font-size: 11px; color: rgba(255,255,255,0.45);
  margin-top: 2px;
}
.db-sidebar-mid i { margin-right: 4px; }

.db-status-badge {
  margin: 10px 20px 4px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 50px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  width: fit-content;
}
.db-status-badge.status-active  { background: rgba(22,163,74,0.2);  color: #4ade80; }
.db-status-badge.status-pending { background: rgba(234,179,8,0.2);   color: #fbbf24; }
.db-status-badge.status-expired { background: rgba(239,68,68,0.15);  color: #f87171; }
.db-status-badge i { font-size: 7px; }

.db-nav { padding: 8px 12px; flex: 1; }
.db-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 2px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6);
  text-decoration: none; cursor: pointer;
  transition: all 0.2s; border: none; background: transparent; width: 100%;
  text-align: left;
}
.db-nav-link i { font-size: 14px; width: 16px; flex-shrink: 0; }
.db-nav-link:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.db-nav-link.active { background: rgba(255,255,255,0.12); color: var(--white); font-weight: 600; }
.db-nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 100px;
}
.active-badge { background: #16a34a; color: #fff; }
.notif-badge  { background: var(--steel); color: #fff; }

.db-logout-btn {
  margin: 12px 16px 20px; padding: 10px 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: transparent;
  color: rgba(255,255,255,0.45); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.2s; width: calc(100% - 32px);
}
.db-logout-btn:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #f87171; }

/* ─── Main content ──────────────────────── */
.db-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.db-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 64px; z-index: 50;
}
.db-menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--navy-deep); padding: 4px 8px;
}
.db-topbar-title {
  font-family: 'Montserrat',sans-serif; font-size: 16px;
  font-weight: 700; color: var(--navy-deep); flex: 1;
}
.db-topbar-right { display: flex; align-items: center; gap: 10px; }
.db-role-chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.role-athlete { background: #dbeafe; color: #1e40af; }
.role-coach   { background: #dcfce7; color: #14532d; }
.role-referee { background: #fce7f3; color: #9d174d; }
.role-user    { background: #f1f5f9; color: var(--gray); }

/* ─── Sections ──────────────────────────── */
.db-section { display: none; padding: 24px; flex: 1; }
.db-section.active { display: block; }
.db-section-title {
  font-family: 'Montserrat',sans-serif; font-size: 18px;
  font-weight: 800; color: var(--navy-deep);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.db-section-title i { color: var(--steel); font-size: 16px; }

/* ─── Member ID Card ────────────────────── */
.db-member-card {
  background: linear-gradient(135deg, #0d2843 0%, #1a4a7a 50%, #1c3a6b 100%);
  border-radius: 20px; padding: 28px 32px;
  display: flex; gap: 32px; align-items: stretch;
  position: relative; overflow: hidden; margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(13,40,67,0.35);
}
.db-member-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 80% 20%, rgba(180,220,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.db-mc-watermark {
  position: absolute; right: -20px; bottom: -30px;
  font-family: 'Montserrat',sans-serif; font-size: 120px; font-weight: 900;
  color: rgba(255,255,255,0.04); pointer-events: none; line-height: 1;
}
.db-mc-left { flex: 1; position: relative; z-index: 1; }
.db-mc-mid-id {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4); margin-top: 16px; margin-bottom: 4px; font-weight: 600;
}
.db-mc-id-num {
  font-family: 'Montserrat',sans-serif; font-size: 22px; font-weight: 900;
  color: var(--white); letter-spacing: 1px; margin-bottom: 12px;
}
.db-mc-name { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.db-mc-role { font-size: 12px; color: rgba(255,255,255,0.5); }
.db-mc-right {
  display: flex; flex-direction: column; gap: 8px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 28px; min-width: 200px; position: relative; z-index: 1;
}
.db-mc-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; padding: 4px 10px; border-radius: 50px; width: fit-content;
  margin-bottom: 6px;
}
.db-mc-status.active { background: rgba(22,163,74,0.25); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.db-mc-status i { font-size: 7px; }
.db-mc-field { display: flex; flex-direction: column; gap: 1px; }
.db-mc-flabel { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.35); font-weight: 600; }
.db-mc-fval { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.lic-active { color: #4ade80 !important; }

/* ─── Stats row ─────────────────────────── */
.db-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.db-stat {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  transition: var(--transition);
}
.db-stat:hover { box-shadow: var(--shadow-sm); border-color: var(--steel); }
.db-stat-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.db-stat-icon.navy  { background: linear-gradient(135deg,var(--navy-deep),var(--navy-mid)); color: var(--steel-pale); }
.db-stat-icon.gold  { background: linear-gradient(135deg,#92710d,#c4990a); color: #fff; }
.db-stat-icon.steel { background: linear-gradient(135deg,var(--steel),#729cbd); color: #fff; }
.db-stat-icon.green { background: linear-gradient(135deg,#0d4726,#15803d); color: #fff; }
.db-stat-num { font-family: 'Montserrat',sans-serif; font-size: 22px; font-weight: 900; color: var(--navy-deep); line-height: 1; }
.db-stat-lbl { font-size: 11px; color: var(--gray); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }

/* ─── Quick links ───────────────────────── */
.db-quick-links {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px;
}
.db-ql {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; transition: var(--transition); font-size: 12px;
  font-weight: 600; color: var(--navy-deep);
}
.db-ql:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.db-ql-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.db-ql-icon.lic  { background: linear-gradient(135deg,#92710d,#c4990a); color: #fff; }
.db-ql-icon.tour { background: linear-gradient(135deg,var(--navy-deep),var(--navy-mid)); color: var(--steel-pale); }
.db-ql-icon.doc  { background: linear-gradient(135deg,#312e81,#4338ca); color: #fff; }
.db-ql-icon.pay  { background: linear-gradient(135deg,#0d4726,#15803d); color: #fff; }

/* ─── Cards ─────────────────────────────── */
.db-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; margin-bottom: 20px;
}
.db-card-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.db-card-header h3 {
  font-family: 'Montserrat',sans-serif; font-size: 15px;
  font-weight: 700; color: var(--navy-deep); margin: 0;
}
.db-notif-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--steel); color: #fff; font-size: 11px; font-weight: 700; margin-left: 6px;
}

/* ─── List rows ─────────────────────────── */
.db-list { display: flex; flex-direction: column; gap: 4px; }
.db-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--ice);
}
.db-list-row:last-child { border-bottom: none; }
.db-list-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: var(--ice); display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--steel);
}
.db-list-body { flex: 1; min-width: 0; }
.db-list-title { font-size: 13px; font-weight: 600; color: var(--navy-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-list-sub { font-size: 11px; color: var(--gray); margin-top: 2px; }
.db-list-sub i { margin-right: 4px; color: var(--steel); }

/* Notification rows */
.notif-row.notif-success .db-list-icon { background: rgba(22,163,74,0.1); color: #16a34a; }
.notif-row.notif-info    .db-list-icon { background: rgba(59,130,246,0.1); color: #3b82f6; }

/* ─── Badges ────────────────────────────── */
.db-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 4px 10px; border-radius: 50px; white-space: nowrap;
}
.db-badge-registered { background: #dcfce7; color: #14532d; }
.db-badge-upcoming   { background: #dbeafe; color: #1e40af; }
.db-badge-open       { background: #fef3c7; color: #92400e; }
.db-badge-done       { background: #f1f5f9; color: var(--gray); }
.db-badge-pending    { background: #fef3c7; color: #92400e; }

/* ─── Profile ───────────────────────────── */
.db-profile-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start;
}
.db-profile-avatar-col { text-align: center; }
.db-profile-avatar {
  width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--steel), var(--navy-mid));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat',sans-serif; font-size: 32px;
  font-weight: 800; color: var(--white);
}
.db-profile-name { font-family: 'Montserrat',sans-serif; font-size: 14px; font-weight: 700; color: var(--navy-deep); margin-bottom: 6px; }
.db-profile-perms { text-align: left; margin-top: 20px; background: var(--ice); border-radius: 10px; padding: 14px 16px; }
.db-pp-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray); margin-bottom: 8px; font-weight: 600; }
.db-pp-item { font-size: 12px; color: var(--navy-deep); padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.db-pp-item i { color: #16a34a; font-size: 10px; }

.db-profile-fields { display: flex; flex-direction: column; gap: 20px; }
.db-fields-group { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.db-fg-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray); font-weight: 600; padding: 12px 16px; background: var(--ice); border-bottom: 1px solid var(--border); }
.db-field-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ice); }
.db-field-row:last-child { border-bottom: none; }
.db-field-row label { font-size: 12px; color: var(--gray); min-width: 150px; }
.db-field-val { font-size: 13px; font-weight: 600; color: var(--navy-deep); display: flex; align-items: center; gap: 8px; }
.db-field-hidden { font-family: monospace; letter-spacing: 2px; }
.db-reveal-btn { background: none; border: none; cursor: pointer; color: var(--steel); padding: 2px 4px; font-size: 12px; }

/* ─── License card ──────────────────────── */
.db-license-card {
  background: linear-gradient(135deg, #0a1f33 0%, #1a3a5c 60%, #1c3a6b 100%);
  border-radius: 20px; overflow: hidden; margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(10,31,51,0.3);
}
.db-lc-header {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.db-lc-header-text { flex: 1; }
.db-lc-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.4); margin-bottom: 3px; }
.db-lc-type { font-family: 'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: var(--white); }
.db-lc-status {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 14px; border-radius: 50px;
}
.db-lc-status.active { background: rgba(22,163,74,0.25); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.db-lc-body { padding: 24px 28px; }
.db-lc-num { margin-bottom: 20px; }
.db-lc-num-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.35); }
.db-lc-num-val { font-family: 'Montserrat',sans-serif; font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: 1px; margin-top: 2px; }
.db-lc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.db-lc-field { display: flex; flex-direction: column; gap: 4px; }
.db-lc-fl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.35); font-weight: 600; }
.db-lc-fv { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.license-valid { color: #4ade80 !important; }
.db-lc-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-top: 1px solid rgba(255,255,255,0.08); position: relative; }
.db-lc-watermark { font-family: 'Montserrat',sans-serif; font-size: 36px; font-weight: 900; color: rgba(255,255,255,0.04); letter-spacing: 6px; }

/* ─── Table ─────────────────────────────── */
.db-table-wrap { overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.db-table th { background: var(--ice); color: var(--gray); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding: 10px 14px; text-align: left; white-space: nowrap; }
.db-table td { padding: 12px 14px; border-bottom: 1px solid var(--ice); }
.db-table tr:last-child td { border-bottom: none; }
.db-table tr:hover td { background: var(--ice); }
.db-td-title  { font-weight: 600; color: var(--navy-deep); }
.db-td-date   { font-size: 12px; color: var(--gray); white-space: nowrap; }
.db-td-date i { color: var(--steel); font-size: 10px; margin-right: 4px; }
.db-td-amount { font-family: 'Montserrat',sans-serif; font-weight: 700; color: var(--navy-deep); }
.db-td-sub    { font-size: 12px; color: var(--gray); }

/* ─── My Documents grid ─────────────────── */
.db-docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.db-doc-card {
  background: var(--ice); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: var(--transition);
}
.db-doc-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.db-doc-missing { border-color: #fca5a5; background: #fff5f5; }
.db-doc-icon { font-size: 28px; color: var(--steel); }
.db-doc-missing .db-doc-icon { color: #ef4444; }
.db-doc-title { font-size: 12px; font-weight: 600; color: var(--navy-deep); line-height: 1.3; }
.db-doc-type  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray); }
.db-doc-date  { font-size: 11px; color: #16a34a; display: flex; align-items: center; gap: 4px; }
.db-doc-date i { font-size: 10px; }
.db-doc-missing-label { font-size: 11px; color: #ef4444; display: flex; align-items: center; gap: 4px; }

/* ─── AHF Docs ──────────────────────────── */
.db-paywall-notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6;
  border-radius: 10px; padding: 14px 18px; margin-bottom: 20px;
  font-size: 13px; color: var(--navy-deep);
}
.db-paywall-notice i { color: #3b82f6; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.db-ahf-docs-list { display: flex; flex-direction: column; gap: 2px; }
.db-ahf-doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--ice);
}
.db-ahf-doc-row:last-child { border-bottom: none; }
.db-ahf-doc-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: var(--ice); display: flex; align-items: center;
  justify-content: center; font-size: 16px; color: var(--steel);
}
.db-ahf-doc-body { flex: 1; min-width: 0; }
.db-ahf-doc-title { font-size: 13px; font-weight: 600; color: var(--navy-deep); margin-bottom: 3px; }
.db-ahf-doc-access { font-size: 11px; }
.db-access-free { color: #16a34a; font-weight: 600; }
.db-access-paid { color: var(--steel); font-weight: 600; }
.db-access-free i { margin-right: 3px; }
.db-access-paid i { margin-right: 3px; }
.db-ahf-doc-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── Info block ────────────────────────── */
.db-info-block {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ice); border: 1px solid var(--border); border-left: 4px solid var(--steel);
  border-radius: 10px; padding: 14px 18px; font-size: 13px; color: var(--gray); line-height: 1.5;
}
.db-info-block i { color: var(--steel); font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.db-info-block a { color: var(--steel); font-weight: 600; }
.db-info-block strong { color: var(--navy-deep); }

/* ─── Alert banners ─────────────────────── */
.db-alert-pending, .db-alert-expired {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: 13px;
}
.db-alert-pending { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.db-alert-expired { background: #fff5f5; border: 1px solid #fca5a5; color: #991b1b; }
.db-alert-pending i, .db-alert-expired i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.db-alert-pending a, .db-alert-expired a { font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* ─── Notifications ─────────────────────── */
.db-notif-list { display: flex; flex-direction: column; gap: 2px; }
.db-notif-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--ice); position: relative;
}
.db-notif-item:last-child { border-bottom: none; }
.db-notif-item.notif-read { opacity: 0.55; }
.db-notif-icon-wrap {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.db-notif-icon-wrap.success { background: rgba(22,163,74,0.1); color: #16a34a; }
.db-notif-icon-wrap.info    { background: rgba(59,130,246,0.1); color: #3b82f6; }
.db-notif-body { flex: 1; }
.db-notif-text { font-size: 13px; font-weight: 500; color: var(--navy-deep); line-height: 1.4; }
.db-notif-time { font-size: 11px; color: var(--gray); margin-top: 2px; }
.db-notif-unread-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--steel); flex-shrink: 0;
}

/* ─── Buttons ───────────────────────────── */
.btn-sm-steel {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--navy-deep); color: var(--white);
  border: none; border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: var(--transition); white-space: nowrap;
}
.btn-sm-steel:hover { background: var(--navy-mid); }
.btn-sm-gold {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,#b8860b,#d4a017); color: #fff;
  border: none; border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: var(--transition); white-space: nowrap;
}
.btn-sm-gold:hover { opacity: 0.9; }

/* ─── Toast ─────────────────────────────── */
.db-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  background: var(--navy-deep); color: var(--white);
  padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ─── Sidebar overlay (mobile) ──────────── */
.db-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 99;
}

/* ─── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .db-docs-grid   { grid-template-columns: repeat(2, 1fr); }
  .db-lc-fields   { grid-template-columns: repeat(2, 1fr); }
  .db-stats-row   { grid-template-columns: repeat(2, 1fr); }
  .db-quick-links { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .db-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%); z-index: 200;
  }
  .db-sidebar.open { transform: translateX(0); }
  .db-sidebar-overlay.active { display: block; }
  .db-menu-toggle { display: flex; }
  .db-member-card { flex-direction: column; gap: 20px; padding: 20px; }
  .db-mc-right { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-left: 0; padding-top: 16px; min-width: auto; flex-direction: row; flex-wrap: wrap; }
  .db-profile-grid { grid-template-columns: 1fr; }
  .db-stats-row    { grid-template-columns: repeat(2, 1fr); }
  .db-quick-links  { grid-template-columns: repeat(2, 1fr); }
  .db-lc-fields    { grid-template-columns: 1fr 1fr; }
  .db-section      { padding: 16px; }
  .db-docs-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .db-stats-row  { grid-template-columns: 1fr 1fr; }
  .db-docs-grid  { grid-template-columns: 1fr 1fr; }
  .db-lc-fields  { grid-template-columns: 1fr; }
  .db-topbar-right .db-role-chip { display: none; }
}

/* ─── Dashboard Toast — additional states ─────────────────── */
.db-toast { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.db-toast.db-toast-visible { opacity: 1; pointer-events: auto; animation: toastIn 0.3s ease forwards; }
.db-toast.db-toast-success { border-left: 4px solid #22c55e; }
.db-toast.db-toast-error   { border-left: 4px solid #ef4444; background: #1e1f2e; }
.db-toast.db-toast-info    { border-left: 4px solid var(--steel, #4a90a4); }

/* ─── Sidebar overlay — open state ────────────────────────── */
.db-sidebar-overlay.open { display: block; }

/* ─── DB section — active state ───────────────────────────── */
.db-section { display: none; }
.db-section.active { display: block; }

/* ─── DB nav-link badge ────────────────────────────────────── */
.db-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  font-size: 10px; font-weight: 700; padding: 0 4px;
  margin-left: auto;
}
.active-badge { background: #22c55e; color: #fff; }
.notif-badge  { background: #ef4444; color: #fff; }

/* ─── DB field hidden (IIN) ────────────────────────────────── */
.db-field-hidden span,
.db-field-hidden { position: relative; }
.db-reveal-btn {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  color: var(--steel, #4a90a4); font-size: 13px;
  vertical-align: middle;
}
.db-reveal-btn:hover { color: var(--navy-deep, #0a1628); }

/* ─── Small button variants ────────────────────────────────── */
.btn-sm-steel {
  padding: 6px 14px; background: var(--steel, #4a90a4); color: #fff;
  border: none; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.btn-sm-steel:hover { background: var(--navy, #112240); }
.btn-sm-gold {
  padding: 6px 14px; background: var(--gold, #d4af37); color: #fff;
  border: none; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.btn-sm-gold:hover { background: #b8962a; }
.btn-sm-outline {
  padding: 6px 14px; background: transparent;
  border: 1.5px solid var(--steel, #4a90a4);
  color: var(--steel, #4a90a4); border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-sm-outline:hover { background: var(--steel, #4a90a4); color: #fff; }

/* ─── DPW backdrop ─────────────────────────────────────────── */
.dpw-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,22,40,0.7); z-index: 1999;
}
.dpw-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 16px;
  padding: 36px 32px; max-width: 420px; width: 90%;
  z-index: 2000; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.dpw-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--gray, #666);
}
.dpw-icon { font-size: 40px; color: var(--steel,#4a90a4); margin-bottom: 12px; }
.dpw-title { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 18px; color: var(--navy-deep,#0a1628); margin-bottom: 6px; }
.dpw-doc  { font-size: 14px; color: var(--gray,#666); margin-bottom: 4px; }
.dpw-price { font-size: 22px; font-weight: 800; color: var(--gold,#d4af37); margin-bottom: 20px; }
.dpw-banks { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.dpw-bank-btn {
  padding: 10px 22px; background: var(--navy-deep,#0a1628);
  color: #fff; border: none; border-radius: 8px; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.dpw-bank-btn:hover { background: var(--steel,#4a90a4); }
.dpw-note { font-size: 11px; color: var(--gray,#666); }

/* ================================================================
   LEGAL PAGES — /privacy, /terms, /payments-policy, /cookies
   v3.1 · AHF
   ================================================================ */

/* ── Hero ─────────────────────────────────────────────────────── */
.legal-hero {
  position: relative; padding: 80px 0 60px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-deep,#0a1628) 0%, #1a2d50 60%, var(--steel,#4a90a4) 200%);
  color: var(--white,#fff);
}
.legal-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(74,144,164,0.15) 0%, transparent 70%);
}
.legal-hero-content { position: relative; text-align: center; }
.legal-hero-icon { font-size: 48px; color: var(--steel,#4a90a4); margin-bottom: 16px; }
.legal-hero-title {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(24px, 5vw, 40px); margin-bottom: 10px;
}
.legal-hero-sub { font-size: 15px; color: rgba(255,255,255,0.65); margin-bottom: 20px; }
.legal-meta-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
}
.legal-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06); padding: 5px 12px;
  border-radius: 20px;
}
.legal-meta-item i { color: var(--steel,#4a90a4); }

/* ── Body Layout ──────────────────────────────────────────────── */
.legal-body { padding: 60px 0 80px; background: #f8f9fb; }
.legal-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
}

/* ── TOC Sidebar ──────────────────────────────────────────────── */
.legal-toc {
  position: sticky; top: 90px;
  background: var(--white,#fff); border-radius: 14px;
  padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.legal-toc-title {
  font-family: 'Montserrat',sans-serif; font-weight: 800;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--navy-deep,#0a1628); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.legal-toc-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.legal-toc-nav a {
  font-size: 13px; color: var(--gray,#666); padding: 6px 8px;
  border-radius: 6px; text-decoration: none; transition: all 0.2s;
}
.legal-toc-nav a:hover {
  background: rgba(74,144,164,0.1); color: var(--steel,#4a90a4);
}
.legal-toc-pdf { margin-top: 16px; }
.legal-toc-pdf .btn-outline {
  width: 100%; justify-content: center; font-size: 13px;
}

/* ── Main Text ────────────────────────────────────────────────── */
.legal-text {
  background: var(--white,#fff); border-radius: 14px;
  padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.legal-section { margin-bottom: 48px; }
.legal-section h2 {
  font-family: 'Montserrat',sans-serif; font-weight: 800;
  font-size: 20px; color: var(--navy-deep,#0a1628);
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 2px solid #f0f2f5;
}
.legal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--steel,#4a90a4); color: var(--white,#fff);
  font-size: 14px; font-weight: 900; flex-shrink: 0;
}
.legal-section p {
  font-size: 15px; color: #444; line-height: 1.75; margin-bottom: 12px;
}
.legal-ul {
  list-style: none; padding: 0; margin: 0 0 16px;
}
.legal-ul li {
  font-size: 14px; color: #555; line-height: 1.7; padding: 6px 0 6px 22px;
  position: relative; border-bottom: 1px dashed #eee;
}
.legal-ul li:last-child { border-bottom: none; }
.legal-ul li::before {
  content: '—'; position: absolute; left: 0; color: var(--steel,#4a90a4);
}

/* ── Notice Block ─────────────────────────────────────────────── */
.legal-notice {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(74,144,164,0.08); border: 1.5px solid rgba(74,144,164,0.25);
  border-left: 4px solid var(--steel,#4a90a4);
  border-radius: 10px; padding: 16px; margin-bottom: 36px;
  font-size: 14px; color: #444; line-height: 1.65;
}
.legal-notice i { color: var(--steel,#4a90a4); font-size: 18px; margin-top: 2px; flex-shrink: 0; }

/* ── Highlight Block ──────────────────────────────────────────── */
.legal-highlight {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(234,179,8,0.07); border-left: 4px solid #f59e0b;
  border-radius: 10px; padding: 16px; margin: 16px 0;
  font-size: 14px; color: #555; line-height: 1.65;
}
.legal-highlight i { color: #f59e0b; font-size: 18px; margin-top: 2px; flex-shrink: 0; }

/* ── Data Grid ────────────────────────────────────────────────── */
.legal-data-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 16px 0;
}
.legal-data-card {
  background: #f8f9fb; border-radius: 10px; padding: 20px;
  border: 1.5px solid #eef0f4;
}
.legal-data-icon {
  font-size: 24px; color: var(--steel,#4a90a4); margin-bottom: 10px;
}
.legal-data-title {
  font-weight: 700; font-size: 14px; color: var(--navy-deep,#0a1628);
  margin-bottom: 8px;
}
.legal-data-card ul {
  padding-left: 16px; margin: 0;
}
.legal-data-card ul li {
  font-size: 13px; color: #666; margin-bottom: 4px;
}
@media (max-width: 600px) { .legal-data-grid { grid-template-columns: 1fr; } }

/* ── List Items ───────────────────────────────────────────────── */
.legal-list-items { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.legal-list-item {
  display: flex; align-items: flex-start; gap: 14px;
  background: #f8f9fb; border-radius: 10px; padding: 14px 16px;
  font-size: 14px; color: #444; line-height: 1.6;
}
.legal-li-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(74,144,164,0.12); color: var(--steel,#4a90a4);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

/* ── Rights Grid ──────────────────────────────────────────────── */
.legal-rights-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0;
}
.legal-right-card {
  background: #f8f9fb; border-radius: 10px; padding: 16px;
  text-align: center; border: 1.5px solid #eef0f4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.legal-right-card i { font-size: 22px; color: var(--steel,#4a90a4); }
.legal-right-card strong { font-size: 13px; color: var(--navy-deep,#0a1628); }
.legal-right-card span { font-size: 12px; color: #888; }
@media (max-width: 600px) { .legal-rights-grid { grid-template-columns: repeat(2,1fr); } }

/* ── Table ────────────────────────────────────────────────────── */
.legal-table-wrap { overflow-x: auto; margin: 16px 0; border-radius: 10px; }
.legal-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.legal-table th {
  background: var(--navy-deep,#0a1628); color: var(--white,#fff);
  padding: 12px 16px; text-align: left; font-weight: 700;
}
.legal-table td {
  padding: 11px 16px; border-bottom: 1px solid #eef0f4; color: #444;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:nth-child(even) td { background: #f8f9fb; }

/* ── Contact Block ────────────────────────────────────────────── */
.legal-contact-block {
  background: #f8f9fb; border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.legal-contact-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: #444;
}
.legal-contact-row i { color: var(--steel,#4a90a4); width: 18px; text-align: center; }
.legal-link { color: var(--steel,#4a90a4); text-decoration: underline; }
.legal-link:hover { color: var(--navy-deep,#0a1628); }

/* ── Footer Note ──────────────────────────────────────────────── */
.legal-footer-note {
  margin-top: 40px; padding-top: 20px;
  border-top: 1.5px solid #eef0f4;
  font-size: 12px; color: #aaa;
  display: flex; align-items: center; gap: 8px;
}

/* ── Payments Policy Specific ─────────────────────────────────── */
.pay-tariff-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin: 20px 0;
}
.pay-tariff-card {
  border-radius: 14px; padding: 24px;
  border: 2px solid #eef0f4; background: var(--white,#fff);
  transition: box-shadow 0.2s;
}
.pay-tariff-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1); }
.pay-tariff-athlete { border-top: 4px solid var(--steel,#4a90a4); }
.pay-tariff-coach   { border-top: 4px solid #22c55e; }
.pay-tariff-referee { border-top: 4px solid #a855f7; }
.pay-tariff-user    { border-top: 4px solid #94a3b8; }
.pay-tariff-icon { font-size: 32px; color: var(--steel,#4a90a4); margin-bottom: 10px; }
.pay-tariff-role {
  font-family: 'Montserrat',sans-serif; font-weight: 800;
  font-size: 18px; color: var(--navy-deep,#0a1628); margin-bottom: 6px;
}
.pay-tariff-price {
  font-size: 28px; font-weight: 900; color: var(--gold,#d4af37); margin-bottom: 16px;
}
.pay-tariff-price span { font-size: 14px; font-weight: 500; color: #888; }
.pay-tariff-includes {
  list-style: none; padding: 0; margin: 0 0 20px;
}
.pay-tariff-includes li {
  font-size: 13px; color: #555; padding: 5px 0;
  display: flex; align-items: center; gap: 8px;
}
.pay-tariff-includes li i { width: 16px; }
@media (max-width: 700px) { .pay-tariff-grid { grid-template-columns: 1fr; } }

.pay-docs-levels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0;
}
.pay-docs-level {
  border-radius: 12px; padding: 20px; border: 2px solid #eef0f4;
}
.pay-docs-level.free  { border-left: 4px solid #22c55e; }
.pay-docs-level.paid  { border-left: 4px solid var(--gold,#d4af37); }
.pay-docs-level-icon { font-size: 28px; margin-bottom: 10px; }
.pay-docs-level.free .pay-docs-level-icon  { color: #22c55e; }
.pay-docs-level.paid .pay-docs-level-icon  { color: var(--gold,#d4af37); }
.pay-docs-level-title {
  font-weight: 800; font-size: 15px; color: var(--navy-deep,#0a1628); margin-bottom: 4px;
}
.pay-docs-level-desc { font-size: 12px; color: #888; margin-bottom: 10px; }
.pay-docs-level ul { list-style: none; padding: 0; margin: 0; }
.pay-docs-level ul li { font-size: 13px; color: #555; padding: 4px 0; }
@media (max-width: 600px) { .pay-docs-levels { grid-template-columns: 1fr; } }

.pay-operator-card {
  display: flex; align-items: center; gap: 24px;
  background: var(--navy-deep,#0a1628); border-radius: 14px; padding: 24px;
  color: var(--white,#fff);
}
.pay-operator-name { font-family: 'Montserrat',sans-serif; font-weight: 800; font-size: 18px; }
.pay-operator-bin  { font-size: 12px; color: rgba(255,255,255,0.5); margin: 4px 0; }
.pay-operator-address { font-size: 13px; color: rgba(255,255,255,0.6); }
.pay-operator-note { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 8px; }

.pay-banks-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0;
}
.pay-bank-card {
  flex: 1; min-width: 140px; background: #f8f9fb; border-radius: 10px;
  padding: 16px; text-align: center; border: 1.5px solid #eef0f4;
}
.pay-bank-icon { font-size: 28px; color: var(--steel,#4a90a4); margin-bottom: 8px; }
.pay-bank-name { font-weight: 700; font-size: 15px; color: var(--navy-deep,#0a1628); }
.pay-bank-sub  { font-size: 12px; color: #888; }

/* ── Cookies Page Specific ───────────────────────────────────── */
.cookie-types-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 16px 0;
}
.cookie-type-card {
  border-radius: 12px; padding: 20px; border: 2px solid #eef0f4;
  background: var(--white,#fff);
}
.cookie-essential { border-top: 3px solid #22c55e; }
.cookie-analytics  { border-top: 3px solid var(--steel,#4a90a4); }
.cookie-functional { border-top: 3px solid #a855f7; }
.cookie-type-icon { font-size: 28px; margin-bottom: 10px; }
.cookie-essential .cookie-type-icon  { color: #22c55e; }
.cookie-analytics .cookie-type-icon  { color: var(--steel,#4a90a4); }
.cookie-functional .cookie-type-icon { color: #a855f7; }
.cookie-type-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 10px; margin-bottom: 8px;
}
.cookie-type-badge.essential  { background:#dcfce7; color:#14532d; }
.cookie-type-badge.analytics  { background:rgba(74,144,164,0.12); color:var(--steel,#4a90a4); }
.cookie-type-badge.functional { background:#f3e8ff; color:#6b21a8; }
.cookie-type-title { font-weight: 700; font-size: 14px; color: var(--navy-deep,#0a1628); margin-bottom: 6px; }
.cookie-type-card p { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 10px; }
.cookie-type-examples { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.cookie-type-examples code {
  font-size: 11px; background: #f1f5f9; color: var(--navy-deep,#0a1628);
  padding: 2px 7px; border-radius: 4px; font-family: 'Courier New', monospace;
}
.cookie-type-ttl { font-size: 11px; color: #aaa; margin-bottom: 8px; }
.cookie-type-disable { font-size: 11px; color: #ef4444; font-weight: 600; }
.cookie-type-disable.can-disable { color: #22c55e; }
@media (max-width: 700px) { .cookie-types-grid { grid-template-columns: 1fr; } }

.cookie-browsers-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0;
}
.cookie-browser-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: #f8f9fb; border-radius: 8px;
  font-size: 13px; color: var(--navy-deep,#0a1628); text-decoration: none;
  border: 1.5px solid #eef0f4; transition: all 0.2s;
}
.cookie-browser-link:hover {
  background: rgba(74,144,164,0.1); border-color: var(--steel,#4a90a4);
  color: var(--steel,#4a90a4);
}

/* ── Cookie BANNER ────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: var(--navy-deep,#0a1628); color: var(--white,#fff);
  border-top: 2px solid rgba(74,144,164,0.4);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
  transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cookie-banner.cookie-banner-visible { transform: translateY(0); }
.cookie-banner-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cookie-banner-left {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 260px;
}
.cookie-banner-icon {
  font-size: 28px; color: var(--gold,#d4af37); flex-shrink: 0;
}
.cookie-banner-title {
  font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 3px;
}
.cookie-banner-desc { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.cookie-link { color: var(--steel,#4a90a4); text-decoration: underline; }
.cookie-link:hover { color: #7dc8dd; }
.cookie-banner-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cookie-btn-settings {
  padding: 9px 16px; background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7);
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.cookie-btn-settings:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.cookie-btn-essential {
  padding: 9px 16px; background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.cookie-btn-essential:hover { background: rgba(255,255,255,0.18); color: #fff; }
.cookie-btn-accept {
  padding: 9px 20px; background: var(--steel,#4a90a4);
  border: none; color: #fff; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.cookie-btn-accept:hover { background: #3d7a8f; }

/* ── Cookie Settings Modal ────────────────────────────────────── */
.cookie-settings-modal { position: fixed; inset: 0; z-index: 10000; }
.cookie-settings-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
}
.cookie-settings-inner {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--white,#fff); border-radius: 20px 20px 0 0;
  padding: 28px 24px; max-width: 560px; margin: 0 auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.15);
}
.cookie-settings-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: #999;
}
.cookie-settings-title {
  font-family: 'Montserrat',sans-serif; font-weight: 800;
  font-size: 17px; color: var(--navy-deep,#0a1628);
  margin-bottom: 20px;
}
.cookie-settings-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.cookie-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid #f0f2f5;
}
.cookie-setting-row:last-child { border-bottom: none; }
.cookie-setting-name {
  font-size: 14px; font-weight: 700; color: var(--navy-deep,#0a1628); margin-bottom: 3px;
  display: flex; align-items: center; gap: 8px;
}
.cookie-required-badge {
  font-size: 10px; font-weight: 600; color: #22c55e;
  background: #dcfce7; padding: 2px 7px; border-radius: 8px;
}
.cookie-setting-desc { font-size: 12px; color: #888; }
.cookie-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-toggle span {
  position: absolute; inset: 0; cursor: pointer;
  background: #ccc; border-radius: 34px; transition: 0.3s;
}
.cookie-toggle span::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  left: 3px; bottom: 3px; transition: 0.3s;
}
.cookie-toggle input:checked + span { background: var(--steel,#4a90a4); }
.cookie-toggle input:checked + span::before { transform: translateX(20px); }
.cookie-toggle.disabled span { cursor: not-allowed; opacity: 0.6; }
.cookie-settings-footer {
  display: flex; gap: 12px; justify-content: flex-end;
}

/* ── Registration Consent Block ──────────────────────────────── */
.reg-consent-block {
  background: #f0f7fb; border-radius: 12px;
  padding: 20px; margin-top: 20px;
  border: 1.5px solid rgba(74,144,164,0.2);
}
.reg-consent-title {
  font-family: 'Montserrat',sans-serif; font-weight: 800;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--navy-deep,#0a1628); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.reg-consent-title i { color: var(--steel,#4a90a4); }
.reg-consent-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed rgba(74,144,164,0.15);
  font-size: 13px; color: #555; line-height: 1.5;
}
.reg-consent-item:last-of-type { border-bottom: none; }
.reg-consent-item input[type="checkbox"] {
  margin-top: 3px; accent-color: var(--steel,#4a90a4); flex-shrink: 0;
}
.required-consent { font-weight: 500; }
.consent-required-mark { color: #ef4444; font-weight: 700; margin-left: 2px; }
.consent-link {
  color: var(--steel,#4a90a4); text-decoration: underline;
  transition: color 0.2s;
}
.consent-link:hover { color: var(--navy-deep,#0a1628); }
.reg-consent-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px; color: #888; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed rgba(74,144,164,0.15);
}
.reg-consent-note i { color: var(--steel,#4a90a4); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   LICENSING PAGE — /licensing
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.lic-hero {
  position: relative;
  background: var(--navy-deep);
  padding: 120px 0 80px;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
}
.lic-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(114,156,189,0.18) 0%, transparent 65%),
              radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.10) 0%, transparent 55%);
}
.lic-hero-particles { position: absolute; inset: 0; pointer-events: none; }
.lic-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(114,156,189,0.12);
  animation: licFloat 6s ease-in-out infinite;
}
.lic-p1 { width: 320px; height: 320px; top: -80px; right: -60px; animation-delay: 0s; }
.lic-p2 { width: 180px; height: 180px; bottom: 40px; left: 5%; animation-delay: 2s; }
.lic-p3 { width: 100px; height: 100px; top: 40%; right: 25%; animation-delay: 4s; }
@keyframes licFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}
.lic-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto; }
.lic-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(114,156,189,0.15); border: 1px solid rgba(114,156,189,0.3);
  color: var(--steel-pale); padding: 6px 18px; border-radius: 50px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 20px;
}
.lic-hero-title {
  font-family: var(--font-heading); font-size: clamp(36px, 6vw, 72px);
  font-weight: 900; color: var(--white); letter-spacing: -1px;
  line-height: 1.05; margin-bottom: 20px;
}
.lic-title-accent { color: var(--steel); }
.lic-hero-sub {
  font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.7;
  max-width: 640px; margin: 0 auto 36px;
}
.lic-hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 36px; flex-wrap: wrap;
}
.lic-hero-stat { text-align: center; padding: 0 12px; }
.lic-hs-num { display: block; font-size: 28px; font-weight: 800; color: var(--steel-pale); line-height: 1; }
.lic-hs-lbl { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.lic-hero-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.15); }
.lic-hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── WARNING BANNER ───────────────────────────────────────── */
.lic-warning-banner {
  background: linear-gradient(135deg, #7c1a1a 0%, #9d2929 100%);
  padding: 16px 0;
}
.lic-warning-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.lic-warning-icon { font-size: 22px; color: #fbbf24; flex-shrink: 0; }
.lic-warning-text {
  flex: 1; font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 600;
  min-width: 280px;
}
.lic-w-cross { color: #fca5a5; font-style: normal; margin: 0 4px; }
.lic-warning-btn {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  color: var(--white); padding: 8px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: background 0.2s;
}
.lic-warning-btn:hover { background: rgba(255,255,255,0.25); }

/* ── TIERS ────────────────────────────────────────────────── */
.lic-tiers-section { padding: 80px 0; background: var(--off-white); }
.lic-tiers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 48px;
}
.lic-tier-card {
  background: var(--white); border-radius: 16px;
  padding: 32px 28px; border: 2px solid transparent;
  position: relative; transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.lic-tier-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 16px 16px 0 0;
}
.lic-athlete::before { background: linear-gradient(90deg, #4a90a4, #82AAC8); }
.lic-referee::before { background: linear-gradient(90deg, #a855f7, #c084fc); }
.lic-coach::before   { background: linear-gradient(90deg, #d4af37, #f0c040); }
.lic-tier-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(13,40,67,0.12); }
.lic-tier-featured {
  background: var(--navy-deep); color: var(--white);
  border-color: rgba(212,175,55,0.4);
  box-shadow: 0 8px 32px rgba(212,175,55,0.15);
}
.lic-tier-ribbon {
  position: absolute; top: 24px; right: -28px;
  background: linear-gradient(135deg, #d4af37, #f0c040);
  color: var(--navy-deep); font-size: 10px; font-weight: 800;
  padding: 4px 36px; transform: rotate(45deg);
  letter-spacing: 1px; text-transform: uppercase;
}
.lic-tier-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.lic-tier-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.lic-athlete .lic-tier-icon { background: rgba(74,144,164,0.12); color: #4a90a4; }
.lic-referee .lic-tier-icon { background: rgba(168,85,247,0.12); color: #a855f7; }
.lic-coach   .lic-tier-icon { background: rgba(212,175,55,0.12); color: #d4af37; }
.lic-tier-featured .lic-tier-icon { background: rgba(212,175,55,0.15); color: #d4af37; }
.lic-tier-en { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--gray); text-transform: uppercase; }
.lic-tier-ru { font-size: 20px; font-weight: 800; color: var(--navy-deep); }
.lic-tier-featured .lic-tier-en { color: rgba(255,255,255,0.4); }
.lic-tier-featured .lic-tier-ru { color: var(--white); }
.lic-tier-price-block { margin-bottom: 24px; }
.lic-tier-price-label { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.lic-tier-price { font-size: 32px; font-weight: 900; color: var(--navy-deep); line-height: 1; }
.lic-tier-price span { font-size: 14px; font-weight: 600; color: var(--gray); }
.lic-tier-featured .lic-tier-price { color: var(--white); }
.lic-tier-featured .lic-tier-price-label { color: rgba(255,255,255,0.4); }
.lic-tier-breakdown {
  background: var(--off-white); border-radius: 10px; padding: 14px 16px;
  margin-bottom: 24px; border: 1px solid var(--border-light);
}
.lic-tier-featured .lic-tier-breakdown { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }
.lic-tb-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 4px 0; color: var(--text-secondary);
}
.lic-tier-featured .lic-tb-row { color: rgba(255,255,255,0.6); }
.lic-tb-total { border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.lic-tier-featured .lic-tb-total { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
.lic-tb-price { color: var(--navy-deep); font-weight: 800; font-size: 15px; }
.lic-tier-featured .lic-tb-price { color: #d4af37; }
.lic-req-badge {
  background: rgba(220,38,38,0.1); color: #dc2626; font-size: 9px;
  font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.lic-tier-perks { list-style: none; margin-bottom: 20px; }
.lic-tier-perks li {
  font-size: 13px; padding: 5px 0; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.lic-tier-perks li i { color: #22c55e; font-size: 12px; }
.lic-tier-featured .lic-tier-perks li { color: rgba(255,255,255,0.7); }
.lic-tier-training {
  font-size: 12px; color: var(--gray); background: rgba(114,156,189,0.08);
  border: 1px solid rgba(114,156,189,0.2); border-radius: 8px; padding: 8px 12px;
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.lic-tier-featured .lic-tier-training { background: rgba(114,156,189,0.1); border-color: rgba(114,156,189,0.2); color: rgba(255,255,255,0.5); }
.lic-tier-btn {
  display: block; text-align: center; background: var(--navy-deep); color: var(--white);
  padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; letter-spacing: 0.5px; transition: background 0.2s;
}
.lic-tier-btn:hover { background: var(--navy-mid); }
.lic-tier-btn-gold {
  background: linear-gradient(135deg, #d4af37, #f0c040);
  color: var(--navy-deep);
}
.lic-tier-btn-gold:hover { background: linear-gradient(135deg, #b8962e, #d4af37); color: var(--navy-deep); }

/* Full cost table */
.lic-full-table {
  background: var(--white); border-radius: 16px; padding: 32px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(13,40,67,0.05);
}
.lic-ft-title {
  font-size: 16px; font-weight: 800; color: var(--navy-deep);
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.lic-ft-wrap { overflow-x: auto; }
.lic-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lic-table th {
  background: var(--navy-deep); color: var(--white);
  padding: 12px 16px; text-align: center; font-weight: 700;
}
.lic-table th:first-child { text-align: left; }
.lic-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  text-align: center; color: var(--text-primary);
}
.lic-table td:first-child { text-align: left; font-weight: 600; }
.lic-td-price { font-weight: 800; color: var(--navy-deep); }
.lic-td-opt { color: var(--gray); }
.lic-req { background: rgba(220,38,38,0.1); color: #dc2626; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.lic-tr-total td { background: rgba(13,40,67,0.04); font-weight: 800; font-size: 15px; }
.lic-tr-renewal td { background: rgba(114,156,189,0.05); color: var(--navy-mid); font-style: italic; }
.lic-ft-note {
  margin-top: 16px; font-size: 13px; color: var(--gray);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lic-link { color: var(--steel); text-decoration: none; font-weight: 600; }
.lic-link:hover { text-decoration: underline; }

/* ── STEPS ────────────────────────────────────────────────── */
.lic-steps-section { padding: 80px 0; background: var(--navy-deep); position: relative; overflow: hidden; }
.lic-steps-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(114,156,189,0.12) 0%, transparent 60%);
}
.lic-steps-track {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px; position: relative; z-index: 2;
}
.lic-step { position: relative; }
.lic-step-connector {
  display: none;
  position: absolute; top: 32px; left: 50%;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, rgba(114,156,189,0.4), rgba(114,156,189,0.1));
  z-index: 0;
}
.lic-step:not(:last-child) .lic-step-connector { display: block; }
.lic-step-num {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(114,156,189,0.15); border: 2px solid rgba(114,156,189,0.3);
  color: var(--steel-pale); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; position: relative; z-index: 1;
}
.lic-step-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 20px 16px; text-align: center;
  transition: background 0.2s, transform 0.2s;
}
.lic-step-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }
.lic-step-icon { font-size: 22px; color: var(--steel); margin-bottom: 10px; }
.lic-step-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #d4af37; text-transform: uppercase; margin-bottom: 8px;
}
.lic-step-title { font-size: 13px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.lic-step-desc { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 12px; }
.lic-step-link {
  font-size: 11px; color: var(--steel); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.lic-step-link:hover { color: var(--steel-pale); }

/* ── LICENSE CARD PREVIEW ─────────────────────────────────── */
.lic-card-section { padding: 80px 0; background: var(--white); }
.lic-card-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lic-card-features { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.lic-cf-item { display: flex; gap: 16px; align-items: flex-start; }
.lic-cf-icon {
  width: 40px; height: 40px; background: rgba(114,156,189,0.1);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--steel); font-size: 16px; flex-shrink: 0;
}
.lic-cf-title { font-size: 14px; font-weight: 700; color: var(--navy-deep); margin-bottom: 2px; }
.lic-cf-desc { font-size: 13px; color: var(--gray); }

/* Mock license card */
.lic-mock-card {
  background: linear-gradient(135deg, #0D2843 0%, #1a3a5c 50%, #0D2843 100%);
  border-radius: 18px; padding: 0; overflow: hidden;
  box-shadow: 0 24px 64px rgba(13,40,67,0.35);
  border: 1px solid rgba(114,156,189,0.2);
  max-width: 360px; margin: 0 auto;
}
.lic-mock-header {
  background: linear-gradient(90deg, #0a1f38, #163253);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(114,156,189,0.15);
}
.lic-mock-org { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 1px; text-transform: uppercase; flex: 1; }
.lic-mock-type-badge {
  background: rgba(74,144,164,0.2); color: #82AAC8; font-size: 10px;
  font-weight: 800; padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(74,144,164,0.3); letter-spacing: 1px;
}
.lic-mock-body { padding: 20px; }
.lic-mock-row { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.lic-mock-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #4a90a4, #82AAC8);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--white); flex-shrink: 0;
}
.lic-mock-name { font-size: 16px; font-weight: 800; color: var(--white); margin-bottom: 2px; }
.lic-mock-mid { font-size: 12px; color: var(--steel-pale); font-family: monospace; margin-bottom: 4px; }
.lic-mock-status-row {}
.lic-mock-status { font-size: 11px; color: #4ade80; font-weight: 700; letter-spacing: 1px; }
.lic-mock-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lic-mock-field {}
.lic-mf-lbl { font-size: 10px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1px; display: block; }
.lic-mf-val { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 600; }
.lic-mock-footer {
  background: rgba(0,0,0,0.2); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.lic-mock-qr {}
.lic-qr-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 2px;
  width: 60px; height: 60px; margin-bottom: 4px;
}
.lic-qr-cell {
  background: rgba(255,255,255,0.1); border-radius: 1px;
}
.lic-qr-cell.on { background: rgba(255,255,255,0.85); }
.lic-qr-label { font-size: 8px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.lic-mock-watermark {
  font-size: 28px; font-weight: 900; color: rgba(255,255,255,0.04);
  letter-spacing: 3px; writing-mode: vertical-rl; transform: rotate(180deg);
  user-select: none;
}

/* ── STATUSES ─────────────────────────────────────────────── */
.lic-statuses-section { padding: 80px 0; background: var(--off-white); }
.lic-statuses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.lic-status-card {
  background: var(--white); border-radius: 14px; padding: 24px; text-align: center;
  border-top: 4px solid transparent;
  box-shadow: 0 2px 12px rgba(13,40,67,0.06);
}
.st-active  { border-color: #22c55e; }
.st-pending { border-color: #f59e0b; }
.st-expired { border-color: #ef4444; }
.lic-sc-icon { font-size: 28px; margin-bottom: 10px; }
.st-active  .lic-sc-icon { color: #22c55e; }
.st-pending .lic-sc-icon { color: #f59e0b; }
.st-expired .lic-sc-icon { color: #ef4444; }
.lic-sc-status { font-size: 18px; font-weight: 800; color: var(--navy-deep); margin-bottom: 8px; }
.lic-sc-desc { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* Logic block */
.lic-logic-block {
  background: var(--navy-deep); border-radius: 16px; padding: 28px;
}
.lic-logic-title {
  font-size: 16px; font-weight: 800; color: var(--steel-pale);
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.lic-logic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lic-logic-item {
  border-radius: 10px; padding: 14px 16px;
  border-left: 4px solid transparent;
}
.lic-logic-item.denied { background: rgba(220,38,38,0.08); border-color: #ef4444; }
.lic-logic-item.allowed { background: rgba(34,197,94,0.08); border-color: #22c55e; }
.lic-logic-if { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.lic-logic-if code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-family: monospace; color: rgba(255,255,255,0.75); }
.lic-logic-then { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 600; }
.lic-logic-item.denied .lic-logic-then strong { color: #fca5a5; }
.lic-logic-item.allowed .lic-logic-then { color: #86efac; }

/* ── VERIFY INLINE ────────────────────────────────────────── */
.lic-verify-section { padding: 80px 0; background: var(--white); }
.lic-verify-card {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #1a3a5c 100%);
  border-radius: 20px; padding: 40px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  box-shadow: 0 16px 48px rgba(13,40,67,0.2);
}
.lic-verify-left { display: flex; gap: 20px; align-items: flex-start; }
.lic-verify-icon {
  width: 56px; height: 56px; background: rgba(114,156,189,0.15); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--steel-pale); font-size: 22px; flex-shrink: 0;
}
.lic-verify-tag { font-size: 10px; color: var(--steel); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.lic-verify-title { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.lic-verify-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.lic-verify-form { display: flex; gap: 10px; margin-bottom: 12px; }
.lic-verify-input {
  flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--white); padding: 12px 16px; border-radius: 10px;
  font-size: 14px; outline: none;
}
.lic-verify-input::placeholder { color: rgba(255,255,255,0.3); }
.lic-verify-input:focus { border-color: var(--steel); }
.lic-verify-result {
  font-size: 13px; min-height: 20px; margin-bottom: 8px;
}
.lic-verify-result.valid { color: #4ade80; }
.lic-verify-result.invalid { color: #f87171; }
.lic-verify-full-link {
  font-size: 12px; color: var(--steel); text-decoration: none;
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.lic-verify-full-link:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────────── */
.lic-faq-section { padding: 80px 0; background: var(--off-white); }
.lic-faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lic-faq-item {
  background: var(--white); border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-light); overflow: hidden;
  transition: box-shadow 0.2s;
}
.lic-faq-item:hover { box-shadow: 0 4px 16px rgba(13,40,67,0.08); }
.lic-faq-q {
  padding: 18px 20px; display: flex; justify-content: space-between;
  align-items: center; font-size: 15px; font-weight: 700; color: var(--navy-deep);
}
.lic-faq-arrow { transition: transform 0.3s; color: var(--gray); }
.lic-faq-item.open .lic-faq-arrow { transform: rotate(180deg); }
.lic-faq-a {
  display: none; padding: 0 20px 16px; font-size: 14px;
  color: var(--text-secondary); line-height: 1.6;
}
.lic-faq-item.open .lic-faq-a { display: block; }

/* ── FINAL CTA ────────────────────────────────────────────── */
.lic-cta-section { padding: 80px 0; position: relative; overflow: hidden; background: var(--navy-deep); }
.lic-cta-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(114,156,189,0.2) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(212,175,55,0.12) 0%, transparent 50%);
}
.lic-cta-inner { position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto; }
.lic-cta-icon { font-size: 48px; color: #d4af37; margin-bottom: 20px; }
.lic-cta-title { font-size: clamp(24px, 4vw, 42px); font-weight: 900; color: var(--white); margin-bottom: 16px; line-height: 1.1; }
.lic-cta-desc { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 32px; line-height: 1.6; }
.lic-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.lic-cta-legal { font-size: 12px; color: rgba(255,255,255,0.25); }

/* ── RESPONSIVE LICENSING ─────────────────────────────────── */
@media (max-width: 1024px) {
  .lic-tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .lic-steps-track { grid-template-columns: repeat(3, 1fr); }
  .lic-card-layout { grid-template-columns: 1fr; }
  .lic-mock-card { max-width: 100%; }
}
@media (max-width: 768px) {
  .lic-tiers-grid { grid-template-columns: 1fr; }
  .lic-steps-track { grid-template-columns: 1fr 1fr; }
  .lic-statuses-grid { grid-template-columns: 1fr; }
  .lic-logic-grid { grid-template-columns: 1fr; }
  .lic-verify-card { grid-template-columns: 1fr; }
  .lic-verify-form { flex-direction: column; }
  .lic-warning-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .lic-steps-track { grid-template-columns: 1fr; }
  .lic-hero-stats { flex-direction: column; gap: 16px; }
  .lic-hero-stat-div { display: none; }
}


/* ============================================================
   VERIFY PAGE — /verify
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.vrf-hero {
  position: relative; background: var(--navy-deep);
  padding: 120px 0 80px; overflow: hidden; min-height: 480px;
  display: flex; align-items: center;
}
.vrf-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(34,197,94,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 10% 80%, rgba(114,156,189,0.12) 0%, transparent 55%);
}
.vrf-hero-inner { position: relative; z-index: 2; text-align: center; max-width: 700px; margin: 0 auto; }
.vrf-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25);
  color: #86efac; padding: 6px 18px; border-radius: 50px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 20px;
}
.vrf-hero-title {
  font-family: var(--font-heading); font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 900; color: var(--white); letter-spacing: -1px;
  line-height: 1.05; margin-bottom: 18px;
}
.vrf-accent { color: #4ade80; }
.vrf-hero-sub {
  font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7;
  max-width: 560px; margin: 0 auto 36px;
}
.vrf-search-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 24px 28px;
}
.vrf-search-form { display: flex; gap: 12px; margin-bottom: 16px; }
.vrf-input-wrap {
  position: relative; flex: 1;
}
.vrf-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.3); font-size: 16px; pointer-events: none;
}
.vrf-input {
  width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--white); padding: 14px 44px 14px 44px; border-radius: 10px;
  font-size: 15px; outline: none; transition: border-color 0.2s;
  font-family: monospace; letter-spacing: 1px;
}
.vrf-input::placeholder { color: rgba(255,255,255,0.25); font-family: var(--font-body); letter-spacing: 0; }
.vrf-input:focus { border-color: #4ade80; }
.vrf-clear-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer;
  font-size: 14px; display: none; padding: 4px;
}
.vrf-clear-btn.show { display: block; }
.vrf-search-btn { white-space: nowrap; }
.vrf-demo-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vrf-demo-label { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; }
.vrf-demo-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6); padding: 5px 12px; border-radius: 20px;
  font-size: 11px; cursor: pointer; transition: all 0.2s;
}
.vrf-demo-btn:hover { background: rgba(255,255,255,0.12); color: var(--white); }

/* ── RESULT ───────────────────────────────────────────────── */
.vrf-result-section { padding: 60px 0 40px; background: var(--off-white); min-height: 200px; }
.vrf-loading { text-align: center; padding: 60px 0; }
.vrf-loading-spinner {
  width: 40px; height: 40px; border: 3px solid rgba(13,40,67,0.1);
  border-top-color: var(--steel); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.vrf-loading-text { font-size: 14px; color: var(--gray); }
.vrf-initial-state { text-align: center; padding: 60px 0; }
.vrf-initial-icon { font-size: 56px; color: rgba(13,40,67,0.12); margin-bottom: 16px; }
.vrf-initial-title { font-size: 20px; font-weight: 700; color: var(--navy-deep); margin-bottom: 8px; }
.vrf-initial-desc { font-size: 14px; color: var(--gray); max-width: 400px; margin: 0 auto 24px; line-height: 1.6; }
.vrf-initial-features { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vrf-if-item { font-size: 13px; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.vrf-if-item i { color: var(--steel); }

/* Result card styles */
.vrf-res-card {
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(13,40,67,0.10); max-width: 640px; margin: 0 auto;
}
.vrf-res-header {
  padding: 24px 28px; display: flex; align-items: center; gap: 16px;
}
.vrf-res-header.valid   { background: linear-gradient(135deg, #052e16, #064e3b); }
.vrf-res-header.invalid { background: linear-gradient(135deg, #1c0000, #3b0000); }
.vrf-res-header.pending { background: linear-gradient(135deg, #1c1200, #3b2600); }
.vrf-res-status-icon { font-size: 40px; }
.vrf-res-header.valid   .vrf-res-status-icon { color: #4ade80; }
.vrf-res-header.invalid .vrf-res-status-icon { color: #f87171; }
.vrf-res-header.pending .vrf-res-status-icon { color: #fbbf24; }
.vrf-res-status-text {}
.vrf-res-status-label { font-size: 22px; font-weight: 900; color: var(--white); margin-bottom: 4px; }
.vrf-res-status-sub { font-size: 13px; color: rgba(255,255,255,0.5); }
.vrf-res-body { padding: 28px; }
.vrf-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
.vrf-res-field {}
.vrf-res-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 4px; }
.vrf-res-val { font-size: 15px; font-weight: 700; color: var(--navy-deep); }
.vrf-res-type-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
.vrf-res-type-badge.athlete { background: rgba(74,144,164,0.1); color: #4a90a4; }
.vrf-res-type-badge.coach   { background: rgba(212,175,55,0.1); color: #d4af37; }
.vrf-res-type-badge.referee { background: rgba(168,85,247,0.1); color: #a855f7; }
.vrf-res-footer {
  padding: 16px 28px; background: var(--off-white); border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: gap;
}
.vrf-res-footer-note { font-size: 12px; color: var(--gray); }
.vrf-res-footer-time { font-size: 11px; color: var(--gray); }
.vrf-not-found-card {
  background: var(--white); border-radius: 20px; padding: 48px;
  text-align: center; max-width: 480px; margin: 0 auto;
  box-shadow: 0 8px 32px rgba(13,40,67,0.08);
}
.vrf-nf-icon { font-size: 48px; color: #f87171; margin-bottom: 16px; }
.vrf-nf-title { font-size: 20px; font-weight: 800; color: var(--navy-deep); margin-bottom: 8px; }
.vrf-nf-desc { font-size: 14px; color: var(--gray); margin-bottom: 24px; line-height: 1.5; }
.vrf-nf-tips { text-align: left; background: var(--off-white); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.vrf-nf-tips li { font-size: 13px; color: var(--text-secondary); padding: 3px 0; }

/* ── REGISTRY ─────────────────────────────────────────────── */
.vrf-registry-section { padding: 80px 0; background: var(--white); }
.vrf-registry-wrap {
  background: var(--off-white); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-light);
}
.vrf-registry-filters {
  padding: 16px 20px; background: var(--white); border-bottom: 1px solid var(--border-light);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.vrf-rf-btn {
  padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border-light); background: var(--white);
  color: var(--gray); cursor: pointer; transition: all 0.2s;
}
.vrf-rf-btn.active, .vrf-rf-btn:hover {
  background: var(--navy-deep); color: var(--white); border-color: var(--navy-deep);
}
.vrf-registry-table-wrap { overflow-x: auto; }
.vrf-registry-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vrf-registry-table th {
  background: rgba(13,40,67,0.04); color: var(--navy-deep); font-weight: 700;
  padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--border-light);
}
.vrf-registry-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.vrf-rt-row:last-child td { border-bottom: none; }
.vrf-rt-row:hover td { background: rgba(13,40,67,0.02); }
.vrf-rt-num { color: var(--gray); font-size: 12px; }
.vrf-rt-mid { font-family: monospace; font-weight: 700; color: var(--navy-deep); font-size: 13px; }
.vrf-rt-name { font-weight: 600; color: var(--text-primary); }
.vrf-rt-date { font-size: 13px; color: var(--text-secondary); }
.vrf-type-badge {
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  display: inline-block;
}
.vrf-type-badge.athlete { background: rgba(74,144,164,0.1); color: #4a90a4; }
.vrf-type-badge.coach   { background: rgba(212,175,55,0.1); color: #d4af37; }
.vrf-type-badge.referee { background: rgba(168,85,247,0.1); color: #a855f7; }
.vrf-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.vrf-status-badge.active   { background: rgba(34,197,94,0.1); color: #16a34a; }
.vrf-status-badge.pending  { background: rgba(245,158,11,0.1); color: #b45309; }
.vrf-status-badge.expired  { background: rgba(239,68,68,0.1); color: #dc2626; }
.vrf-status-badge i { font-size: 7px; }
.vrf-check-btn {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(114,156,189,0.1); border: 1px solid rgba(114,156,189,0.2);
  color: var(--steel); cursor: pointer; font-size: 12px; transition: all 0.2s;
}
.vrf-check-btn:hover { background: var(--steel); color: var(--white); }
.vrf-registry-footer {
  padding: 14px 20px; background: var(--white); border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.vrf-rf-count { font-size: 13px; color: var(--gray); }
.vrf-rf-note { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 6px; }

/* ── QR SECTION ───────────────────────────────────────────── */
.vrf-qr-section { padding: 80px 0; background: var(--off-white); }
.vrf-qr-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.vrf-qr-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.vrf-qr-step { display: flex; align-items: flex-start; gap: 16px; }
.vrf-qss-num {
  width: 32px; height: 32px; background: var(--navy-deep); color: var(--white);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.vrf-qss-title { font-size: 14px; font-weight: 700; color: var(--navy-deep); margin-bottom: 2px; }
.vrf-qss-desc { font-size: 13px; color: var(--gray); }
.vrf-qr-demo { display: flex; align-items: center; gap: 24px; justify-content: center; }
.vrf-qr-phone {
  width: 200px; background: #111; border-radius: 24px; padding: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  border: 2px solid #333;
}
.vrf-qrp-screen { background: var(--white); border-radius: 16px; overflow: hidden; }
.vrf-qrp-bar { background: #f5f5f5; padding: 8px 10px; border-bottom: 1px solid #e5e5e5; }
.vrf-qrp-url { font-size: 9px; color: #666; font-family: monospace; truncate: ellipsis; overflow: hidden; white-space: nowrap; }
.vrf-qrp-result { padding: 14px; }
.vrf-qrpr-status {
  font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px;
  margin-bottom: 8px; display: inline-block;
}
.vrf-qrpr-status.valid { background: #f0fdf4; color: #16a34a; }
.vrf-qrpr-name { font-size: 13px; font-weight: 800; color: #111; margin-bottom: 2px; }
.vrf-qrpr-mid { font-size: 10px; color: #666; font-family: monospace; margin-bottom: 4px; }
.vrf-qrpr-type { font-size: 10px; color: #4a90a4; font-weight: 700; margin-bottom: 2px; }
.vrf-qrpr-date { font-size: 10px; color: #888; }
.vrf-qr-arrow { font-size: 28px; color: rgba(13,40,67,0.2); }
.vrf-qr-code-mock { text-align: center; }
.vrf-qcm-grid {
  display: grid; grid-template-columns: repeat(7, 10px);
  grid-template-rows: repeat(7, 10px); gap: 2px;
  margin: 0 auto 8px; width: fit-content;
}
.vrf-qcm-grid div { border-radius: 1px; }
.vrf-qcm-label { font-size: 10px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }

/* ── LEGEND ───────────────────────────────────────────────── */
.vrf-legend-section { padding: 60px 0; background: var(--white); }
.vrf-legend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vrf-legend-card {
  border-radius: 14px; padding: 24px 20px; text-align: center;
  border-top: 4px solid transparent;
  box-shadow: 0 2px 12px rgba(13,40,67,0.05); background: var(--off-white);
}
.vrf-legend-card.active    { border-color: #22c55e; }
.vrf-legend-card.pending   { border-color: #f59e0b; }
.vrf-legend-card.expired   { border-color: #ef4444; }
.vrf-legend-card.suspended { border-color: #94a3b8; }
.vrf-lc-icon { font-size: 24px; margin-bottom: 8px; }
.vrf-legend-card.active    .vrf-lc-icon { color: #22c55e; }
.vrf-legend-card.pending   .vrf-lc-icon { color: #f59e0b; }
.vrf-legend-card.expired   .vrf-lc-icon { color: #ef4444; }
.vrf-legend-card.suspended .vrf-lc-icon { color: #94a3b8; }
.vrf-lc-title { font-size: 16px; font-weight: 800; color: var(--navy-deep); margin-bottom: 6px; }
.vrf-lc-desc { font-size: 12px; color: var(--gray); line-height: 1.5; }

/* ── CTA ──────────────────────────────────────────────────── */
.vrf-cta-section { padding: 80px 0; background: var(--navy-deep); }
.vrf-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.vrf-cta-left { flex: 1; min-width: 280px; }
.vrf-cta-title { font-size: clamp(22px, 3.5vw, 36px); font-weight: 900; color: var(--white); margin-bottom: 12px; line-height: 1.2; }
.vrf-cta-desc { font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 24px; line-height: 1.6; }
.vrf-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.vrf-cta-stats { display: flex; gap: 32px; }
.vrf-cs-item { text-align: center; }
.vrf-cs-num { font-size: 36px; font-weight: 900; color: var(--steel-pale); line-height: 1; }
.vrf-cs-lbl { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }

/* ── RESPONSIVE VERIFY ────────────────────────────────────── */
@media (max-width: 1024px) {
  .vrf-legend-grid { grid-template-columns: repeat(2, 1fr); }
  .vrf-qr-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .vrf-search-form { flex-direction: column; }
  .vrf-res-grid { grid-template-columns: 1fr; }
  .vrf-cta-inner { flex-direction: column; }
  .vrf-cta-stats { justify-content: center; }
}
@media (max-width: 480px) {
  .vrf-legend-grid { grid-template-columns: 1fr; }
  .vrf-demo-links { flex-direction: column; align-items: flex-start; }
}

/* ── DASHBOARD: License tariffs block ────────────────────── */
.db-lic-tariffs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 16px;
}
.db-lic-tariff {
  border-radius: 12px; padding: 18px 16px;
  background: var(--off-white); border: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 14px;
  transition: box-shadow 0.2s;
}
.db-lic-tariff:hover { box-shadow: 0 4px 16px rgba(13,40,67,0.08); }
.db-lt-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.db-lic-tariff.athlete .db-lt-icon { background: rgba(74,144,164,0.1); color: #4a90a4; }
.db-lic-tariff.referee .db-lt-icon { background: rgba(168,85,247,0.1); color: #a855f7; }
.db-lic-tariff.coach   .db-lt-icon { background: rgba(212,175,55,0.1); color: #d4af37; }
.db-lt-body { flex: 1; min-width: 0; }
.db-lt-role { font-size: 13px; font-weight: 800; color: var(--navy-deep); margin-bottom: 4px; }
.db-lt-breakdown { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.db-lt-breakdown span { font-size: 11px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-lt-price { font-size: 16px; font-weight: 900; color: var(--navy-deep); }
.db-lt-price span { font-size: 11px; font-weight: 600; color: var(--gray); }
.db-lt-btn {
  background: var(--navy-deep); color: var(--white);
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: background 0.2s;
}
.db-lt-btn:hover { background: var(--navy-mid); }
.db-lt-btn.coach {
  background: linear-gradient(135deg, #d4af37, #f0c040);
  color: var(--navy-deep);
}
.db-lic-logic-note {
  background: rgba(13,40,67,0.04); border: 1px solid rgba(13,40,67,0.08);
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.db-lic-logic-note i { color: var(--steel); flex-shrink: 0; }
.db-lic-logic-note code {
  background: rgba(13,40,67,0.08); padding: 2px 7px;
  border-radius: 4px; font-family: monospace; font-size: 12px; color: var(--navy-mid);
}
@media (max-width: 768px) {
  .db-lic-tariffs { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — DIGITAL PASSPORT SECTION
   v5.0 © ТОО «MIG Capital Group»
═══════════════════════════════════════════════════════════════ */

/* ── PASSPORT HERO ROW ── */
.passport-hero-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .passport-hero-row { grid-template-columns: 1fr; }
}

/* ── PASSPORT CARD (like a physical card) ── */
.passport-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.passport-card {
  width: 320px;
  background: linear-gradient(135deg, #0D2843 0%, #1a3a5c 40%, #2B4C6F 100%);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(13,40,67,0.5), 0 0 0 1px rgba(196,227,245,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  user-select: none;
}
.passport-card:hover {
  transform: translateY(-4px) rotateX(2deg);
  box-shadow: 0 16px 48px rgba(13,40,67,0.6), 0 0 0 1px rgba(196,227,245,0.2);
}

/* Shine effect */
.passport-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(255,255,255,0.02) 100%);
  pointer-events: none;
  z-index: 1;
}

.passport-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(196,227,245,0.1);
  position: relative;
  z-index: 2;
}
.passport-card-fed {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(196,227,245,0.7);
  flex: 1;
}
.passport-card-type-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #C4E3F5;
  background: rgba(196,227,245,0.12);
  border: 1px solid rgba(196,227,245,0.2);
  border-radius: 4px;
  padding: 2px 6px;
}

.passport-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 10px;
  position: relative;
  z-index: 2;
}
.passport-card-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(114,156,189,0.2);
  border: 2px solid rgba(196,227,245,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.passport-card-initials {
  font-size: 18px;
  font-weight: 800;
  color: #C4E3F5;
  font-family: 'Montserrat', sans-serif;
}
.passport-card-info { flex: 1; min-width: 0; }
.passport-card-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-card-mid {
  font-size: 10px;
  font-weight: 600;
  color: #C4E3F5;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.passport-card-role-row { margin-bottom: 5px; }
.passport-card-role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 2px 7px;
  border-radius: 3px;
}
.passport-card-role.athlete { background: rgba(74,144,164,0.3); color: #7ec8e3; border: 1px solid rgba(74,144,164,0.4); }
.passport-card-role.coach   { background: rgba(212,175,55,0.3);  color: #f0c040; border: 1px solid rgba(212,175,55,0.4); }
.passport-card-role.referee { background: rgba(168,85,247,0.3);  color: #c4b5fd; border: 1px solid rgba(168,85,247,0.4); }
.passport-card-role.user    { background: rgba(114,156,189,0.3); color: #C4E3F5; border: 1px solid rgba(114,156,189,0.4); }

.passport-card-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.passport-cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.passport-card-status.active  { color: #4ade80; }
.passport-card-status.active .passport-cs-dot  { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.passport-card-status.pending { color: #fbbf24; }
.passport-card-status.pending .passport-cs-dot { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.passport-card-status.expired { color: #f87171; }
.passport-card-status.expired .passport-cs-dot { background: #f87171; box-shadow: 0 0 6px #f87171; }

/* QR block on card */
.passport-card-qr-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
}
.passport-card-qr {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.passport-card-qr-meta { flex: 1; }
.passport-cqm-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.passport-cqm-lbl { font-size: 9px; color: rgba(196,227,245,0.5); }
.passport-cqm-val { font-size: 9px; font-weight: 600; color: #C4E3F5; }
.passport-cqm-scan {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(196,227,245,0.35);
  margin-top: 4px;
  font-weight: 600;
}

.passport-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  position: relative;
  z-index: 2;
}
.passport-card-num { font-size: 9px; color: rgba(196,227,245,0.4); letter-spacing: 0.5px; font-family: 'Montserrat',sans-serif; }
.passport-card-watermark {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: rgba(196,227,245,0.05);
  letter-spacing: 4px;
  user-select: none;
}

/* ── SHOW AT ENTRY BUTTON ── */
.passport-show-btn {
  width: 100%;
  max-width: 320px;
  padding: 12px;
  background: linear-gradient(135deg, #0D2843, #2B4C6F);
  border: 1.5px solid rgba(196,227,245,0.25);
  border-radius: 10px;
  color: #C4E3F5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.passport-show-btn:hover {
  background: linear-gradient(135deg, #1a3a5c, #4A7396);
  border-color: rgba(196,227,245,0.4);
  box-shadow: 0 4px 16px rgba(13,40,67,0.4);
}

/* ── CONTROLS PANEL ── */
.passport-controls { display: flex; flex-direction: column; gap: 1rem; }

/* Status block */
.passport-status-block { margin-bottom: .25rem; }
.passport-status-big {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(74,222,128,0.08);
  border: 1.5px solid rgba(74,222,128,0.25);
}
.passport-status-big.expired { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.25); }
.passport-status-big.pending { background: rgba(251,191,36,0.08);  border-color: rgba(251,191,36,0.25); }

.passport-sb-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  flex-shrink: 0;
  animation: statusPulse 2s infinite;
}
.passport-status-big.expired .passport-sb-dot { background: #f87171; box-shadow: 0 0 10px #f87171; animation: none; }
.passport-status-big.pending .passport-sb-dot { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 6px #4ade80; }
  50%       { box-shadow: 0 0 14px #4ade80, 0 0 24px rgba(74,222,128,0.3); }
}

.passport-sb-main { font-size: 20px; font-weight: 800; color: #4ade80; font-family: 'Montserrat',sans-serif; line-height:1.1; }
.passport-status-big.expired .passport-sb-main { color: #f87171; }
.passport-status-big.pending .passport-sb-main { color: #fbbf24; }
.passport-sb-sub  { font-size: 12px; color: rgba(196,227,245,0.6); margin-top: 2px; }

/* Meta grid */
.passport-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.passport-meta-item {
  background: rgba(43,76,111,0.3);
  border: 1px solid rgba(196,227,245,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.passport-mi-label { font-size: 11px; color: rgba(196,227,245,0.5); margin-bottom: 4px; }
.passport-mi-value { font-size: 14px; font-weight: 700; color: #C4E3F5; }
.passport-mi-value.license-date { color: #4ade80; }

/* Action buttons */
.passport-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.passport-btn-primary, .passport-btn-secondary, .passport-btn-info {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
}
.passport-btn-primary {
  background: linear-gradient(135deg, #0D2843, #2B4C6F);
  color: #C4E3F5;
  border: 1.5px solid rgba(196,227,245,0.25);
}
.passport-btn-primary:hover { background: #4A7396; box-shadow: 0 4px 12px rgba(74,115,150,0.4); }
.passport-btn-secondary {
  background: rgba(43,76,111,0.4);
  color: #C4E3F5;
  border: 1.5px solid rgba(196,227,245,0.15);
}
.passport-btn-secondary:hover { background: rgba(74,115,150,0.4); border-color: rgba(196,227,245,0.3); }
.passport-btn-info {
  background: transparent;
  color: rgba(196,227,245,0.6);
  border: 1.5px solid rgba(196,227,245,0.1);
}
.passport-btn-info:hover { border-color: rgba(196,227,245,0.3); color: #C4E3F5; }

/* QR link block */
.passport-qr-link-block {
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(196,227,245,0.1);
  border-radius: 10px;
  padding: 12px 14px;
}
.passport-qrl-label { font-size: 11px; color: rgba(196,227,245,0.5); margin-bottom: 6px; }
.passport-qrl-url {
  font-size: 12px;
  font-family: monospace;
  color: #82AAC8;
  word-break: break-all;
  margin-bottom: 8px;
  min-height: 16px;
}
.passport-qrl-copy {
  padding: 6px 12px;
  background: rgba(114,156,189,0.15);
  border: 1px solid rgba(114,156,189,0.25);
  border-radius: 6px;
  color: #82AAC8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.passport-qrl-copy:hover { background: rgba(114,156,189,0.25); color: #C4E3F5; }

.passport-copyright {
  font-size: 11px;
  color: rgba(196,227,245,0.25);
  text-align: center;
  padding-top: .5rem;
}

/* ── QUICK LINK ICON ── */
.db-ql-icon.passport { background: rgba(114,156,189,0.15); }
.db-ql-icon.passport i { color: #82AAC8; }

/* ── NAV BADGE for passport ── */
.passport-badge {
  background: rgba(114,156,189,0.2);
  color: #82AAC8;
  border: 1px solid rgba(114,156,189,0.3);
}

/* ── SCAN LOG ── */
.passport-scan-log { padding: .5rem 0; min-height: 80px; }
.passport-scan-empty {
  text-align: center;
  color: rgba(196,227,245,0.35);
  font-size: 14px;
  padding: 1.5rem;
}
.passport-scan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(196,227,245,0.06);
}
.passport-scan-row:last-child { border-bottom: none; }
.passport-scan-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(74,115,150,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #729CBD;
  font-size: 13px;
  flex-shrink: 0;
}
.passport-scan-body { flex: 1; }
.passport-scan-time { font-size: 13px; font-weight: 600; color: #C4E3F5; }
.passport-scan-device { font-size: 11px; color: rgba(196,227,245,0.5); margin-top: 2px; }

/* ── PARTICIPATION HISTORY ── */
.passport-history-grid { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 0; }
.passport-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(43,76,111,0.2);
  border-radius: 10px;
  border: 1px solid rgba(196,227,245,0.06);
  transition: background 0.2s;
}
.passport-history-item:hover { background: rgba(43,76,111,0.35); }
.phi-num { font-size: 20px; font-weight: 900; color: rgba(196,227,245,0.15); font-family: 'Montserrat',sans-serif; width: 32px; flex-shrink: 0; }
.phi-body { flex: 1; min-width: 0; }
.phi-name { font-size: 14px; font-weight: 600; color: #C4E3F5; margin-bottom: 3px; }
.phi-date { font-size: 12px; color: rgba(196,227,245,0.5); }
.phi-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.phi-badge.registered { background: rgba(74,115,150,0.2); color: #82AAC8; border: 1px solid rgba(74,115,150,0.3); }
.phi-badge.upcoming   { background: rgba(196,227,245,0.1); color: #C4E3F5; border: 1px solid rgba(196,227,245,0.2); }
.phi-badge.open       { background: rgba(74,222,128,0.1);  color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.phi-badge.done       { background: rgba(128,128,128,0.15); color: #808080; border: 1px solid rgba(128,128,128,0.25); }

/* ── SECURITY BLOCK ── */
.passport-security-block {
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(196,227,245,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.passport-sec-title {
  font-size: 15px;
  font-weight: 700;
  color: #C4E3F5;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.passport-sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) { .passport-sec-grid { grid-template-columns: 1fr; } }
.passport-sec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(43,76,111,0.2);
  border-radius: 10px;
  border: 1px solid rgba(196,227,245,0.06);
}
.passport-sec-item > i {
  width: 32px;
  height: 32px;
  background: rgba(196,227,245,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #82AAC8;
  font-size: 14px;
  flex-shrink: 0;
}
.passport-sec-item strong { font-size: 13px; color: #C4E3F5; font-weight: 700; display: block; margin-bottom: 4px; }
.passport-sec-item p { font-size: 12px; color: rgba(196,227,245,0.5); margin: 0; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   PASSPORT ENTRY MODAL (fullscreen for showing at entry)
═══════════════════════════════════════════════════════════ */
.passport-entry-modal {
  position: fixed;
  inset: 0;
  background: #0a1e33;
  z-index: 10000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pem-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(196,227,245,0.1);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #C4E3F5;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pem-close:hover { background: rgba(196,227,245,0.2); }
.pem-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.pem-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(196,227,245,0.5);
  font-family: 'Montserrat', sans-serif;
}
.pem-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 22px;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 2px;
}
.pem-status.active  { background: rgba(74,222,128,0.15); color: #4ade80; border: 2px solid rgba(74,222,128,0.4); box-shadow: 0 0 30px rgba(74,222,128,0.2); }
.pem-status.expired { background: rgba(248,113,113,0.15); color: #f87171; border: 2px solid rgba(248,113,113,0.4); box-shadow: 0 0 30px rgba(248,113,113,0.2); }
.pem-status.pending { background: rgba(251,191,36,0.15);  color: #fbbf24; border: 2px solid rgba(251,191,36,0.4);  box-shadow: 0 0 30px rgba(251,191,36,0.2);  }

.pem-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(114,156,189,0.15);
  border: 3px solid rgba(196,227,245,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #C4E3F5;
  font-family: 'Montserrat', sans-serif;
}
.pem-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
}
.pem-mid {
  font-size: 16px;
  font-weight: 600;
  color: #82AAC8;
  letter-spacing: 1.5px;
  font-family: 'Montserrat', sans-serif;
}
.pem-qr-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.pem-qr-grid {
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pem-qr-label {
  font-size: 11px;
  font-weight: 600;
  color: #0D2843;
  letter-spacing: 1px;
}
.pem-valid {
  font-size: 14px;
  color: rgba(196,227,245,0.6);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pem-footer {
  font-size: 10px;
  color: rgba(196,227,245,0.2);
  letter-spacing: 1px;
  margin-top: auto;
}

/* ── MOBILE PASSPORT COMPACT ── */
@media (max-width: 600px) {
  .passport-card { width: 100%; max-width: 340px; }
  .passport-meta-grid { grid-template-columns: 1fr; }
  .passport-actions { flex-direction: column; }
  .passport-btn-primary, .passport-btn-secondary, .passport-btn-info { flex: unset; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   LEAGUES SYSTEM — AHF v6.0
   © ТОО «MIG Capital Group»
   ═══════════════════════════════════════════════════════════════ */

/* ── LEAGUES HERO ─────────────────────────────────────────── */
.leagues-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0 60px;
}
.leagues-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #06111c 0%, #0d2843 50%, #1a3a5c 100%);
}
.leagues-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,175,55,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.leagues-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.leagues-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.3);
  color: #d4af37;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.leagues-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.leagues-accent { color: #d4af37; }
.leagues-hero-desc {
  font-size: 1.05rem;
  color: rgba(196,227,245,0.7);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.leagues-hero-levels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  gap: 12px;
}
.lhl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 24px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 130px;
}
.lhl-item.gold   { border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.08); }
.lhl-item.silver { border-color: rgba(192,192,192,0.4); background: rgba(192,192,192,0.08); }
.lhl-item.bronze { border-color: rgba(205,127,50,0.4); background: rgba(205,127,50,0.08); }
.lhl-badge { font-size: 1.8rem; }
.lhl-name  { font-size: 0.8rem; font-weight: 700; color: #fff; letter-spacing: 1px; }
.lhl-tag   { font-size: 0.65rem; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,0.45); }
.lhl-arrow { font-size: 1.1rem; color: rgba(255,255,255,0.3); align-self: center; }

/* ── LEAGUES CARDS SECTION ────────────────────────────────── */
.leagues-cards-section {
  padding: 80px 0;
  background: #f0f4f8;
}
.leagues-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.league-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform 0.25s, box-shadow 0.25s;
}
.league-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.league-card-gold   { border-color: rgba(212,175,55,0.3); }
.league-card-silver { border-color: rgba(150,150,160,0.3); }
.league-card-bronze { border-color: rgba(180,100,50,0.3); }
.lc-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  opacity: 0.07;
  pointer-events: none;
}
.league-card-gold   .lc-glow { background: radial-gradient(circle, #d4af37 0%, transparent 70%); }
.league-card-silver .lc-glow { background: radial-gradient(circle, #c0c0c0 0%, transparent 70%); }
.league-card-bronze .lc-glow { background: radial-gradient(circle, #cd7f32 0%, transparent 70%); }
.lc-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.lc-badge { font-size: 2.2rem; line-height: 1; }
.lc-header-text { flex: 1; }
.lc-tag  { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #8A9BB5; margin-bottom: 2px; }
.lc-name { font-size: 1.15rem; font-weight: 800; color: #0D2843; font-family: 'Montserrat', sans-serif; }
.lc-sub  { font-size: 0.75rem; color: #8A9BB5; }
.lc-level {
  background: #f0f4f8;
  color: #0D2843;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}
.lc-desc {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 20px;
}
.lc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f7f9fc;
  border-radius: 12px;
}
.lc-stat-val { font-size: 1.1rem; font-weight: 800; color: #0D2843; }
.lc-stat-lbl { font-size: 0.7rem; color: #8A9BB5; font-weight: 500; margin-top: 2px; }
.lc-perks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.lc-perk  { font-size: 0.82rem; color: #2d4a6e; display: flex; align-items: center; gap: 8px; }
.lc-perk i { color: #4caf50; font-size: 0.75rem; }
.lc-req {
  font-size: 0.78rem;
  color: #7a8fa6;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #f0f4f8;
  border-radius: 8px;
  margin-bottom: 20px;
}
.lc-req i { color: #4a90a4; }
.lc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.lc-btn-gold   { background: linear-gradient(135deg, #c9a227, #e8c547); color: #0D2843; }
.lc-btn-silver { background: linear-gradient(135deg, #8a8a9a, #c0c0c8); color: #fff; }
.lc-btn-bronze { background: linear-gradient(135deg, #a0622a, #cd9040); color: #fff; }
.lc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

/* ── LEAGUES PROMOTION DIAGRAM ────────────────────────────── */
.leagues-promo-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
.leagues-promo-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #06111c 0%, #0d2843 100%);
}
.leagues-promotion-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 40px auto;
  max-width: 560px;
}
.lpd-league {
  width: 100%;
  padding: 20px 28px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lpd-league.gold   { background: rgba(212,175,55,0.15); border: 2px solid rgba(212,175,55,0.4); }
.lpd-league.silver { background: rgba(192,192,192,0.1); border: 2px solid rgba(192,192,192,0.35); }
.lpd-league.bronze { background: rgba(205,127,50,0.1); border: 2px solid rgba(205,127,50,0.35); }
.lpd-icon  { font-size: 2rem; }
.lpd-name  { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: 2px; font-family: 'Montserrat', sans-serif; }
.lpd-info  { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.lpd-arrows {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 400px;
  margin: 8px 0;
}
.lpd-arrow {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  border-radius: 10px;
}
.lpd-arrow.up   { background: rgba(76,175,80,0.12); color: #66bb6a; }
.lpd-arrow.down { background: rgba(244,67,54,0.1); color: #ef5350; }
.lpd-arrow i    { font-size: 1.1rem; }
.lpd-divider    { width: 1px; background: rgba(255,255,255,0.08); margin: 0 6px; }
.leagues-promo-rules {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}
.lpr-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 22px;
  max-width: 220px;
}
.lpr-item i     { font-size: 1.4rem; color: #d4af37; margin-top: 2px; flex-shrink: 0; }
.lpr-item strong { display: block; color: #fff; font-size: 0.9rem; margin-bottom: 4px; }
.lpr-item p      { color: rgba(255,255,255,0.5); font-size: 0.8rem; margin: 0; }

/* ── LEAGUES WHY SECTION ─────────────────────────────────── */
.leagues-why-section {
  padding: 80px 0;
  background: #f7f9fc;
}
.leagues-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.lw-item {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: box-shadow 0.2s;
}
.lw-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.lw-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0D2843, #1a4068);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.25rem;
  color: #d4af37;
}
.lw-title { font-size: 0.9rem; font-weight: 700; color: #0D2843; margin-bottom: 6px; }
.lw-desc  { font-size: 0.8rem; color: #6b7a8d; line-height: 1.55; }

/* ── LEAGUES CTA SECTION ─────────────────────────────────── */
.leagues-cta-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
.leagues-cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0D2843 0%, #0a1f35 50%, #1a3a5c 100%);
}
.bronze-cta .leagues-cta-bg {
  background: linear-gradient(135deg, #1a0d05 0%, #2a1808 50%, #3a2412 100%);
}
.leagues-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.leagues-cta-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  font-family: 'Montserrat', sans-serif;
}
.leagues-cta-desc {
  color: rgba(196,227,245,0.65);
  font-size: 1rem;
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.leagues-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.leagues-cta-legal {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 1px;
}
.btn-gold         { background: linear-gradient(135deg, #c9a227, #e8c547); color: #0D2843; font-weight: 700; }
.btn-silver       { background: linear-gradient(135deg, #8a8a9a, #c0c0c8); color: #fff; font-weight: 700; }
.btn-bronze       { background: linear-gradient(135deg, #a0622a, #cd9040); color: #fff; font-weight: 700; }
.btn-steel        { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-weight: 600; }
.btn-steel:hover  { background: rgba(255,255,255,0.18); }
.btn-outline-light{ border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); background: transparent; font-weight: 600; }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }
.btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }

/* ── LEAGUE PAGE HERO (individual league) ─────────────────── */
.league-page-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  overflow: hidden;
}
.gold-hero   .lph-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0d1f0a 0%, #1a3a10 40%, #2a5018 100%); }
.silver-hero .lph-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0a1520 0%, #0d2843 40%, #1e3a58 100%); }
.bronze-hero .lph-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #1a0d05 0%, #2a1808 40%, #3a2412 100%); }
.lph-inner {
  position: relative;
  z-index: 2;
}
.lph-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s;
}
.lph-back:hover { color: #fff; }
.lph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.lph-badge.gold   { background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.4); color: #d4af37; }
.lph-badge.silver { background: rgba(192,192,192,0.1); border: 1px solid rgba(192,192,192,0.35); color: #c0c0c0; }
.lph-badge.bronze { background: rgba(205,127,50,0.1); border: 1px solid rgba(205,127,50,0.35); color: #cd7f32; }
.lph-title {
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}
.lph-sub {
  font-size: 0.9rem;
  color: rgba(196,227,245,0.5);
  margin-bottom: 20px;
}
.lph-desc {
  font-size: 1rem;
  color: rgba(196,227,245,0.7);
  max-width: 600px;
  line-height: 1.65;
  margin-bottom: 32px;
}
.lph-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.lph-stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; line-height: 1; }
.lph-stat-lbl { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 4px; }

/* ── LEAGUE TABLE SECTION ─────────────────────────────────── */
.league-table-section { padding: 60px 0; background: #f0f4f8; }
.league-content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .league-content-grid { grid-template-columns: 1fr; }
}
.league-main-col, .league-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.league-card-block {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}
.lcb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.lcb-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0D2843;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lcb-header h3 i { color: #4a90a4; }
.lcb-season {
  font-size: 0.75rem;
  color: #8A9BB5;
  background: #f0f4f8;
  padding: 4px 10px;
  border-radius: 20px;
}

/* League Table */
.league-table-wrap { overflow-x: auto; }
.league-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.league-table thead th {
  background: #f7f9fc;
  color: #6b7a8d;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 10px 8px;
  text-align: center;
  white-space: nowrap;
}
.league-table thead th.lt-team { text-align: left; }
.league-table tbody td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #f0f4f8;
  color: #2d4a6e;
}
.league-table tbody tr:hover { background: #f7f9fc; }
.lt-pos  { width: 36px; }
.lt-team { text-align: left !important; }
.lt-pts  { font-weight: 700; color: #0D2843 !important; }
.lt-team-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0D2843, #1a4068);
  color: #d4af37;
  font-size: 0.65rem;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}
.lt-team-logo.silver-logo { background: linear-gradient(135deg, #3a4a5a, #667788); }
.lt-team-logo.bronze-logo { background: linear-gradient(135deg, #3a2010, #6a4020); }
.lt-team { display: flex !important; align-items: center; }
.lt-pos-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #f0f4f8;
  color: #4a5568;
}
.lt-pos-num.gold       { background: rgba(212,175,55,0.15); color: #b8921a; }
.lt-pos-num.silver-num { background: rgba(150,160,180,0.15); color: #5a7090; }
.lt-pos-num.bronze-num { background: rgba(180,110,60,0.15); color: #8a4820; }
.lt-pos-num.red        { background: rgba(244,67,54,0.1); color: #e53935; }
.lt-pos-num.gray-num   { background: rgba(150,150,160,0.1); color: #888; }
.tr-promote    { background: rgba(76,175,80,0.04) !important; }
.tr-relegate   { background: rgba(244,67,54,0.04) !important; }
.tr-relegate-light { background: rgba(255,152,0,0.04) !important; }
.td-win   { color: #388e3c !important; font-weight: 600; }
.td-lose  { color: #d32f2f !important; font-weight: 600; }
.td-goals { font-size: 0.8rem; color: #546e7a !important; white-space: nowrap; }
.trend-up   { color: #4caf50; }
.trend-down { color: #f44336; }
.trend-same { color: #90a4ae; }
.league-table-legend {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ltl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #8A9BB5;
}
.ltl-item span {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ltl-item.promote span        { background: rgba(76,175,80,0.4); }
.ltl-item.promote-silver span { background: rgba(150,160,180,0.4); }
.ltl-item.promote-bronze span { background: rgba(180,110,60,0.35); }
.ltl-item.relegate span       { background: rgba(244,67,54,0.4); }
.ltl-item.relegate-light span { background: rgba(255,152,0,0.35); }

/* League Matches */
.league-matches-list { display: flex; flex-direction: column; gap: 12px; }
.lm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
}
.lm-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.lm-day   { font-size: 1.2rem; font-weight: 800; color: #0D2843; line-height: 1; }
.lm-month { font-size: 0.7rem; color: #8A9BB5; text-transform: lowercase; }
.lm-time  { font-size: 0.7rem; color: #4a90a4; font-weight: 600; margin-top: 2px; }
.lm-teams {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lm-home, .lm-away { font-size: 0.85rem; font-weight: 600; color: #2d4a6e; flex: 1; }
.lm-away { text-align: right; }
.lm-vs {
  font-size: 0.7rem;
  font-weight: 800;
  color: #8A9BB5;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.lm-venue {
  font-size: 0.72rem;
  color: #8A9BB5;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* League Sidebar Info */
.league-side-info { display: flex; flex-direction: column; gap: 10px; }
.lsi-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f7f9fc;
  border-radius: 8px;
  font-size: 0.82rem;
}
.lsi-item span  { color: #8A9BB5; }
.lsi-item strong { color: #0D2843; }
.gold-text   { color: #b8921a !important; }
.silver-text { color: #7a8fa6 !important; }
.bronze-text { color: #9a5a20 !important; }

/* League Scorers */
.league-scorers { display: flex; flex-direction: column; gap: 8px; }
.ls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: #f7f9fc;
}
.ls-pos {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.ls-pos.gold   { background: rgba(212,175,55,0.2); color: #b8921a; }
.ls-pos.silver { background: rgba(150,160,180,0.2); color: #5a7090; }
.ls-pos.bronze { background: rgba(180,110,60,0.2); color: #8a4820; }
.ls-body { flex: 1; }
.ls-name { font-size: 0.82rem; font-weight: 600; color: #0D2843; }
.ls-team { font-size: 0.72rem; color: #8A9BB5; }
.ls-goals { font-size: 1.1rem; font-weight: 800; color: #0D2843; }

/* Promo Block */
.promo-block {
  border-top: 3px solid transparent;
}
.gold-block   { border-top-color: rgba(212,175,55,0.5); }
.silver-block { border-top-color: rgba(150,160,180,0.5); }
.bronze-block { border-top-color: rgba(180,110,60,0.5); }
.promo-info { display: flex; flex-direction: column; gap: 10px; }
.pi-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
}
.pi-row.up      { background: rgba(76,175,80,0.08); }
.pi-row.down    { background: rgba(244,67,54,0.06); }
.pi-row.neutral { background: rgba(100,120,150,0.06); }
.pi-row > i { font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.pi-row.up      > i { color: #4caf50; }
.pi-row.down    > i { color: #ef5350; }
.pi-row.neutral > i { color: #8A9BB5; }
.pi-row strong { display: block; font-size: 0.85rem; color: #0D2843; margin-bottom: 2px; }
.pi-row p { font-size: 0.78rem; color: #6b7a8d; margin: 0; }

/* League Requirements */
.league-req-list { display: flex; flex-direction: column; gap: 8px; }
.lrl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #2d4a6e;
  padding: 6px 0;
  border-bottom: 1px solid #f0f4f8;
}
.lrl-item i { color: #4caf50; font-size: 0.75rem; flex-shrink: 0; }
.lrl-item.text-muted { color: #8A9BB5; }
.lrl-item.text-muted i { color: #8A9BB5; }
.mt-12 { margin-top: 12px; }
.mt-8  { margin-top: 8px; }

/* Small sidebar buttons */
.btn-sm-outline, .btn-sm-silver, .btn-sm-bronze {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-sm-outline { border: 1px solid #d0dae8; color: #4a90a4; background: transparent; }
.btn-sm-outline:hover { background: #f0f4f8; }
.btn-sm-silver { background: rgba(150,160,180,0.15); color: #5a7090; border: 1px solid rgba(150,160,180,0.3); }
.btn-sm-bronze { background: rgba(180,110,60,0.12); color: #8a4820; border: 1px solid rgba(180,110,60,0.25); }
.btn-sm-silver:hover, .btn-sm-bronze:hover { opacity: 0.8; }

/* CTA Side block */
.league-cta-side {
  background: linear-gradient(135deg, #0D2843, #1a4068) !important;
  border-color: transparent !important;
}
.league-cta-side h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.league-cta-side p {
  font-size: 0.82rem;
  color: rgba(196,227,245,0.6);
  margin-bottom: 16px;
}
.btn-silver-full, .btn-bronze-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-silver-full { background: linear-gradient(135deg, #8a8a9a, #c0c0c8); color: #fff; }
.btn-bronze-full { background: linear-gradient(135deg, #a0622a, #cd9040); color: #fff; }
.btn-silver-full:hover, .btn-bronze-full:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.btn-outline-steel-sm, .btn-outline-gold-sm, .btn-outline-silver-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(196,227,245,0.7);
  background: transparent;
}
.btn-outline-steel-sm:hover, .btn-outline-gold-sm:hover, .btn-outline-silver-sm:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* League About Text */
.league-about-text p {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.65;
  margin-bottom: 12px;
}
.la-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.la-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #2d4a6e;
  background: #f7f9fc;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
}
.la-feat i { color: #4a90a4; font-size: 0.8rem; flex-shrink: 0; }

/* League Steps */
.league-steps { display: flex; flex-direction: column; gap: 14px; }
.ls-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ls-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0D2843, #1a4068);
  color: #d4af37;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ls-step-title { font-size: 0.9rem; font-weight: 700; color: #0D2843; margin-bottom: 4px; }
.ls-step-desc  { font-size: 0.8rem; color: #6b7a8d; line-height: 1.5; }
.ls-step-desc a { color: #4a90a4; }

/* ── SECTION HEADER ─────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 8px;
}
.section-header.light .section-title { color: #fff; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,144,164,0.1);
  border: 1px solid rgba(74,144,164,0.25);
  color: #4a90a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.section-tag.light {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.3);
  color: #d4af37;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #0D2843;
  margin-bottom: 12px;
  font-family: 'Montserrat', sans-serif;
}
.section-desc {
  color: #6b7a8d;
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .leagues-cards-grid { grid-template-columns: 1fr; }
  .leagues-hero { min-height: auto; padding: 80px 0 48px; }
  .leagues-hero-levels { gap: 8px; }
  .lhl-item { min-width: 100px; padding: 10px 16px; }
  .lpd-arrows { flex-direction: column; }
  .lpd-divider { width: 40px; height: 1px; margin: 4px 0; }
  .la-features { grid-template-columns: 1fr; }
  .leagues-cta-btns { flex-direction: column; align-items: center; }
  .btn-lg { width: 100%; max-width: 300px; justify-content: center; }
  .lph-stats { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SUPER LEAGUE — HERO with athlete photo background
   ═══════════════════════════════════════════════════════════════ */
.sl-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}
.sl-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(8,18,34,0.97) 0%,
      rgba(13,40,67,0.88) 45%,
      rgba(13,40,67,0.55) 70%,
      rgba(13,40,67,0.20) 100%);
  z-index: 1;
}
/* Athlete silhouette (decorative right side) */
.sl-hero::after {
  content: '';
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 320px;
  height: 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 520'%3E%3Cellipse cx='160' cy='130' rx='55' ry='60' fill='rgba(114,156,189,0.08)'/%3E%3Crect x='95' y='185' width='130' height='180' rx='30' fill='rgba(114,156,189,0.06)'/%3E%3Crect x='70' y='210' width='55' height='130' rx='22' fill='rgba(114,156,189,0.05)'/%3E%3Crect x='195' y='210' width='55' height='130' rx='22' fill='rgba(114,156,189,0.05)'/%3E%3Crect x='105' y='360' width='50' height='140' rx='20' fill='rgba(114,156,189,0.05)'/%3E%3Crect x='165' y='360' width='50' height='140' rx='20' fill='rgba(114,156,189,0.05)'/%3E%3C/svg%3E")
    center bottom / contain no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
}
.sl-hero-inner {
  position: relative;
  z-index: 2;
}
.sl-title { color: #fff; }
.sl-title-accent {
  color: #729CBD;
  display: block;
  font-size: 0.88em;
  letter-spacing: 6px;
}
.sl-desc { color: rgba(196,227,245,0.72); max-width: 560px; }
.sl-stats { display: flex; gap: 28px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   ROSTER SECTION — player cards grid
   ═══════════════════════════════════════════════════════════════ */
.sl-roster-section {
  padding: 72px 0;
  background: linear-gradient(180deg, #f4f7fb 0%, #e8eef6 100%);
}

/* Section header */
.sl-section-header {
  text-align: center;
  margin-bottom: 48px;
}
.sl-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,40,67,0.06);
  border: 1px solid rgba(13,40,67,0.14);
  color: #2B4C6F;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.sl-section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #0D2843;
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
}
.sl-section-desc {
  font-size: 0.94rem;
  color: #6b7a8d;
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* Filters */
.sl-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sl-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px solid #d0dae8;
  background: #fff;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.22s;
  font-family: inherit;
  white-space: nowrap;
}
.sl-filter-btn:hover {
  border-color: #729CBD;
  color: #0D2843;
  background: rgba(114,156,189,0.07);
  transform: translateY(-1px);
}
.sl-filter-btn.active {
  background: linear-gradient(135deg, #0D2843, #2B4C6F);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(13,40,67,0.28);
}
.sl-filter-btn i { font-size: 0.8rem; }

/* ─── PLAYER CARDS GRID ──────────────────────────────────────── */
.sl-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 24px;
}

/* ─── SINGLE PLAYER CARD ─────────────────────────────────────── */
.sl-player-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
  cursor: default;
  position: relative;
}
.sl-player-card:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 20px 48px rgba(13,40,67,0.18), 0 4px 12px rgba(13,40,67,0.10);
  border-color: #729CBD;
  z-index: 2;
}
.sl-card-gk {
  border-color: rgba(168,85,247,0.35);
  background: #fdf8ff;
}
.sl-card-gk:hover { border-color: #a855f7; box-shadow: 0 20px 48px rgba(168,85,247,0.12), 0 4px 12px rgba(168,85,247,0.10); }
.sl-card-pending { opacity: 0.82; }

/* Photo block — aspect 4:5 */
.sl-card-photo {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.sl-card-placeholder {
  width: 100%;
  height: 100%;
  /* Graphene Navy gradient */
  background: linear-gradient(160deg,
    #0c1825 0%,
    #0D2843 30%,
    #152f52 60%,
    #1a3a62 80%,
    #0a1e35 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
/* Subtle grid pattern overlay */
.sl-card-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(114,156,189,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,156,189,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Radial glow center */
.sl-card-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 40%, rgba(114,156,189,0.13) 0%, transparent 70%);
}
.sl-card-initials {
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(196,227,245,0.80);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
  line-height: 1;
}
.sl-card-ahf-logo {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(114,156,189,0.45);
  position: relative;
  z-index: 1;
}

/* Player number badge */
.sl-card-number {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  font-family: 'Montserrat', sans-serif;
  z-index: 2;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  /* Default AHF Blue (overridden by inline style per position) */
  background: #2B4C6F;
}

/* Status badge */
.sl-card-status-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 2;
}
.sl-card-status-badge.pending {
  background: rgba(255,193,7,0.2);
  color: #f59e0b;
  border: 1px solid rgba(255,193,7,0.35);
}

/* GK badge */
.sl-card-gk-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(168,85,247,0.4);
}

/* Card body */
.sl-card-body {
  padding: 16px 14px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0D2843;
  text-align: center;
  line-height: 1.3;
  font-family: 'Montserrat', sans-serif;
}
.sl-card-pos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.sl-card-pos-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.sl-card-pos-label {
  font-size: 0.72rem;
  color: #8A9BB5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

/* Mini stats */
.sl-card-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid #f0f4f8;
  border-bottom: 1px solid #f0f4f8;
}
.sl-cs { text-align: center; }
.sl-cs-val { font-size: 1rem; font-weight: 800; color: #0D2843; line-height: 1; }
.sl-cs-lbl { font-size: 0.64rem; color: #8A9BB5; margin-top: 2px; }

/* License ID row */
.sl-card-license {
  font-size: 0.7rem;
  color: #8A9BB5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.sl-card-license i { color: #4a90a4; font-size: 0.68rem; }

/* Sport title under name */
.sl-card-sport-title {
  font-size: 0.68rem;
  color: #d4af37;
  font-weight: 600;
  text-align: center;
  font-style: italic;
  line-height: 1.3;
  margin-top: -4px;
}

/* Staff badge */
.sl-card-staff-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #729CBD, #4a7a9b);
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 1px;
  z-index: 2;
}

/* Staff card border */
.sl-card-staff {
  border-color: rgba(114,156,189,0.4);
  background: #f8fbff;
}
.sl-card-staff:hover {
  border-color: #729CBD;
  box-shadow: 0 20px 48px rgba(114,156,189,0.15), 0 4px 12px rgba(114,156,189,0.12);
}

/* Achievements block on card */
.sl-card-achievements {
  border-top: 1px solid #f0f4f8;
  padding-top: 8px;
  margin-top: 2px;
}
.sl-card-ach-title {
  font-size: 0.67rem;
  font-weight: 700;
  color: #0D2843;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sl-card-ach-title i {
  color: #d4af37;
  font-size: 0.65rem;
}
.sl-card-ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sl-card-ach-item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 0.63rem;
  color: #4a5568;
  line-height: 1.35;
}
.sl-card-ach-item i {
  color: #d4af37;
  font-size: 0.6rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.sl-card-ach-item span {
  flex: 1;
}
.sl-card-ach-more {
  font-size: 0.62rem;
  color: #729CBD;
  font-style: italic;
  padding-top: 2px;
  padding-left: 14px;
}

/* Profile button */
.sl-card-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #0D2843, #2B4C6F);
  color: #C4E3F5;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: all 0.22s;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sl-player-card:hover .sl-card-profile-btn {
  background: linear-gradient(135deg, #1a3a62, #2B4C6F);
  color: #fff;
}
.sl-card-profile-btn i { font-size: 0.82rem; }

/* No results */
.sl-no-results {
  text-align: center;
  padding: 60px 20px;
  color: #8A9BB5;
}
.sl-no-results i { font-size: 2.5rem; margin-bottom: 14px; display: block; }
.sl-no-results p { font-size: 0.95rem; }

/* ─── NOTE CARD ──────────────────────────────────────────────── */
.sl-note-section { padding: 0 0 48px; background: linear-gradient(180deg, #e8eef6 0%, #f4f7fb 100%); }
.sl-note-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #4a90a4;
  border-radius: 14px;
  padding: 20px 24px;
}
.sl-note-icon { font-size: 1.3rem; color: #4a90a4; flex-shrink: 0; margin-top: 2px; }
.sl-note-body { flex: 1; }
.sl-note-title { font-size: 0.9rem; font-weight: 700; color: #0D2843; margin-bottom: 4px; }
.sl-note-text  { font-size: 0.82rem; color: #6b7a8d; line-height: 1.55; }
.sl-note-text strong { color: #0D2843; }
.sl-note-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #4a90a4;
  background: rgba(74,144,164,0.08);
  border: 1px solid rgba(74,144,164,0.2);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  align-self: center;
}

/* Positions legend */
.sl-positions-legend { display: flex; flex-direction: column; gap: 8px; }
.sl-pos-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f4f7fb;
}
.sl-pos-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  min-width: 42px;
  text-align: center;
}
.sl-pos-name { font-size: 0.82rem; color: #4a5568; }

/* ═══════════════════════════════════════════════════════════════
   PLAYER PROFILE PAGE  (pp- prefix)
   ═══════════════════════════════════════════════════════════════ */

/* Loading */
.pp-loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fb;
}
.pp-loading-inner { text-align: center; }
.pp-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(13,40,67,0.12);
  border-top-color: #4a90a4;
  border-radius: 50%;
  animation: ppSpin 0.9s linear infinite;
  margin: 0 auto 16px;
}
@keyframes ppSpin { to { transform: rotate(360deg); } }
.pp-loading-text { font-size: 0.9rem; color: #6b7a8d; }

/* Error */
.pp-error { min-height: 500px; background: #f4f7fb; display: flex; align-items: center; }
.pp-error-inner { text-align: center; padding: 60px 20px; }
.pp-error-icon { font-size: 4rem; color: #cbd5e0; margin-bottom: 20px; }
.pp-error-inner h2 { font-size: 1.5rem; color: #0D2843; margin-bottom: 10px; }
.pp-error-inner p  { font-size: 0.95rem; color: #6b7a8d; margin-bottom: 28px; }

/* HERO */
.pp-hero {
  position: relative;
  background: linear-gradient(135deg, #061525 0%, #0D2843 50%, #1a3a5c 100%);
  padding: 100px 0 56px;
  overflow: hidden;
}
.pp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(114,156,189,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(13,40,67,0.8) 0%, transparent 60%);
}
/* Decorative hexagons */
.pp-hero::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background-image:
    repeating-linear-gradient(60deg, transparent, transparent 30px, rgba(114,156,189,0.04) 30px, rgba(114,156,189,0.04) 31px),
    repeating-linear-gradient(-60deg, transparent, transparent 30px, rgba(114,156,189,0.04) 30px, rgba(114,156,189,0.04) 31px);
  pointer-events: none;
}
.pp-hero-inner { position: relative; z-index: 2; }
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(196,227,245,0.55);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s;
}
.pp-back:hover { color: #fff; }
.pp-hero-content {
  display: flex;
  align-items: flex-end;
  gap: 36px;
}

/* Avatar */
.pp-avatar-wrap { position: relative; flex-shrink: 0; }
.pp-avatar {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: linear-gradient(160deg, #0c1825 0%, #0D2843 40%, #1a3a62 100%);
  border: 3px solid rgba(114,156,189,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(114,156,189,0.12), 0 8px 32px rgba(0,0,0,0.4);
}
.pp-avatar-initials {
  font-size: 2.8rem;
  font-weight: 900;
  color: rgba(196,227,245,0.75);
  font-family: 'Montserrat', sans-serif;
}
.pp-number-badge {
  position: absolute;
  bottom: -4px;
  right: -8px;
  font-size: 1rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #2B4C6F, #4a90a4);
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(13,40,67,0.4);
  border: 2px solid rgba(255,255,255,0.15);
}

/* Hero info */
.pp-hero-info { flex: 1; }
.pp-league-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #729CBD;
  border: 1px solid rgba(114,156,189,0.3);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
  background: rgba(114,156,189,0.08);
  text-transform: uppercase;
}
.pp-name {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.1;
  margin-bottom: 12px;
}
.pp-position-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pp-position-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  letter-spacing: 0.5px;
}
.pp-team {
  font-size: 0.88rem;
  color: rgba(196,227,245,0.55);
  font-weight: 500;
}
.pp-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pp-status-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}
.pp-status-badge.status-active  { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.3); }
.pp-status-badge.status-pending { background: rgba(255,193,7,0.15);  color: #f59e0b; border: 1px solid rgba(255,193,7,0.3);  }
.pp-status-badge.status-expired { background: rgba(244,67,54,0.12);  color: #ef5350; border: 1px solid rgba(244,67,54,0.28); }
.pp-license-id {
  font-size: 0.78rem;
  color: rgba(196,227,245,0.45);
  font-family: monospace;
  letter-spacing: 1px;
}
.pp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-qr-btn, .pp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.pp-qr-btn {
  background: rgba(114,156,189,0.15);
  border: 1px solid rgba(114,156,189,0.3);
  color: #C4E3F5;
}
.pp-qr-btn:hover { background: rgba(114,156,189,0.25); color: #fff; }
.pp-share-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(196,227,245,0.6);
}
.pp-share-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* Stats strip */
.pp-stats-strip {
  background: #0D2843;
  border-bottom: 1px solid rgba(114,156,189,0.18);
}
.pp-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 0;
}
.pp-stat-item {
  text-align: center;
  padding: 20px 32px;
  border-right: 1px solid rgba(114,156,189,0.12);
}
.pp-stat-item:last-child { border-right: none; }
.pp-stat-val { font-size: 1.9rem; font-weight: 900; color: #C4E3F5; line-height: 1; font-family: 'Montserrat', sans-serif; }
.pp-stat-lbl { font-size: 0.72rem; color: rgba(196,227,245,0.4); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }

/* Detail section */
.pp-detail-section { padding: 56px 0; background: #f4f7fb; }
.pp-detail-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.pp-detail-main { display: flex; flex-direction: column; gap: 24px; }
.pp-detail-side  { display: flex; flex-direction: column; gap: 20px; }

/* Cards */
.pp-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}
.pp-verify-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}
.pp-card-header {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0D2843;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f4f8;
}
.pp-card-header i { color: #4a90a4; }

/* Info grid */
.pp-info-grid { display: flex; flex-direction: column; gap: 0; }
.pp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  transition: background 0.15s;
}
.pp-info-row:hover { background: #f7f9fc; }
.pp-info-row span  { color: #8A9BB5; }
.pp-info-row strong { color: #0D2843; font-weight: 600; }

/* Digital Passport Card */
.pp-passport-card {
  background: linear-gradient(160deg, #061525 0%, #0D2843 40%, #112d4e 100%);
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(114,156,189,0.2);
  box-shadow: 0 8px 32px rgba(13,40,67,0.35);
  overflow: hidden;
  position: relative;
}
/* Subtle diagonal lines */
.pp-passport-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(114,156,189,0.025) 20px, rgba(114,156,189,0.025) 21px);
  pointer-events: none;
}
.pp-passport-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}
.pp-passport-logo { border-radius: 6px; flex-shrink: 0; }
.pp-passport-org { flex: 1; }
.pp-passport-org-name { font-size: 0.9rem; font-weight: 800; color: #fff; }
.pp-passport-org-sub  { font-size: 0.65rem; color: rgba(196,227,245,0.4); }
.pp-passport-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(196,227,245,0.5);
  border: 1px solid rgba(114,156,189,0.25);
  padding: 3px 8px;
  border-radius: 20px;
}
.pp-passport-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  position: relative;
}
.pp-passport-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(160deg, #112238, #1a3a62);
  border: 2px solid rgba(114,156,189,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-passport-initials {
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(196,227,245,0.7);
  font-family: 'Montserrat', sans-serif;
}
.pp-passport-meta { flex: 1; }
.pp-passport-name { font-size: 0.9rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.pp-passport-pos  { font-size: 0.72rem; color: rgba(196,227,245,0.5); }
.pp-passport-num  { font-size: 1rem; font-weight: 800; color: #729CBD; font-family: 'Montserrat', sans-serif; }
.pp-passport-fields { margin-bottom: 16px; position: relative; }
.pp-pf-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(114,156,189,0.1);
  font-size: 0.78rem;
}
.pp-pf-row:last-child { border-bottom: none; }
.pp-pf-row span   { color: rgba(196,227,245,0.4); }
.pp-pf-row strong { color: #C4E3F5; font-weight: 600; }

/* QR Section */
.pp-qr-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(114,156,189,0.15);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  transition: opacity 0.25s;
  position: relative;
}
.pp-qr-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 80px;
  margin: 0 auto 8px;
}
.qr-cell {
  aspect-ratio: 1;
  background: rgba(114,156,189,0.12);
  border-radius: 1px;
}
.qr-cell.qr-dark { background: rgba(196,227,245,0.75); }
.pp-qr-url {
  text-align: center;
  font-size: 0.62rem;
  color: rgba(196,227,245,0.35);
  font-family: monospace;
  letter-spacing: 0.5px;
}
.pp-passport-footer {
  font-size: 0.62rem;
  color: rgba(196,227,245,0.25);
  text-align: center;
  position: relative;
  padding-top: 12px;
  border-top: 1px solid rgba(114,156,189,0.1);
}

/* Verification */
.pp-verify-items { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.pp-verify-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: #8A9BB5;
  padding: 6px 0;
}
.pp-verify-item.ok { color: #2d7a4f; }
.pp-verify-item i { font-size: 0.88rem; flex-shrink: 0; }
.pp-verify-item.ok i { color: #4caf50; }
.pp-verify-time { font-size: 0.72rem; color: #b0b8c1; padding-top: 8px; border-top: 1px solid #f0f4f8; }

/* Primary action button */
.btn-primary-ahf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #0D2843, #2B4C6F);
  color: #C4E3F5;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-primary-ahf:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,40,67,0.3); }

/* ─── PLAYER PHOTO IN HERO ───────────────────────────────────── */
.pp-hero { position: relative; }
.pp-hero-photo-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 38%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
  pointer-events: none;
}
.pp-hero-photo-panel.has-photo {
  opacity: 0.55;
}
/* Sport title under player name */
.pp-sport-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #729CBD;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: none;
}

/* ─── ACHIEVEMENTS LIST ──────────────────────────────────────── */
.pp-achievements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pp-ach-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.83rem;
  color: #2d4a6e;
  line-height: 1.45;
  transition: background 0.15s;
}
.pp-ach-item:hover { background: #f7f9fc; }
.pp-ach-item i {
  color: #d4af37;
  font-size: 0.72rem;
  margin-top: 3px;
  flex-shrink: 0;
}
.pp-ach-item span { flex: 1; }

/* ─── PLAYER CARD — real photo ──────────────────────────────── */
.sl-card-photo img.sl-card-real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  display: block;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pp-detail-grid { grid-template-columns: 1fr; }
  .sl-players-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .pp-hero-photo-panel { width: 30%; }
}
@media (max-width: 768px) {
  .sl-hero { min-height: 420px; }
  .sl-hero::after { width: 160px; opacity: 0.4; }
  .pp-hero-content { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pp-avatar { width: 100px; height: 100px; }
  .pp-avatar-initials { font-size: 2rem; }
  .pp-stats-row { gap: 0; }
  .pp-stat-item { padding: 16px 18px; }
  .pp-stat-val  { font-size: 1.4rem; }
  .sl-filters { gap: 7px; }
  .sl-filter-btn { padding: 7px 14px; font-size: 0.75rem; }
  .sl-players-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; }
  .pp-hero-photo-panel { display: none; }
}
@media (max-width: 480px) {
  .sl-players-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sl-card-name { font-size: 0.78rem; }
  .sl-cs-val { font-size: 0.88rem; }
}

/* ═══════════════════════════════════════════════════════════════
   COMING SOON BLOCK — Высшая / Первая лига (состав не загружен)
   ═══════════════════════════════════════════════════════════════ */

.sl-coming-soon-block {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #f7f9fc;
  border: 2px dashed #c8d8ea;
  border-radius: 18px;
  padding: 36px 32px;
  margin: 0 0 24px;
  position: relative;
  overflow: hidden;
}
.sl-coming-soon-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 70%);
  pointer-events: none;
}

/* Gold variant (Высшая лига) */
.gold-coming-soon {
  border-color: #d4af3766;
  background: linear-gradient(135deg, #fffbf0 0%, #fdf6e3 100%);
}

/* Bronze variant (Первая лига) */
.bronze-coming-soon {
  border-color: #b8794466;
  background: linear-gradient(135deg, #fdf8f3 0%, #faf0e6 100%);
}

.sl-cs-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.gold-coming-soon  .sl-cs-icon { color: #c9962a; border: 2px solid #d4af3744; }
.bronze-coming-soon .sl-cs-icon { color: #b87944; border: 2px solid #b8794444; }

.sl-cs-body { flex: 1; min-width: 0; }
.sl-cs-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0D2843;
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
}
.sl-cs-desc {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sl-cs-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Gold buttons */
.btn-gold-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #c9962a, #e6b84a);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-gold-sm:hover { opacity: 0.88; }
.btn-outline-gold-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid #d4af37;
  color: #b8860b;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s;
}
.btn-outline-gold-sm:hover { background: #d4af3715; }

/* Bronze buttons */
.btn-bronze-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #b87944, #d4956a);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-bronze-sm:hover { opacity: 0.88; }
.btn-outline-bronze-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid #b87944;
  color: #8b5e30;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s;
}
.btn-outline-bronze-sm:hover { background: #b8794415; }

/* Badge */
.sl-cs-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gold-badge {
  background: linear-gradient(135deg, #d4af37, #e6b84a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(212,175,55,0.35);
}
.bronze-badge {
  background: linear-gradient(135deg, #b87944, #d4956a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(184,121,68,0.35);
}
.sl-cs-badge i { font-size: 1.4rem; }
.sl-cs-badge span { font-size: 0.65rem; }

/* Preview note */
.sl-preview-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(13,40,67,0.04);
  border-left: 3px solid #4a90a4;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.55;
  margin-bottom: 8px;
}
.sl-preview-note i {
  color: #4a90a4;
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.sl-preview-note a {
  color: #4a90a4;
  font-weight: 600;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .sl-coming-soon-block {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
    gap: 16px;
  }
  .sl-cs-actions { justify-content: center; }
  .sl-cs-badge { flex-direction: row; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .sl-cs-actions { flex-direction: column; align-items: stretch; }
  .btn-gold-sm, .btn-outline-gold-sm,
  .btn-bronze-sm, .btn-outline-bronze-sm {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT FLOW — ThankYou + Register + Membership
   ═══════════════════════════════════════════════════════════════ */

/* ─── Member ID Banner (ThankYou) ─── */
.ty-member-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #0D2843, #1a3a62);
  color: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 28px;
}
.ty-mb-icon { font-size: 2rem; color: #C4E3F5; flex-shrink: 0; }
.ty-mb-body { flex: 1; min-width: 0; }
.ty-mb-label { font-size: 0.75rem; color: rgba(196,227,245,0.7); text-transform: uppercase; letter-spacing: 1px; }
.ty-mb-id { font-size: 1.5rem; font-weight: 900; font-family: 'Montserrat', monospace; color: #C4E3F5; letter-spacing: 2px; }
.ty-mb-note { font-size: 0.78rem; color: rgba(196,227,245,0.6); margin-top: 2px; }
.ty-mb-copy {
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #C4E3F5;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}
.ty-mb-copy:hover { background: rgba(255,255,255,0.22); }

/* ─── ThankYou Payment Section ─── */
.ty-payment-section {
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(13,40,67,0.07);
}
.ty-pay-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0D2843;
  margin-bottom: 16px;
  font-family: 'Montserrat', sans-serif;
}
.ty-pay-title i { color: #4a90a4; }

.ty-pay-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ty-pay-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(74,144,164,0.1);
  color: #4a90a4;
  border: 1px solid rgba(74,144,164,0.3);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 700;
}
.ty-pay-amount {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0D2843;
  font-family: 'Montserrat', sans-serif;
}

/* Назначение платежа */
.ty-pay-purpose {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #4a5568;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ty-pay-purpose i { color: #d4af37; flex-shrink: 0; }
.ty-copy-small {
  background: none;
  border: none;
  color: #4a90a4;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ty-copy-small:hover { background: rgba(74,144,164,0.1); }

/* ─── Banks Grid (ThankYou) ─── */
.ty-banks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.ty-bank-card {
  border-radius: 12px;
  padding: 18px 16px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ty-bank-card.kaspi-card {
  border-color: #ffcdd2;
  background: linear-gradient(135deg, #fff5f5, #fff);
}
.ty-bank-card.halyk-card {
  border-color: #c8e6c9;
  background: linear-gradient(135deg, #f1f8f2, #fff);
}

.ty-bank-head { display: flex; align-items: center; gap: 10px; }
.ty-bank-logo {
  font-size: 1.3rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  border-radius: 6px;
  padding: 2px 10px;
}
.kaspi-logo { color: #FF0000; background: rgba(255,0,0,0.06); }
.halyk-logo { color: #00A65A; background: rgba(0,166,90,0.06); }
.ty-bank-label { font-size: 0.78rem; color: #6b7280; font-weight: 600; }

/* Steps inside bank card */
.ty-bank-steps { display: flex; flex-direction: column; gap: 6px; }
.ty-bank-step { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: #374151; }
.ty-step-n {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800;
  color: #fff;
  background: #0D2843;
}
.kaspi-card .ty-step-n { background: #FF0000; }
.halyk-card .ty-step-n { background: #00A65A; }

/* Requisite box */
.ty-req-box {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 10px 12px;
}
.ty-req-label { font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ty-req-value {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: 'Montserrat', monospace;
  color: #0D2843;
  letter-spacing: 1px;
  word-break: break-all;
  margin-bottom: 2px;
}
.kaspi-value { color: #CC0000; }
.halyk-value { color: #006B39; }
.ty-req-sublabel { font-size: 0.72rem; color: #9ca3af; margin-bottom: 8px; }

/* Copy button */
.ty-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid;
  background: transparent;
  transition: all 0.2s;
}
.kaspi-copy { border-color: #FF0000; color: #CC0000; }
.kaspi-copy:hover { background: rgba(255,0,0,0.08); }
.kaspi-copy.copied { background: #FF0000; color: #fff; }
.halyk-copy { border-color: #00A65A; color: #006B39; }
.halyk-copy:hover { background: rgba(0,166,90,0.08); }
.halyk-copy.copied { background: #00A65A; color: #fff; }

/* Bank action button */
.ty-bank-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
  margin-top: auto;
}
.kaspi-btn { background: #FF0000; color: #fff; }
.halyk-btn { background: #00A65A; color: #fff; }
.ty-bank-btn:hover { opacity: 0.88; }

/* ─── After Pay section ─── */
.ty-after-pay {
  background: #f8fafc;
  border: 1px solid #e2eaf3;
  border-radius: 12px;
  padding: 20px;
}
.ty-after-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0D2843;
  margin-bottom: 14px;
}
.ty-after-title i { color: #4caf50; }
.ty-after-steps { display: flex; flex-direction: column; gap: 12px; }
.ty-after-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ty-after-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0D2843;
  color: #C4E3F5;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.ty-after-step > div { flex: 1; }
.ty-after-step > div strong { display: block; font-size: 0.88rem; color: #0D2843; margin-bottom: 2px; }
.ty-after-step > div p { font-size: 0.8rem; color: #6b7280; margin: 0; line-height: 1.4; }
.ty-mail-link { color: #4a90a4; font-weight: 700; }

/* ThankYou footer note */
.ty-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(13,40,67,0.05);
  border-left: 3px solid #0D2843;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  color: #4a5568;
  line-height: 1.5;
  margin: 16px 0;
}
.ty-footer-note i { color: #0D2843; flex-shrink: 0; margin-top: 2px; }

.ty-nav-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-bottom: 40px;
}

/* ─── Register page — payment section updates ─── */
.reg-pay-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(13,40,67,0.04);
  border: 1px solid #dce7f3;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.reg-pay-role {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0D2843;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reg-pay-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #4a90a4;
  font-family: 'Montserrat', sans-serif;
}
.reg-pay-note {
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.5;
  background: #fffbf0;
  border: 1px solid #f0d87c;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.reg-pay-note i { color: #d4af37; flex-shrink: 0; margin-top: 1px; }
.reg-pay-hint {
  font-size: 0.8rem;
  color: #4a90a4;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.reg-pay-hint i { flex-shrink: 0; }

/* ─── Membership page — banks grid ─── */
.mem-banks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.mem-bank-card {
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 2px solid;
}
.kaspi-card-full {
  border-color: #ffcdd2;
  background: linear-gradient(135deg, rgba(255,0,0,0.04), rgba(255,255,255,0.9));
}
.halyk-card-full {
  border-color: #c8e6c9;
  background: linear-gradient(135deg, rgba(0,166,90,0.04), rgba(255,255,255,0.9));
}
.mem-bank-logo-row { display: flex; align-items: center; gap: 12px; }
.mem-bank-logo {
  font-size: 1.6rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  border-radius: 8px;
  padding: 4px 14px;
}
.kaspi-logo-lg { color: #FF0000; background: rgba(255,0,0,0.08); }
.halyk-logo-lg { color: #00A65A; background: rgba(0,166,90,0.08); }
.mem-bank-tag { font-size: 0.8rem; color: rgba(255,255,255,0.7); font-weight: 600; }
.mem-bank-method {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.mem-bank-req {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 12px 14px;
}
.mem-req-label { font-size: 0.7rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.mem-req-value {
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Montserrat', monospace;
  color: #fff;
  letter-spacing: 1px;
  word-break: break-all;
}
.mem-req-sub { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-top: 2px; }

.mem-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.mem-copy-btn:hover { background: rgba(255,255,255,0.3); }
.mem-copy-btn.copied { background: rgba(255,255,255,0.5); }

.mem-bank-steps { display: flex; flex-direction: column; gap: 8px; }
.mem-step { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.mem-step-n {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
}

.mem-bank-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  transition: opacity 0.2s;
  color: #fff;
}
.kaspi-btn-full { background: rgba(255,0,0,0.25); border: 1px solid rgba(255,0,0,0.4); }
.halyk-btn-full { background: rgba(0,166,90,0.25); border: 1px solid rgba(0,166,90,0.4); }
.mem-bank-btn:hover { opacity: 0.85; }

/* Override dark text on dark card */
.kaspi-card-full .mem-bank-logo-row,
.kaspi-card-full .mem-bank-method,
.kaspi-card-full .mem-bank-steps,
.kaspi-card-full .mem-req-value,
.kaspi-card-full .mem-step {
  color: #1a0000 !important;
}
.kaspi-card-full .mem-bank-logo-row .mem-bank-tag { color: #550000; }
.kaspi-card-full .mem-req-label,
.kaspi-card-full .mem-req-sub { color: rgba(80,0,0,0.6) !important; }
.kaspi-card-full .mem-req-value { color: #CC0000 !important; }
.kaspi-card-full .mem-copy-btn { color: #CC0000; background: rgba(255,0,0,0.08); border-color: rgba(255,0,0,0.25); }
.kaspi-card-full .mem-step-n { background: rgba(255,0,0,0.15); color: #CC0000; }
.kaspi-card-full .mem-bank-req { background: rgba(255,0,0,0.04); border-color: rgba(255,0,0,0.15); }
.kaspi-card-full .mem-bank-method { color: #8B0000; }

.halyk-card-full .mem-bank-logo-row,
.halyk-card-full .mem-bank-method,
.halyk-card-full .mem-bank-steps,
.halyk-card-full .mem-req-value,
.halyk-card-full .mem-step {
  color: #001a00 !important;
}
.halyk-card-full .mem-bank-logo-row .mem-bank-tag { color: #004010; }
.halyk-card-full .mem-req-label,
.halyk-card-full .mem-req-sub { color: rgba(0,80,0,0.6) !important; }
.halyk-card-full .mem-req-value { color: #006B39 !important; }
.halyk-card-full .mem-copy-btn { color: #006B39; background: rgba(0,166,90,0.08); border-color: rgba(0,166,90,0.25); }
.halyk-card-full .mem-step-n { background: rgba(0,166,90,0.15); color: #006B39; }
.halyk-card-full .mem-bank-req { background: rgba(0,166,90,0.04); border-color: rgba(0,166,90,0.15); }
.halyk-card-full .mem-bank-method { color: #004d1a; }

/* Membership price table */
.mem-price-table {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 20px 24px;
  max-width: 520px;
  margin: 0 auto;
}
.mem-price-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(196,227,245,0.7);
  margin-bottom: 14px;
  font-weight: 600;
}
.mem-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}
.mem-price-row:last-of-type { border-bottom: none; }
.mem-price-val { font-weight: 800; color: #C4E3F5; font-family: 'Montserrat', sans-serif; }
.mem-price-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.78rem;
  color: rgba(196,227,245,0.65);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mem-price-footer i { flex-shrink: 0; margin-top: 2px; }
.mem-price-footer a { color: #C4E3F5; }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .ty-banks-grid { grid-template-columns: 1fr; }
  .mem-banks-grid { grid-template-columns: 1fr; }
  .ty-payment-section { padding: 20px 16px; }
  .ty-pay-amount-row { flex-direction: column; align-items: flex-start; }
  .ty-member-banner { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   AHF ACADEMY — ПОЛНЫЕ СТИЛИ
   ═══════════════════════════════════════════════════════════════════ */

/* ── Общие переменные Academy ── */
:root {
  --ac-navy:    #0a1628;
  --ac-navy2:   #0d1f3c;
  --ac-blue:    #1565c0;
  --ac-blue2:   #1e88e5;
  --ac-gold:    #d4af37;
  --ac-gold2:   #f0cc5a;
  --ac-purple:  #a855f7;
  --ac-steel:   #4a90a4;
  --ac-white:   #ffffff;
  --ac-light:   #e8edf5;
  --ac-text:    #c8d8f0;
  --ac-border:  rgba(255,255,255,0.08);
}

/* ── HERO ── */
.ac-hero {
  position: relative;
  min-height: 88vh;
  background: var(--ac-navy);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 80px 0 60px;
}
.ac-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(21,101,192,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(212,175,55,0.08) 0%, transparent 60%),
    linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
}
.ac-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,22,40,0.55);
}
.ac-hero-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ac-deco-1 {
  width: 600px; height: 600px;
  right: -100px; top: -150px;
  background: radial-gradient(circle, rgba(21,101,192,0.12) 0%, transparent 70%);
  animation: acFloat 8s ease-in-out infinite;
}
.ac-deco-2 {
  width: 300px; height: 300px;
  left: 5%; bottom: 10%;
  background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 70%);
  animation: acFloat 10s ease-in-out infinite reverse;
}
.ac-deco-3 {
  width: 200px; height: 200px;
  right: 30%; top: 20%;
  background: radial-gradient(circle, rgba(168,85,247,0.06) 0%, transparent 70%);
  animation: acFloat 12s ease-in-out infinite;
}
@keyframes acFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.ac-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
}
.ac-hero-content { flex: 1; }

.ac-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--ac-gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ac-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ac-gold);
  flex-shrink: 0;
}

.ac-hero-title {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--ac-white);
  letter-spacing: -2px;
  margin: 0 0 16px;
}
.ac-title-accent {
  background: linear-gradient(90deg, var(--ac-blue2) 0%, var(--ac-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ac-hero-tagline {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ac-light);
  margin: 0 0 10px;
}
.ac-hero-desc {
  font-size: 0.95rem;
  color: var(--ac-text);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 480px;
}

.ac-hero-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.ac-hero-stat {
  text-align: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ac-border);
  border-radius: 10px;
  min-width: 80px;
}
.ac-hero-stat-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ac-gold);
  line-height: 1;
}
.ac-hero-stat-lbl {
  font-size: 0.65rem;
  color: var(--ac-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.ac-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ac-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(21,101,192,0.4);
}
.ac-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(21,101,192,0.55);
}
.ac-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  background: transparent;
  color: var(--ac-light);
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s;
}
.ac-btn-outline:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  background: rgba(255,255,255,0.06);
}

.ac-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ac-text);
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ac-border);
  border-radius: 50px;
}
.ac-hero-badge i { color: var(--ac-gold); }

/* Hero Card */
.ac-hero-card-wrap {
  flex-shrink: 0;
  width: 320px;
}
.ac-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(21,101,192,0.15) 0%, rgba(13,31,60,0.9) 100%);
  border: 1px solid rgba(21,101,192,0.3);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.ac-card-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(21,101,192,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.ac-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ac-card-logo { border-radius: 6px; }
.ac-card-org {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ac-text);
  text-transform: uppercase;
}
.ac-card-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--ac-blue2), var(--ac-gold), transparent);
  margin-bottom: 16px;
}
.ac-card-name-block { margin-bottom: 20px; }
.ac-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ac-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ac-card-title-lg {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ac-white);
  line-height: 1.2;
}
.ac-card-programs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ac-card-prog-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ac-light);
}
.ac-prog-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ac-prog-price { margin-left: auto; font-weight: 700; color: var(--ac-gold); font-size: 0.78rem; }
.ac-card-footer { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-card-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ac-text);
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ac-border);
  border-radius: 5px;
  text-transform: uppercase;
}

/* ── ПОЗИЦИОНИРОВАНИЕ ── */
.ac-positioning {
  background: #f7f9fc;
  padding: 80px 0;
}
.ac-pos-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.ac-section-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ac-blue);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(21,101,192,0.08);
  border-radius: 4px;
  border-left: 3px solid var(--ac-blue);
}
.ac-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--ac-navy);
  margin: 0 0 20px;
  line-height: 1.2;
}
.ac-pos-desc {
  font-size: 0.95rem;
  color: #445;
  line-height: 1.7;
  margin-bottom: 14px;
}
.ac-pos-alert {
  display: flex;
  gap: 14px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 10px;
  padding: 16px;
  margin-top: 24px;
}
.ac-pos-alert-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: #ffe082;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8860b;
  font-size: 0.9rem;
}
.ac-pos-alert p { margin: 4px 0 0; font-size: 0.85rem; color: #555; }

.ac-pos-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ac-pillar {
  background: var(--ac-white);
  border: 1px solid #dde3ef;
  border-radius: 14px;
  padding: 20px;
  transition: all 0.25s;
}
.ac-pillar:hover {
  border-color: var(--ac-blue2);
  box-shadow: 0 6px 20px rgba(21,101,192,0.12);
  transform: translateY(-3px);
}
.ac-pillar-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 12px;
}
.ac-pillar-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ac-navy);
  margin-bottom: 6px;
}
.ac-pillar-desc { font-size: 0.78rem; color: #667; line-height: 1.5; }

/* ── ПРОГРАММЫ ── */
.ac-programs {
  background: var(--ac-navy);
  padding: 90px 0;
  position: relative;
}
.ac-section-header {
  text-align: center;
  margin-bottom: 50px;
}
.ac-section-header .ac-section-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ac-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(212,175,55,0.12);
  border-radius: 4px;
  border-left: 3px solid var(--ac-gold);
}
.ac-section-header .ac-section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--ac-white);
  margin: 0 0 14px;
}
.ac-section-sub {
  font-size: 0.95rem;
  color: var(--ac-text);
  max-width: 500px;
  margin: 0 auto;
}
.ac-section-header.light .ac-section-label { color: var(--ac-gold); background: rgba(212,175,55,0.1); border-color: var(--ac-gold); }
.ac-section-header.light .ac-section-title { color: var(--ac-white); }
.ac-section-header.light .ac-section-sub { color: var(--ac-text); }

.ac-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ac-course-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ac-course-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.ac-course-popular {
  border-color: var(--ac-gold) !important;
  background: rgba(212,175,55,0.05) !important;
}
.ac-popular-ribbon {
  position: absolute;
  top: 16px; right: -28px;
  background: linear-gradient(135deg, var(--ac-gold) 0%, var(--ac-gold2) 100%);
  color: #1a1000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 5px 36px 5px 14px;
  transform: rotate(35deg);
  letter-spacing: 1.5px;
  pointer-events: none;
}

.ac-course-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ac-course-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 5px;
  text-transform: uppercase;
}
.ac-course-icon { font-size: 1.8rem; }
.ac-course-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ac-white);
  margin: 0 0 6px;
}
.ac-course-sub {
  font-size: 0.82rem;
  color: var(--ac-text);
  margin: 0 0 14px;
}
.ac-course-required {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255,200,0,0.08);
  border: 1px solid rgba(255,200,0,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: #ffe082;
  margin-bottom: 14px;
}
.ac-course-required i { margin-top: 1px; flex-shrink: 0; }

.ac-course-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ac-course-price {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.ac-course-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.ac-course-meta span {
  font-size: 0.72rem;
  color: var(--ac-text);
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

.ac-course-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 16px;
}
.ac-course-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; flex: 1; }
.ac-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ac-light);
}
.ac-feature-item i { margin-top: 2px; flex-shrink: 0; font-size: 0.75rem; }

.ac-course-result {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--ac-light);
  margin-bottom: 16px;
  font-weight: 600;
}

.ac-course-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 0.3px;
  margin-top: auto;
}
.ac-course-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ── КАК ЭТО РАБОТАЕТ ── */
.ac-how {
  position: relative;
  background: var(--ac-navy2);
  padding: 90px 0;
  overflow: hidden;
}
.ac-how-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 50%, rgba(21,101,192,0.1) 0%, transparent 70%);
}
.ac-steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  position: relative;
  margin-bottom: 50px;
}
.ac-step {
  position: relative;
  text-align: center;
  padding: 24px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: all 0.25s;
}
.ac-step:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(21,101,192,0.4);
  transform: translateY(-4px);
}
.ac-step-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ac-gold);
  margin-bottom: 10px;
}
.ac-step-icon {
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
}
.ac-step-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ac-white);
  margin-bottom: 6px;
}
.ac-step-desc { font-size: 0.72rem; color: var(--ac-text); line-height: 1.5; }
.ac-step-arrow {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.2);
  font-size: 0.7rem;
  z-index: 2;
}
.ac-how-cta { text-align: center; }
.ac-btn-primary-lg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: linear-gradient(135deg, var(--ac-gold) 0%, var(--ac-gold2) 100%);
  color: #1a1000;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.25s;
  box-shadow: 0 4px 24px rgba(212,175,55,0.4);
}
.ac-btn-primary-lg:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(212,175,55,0.55);
}

/* ── РЕЗУЛЬТАТ ── */
.ac-results {
  background: #f7f9fc;
  padding: 90px 0;
}
.ac-results .ac-section-title { color: var(--ac-navy); }
.ac-results .ac-section-sub { color: #667; }
.ac-results .ac-section-label {
  color: var(--ac-blue);
  background: rgba(21,101,192,0.08);
  border-color: var(--ac-blue);
}
.ac-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}
.ac-result-card {
  background: #fff;
  border: 1px solid #dde3ef;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.25s;
}
.ac-result-card:hover {
  border-color: var(--ac-blue2);
  box-shadow: 0 8px 28px rgba(21,101,192,0.12);
  transform: translateY(-4px);
}
.ac-result-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
}
.ac-result-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ac-navy);
  margin-bottom: 8px;
}
.ac-result-desc { font-size: 0.78rem; color: #667; line-height: 1.5; }

/* Сертификат – превью */
.ac-cert-preview {
  max-width: 680px;
  margin: 0 auto;
}
.ac-cert-inner {
  display: flex;
  background: linear-gradient(135deg, var(--ac-navy) 0%, var(--ac-navy2) 100%);
  border: 2px solid var(--ac-gold);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.ac-cert-left {
  flex: 1;
  padding: 32px;
  border-right: 1px solid rgba(212,175,55,0.2);
}
.ac-cert-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ac-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ac-cert-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ac-white);
  line-height: 1.1;
  margin-bottom: 6px;
}
.ac-cert-sub { font-size: 0.72rem; color: var(--ac-text); margin-bottom: 20px; }
.ac-cert-body { display: flex; flex-direction: column; gap: 10px; }
.ac-cert-row { display: flex; align-items: baseline; gap: 10px; }
.ac-cert-field { font-size: 0.72rem; color: var(--ac-text); width: 80px; flex-shrink: 0; }
.ac-cert-val { font-size: 0.82rem; color: var(--ac-white); font-weight: 600; }
.ac-cert-num { color: var(--ac-gold); font-family: monospace; font-size: 0.75rem; }

.ac-cert-right {
  width: 160px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: rgba(212,175,55,0.04);
}
.ac-cert-logo { border-radius: 8px; margin-bottom: 12px; }
.ac-cert-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ac-gold);
}
.ac-cert-seal i { font-size: 1.5rem; }
.ac-cert-seal span { font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; }
.ac-cert-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ac-qr-placeholder {
  width: 52px; height: 52px;
  border: 2px solid var(--ac-gold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ac-gold);
  background: rgba(212,175,55,0.06);
}
.ac-cert-qr span { font-size: 0.6rem; color: var(--ac-text); }

/* ── FAQ ── */
.ac-faq {
  background: var(--ac-navy);
  padding: 80px 0;
}
.ac-faq .ac-section-title { color: var(--ac-white); }
.ac-faq .ac-section-label { color: var(--ac-gold); background: rgba(212,175,55,0.1); border-color: var(--ac-gold); }
.ac-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ac-faq-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s;
}
.ac-faq-item.open { border-color: rgba(21,101,192,0.4); }
.ac-faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--ac-white);
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.2s;
}
.ac-faq-q:hover { color: var(--ac-blue2); }
.ac-faq-arrow { transition: transform 0.25s; color: var(--ac-gold); font-size: 0.8rem; flex-shrink: 0; }
.ac-faq-a { padding: 0 20px 18px; }
.ac-faq-a p { margin: 0; font-size: 0.85rem; color: var(--ac-text); line-height: 1.7; }

/* ── ФИНАЛЬНЫЙ CTA ── */
.ac-final-cta {
  position: relative;
  background: var(--ac-navy);
  padding: 90px 0;
  overflow: hidden;
  text-align: center;
}
.ac-final-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(21,101,192,0.15) 0%, transparent 70%);
}
.ac-final-particles { position: absolute; inset: 0; pointer-events: none; }
.ac-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(212,175,55,0.15);
  animation: acFloat 8s ease-in-out infinite;
}
.ac-p1 { width: 120px; height: 120px; left: 10%; top: 20%; animation-delay: 0s; }
.ac-p2 { width: 80px; height: 80px; right: 15%; top: 30%; animation-delay: 3s; }
.ac-p3 { width: 200px; height: 200px; right: 5%; bottom: 10%; animation-delay: 5s; }

.ac-final-inner { position: relative; max-width: 700px; margin: 0 auto; }
.ac-final-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ac-gold);
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 50px;
  padding: 6px 16px;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.ac-final-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--ac-white);
  line-height: 1.15;
  margin: 0 0 20px;
}
.ac-final-accent {
  background: linear-gradient(90deg, var(--ac-blue2) 0%, var(--ac-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ac-final-desc {
  font-size: 0.95rem;
  color: var(--ac-text);
  line-height: 1.7;
  margin-bottom: 28px;
}
.ac-final-urgency {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.ac-urgency-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ff6b6b;
}
.ac-urgency-item.ac-urgency-positive { color: #69db7c; }
.ac-urgency-item i { font-size: 0.9rem; }

.ac-final-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ac-final-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--ac-gold) 0%, var(--ac-gold2) 100%);
  color: #1a1000;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(212,175,55,0.4);
}
.ac-final-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212,175,55,0.55);
}
.ac-final-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(21,101,192,0.35);
}
.ac-final-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(21,101,192,0.5);
}
.ac-final-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  background: transparent;
  color: var(--ac-light);
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s;
}
.ac-final-btn-ghost:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.ac-final-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ac-final-note i { color: var(--ac-gold); }

/* ── МОДАЛЬНОЕ ОКНО ── */
.ac-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,0.85);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ac-modal {
  background: #0d1f3c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  padding: 32px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.ac-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  width: 32px; height: 32px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-size: 0.85rem;
}
.ac-modal-close:hover { background: rgba(255,0,0,0.2); }
.ac-modal-header { text-align: center; margin-bottom: 24px; }
.ac-modal-icon {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
}
.ac-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ac-white);
  margin: 0 0 6px;
}
.ac-modal-price {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ac-gold);
}
.ac-modal-field { margin-bottom: 14px; }
.ac-modal-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ac-text);
  margin-bottom: 6px;
}
.ac-modal-field .req { color: #ff6b6b; }
.ac-modal-field input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ac-modal-field input:focus { border-color: var(--ac-blue2); }
.ac-modal-field input::placeholder { color: rgba(255,255,255,0.3); }

.ac-modal-bank-select { margin-bottom: 20px; }
.ac-modal-bank-select label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ac-text);
  margin-bottom: 8px;
}
.ac-bank-opts { display: flex; gap: 10px; }
.ac-bank-opt {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.82rem;
  color: var(--ac-light);
}
.ac-bank-opt.selected {
  border-color: var(--ac-blue2);
  background: rgba(30,136,229,0.15);
  color: #fff;
}
.ac-bank-logo-sm {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.kaspi-sm { background: #e21a1a; color: #fff; }
.halyk-sm { background: #009e4f; color: #fff; }

.ac-modal-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--ac-blue) 0%, var(--ac-blue2) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
}
.ac-modal-submit:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(21,101,192,0.4);
}
.ac-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.ac-modal-footer {
  margin-top: 14px;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ac-modal-footer i { color: var(--ac-gold); }
.ac-modal-success {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(76,175,80,0.12);
  border: 1px solid rgba(76,175,80,0.3);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  color: #a5d6a7;
  font-size: 0.82rem;
}
.ac-modal-success i { color: #4caf50; font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.ac-modal-success strong { display: block; margin-bottom: 4px; font-size: 0.88rem; }
.ac-modal-error {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(244,67,54,0.12);
  border: 1px solid rgba(244,67,54,0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: #ef9a9a;
  font-size: 0.82rem;
}
.ac-modal-error i { color: #f44336; flex-shrink: 0; }

/* ── АДАПТИВ Academy ── */
@media (max-width: 1100px) {
  .ac-steps-grid { grid-template-columns: repeat(3, 1fr); }
  .ac-step-arrow { display: none; }
}
@media (max-width: 900px) {
  .ac-hero-inner { flex-direction: column; }
  .ac-hero-card-wrap { width: 100%; max-width: 380px; margin: 0 auto; }
  .ac-pos-inner { grid-template-columns: 1fr; gap: 36px; }
  .ac-courses-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .ac-results-grid { grid-template-columns: repeat(2, 1fr); }
  .ac-cert-inner { flex-direction: column; }
  .ac-cert-right { width: 100%; flex-direction: row; justify-content: space-around; padding: 16px 24px; border-top: 1px solid rgba(212,175,55,0.2); border-right: none; }
  .ac-cert-logo { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .ac-hero { min-height: auto; padding: 60px 0 50px; }
  .ac-hero-title { font-size: 3rem; }
  .ac-hero-stats { gap: 10px; }
  .ac-hero-stat { min-width: 60px; padding: 8px 10px; }
  .ac-hero-stat-val { font-size: 1.2rem; }
  .ac-pos-pillars { grid-template-columns: 1fr; }
  .ac-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .ac-results-grid { grid-template-columns: 1fr; }
  .ac-final-btns { flex-direction: column; align-items: center; }
  .ac-final-urgency { flex-direction: column; align-items: center; gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   AHF MEDIA PLATFORM — СТИЛИ
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.md-hero {
  position: relative;
  background: #0a1628;
  padding: 80px 0 60px;
  overflow: hidden;
}
.md-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(21,101,192,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(212,175,55,0.08) 0%, transparent 60%);
}
.md-hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.md-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
}
.md-hero-content { flex: 1; }
.md-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #d4af37;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 5px 12px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 50px;
}
.md-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -1px;
}
.md-title-accent {
  background: linear-gradient(90deg, #1e88e5 0%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.md-hero-desc {
  font-size: 0.95rem;
  color: #c8d8f0;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}
.md-hero-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.md-stat {
  text-align: center;
  padding: 10px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  min-width: 80px;
}
.md-stat-val { font-size: 1.4rem; font-weight: 900; color: #d4af37; line-height: 1; }
.md-stat-lbl { font-size: 0.6rem; color: #c8d8f0; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

.md-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.md-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  color: #fff; font-weight: 700; font-size: 0.88rem;
  border-radius: 10px; text-decoration: none;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(21,101,192,0.4);
}
.md-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(21,101,192,0.55); }
.md-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: transparent; color: #e8edf5; font-weight: 600; font-size: 0.88rem;
  border: 2px solid rgba(255,255,255,0.18); border-radius: 10px; text-decoration: none;
  transition: all 0.25s;
}
.md-btn-outline:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.05); }

/* Legend */
.md-access-legend {
  flex-shrink: 0;
  width: 260px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
}
.md-legend-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 2px;
  color: #d4af37; text-transform: uppercase; margin-bottom: 16px;
}
.md-legend-item {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
}
.md-legend-item:last-child { margin-bottom: 0; }
.md-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
}
.md-legend-label { font-size: 0.82rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.md-legend-desc  { font-size: 0.72rem; color: #c8d8f0; }

/* ── FEATURED ── */
.md-featured { background: #f7f9fc; padding: 70px 0; }
.md-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px; flex-wrap: wrap; gap: 12px;
}
.md-section-label {
  display: inline-block;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 3px;
  color: #1565c0; text-transform: uppercase;
  padding: 4px 10px; background: rgba(21,101,192,0.08);
  border-left: 3px solid #1565c0; border-radius: 4px;
  margin-bottom: 8px;
}
.md-section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800; color: #0a1628; margin: 0;
}

.md-featured-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 20px;
}
.md-featured-card {
  background: #fff;
  border: 1px solid #dde3ef;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}
.md-featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border-color: #1e88e5;
}
.md-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.md-thumb-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.md-thumb-icon { font-size: 3rem; }
.md-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
}
.md-featured-card:hover .md-thumb-overlay { opacity: 1; }
.md-play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  color: #1565c0; font-size: 1.2rem;
  transition: transform 0.2s;
}
.md-play-btn:hover { transform: scale(1.1); }
.md-thumb-duration {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
}
.md-thumb-access {
  position: absolute; top: 10px; left: 10px;
  font-size: 0.65rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; border: 1px solid;
  display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(4px);
}
.md-thumb-type {
  position: absolute; bottom: 8px; left: 10px;
  font-size: 0.65rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
}
.md-card-body { padding: 16px 18px 18px; }
.md-card-title {
  font-size: 0.95rem; font-weight: 700; color: #0a1628;
  margin-bottom: 6px; line-height: 1.3;
}
.md-featured-main .md-card-title { font-size: 1.05rem; }
.md-card-desc {
  font-size: 0.78rem; color: #556; line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.md-card-meta {
  display: flex; gap: 14px; font-size: 0.72rem; color: #889;
}
.md-card-meta i { margin-right: 4px; }

/* ── КАТАЛОГ ── */
.md-catalog { background: #0a1628; padding: 70px 0; }

.md-filters {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.md-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-filter-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4); text-transform: uppercase; flex-shrink: 0;
}
.md-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: #c8d8f0; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.md-filter-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.md-filter-btn.active {
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 12px rgba(21,101,192,0.4);
}
.md-search-wrap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 7px 16px;
  margin-left: auto;
}
.md-search-wrap i { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
.md-search-wrap input {
  background: transparent; border: none; outline: none;
  color: #fff; font-size: 0.82rem; font-family: inherit;
  width: 180px;
}
.md-search-wrap input::placeholder { color: rgba(255,255,255,0.3); }

.md-count-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  font-size: 0.82rem;
}
#md-count { color: #d4af37; font-weight: 700; }
.md-count-hint { color: rgba(255,255,255,0.3); }

/* Плитка видео */
.md-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.md-video-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  display: flex; flex-direction: column;
}
.md-video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30,136,229,0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.md-vc-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.md-vc-bg {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0d1f3c, #0a1628);
  display: flex; align-items: center; justify-content: center;
}
.md-vc-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
}
.md-video-card:hover .md-vc-overlay { opacity: 1; }
.md-vc-play {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  color: #1565c0; font-size: 1rem;
}
.md-vc-duration {
  position: absolute; bottom: 6px; right: 8px;
  background: rgba(0,0,0,0.8);
  color: #fff; font-size: 0.65rem; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
}
.md-vc-access-badge {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.65rem;
}
.md-vc-featured-badge {
  position: absolute; top: 8px; left: 8px;
  background: #d4af37; color: #1a1000;
  font-size: 0.65rem; font-weight: 900;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.md-vc-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.md-vc-type-tag {
  font-size: 0.65rem; font-weight: 700;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: 1px;
}
.md-vc-title {
  font-size: 0.85rem; font-weight: 700; color: #fff;
  margin-bottom: 6px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.md-vc-desc {
  font-size: 0.72rem; color: #c8d8f0; line-height: 1.5;
  margin-bottom: 10px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.md-vc-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.md-vc-meta {
  display: flex; gap: 10px; font-size: 0.65rem; color: rgba(255,255,255,0.4);
}
.md-vc-meta i { margin-right: 3px; }
.md-vc-access-label {
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}

/* Нет результатов */
.md-empty {
  text-align: center; padding: 60px 20px;
  color: rgba(255,255,255,0.3);
}
.md-empty i { font-size: 3rem; margin-bottom: 16px; display: block; }
.md-empty p { font-size: 0.95rem; }

/* ── CTA СЕКЦИЯ ── */
.md-cta-section { background: #0d1f3c; padding: 70px 0; }
.md-cta-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.md-cta-card {
  border-radius: 16px; padding: 32px;
  text-align: center; transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.08);
}
.md-cta-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.md-cta-academy { background: rgba(212,175,55,0.07); border-color: rgba(212,175,55,0.2); }
.md-cta-license { background: rgba(168,85,247,0.07); border-color: rgba(168,85,247,0.2); }
.md-cta-register{ background: rgba(74,144,164,0.07); border-color: rgba(74,144,164,0.2); }
.md-cta-icon {
  font-size: 2rem; margin-bottom: 16px;
}
.md-cta-academy .md-cta-icon  { color: #d4af37; }
.md-cta-license .md-cta-icon  { color: #a855f7; }
.md-cta-register .md-cta-icon { color: #4a90a4; }
.md-cta-card h3 {
  font-size: 1.1rem; font-weight: 800; color: #fff; margin: 0 0 10px;
}
.md-cta-card p { font-size: 0.82rem; color: #c8d8f0; line-height: 1.6; margin: 0 0 20px; }
.md-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 24px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 700;
  text-decoration: none; transition: all 0.2s;
}
.md-cta-btn.gold   { background: linear-gradient(135deg,#d4af37,#f0cc5a); color: #1a1000; }
.md-cta-btn.blue   { background: linear-gradient(135deg,#1565c0,#1e88e5); color: #fff; }
.md-cta-btn.steel  { background: linear-gradient(135deg,#37617a,#4a90a4); color: #fff; }
.md-cta-btn:hover  { filter: brightness(1.12); transform: translateY(-2px); }

/* ── ПЛЕЕР МОДАЛКА ── */
.md-player-overlay {
  position: fixed; inset: 0;
  background: rgba(5,12,25,0.92);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center; justify-content: center;
  padding: 16px;
}
.md-player-modal {
  background: #0d1f3c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: 100%; max-width: 860px;
  position: relative;
  max-height: 92vh; overflow-y: auto;
}
.md-player-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.08); border: none;
  border-radius: 8px; width: 34px; height: 34px;
  color: #fff; cursor: pointer; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 2;
}
.md-player-close:hover { background: rgba(255,0,0,0.2); }
.md-player-header { padding: 20px 24px 0; }
.md-player-title {
  font-size: 1.05rem; font-weight: 700; color: #fff;
  margin: 0 36px 8px 0; line-height: 1.3;
}
.md-player-meta {
  display: flex; gap: 16px;
  font-size: 0.75rem; color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
}
.md-player-meta i { margin-right: 4px; }
.md-player-frame {
  position: relative; padding-bottom: 56.25%;
  background: #000;
}
.md-player-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: none;
}
.md-player-desc {
  padding: 16px 24px;
  font-size: 0.82rem; color: #c8d8f0; line-height: 1.7;
}
.md-player-tags {
  padding: 0 24px 20px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.md-tag {
  font-size: 0.7rem; font-weight: 600;
  padding: 3px 10px; border-radius: 50px;
  background: rgba(30,136,229,0.15);
  border: 1px solid rgba(30,136,229,0.25);
  color: #90caf9;
}

/* Нет доступа */
.md-access-denied {
  padding: 48px 32px; text-align: center;
}
.md-deny-icon { font-size: 3rem; margin-bottom: 16px; }
.md-deny-title { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 10px; }
.md-deny-text  { font-size: 0.88rem; color: #c8d8f0; line-height: 1.6; margin: 0 0 24px; }
.md-deny-btns  { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.md-deny-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  border: none; font-family: inherit; transition: all 0.2s;
}
.md-deny-btn.gold   { background: linear-gradient(135deg,#d4af37,#f0cc5a); color: #1a1000; }
.md-deny-btn.blue   { background: linear-gradient(135deg,#1565c0,#1e88e5); color: #fff; }
.md-deny-btn.purple { background: linear-gradient(135deg,#7b1fa2,#a855f7); color: #fff; }
.md-deny-btn.ghost  { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; }
.md-deny-btn:hover  { filter: brightness(1.12); transform: translateY(-2px); }

/* ── АДАПТИВ ── */
@media (max-width: 1100px) {
  .md-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .md-hero-inner { flex-direction: column; }
  .md-access-legend { width: 100%; }
  .md-featured-grid { grid-template-columns: 1fr 1fr; }
  .md-cta-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .md-grid { grid-template-columns: repeat(2, 1fr); }
  .md-featured-grid { grid-template-columns: 1fr; }
  .md-filters { flex-direction: column; align-items: flex-start; }
  .md-search-wrap { margin-left: 0; width: 100%; }
  .md-search-wrap input { width: 100%; }
}
@media (max-width: 480px) {
  .md-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   AHF MEDIA PLATFORM  —  styles
   ════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────── */
.media-hero {
  position: relative;
  padding: 120px 0 80px;
  background: var(--navy-deep);
  overflow: hidden;
}
.media-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 60% 40%, rgba(74,144,164,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(212,175,55,.10) 0%, transparent 60%),
    linear-gradient(160deg, #0d1b3e 0%, #0a1628 50%, #0d1b3e 100%);
  z-index: 0;
}
.media-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234a90a4' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.media-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.media-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,144,164,.15);
  border: 1px solid rgba(74,144,164,.35);
  color: var(--steel-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 24px;
}
.media-hero-title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin: 0 0 20px;
  line-height: 1.05;
}
.media-hero-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,.65);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats strip */
.media-hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.media-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.media-stat-item i {
  color: var(--steel-light);
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.media-stat-item strong {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  line-height: 1;
}
.media-stat-item span {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Access legend */
.media-access-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.media-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.1);
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
}

/* ── LIBRARY SECTION ────────────────────────────────────────── */
.media-library {
  background: var(--bg-light);
}

/* Filter bar */
.media-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.media-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.media-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 24px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.media-filter-btn:hover {
  border-color: var(--steel);
  color: var(--steel);
}
.media-filter-btn.active {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}
.media-filter-locked.active {
  background: #7c3aed;
  border-color: #7c3aed;
}
.media-filter-locked:hover {
  border-color: #a855f7;
  color: #a855f7;
}

/* Search */
.media-search-wrap {
  position: relative;
  flex-shrink: 0;
  min-width: 220px;
}
.media-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}
.media-search-input {
  width: 100%;
  padding: 9px 14px 9px 34px;
  border: 1.5px solid var(--border-color);
  border-radius: 24px;
  font-size: 13px;
  background: #fff;
  color: var(--navy-deep);
  transition: border-color .2s;
  outline: none;
  box-sizing: border-box;
}
.media-search-input:focus {
  border-color: var(--steel);
}

/* Access tabs */
.media-access-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.media-access-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.media-access-tab:hover { border-color: var(--steel); color: var(--steel); }
.media-access-tab.active {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

/* Results info */
.media-results-info {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.media-results-info strong {
  color: var(--navy-deep);
}

/* ── VIDEO GRID ─────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.media-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex;
  flex-direction: column;
}
.media-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,.12);
  border-color: var(--steel);
}
.media-card-locked:hover {
  border-color: #a855f7;
}

/* Thumbnail */
.media-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--navy-deep);
}
.media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.media-card:hover .media-card-img {
  transform: scale(1.05);
}
.media-card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}

/* Lock overlay */
.media-card-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,27,62,.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(3px);
  transition: opacity .25s;
}
.media-card:hover .media-card-lock-overlay {
  opacity: 0.85;
}
.media-lock-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--lock-color, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--lock-color, #a855f7);
  background: rgba(255,255,255,.07);
}
.media-lock-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
}

/* Play button */
.media-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.media-card:not(.media-card-locked):hover .media-card-play {
  opacity: 1;
}
.media-card-play i {
  font-size: 2.4rem;
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
  transition: transform .2s;
}
.media-card:hover .media-card-play i { transform: scale(1.15); }

/* Card body */
.media-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.media-card-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.media-badge-type,
.media-badge-access {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: .3px;
}
.media-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}
.media-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Empty state */
.media-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.media-empty i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: .4;
}
.media-empty h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--navy-deep);
}

/* ── ACCESS INFO CARDS ──────────────────────────────────────── */
.media-access-info {
  background: #fff;
}
.media-access-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.media-access-card {
  background: var(--bg-light);
  border: 1.5px solid var(--border-color);
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  transition: transform .25s, box-shadow .25s;
}
.media-access-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(13,27,62,.10);
}
.media-access-card.mac-featured {
  border-color: #d4af37;
  background: rgba(212,175,55,.04);
}
.mac-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #d4af37, #b8942e);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 14px;
  border-radius: 12px;
}
.mac-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.media-access-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 8px;
}
.media-access-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.mac-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mac-tag {
  font-size: 12px;
  font-weight: 700;
}
.mac-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--steel);
  text-decoration: none;
  transition: color .2s;
}
.mac-link:hover { color: var(--navy-deep); }

/* ── ACADEMY CTA ────────────────────────────────────────────── */
.media-academy-cta {
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.media-academy-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(74,144,164,.15) 0%, transparent 60%);
}
.media-academy-block {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.media-academy-text .section-label {
  color: var(--steel-light);
}
.media-academy-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #fff;
  margin: 12px 0 16px;
}
.media-academy-text p {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.media-academy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-academy-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
}
.media-academy-list li i {
  color: var(--gold);
  flex-shrink: 0;
}
.media-academy-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Academy preview card */
.media-academy-preview {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(10px);
}
.map-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.map-header i {
  color: var(--gold);
  font-size: 1.1rem;
}
.map-badge {
  margin-left: auto;
  background: rgba(212,175,55,.15);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
.map-module {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  color: rgba(255,255,255,.55);
  transition: background .2s;
}
.map-module-done {
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.15);
  color: rgba(255,255,255,.85);
}
.map-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: rgba(255,255,255,.5);
}
.map-module-done .map-num {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.map-unlock { margin-left: auto; color: #22c55e; font-size: 12px; }
.map-locked-icon { margin-left: auto; color: rgba(255,255,255,.3); font-size: 12px; }
.map-progress {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-progress span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  text-align: right;
}
.map-progress-bar {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
}
.map-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 4px;
  transition: width .4s;
}

/* ── VIDEO MODAL ────────────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(6px);
}
.video-modal.active {
  opacity: 1;
  pointer-events: all;
}
.video-modal-inner {
  background: var(--navy-deep);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 32px;
  max-width: 780px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn .3s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 10;
}
.video-modal-close:hover { background: rgba(255,255,255,.2); }

/* Lock screen */
.modal-lock-screen {
  text-align: center;
  padding: 20px 0;
}
.modal-lock-icon-big {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(168,85,247,.12);
  border: 2px solid rgba(168,85,247,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 20px;
  color: #a855f7;
}
.modal-lock-screen h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.modal-lock-screen p {
  color: rgba(255,255,255,.55);
  font-size: 14px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 28px;
}
.modal-lock-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Player screen */
.video-modal-header {
  margin-bottom: 20px;
}
.video-modal-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.video-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  padding-right: 40px;
}
.video-modal-desc {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin: 0;
  line-height: 1.6;
}
.video-modal-player {
  margin-bottom: 20px;
}
.video-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-modal-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
}
.video-modal-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .media-hero { padding: 100px 0 60px; }
  .media-hero-stats { gap: 24px; }
  .media-filter-bar { flex-direction: column; align-items: flex-start; }
  .media-search-wrap { width: 100%; }
  .media-grid { grid-template-columns: 1fr; }
  .media-academy-block { grid-template-columns: 1fr; gap: 40px; }
  .media-academy-visual { display: none; }
  .media-access-cards { grid-template-columns: 1fr 1fr; }
  .video-modal-inner { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .media-access-cards { grid-template-columns: 1fr; }
  .media-access-legend { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   AHF MEDIA PLATFORM — Full CSS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────── */
.media-hero {
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
  background: var(--navy-deep);
  min-height: 520px;
  display: flex;
  align-items: center;
}
.media-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 50%, #1a2a4a 0%, #0a1628 100%);
}
.media-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(74,144,164,0.12) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(212,175,55,0.08) 0%, transparent 50%);
}
.media-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.media-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--steel-light);
  animation: mediaParticleFloat linear infinite;
}
@keyframes mediaParticleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
}
.media-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.media-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,144,164,0.15);
  border: 1px solid rgba(74,144,164,0.35);
  color: var(--steel-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.media-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(38px, 7vw, 72px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 16px;
  line-height: 1.05;
}
.media-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.65);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
.media-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.media-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 28px;
}
.media-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.media-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.media-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
}
.media-hero-access-legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.media-access-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.media-access-pill i { font-size: 11px; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.media-tabs-section {
  background: var(--navy-dark);
  padding: 32px 0;
  border-bottom: 1px solid rgba(74,144,164,0.15);
}
.media-tabs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.media-tab-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  transition: all 0.25s;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.media-tab-card i { font-size: 22px; margin-bottom: 2px; }
.media-tab-title { font-size: 13px; line-height: 1.2; }
.media-tab-count {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.media-tab-card:hover,
.media-tab-card.active {
  transform: translateY(-3px);
  border-color: var(--steel-light);
  color: #fff;
  background: rgba(74,144,164,0.12);
}
.media-tab-all   i { color: var(--steel-light); }
.media-tab-training i { color: #f59e0b; }
.media-tab-match i { color: #ef4444; }
.media-tab-edu   i { color: var(--gold); }
.media-tab-locked i { color: #a855f7; }
.media-tab-all.active   { border-color: var(--steel-light); }
.media-tab-training.active { border-color: #f59e0b; }
.media-tab-match.active { border-color: #ef4444; }
.media-tab-edu.active   { border-color: var(--gold); }
.media-tab-locked.active { border-color: #a855f7; }

/* ── Library / Filter bar ──────────────────────────────────────── */
.media-library {
  background: #0d1e35;
  padding: 48px 0 64px;
}
.media-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.media-filter-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.media-filter-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65);
  padding: 8px 18px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  font-family: inherit;
}
.media-filter-btn:hover { border-color: var(--steel-light); color: #fff; }
.media-filter-btn.active {
  background: var(--steel);
  border-color: var(--steel-light);
  color: #fff;
}
.media-filter-right { display: flex; gap: 12px; align-items: center; }
.media-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.media-search-wrap i {
  position: absolute;
  left: 12px;
  color: rgba(255,255,255,0.35);
  font-size: 13px;
}
.media-search-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  color: #fff;
  padding: 9px 16px 9px 36px;
  font-size: 13px;
  width: 220px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.media-search-input:focus {
  outline: none;
  border-color: var(--steel-light);
}
.media-search-input::placeholder { color: rgba(255,255,255,0.3); }

.media-no-results {
  text-align: center;
  color: rgba(255,255,255,0.4);
  padding: 60px 0;
  font-size: 16px;
}
.media-no-results i { font-size: 48px; display: block; margin-bottom: 16px; opacity: 0.3; }

/* ── Video Grid ────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.media-card {
  background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}
.media-card:hover {
  transform: translateY(-6px);
  border-color: var(--steel-light);
  box-shadow: 0 12px 40px rgba(74,144,164,0.2);
}
.media-card-locked {
  border-color: rgba(168,85,247,0.2);
}
.media-card-locked:hover {
  border-color: rgba(168,85,247,0.5);
  box-shadow: 0 12px 40px rgba(168,85,247,0.15);
}

/* Thumbnail */
.media-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a1628;
}
.media-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
  display: block;
}
.media-card:hover .media-card-img { transform: scale(1.06); }

.media-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
}
.media-card-play i {
  font-size: 40px;
  color: rgba(255,255,255,0);
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s;
  transform: scale(0.8);
}
.media-card:hover .media-card-play { background: rgba(0,0,0,0.3); }
.media-card:hover .media-card-play i {
  color: #fff;
  transform: scale(1);
  background: rgba(74,144,164,0.85);
}
.media-card-locked:hover .media-card-play i {
  background: rgba(168,85,247,0.85);
}

.media-card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
}
.media-card-access {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}
.media-card-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}
.media-card-lock-overlay i { font-size: 28px; }
.media-card-locked:hover .media-card-lock-overlay { opacity: 1; }

/* Card body */
.media-card-body { padding: 14px 16px 16px; }
.media-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.media-card-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--steel-light);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.media-card-views {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 4px;
}
.media-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.media-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.media-card-date {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.media-card-course-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.25);
  padding: 2px 7px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Access section ────────────────────────────────────────────── */
.media-access-section {
  background: var(--navy-deep);
  padding: 60px 0;
  border-top: 1px solid rgba(74,144,164,0.1);
  border-bottom: 1px solid rgba(74,144,164,0.1);
}
.media-access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.media-access-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid;
  border-radius: 14px;
  padding: 20px 22px;
  transition: transform 0.25s;
}
.media-access-card:hover { transform: translateY(-3px); }
.media-access-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.media-access-info { flex: 1; }
.media-access-info h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.media-access-info p {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.media-access-count {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.5px;
}
.media-access-action { flex-shrink: 0; }
.tag-free {
  display: inline-block;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  letter-spacing: 1px;
}
.btn-sm-steel {
  display: inline-block;
  background: rgba(74,144,164,0.15);
  border: 1px solid var(--steel-light);
  color: var(--steel-light);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-sm-steel:hover { background: var(--steel); color: #fff; }
.btn-sm-gold {
  display: inline-block;
  background: rgba(212,175,55,0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-sm-gold:hover { background: var(--gold); color: #0a1628; }
.btn-sm-purple {
  display: inline-block;
  background: rgba(168,85,247,0.15);
  border: 1px solid #a855f7;
  color: #a855f7;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-sm-purple:hover { background: #a855f7; color: #fff; }

/* ── Locked section ────────────────────────────────────────────── */
.media-locked-section {
  background: linear-gradient(135deg, #0a1628 0%, #130a2a 100%);
  padding: 60px 0;
}
.media-locked-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}
.media-locked-icon {
  width: 64px;
  height: 64px;
  background: rgba(168,85,247,0.15);
  border: 2px solid rgba(168,85,247,0.35);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #a855f7;
  flex-shrink: 0;
}
.media-locked-header h2 {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
}
.media-locked-header p {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.media-locked-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.media-locked-card {
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 14px;
  overflow: hidden;
}
.media-locked-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0a1a;
}
.media-locked-blur { position: absolute; inset: 0; }
.media-locked-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  z-index: 2;
}
.media-locked-badge i {
  font-size: 28px;
  color: rgba(168,85,247,0.8);
}
.media-locked-body { padding: 16px 18px 20px; }
.media-locked-duration {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.media-locked-body h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}
.media-locked-body p {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  margin-bottom: 14px;
}
.media-locked-cta { }
.btn-locked-get {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(168,85,247,0.15);
  border: 1px solid rgba(168,85,247,0.4);
  color: #a855f7;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-locked-get:hover { background: #a855f7; color: #fff; }

.media-locked-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: rgba(168,85,247,0.07);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 12px;
}
.media-locked-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
}
.media-locked-rule i { color: #a855f7; }
.btn-primary-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold), #b8922a);
  color: #0a1628;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s;
}
.btn-primary-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.35); }

/* ── Academy CTA ────────────────────────────────────────────────── */
.media-academy-cta {
  background: linear-gradient(135deg, #0d1e35 0%, #071020 100%);
  padding: 60px 0;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.media-academy-cta-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 20px;
  padding: 36px 40px;
  flex-wrap: wrap;
}
.media-academy-cta-icon {
  width: 80px;
  height: 80px;
  background: rgba(212,175,55,0.12);
  border: 2px solid rgba(212,175,55,0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--gold);
  flex-shrink: 0;
}
.media-academy-cta-text { flex: 1; min-width: 260px; }
.media-academy-cta-text h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}
.media-academy-cta-text p {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.media-academy-cta-programs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.media-academy-cta-programs span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
}
.btn-media-academy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--gold), #b8922a);
  color: #0a1628;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s;
  flex-shrink: 0;
}
.btn-media-academy:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(212,175,55,0.4); }

/* ── Modal ─────────────────────────────────────────────────────── */
.media-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.media-modal-inner {
  background: #0d1e35;
  border: 1px solid rgba(74,144,164,0.25);
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.media-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.media-modal-close:hover { background: rgba(239,68,68,0.3); border-color: #ef4444; }
.media-modal-player {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.media-modal-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.media-player-locked-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-modal-info { padding: 24px 28px 28px; }
.media-modal-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.media-modal-meta span { display: flex; align-items: center; gap: 5px; }
.media-modal-title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.3;
}
.media-modal-desc {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 16px;
}
.media-modal-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.media-tag {
  background: rgba(74,144,164,0.12);
  border: 1px solid rgba(74,144,164,0.25);
  color: var(--steel-light);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 5px;
}
.media-modal-blocked {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10,22,40,0.95);
  border-top: 1px solid rgba(168,85,247,0.3);
  border-radius: 0 0 16px 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.media-modal-blocked-inner {
  text-align: center;
  max-width: 380px;
}
.media-modal-blocked-inner > i {
  font-size: 44px;
  color: #a855f7;
  display: block;
  margin-bottom: 12px;
}
.media-modal-blocked-inner h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.media-modal-blocked-inner p {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  margin-bottom: 20px;
}
.media-modal-blocked-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-modal-action {
  display: inline-block;
  background: #a855f7;
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-modal-action:hover { background: #9333ea; }
.btn-modal-action-outline {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-modal-action-outline:hover { border-color: #fff; color: #fff; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .media-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .media-tabs-grid { grid-template-columns: repeat(3, 1fr); }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .media-access-grid { grid-template-columns: 1fr; }
  .media-locked-grid { grid-template-columns: repeat(2, 1fr); }
  .media-academy-cta-inner { flex-direction: column; text-align: center; }
  .media-academy-cta-programs { justify-content: center; }
  .media-filter-bar { flex-direction: column; align-items: flex-start; }
  .media-search-input { width: 100%; }
}
@media (max-width: 640px) {
  .media-tabs-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid { grid-template-columns: 1fr; }
  .media-locked-grid { grid-template-columns: 1fr; }
  .media-hero-stats { gap: 0; }
  .media-stat { padding: 10px 16px; }
  .media-stat-num { font-size: 26px; }
  .media-modal-inner { margin: 0; border-radius: 16px; }
  .media-locked-footer { flex-direction: column; text-align: center; }
}


/* ════════════════════════════════════════════════════════════
   HOME — Premium Hero (Apple / Olympic / FIFA level)
   ════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0a1628;
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 70% 50%, rgba(74,144,164,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(212,175,55,.10) 0%, transparent 55%),
    linear-gradient(160deg, #0d1b3e 0%, #0a1628 60%, #060e1e 100%);
}
.home-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74,144,164,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,144,164,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.home-hero-glow1 {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,144,164,.12) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
}
.home-hero-glow2 {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.08) 0%, transparent 70%);
  bottom: -50px; left: 100px;
  pointer-events: none;
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 120px 0 80px;
}

/* Badges */
.home-hero-badges {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hhb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
}
.hhb-gov {
  color: #d4af37;
  border-color: rgba(212,175,55,.3);
  background: rgba(212,175,55,.08);
}
.hhb-int {
  color: #4a90a4;
  border-color: rgba(74,144,164,.3);
  background: rgba(74,144,164,.08);
}

/* Title */
.home-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
  color: #fff;
  margin: 0 0 20px;
}
.home-hero-accent {
  background: linear-gradient(135deg, #4a90a4, #7ec8e3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-hero-sub {
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.home-hero-sub strong { color: rgba(255,255,255,.9); }
.home-hero-slogan {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 28px;
}

/* Partner strip */
.home-hero-partners {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  width: fit-content;
}
.hhp-label {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.hhp-logos { display: flex; align-items: center; gap: 12px; }
.hhp-logo { display: flex; align-items: center; }
.hhp-divider { width: 1px; height: 20px; background: rgba(255,255,255,.15); }
.hhp-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

/* CTA buttons */
.home-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hha-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #4a90a4, #3a7a8e);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 24px rgba(74,144,164,.35);
}
.hha-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(74,144,164,.45);
}
.hha-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  transition: all .2s;
}
.hha-secondary:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* RIGHT visual */
.home-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhv-emblem-wrap {
  position: relative;
  width: 320px; height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhv-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(74,144,164,.2);
  animation: ringRotate 20s linear infinite;
}
.hhv-ring-1 { width: 320px; height: 320px; border-color: rgba(74,144,164,.15); }
.hhv-ring-2 { width: 260px; height: 260px; border-color: rgba(74,144,164,.2); animation-duration: 15s; animation-direction: reverse; }
.hhv-ring-3 { width: 200px; height: 200px; border-color: rgba(212,175,55,.15); animation-duration: 25s; }
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hhv-glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,144,164,.25) 0%, transparent 70%);
}
.hhv-emblem {
  width: 160px; height: 160px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 30px rgba(74,144,164,.4));
}

/* Floating badges */
.hhv-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(13,27,62,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
  text-align: center;
}
.hhv-float i { font-size: 16px; margin-bottom: 4px; color: var(--steel-light); }
.hhv-float strong { font-size: 13px; font-weight: 800; color: #fff; line-height: 1; }
.hhv-float span { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .5px; }
.hhv-float-1 { top: 20px;  right: -20px; }
.hhv-float-2 { bottom: 60px; left: -30px; }
.hhv-float-3 { bottom: 10px; right: 0; }

.home-hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.3);
  font-size: 1.2rem;
  animation: scrollBounce 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── STATS STRIP ──────────────────────────────────────────── */
.home-stats-strip {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}
.hss-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  divide-x: 1px solid var(--border-color);
}
.hss-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 20px;
  border-right: 1px solid var(--border-color);
  text-align: center;
  transition: background .2s;
}
.hss-item:last-child { border-right: none; }
.hss-item:hover { background: var(--bg-light); }
.hss-item i { font-size: 1.4rem; color: var(--steel); margin-bottom: 6px; }
.hss-item strong {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  color: var(--navy-deep);
  line-height: 1;
}
.hss-item span {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── ECOSYSTEM SECTION ───────────────────────────────────── */
.home-ecosystem {
  background: var(--bg-light);
}
.home-eco-header { text-align: center; margin-bottom: 56px; }
.home-eco-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--steel);
}
.eco-label-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--steel), transparent);
}
.home-eco-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  color: var(--navy-deep);
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.home-eco-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.home-eco-invest {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hei-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 18px;
}
.hei-badge i {
  font-size: 1.3rem;
  color: var(--steel);
}
.hei-badge div { display: flex; flex-direction: column; }
.hei-badge strong { font-size: 14px; font-weight: 800; color: var(--navy-deep); }
.hei-badge span { font-size: 11px; color: var(--text-muted); }

/* Ecosystem grid */
.home-eco-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.home-eco-card {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 20px;
  padding: 28px 22px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.home-eco-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,.1);
  border-color: var(--eco-color, var(--steel));
}
.home-eco-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--eco-color, var(--steel));
}
.hec-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.hec-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--eco-color) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--eco-color, var(--steel));
}
.hec-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--eco-color, var(--steel));
  background: color-mix(in srgb, var(--eco-color) 10%, transparent);
  padding: 3px 8px;
  border-radius: 8px;
}
.hec-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 4px;
}
.hec-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.hec-line {
  height: 2px;
  background: linear-gradient(90deg, var(--eco-color) 0%, transparent 100%);
  margin-top: 16px;
  border-radius: 2px;
  opacity: .4;
}

.home-eco-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hec-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: all .2s;
}
.hec-btn-main:hover { background: var(--navy-mid); transform: translateY(-2px); }
.hec-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1.5px solid var(--border-color);
  color: var(--navy-deep);
  font-size: 14px;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: all .2s;
  background: #fff;
}
.hec-btn-sec:hover { border-color: var(--steel); color: var(--steel); }

/* ── GOVERNMENT PARTNERSHIP ─────────────────────────────── */
.home-gov { background: #fff; }
.home-gov-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hgt-title {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 12px 0 16px;
  line-height: 1.15;
}
.hgt-body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.hgt-badges { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.hgt-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--navy-deep);
  font-weight: 500;
}

/* Gov visual card */
.hgv-card {
  background: var(--navy-deep);
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.08);
}
.hgv-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--steel-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hgv-card-header i { font-size: 1.1rem; }
.hgv-parties {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.hgv-party {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hgv-party strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.hgv-party span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.hgv-arrow {
  font-size: 1.5rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}
.hgv-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.hgv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.hgv-item i { color: var(--steel-light); width: 16px; }
.hgv-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 8px;
  padding: 8px 14px;
}

/* ── SERVICES GRID ───────────────────────────────────────── */
.home-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.home-svc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all .25s;
}
.home-svc-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-3px);
}
.hsvc-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--svc-color) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--svc-color, #4a90a4);
  flex-shrink: 0;
}
.hsvc-text { flex: 1; }
.hsvc-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.hsvc-text span {
  font-size: 12px;
  color: rgba(255,255,255,.45);
}
.hsvc-arrow {
  color: rgba(255,255,255,.25);
  font-size: 12px;
  transition: color .2s, transform .2s;
}
.home-svc-card:hover .hsvc-arrow {
  color: var(--svc-color, #4a90a4);
  transform: translateX(4px);
}

/* ── LEAGUES GRID ────────────────────────────────────────── */
.home-leagues { background: #fff; }
.home-leagues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.home-league-card {
  background: var(--bg-light);
  border: 1.5px solid var(--border-color);
  border-radius: 24px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.home-league-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,27,62,.12);
  border-color: var(--lg-color);
}
.home-league-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lg-color) 6%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
.hlc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.hlc-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--lg-color) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--lg-color);
}
.hlc-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--lg-color);
  background: color-mix(in srgb, var(--lg-color) 10%, transparent);
  padding: 4px 10px;
  border-radius: 10px;
}
.hlc-level {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lg-color);
  margin-bottom: 6px;
}
.hlc-name {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  color: var(--navy-deep);
  margin: 0 0 10px;
}
.hlc-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}
.hlc-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--lg-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── STANDARDS ───────────────────────────────────────────── */
.home-std-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.home-std-card {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.home-std-card:hover {
  border-color: var(--steel);
  box-shadow: 0 6px 20px rgba(13,27,62,.08);
}
.hsc-logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--navy-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.2;
}
.hsc-text { flex: 1; }
.hsc-text strong { display: block; font-size: 12px; font-weight: 700; color: var(--navy-deep); margin-bottom: 2px; }
.hsc-text span { font-size: 11px; color: var(--text-muted); }
.hsc-check { color: #22c55e; font-size: 1.1rem; flex-shrink: 0; }

/* ── FINAL CTA ───────────────────────────────────────────── */
.home-final-cta {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
}
.home-final-cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(74,144,164,.15) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 10% 50%, rgba(212,175,55,.08) 0%, transparent 60%);
}
.home-final-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 0;
}
.hfc-text .section-label { color: var(--steel-light); }
.hfc-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  color: #fff;
  margin: 12px 0 16px;
}
.hfc-text p { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.7; }
.hfc-plans {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.hfc-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
}
.hfc-plan i { font-size: 1.2rem; color: var(--steel-light); margin-bottom: 6px; }
.hfc-plan strong { font-size: 13px; font-weight: 700; color: #fff; }
.hfc-plan span { font-size: 12px; color: var(--gold); font-weight: 700; }
.hfc-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.hfc-btn-academy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #d4af37, #b8942e);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: all .2s;
}
.hfc-btn-academy:hover { transform: translateY(-2px); opacity: .9; }
.hfc-payments {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
}

/* ════════════════════════════════════════════════════════════
   ECOSYSTEM PAGE
   ════════════════════════════════════════════════════════════ */

/* ── ECO HERO ─────────────────────────────────────────────── */
.eco-hero {
  position: relative;
  padding: 140px 0 90px;
  background: var(--navy-deep);
  overflow: hidden;
  text-align: center;
}
.eco-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(74,144,164,.2) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 80% 80%, rgba(212,175,55,.1) 0%, transparent 60%),
    linear-gradient(160deg, #0d1b3e 0%, #0a1628 60%);
}
.eco-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74,144,164,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,144,164,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.eco-hero-content {
  position: relative;
  z-index: 1;
}
.eco-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,144,164,.12);
  border: 1px solid rgba(74,144,164,.3);
  color: var(--steel-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 28px;
}
.eco-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  color: #fff;
  line-height: 0.9;
  letter-spacing: -2px;
  margin: 0 0 24px;
}
.eco-hero-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,.6);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.eco-hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ehs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.ehs-item i { font-size: 1.4rem; margin-bottom: 6px; }
.ehs-item strong { font-size: 1.6rem; font-weight: 900; font-family: 'Montserrat', sans-serif; line-height: 1; }
.ehs-item span { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1px; }
.eco-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── ECO POSITIONING ─────────────────────────────────────── */
.eco-position { background: #fff; }
.eco-position-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.eco-pos-title {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 12px 0 16px;
  line-height: 1.15;
}
.eco-pos-body { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.eco-pos-body strong { color: var(--navy-deep); }
.eco-pos-roles { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.epr-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-light);
}
.epr-item i {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(74,144,164,.1);
  color: var(--steel);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.epr-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--navy-deep); }
.epr-item span { font-size: 12px; color: var(--text-muted); }

/* Ecosystem diagram */
.eco-diagram {
  background: var(--navy-deep);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.06);
}
.eco-diag-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.eco-diag-center span { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); }
.eco-diag-nodes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.edn-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--nd-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nd-color) 25%, transparent);
}
.edn-node i { font-size: 1.4rem; color: var(--nd-color); }
.edn-node span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); }
.eco-diag-label {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ── INFRA CARDS ─────────────────────────────────────────── */
.eco-infra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.eco-infra-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.eco-infra-card:hover {
  border-color: var(--inf-color);
  background: rgba(255,255,255,.06);
}
.eco-infra-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--inf-color);
}
.eic-number {
  position: absolute;
  top: 24px; right: 28px;
  font-size: 3rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  color: rgba(255,255,255,.04);
  line-height: 1;
}
.eic-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.eic-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--inf-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--inf-color) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--inf-color);
}
.eic-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--inf-color);
  background: color-mix(in srgb, var(--inf-color) 10%, transparent);
  padding: 4px 12px;
  border-radius: 8px;
}
.eic-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  font-family: 'Montserrat', sans-serif;
}
.eic-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
}
.eic-desc {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin: 0 0 20px;
}
.eic-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.eic-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.eic-features li i { color: var(--inf-color); font-size: 10px; }
.eic-line {
  height: 1px;
  background: linear-gradient(90deg, var(--inf-color) 0%, transparent 100%);
  opacity: .25;
}

/* ── GOV GRID ────────────────────────────────────────────── */
.eco-gov { background: var(--bg-light); }
.eco-gov-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.eco-gov-main {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 24px;
  padding: 32px;
}
.egm-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
.egm-header i { font-size: 1.8rem; color: var(--steel); }
.egm-header h3 { font-size: 16px; font-weight: 800; color: var(--navy-deep); margin: 0 0 2px; }
.egm-header span { font-size: 12px; color: var(--text-muted); }
.egm-parties {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.egm-party {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.egm-party-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.egm-party strong { font-size: 13px; font-weight: 700; color: var(--navy-deep); }
.egm-party span { font-size: 11px; color: var(--text-muted); }
.egm-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.egm-arrow i { font-size: 1.2rem; }
.egm-arrow span { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--steel); }
.egm-commitments h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
}
.egm-commit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.egm-commit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--navy-deep);
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 10px;
}
.egm-commit i { color: var(--steel); font-size: 12px; }
.egm-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.18);
  border-radius: 8px;
  padding: 10px 14px;
}

/* Status cards */
.eco-gov-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.egs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 4px;
}
.egs-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-left-width: 3px;
  border-radius: 14px;
}
.egs-item i { font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; }
.egs-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--navy-deep); margin-bottom: 2px; }
.egs-item span { font-size: 12px; color: var(--text-muted); }

/* ── STANDARDS ───────────────────────────────────────────── */
.eco-std-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.eco-std-card {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.eco-std-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(13,27,62,.1);
}
.esc-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 auto 16px;
}
.esc-name { font-size: 13px; font-weight: 700; color: var(--navy-deep); margin: 0 0 8px; }
.esc-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.esc-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,.08);
  padding: 5px 12px;
  border-radius: 10px;
}

/* ── LEGAL ───────────────────────────────────────────────── */
.eco-legal { position: relative; overflow: hidden; }
.eco-legal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(74,144,164,.12) 0%, transparent 60%);
}
.eco-legal-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  padding: 48px;
}
.eco-legal-icon {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: rgba(74,144,164,.12);
  border: 1px solid rgba(74,144,164,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--steel-light);
  flex-shrink: 0;
}
.eco-legal-text h2 { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0 0 12px; font-family: 'Montserrat', sans-serif; }
.eco-legal-text p { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.eco-legal-text strong { color: rgba(255,255,255,.85); }
.eco-legal-points {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.eco-legal-points span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
}
.eco-legal-points i { color: var(--steel-light); }

/* ── DOCS GRID ───────────────────────────────────────────── */
.eco-docs { background: var(--bg-light); }
.eco-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.eco-doc-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.eco-doc-card:hover {
  border-color: var(--doc-color);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(13,27,62,.1);
}
.eco-doc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--doc-color);
}
.edc-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--doc-color) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--doc-color);
  flex-shrink: 0;
}
.edc-body { flex: 1; }
.edc-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--doc-color);
  display: block;
  margin-bottom: 4px;
}
.edc-title { font-size: 14px; font-weight: 800; color: var(--navy-deep); margin: 0 0 4px; }
.edc-desc { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.edc-arrow {
  color: var(--doc-color);
  font-size: 14px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.eco-doc-card:hover .edc-arrow { opacity: 1; transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Home + Ecosystem
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .home-eco-grid { grid-template-columns: repeat(2, 1fr); }
  .home-std-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-std-grid  { grid-template-columns: repeat(2, 1fr); }
  .eco-docs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-hero-inner { grid-template-columns: 1fr; text-align: center; padding: 100px 0 60px; }
  .home-hero-visual { display: none; }
  .home-hero-badges { justify-content: center; }
  .home-hero-partners { margin: 0 auto 28px; }
  .home-hero-actions { justify-content: center; }
  .hss-grid { grid-template-columns: repeat(2, 1fr); }
  .home-eco-grid { grid-template-columns: 1fr; }
  .home-gov-inner { grid-template-columns: 1fr; }
  .home-svc-grid { grid-template-columns: 1fr; }
  .home-leagues-grid { grid-template-columns: 1fr; }
  .home-std-grid { grid-template-columns: 1fr 1fr; }
  .home-final-cta-inner { grid-template-columns: 1fr; }
  .eco-position-inner { grid-template-columns: 1fr; }
  .eco-pos-right { display: none; }
  .eco-infra-grid { grid-template-columns: 1fr; }
  .eco-gov-grid { grid-template-columns: 1fr; }
  .eco-std-grid { grid-template-columns: 1fr 1fr; }
  .eco-docs-grid { grid-template-columns: 1fr; }
  .eco-legal-inner { flex-direction: column; }
}
@media (max-width: 480px) {
  .hss-grid { grid-template-columns: 1fr 1fr; }
  .home-std-grid { grid-template-columns: 1fr; }
  .eco-std-grid { grid-template-columns: 1fr; }
  .eic-features { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   MISSING UTILITY CLASSES — patch
   ════════════════════════════════════════════════════════════ */

/* gradient-text */
.gradient-text {
  background: linear-gradient(135deg, #d4af37 0%, #4a90a4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* btn-secondary (Ecosystem hero) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
}

/* eco-pos-left (Ecosystem positioning section) */
.eco-pos-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Home hero text column */
.home-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

/* Home gov section columns */
.home-gov-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.home-gov-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-gov-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   REGISTER PAGE — Premium 4-step flow (DS v3.0)
   ═══════════════════════════════════════════════════════════════ */

.reg-page {
  min-height: 100vh;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
}

/* ── TOP BAR ── */
.reg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(13,40,67,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.reg-back {
  display: flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.60);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}
.reg-back:hover { color: #BFD8EB; }
.reg-topbar-logo { height: 36px; width: auto; object-fit: contain; }
.reg-login-link {
  font-size: 13px; color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.reg-login-link strong { color: #BFD8EB; }
.reg-login-link:hover strong { text-decoration: underline; }

/* ── LAYOUT ── */
.reg-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1;
  min-height: calc(100vh - 65px);
}

/* ── SIDEBAR ── */
.reg-sidebar {
  background: linear-gradient(180deg, #0a1f38 0%, #0d2843 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  overflow-y: auto;
}
.reg-sidebar-inner {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.reg-sidebar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(191,216,235,0.10);
  border: 1px solid rgba(191,216,235,0.20);
  color: #BFD8EB;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 7px 14px;
  border-radius: 20px;
  width: fit-content;
}
.reg-sidebar-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.reg-sidebar-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* STEPS */
.reg-steps { display: flex; flex-direction: column; gap: 4px; }
.reg-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background .2s;
  cursor: default;
}
.reg-step.active { background: rgba(191,216,235,0.10); }
.reg-step.done .rs-num { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.30); }
.reg-step.done .rs-num i { display: none; }
.reg-step.done .rs-num .rs-check { display: flex !important; }
.rs-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: rgba(255,255,255,0.50);
  flex-shrink: 0;
  position: relative;
  transition: background .2s, border-color .2s;
}
.reg-step.active .rs-num {
  background: rgba(191,216,235,0.18);
  border-color: rgba(191,216,235,0.40);
  color: #BFD8EB;
}
.rs-check {
  display: none !important;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: #22c55e;
  font-size: 15px;
  position: absolute;
}
.rs-info { display: flex; flex-direction: column; gap: 1px; }
.rs-label { font-size: 11px; color: rgba(255,255,255,0.38); letter-spacing: 1px; text-transform: uppercase; }
.rs-name  { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.75); }
.reg-step.active .rs-name { color: #fff; }

/* TRUST */
.reg-trust { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.reg-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.reg-trust-item i { color: #BFD8EB; font-size: 13px; }

/* ── MAIN AREA ── */
.reg-main {
  background: #f5f8fc;
  padding: 40px 48px 80px;
  overflow-y: auto;
}

/* PROGRESS BAR */
.reg-progress-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.rpb-track {
  flex: 1;
  height: 4px;
  background: rgba(13,40,67,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.rpb-fill {
  height: 100%;
  background: linear-gradient(90deg, #4A7396, #8BB4D0);
  border-radius: 2px;
  transition: width .4s ease;
}
.rpb-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B9BB8;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}

/* STEP PANELS */
.reg-step-panel { display: none; }
.reg-step-panel.active { display: block; }

/* PANEL HEADER */
.reg-panel-header { margin-bottom: 32px; }
.reg-step-tag {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: #6B9BB8;
  margin-bottom: 8px;
}
.reg-panel-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: #0D2843;
  margin-bottom: 8px;
  line-height: 1.15;
}
.reg-panel-sub {
  font-size: 15px;
  color: #808080;
  line-height: 1.65;
  max-width: 560px;
}

/* ── ROLE CARDS ── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.role-card-wrap { position: relative; }
.role-radio { position: absolute; opacity: 0; pointer-events: none; }
.role-card-new {
  position: relative;
  background: #fff;
  border: 2px solid rgba(13,40,67,0.08);
  border-radius: 16px;
  padding: 22px 18px 18px;
  cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  overflow: hidden;
}
.role-card-new::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rc-color, #6B9BB8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.role-card-new:hover {
  border-color: rgba(13,40,67,0.15);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(13,40,67,0.10);
}
.role-card-new.selected {
  border-color: var(--rc-color, #6B9BB8);
  box-shadow: 0 0 0 3px rgba(107,155,184,0.14), 0 8px 28px rgba(13,40,67,0.12);
}
.role-card-new.selected::before { transform: scaleX(1); }

.rc-tag {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  background: var(--rc-color, #6B9BB8);
  color: #fff;
  padding: 3px 8px; border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
}
.rc-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--rc-color, #6B9BB8);
  margin-bottom: 12px;
  transition: background .2s, transform .2s;
}
.role-card-new.selected .rc-icon,
.role-card-new:hover .rc-icon {
  background: rgba(107,155,184,0.12);
  transform: scale(1.06);
}
.rc-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 800;
  color: #0D2843; margin-bottom: 4px;
}
.rc-price {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  color: var(--rc-color, #6B9BB8);
  margin-bottom: 12px;
}
.rc-perms {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.rc-perms li {
  font-size: 12.5px; color: #4a6070;
  display: flex; align-items: center; gap: 7px;
}
.rc-perms li .fa-check { color: var(--rc-color, #6B9BB8); font-size: 10px; }
.rc-select-btn {
  display: block;
  text-align: center;
  padding: 9px;
  border: 1.5px solid var(--rc-color, #6B9BB8);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--rc-color, #6B9BB8);
  transition: background .2s, color .2s;
  font-family: 'Inter', sans-serif;
}
.role-card-new.selected .rc-select-btn {
  background: var(--rc-color, #6B9BB8);
  color: #fff;
}

/* ── FORM SECTIONS ── */
.reg-form-grid { display: flex; flex-direction: column; gap: 28px; margin-bottom: 36px; }
.reg-form-section {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 14px;
  padding: 24px 22px;
}
.rfs-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #0D2843;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(13,40,67,0.06);
}
.rfs-title i { color: #6B9BB8; }
.rfs-optional {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: #808080;
  background: rgba(0,0,0,0.05);
  padding: 2px 7px; border-radius: 4px;
  margin-left: auto;
}
.rfs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rfs-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* FIELDS */
.reg-field { display: flex; flex-direction: column; gap: 5px; }
.reg-field label {
  font-size: 12.5px; font-weight: 600;
  color: #4a6070;
  font-family: 'Inter', sans-serif;
}
.req { color: #C0392B; }
.reg-field input, .reg-field select {
  padding: 10px 13px;
  border: 1.5px solid rgba(13,40,67,0.12);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #0D2843;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.reg-field input:focus, .reg-field select:focus {
  border-color: #6B9BB8;
  box-shadow: 0 0 0 3px rgba(107,155,184,0.15);
}
.reg-field input.field-error { border-color: #C0392B !important; }

/* CONSENTS */
.reg-consents { display: flex; flex-direction: column; gap: 12px; }
.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: #4a6070; cursor: pointer;
}
.consent-row input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: #4A7396;
  margin-top: 1px; flex-shrink: 0;
}
.consent-row a { color: #4A7396; text-decoration: underline; }

/* ── DOCUMENT UPLOAD ── */
.doc-upload-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.doc-upload-card {
  background: #fff;
  border: 1.5px solid rgba(13,40,67,0.08);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: 14px;
  transition: border-color .2s;
}
.doc-upload-card.uploaded { border-color: rgba(34,197,94,0.30); }
.duc-icon {
  width: 48px; height: 48px;
  background: rgba(13,40,67,0.05);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #6B9BB8;
}
.duc-info strong { font-size: 14px; font-weight: 700; color: #0D2843; display: block; margin-bottom: 3px; }
.duc-info span   { font-size: 12px; color: #808080; }
.duc-badge { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; }
.duc-badge.pending { background: rgba(13,40,67,0.06); color: #808080; }
.duc-badge.success { background: rgba(34,197,94,0.10); color: #16a34a; }
.duc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: #0D2843; color: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.duc-btn:hover { background: #2B4C6F; }
.doc-upload-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(191,216,235,0.12);
  border: 1px solid rgba(191,216,235,0.25);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px; color: #4a6070;
  margin-bottom: 32px;
}
.doc-upload-note i { color: #6B9BB8; flex-shrink: 0; margin-top: 2px; }

/* ── PAYMENT SUMMARY ── */
.pay-summary {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.ps-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: #0D2843;
}
.ps-header img { border-radius: 8px; flex-shrink: 0; }
.ps-header strong { font-size: 15px; font-weight: 700; color: #fff; display: block; margin-bottom: 3px; }
.ps-header span   { font-size: 12px; color: rgba(255,255,255,0.55); }
.ps-rows { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.ps-row  { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #4a6070; }
.ps-row strong { color: #0D2843; font-weight: 600; }
.ps-divider { height: 1px; background: rgba(13,40,67,0.07); margin: 4px 0; }
.ps-total { padding-top: 8px; }
.ps-total span { font-size: 15px; font-weight: 700; color: #0D2843; }
.ps-total strong {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; color: #0D2843;
}
.ps-operator {
  padding: 10px 22px;
  background: rgba(13,40,67,0.03);
  border-top: 1px solid rgba(13,40,67,0.06);
  font-size: 12px; color: #808080;
  display: flex; align-items: center; gap: 7px;
}
.text-green { color: #16a34a; }

/* PAYMENT METHODS */
.pay-methods { margin-bottom: 28px; }
.pm-title {
  font-size: 14px; font-weight: 700; color: #0D2843;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 12px;
}
.pm-grid { display: flex; flex-direction: column; gap: 8px; }
.pm-card input { display: none; }
.pmc-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid rgba(13,40,67,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.pm-card.selected .pmc-inner {
  border-color: #4A7396;
  box-shadow: 0 0 0 3px rgba(74,115,150,0.12);
}
.pmc-logo {
  width: 48px; height: 32px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.kaspi-logo { background: #f14635; color: #fff; }
.halyk-logo { background: #09a347; color: #fff; }
.card-logo  { background: #0D2843; color: #BFD8EB; font-size: 18px; }
.pmc-info strong { font-size: 14px; font-weight: 600; color: #0D2843; display: block; margin-bottom: 2px; }
.pmc-info span   { font-size: 12px; color: #808080; }
.pmc-check { margin-left: auto; color: rgba(13,40,67,0.12); font-size: 18px; transition: color .2s; }
.pm-card.selected .pmc-check { color: #4A7396; }
.pay-secure {
  text-align: center;
  font-size: 12px; color: #808080;
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.pay-secure i { color: #22c55e; }

/* NAV BUTTONS */
.reg-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 16px;
}
.reg-btn-next {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  color: #fff; border: none;
  border-radius: 12px;
  font-size: 15px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.reg-btn-next:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(74,115,150,.40); }
.reg-btn-pay {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 36px;
  background: linear-gradient(135deg, #2B4C6F, #4A7396);
  color: #fff; border: none;
  border-radius: 12px;
  font-size: 16px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.reg-btn-pay:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(74,115,150,.45); }
.reg-btn-pay:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.reg-btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: transparent;
  border: 1.5px solid rgba(13,40,67,0.15);
  color: #4a6070;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.reg-btn-back:hover { background: rgba(13,40,67,0.05); border-color: rgba(13,40,67,0.25); }
.reg-alert {
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.25);
  color: #C0392B;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin: 12px 0;
}

/* SUCCESS */
.reg-success {
  text-align: center;
  padding: 60px 24px;
  max-width: 500px;
  margin: 0 auto;
}
.rs-icon-wrap {
  width: 80px; height: 80px;
  background: rgba(34,197,94,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: #22c55e;
  margin: 0 auto 24px;
  animation: successPop .5s ease;
}
@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.rs-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 800;
  color: #0D2843; margin-bottom: 10px;
}
.rs-sub { font-size: 15px; color: #808080; line-height: 1.65; margin-bottom: 28px; }
.rs-card {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
}
.rsc-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.rsc-row span { color: #808080; }
.rsc-row strong { color: #0D2843; font-weight: 600; }
.status-pending-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(212,175,55,0.12); color: #b8860b;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
}
.rs-actions { display: flex; flex-direction: column; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD PAGE — Premium (DS v3.0)
   ═══════════════════════════════════════════════════════════════ */
.dash-page { background: #f0f4f8; min-height: 100vh; }

/* ── DASH HEADER ── */
.dash-header {
  background: linear-gradient(135deg, #0D2843 0%, #1a3d63 100%);
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.dash-user-info { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 220px; }
.dash-avatar {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #fff;
  position: relative;
  flex-shrink: 0;
  border: 3px solid rgba(191,216,235,0.25);
}
.dash-status-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #0D2843;
}
.dash-status-dot.active  { background: #22c55e; }
.dash-status-dot.pending { background: #d4af37; }
.dash-status-dot.expired { background: #ef4444; }
.dash-welcome { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.dash-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #fff; margin-bottom: 6px;
}
.dash-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-role-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
}
.role-athlete { background: rgba(74,144,164,0.20); color: #8BB4D0; }
.role-coach   { background: rgba(212,175,55,0.18); color: #d4af37; }
.role-referee { background: rgba(168,85,247,0.18); color: #c084fc; }
.role-user    { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.dash-member-id {
  font-size: 12px; color: rgba(255,255,255,0.45);
  display: flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif;
}
.dash-member-id i { color: #BFD8EB; font-size: 11px; }
.dash-header-stats {
  display: flex;
  gap: 24px;
}
.dhs-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 52px;
}
.dhs-item i { font-size: 16px; margin-bottom: 2px; }
.dhs-item strong { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; }
.dhs-item span   { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.dash-header-actions { display: flex; gap: 10px; align-items: center; }
.dash-notif-btn {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.70);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background .2s;
}
.dash-notif-btn:hover { background: rgba(255,255,255,0.12); }
.notif-count {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0D2843;
}
.dash-id-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  background: rgba(191,216,235,0.12);
  border: 1px solid rgba(191,216,235,0.25);
  color: #BFD8EB;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.dash-id-btn:hover { background: rgba(191,216,235,0.20); }

/* NOTIF PANEL */
.dash-notif-panel {
  display: none;
  background: #fff;
  border-bottom: 1px solid rgba(13,40,67,0.08);
  box-shadow: 0 4px 20px rgba(13,40,67,0.10);
}
.dash-notif-panel.visible { display: block; }
.dash-notif-panel .container { padding-top: 12px; padding-bottom: 12px; }
.dnp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; color: #0D2843; font-size: 14px; }
.dnp-close { background: none; border: none; color: #808080; cursor: pointer; font-size: 16px; }
.dnp-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(13,40,67,0.05);
  position: relative;
}
.dnp-item.read { opacity: 0.55; }
.dnp-item i { font-size: 16px; margin-top: 2px; }
.dnp-item.type-success i { color: #22c55e; }
.dnp-item.type-info    i { color: #4A7396; }
.dnp-text span  { font-size: 13.5px; color: #0D2843; display: block; margin-bottom: 3px; }
.dnp-text small { font-size: 11.5px; color: #808080; }
.dnp-dot {
  width: 8px; height: 8px;
  background: #4A7396; border-radius: 50%;
  position: absolute; right: 0; top: 14px;
}

/* ── BODY ── */
.dash-body { padding: 28px 0 80px; }

/* TAB NAV */
.dash-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(13,40,67,0.06);
  overflow-x: auto;
}
.dash-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  background: none; border: none;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  color: #808080;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.dash-tab i { font-size: 15px; }
.dash-tab:hover { background: rgba(13,40,67,0.04); color: #0D2843; }
.dash-tab.active { background: #0D2843; color: #fff; }

/* TAB CONTENT */
.dash-tab-content { display: none; }
.dash-tab-content.active { display: block; }

/* ── LICENSE TAB ── */
.dash-two-col { display: grid; grid-template-columns: 420px 1fr; gap: 28px; align-items: start; }

/* LICENSE CARD */
.license-card-wrap { display: flex; flex-direction: column; gap: 20px; }
.license-card {
  position: relative;
  background: linear-gradient(135deg, #0D2843 0%, #1a3a5c 50%, #0D2843 100%);
  border-radius: 20px;
  padding: 28px 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(13,40,67,0.30);
  aspect-ratio: 1.586;
}
.lc-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(191,216,235,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.lc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lc-emblem { width: 36px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); }
.lc-org    { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; color: rgba(255,255,255,0.45); text-transform: uppercase; font-family: 'Montserrat', sans-serif; }
.lc-title  { font-size: 13px; font-weight: 800; color: #BFD8EB; letter-spacing: 1px; font-family: 'Montserrat', sans-serif; }
.lc-body { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.lc-avatar {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 800; color: #fff;
  border: 2px solid rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.lc-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.lc-role { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #BFD8EB; margin-bottom: 4px; font-family: 'Montserrat', sans-serif; }
.lc-id   { font-size: 11px; color: rgba(255,255,255,0.45); font-family: 'Inter', sans-serif; }
.lc-footer { display: flex; align-items: center; justify-content: space-between; }
.lc-dates { display: flex; gap: 20px; }
.lc-dates div { display: flex; flex-direction: column; gap: 2px; }
.lc-dates span   { font-size: 10px; color: rgba(255,255,255,0.40); font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; }
.lc-dates strong { font-size: 13px; color: #fff; font-weight: 600; font-family: 'Inter', sans-serif; }
.lc-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
}
.lc-status.active { background: rgba(34,197,94,0.20); color: #4ade80; border: 1px solid rgba(34,197,94,0.30); }
.lc-qr-hint {
  position: absolute; bottom: 16px; right: 20px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: rgba(255,255,255,0.30);
}
.lc-qr-hint i { font-size: 16px; color: rgba(255,255,255,0.25); }

/* QR BLOCK */
.license-qr-block {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(13,40,67,0.07);
}
.lqb-qr { display: flex; justify-content: center; margin-bottom: 12px; }
.license-qr-block p { font-size: 12.5px; color: #808080; margin-bottom: 12px; }
.lqb-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #4A7396;
  text-decoration: none;
}
.lqb-link:hover { text-decoration: underline; }

/* LICENSE DETAILS */
.license-details { display: flex; flex-direction: column; gap: 20px; }
.ld-section {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 14px;
  padding: 22px 20px;
}
.ld-title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #0D2843; margin-bottom: 14px; }
.ld-status-block {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.ld-status-block.active { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.20); }
.ld-status-block i { font-size: 24px; color: #22c55e; }
.ld-status-block strong { font-size: 14px; font-weight: 700; color: #0D2843; display: block; margin-bottom: 3px; }
.ld-status-block span   { font-size: 13px; color: #808080; }

.ldp-label { display: flex; justify-content: space-between; font-size: 13px; color: #808080; margin-bottom: 8px; }
.ldp-label strong { color: #0D2843; font-weight: 600; }
.ldp-track { height: 6px; background: rgba(13,40,67,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.ldp-fill  { height: 100%; background: linear-gradient(90deg, #4A7396, #22c55e); border-radius: 3px; }
.ldp-dates { display: flex; justify-content: space-between; font-size: 11px; color: #B0BEC5; }

.ld-perms { display: flex; flex-direction: column; gap: 8px; }
.ldp-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #0D2843; }
.ldp-item i { color: #22c55e; font-size: 11px; }

.ld-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── PROFILE TAB ── */
.profile-card {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pc-avatar-wrap { position: relative; }
.pc-avatar {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 800; color: #fff;
  border: 3px solid rgba(107,155,184,0.25);
}
.pc-photo-btn {
  position: absolute; bottom: 0; right: -2px;
  width: 28px; height: 28px;
  background: #0D2843; color: #BFD8EB;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
}
.pc-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: #0D2843; }
.pc-role { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; font-family: 'Montserrat', sans-serif; }
.pc-member-id { font-size: 12.5px; color: #808080; display: flex; align-items: center; gap: 6px; }
.pc-member-id i { color: #BFD8EB; font-size: 12px; }
.pc-stats { display: flex; gap: 16px; width: 100%; padding-top: 14px; border-top: 1px solid rgba(13,40,67,0.06); justify-content: center; }
.pc-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pc-stats strong { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: #808080; text-transform: uppercase; letter-spacing: 0.5px; }
.pc-stats span   { font-size: 14px; font-weight: 600; }

.profile-data { display: flex; flex-direction: column; gap: 16px; }
.pd-section { background: #fff; border: 1px solid rgba(13,40,67,0.07); border-radius: 14px; padding: 22px 20px; }
.pd-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pd-section-header h4 { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #0D2843; }
.pd-edit-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #4A7396; background: none; border: none; cursor: pointer; }
.pd-grid { display: flex; flex-direction: column; gap: 0; }
.pd-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(13,40,67,0.05); }
.pd-row:last-child { border-bottom: none; }
.pd-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #808080; }
.pd-label i { color: #BFD8EB; font-size: 13px; width: 16px; text-align: center; }
.pd-value { font-size: 13.5px; font-weight: 600; color: #0D2843; display: flex; align-items: center; gap: 8px; }
.pd-value.blurred span { filter: blur(5px); user-select: none; }
.pd-reveal { background: none; border: none; color: #6B9BB8; cursor: pointer; font-size: 13px; }
.pd-edit-input { border: 1.5px solid #6B9BB8; border-radius: 6px; padding: 4px 8px; font-size: 13px; color: #0D2843; outline: none; }
.pd-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.pd-sport-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: rgba(13,40,67,0.03); border-radius: 10px; }
.pd-sport-item i { font-size: 20px; color: #6B9BB8; margin-bottom: 2px; }
.pd-sport-item strong { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: #0D2843; }
.pd-sport-item span   { font-size: 11px; color: #808080; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Montserrat', sans-serif; }

/* ── EDUCATION TAB ── */
.edu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.edu-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: #0D2843; }
.edu-sub   { font-size: 14px; color: #808080; margin-top: 4px; }
.edu-courses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.edu-course-card {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ecc-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
  font-family: 'Montserrat', sans-serif; width: fit-content;
}
.edu-course-card.done  .ecc-status-badge { background: rgba(34,197,94,0.10); color: #16a34a; }
.edu-course-card.active .ecc-status-badge { background: rgba(74,115,150,0.12); color: #4A7396; }
.edu-course-card.locked .ecc-status-badge { background: rgba(0,0,0,0.06); color: #808080; }
.ecc-title { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: #0D2843; }
.ecc-modules { font-size: 13px; color: #808080; display: flex; align-items: center; gap: 7px; }
.ecc-progress-wrap { display: flex; align-items: center; gap: 10px; }
.ecc-progress-track { flex: 1; height: 5px; background: rgba(13,40,67,0.08); border-radius: 3px; overflow: hidden; }
.edu-course-card.done .ecc-progress-fill   { background: #22c55e; }
.edu-course-card.active .ecc-progress-fill { background: #4A7396; }
.edu-course-card.locked .ecc-progress-fill { background: #B0BEC5; }
.ecc-progress-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.ecc-progress-pct  { font-size: 12px; font-weight: 700; color: #0D2843; white-space: nowrap; }
.ecc-cert { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #16a34a; font-weight: 600; }
.edu-course-card.locked { opacity: 0.65; }

/* ── TOURNAMENTS TAB ── */
.tourn-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.tourn-header h2 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: #0D2843; }
.tourn-list {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}
.tourn-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(13,40,67,0.05);
  transition: background .15s;
}
.tourn-row:last-child { border-bottom: none; }
.tourn-row:hover { background: rgba(13,40,67,0.02); }
.tr-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.tr-name  { font-size: 14px; font-weight: 600; color: #0D2843; display: block; margin-bottom: 4px; }
.tr-date  { font-size: 12.5px; color: #808080; display: flex; align-items: center; gap: 5px; }
.tr-date i { font-size: 11px; }
.tr-badge { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.tr-arrow { margin-left: auto; color: rgba(13,40,67,0.25); font-size: 13px; padding: 8px; transition: color .2s; }
.tr-arrow:hover { color: #4A7396; }

/* RATING BLOCK */
.rating-block {
  background: linear-gradient(135deg, #0D2843, #1a3d63);
  border-radius: 16px;
  padding: 24px 22px;
  color: #fff;
}
.rb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rb-header h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: #fff; }
.rb-league { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; background: rgba(212,175,55,0.20); color: #d4af37; padding: 4px 10px; border-radius: 20px; font-family: 'Montserrat', sans-serif; }
.rb-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.rbs-num { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 900; color: #BFD8EB; line-height: 1; }
.rbs-info { display: flex; flex-direction: column; gap: 4px; }
.rbs-info span { font-size: 14px; color: rgba(255,255,255,0.55); }
.rbs-info small { font-size: 11.5px; color: rgba(255,255,255,0.35); }
.rbp-label { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,0.50); margin-bottom: 8px; }
.rbp-label strong { color: #BFD8EB; font-weight: 600; }
.rbp-track { height: 6px; background: rgba(255,255,255,0.10); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.rbp-fill  { height: 100%; background: linear-gradient(90deg, #4A7396, #BFD8EB); border-radius: 3px; }
.rbp-labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.30); }

/* ── PAYMENTS TAB ── */
.pay-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.pay-header-row h2 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: #0D2843; }
.pay-total-badge { background: #fff; border: 1px solid rgba(13,40,67,0.07); border-radius: 12px; padding: 12px 18px; text-align: right; }
.pay-total-badge span { font-size: 12px; color: #808080; display: block; margin-bottom: 4px; }
.pay-total-badge strong { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; color: #0D2843; }
.pay-list { background: #fff; border: 1px solid rgba(13,40,67,0.07); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.pay-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(13,40,67,0.05); }
.pay-row:last-child { border-bottom: none; }
.pr-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.pay-row.paid .pr-icon    { background: rgba(34,197,94,0.10); }
.pay-row.pending .pr-icon { background: rgba(212,175,55,0.12); }
.pr-info { flex: 1; }
.pr-info strong { font-size: 14px; font-weight: 600; color: #0D2843; display: block; margin-bottom: 4px; }
.pr-info span   { font-size: 12px; color: #808080; display: flex; align-items: center; gap: 5px; }
.pr-amount { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 800; }
.pr-status { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; font-family: 'Montserrat', sans-serif; }
.pr-status.paid    { background: rgba(34,197,94,0.10); color: #16a34a; }
.pr-status.pending { background: rgba(212,175,55,0.12); color: #b8860b; }
.pay-cta-block {
  background: #fff; border: 1px solid rgba(13,40,67,0.07); border-radius: 14px;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pcb-info { display: flex; align-items: center; gap: 12px; }
.pcb-info i { font-size: 22px; color: #6B9BB8; }
.pcb-info strong { font-size: 14px; font-weight: 700; color: #0D2843; display: block; margin-bottom: 3px; }
.pcb-info span   { font-size: 13px; color: #808080; }

/* ── MEDIA TAB ── */
.media-access-info { background: #fff; border: 1px solid rgba(13,40,67,0.07); border-radius: 16px; overflow: hidden; }
.mai-header { display: flex; align-items: center; gap: 16px; padding: 22px 22px 0; margin-bottom: 18px; }
.mai-header i { font-size: 28px; color: #6B9BB8; }
.mai-header h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: #0D2843; margin-bottom: 4px; }
.mai-header p  { font-size: 13.5px; color: #808080; }
.mai-cards { display: flex; flex-direction: column; }
.mai-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid rgba(13,40,67,0.05);
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.mai-card:hover { background: rgba(13,40,67,0.02); }
.maic-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(0,0,0,0.04); color: var(--mc,#6B9BB8); }
.maic-info strong { font-size: 14px; font-weight: 700; color: #0D2843; display: block; margin-bottom: 3px; }
.maic-info span   { font-size: 12.5px; color: #808080; }
.maic-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 20px; font-family: 'Montserrat', sans-serif; margin-left: auto; white-space: nowrap; }
.maic-arrow { color: rgba(13,40,67,0.20); font-size: 13px; transition: color .2s, transform .2s; }
.mai-card:hover .maic-arrow { color: #4A7396; transform: translateX(3px); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .reg-layout { grid-template-columns: 1fr; }
  .reg-sidebar { display: none; }
  .reg-main { padding: 28px 24px 60px; }
  .dash-two-col { grid-template-columns: 1fr; }
  .edu-courses-grid { grid-template-columns: 1fr 1fr; }
  .dash-header-stats { display: none; }
}
@media (max-width: 768px) {
  .role-grid { grid-template-columns: 1fr; }
  .rfs-grid  { grid-template-columns: 1fr; }
  .rfs-grid-4 { grid-template-columns: 1fr 1fr; }
  .reg-main { padding: 20px 16px 60px; }
  .doc-upload-card { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; }
  .duc-status { grid-column: 2; }
  .duc-btn    { grid-column: 1/-1; }
  .pm-grid    { gap: 8px; }
  .edu-courses-grid { grid-template-columns: 1fr; }
  .dash-tabs  { gap: 2px; }
  .dash-tab   { padding: 9px 12px; font-size: 12px; }
  .dash-tab span { display: none; }
  .dash-tab i { font-size: 17px; }
  .pay-cta-block { flex-direction: column; align-items: flex-start; }
  .pd-grid-4  { grid-template-columns: repeat(2,1fr); }
  .dash-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .reg-topbar { padding: 12px 16px; }
  .reg-login-link { display: none; }
  .rfs-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   REGISTRATION PAGE — v3.0
   AHF Official Design System
═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.reg-page {
  min-height: 100vh;
  background: var(--navy-deep, #061927);
  font-family: 'Inter', 'Montserrat', sans-serif;
}

/* ── Header strip ── */
.reg-header-strip {
  background: rgba(13,40,67,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}
.rhs-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}
.rhs-logo { display: flex; align-items: center; }
.rhs-title {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.rhs-title span:first-child {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
}
.rhs-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
}
.rhs-login {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6B9BB8;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(107,155,184,0.3);
  border-radius: 8px;
  transition: all 0.2s;
}
.rhs-login:hover {
  background: rgba(107,155,184,0.1);
  color: #BFD8EB;
}

/* ── Progress bar ── */
.reg-progress {
  background: rgba(13,40,67,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 24px 16px;
  position: sticky;
  top: 64px;
  z-index: 99;
}
.reg-progress-bar {
  max-width: 900px;
  margin: 0 auto 16px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-top: 16px;
}
.rpb-fill {
  height: 100%;
  background: linear-gradient(90deg, #4A7396, #8BB4D0);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.reg-steps {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  justify-content: space-between;
}
.reg-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: opacity 0.3s;
  flex: 1;
}
.reg-step.active { opacity: 1; }
.reg-step.done   { opacity: 0.7; }
.rs-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s;
}
.reg-step.active .rs-dot {
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px rgba(107,155,184,0.4);
}
.reg-step.done .rs-dot {
  background: rgba(74,115,150,0.3);
  border-color: #4A7396;
  color: #8BB4D0;
}
.reg-step.done .rs-dot::after {
  content: '✓';
  font-size: 14px;
}
.reg-step.done .rs-dot { font-size: 0; }
.reg-step span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.reg-step.active span { color: #BFD8EB; }

/* ── Body ── */
.reg-body {
  padding: 40px 24px 80px;
}
.reg-container {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Pane header ── */
.reg-pane-header {
  text-align: center;
  margin-bottom: 40px;
}
.rph-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(74,115,150,0.2), rgba(139,180,208,0.1));
  border: 1px solid rgba(107,155,184,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #6B9BB8;
  margin: 0 auto 20px;
}
.rph-icon-gold { background: rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.2); color: #d4af37; }
.rph-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.rph-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

/* ── Role cards grid ── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.role-card-v2 {
  position: relative;
  background: rgba(13,40,67,0.95);
  border: 1.5px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.role-card-v2 input[type=radio] { display: none; }
.role-card-v2:hover {
  border-color: rgba(107,155,184,0.3);
  background: rgba(13,40,67,1);
  transform: translateY(-2px);
}
.role-card-v2.selected {
  border-color: #4A7396;
  background: rgba(13,40,67,1);
  box-shadow: 0 0 30px rgba(74,115,150,0.2), inset 0 0 40px rgba(74,115,150,0.05);
}
.role-card-v2.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 24px;
  text-align: center;
}
.rcv2-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(74,115,150,0.2);
  color: #8BB4D0;
  border: 1px solid rgba(107,155,184,0.2);
  font-family: 'Montserrat', sans-serif;
  width: fit-content;
}
.rcv2-badge-gold   { background: rgba(212,175,55,0.15); color: #d4af37; border-color: rgba(212,175,55,0.2); }
.rcv2-badge-purple { background: rgba(168,85,247,0.15); color: #a855f7; border-color: rgba(168,85,247,0.2); }
.rcv2-badge-gray   { background: rgba(128,128,128,0.15); color: #9ca3af; border-color: rgba(128,128,128,0.2); }
.rcv2-icon {
  font-size: 28px;
  color: #6B9BB8;
}
.role-card-v2.selected .rcv2-icon { color: #BFD8EB; }
.rcv2-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  margin: 0;
}
.rcv2-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.role-card-v2.selected .rcv2-price { color: #BFD8EB; }
.rcv2-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rcv2-perks li {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcv2-perks li i {
  color: #4A7396;
  font-size: 11px;
  flex-shrink: 0;
}
.role-card-v2.selected .rcv2-perks li i { color: #8BB4D0; }
.rcv2-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: rgba(107,155,184,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
  font-family: 'Montserrat', sans-serif;
}
.role-card-v2:hover .rcv2-cta,
.role-card-v2.selected .rcv2-cta { color: #6B9BB8; }

/* ── Registration notes ── */
.reg-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(74,115,150,0.1);
  border: 1px solid rgba(74,115,150,0.2);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin-bottom: 24px;
}
.reg-note i { color: #6B9BB8; margin-top: 2px; flex-shrink: 0; }

.reg-skip-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(13,40,67,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 24px;
  margin-bottom: 24px;
}
.reg-skip-note i { color: rgba(107,155,184,0.5); }

/* ── Navigation buttons ── */
.reg-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.reg-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.reg-btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(74,115,150,0.4);
}
.reg-btn-next:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.reg-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.reg-btn-back:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.reg-btn-pay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(74,115,150,0.3);
}
.reg-btn-pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(74,115,150,0.5);
}
.reg-btn-pay:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Form fields ── */
.reg-fields { display: flex; flex-direction: column; gap: 32px; }
.reg-field-section {
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 24px;
}
.rfs-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.rfs-label i { color: #4A7396; }
.reg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.reg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reg-field { display: flex; flex-direction: column; gap: 6px; }
.reg-field label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}
.req { color: #ef4444; }
.reg-field input,
.reg-field select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.reg-field input:focus,
.reg-field select:focus {
  outline: none;
  border-color: #4A7396;
  background: rgba(74,115,150,0.08);
}
.reg-field input::placeholder { color: rgba(255,255,255,0.25); }
.reg-field select option { background: #0d2843; color: #fff; }

/* ── Consents ── */
.reg-consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reg-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.reg-consent-check input[type=checkbox] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  accent-color: #4A7396;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}
.reg-consent-check a { color: #6B9BB8; text-decoration: underline; }
.reg-consent-check a:hover { color: #BFD8EB; }

/* ── Document upload ── */
.reg-doc-list { display: flex; flex-direction: column; gap: 16px; }
.reg-doc-item {
  background: rgba(13,40,67,0.5);
  border: 1.5px dashed rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  transition: border-color 0.2s;
}
.reg-doc-item:hover { border-color: rgba(107,155,184,0.25); }
.rdi-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.rdi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(74,115,150,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6B9BB8;
  flex-shrink: 0;
}
.rdi-info > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rdi-info strong {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family: 'Inter', sans-serif;
}
.rdi-info span {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.rdi-req {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.2);
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
}
.rdi-req-optional {
  background: rgba(107,155,184,0.1);
  color: #6B9BB8;
  border-color: rgba(107,155,184,0.2);
}
.rdi-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(74,115,150,0.12);
  border: 1px solid rgba(74,115,150,0.2);
  border-radius: 8px;
  color: #8BB4D0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
}
.rdi-upload-btn input[type=file] { display: none; }
.rdi-upload-btn:hover,
.rdi-upload-btn.uploaded {
  background: rgba(74,115,150,0.2);
  border-color: #4A7396;
  color: #BFD8EB;
}
.rdi-preview {
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
}
.rdi-file-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #22c55e;
}

/* ── Payment — order card ── */
.reg-order-card {
  background: rgba(13,40,67,0.8);
  border: 1px solid rgba(107,155,184,0.15);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}
.roc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.roc-row strong {
  color: #fff;
  font-weight: 600;
}
.roc-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 0;
}
.roc-total {
  font-size: 16px;
}
.roc-total strong {
  font-size: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  color: #BFD8EB;
}

/* ── Bank selection ── */
.reg-bank-section { margin-bottom: 20px; }
.rbs-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 12px;
}
.reg-banks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.reg-bank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(13,40,67,0.5);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.reg-bank:hover { border-color: rgba(107,155,184,0.3); }
.reg-bank.selected {
  border-color: #4A7396;
  background: rgba(74,115,150,0.1);
}
.rb-logo {
  width: 56px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}
.kaspi-logo { background: #ef4444; color: #fff; }
.halyk-logo { background: #22c55e; color: #fff; }
.rb-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.rb-info strong { font-size: 14px; color: #fff; font-weight: 600; }
.rb-info span   { font-size: 12px; color: rgba(255,255,255,0.45); }
.rb-check { color: rgba(255,255,255,0.15); font-size: 18px; }
.reg-bank.selected .rb-check { color: #4A7396; }

/* ── Recipient ── */
.reg-recipient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(74,115,150,0.07);
  border: 1px solid rgba(74,115,150,0.15);
  border-radius: 10px;
  font-size: 13px;
}
.reg-recipient i { color: #6B9BB8; font-size: 20px; flex-shrink: 0; }
.reg-recipient > div { display: flex; flex-direction: column; gap: 2px; }
.reg-recipient strong { color: #fff; font-size: 14px; font-weight: 600; }
.reg-recipient span   { color: rgba(255,255,255,0.5); }

/* ── Trust bar ── */
.reg-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.reg-trust-row span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  font-family: 'Montserrat', sans-serif;
}
.reg-trust-row i { color: rgba(107,155,184,0.5); }

/* ── Error ── */
.reg-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 13px;
}
.reg-error i { color: #ef4444; }

/* ── Success screen ── */
.reg-success {
  text-align: center;
  padding: 40px 0;
}
.reg-success-icon {
  font-size: 72px;
  color: #22c55e;
  margin-bottom: 24px;
  animation: successPop 0.5s ease;
}
@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.reg-success-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.reg-success-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 32px;
  line-height: 1.6;
}
.reg-success-card {
  background: rgba(13,40,67,0.8);
  border: 1px solid rgba(107,155,184,0.2);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  margin: 0 auto 32px;
  text-align: left;
}
.rsc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rsc-row:last-child { border-bottom: none; }
.rsc-row span:first-child { color: rgba(255,255,255,0.45); }
.rsc-row strong { color: #fff; font-weight: 600; }
.status-pending {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
  font-weight: 600;
}
.reg-success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .role-grid { grid-template-columns: 1fr; }
  .reg-grid-2 { grid-template-columns: 1fr; }
  .reg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .reg-banks  { grid-template-columns: 1fr; }
  .rph-title  { font-size: 24px; }
  .reg-progress { position: static; }
  .reg-header-strip { position: static; }
  .reg-steps  { gap: 4px; }
  .reg-step span { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD / PERSONAL CABINET — v3.0
   AHF Official Design System
═══════════════════════════════════════════════════════════════════ */

/* ── Lock screen ── */
.db-lock-screen {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.db-lock-inner {
  text-align: center;
  max-width: 400px;
}
.db-lock-icon {
  font-size: 56px;
  color: rgba(107,155,184,0.3);
  margin-bottom: 24px;
}
.db-lock-inner h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.db-lock-inner p {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 32px;
}
.db-lock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Dashboard layout ── */
.dbv2-wrap {
  display: flex;
  min-height: 100vh;
  background: var(--navy-deep, #061927);
  font-family: 'Inter', 'Montserrat', sans-serif;
}

/* ── Sidebar ── */
.dbv2-sidebar {
  width: 260px;
  min-width: 260px;
  background: rgba(13,40,67,0.98);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  padding: 24px 0 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.dbv2-sb-logo {
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
}
.dbv2-sb-user {
  padding: 0 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}
.dbv2-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}
.dbv2-sb-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dbv2-sb-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbv2-sb-mid {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-family: 'Montserrat', sans-serif;
}
.dbv2-status {
  margin: 0 20px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #22c55e;
  font-family: 'Montserrat', sans-serif;
  padding: 8px 14px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 8px;
}
.dbv2-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.active-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.pending-dot { background: #f59e0b; }
.expired-dot { background: #6b7280; }
.dbv2-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}
.dbv2-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  font-family: 'Inter', sans-serif;
}
.dbv2-nav-item i {
  font-size: 16px;
  color: rgba(107,155,184,0.5);
  width: 20px;
  text-align: center;
  transition: color 0.2s;
}
.dbv2-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.dbv2-nav-item:hover i { color: #6B9BB8; }
.dbv2-nav-item.active {
  background: rgba(74,115,150,0.15);
  color: #BFD8EB;
  border: 1px solid rgba(74,115,150,0.2);
}
.dbv2-nav-item.active i { color: #8BB4D0; }
.dbv2-logout {
  margin: 16px 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 10px;
  color: rgba(239,68,68,0.6);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.dbv2-logout:hover {
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}

/* ── Main content ── */
.dbv2-main {
  flex: 1;
  min-width: 0;
  background: var(--navy-deep, #061927);
  overflow-y: auto;
}
.dbv2-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(13,40,67,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 90;
}
.dbv2-burger {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
}
.dbv2-avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}
.dbv2-section {
  padding: 40px 40px 60px;
  animation: fadeInSection 0.25s ease;
}
@keyframes fadeInSection {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dbv2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}
.dbv2-section-head h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.dbv2-breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-family: 'Montserrat', sans-serif;
}
.dbv2-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(74,115,150,0.1);
  border: 1px solid rgba(74,115,150,0.2);
  border-radius: 8px;
  color: #6B9BB8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
}
.dbv2-edit-btn:hover { background: rgba(74,115,150,0.2); color: #BFD8EB; }

/* ── License card ── */
.dbv2-license-card {
  position: relative;
  background: linear-gradient(135deg, #0d2843 0%, #1a3d5c 50%, #0d2843 100%);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
  max-width: 640px;
  border: 1px solid rgba(107,155,184,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.dlc-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(74,115,150,0.25) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(139,180,208,0.1) 0%, transparent 50%);
}
.dlc-inner {
  position: relative;
  z-index: 2;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dlc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dlc-org {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.6);
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.dlc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
}
.active-badge {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
}
.active-badge i { font-size: 8px; }
.dlc-mid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.dlc-holder { display: flex; flex-direction: column; gap: 4px; }
.dlc-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.dlc-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.dlc-role {
  font-size: 13px;
  font-weight: 600;
  color: #8BB4D0;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}
.dlc-qr {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dlc-qr-placeholder {
  font-size: 32px;
  color: rgba(255,255,255,0.2);
}
.dlc-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dlc-field { display: flex; flex-direction: column; gap: 4px; }
.dlc-fl {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.dlc-fv {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  font-family: 'Inter', sans-serif;
}
.dlc-valid { color: #BFD8EB; }

/* ── License actions ── */
.dbv2-license-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.dbv2-la-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: rgba(13,40,67,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
}
.dbv2-la-btn:hover {
  border-color: rgba(107,155,184,0.3);
  color: #BFD8EB;
  background: rgba(74,115,150,0.1);
}

/* ── Info grid ── */
.dbv2-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dbv2-info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.dbv2-info-card i {
  font-size: 18px;
  color: #4A7396;
  margin-top: 2px;
  flex-shrink: 0;
}
.dbv2-info-card div { display: flex; flex-direction: column; gap: 3px; }
.dbv2-info-card strong { font-size: 13px; color: #fff; font-weight: 600; }
.dbv2-info-card span  { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.4; }

/* ── Profile ── */
.dbv2-profile-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
.dbv2-profile-card {
  background: rgba(13,40,67,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dpc-avatar-big {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
}
.dpc-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.dpc-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #6B9BB8;
  font-family: 'Montserrat', sans-serif;
}
.dpc-mid {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-family: 'Montserrat', sans-serif;
}
.dpc-since {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}
.dbv2-profile-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dpf-section {
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px 24px;
}
.dpf-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.dpf-section h4 i { color: #4A7396; }
.dpf-rows { display: flex; flex-direction: column; gap: 0; }
.dpf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
  gap: 12px;
}
.dpf-row:last-child { border-bottom: none; }
.dpf-row > span:first-child { color: rgba(255,255,255,0.45); min-width: 120px; }
.dpf-row strong { color: #fff; font-weight: 500; text-align: right; }
.iin-row { position: relative; }
.dpf-reveal {
  background: none;
  border: none;
  color: rgba(107,155,184,0.5);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  transition: color 0.2s;
}
.dpf-reveal:hover { color: #6B9BB8; }

/* ── Courses ── */
.dbv2-courses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.dbv2-course-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  transition: all 0.2s;
}
.dbv2-course-card:hover {
  border-color: rgba(107,155,184,0.15);
  background: rgba(13,40,67,0.7);
}
.dbv2-course-card.locked { opacity: 0.6; }
.dcc-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.dcc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dcc-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.dcc-stats {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  display: flex;
  gap: 16px;
}
.dcc-stats i { margin-right: 4px; }
.dcc-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.dcc-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}
.dcc-pct {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-family: 'Montserrat', sans-serif;
}
.dcc-action { flex-shrink: 0; }
.dcc-btn-continue,
.dcc-btn-start {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}
.dcc-btn-continue {
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  color: #fff;
}
.dcc-btn-continue:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(74,115,150,0.35); }
.dcc-btn-start {
  background: rgba(74,115,150,0.1);
  border: 1px solid rgba(74,115,150,0.2);
  color: #6B9BB8;
}
.dcc-btn-start:hover { background: rgba(74,115,150,0.2); color: #BFD8EB; }

.dbv2-courses-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(74,115,150,0.07);
  border: 1px solid rgba(74,115,150,0.15);
  border-radius: 14px;
  flex-wrap: wrap;
}
.dbv2-courses-cta > i {
  font-size: 24px;
  color: #4A7396;
  flex-shrink: 0;
}
.dbv2-courses-cta > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dbv2-courses-cta strong { font-size: 14px; color: #fff; font-weight: 600; }
.dbv2-courses-cta span  { font-size: 13px; color: rgba(255,255,255,0.45); }

/* ── Tournaments ── */
.dbv2-tournament-list { display: flex; flex-direction: column; gap: 10px; }
.dbv2-tournament-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: all 0.2s;
}
.dbv2-tournament-card:hover {
  border-color: rgba(255,255,255,0.1);
  background: rgba(13,40,67,0.7);
}
.dtc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(74,115,150,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #4A7396;
  flex-shrink: 0;
}
.dtc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dtc-title { font-size: 14px; font-weight: 600; color: #fff; }
.dtc-date  { font-size: 12px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; }
.dtc-status {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
}

/* ── Rating ── */
.dbv2-rating-hero {
  background: linear-gradient(135deg, rgba(13,40,67,0.8), rgba(26,61,92,0.5));
  border: 1px solid rgba(107,155,184,0.15);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.drh-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.drh-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 72px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  background: linear-gradient(135deg, #fff, #BFD8EB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.drh-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.drh-info { display: flex; flex-direction: column; gap: 12px; }
.drh-league,
.drh-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.drh-league i { color: #d4af37; font-size: 20px; }
.drh-badge i  { color: #8BB4D0; font-size: 20px; }

.dbv2-rating-table {
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}
.drt-header {
  display: grid;
  grid-template-columns: 48px 1fr 140px 80px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.drt-header span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
.drt-row {
  display: grid;
  grid-template-columns: 48px 1fr 140px 80px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
  transition: background 0.15s;
}
.drt-row:last-child { border-bottom: none; }
.drt-row:hover { background: rgba(255,255,255,0.03); }
.drt-me {
  background: rgba(74,115,150,0.1);
  border-left: 3px solid #4A7396;
}
.drt-pos {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  font-family: 'Montserrat', sans-serif;
}
.drt-pos.top-3 { color: #d4af37; }
.drt-name {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.drt-you {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(74,115,150,0.2);
  color: #8BB4D0;
  font-family: 'Montserrat', sans-serif;
}
.drt-league {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-family: 'Montserrat', sans-serif;
}
.drt-pts {
  font-size: 15px;
  font-weight: 700;
  color: #BFD8EB;
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Media section ── */
.dbv2-media-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dbv2-media-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: rgba(13,40,67,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.dbv2-media-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mc-color, #4A7396);
  opacity: 0;
  transition: opacity 0.2s;
}
.dbv2-media-card:hover {
  border-color: rgba(107,155,184,0.2);
  transform: translateY(-3px);
  background: rgba(13,40,67,0.8);
}
.dbv2-media-card:hover::before { opacity: 1; }
.dmc-icon {
  font-size: 28px;
  color: var(--mc-color, #4A7396);
  transition: transform 0.2s;
}
.dbv2-media-card:hover .dmc-icon { transform: scale(1.1); }
.dbv2-media-card strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.dbv2-media-card span {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}
.dmc-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: rgba(255,255,255,0.15);
  font-size: 14px;
  transition: all 0.2s;
}
.dbv2-media-card:hover .dmc-arrow {
  color: var(--mc-color, #6B9BB8);
  transform: translateX(3px);
}

/* ── Documents ── */
.dbv2-doc-list { display: flex; flex-direction: column; gap: 10px; }
.dbv2-doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: all 0.2s;
}
.dbv2-doc-row.missing { border-color: rgba(239,68,68,0.1); }
.dbv2-doc-row:hover { background: rgba(13,40,67,0.7); }
.ddr-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(74,115,150,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #4A7396;
  flex-shrink: 0;
}
.dbv2-doc-row.missing .ddr-icon { background: rgba(239,68,68,0.08); color: rgba(239,68,68,0.5); }
.ddr-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ddr-body strong { font-size: 14px; color: #fff; font-weight: 600; }
.ddr-body span   { font-size: 12px; color: rgba(255,255,255,0.35); }
.ddr-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
  font-family: 'Montserrat', sans-serif;
}
.ddr-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6B9BB8;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(74,115,150,0.2);
  border-radius: 6px;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
}
.ddr-upload:hover { background: rgba(74,115,150,0.1); color: #BFD8EB; }

/* ── Payments ── */
.dbv2-payments-table {
  background: rgba(13,40,67,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}
.dpt-header {
  display: grid;
  grid-template-columns: 120px 1fr 120px 100px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dpt-header span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
.dpt-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px 100px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
  transition: background 0.15s;
}
.dpt-row:last-child { border-bottom: none; }
.dpt-row:hover { background: rgba(255,255,255,0.02); }
.dpt-date   { font-size: 13px; color: rgba(255,255,255,0.45); }
.dpt-type   { font-size: 14px; color: rgba(255,255,255,0.75); }
.dpt-amount { font-size: 14px; font-weight: 700; color: #BFD8EB; font-family: 'Playfair Display', Georgia, serif; }
.dpt-status span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}
.dpt-status.paid span   { color: #22c55e; }
.dpt-status.pending span { color: #f59e0b; }

/* ── Responsive dashboard ── */
@media (max-width: 1024px) {
  .dbv2-sidebar { width: 220px; min-width: 220px; }
  .dbv2-info-grid { grid-template-columns: 1fr; }
  .dbv2-media-strip { grid-template-columns: 1fr; }
  .drt-header,
  .drt-row { grid-template-columns: 40px 1fr 80px; }
  .drt-league { display: none; }
  .dpt-header,
  .dpt-row { grid-template-columns: 100px 1fr 100px; }
  .dpt-status { display: none; }
}
@media (max-width: 768px) {
  .dbv2-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    z-index: 200;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }
  .dbv2-sidebar.open { left: 0; }
  .dbv2-mobile-header { display: flex; }
  .dbv2-section { padding: 24px 20px 48px; }
  .dbv2-profile-grid { grid-template-columns: 1fr; }
  .dlc-bottom { grid-template-columns: repeat(2, 1fr); }
  .dbv2-rating-hero { padding: 28px 20px; }
  .drh-num { font-size: 56px; }
  .dbv2-course-card { flex-direction: column; align-items: flex-start; }
  .dcc-action { width: 100%; }
  .dcc-btn-continue,
  .dcc-btn-start { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════
   ACADEMY — DIGITAL SYSTEM SECTION
══════════════════════════════════════════════════════ */
.ac-digital { padding: 80px 0; }

.ac-digital-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.ac-digital-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ac-digital-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--dig-color, #4a90a4);
  border-radius: 20px 20px 0 0;
}

.ac-digital-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.ac-digital-card-featured {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.2);
}

.adc-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(var(--dig-color, 74,144,164), 0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--dig-color, #4a90a4);
  font-size: 1.4rem;
}

.adc-body { flex: 1; }

.adc-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--dig-color, #4a90a4);
  margin-bottom: 8px;
  opacity: 0.9;
}

.adc-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.adc-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

.adc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adc-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}

.adc-list li i {
  color: var(--dig-color, #4a90a4);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.adc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.adc-status {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

.adc-status-featured {
  color: var(--dig-color, #a855f7);
  font-weight: 600;
}

.adc-cta {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: all 0.2s;
}

.adc-cta:hover {
  background: var(--dig-color, #4a90a4);
  color: #fff;
  transform: scale(1.1);
}

.adc-cta-featured {
  background: rgba(168,85,247,0.2);
  color: #a855f7;
}

/* ── Dashboard promo strip ── */
.ac-dashboard-promo {
  margin-top: 48px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 32px 36px;
}

.adp-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.adp-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.adp-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(74,144,164,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #6B9BB8;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.adp-left strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.adp-left span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

.adp-screens {
  display: flex;
  gap: 16px;
}

.adp-screen {
  width: 160px;
  background: rgba(13,40,67,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
}

.adps-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.adps-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

.adps-dot.red    { background: #ff5f56; }
.adps-dot.yellow { background: #ffbd2e; }
.adps-dot.green  { background: #27c93f; }

.adps-header span {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  margin-left: 4px;
}

.adps-body { padding: 12px; }

.adps-card-mini {
  text-align: center;
}

.adpsm-status {
  display: inline-block;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.adpsm-id {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  font-family: monospace;
}

.adpsm-qr {
  font-size: 1.8rem;
  color: rgba(255,255,255,0.3);
}

.adps-rating-mini {
  text-align: center;
}

.adpsrm-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #4a90a4;
  line-height: 1;
  margin-bottom: 4px;
}

.adpsrm-lbl {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}

.adpsrm-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.adpsrm-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90a4, #6B9BB8);
  border-radius: 2px;
}

.adp-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4A7396, #8BB4D0);
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s;
}

.adp-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74,115,150,0.4);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   REGISTER — PAYMENT INSTRUCTIONS
══════════════════════════════════════════════════════ */
.reg-payment-instructions {
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.rpi-kaspi, .rpi-halyk {
  padding: 20px 24px;
  background: rgba(255,255,255,0.03);
}

.rpi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.rpi-header strong {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.kaspi-logo-sm, .halyk-logo-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 28px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.kaspi-logo-sm {
  background: linear-gradient(135deg, #e80000, #c20000);
  color: #fff;
}

.halyk-logo-sm {
  background: linear-gradient(135deg, #00a651, #007a3d);
  color: #fff;
}

.rpi-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.rpi-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.rpi-num {
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(74,144,164,0.2);
  border: 1px solid rgba(74,144,164,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6B9BB8;
  margin-top: 1px;
}

.rpi-step strong {
  color: rgba(255,255,255,0.9);
}

.rpi-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(74,144,164,0.08);
  border: 1px solid rgba(74,144,164,0.15);
  border-radius: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.rpi-note i {
  color: #6B9BB8;
  margin-top: 2px;
  flex-shrink: 0;
}

.rpi-note a {
  color: #6B9BB8;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — QR CODE WRAP
══════════════════════════════════════════════════════ */
.dlc-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dlc-qr-canvas {
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.dlc-qr-canvas img,
.dlc-qr-canvas canvas {
  display: block;
  border-radius: 8px;
}

.dlc-qr-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — DIGITAL & PAYMENT
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ac-digital-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ac-digital-card:last-child {
    grid-column: span 2;
  }
  .adp-screens {
    display: none;
  }
}

@media (max-width: 768px) {
  .ac-digital-grid {
    grid-template-columns: 1fr;
  }
  .ac-digital-card:last-child {
    grid-column: span 1;
  }
  .adp-inner {
    flex-direction: column;
    text-align: center;
  }
  .adp-left {
    flex-direction: column;
    text-align: center;
  }
}


/* ════════════════════════════════════════════════════════════
   REGISTER PAGE — DS v3.0
   ════════════════════════════════════════════════════════════ */

.reg-page {
  min-height: 100vh;
  background: var(--navy-deep);
}

/* TOP BAR */
.reg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(13,40,67,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.reg-back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.reg-back:hover { color: var(--steel-pale); }
.reg-topbar-logo { height: 36px; width: auto; object-fit: contain; }
.reg-login-link {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.reg-login-link strong { color: var(--steel-pale); }
.reg-login-link:hover { color: var(--white); }

/* LAYOUT */
.reg-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: calc(100vh - 69px);
}

/* SIDEBAR */
.reg-sidebar {
  background: rgba(9,28,52,0.98);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 0;
  position: sticky;
  top: 69px;
  height: calc(100vh - 69px);
  overflow-y: auto;
}
.reg-sidebar-inner {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.reg-sidebar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,115,150,0.15);
  border: 1px solid rgba(74,115,150,0.25);
  color: var(--steel-pale);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  width: fit-content;
}
.reg-sidebar-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}
.reg-sidebar-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* STEPS */
.reg-steps { display: flex; flex-direction: column; gap: 4px; }
.reg-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: default;
  transition: all 0.2s;
}
.reg-step.active {
  background: rgba(74,115,150,0.15);
  border-color: rgba(74,115,150,0.25);
}
.reg-step.done .rs-num {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.3);
  color: #22c55e;
}
.reg-step.done .rs-num i.fa { display: none; }
.reg-step.done .rs-num .rs-check { display: flex; }
.rs-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 15px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}
.reg-step.active .rs-num {
  background: rgba(74,115,150,0.2);
  border-color: rgba(139,180,208,0.4);
  color: var(--steel-pale);
}
.rs-check {
  display: none;
  align-items: center; justify-content: center;
  font-size: 14px;
}
.rs-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: block;
}
.reg-step.active .rs-label { color: var(--steel-pale); }
.rs-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  display: block;
}
.reg-step.active .rs-name { color: #fff; }

/* TRUST */
.reg-trust { display: flex; flex-direction: column; gap: 8px; }
.reg-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
}
.reg-trust-item i { color: rgba(139,180,208,0.6); font-size: 13px; width: 16px; }

/* MAIN */
.reg-main {
  background: #f5f9fc;
  padding: 0 0 80px;
}

/* PROGRESS BAR */
.reg-progress-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 48px 0;
}
.rpb-track {
  flex: 1;
  height: 4px;
  background: rgba(13,40,67,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.rpb-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a7396, #8bb4d0);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.rpb-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-light);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* STEP PANELS */
.reg-step-panel {
  display: none;
  padding: 40px 48px;
  animation: fadeIn 0.3s ease;
}
.reg-step-panel.active { display: block; }

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.reg-panel-header { margin-bottom: 32px; }
.reg-step-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--navy-light);
  background: rgba(74,115,150,0.1);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.reg-panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 8px;
  line-height: 1.2;
}
.reg-panel-sub {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.65;
  max-width: 560px;
}

/* ROLE GRID */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.role-card-wrap { cursor: pointer; }
.role-radio { display: none; }
.role-card-new {
  background: #fff;
  border: 2px solid rgba(13,40,67,0.08);
  border-radius: 16px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.22s;
  position: relative;
  height: 100%;
}
.role-card-new:hover {
  border-color: rgba(74,115,150,0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(13,40,67,0.12);
}
.role-card-new.selected {
  border-color: var(--rc-color, #4a7396);
  background: rgba(74,115,150,0.03);
  box-shadow: 0 0 0 3px rgba(74,115,150,0.12), 0 8px 30px rgba(13,40,67,0.10);
}
.rc-tag {
  position: absolute;
  top: -1px; right: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--rc-color, #4a7396);
  color: #fff;
  padding: 3px 9px;
  border-radius: 0 0 6px 6px;
}
.rc-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--rc-color, #4a7396);
  transition: background 0.2s, transform 0.2s;
}
.role-card-new.selected .rc-icon {
  background: rgba(74,115,150,0.12);
  transform: scale(1.05);
}
.rc-label {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0;
}
.rc-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--rc-color, #4a7396);
  font-family: 'Montserrat', sans-serif;
}
.rc-perms {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.rc-perms li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: var(--gray);
}
.rc-perms li i { color: var(--rc-color, #4a7396); font-size: 10px; }
.rc-select-btn {
  margin-top: 4px;
  padding: 9px 0;
  background: rgba(74,115,150,0.08);
  border: 1.5px solid rgba(74,115,150,0.15);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--rc-color, #4a7396);
  transition: background 0.2s, border-color 0.2s;
}
.role-card-new.selected .rc-select-btn {
  background: var(--rc-color, #4a7396);
  border-color: var(--rc-color, #4a7396);
  color: #fff;
}

/* FORM */
.reg-form-grid { display: flex; flex-direction: column; gap: 28px; margin-bottom: 32px; }
.reg-form-section {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 14px;
  padding: 24px 22px;
}
.rfs-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 8px;
}
.rfs-title i { color: var(--navy-light); font-size: 14px; }
.rfs-optional {
  font-size: 10px;
  font-weight: 600;
  background: rgba(128,128,128,0.1);
  color: var(--gray);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  margin-left: 4px;
}
.rfs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.rfs-grid-4 { grid-template-columns: repeat(4, 1fr); }

.reg-field { display: flex; flex-direction: column; gap: 6px; }
.reg-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-mid);
}
.req { color: #ef4444; }
.reg-field input,
.reg-field select {
  padding: 10px 14px;
  border: 1.5px solid rgba(13,40,67,0.12);
  border-radius: 8px;
  font-size: 14px;
  color: var(--navy-deep);
  background: #fff;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reg-field input:focus,
.reg-field select:focus {
  outline: none;
  border-color: #4a7396;
  box-shadow: 0 0 0 3px rgba(74,115,150,0.14);
}
.reg-field input.field-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
  animation: shake 0.3s ease;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* CONSENTS */
.reg-consents { display: flex; flex-direction: column; gap: 12px; }
.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #4a7396;
}
.consent-row span {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.55;
}
.consent-row a { color: var(--navy-light); text-decoration: underline; }

/* DOCUMENT UPLOAD */
.doc-upload-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.doc-upload-card {
  background: #fff;
  border: 1.5px solid rgba(13,40,67,0.08);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.2s;
}
.doc-upload-card.uploaded { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.03); }
.duc-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(74,115,150,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #4a7396;
  flex-shrink: 0;
}
.duc-info { flex: 1; }
.duc-info strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.duc-info span { font-size: 12px; color: var(--gray); }
.duc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
}
.duc-badge.pending { background: rgba(128,128,128,0.1); color: var(--gray); }
.duc-badge.success { background: rgba(34,197,94,0.12); color: #16a34a; }
.duc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: rgba(74,115,150,0.08);
  border: 1.5px solid rgba(74,115,150,0.2);
  border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #4a7396;
  cursor: pointer;
  transition: all 0.2s;
}
.duc-btn:hover { background: #4a7396; color: #fff; }
.doc-upload-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(74,115,150,0.06);
  border: 1px solid rgba(74,115,150,0.12);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px; color: var(--gray); line-height: 1.6;
  margin-bottom: 32px;
}
.doc-upload-note i { color: #4a7396; margin-top: 2px; flex-shrink: 0; }

/* PAYMENT */
.pay-summary {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}
.ps-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(13,40,67,0.06);
  margin-bottom: 16px;
}
.ps-header strong { font-size: 15px; font-weight: 700; color: var(--navy-deep); display: block; }
.ps-header span { font-size: 12px; color: var(--gray); }
.ps-rows { display: flex; flex-direction: column; gap: 10px; }
.ps-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--gray);
}
.ps-row strong { color: var(--navy-deep); font-weight: 700; }
.text-green { color: #16a34a !important; }
.ps-divider { height: 1px; background: rgba(13,40,67,0.06); margin: 6px 0; }
.ps-total { padding-top: 6px; }
.ps-total span { font-size: 15px; font-weight: 700; color: var(--navy-deep); }
.ps-total strong { font-size: 20px; font-weight: 800; color: var(--navy-deep); }
.ps-operator {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--gray);
  padding-top: 12px; border-top: 1px solid rgba(13,40,67,0.06); margin-top: 12px;
}
.ps-operator i { color: var(--navy-light); }

.pay-methods { margin-bottom: 28px; }
.pm-title {
  font-size: 14px; font-weight: 700; color: var(--navy-deep);
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
}
.pm-grid { display: flex; flex-direction: column; gap: 10px; }
.pm-card { cursor: pointer; }
.pm-card input { display: none; }
.pmc-inner {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border: 1.5px solid rgba(13,40,67,0.1);
  border-radius: 12px;
  padding: 14px 18px;
  transition: all 0.2s;
}
.pm-card.selected .pmc-inner {
  border-color: #4a7396;
  background: rgba(74,115,150,0.04);
  box-shadow: 0 0 0 3px rgba(74,115,150,0.10);
}
.pmc-logo {
  width: 52px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.kaspi-logo  { background: #f14e3e; color: #fff; }
.halyk-logo  { background: #00703c; color: #fff; }
.card-logo   { background: rgba(13,40,67,0.08); color: #4a7396; font-size: 20px; }
.pmc-info { flex: 1; }
.pmc-info strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.pmc-info span { font-size: 12px; color: var(--gray); }
.pmc-check { color: #4a7396; font-size: 18px; opacity: 0; transition: opacity 0.2s; }
.pm-card.selected .pmc-check { opacity: 1; }

/* NAV BUTTONS */
.reg-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 8px;
}
.reg-btn-next {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #4a7396, #8bb4d0);
  color: #fff; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.reg-btn-next:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(74,115,150,0.40); }
.reg-btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: transparent;
  border: 1.5px solid rgba(13,40,67,0.15);
  color: var(--navy-mid); border-radius: 12px;
  font-size: 14px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.reg-btn-back:hover { background: rgba(13,40,67,0.05); border-color: rgba(13,40,67,0.25); }
.reg-btn-pay {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 36px;
  background: linear-gradient(135deg, #4a7396, #8bb4d0);
  color: #fff; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.reg-btn-pay:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(74,115,150,0.42); }
.reg-btn-pay:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.pay-secure {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12px; color: var(--gray);
  margin-top: 16px;
}
.pay-secure i { color: #22c55e; }

.reg-alert {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: #b91c1c;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* SUCCESS STEP */
.reg-success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 0;
}
.rs-icon-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 2px solid rgba(34,197,94,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: #22c55e;
  margin-bottom: 24px;
  animation: popIn 0.4s ease;
}
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rs-title {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 800;
  color: var(--navy-deep); margin: 0 0 12px;
}
.rs-sub { font-size: 15px; color: var(--gray); line-height: 1.65; margin-bottom: 28px; max-width: 480px; }
.rs-card {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px; padding: 22px 28px;
  width: 100%; max-width: 420px;
  margin-bottom: 28px;
}
.rsc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(13,40,67,0.05);
  font-size: 14px; color: var(--gray);
}
.rsc-row:last-child { border-bottom: none; }
.rsc-row strong { color: var(--navy-deep); font-weight: 700; }
.status-pending-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(212,175,55,0.1); color: #b45309;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.rs-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   DASHBOARD PAGE — DS v3.0
   ════════════════════════════════════════════════════════════ */

.dash-page { min-height: 100vh; background: #f0f4f8; }

/* DASH HEADER */
.dash-header {
  background: linear-gradient(135deg, #0d2843 0%, #1a3a5c 100%);
  padding: 32px 0 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-header-inner {
  display: flex; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.dash-user-info { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 280px; }
.dash-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a7396, #8bb4d0);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #fff; flex-shrink: 0;
  position: relative;
  border: 3px solid rgba(255,255,255,0.15);
}
.dash-status-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid #0d2843;
}
.dash-status-dot.active { background: #22c55e; }
.dash-status-dot.pending { background: #d4af37; }
.dash-status-dot.expired { background: #ef4444; }
.dash-welcome { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 2px; }
.dash-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800;
  color: #fff; margin: 0 0 6px;
}
.dash-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
}
.role-athlete { background: rgba(74,144,164,0.25); color: #8bb4d0; }
.role-coach   { background: rgba(212,175,55,0.20); color: #e6c84a; }
.role-referee { background: rgba(168,85,247,0.20); color: #c084fc; }
.role-user    { background: rgba(128,128,128,0.20); color: #9ca3af; }
.dash-member-id {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45);
  font-family: 'Montserrat', sans-serif;
}
.dash-member-id i { font-size: 11px; color: rgba(139,180,208,0.6); }

.dash-header-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
}
.dhs-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.dhs-item i { font-size: 16px; margin-bottom: 2px; }
.dhs-item strong { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; line-height: 1; }
.dhs-item span { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }

.dash-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dash-notif-btn {
  position: relative; width: 42px; height: 42px;
  border-radius: 10px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}
.dash-notif-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.notif-count {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0d2843;
}
.dash-id-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #4a7396, #8bb4d0);
  color: #fff; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.dash-id-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(74,115,150,0.4); }

/* NOTIFICATIONS PANEL */
.dash-notif-panel {
  display: none; background: #fff;
  border-bottom: 1px solid rgba(13,40,67,0.08);
  box-shadow: 0 4px 20px rgba(13,40,67,0.10);
}
.dash-notif-panel.visible { display: block; }
.dash-notif-panel .container { padding: 16px 24px; max-height: 300px; overflow-y: auto; }
.dnp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.dnp-header strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); }
.dnp-close { background: none; border: none; color: var(--gray); font-size: 16px; cursor: pointer; padding: 4px; }
.dnp-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(13,40,67,0.05);
}
.dnp-item:last-child { border-bottom: none; }
.dnp-item i { font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.dnp-item.type-success i { color: #22c55e; }
.dnp-item.type-info i { color: #4a7396; }
.dnp-item.read { opacity: 0.55; }
.dnp-text { flex: 1; }
.dnp-text span { font-size: 13px; color: var(--navy-deep); display: block; }
.dnp-text small { font-size: 11px; color: var(--gray); }
.dnp-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a7396; flex-shrink: 0; margin-top: 6px; }

/* DASH BODY */
.dash-body { padding: 28px 0 60px; }

/* TABS */
.dash-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 14px; padding: 6px;
  margin-bottom: 28px;
}
.dash-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  border: none; border-radius: 10px; background: none;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: var(--gray);
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.dash-tab i { font-size: 14px; }
.dash-tab:hover { background: rgba(74,115,150,0.06); color: var(--navy-mid); }
.dash-tab.active {
  background: var(--navy-deep);
  color: #fff;
  box-shadow: 0 2px 10px rgba(13,40,67,0.20);
}

/* TAB CONTENT */
.dash-tab-content { display: none; }
.dash-tab-content.active { display: block; animation: fadeIn 0.25s ease; }

.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

/* LICENSE CARD */
.license-card-wrap { display: flex; flex-direction: column; gap: 20px; }
.license-card {
  background: linear-gradient(135deg, #0d2843 0%, #1a3a5c 60%, #0d2843 100%);
  border-radius: 18px;
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(13,40,67,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
.lc-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(139,180,208,0.10) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(74,115,150,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.lc-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; position: relative;
}
.lc-emblem { width: 40px; height: 40px; object-fit: contain; }
.lc-org { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.lc-title { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #8bb4d0; }
.lc-body {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px; position: relative;
}
.lc-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #4a7396, #8bb4d0);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
.lc-name { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: #fff; }
.lc-role { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #8bb4d0; margin: 2px 0; }
.lc-id { font-size: 11px; color: rgba(255,255,255,0.4); font-family: 'Montserrat', sans-serif; }
.lc-footer {
  display: flex; justify-content: space-between; align-items: flex-end;
  position: relative;
}
.lc-dates { display: flex; gap: 24px; }
.lc-dates div { display: flex; flex-direction: column; gap: 2px; }
.lc-dates span { font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.8px; }
.lc-dates strong { font-size: 13px; font-weight: 700; color: #fff; }
.lc-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.lc-status.active { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.lc-status.pending { background: rgba(212,175,55,0.15); color: #fcd34d; border: 1px solid rgba(212,175,55,0.25); }
.lc-status.expired { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.lc-qr-hint {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: rgba(255,255,255,0.25);
}

/* QR BLOCK */
.license-qr-block {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.lqb-qr {
  display: flex; justify-content: center;
  margin-bottom: 10px;
}
.lqb-qr svg { border-radius: 8px; border: 1px solid rgba(13,40,67,0.07); }
.license-qr-block p { font-size: 12px; color: var(--gray); margin: 0 0 12px; }
.lqb-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #4a7396;
  text-decoration: none;
}
.lqb-link:hover { text-decoration: underline; }

/* LICENSE DETAILS */
.license-details {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.ld-section h3.ld-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gray); margin: 0 0 14px;
}
.ld-status-block {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: 10px; margin-bottom: 16px;
}
.ld-status-block.active {
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.15);
}
.ld-status-block.active i { color: #22c55e; font-size: 20px; margin-top: 1px; }
.ld-status-block strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.ld-status-block span { font-size: 12px; color: var(--gray); }

.ldp-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.ldp-label span { color: var(--gray); }
.ldp-label strong { color: var(--navy-deep); font-weight: 700; }
.ldp-track { height: 6px; background: rgba(13,40,67,0.08); border-radius: 3px; overflow: hidden; }
.ldp-fill { height: 100%; background: linear-gradient(90deg, #4a7396, #8bb4d0); border-radius: 3px; }
.ldp-dates { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray); margin-top: 5px; }

.ld-perms { display: flex; flex-direction: column; gap: 8px; }
.ldp-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--navy-mid);
}
.ldp-item i { color: #22c55e; font-size: 11px; flex-shrink: 0; }
.ld-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* PROFILE */
.profile-card {
  background: #fff;
  border: 1px solid rgba(13,40,67,0.07);
  border-radius: 16px; padding: 28px;
  text-align: center;
}
.pc-avatar-wrap { position: relative; display: inline-block; margin-bottom: 16px; }
.pc-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #4a7396, #8bb4d0);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 800; color: #fff;
  border: 4px solid rgba(74,115,150,0.2);
}
.pc-photo-btn {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy-deep); color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer;
}
.pc-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: var(--navy-deep); margin: 0 0 6px; }
.pc-role { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 8px; }
.pc-member-id { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12px; color: var(--gray); margin-bottom: 20px; }
.pc-member-id i { color: #4a7396; }
.pc-stats { display: flex; gap: 0; border-top: 1px solid rgba(13,40,67,0.06); }
.pc-stats > div {
  flex: 1; padding: 16px 8px; text-align: center;
  border-right: 1px solid rgba(13,40,67,0.06);
}
.pc-stats > div:last-child { border-right: none; }
.pc-stats strong { font-size: 12px; font-weight: 700; color: var(--gray); display: block; margin-bottom: 4px; }
.pc-stats span { font-size: 15px; font-weight: 800; font-family: 'Playfair Display', serif; }

.profile-data {
  background: #fff; border: 1px solid rgba(13,40,67,0.07);
  border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.pd-section h4 {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin: 0 0 16px;
}
.pd-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pd-section-header h4 { margin: 0; }
.pd-edit-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #4a7396;
  background: rgba(74,115,150,0.08); border: 1px solid rgba(74,115,150,0.15);
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  transition: all 0.2s;
}
.pd-edit-btn:hover { background: #4a7396; color: #fff; }
.pd-grid { display: flex; flex-direction: column; gap: 1px; }
.pd-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.pd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(13,40,67,0.05);
}
.pd-row:last-child { border-bottom: none; }
.pd-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--gray);
}
.pd-label i { font-size: 12px; color: #4a7396; width: 14px; }
.pd-value {
  font-size: 13px; font-weight: 600; color: var(--navy-deep);
  display: flex; align-items: center; gap: 8px;
}
.pd-value.blurred span { filter: blur(4px); user-select: none; }
.pd-reveal {
  background: none; border: none; color: #4a7396; font-size: 13px; cursor: pointer;
}
.pd-edit-input {
  padding: 5px 8px; border: 1.5px solid #4a7396;
  border-radius: 6px; font-size: 13px; width: 140px;
  font-family: 'Inter', sans-serif;
}
.pd-sport-item {
  text-align: center; padding: 14px 8px;
  background: rgba(74,115,150,0.04);
  border: 1px solid rgba(74,115,150,0.1);
  border-radius: 10px;
}
.pd-sport-item i { font-size: 18px; color: #4a7396; margin-bottom: 6px; display: block; }
.pd-sport-item strong { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: var(--navy-deep); display: block; }
.pd-sport-item span { font-size: 11px; color: var(--gray); }

/* EDUCATION */
.edu-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.edu-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 800; color: var(--navy-deep); margin: 0 0 4px; }
.edu-sub { font-size: 14px; color: var(--gray); margin: 0; }
.edu-courses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.edu-course-card {
  background: #fff; border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.edu-course-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(13,40,67,0.10); }
.edu-course-card.locked { opacity: 0.65; }
.ecc-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  width: fit-content;
}
.ecc-status-badge.done { background: rgba(34,197,94,0.10); color: #16a34a; }
.ecc-status-badge.active { background: rgba(74,115,150,0.10); color: #4a7396; }
.ecc-status-badge.locked { background: rgba(128,128,128,0.10); color: var(--gray); }
.ecc-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 800; color: var(--navy-deep); margin: 0; }
.ecc-modules { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.ecc-progress-wrap { display: flex; align-items: center; gap: 10px; }
.ecc-progress-track { flex: 1; height: 5px; background: rgba(13,40,67,0.08); border-radius: 3px; overflow: hidden; }
.ecc-progress-fill { height: 100%; background: linear-gradient(90deg, #4a7396, #8bb4d0); border-radius: 3px; }
.ecc-progress-pct { font-size: 12px; font-weight: 700; color: #4a7396; min-width: 32px; text-align: right; }
.ecc-cert {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #d4af37;
  background: rgba(212,175,55,0.08); padding: 6px 10px; border-radius: 8px;
}

/* TOURNAMENTS */
.tourn-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.tourn-header h2 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 800; color: var(--navy-deep); margin: 0 0 4px; }
.tourn-list {
  background: #fff; border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px; overflow: hidden; margin-bottom: 24px;
}
.tourn-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid rgba(13,40,67,0.05);
  transition: background 0.2s;
}
.tourn-row:last-child { border-bottom: none; }
.tourn-row:hover { background: rgba(74,115,150,0.03); }
.tr-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.tr-info { flex: 1; }
.tr-name { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.tr-date { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.tr-date i { font-size: 10px; }
.tr-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.tr-arrow { color: var(--gray); font-size: 13px; padding: 4px; }

/* RATING */
.rating-block {
  background: linear-gradient(135deg, #0d2843, #1a3a5c);
  border-radius: 14px; padding: 24px;
  color: #fff;
}
.rb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rb-header h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: #fff; margin: 0; }
.rb-league { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #d4af37; background: rgba(212,175,55,0.15); padding: 4px 10px; border-radius: 20px; }
.rb-score { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rbs-num { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 900; color: #8bb4d0; line-height: 1; }
.rbs-info span { font-size: 13px; color: rgba(255,255,255,0.6); display: block; }
.rbs-info small { font-size: 11px; color: rgba(255,255,255,0.35); }
.rbp-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.rbp-label span { color: rgba(255,255,255,0.5); }
.rbp-label strong { color: #8bb4d0; }
.rbp-track { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.rbp-fill { height: 100%; background: linear-gradient(90deg, #4a7396, #8bb4d0); border-radius: 3px; }
.rbp-labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 5px; }

/* PAYMENTS */
.pay-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pay-header-row h2 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 800; color: var(--navy-deep); margin: 0 0 4px; }
.pay-total-badge {
  background: #fff; border: 1px solid rgba(13,40,67,0.08);
  border-radius: 10px; padding: 10px 16px; text-align: right;
}
.pay-total-badge span { font-size: 11px; color: var(--gray); display: block; }
.pay-total-badge strong { font-size: 18px; font-weight: 800; color: var(--navy-deep); font-family: 'Playfair Display', serif; }
.pay-list {
  background: #fff; border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px; overflow: hidden; margin-bottom: 20px;
}
.pay-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid rgba(13,40,67,0.05);
  transition: background 0.2s;
}
.pay-row:last-child { border-bottom: none; }
.pay-row:hover { background: rgba(74,115,150,0.03); }
.pr-icon { font-size: 18px; flex-shrink: 0; }
.pr-info { flex: 1; }
.pr-info strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.pr-info span { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 5px; }
.pr-info span i { font-size: 10px; }
.pr-amount { font-size: 15px; font-weight: 800; font-family: 'Playfair Display', serif; }
.pr-status {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.pr-status.paid { background: rgba(34,197,94,0.1); color: #16a34a; }
.pr-status.pending { background: rgba(212,175,55,0.12); color: #b45309; }
.pay-cta-block {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid rgba(13,40,67,0.08);
  border-radius: 14px; padding: 18px 22px;
  flex-wrap: wrap; gap: 16px;
}
.pcb-info { display: flex; align-items: center; gap: 12px; }
.pcb-info i { font-size: 20px; color: #4a7396; }
.pcb-info strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.pcb-info span { font-size: 13px; color: var(--gray); }

/* MEDIA ACCESS */
.media-access-info {
  background: #fff; border: 1px solid rgba(13,40,67,0.08);
  border-radius: 16px; padding: 24px;
}
.mai-header {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(13,40,67,0.06); margin-bottom: 20px;
}
.mai-header i { font-size: 24px; color: #4a7396; margin-top: 2px; }
.mai-header h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 800; color: var(--navy-deep); margin: 0 0 4px; }
.mai-header p { font-size: 13px; color: var(--gray); margin: 0; }
.mai-cards { display: flex; flex-direction: column; gap: 10px; }
.mai-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(74,115,150,0.04);
  border: 1px solid rgba(74,115,150,0.10);
  border-radius: 10px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: all 0.2s;
}
.mai-card:hover { background: rgba(74,115,150,0.08); transform: translateX(3px); }
.maic-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--mc, #4a7396);
  background: rgba(74,115,150,0.08); flex-shrink: 0;
}
.maic-info { flex: 1; }
.maic-info strong { font-size: 14px; font-weight: 700; color: var(--navy-deep); display: block; }
.maic-info span { font-size: 12px; color: var(--gray); }
.maic-badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.maic-arrow { color: var(--gray); font-size: 13px; transition: transform 0.2s; }
.mai-card:hover .maic-arrow { transform: translateX(3px); color: var(--mc, #4a7396); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .reg-layout { grid-template-columns: 1fr; }
  .reg-sidebar { position: relative; top: 0; height: auto; }
  .reg-sidebar-inner { padding: 24px; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .reg-steps { flex-direction: row; flex-wrap: wrap; }
  .dash-two-col { grid-template-columns: 1fr; }
  .edu-courses-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .reg-step-panel { padding: 24px 20px; }
  .role-grid { grid-template-columns: 1fr; }
  .rfs-grid { grid-template-columns: 1fr; }
  .rfs-grid-4 { grid-template-columns: repeat(2,1fr); }
  .dash-header-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .dash-header-stats { gap: 20px; }
  .dash-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .dash-tab { white-space: nowrap; }
  .edu-courses-grid { grid-template-columns: 1fr; }
  .reg-nav { flex-direction: column-reverse; }
  .reg-btn-next, .reg-btn-back, .reg-btn-pay { width: 100%; justify-content: center; }
  .pay-cta-block { flex-direction: column; }
}
@media (max-width: 480px) {
  .reg-topbar { padding: 12px 16px; }
  .reg-login-link { display: none; }
  .dash-notif-btn { display: none; }
  .pd-grid-4 { grid-template-columns: repeat(2,1fr); }
}

/* ════════════════════════════════════════
   SETTINGS SECTION — Настройки аккаунта
════════════════════════════════════════ */
.dbv2-settings-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
.dbv2-settings-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-deep, #0D2843);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dbv2-settings-card-title i { color: #4a90a4; font-size: 16px; }

.dbv2-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .dbv2-settings-row { grid-template-columns: 1fr; }
}

.dbv2-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dbv2-settings-field label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dbv2-settings-field input {
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  color: #1f2937;
  font-style: normal;
  transition: border-color 0.2s;
  background: #f9fafb;
  width: 100%;
}
.dbv2-settings-field input:focus {
  outline: none;
  border-color: #4a90a4;
  background: #fff;
}
.dbv2-settings-field .input-icon-wrap input {
  padding-left: 44px !important;
  padding-right: 48px;
}

.dbv2-settings-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Индикатор надёжности пароля */
.dbv2-pass-strength {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  font-size: 13px;
  color: #6b7280;
}
.dbv2-pass-strength-fill {
  height: 6px;
  border-radius: 3px;
  flex: 1;
  background: #e5e7eb;
  position: relative;
  overflow: hidden;
}
.dbv2-pass-strength-fill::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  width: var(--strength, 0%);
  background: var(--strength-color, #e5e7eb);
  transition: width 0.3s, background 0.3s;
}

/* Строка безопасности */
.dbv2-security-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dbv2-sec-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.dbv2-sec-row > i {
  color: #4a90a4;
  font-size: 16px;
  margin-top: 2px;
  width: 20px;
  text-align: center;
}
.dbv2-sec-label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.dbv2-sec-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}