/* ============================================================
   Trixino (trixino.to) - site overrides
   Sora headings over Work Sans text. Midnight blue ground, royal blue
   panels taken from the sports card in the supplied screenshots, gold
   buttons from the 777 cards and sparkles, coral from the chest.
   ============================================================ */
:root {
  --font-display: "Sora", "Segoe UI", Arial, sans-serif;
  --font-body: "Work Sans", "Segoe UI", Arial, sans-serif;
  --tt-gold: #ffc23d;
  --tt-gold-2: #ffd774;
  --tt-sky: #5b9dff;
  --tt-royal: #244ac4;
  --tt-coral: #ff7a59;
  --tt-panel: #121b45;
  --tt-panel-2: #1a2660;
  --tt-line: #26357a;
}

body {
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.72;
  background:
    radial-gradient(900px 520px at 12% -120px, rgba(91, 157, 255, 0.14), transparent 70%),
    radial-gradient(700px 420px at 100% 30%, rgba(255, 194, 61, 0.05), transparent 70%),
    var(--color-bg);
}

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--tt-line); box-shadow: 0 4px 24px rgba(3, 6, 24, 0.6); }
.site-header .site-logo img { height: 46px; width: auto; }
.nav-main--desktop a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
  border-radius: 8px;
}
.nav-main--desktop a:hover { color: var(--tt-gold); background: rgba(91, 157, 255, 0.12); }
.btn { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; border-radius: 8px; }
.btn--primary {
  background: linear-gradient(180deg, var(--tt-gold-2), var(--tt-gold));
  color: #1a1200;
  border: 0;
  box-shadow: 0 6px 20px rgba(255, 194, 61, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.btn--primary:hover { background: var(--tt-gold-2); color: #1a1200; }
.btn--outline { border: 1px solid var(--tt-sky); color: #e8efff; background: rgba(36, 74, 196, 0.22); }
.btn--outline:hover { border-color: var(--tt-gold); color: var(--tt-gold); }

/* ---------- Hero: offer card left, copy right ---------- */
.hero {
  padding: 80px 0 70px;
  position: relative;
  border-bottom: 1px solid var(--tt-line);
  background:
    radial-gradient(520px 320px at 22% 50%, rgba(36, 74, 196, 0.45), transparent 72%),
    radial-gradient(420px 260px at 88% 10%, rgba(255, 194, 61, 0.10), transparent 70%),
    linear-gradient(180deg, var(--color-hero-gradient-start), var(--color-hero-gradient-end));
}
.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  grid-template-areas:
    "box badge"
    "box title"
    "box sub"
    "box ctas";
  column-gap: 54px;
  row-gap: 16px;
  align-items: start;
  text-align: left;
  max-width: none;
}
.hero__badge {
  grid-area: badge; justify-self: start;
  color: var(--tt-sky); background: rgba(91, 157, 255, 0.12);
  border: 1px solid rgba(91, 157, 255, 0.4); border-radius: 6px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem;
}
.hero__badge::before { background: var(--tt-gold); box-shadow: 0 0 10px rgba(255, 194, 61, 0.7); }
.hero h1 {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.7vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #f4f7ff;
  margin: 0;
}
.hero h1 .tt-accent { color: var(--tt-gold); }
.hero__subtitle { grid-area: sub; margin: 0; color: #b8c4ea; }
.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: 34px 30px 30px;
  text-align: center;
  background: linear-gradient(165deg, #2a56d8 0%, #1a2a7a 52%, #111a4a 100%);
  border: 2px solid var(--tt-gold);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(2, 4, 20, 0.6), 0 0 0 6px rgba(255, 194, 61, 0.10);
  position: relative;
}
.hero__bonus-box::before {
  content: "777";
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.2em;
  color: #1a1200; background: var(--tt-gold); padding: 4px 14px; border-radius: 999px;
}
.hero__bonus-box .hero__bonus-label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #cfdcff;
}
.hero__bonus-box .hero__bonus-value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tt-gold);
  margin: 12px 0 12px;
}
.hero__bonus-box .hero__bonus-extra { color: #e3e9ff; font-size: 0.97rem; line-height: 1.55; }
@media (max-width: 960px) {
  .hero { padding: 52px 0 46px; }
  .hero__content {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "title" "sub" "box" "ctas";
    text-align: center;
  }
  .hero__badge { justify-self: center; }
  .hero__subtitle p { margin-left: auto; margin-right: auto; }
  .hero__ctas { justify-content: center; }
  .hero__bonus-box { margin-top: 14px; }
}

/* ---------- Stats: one continuous ribbon ---------- */
.stats-bar { background: var(--tt-panel); border-bottom: 1px solid var(--tt-line); padding: 0; }
.stats-bar__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.stats-bar__inner .stat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem;
  padding: 22px 10px; border-right: 1px solid var(--tt-line);
}
.stats-bar__inner .stat:last-child { border-right: 0; }
.stats-bar__inner .stat__value { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.05; color: var(--tt-gold); }
.stat__label { font-size: 0.8rem; line-height: 1.35; color: #a9b6e0; }
@media (max-width: 1100px) {
  .stats-bar__inner { grid-template-columns: repeat(3, 1fr); }
  .stats-bar__inner .stat { border-bottom: 1px solid var(--tt-line); }
}
@media (max-width: 600px) {
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__inner .stat { padding: 16px 8px; }
  .stats-bar__inner .stat__value { font-size: 1.3rem; }
}

/* ---------- Sections and headings ---------- */
.content-section { padding: 74px 0; }
.content-section--alt {
  background: linear-gradient(180deg, #0e1640, #0b1235);
  border-top: 1px solid var(--tt-line);
  border-bottom: 1px solid var(--tt-line);
}
.content-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.7vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #f4f7ff;
  padding: 0 0 0 22px;
  margin: 0 0 28px;
  border: 0;
  border-left: 5px solid var(--tt-gold);
  position: relative;
  max-width: none;
}
.content-section h2::before, .content-section h2::after { display: none !important; }
.content-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--tt-sky);
  margin: 38px 0 14px;
  padding: 0;
  border: 0;
  text-transform: none;
}
.content-section h3::before { display: none; }
.content-section p { margin-bottom: 1.05rem; color: #c3cdee; }
.content-section p strong, .content-section li strong { color: #ffffff; }
.content-section a:not(.btn) { color: var(--tt-gold); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.45rem; color: #c3cdee; }
.content-section li::marker { color: var(--tt-gold); }
.content-section p, .content-section li { max-width: calc(74ch + 330px); }
@media (max-width: 900px) {
  .content-section { padding: 54px 0; }
  .content-section p, .content-section li { max-width: 74ch; }
}

/* ---------- Supplied phone artwork beside the text ---------- */
.content-section .section-illus--transparent {
  max-width: 300px;
  width: 300px;
  height: auto;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 28px rgba(91, 157, 255, 0.22));
}
.content-section .section-illus--right { float: right; margin: 0 0 22px 36px; }
.content-section .section-illus--left { float: left; margin: 0 36px 22px 0; }
.tt-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: 260px; max-width: 260px; margin: 12px auto 22px;
  }
}

