/* ============================================================
   Spacejeux — about.css (about.php)
   ============================================================ */

/* ---------- WHO WE ARE (intro) ---------- */
.ab-intro { background: var(--white); padding-block: 72px; }
.ab-intro__inner {
  display: grid; grid-template-columns: 520px 1fr; gap: 64px; align-items: center;
}
.ab-intro__copy { display: grid; gap: 20px; justify-items: start; }
.ab-intro__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--teal);
}
.ab-intro__copy h1 {
  font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--dark);
}
.ab-intro__copy p { font-size: 16px; line-height: 1.6; color: var(--slate-700); }

/* editorial visual (dark panel) */
.ab-visual {
  position: relative; height: 280px; overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--border); border-radius: 16px;
}
.ab-visual::before {
  /* 60px blueprint grid */
  content: ''; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 60px 60px;
}

/* tickets stack (left) */
.ab-visual__tickets {
  position: absolute; left: 32px; top: 80px; width: 200px; height: 206px;
}
.ab-tkt {
  position: absolute; width: 176px; padding: 12px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .08);
}
.ab-tkt--instant { left: 24px; top: -6px; transform: rotate(-4deg); }
.ab-tkt--draw { left: 0; top: 0; height: 206px; overflow: hidden; transform: rotate(4deg); }
.ab-tkt__label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  line-height: 1.3; color: var(--dark);
}
.ab-tkt__grid { margin-top: 10px; display: grid; grid-template-columns: repeat(5, 20px); gap: 6px; }
.ab-tkt__cell {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--bg-legal); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1; color: var(--dark);
}
.ab-tkt__cell svg { color: var(--teal); }

/* winning balls (center) */
.ab-visual__balls {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center;
}
.ab-visual__ball {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); color: var(--dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .08);
}
.ab-visual__ball + .ab-visual__ball { margin-left: -12px; }
.ab-visual__ball--big {
  width: 72px; height: 72px; font-size: 24px;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .09);
}

/* info panels (right) */
.ab-visual__panels {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  width: 196px; display: grid; gap: 12px;
}
.ab-panel {
  background: #1e293b; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px; padding: 12px;
  display: grid; gap: 10px;
}
.ab-panel__label {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; line-height: 1.3;
  color: rgba(255, 255, 255, .8);
}
.ab-panel__nums { display: flex; align-items: center; gap: 8px; }
.ab-panel__nums span {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); color: var(--dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
}
.ab-panel__row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; line-height: 1.3; color: var(--slate-400);
}
.ab-panel__row--bold {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  color: rgba(255, 255, 255, .8);
}
.ab-panel__check {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.ab-panel__shield {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--teal); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}

@media (max-width: 1100px) {
  .ab-intro { padding-block: 56px; }
  .ab-intro__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .ab-intro { padding-block: 32px; }
  .ab-intro__copy h1 { font-size: 32px; }
  .ab-intro__copy p { font-size: 15px; }
  .ab-visual { height: 220px; }
  .ab-visual::before { background-size: 55px 55px; }
  .ab-tkt--draw { display: none; }
  .ab-visual__tickets { left: 16px; top: auto; bottom: 16px; width: 140px; height: 80px; }
  .ab-tkt--instant { left: 0; top: 0; width: 140px; padding: 10px; border-radius: 10px; transform: rotate(-3deg); }
  .ab-tkt__label { font-size: 9px; }
  .ab-tkt__grid { margin-top: 8px; grid-template-columns: repeat(4, 18px); gap: 4px; }
  .ab-tkt__cell { width: 18px; height: 18px; border-radius: 4px; }
  .ab-tkt__cell svg { width: 10px; height: 10px; }
  .ab-tkt--instant .ab-tkt__cell:nth-child(5n) { display: none; }
  .ab-visual__ball { width: 44px; height: 44px; font-size: 16px; }
  .ab-visual__ball + .ab-visual__ball { margin-left: -10px; }
  .ab-visual__ball--big { width: 60px; height: 60px; font-size: 20px; }
  .ab-visual__panels { right: 16px; top: 16px; transform: none; width: 160px; }
  .ab-panel { gap: 8px; }
  .ab-panel--resp { display: none; }
  .ab-panel__label { font-size: 9px; }
  .ab-panel__nums { gap: 6px; }
  .ab-panel__nums span { font-size: 8px; }
  .ab-panel__nums span:nth-child(5) { display: none; }
  .ab-panel__row { font-size: 9px; gap: 6px; }
  .ab-panel__check { width: 16px; height: 16px; }
  .ab-panel__check svg { width: 10px; height: 10px; }
}

