:root {

  --bg: #f5f9ff;

  --surface: #ffffff;

  --ink: #0e2340;

  --muted: #5d6c80;

  --brand: #1769ff;

  --brand-dark: #0f4fcc;

  --line: #d9e4f5;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: Inter, Arial, sans-serif;

  color: var(--ink);

  background: var(--bg);

  line-height: 1.5;

}



.container {

  width: min(1120px, 92%);

  margin-inline: auto;

}



.top-nav {

  position: sticky;

  top: 0;

  z-index: 20;

  background: rgba(255, 255, 255, 0.95);

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(8px);

}



.nav-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 0.85rem 0;

}



.logo {

  font-weight: 800;

  text-decoration: none;

  color: var(--ink);

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.star {

  color: var(--brand);

}



nav {

  display: flex;

  gap: 1rem;

}



nav a {

  text-decoration: none;

  color: var(--ink);

  font-weight: 500;

  font-size: 0.95rem;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  padding: 0.72rem 1rem;

  text-decoration: none;

  font-weight: 700;

  border: 1px solid transparent;

  cursor: pointer;

}



.btn-primary {

  background: var(--brand);

  color: #fff;

}



.btn-primary:hover {

  background: var(--brand-dark);

}



.btn-secondary {

  color: var(--brand);

  border-color: var(--brand);

  background: transparent;

}



.hero {

  padding: 4.5rem 0 3rem;

}



.hero-grid {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 2rem;

  align-items: center;

}



.eyebrow {

  color: var(--brand);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 0.82rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}



h1,

h2,

h3 {

  line-height: 1.15;

  margin: 0 0 1rem;

}



h1 {

  font-size: clamp(2rem, 4vw, 3.2rem);

}



h2 {

  font-size: clamp(1.6rem, 3vw, 2.3rem);

}



.lead {

  font-size: 1.1rem;

  color: var(--muted);

  max-width: 60ch;

}



.hero-ctas {

  display: flex;

  gap: 0.8rem;

  margin: 1.2rem 0;

}



.trust {

  color: var(--muted);

}



.video-card {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 16px;

  padding: 1rem;

  box-shadow: 0 14px 40px rgba(23, 105, 255, 0.1);

}



.laptop-frame {

  border: 2px solid #ccd8ef;

  border-radius: 14px;

  padding: 1rem;

  background: #fdfefe;

}



.screen {

  min-height: 220px;

  background: linear-gradient(140deg, #0f4fcc, #31a7ff);

  border-radius: 10px;

  color: #fff;

  display: grid;

  place-items: center;

  text-align: center;

  padding: 1rem;

}



.screen-title {

  margin: 0;

  font-weight: 700;

}



.play-btn {

  border: 0;

  border-radius: 999px;

  width: 62px;

  height: 62px;

  font-size: 1.25rem;

  cursor: pointer;

  margin-top: 0.8rem;

}



.section {

  padding: 4rem 0;

}



.section-alt {

  background: #edf4ff;

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}



.cards-3 {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

  margin-top: 1.4rem;

}



.card {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 14px;

  padding: 1rem;

}



.market-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

  margin-top: 1rem;

}



.market-lists {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

  margin-top: 1rem;

}



.player-grid {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 1rem;

  align-items: start;

}



.player-grid input[type="range"] {

  width: 100%;

}



.stack {

  display: grid;

  gap: 0.5rem;

}



.stack input,

.stack select {

  border: 1px solid #becce5;

  border-radius: 10px;

  padding: 0.68rem;

  font: inherit;

  background: #fff;

}



#fp-status {

  min-height: 1.2rem;

  color: #0f4fcc;

  margin: 0;

  font-weight: 700;

}



