/* ============================================================
   Spacejeux — home.css (index.php)
   ============================================================ */

/* ---------- HERO ---------- */
.hero { padding-block: 56px 64px; background: var(--white); }
.hero__inner {
  display: grid; grid-template-columns: 520px 1fr; gap: 56px; align-items: center;
}
.hero__title {
  font-size: clamp(48px, 6.5vw, 90px);
  font-weight: 800; line-height: 1; letter-spacing: -1px;
}
.hero__jackpot { margin-top: 20px; display: grid; gap: 2px; }
.hero__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--slate-500);
}
.hero__amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(42px, 5vw, 70px); line-height: 1; color: var(--teal);
}
.hero__next { margin-top: 2px; font-size: 14px; color: var(--slate-500); }
.hero__desc { margin-top: 20px; font-size: 15px; line-height: 1.5; }
.hero__actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__cta { min-width: 202px; }
.hero__trust {
  margin-top: 20px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--slate-500);
}
.hero__trust svg { flex: none; }

/* aurora illustration */
.aurora {
  position: relative; height: 548px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #060e1a 0%, #0a1628 40%, #0b1d2e 70%, #0d2235 100%);
}
.aurora__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.aurora__glow--green {
  left: -9%; top: -15%; width: 88%; height: 70%; opacity: .55;
  background: radial-gradient(ellipse at center, #22c55e 0%, rgba(22,163,74,.5) 40%, rgba(13,148,72,0) 70%);
  filter: blur(8px);
}
.aurora__glow--teal {
  right: -14%; top: -18%; width: 82%; height: 62%; opacity: .5;
  background: radial-gradient(ellipse at center, #5eead4 0%, rgba(13,148,136,.38) 45%, rgba(13,148,136,0) 72%);
  filter: blur(8px);
}
.aurora__glow--warm {
  left: 27%; top: -8%; width: 56%; height: 52%; opacity: .28;
  background: radial-gradient(ellipse at center, #4ade80 0%, rgba(74,222,128,0) 70%);
  filter: blur(6px);
}
.aurora__stars { position: absolute; inset: 0; pointer-events: none; }
.aurora__stars::before {
  content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; left: 60px; top: 30px; opacity: .9;
  box-shadow:
    100px 25px 0 0 rgba(255,255,255,.75),
    360px -2px 0 0 rgba(255,255,255,.85),
    520px 20px 0 0 rgba(255,255,255,.7),
    640px 5px 0 0 rgba(255,255,255,.8),
    260px -12px 0 -0.25px rgba(255,255,255,.65),
    430px 40px 0 -0.25px rgba(255,255,255,.6),
    580px 60px 0 -0.25px rgba(255,255,255,.7),
    -30px 60px 0 -0.25px rgba(255,255,255,.55),
    660px 80px 0 -0.25px rgba(255,255,255,.65);
}
.aurora__forest {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: #06101a;
}
.aurora__forest::before {
  content: ''; position: absolute; left: 0; right: 0; top: -60px; height: 60px;
  background: linear-gradient(180deg, rgba(6,16,26,0) 0%, #06101a 100%);
}
.aurora__ridge {
  position: absolute; left: 0; right: 0; bottom: 126px; height: 6px; opacity: .2;
  background: linear-gradient(90deg, #5eead4 0%, #22c55e 50%, #5eead4 100%);
}
.aurora__label {
  position: absolute; top: 32px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 4px; justify-items: center; text-align: center; color: #fff;
}
.aurora__label-top {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: .95;
}
.aurora__label-sub { font-size: 11px; opacity: .65; }
.aurora__balls {
  position: absolute; top: 86px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 20px; justify-items: center;
}
.aurora__row { display: flex; gap: 18px; }
.aurora__ball {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--white); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 24px;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.2), 0 0 16px 4px rgba(13,148,136,.13);
  transition: transform .15s ease;
}
.aurora__ball.is-empty { color: var(--slate-300); }
.aurora__ball:hover { transform: translateY(-3px); }

/* pick-7 mini panel */
.pick-panel {
  position: absolute; left: 48px; bottom: 0;
  width: 220px; padding: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.19);
  border-radius: 14px 14px 0 0;
  backdrop-filter: blur(20px);
  display: grid; gap: 10px;
}
.pick-panel__head {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--slate-500);
}
.pick-panel__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.pick-cell {
  height: 28px; border-radius: 6px;
  background: var(--border); color: var(--slate-400);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  transition: background-color .12s ease, color .12s ease;
}
.pick-cell:hover { background: var(--slate-300); color: var(--slate-700); }
.pick-cell.is-picked { background: var(--teal); color: var(--white); font-weight: 800; }
.aurora__mark {
  position: absolute; right: 48px; bottom: 48px;
  display: grid; gap: 2px; justify-items: end; text-align: right; color: #fff;
}
.aurora__mark-name { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.aurora__mark-sub { font-size: 11px; opacity: .65; }

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .aurora { height: 420px; }
  .pick-panel { display: none; }
  .aurora__mark { right: 24px; bottom: 24px; }
}
@media (max-width: 720px) {
  .hero { padding-block: 32px; }
  .aurora { height: 320px; border-radius: 16px; }
  .aurora__balls { top: 72px; gap: 10px; }
  .aurora__row { gap: 10px; }
  .aurora__ball { width: 48px; height: 48px; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
  .aurora__label { top: 20px; }
  .aurora__mark { display: none; }
  .aurora__forest { height: 90px; }
  .aurora__ridge { bottom: 70px; }
  .hero__cta { min-width: 0; flex: 1 1 100%; }
}

/* ---------- CHECKER ---------- */
.checker { background: var(--bg-gray); padding-block: 64px; }
.checker__inner {
  display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: center;
}
.checker__head h2 { font-size: 36px; font-weight: 700; line-height: 1.2; }
.checker__head p { margin-top: 8px; font-size: 16px; color: var(--slate-700); }
.checker__card {
  margin-top: 28px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-card);
  display: grid; gap: 8px;
}
.checker__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.checker__row { display: flex; gap: 12px; flex-wrap: wrap; }
.checker__input {
  flex: 1 1 240px; height: 44px; padding-inline: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; color: var(--ink); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.checker__input::placeholder { color: var(--slate-400); }
.checker__input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.checker__row .btn { height: 44px; }
.checker__scan { color: var(--slate-700); }
.checker__foot { margin-top: 28px; display: grid; gap: 12px; }
.checker__foot p { font-size: 12px; line-height: 1.4; color: var(--slate-500); }

.ticket-result {
  margin-top: 8px; padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.5;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--slate-700);
}
.ticket-result--win  { background: var(--success-bg); border-color: #a7f3d0; color: #065f46; }
.ticket-result--lose { background: var(--bg-soft); }
.ticket-result--error{ background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* verification sequence card */
.verify-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 32px;
  min-height: 340px;
  display: grid; gap: 24px; align-content: center;
}
.verify-card__eyebrow {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--slate-500);
}
.verify-card__flow { display: flex; align-items: center; justify-content: center; gap: 16px; }
.verify-card__arrow { color: var(--slate-300); margin-bottom: 28px; }
.verify-step { display: grid; gap: 12px; justify-items: center; width: 110px; }
.verify-step__label { font-size: 12px; font-weight: 600; color: var(--ink); text-align: center; }
.verify-step__visual {
  width: 64px; height: 80px; border-radius: 6px; position: relative;
  display: grid; place-items: center;
}
.verify-step__visual--ticket {
  background: var(--bg-soft); border: 1.5px solid var(--slate-400); border-radius: 4px;
  display: grid; align-content: center; justify-items: center; gap: 4px; padding: 10px;
}
.verify-step__visual--ticket i {
  display: block; width: 40px; height: 2px; background: var(--slate-300); border-radius: 1px;
}
.verify-step__visual--ticket i.short { width: 28px; }
.verify-step__barcode { display: flex; gap: 2px; margin-top: 2px; align-items: flex-end; height: 10px; }
.verify-step__barcode b { display: block; height: 10px; background: var(--slate-400); }
.verify-step__barcode b:nth-child(1) { width: 2px; }
.verify-step__barcode b:nth-child(2) { width: 1px; }
.verify-step__barcode b:nth-child(3) { width: 3px; }
.verify-step__barcode b:nth-child(4) { width: 1.5px; }
.verify-step__visual--scanner { background: #f0fdfa; border: 1.5px solid var(--teal); }
.verify-step__visual--scanner .corner {
  position: absolute; width: 8px; height: 8px; border: 1px solid var(--teal);
}
.verify-step__visual--scanner .tl { top: 8px; left: 4px; border-right: 0; border-bottom: 0; }
.verify-step__visual--scanner .tr { top: 8px; right: 4px; border-left: 0; border-bottom: 0; }
.verify-step__visual--scanner .bl { bottom: 8px; left: 4px; border-right: 0; border-top: 0; }
.verify-step__visual--scanner .br { bottom: 8px; right: 4px; border-left: 0; border-top: 0; }
.verify-step__laser { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--teal); }
.verify-step__visual--result { background: #ecfdf5; border: 1.5px solid var(--success-bg); }
.verify-step__check {
  width: 32px; height: 32px; border-radius: 50%;
  background: #10b981; color: var(--white);
  display: grid; place-items: center;
}

@media (max-width: 1100px) {
  .checker__inner { grid-template-columns: 1fr; gap: 40px; }
  .verify-card { max-width: 520px; }
}
@media (max-width: 720px) {
  .checker { padding-block: 40px; }
  .checker__head h2 { font-size: 26px; }
  .checker__head p { font-size: 14px; }
  .checker__row .btn { flex: 1 1 auto; }
  .verify-card { padding: 20px; min-height: 0; }
  .verify-card__flow { gap: 8px; }
  .verify-step { width: 86px; }
}

/* ---------- RESULTS ---------- */
.results { background: var(--bg-tint); padding-block: 80px; }
.results__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.result-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  display: grid; gap: 20px; align-content: start;
}
.result-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-card__top h3 { font-size: 16px; font-weight: 700; }
.result-card__date { font-size: 12px; color: var(--slate-500); }
.result-card__numbers { display: flex; flex-wrap: wrap; gap: 5px; }
.result-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-card__next span {
  display: block; font-size: 11px; color: var(--slate-500); text-transform: uppercase;
}
.result-card__next strong {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--teal);
}
.result-card__link { font-size: 13px; font-weight: 600; color: var(--ink); }
.result-card__link:hover { color: var(--teal); }
.section-cta { margin-top: 48px; }