/* ---------- LICENSED & REGULATED ---------- */
.ab-lic { background: var(--white); padding-block: 64px; }
.ab-lic__head { display: grid; gap: 16px; max-width: 809px; margin-bottom: 28px; }
.ab-lic__head h2 { font-size: 28px; font-weight: 800; line-height: 1.25; color: var(--dark); }
.ab-lic__head p { font-size: 15px; line-height: 1.5; color: var(--slate-700); }
.ab-lic__row {
  display: grid; grid-template-columns: 440px minmax(0, 1fr);
  column-gap: 116px; align-items: start;
}

/* licence card */
.ab-card {
  background: #f8fafe; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.ab-card__head {
  background: var(--dark); padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ab-card__title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.3;
  color: var(--white);
}
.ab-card__badge {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.ab-card__body { padding: 28px; display: grid; gap: 24px; }
.ab-card__body hr { border-color: var(--border); }
.ab-card__op { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ab-card__op-meta { display: grid; gap: 4px; justify-items: start; }
.ab-card__k {
  font-size: 10px; font-weight: 600; letter-spacing: .8px; line-height: 1.3;
  text-transform: uppercase; color: var(--slate-400);
}
.ab-card__op-meta strong {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  line-height: 1.25; color: var(--dark);
}
.ab-card__loc { font-size: 13px; color: var(--slate-500); }
.ab-card__seal {
  flex: none; width: 44px; height: 44px; color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.ab-card__rows { margin: 0; display: grid; gap: 10px; }
.ab-card__rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ab-card__rows dt { font-size: 11px; line-height: 1.3; color: var(--slate-400); }
.ab-card__rows dd {
  margin: 0; font-size: 11px; font-weight: 600; line-height: 1.3;
  color: var(--dark); text-align: right;
}
.ab-card__rows dd.mono { font-weight: 600; }

/* regulator facts list */
.ab-facts { margin: 6px 0 0; }
.ab-facts__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
}
.ab-facts__row + .ab-facts__row { border-top: 1px solid var(--border); }
.ab-facts__row:first-child { padding-top: 0; }
.ab-facts__row:last-child { padding-bottom: 0; }
.ab-facts__row dt {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; line-height: 1.3;
  text-transform: uppercase; color: var(--slate-400);
}
.ab-facts__row dd {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--dark); text-align: right;
}

@media (max-width: 1240px) {
  .ab-lic__row { column-gap: 56px; }
}
@media (max-width: 1100px) {
  .ab-lic__row { grid-template-columns: 1fr; row-gap: 40px; }
  .ab-facts { margin-top: 0; }
}
@media (max-width: 720px) {
  .ab-lic { padding-block: 32px; }
  .ab-lic__head { gap: 12px; margin-bottom: 24px; }
  .ab-lic__head h2 { font-size: 24px; line-height: 1.2; }
  .ab-lic__head p { font-size: 14px; }
  .ab-lic__row { row-gap: 24px; }
  .ab-card__head { padding: 14px 20px; }
  .ab-card__title { font-size: 10px; }
  .ab-card__badge { width: 24px; height: 24px; }
  .ab-card__badge svg { width: 12px; height: 12px; }
  .ab-card__body { padding: 20px; gap: 16px; }
  .ab-card__k { font-size: 9px; }
  .ab-card__op-meta strong { font-size: 20px; }
  .ab-card__loc { font-size: 12px; }
  .ab-card__seal {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--teal); color: var(--white);
  }
  .ab-card__seal svg { width: 22px; height: 22px; }
  .ab-card__rows { gap: 8px; }
  .ab-card__rows dd { max-width: 60%; }
}
@media (max-width: 640px) {
  .ab-facts__row--wide { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ab-facts__row--wide dd { text-align: left; }
}

/* ---------- PLAY BRIGHT / CONTACT ---------- */
.ab-pb { background: var(--bg-tint); padding-block: 80px; scroll-margin-top: 96px; }
.ab-pb__head { max-width: 680px; display: grid; gap: 12px; margin-bottom: 48px; }
.ab-pb__head h2 { font-size: 40px; font-weight: 700; line-height: 1.1; }
.ab-pb__head p { font-size: 16px; line-height: 1.5; color: var(--slate-700); }

.ab-help {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
  padding: 24px 0 24px 38px;
  margin-bottom: 48px;
}
.ab-help::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--teal);
}
.ab-help__content { display: grid; gap: 16px; align-content: center; justify-items: start; }
.ab-help__content h3 { font-size: 24px; font-weight: 700; }
.ab-help__content > p { font-size: 15px; line-height: 1.6; color: var(--slate-700); }
.ab-help__phone { display: flex; align-items: center; gap: 12px; }
.ab-help__phone-icon {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  background: var(--teal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.ab-help__phone a { font-size: 18px; font-weight: 700; color: var(--ink); }
.ab-help__call { padding-inline: 30px; }

/* support illustration */
.ab-sup {
  position: relative; min-height: 220px; border-radius: var(--radius-lg);
  background-image: radial-gradient(circle, rgba(217, 226, 235, .45) 1px, transparent 1.2px);
  background-size: 24px 24px; background-position: 11px 11px;
}
.ab-sup__line {
  position: absolute; left: 64px; right: 68px; top: 90px; height: 2px;
  background: rgba(9, 162, 159, .25); border-radius: 1px;
}
.ab-sup__node { position: absolute; display: grid; justify-items: center; width: 92px; text-align: center; }
.ab-sup__node--1 { left: 22px; top: 50px; }
.ab-sup__node--2 { left: 114px; top: 50px; }
.ab-sup__node--3 { right: 24px; top: 42px; }
.ab-sup__num { font-size: 9px; color: rgba(9, 162, 159, .55); margin-bottom: 4px; }
.ab-sup__circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(97, 128, 163, .25);
  display: grid; place-items: center; color: rgba(28, 42, 74, .6);
}
.ab-sup__circle--accent {
  width: 48px; height: 48px;
  border: 1.5px solid rgba(9, 162, 159, .5); color: #09a29f;
  box-shadow: 0 0 0 6px rgba(9, 162, 159, .06), 0 0 0 12px rgba(9, 162, 159, .04);
}
.ab-sup__title {
  margin-top: 10px; font-size: 8px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: #1c2a4a;
}
.ab-sup__title--accent { color: #09a29f; }
.ab-sup__sub { font-size: 7.5px; color: rgba(97, 128, 163, .75); }

@media (max-width: 1100px) {
  .ab-help { grid-template-columns: 1fr; padding: 24px 24px 24px 38px; }
  .ab-sup { max-width: 360px; }
}
@media (max-width: 720px) {
  .ab-pb { padding-block: 40px; }
  .ab-pb__head { gap: 8px; margin-bottom: 24px; }
  .ab-pb__head h2 { font-size: 28px; line-height: 1.2; }
  .ab-pb__head p { font-size: 14px; }
  .ab-help { padding: 20px; margin-bottom: 24px; gap: 12px; }
  .ab-help::before { display: none; }
  .ab-help__content { gap: 12px; }
  .ab-help__content h3 { font-size: 20px; }
  .ab-help__content > p { font-size: 13px; }
  .ab-help__phone { gap: 8px; }
  .ab-help__phone a { font-size: 16px; }
  .ab-help__content > div:last-child { justify-self: stretch; }
  .ab-help__call { width: 100%; height: 42px; }
  .ab-sup { display: none; }
}