/* ============================================================
   Landing — rybbit-accurate structure: bordered center column,
   crosshair '+' marks, split cells, grid/dot textures, chrome
   mocks, hairline bento. Accent: Hermès orange #F37021.
   ============================================================ */

:root {
  --ac: #f37021;
  --ac-bright: #ff8b3d;
  --ac-soft: #f6a06b;
  --ac-deep: #b34d0e;
  --line: #1f1f1f;
  --line-2: #2a2a2a;
  --panel: #101010;
  --panel-2: #161616;
  --mut: #a1a1a1;
  --dim: #737373;
  /* remap shared accent vars for this page */
  --violet: #f37021;
  --violet-2: #ff8b3d;
  --violet-dim: rgba(243, 112, 33, 0.14);
}

html, body { overflow-x: hidden; }
body { background: #0a0a0a; color: #fafafa; }

/* ---------- shared overrides ---------- */

.topbar { background: rgba(10, 10, 10, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); padding: 0; }
/* topbar content lives in the exact same column as .frame */
.topbar-in {
  position: relative; display: flex; align-items: center; gap: 22px;
  width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 14px 20px;
}
/* vertical hairlines continue the frame borders up through the topbar */
.topbar-in::before, .topbar-in::after {
  content: ''; position: absolute; top: 0; bottom: -1px; width: 1px;
  background: var(--line);
}
.topbar-in::before { left: 0; }
.topbar-in::after { right: 0; }
@media (max-width: 1240px) { .topbar-in { padding: 14px 16px; } .topbar-in::before, .topbar-in::after { display: none; } }
.topbar .pills { position: static; transform: none; }
.pill { background: transparent; color: var(--mut); border-radius: 6px; padding: 8px 10px; font-size: 14px; font-weight: 500; }
.pill:hover { color: #fafafa; background: transparent; }
.btn { background: var(--ac); border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: #fff; font-weight: 500; }
.btn.ghost:hover { border-color: #3d3d3d; background: transparent; }
.btn.white { background: #fff; color: #0a0a0a; }
.card { background: #0d0d0d; border: none; border-radius: 12px; box-shadow: none; }
pre.code { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.band .kicker { color: var(--ac); }
.band h2 { font-weight: 600; letter-spacing: -0.03em; }

/* ---------- frame column ---------- */

.frame {
  max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.sec { position: relative; border-top: 1px solid var(--line); }
.sec:first-child { border-top: none; }
.sec.hero + .sec { border-top: none; } /* the hero's full-bleed bottom line replaces it */
.sec::before, .sec::after {
  content: '+'; position: absolute; top: -9px;
  color: #404040; font: 400 15px var(--mono); line-height: 1;
}
.sec::before { left: -5px; }
.sec::after { right: -5px; }

/* textures */
.tex-grid {
  background-image:
    linear-gradient(rgba(243, 112, 33, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 112, 33, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.tex-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* split cells */
.g2 { display: grid; grid-template-columns: 1.15fr 0.85fr; }
.g2e { display: grid; grid-template-columns: 1fr 1fr; }
.g64 { display: grid; grid-template-columns: 1.4fr 1fr; }
.cell { padding: 44px 44px; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--line); }
.cell .muted-p { color: var(--mut); font-size: 15.5px; line-height: 1.7; }

.kick {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ac); font-size: 13.5px; font-weight: 600; margin-bottom: 22px;
}
.kick::before { content: ''; width: 8px; height: 8px; background: var(--ac); }

.h-xl { font-size: clamp(38px, 4.4vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }

/* ---------- hero ---------- */

/* hero = the area inside the hairlines, between the topbar line and the carousel divider */
.sec.hero {
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  padding: 0 0 16px; /* overrides the dashboard .hero padding leaking from styles.css */
}
.hero-c {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 30px 44px;
}
/* content centers in the free row; carousel pins to the hero bottom */
.hero-mid { display: flex; flex-direction: column; align-items: center; }
/* hero backdrop image — fills exactly the hero area (top line → carousel divider) */
.hero-c::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('https://slottoassets.b-cdn.net/GkUoXEFDXCZCyh6O21kLY_9wMdZuof.png') center / cover no-repeat;
  opacity: 0.32;
}
/* hero bottom hairline — full page width, crosses the vertical lines */
.lgbar::after {
  content: ''; position: absolute; bottom: -16px; left: calc(50% - 50vw);
  width: 100vw; height: 1px; background: var(--line);
}
.star-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 14px;
  font-size: 13px; color: #d4d4d4; margin-bottom: 24px;
}
.star-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); animation: r-pulse 1.7s infinite; }
@keyframes r-pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 112, 33, 0.5); } 100% { box-shadow: 0 0 0 9px rgba(243, 112, 33, 0); } }
.hero-c h1 {
  font-size: clamp(38px, 4.9vw, 68px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06;
  max-width: 1000px; text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, #dcdfe2 38%, #8f969e 62%, #e8eaec 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-p { color: #d4d4d4; font-size: 17px; line-height: 1.65; max-width: 560px; margin-top: 22px; }
.hero-eu { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; margin: 18px 0 16px; }
.hero-eu .flag { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-note { color: var(--dim); font-size: 13px; margin-top: 18px; }

/* league logo carousel — bottom of hero */
.lgbar {
  position: relative; display: flex; align-items: center; gap: 30px;
  width: 100%; justify-self: stretch; margin-top: 0;
  padding: 26px 44px 0;
}
/* divider above the carousel — full page width */
.lgbar::before {
  content: ''; position: absolute; top: 0; left: calc(50% - 50vw);
  width: 100vw; height: 1px; background: var(--line);
}
.lg-title {
  flex: none; width: 168px; text-align: left;
  font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em;
  color: #d4d4d4;
}
.lg-title span { color: var(--ac-bright); }
.lgtrack-wrap {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lgtrack {
  display: flex; align-items: center; width: max-content;
  animation: lg-scroll 38s linear infinite;
}
.lgtrack:hover { animation-play-state: paused; }
.lgtrack img {
  height: 42px; width: auto; margin-right: 30px; flex: none;
  opacity: 0.72; filter: saturate(0.85);
  transition: opacity .15s, filter .15s;
}
/* the F1 wordmark is very wide — keep it smaller so it doesn't dominate */
.lgtrack img[src*="F1_logo"] { height: 26px; }
.lgtrack img:hover { opacity: 1; filter: saturate(1); }
@keyframes lg-scroll { to { transform: translateX(-50%); } }

/* ---------- browser chrome & app mock ---------- */

.chrome { border: 1px solid var(--line-2); border-radius: 12px; background: #0d0d0d; margin: 44px 24px 64px; overflow: hidden; }
.chrome .bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.urlpill { margin: 0 auto; font-family: var(--mono); font-size: 11px; color: var(--mut); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 14px; }

/* live demo iframe — real dashboard with dummy data, scrolls internally */
.dashframe { display: block; width: 100%; height: 660px; border: 0; background: #0a0a0a; }

/* bento mock panels reuse dashboard cards at natural size */
.bmock table th { padding: 10px 18px; }
.bmock table td { padding: 9px 18px; font-size: 12.5px; }
.mfoot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 18px; border-top: 1px solid #191919;
  font-family: var(--mono); font-size: 11px; color: #737373;
}
.mfoot .tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; }
.mfoot .tag.o { background: rgba(243, 112, 33, 0.14); color: var(--ac-bright); }
.mfoot .tag.r { background: rgba(239, 68, 68, 0.12); color: #f87171; }
/* odds history rows */
.hist { padding: 6px 18px 12px; }
.hrow {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid #191919; font-size: 12.5px;
}
.hrow:last-child { border-bottom: none; }
.hrow .tt { font-family: var(--mono); font-size: 11px; color: #525252; }
.hrow .lb { color: #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .prc { font-family: var(--mono); font-size: 11.5px; color: #a1a1a1; white-space: nowrap; }
.hrow .pct { font-family: var(--mono); font-size: 11.5px; font-weight: 700; }
/* implied probability bars (covrow language) */
.probs { padding: 10px 18px 16px; }
.prow { display: grid; grid-template-columns: 78px 1fr 52px; gap: 10px; align-items: center; padding: 7px 0; font-size: 12px; }
.prow .nm { color: #d4d4d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .bar { height: 6px; border-radius: 3px; background: #161616; position: relative; }
.prow .bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--ac); }
.prow .bar i.alt { background: var(--ac-bright); }
.prow .pv { font-family: var(--mono); color: #737373; text-align: right; }

/* ---------- bento ---------- */

.bgrid { display: grid; grid-template-columns: 1fr 1fr; }
.bcell { padding: 38px 44px; border-top: 1px solid var(--line); }
.bgrid .bcell:nth-child(even) { border-left: 1px solid var(--line); }
.bcell h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.bcell h3 .ic { color: var(--ac); font-size: 15px; }
.bcell > p { color: var(--mut); font-size: 14px; line-height: 1.65; margin-bottom: 22px; max-width: 560px; }

.mock2 { border: 1px solid var(--line-2); border-radius: 10px; background: #0d0d0d; overflow: hidden; }
.mock2 .mh {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--mut);
}
.mock2 .mh {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--mut);
}

/* ---------- feature link lists ---------- */

.flists { display: grid; grid-template-columns: repeat(4, 1fr); }
.flist { padding: 30px 28px; }
.flist + .flist { border-left: 1px solid var(--line); }
.flist h4 { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.fl { display: flex; justify-content: space-between; padding: 9px 0; color: var(--mut); font-size: 13.5px; }
.fl:hover { color: #fafafa; }
.fl .ar { color: var(--dim); }

/* ---------- terminal ---------- */

.term .mb { padding: 20px 22px; font-family: var(--mono); font-size: 12.5px; line-height: 2; color: #d4d4d4; min-height: 260px; }
.term .pr { color: var(--dim); }
.term .fn { color: var(--ac-bright); }
.term .bullet { color: var(--ac); }
.cur { display: inline-block; width: 8px; height: 14px; background: var(--ac); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wchips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 30px; }
.wchip { border: 1px solid #333; border-radius: 8px; padding: 7px 13px; font-size: 12.5px; color: #d4d4d4; }
.arr { color: var(--ac-bright); font-size: 13.5px; font-weight: 600; margin-right: 22px; }
.arr.w { color: #fafafa; font-weight: 500; }

/* ---------- tweets ---------- */

.twcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 34px 44px 54px; }
.tw { border: 1px solid var(--line); border-radius: 12px; background: #0d0d0d; padding: 16px; margin-bottom: 14px; }
.tw .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tw .av { width: 38px; height: 38px; border-radius: 50%; background: #1d1d1d; color: var(--ac-bright); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.tw .nm { font-size: 13.5px; font-weight: 600; }
.tw .hd .x { margin-left: auto; color: #4a9eda; font-size: 14px; }
.tw p { color: #d4d4d4; font-size: 13px; line-height: 1.65; }

/* ---------- FAQ ---------- */

.fq { border-top: 1px solid var(--line); }
.fq:first-child { border-top: none; }
.fq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 22px 6px; font-size: 15.5px; font-weight: 600; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary .ch { color: var(--dim); transition: transform .15s; }
.fq[open] summary .ch { transform: rotate(180deg); }
.fq .a { padding: 0 6px 22px; color: var(--mut); font-size: 14px; line-height: 1.7; max-width: 640px; }

/* ---------- pricing ---------- */

.slider-card { border: 1px solid var(--line-2); border-radius: 12px; background: #0d0d0d; padding: 26px 30px; margin: 40px 44px; }
.slider-card .l { color: var(--mut); font-size: 13px; }
.slider-card .big { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 20px; }
.slider-card input[type="range"] { width: 100%; accent-color: var(--ac); }
.ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--dim); }
.ticks .on { color: var(--ac); font-weight: 700; }
.toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.toggle span { padding: 8px 16px; font-size: 13px; color: var(--mut); }
.toggle span.on { background: #1d1d1d; color: #fafafa; }
.mini-badge { background: var(--ac); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 9px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.pl { padding: 38px 44px; }
.pl + .pl { border-left: 1px solid var(--line); }
.pl.rec { border: 1px solid var(--ac); position: relative; }
.pl h3 { font-size: 19px; font-weight: 600; }
.pl .sub { color: var(--mut); font-size: 13.5px; margin: 8px 0 26px; }
.pl .price { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; }
.pl .price small { font-size: 13px; color: var(--dim); font-weight: 400; }
.pl ul { list-style: none; margin: 24px 0; }
.pl li { color: var(--mut); font-size: 13.5px; padding: 8px 0; border-top: 1px solid #191919; }
.pl li b { color: #fafafa; }
.pl .btn { width: 100%; }

/* ---------- final CTA ---------- */

/* same backdrop as the hero (68% dark veil over the image == 0.32 opacity on #0a0a0a) */
.cta2 {
  background: linear-gradient(rgba(10, 10, 10, 0.68), rgba(10, 10, 10, 0.68)),
    url('https://slottoassets.b-cdn.net/GkUoXEFDXCZCyh6O21kLY_9wMdZuof.png') center / cover no-repeat;
}
.cta2 h2 { font-size: clamp(38px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.cta2 .muted-p { color: #d8c5b6; }
.cta2 .hero-note { color: #a58b76; }

/* ---------- footer ---------- */

.ftr { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); padding: 60px 44px; }
.ftr .col + .col, .ftr .col:first-child + .col { border-left: none; }
.ftr h5 { font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }
.ftr a { display: block; color: var(--mut); font-size: 13.5px; padding: 6px 0; }
.ftr a:hover { color: #fafafa; }
.socials { display: flex; gap: 18px; margin-top: 120px; color: var(--dim); font-size: 16px; }

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .g2, .g2e, .g64, .bgrid, .twcols, .plans, .flists { grid-template-columns: 1fr; }
  .cell + .cell, .bgrid .bcell:nth-child(even), .pl + .pl, .flist + .flist { border-left: none; border-top: 1px solid var(--line); }
  .lgbar { flex-direction: column; gap: 18px; padding: 26px 20px 0; }
  .lg-title { width: auto; text-align: center; }
  .app { grid-template-columns: 1fr; }
  .app .side { border-right: none; border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .ftr { grid-template-columns: 1fr 1fr; }
  .topbar .pills { display: none; }
}