.row-between {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.list {

  display: grid;

  gap: 0.6rem;

  margin-top: 0.6rem;

}



.item {

  display: grid;

  gap: 0.35rem;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 0.75rem;

  background: #fff;

}



.item-top {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 0.75rem;

}



.item-title {

  font-weight: 800;

}



.item-sub {

  color: var(--muted);

  font-size: 0.95rem;

}



.item-actions {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.thumb {

  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  border-radius: 10px;

  border: 1px solid var(--line);

}



.flyer-link {

  display: block;

  margin: 0.75rem 0 0.5rem;

  text-decoration: none;

}



.flyer {

  width: 100%;

  max-width: 520px;

  border-radius: 14px;

  border: 1px solid var(--line);

  box-shadow: 0 18px 50px rgba(7, 26, 49, 0.18);

  display: block;

}



.flyer-link:hover .flyer {

  border-color: rgba(23, 105, 255, 0.55);

}



.total {

  margin-top: 0.75rem;

  padding-top: 0.75rem;

  border-top: 1px solid var(--line);

}



.tag {

  display: inline-block;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--brand);

  background: #e7f0ff;

  border-radius: 999px;

  padding: 0.2rem 0.7rem;

}



.text-link {

  text-decoration: none;

  color: var(--brand);

  font-weight: 700;

}



.tabs {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 1rem;

}



.tab {

  border: 1px solid var(--line);

  background: #fff;

  color: var(--ink);

  border-radius: 10px;

  padding: 0.6rem 0.9rem;

  cursor: pointer;

  font-weight: 700;

}



.tab.active {

  color: #fff;

  background: var(--brand);

  border-color: var(--brand);

}



.tab-panel {

  display: none;

}



.tab-panel.active {

  display: block;

}



.feature-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem;

}



.feature {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 10px;

  padding: 0.85rem;

  font-weight: 600;

}



.quote {

  margin: 1rem 0 1.6rem;

  background: #fff;

  border-left: 4px solid var(--brand);

  border-radius: 8px;

  padding: 1rem;

}



.quote footer {

  color: var(--muted);

  margin-top: 0.5rem;

}



.stats {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

}



.stat {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 1rem;

}



.stat strong {

  display: block;

  font-size: 1.5rem;

}



.stat span {

  color: var(--muted);

}



.cta {

  background: linear-gradient(180deg, #0c3d99, #1769ff);

  color: #fff;

}



.cta-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.4rem;

  align-items: start;

}



.demo-form {

  background: #fff;

  color: var(--ink);

  border-radius: 14px;

  padding: 1rem;

  display: grid;

  gap: 0.5rem;

}



.demo-form input {

  border: 1px solid #becce5;

  border-radius: 10px;

  padding: 0.68rem;

  font: inherit;

}



#calendar-status,

#form-status {

  min-height: 1.2rem;

  color: #0f4fcc;

  margin: 0;

  font-weight: 600;

}



.calendar-form {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 14px;

  padding: 1rem;

  display: grid;

  gap: 0.8rem;

  max-width: 720px;

}



.calendar-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.8rem;

}



.calendar-field {

  display: grid;

  gap: 0.35rem;

}



.calendar-form input,

.calendar-form select {

  border: 1px solid #becce5;

  border-radius: 10px;

  padding: 0.68rem;

  font: inherit;

  background: #fff;

}



.footer {

  background: #071a31;

  color: #e1ecff;

  padding: 2rem 0 1rem;

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1rem;

}



.footer h4 {

  margin: 0 0 0.3rem;

}



.copyright {

  text-align: center;

  margin: 1rem 0 0;

  color: #8fb0e0;

  font-size: 0.92rem;

}



@media (max-width: 980px) {

  nav {

    display: none;

  }



  .hero-grid,

  .cards-3,

  .cta-grid,

  .stats,

  .footer-grid {

    grid-template-columns: 1fr;

  }



  .feature-grid {

    grid-template-columns: 1fr;

  }



  .calendar-row {

    grid-template-columns: 1fr;

  }



  .market-grid,

  .market-lists {

    grid-template-columns: 1fr;

  }



  .player-grid {

    grid-template-columns: 1fr;

  }

}