/* ---------- Fact tables ---------- */
.tt-table-wrap {
  clear: both;
  margin: 28px 0 30px;
  border: 1px solid var(--tt-line);
  border-top: 3px solid var(--tt-sky);
  border-radius: 12px;
  overflow: hidden;
  background: var(--tt-panel);
  box-shadow: 0 12px 36px rgba(2, 4, 20, 0.45);
}
.tt-table-wrap .tt-table-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #f4f7ff;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tt-line);
  background: var(--tt-panel-2);
  margin: 0;
  max-width: none;
}
.tt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .tt-table-wrap table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  margin: 0;
  border: 0;
  display: table;
  font-size: 0.96rem;
}
.content-section .tt-table-wrap th,
.content-section .tt-table-wrap td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid rgba(38, 53, 122, 0.8);
  white-space: normal;
}
.content-section .tt-table-wrap thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-gold);
  background: #0e1640;
}
.content-section .tt-table-wrap tbody tr:nth-child(even) td { background: rgba(91, 157, 255, 0.05); }
.content-section .tt-table-wrap tbody tr:hover td { background: rgba(255, 194, 61, 0.07); color: #fff; }
.content-section .tt-table-wrap td:first-child { color: #ffffff; font-weight: 600; }
.tt-table-note {
  font-size: 0.88rem;
  color: #93a1cf;
  padding: 12px 20px;
  margin: 0 !important;
  max-width: none !important;
}
@media (max-width: 600px) {
  .content-section .tt-table-wrap table { min-width: 520px; font-size: 0.9rem; }
  .content-section .tt-table-wrap th, .content-section .tt-table-wrap td { padding: 10px 12px; }
}

/* ---------- Figure tiles ---------- */
.tt-figs { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 30px; }
.tt-fig {
  padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(160deg, var(--tt-panel-2), var(--tt-panel));
  border: 1px solid var(--tt-line);
}
.tt-fig .tt-fig__v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--tt-gold); line-height: 1.15; }
.tt-fig .tt-fig__l { display: block; font-size: 0.9rem; color: #c3cdee; margin-top: 4px; }
@media (max-width: 900px) { .tt-figs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tt-figs { grid-template-columns: 1fr; } }

/* ---------- Callout ---------- */
.tt-note {
  clear: both;
  border-left: 4px solid var(--tt-coral);
  background: rgba(255, 122, 89, 0.08);
  padding: 16px 22px;
  margin: 26px 0;
  border-radius: 0 12px 12px 0;
}
.tt-note p { margin-bottom: 0.6rem; }
.tt-note p:last-child { margin-bottom: 0; }

/* ---------- Numbered steps ---------- */
.tt-steps { display: flow-root; counter-reset: ttstep; list-style: none; margin: 18px 0 26px !important; padding: 0; }
.tt-steps li { counter-increment: ttstep; position: relative; padding: 4px 0 4px 54px; margin-bottom: 16px; }
.tt-steps li::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: #1a1200; background: var(--tt-gold);
  transform: rotate(45deg); border-radius: 6px;
}
.tt-steps li::after {
  content: counter(ttstep);
  position: absolute; left: 0; top: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #1a1200;
}