@media (max-width: 1100px) { .results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .results__grid { grid-template-columns: 1fr; } .results { padding-block: 48px; } }

/* ---------- GAMES ---------- */
.games { background: var(--white); padding-block: 64px; }
.games__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.game-card {
  background: var(--bg-soft); border-radius: var(--radius-lg); padding: 24px;
  display: grid; gap: 16px; align-content: start;
}
.game-card hr { border-color: var(--border); }
.game-card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.game-card__title h3 { font-size: 18px; font-weight: 700; }
.game-card__price { font-size: 14px; font-weight: 700; color: var(--teal); }
.game-card__sched { font-size: 12px; color: var(--slate-700); margin-top: -12px; }
.game-card__stats { display: flex; justify-content: space-between; gap: 12px; }
.game-card__stats span {
  display: block; font-size: 11px; color: var(--slate-500); text-transform: uppercase;
}
.game-card__stats strong {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink);
}
.game-card__stats em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--slate-700); }
.game-card__stats .right { text-align: right; }
.game-card__claim { font-size: 11px; color: #737373; text-align: center; }
.game-card__play { justify-self: center; min-width: 78px; }

/* game artwork panels */
.game-art {
  position: relative; height: 160px; border-radius: 8px; overflow: hidden;
  padding: 14px; display: grid; place-items: center;
}
.game-art::before {
  /* dot grid pattern */
  content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect x='0' y='0' width='8' height='8' rx='2' fill='%230d9488' fill-opacity='.35'/%3E%3C/svg%3E");
  background-position: 10px 10px;
}
.game-art--nordic { background: #091e2f; }
.game-art--duo { background: #0f172a; }
.game-art--duo::after {
  content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background:
    linear-gradient(45deg, transparent 49.6%, #0d9488 49.6%, #0d9488 50.4%, transparent 50.4%);
}
.game-art--trio, .game-art--quatro { background: #0f172a; }
.game-art--everyday { background: #0f766e; }
.game-art--everyday::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='23'%3E%3Ctext x='0' y='11' font-family='Arial' font-size='10' font-weight='600' fill='white' fill-opacity='.55'%3EEVERYDAY%3C/text%3E%3C/svg%3E");
  opacity: .18; background-position: 10px 10px;
}
.game-art__tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 12px; font-weight: 700; color: var(--teal); opacity: .9;
}
.game-art--everyday .game-art__tag { color: #fff; }
.game-art__balls { position: relative; display: flex; gap: 10px; align-items: center; }
.game-art__ball {
  width: 44px; height: 44px;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
}
.game-art__ball--lg { width: 52px; height: 52px; font-size: 22px; }
.game-art__split { width: 1px; height: 44px; background: rgba(13,148,136,.18); }
.game-art__center { position: relative; display: grid; gap: 10px; justify-items: center; }
.game-art__mainball {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--teal-ink);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.08);
}
.game-art__markers { display: flex; gap: 10px; }
.game-art__markers span {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--teal-ink);
}
.game-art__tiles { position: relative; display: grid; grid-template-columns: repeat(2, 44px); gap: 10px; }
.game-art__tiles span {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.08);
}

@media (max-width: 1100px) { .games__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
  .games__grid { grid-template-columns: 1fr; }
  .games { padding-block: 48px; }
  .game-art__ball { width: 38px; height: 38px; font-size: 15px; }
}

/* ---------- INSTANT ---------- */
.instant { background: var(--bg-soft); padding-block: 64px; }
.instant__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.instant-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  display: grid; gap: 16px; align-content: start;
}
.instant-card hr { border-color: var(--border); }
.instant-card__name h3 { font-size: 16px; font-weight: 700; }
.instant-card__name p { margin-top: 4px; font-size: 12px; color: var(--slate-500); }
.instant-card__prize span { display: block; font-size: 10px; text-transform: uppercase; color: var(--slate-500); }
.instant-card__prize strong {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--teal);
}
.instant-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.instant-card__foot p { font-size: 11px; color: var(--slate-500); }
.instant-card__foot .btn { height: 44px; }
.instant-card__rules { font-size: 11px; color: #737373; }

/* mini ticket illustration */
.iticket-art {
  position: relative; height: 120px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
}
.iticket-art--northern { background: #0b1020; }
.iticket-art--northern::before, .iticket-art--northern::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(45px);
}
.iticket-art--northern::before { right: -80px; top: -80px; width: 320px; height: 320px; background: #14b8a6; opacity: .18; }
.iticket-art--northern::after  { left: -140px; bottom: -140px; width: 360px; height: 360px; background: #2dd4bf; opacity: .12; }
.iticket-art--maple { background: #f5f1e8; }
.iticket-art--maple::before, .iticket-art--maple::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(45px);
}
.iticket-art--maple::before { right: -80px; top: -80px; width: 320px; height: 320px; background: #f59e0b; opacity: .1; }
.iticket-art--maple::after  { left: -140px; bottom: -140px; width: 360px; height: 360px; background: #ef4444; opacity: .08; }
.iticket-art--boreal { background: #0b2f1a; }
.iticket-art--boreal::before, .iticket-art--boreal::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(45px);
}
.iticket-art--boreal::before { right: -80px; top: -80px; width: 320px; height: 320px; background: #2dd4bf; opacity: .16; }
.iticket-art--boreal::after  { left: -140px; bottom: -140px; width: 360px; height: 360px; background: #0ea5e9; opacity: .1; }

.iticket {
  position: relative; z-index: 1;
  width: min(340px, 92%); border-radius: 10px; padding: 12px 14px;
  display: grid; gap: 10px;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.2), 0 4px 10px -4px rgba(0,0,0,.12);
}
.iticket--tilt-r { transform: rotate(5deg); }
.iticket--tilt-l { transform: rotate(-5deg); }
.iticket--dark   { background: #0f172a; border: 1px solid #1e293b; color: #fff; }
.iticket--light  { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; }
.iticket--forest { background: #0f2a14; border: 1px solid #1e3a22; color: #fff; }
.iticket__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iticket__head strong { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.iticket__head span { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--slate-400); }
.iticket--light .iticket__head span { color: #6b7280; }
.iticket__head span.mint { color: #a7f3d0; }
.iticket__logo {
  flex: none; width: 28px; height: 28px; border-radius: 8px; color: #fff;
  display: grid; place-items: center;
}
.iticket__logo--teal { background: #14b8a6; }
.iticket__logo--red  { background: #ef4444; }
.iticket__logo--sky  { background: #0ea5e9; }
.iticket__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 190px; }
.iticket__cell {
  height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.iticket--dark .iticket__cell   { background: #0b1020; border: 1px solid #1e293b; }
.iticket--dark .iticket__cell svg { color: #14b8a6; opacity: .35; }
.iticket--light .iticket__cell  { background: #f3f4f6; border: 1px solid #e5e7eb; }
.iticket--light .iticket__cell svg { color: #ef4444; opacity: .35; }
.iticket--forest .iticket__cell { background: #0b2f1a; border: 1px solid #1e3a22; }
.iticket--forest .iticket__cell svg { color: #a7f3d0; opacity: .35; }

@media (max-width: 1100px) { .instant__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (max-width: 640px)  { .instant { padding-block: 48px; } }

/* ---------- DISCLAIMER ---------- */
.game-disclaimer { padding: 32px 20px; }
.game-disclaimer p { text-align: center; font-size: 13px; color: #666; max-width: 720px; margin-inline: auto; }

/* ---------- PLAY BRIGHT ---------- */
.play-bright { background: var(--bg-tint); padding-block: 80px; }
.play-bright__head { max-width: 680px; display: grid; gap: 12px; margin-bottom: 48px; }
.play-bright__head h2 { font-size: 40px; font-weight: 700; line-height: 1.1; }
.play-bright__head p { font-size: 16px; line-height: 1.5; color: var(--slate-700); }
.help-panel {
  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;
}
.help-panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--teal);
}
.help-panel__content { display: grid; gap: 16px; align-content: center; }
.help-panel__content h3 { font-size: 24px; font-weight: 700; }
.help-panel__content > p { font-size: 15px; line-height: 1.6; color: var(--slate-700); }
.help-panel__phone { display: flex; align-items: center; gap: 12px; }
.help-panel__phone-icon {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--teal); color: var(--white);
  display: grid; place-items: center;
}
.help-panel__phone a { font-size: 18px; font-weight: 700; color: var(--ink); }
.help-panel__content .btn { justify-self: start; padding-inline: 30px; }

/* support illustration */
.support-illustration {
  position: relative; min-height: 220px; border-radius: var(--radius-lg); margin-right: 0;
  background-image: radial-gradient(circle, rgba(217,226,235,.45) 1px, transparent 1.2px);
  background-size: 24px 24px; background-position: 11px 11px;
}
.support-line {
  position: absolute; left: 64px; right: 68px; top: 90px; height: 2px;
  background: rgba(9,162,159,.25); border-radius: 1px;
}
.support-node { position: absolute; display: grid; justify-items: center; width: 92px; text-align: center; }
.support-node--1 { left: 22px; top: 50px; }
.support-node--2 { left: 114px; top: 50px; }
.support-node--3 { right: 24px; top: 42px; }
.support-node__num { font-size: 9px; color: rgba(9,162,159,.55); margin-bottom: 4px; }
.support-node__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);
}
.support-node__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);
}
.support-node__title {
  margin-top: 10px; font-size: 8px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: #1c2a4a;
}
.support-node__title.accent { color: #09a29f; }
.support-node__sub { font-size: 7.5px; color: rgba(97,128,163,.75); }

@media (max-width: 1100px) {
  .help-panel { grid-template-columns: 1fr; padding: 24px 24px 24px 38px; }
  .support-illustration { max-width: 360px; }
}
@media (max-width: 720px) {
  .play-bright { padding-block: 48px; }
  .play-bright__head h2 { font-size: 30px; }
  .play-bright__head p { font-size: 14px; }
}