/* ============================================================
   Zeppelin (zeppelin1.com) - site overrides
   Geologica headings over Inter Tight text. Graphite ground and panels
   from the supplied app screens, violet buttons from Sign Up and Login,
   magenta and blue from the bonus banners, orange from the VIP card.
   Centred layout, content column capped at 1160 px.
   ============================================================ */
:root {
  --font-display: "Geologica", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter Tight", "Segoe UI", Arial, sans-serif;
  --zp-violet: #6a3bff;
  --zp-violet-2: #8b5cff;
  --zp-violet-3: #b9a2ff;
  --zp-magenta: #e040d8;
  --zp-blue: #3a7bff;
  --zp-orange: #f7a21b;
  --zp-panel: #1e1f26;
  --zp-panel-2: #272832;
  --zp-line: #2f303b;
  --zp-text: #c4c2d6;
  --content-wide: 1160px;
}

body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  background:
    radial-gradient(1000px 560px at 85% -160px, rgba(106, 59, 255, 0.18), transparent 70%),
    radial-gradient(760px 460px at -10% 40%, rgba(224, 64, 216, 0.06), transparent 70%),
    var(--color-bg);
}
.container { max-width: 1160px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--zp-line); backdrop-filter: blur(10px); }
.site-header .site-logo img { height: 42px; width: auto; }
.nav-main--desktop a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.nav-main--desktop a:hover { color: #fff; background: rgba(139, 92, 255, 0.18); }
.btn { font-family: var(--font-display); font-weight: 600; border-radius: 12px; letter-spacing: 0; }
.btn--primary {
  background: var(--zp-violet);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 22px rgba(106, 59, 255, 0.38);
}
.btn--primary:hover { background: #7f57ff; color: #fff; }
.btn--outline { border: 1px solid #4a4b5c; color: #f5f4fb; background: #23242c; }
.btn--outline:hover { border-color: var(--zp-violet-2); color: #fff; background: #2b2c36; }

/* ---------- Language switcher: 17 code chips ---------- */
.lang-switcher__toggle { border-radius: 10px; }
.zp-code {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: #2b2c36; border: 1px solid #3d3e4c;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--zp-violet-3);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 380px; max-width: 92vw;
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 8px; max-height: 70vh; overflow-y: auto;
  background: #1e1f26; border: 1px solid var(--zp-line); border-radius: 14px;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 7px 10px; }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(106, 59, 255, 0.2); }
.lang-switcher__menu li[aria-selected="true"] .zp-code { background: var(--zp-violet); color: #fff; border-color: var(--zp-violet); }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; padding: 6px 8px; border-radius: 8px; }
.nav-mobile__lang.is-active { background: rgba(106, 59, 255, 0.2); }
@media (max-width: 420px) { .nav-mobile__langs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Hero: copy left, bonus ticket right ---------- */
.hero {
  padding: 76px 0 40px;
  background:
    radial-gradient(560px 360px at 80% 40%, rgba(106, 59, 255, 0.35), transparent 72%),
    radial-gradient(380px 260px at 95% 90%, rgba(224, 64, 216, 0.18), transparent 70%),
    linear-gradient(180deg, #1d1838, var(--color-bg));
  border-bottom: 0;
}
.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  grid-template-areas: "badge box" "title box" "sub box" "ctas box";
  column-gap: 56px; row-gap: 16px;
  align-items: start; text-align: left; max-width: none;
}
.hero__badge {
  grid-area: badge; justify-self: start;
  color: var(--zp-violet-3); background: rgba(106, 59, 255, 0.14);
  border: 1px solid rgba(139, 92, 255, 0.45); border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: 0.82rem;
}
.hero__badge::before { background: var(--zp-magenta); box-shadow: 0 0 10px rgba(224, 64, 216, 0.8); }
.hero h1 {
  grid-area: title; margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.3vw, 2.95rem); line-height: 1.1; letter-spacing: -0.02em; color: #fff;
}
.hero h1 .zp-accent {
  background: linear-gradient(90deg, #a988ff, var(--zp-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__subtitle { grid-area: sub; margin: 0; color: var(--zp-text); }
.hero__subtitle p { margin: 0; max-width: 62ch; }
.hero__ctas { grid-area: ctas; justify-content: flex-start; margin-top: 8px; }
.hero__bonus-box {
  grid-area: box; align-self: center; margin: 0;
  padding: 30px 28px 28px; text-align: left; position: relative;
  background: linear-gradient(140deg, #5b2ee6 0%, #3a7bff 100%);
  border: 0; border-radius: 22px;
  box-shadow: 0 26px 60px rgba(8, 6, 30, 0.55);
  overflow: hidden;
}
.hero__bonus-box::before, .hero__bonus-box::after {
  content: ""; position: absolute; top: 58%; width: 28px; height: 28px; border-radius: 50%; background: #1a1830;
}
.hero__bonus-box::before { left: -14px; }
.hero__bonus-box::after { right: -14px; }
.hero__bonus-box .hero__bonus-label {
  display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.hero__bonus-box .hero__bonus-value {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.08; color: #fff; margin: 16px 0 18px; padding-bottom: 18px;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.35);
}
.hero__bonus-box .hero__bonus-extra { color: #eef0ff; font-size: 0.96rem; line-height: 1.55; }
@media (max-width: 960px) {
  .hero { padding: 48px 0 30px; }
  .hero__content { grid-template-columns: 1fr; grid-template-areas: "badge" "title" "sub" "box" "ctas"; }
  .hero__bonus-box { margin-top: 10px; }
}

/* ---------- Stats: chip grid ---------- */
.stats-bar { background: transparent; border: 0; padding: 0 0 18px; }
.stats-bar__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.stats-bar__inner .stat {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 16px 16px; border-radius: 16px; background: var(--zp-panel); border: 1px solid var(--zp-line);
}
.stats-bar__inner .stat__value { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: #fff; }
.stats-bar__inner .stat:nth-child(1) .stat__value, .stats-bar__inner .stat:nth-child(4) .stat__value { color: var(--zp-violet-3); }
.stats-bar__inner .stat:nth-child(5) .stat__value { color: var(--zp-orange); }
.stat__label { font-size: 0.8rem; line-height: 1.35; color: #9593ab; text-transform: none; letter-spacing: 0; }
@media (max-width: 1100px) { .stats-bar__inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stats-bar__inner .stat { padding: 12px; }
  .stats-bar__inner .stat__value { font-size: 1.2rem; }
}

/* ---------- Sections: rounded panels inside the centred column ---------- */
.content-section { padding: 22px 0; }
.content-section > .container {
  background: var(--zp-panel); border: 1px solid var(--zp-line); border-radius: 24px;
  padding: 46px 48px 34px; max-width: 1160px;
}
.content-section--alt { background: transparent; border: 0; }
.content-section--alt > .container { background: #1a1b22; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.65rem, 2.5vw, 2.2rem); line-height: 1.15; letter-spacing: -0.015em;
  color: #fff; margin: 0 0 24px; padding: 0; border: 0; max-width: none;
}
.content-section h2::before { display: none !important; }
.content-section h2::after {
  content: ""; display: block !important; position: static; width: 64px; height: 4px; margin-top: 14px;
  border-radius: 4px; background: linear-gradient(90deg, var(--zp-violet), var(--zp-magenta));
}
.content-section h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3;
  color: var(--zp-violet-3); margin: 34px 0 12px; padding: 0; border: 0; text-transform: none;
}
.content-section h3::before { display: none; }
.content-section p { margin-bottom: 1rem; color: var(--zp-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.45rem; color: var(--zp-text); }
.content-section li::marker { color: var(--zp-magenta); }
.content-section a:not(.btn) { color: var(--zp-violet-3); }
@media (max-width: 900px) {
  .content-section { padding: 12px 0; }
  .content-section > .container { padding: 32px 22px 22px; border-radius: 18px; }
}
@media (max-width: 560px) {
  .content-section > .container { margin: 0 10px; width: auto; padding: 26px 16px 18px; }
}

/* ---------- Supplied phone artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 290px; max-width: 290px; height: auto;
  background: transparent; box-shadow: none; border-radius: 0;
  filter: drop-shadow(0 0 30px rgba(106, 59, 255, 0.28));
}
.content-section .section-illus--right { float: right; margin: 0 0 20px 34px; }
.content-section .section-illus--left { float: left; margin: 0 34px 20px 0; }
.zp-clear { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 250px; max-width: 250px; margin: 10px auto 22px; }
}

/* ---------- Tables ---------- */
.zp-table-wrap {
  clear: both; margin: 26px 0 28px; border-radius: 16px; overflow: hidden;
  background: #15161b; border: 1px solid var(--zp-line);
}
.zp-table-wrap .zp-table-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #fff;
  padding: 14px 20px; margin: 0; max-width: none;
  background: linear-gradient(90deg, rgba(106, 59, 255, 0.3), rgba(106, 59, 255, 0.04));
  border-bottom: 1px solid var(--zp-line);
}
.zp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .zp-table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 0.95rem; }
.content-section .zp-table-wrap th, .content-section .zp-table-wrap td {
  padding: 11px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--zp-line); white-space: normal;
}
.content-section .zp-table-wrap thead th {
  font-family: var(--font-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #9593ab; background: #1a1b21;
}
.content-section .zp-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .zp-table-wrap tbody tr:hover td { background: rgba(106, 59, 255, 0.08); }
.content-section .zp-table-wrap td:first-child { color: #fff; font-weight: 600; }
.zp-table-note { font-size: 0.86rem; color: #9593ab; padding: 12px 20px; margin: 0 !important; border-top: 1px solid var(--zp-line); max-width: none !important; }
@media (max-width: 560px) {
  .content-section .zp-table-wrap table { min-width: 500px; font-size: 0.88rem; }
  .content-section .zp-table-wrap th, .content-section .zp-table-wrap td { padding: 9px 12px; }
}

/* ---------- Figure tiles ---------- */
.zp-figs { clear: both; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 28px; }
.zp-fig { padding: 16px 18px; border-radius: 16px; background: #15161b; border: 1px solid var(--zp-line); border-top: 3px solid var(--zp-violet); }
.zp-fig:nth-child(2) { border-top-color: var(--zp-magenta); }
.zp-fig:nth-child(3) { border-top-color: var(--zp-blue); }
.zp-fig:nth-child(4) { border-top-color: var(--zp-orange); }
.zp-fig .zp-fig__v { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #fff; line-height: 1.15; }
.zp-fig .zp-fig__l { display: block; font-size: 0.86rem; color: #9593ab; margin-top: 4px; }
@media (max-width: 900px) { .zp-figs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Numbered steps ---------- */
.zp-steps { display: flow-root; counter-reset: zpstep; list-style: none; margin: 16px 0 24px !important; padding: 0; }
.zp-steps li { counter-increment: zpstep; position: relative; padding: 4px 0 4px 50px; margin-bottom: 14px; }
.zp-steps li::before {
  content: counter(zpstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; color: #fff; background: var(--zp-violet);
}

/* ---------- FAQ ---------- */
.zp-faq { clear: both; margin: 16px 0 8px; display: grid; gap: 10px; }
.zp-faq details { border: 1px solid var(--zp-line); border-radius: 14px; background: #15161b; overflow: hidden; }
.zp-faq summary {
  cursor: pointer; list-style: none; padding: 15px 52px 15px 20px; position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: #fff;
}
.zp-faq summary::-webkit-details-marker { display: none; }
.zp-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--zp-magenta); }
.zp-faq details[open] summary::after { content: "\2212"; }
.zp-faq details[open] summary { color: var(--zp-violet-3); }
.zp-faq details p { padding: 0 20px 16px; margin: 0; }

/* ---------- CTA banner, footer, sticky ---------- */
.cta-banner { background: transparent; border: 0; text-align: center; padding: 28px 0 40px; }
.cta-banner .container {
  background: linear-gradient(120deg, #5b2ee6, #8b3bd8 55%, #c03cc8); border-radius: 24px; padding: 44px 30px;
}
.cta-banner h2 { font-family: var(--font-display); font-weight: 700; border: 0; padding: 0; color: #fff; }
.cta-banner h2::after { display: none !important; }
.cta-banner p { margin-left: auto; margin-right: auto; color: #f3eeff; }
.cta-banner .btn--primary { background: #fff; color: #3b1fb0; box-shadow: none; }
.cta-banner .btn--primary:hover { background: #efeaff; color: #3b1fb0; }
.site-footer { border-top: 1px solid var(--zp-line); background: #101115; }
.site-footer h5 { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zp-violet-3); }
.site-footer .site-logo img { height: 40px; width: auto; }
.footer-badge { border-color: var(--zp-line); border-radius: 999px; }
.sticky-cta { border-top: 1px solid var(--zp-line); background: rgba(21, 22, 27, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 600; }
.sticky-cta__bonus { color: var(--zp-violet-3); font-weight: 600; }

/* ---------- Anchor offset, mobile header ---------- */
.content-section[id] { scroll-margin-top: 78px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 30px; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 6px; }
  .nav-toggle { flex-shrink: 0; margin-left: 6px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.74rem !important; padding: 0.5rem 0.8rem !important; white-space: nowrap; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .hero__badge::before { display: none; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.9rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.66rem !important; padding: 0.45rem 0.55rem !important; } }

.hero h1, .content-section h2, .content-section h3, .cta-banner h2, .zp-table-wrap .zp-table-title { text-transform: none; }

/* Text uses the full panel width next to the floated artwork */
.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2, .content-section h3 { clear: none; }
.content-section h2 { overflow: visible; }
@media (max-width: 560px) { .hero__badge { font-size: 0.72rem; } }