/* ---------- FAQ accordion ---------- */
.tt-faq { clear: both; margin: 18px 0 8px; }
.tt-faq details { border: 1px solid var(--tt-line); border-radius: 10px; background: var(--tt-panel); margin-bottom: 10px; overflow: hidden; }
.tt-faq summary {
  cursor: pointer; list-style: none; padding: 15px 52px 15px 20px; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #f4f7ff;
}
.tt-faq summary::-webkit-details-marker { display: none; }
.tt-faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--tt-gold);
}
.tt-faq details[open] summary::after { content: "\2212"; }
.tt-faq details[open] summary { border-bottom: 1px solid var(--tt-line); color: var(--tt-gold); }
.tt-faq details p { padding: 14px 20px 16px; margin: 0; }

/* ---------- CTA banner, footer, sticky ---------- */
.cta-banner {
  background: linear-gradient(120deg, #1d3aa8, #142266 60%, #0f1847);
  border-top: 1px solid var(--tt-line);
  text-align: center;
}
.cta-banner h2 { font-family: var(--font-display); font-weight: 800; border: 0; padding-left: 0; }
.cta-banner p { margin-left: auto; margin-right: auto; color: #dfe6ff; }
.site-footer { border-top: 1px solid var(--tt-line); background: #070c26; }
.site-footer h5 { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-gold); }
.site-footer .site-logo img { height: 44px; width: auto; }
.footer-badge { border-color: var(--tt-line); }
.sticky-cta { border-top: 2px solid var(--tt-gold); background: rgba(10, 16, 48, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 700; }
.sticky-cta__bonus { color: var(--tt-gold); font-weight: 700; }

/* ---------- Anchor offset, mobile header ---------- */
.content-section[id] { scroll-margin-top: 74px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 32px; }
  .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; }
}

/* ---------- Case and size overrides for the base theme ---------- */
.hero h1, .content-section h2, .content-section h3, .cta-banner h2, .tt-table-wrap .tt-table-title { text-transform: none; }
.hero h1 { font-size: clamp(2rem, 3.3vw, 3rem); }
.stat__label { text-transform: none; letter-spacing: 0; }