:root
{
  --bg:#07152f;
  --panel:#0d2145;
  --panel2:#122b55;
  --line:#234574;
  --text:#f4f7ff;
  --muted:#aabbd6;
  --red:#7db8ff;
  --lime:#7db8ff;
  --font:'DM Sans',sans-serif;
  --display:'Barlow Condensed',sans-serif
}

*
{
  box-sizing:border-box
}

html
{
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body
{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6
}

a
{
  color:inherit;
  text-decoration:none
}

.wrap
{
  width:min(1160px,calc(100% - 48px));
  margin:auto
}

.topline
{
  height:32px;
  background:var(--lime);
  color:#10120c;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.4px;
  padding:0 max(24px,calc((100% - 1160px)/2));
  display:flex;
  align-items:center;
  gap:9px
}

.topline .pulse
{
  background:#10120c
}

.topline-right
{
  margin-left:auto
}

.site-header
{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand
{
  display:flex;
  align-items:center;
  gap:11px
}

.brand-mark
{
  font:900 24px var(--display);
  letter-spacing:-1px;
  border:2px solid var(--red);
  padding:1px 6px;
  transform:skew(-8deg)
}

.brand-mark span,.brand-name span
{
  color:#7db8ff
}

.brand-name
{
  font:800 18px var(--display);
  letter-spacing:1.2px
}

.site-header nav
{
  display:flex;
  align-items:center;
  gap:29px;
  font-size:12px;
  font-weight:700;
  color:#c4c9d2
}

.site-header nav a:hover
{
  color:#7db8ff
}

.nav-cta
{
  padding:11px 15px;
  border:1px solid #4a505b;
  color:var(--text)!important
}

.nav-cta:hover
{
  border-color:#7db8ff
}

.menu-toggle
{
  display:none;
  background:none;
  border:0;
  color:white;
  font-size:25px
}

.hero
{
  min-height:590px;
  padding-top:70px;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:42px;
  position:relative;
  align-items:center
}

.eyebrow
{
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  color:#c3c8d1;
  display:flex;
  align-items:center;
  gap:10px
}

.eyebrow-line
{
  width:25px;
  height:2px;
  background:var(--lime);
  display:inline-block
}

.hero h1,.section h2,.membership-section h2,.merch-section h2,.join-section h2
{
  font:900 clamp(55px,7vw,91px)/.88 var(--display);
  letter-spacing:-1px;
  margin:22px 0
}

.outline
{
  color:transparent;
  -webkit-text-stroke:1.5px var(--lime)
}

.hero-text
{
  color:var(--muted);
  max-width:455px;
  font-size:15px;
  line-height:1.8
}

.hero-actions
{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:29px 0 38px
}

.button
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:14px 19px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  min-height:47px;
  transition:.2s
}

.button-primary
{
  background:var(--lime);
  color:#fff
}

.button-primary:hover
{
  background:#e1ff9a;
  transform:translateY(-2px)
}

.button-ghost
{
  border:1px solid #414753;
  color:var(--text)
}

.button-ghost:hover
{
  border-color:#7db8ff;
  color:#7db8ff
}

.play
{
  font-size:12px
}

.social-proof
{
  display:flex;
  align-items:center;
  gap:13px
}

.avatar-stack
{
  display:flex;
  padding-left:2px
}

.avatar-stack span
{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#2a303a;
  border:2px solid var(--bg);
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
  margin-left:-4px
}

.avatar-stack span:nth-child(2)
{
  background:var(--lime)
}

.avatar-stack span:nth-child(3)
{
  background:var(--lime);
  color:#10120c
}

.social-proof strong,.social-proof small
{
  display:block
}

.social-proof strong
{
  font-size:9px;
  letter-spacing:1px
}

.social-proof small
{
  font-size:10px;
  color:var(--muted)
}

.vertical-rule
{
  height:31px;
  width:1px;
  background:var(--line);
  margin:0 3px
}

.live-indicator
{
  font-size:9px;
  letter-spacing:.7px;
  color:#c5cad3;
  display:flex;
  align-items:center;
  gap:7px
}

.pulse
{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 4px #7db8ff1f
}

.hero-art
{
  height:400px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1c222b 0%,#101319 58%,#252a32 100%);
  border:1px solid #333a46;
  clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)
}

.art-grid
{
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(135deg,black,transparent 80%)
}

.hero-number
{
  position:absolute;
  right:-14px;
  top:-65px;
  font:900 330px/.9 var(--display);
  color:#ffffff08
}

.speed
{
  position:absolute;
  height:12px;
  background:var(--lime);
  transform:skew(-38deg);
  right:-30px
}

.speed-one
{
  top:90px;
  width:250px
}

.speed-two
{
  top:112px;
  width:170px;
  background:var(--lime);
  height:5px
}

.hero-emblem
{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%) skew(-8deg);
  width:76%;
  height:190px;
  border:2px solid var(--red);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#0b0c10df;
  box-shadow:12px 12px 0 #7db8ff33
}

.emblem-top,.emblem-bottom
{
  font-size:10px;
  font-weight:800;
  letter-spacing:4px
}

.hero-emblem strong
{
  font:900 clamp(58px,8vw,95px)/.95 var(--display);
  letter-spacing:-2px
}

.hero-emblem strong span
{
  color:#7db8ff
}

.emblem-bottom
{
  letter-spacing:2px;
  color:#a8b0bc;
  margin-top:12px
}

.art-label
{
  position:absolute;
  font-size:8px;
  letter-spacing:2px;
  font-weight:800;
  color:#a9b0bb
}

.art-label-top
{
  left:22px;
  top:20px
}

.art-label-bottom
{
  left:22px;
  bottom:21px
}

.checkered
{
  position:absolute;
  right:0;
  bottom:0;
  width:75px;
  height:45px;
  opacity:.4;
  background:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0);
  background-size:16px 16px
}

.hero-foot
{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  padding:22px 0;
  border-top:1px solid var(--line);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#777f8d
}

.scroll-arrow
{
  color:#7db8ff;
  margin-left:8px
}

.ticker
{
  overflow:hidden;
  border-block:1px solid #2d333e;
  background:#101319;
  padding:13px 0;
  margin-top:4px
}

.ticker-track
{
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:38px;
  white-space:nowrap;
  font:800 17px var(--display);
  letter-spacing:2px
}

.ticker-track b
{
  color:#7db8ff;
  font-size:16px
}

.section
{
  padding-top:100px;
  padding-bottom:100px
}

.section-head
{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:35px
}

.section h2,.membership-section h2,.merch-section h2,.join-section h2
{
  font-size:clamp(42px,5vw,61px);
  margin:15px 0 0
}

.accent
{
  color:#7db8ff
}

.section-intro
{
  max-width:365px;
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  margin:0 0 5px
}

.leaderboard-panel
{
  background:var(--panel);
  border:1px solid #303641
}

.panel-top
{
  padding:27px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)
}

.panel-kicker
{
  font-size:9px;
  letter-spacing:1.7px;
  color:var(--muted);
  font-weight:800
}

.panel-top h3
{
  font:700 28px var(--display);
  margin:5px 0 0
}

.live-dot
{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
  margin-left:11px;
  vertical-align:middle
}

.season-tag
{
  border:1px solid #3b424e;
  padding:8px 12px;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted)
}

.season-tag b
{
  color:#7db8ff;
  margin-left:6px
}

.table-wrap
{
  overflow-x:auto
}

table
{
  border-collapse:collapse;
  width:100%;
  min-width:550px
}

th
{
  text-align:left;
  padding:14px 22px;
  color:#7f8795;
  font-size:9px;
  letter-spacing:1.3px;
  font-weight:800;
  background:#0f1116
}

td
{
  padding:17px 22px;
  border-top:1px solid #252a33;
  font-size:12px
}

th:first-child,td:first-child
{
  padding-left:30px;
  width:75px
}

td:first-child
{
  font:800 20px var(--display);
  color:#727b89
}

.driver
{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700
}

.driver-badge
{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:#252b35;
  color:#7db8ff;
  font:800 14px var(--display)
}

.wins
{
  font:800 23px var(--display)
}

.wins small
{
  font:500 10px var(--font);
  color:var(--muted);
  margin-left:5px
}

.status
{
  font-size:9px;
  letter-spacing:.8px;
  color:#aeb6c3;
  border:1px solid #373e49;
  padding:5px 8px
}

.status.champ
{
  color:#7db8ff;
  border-color:#52672b
}

.panel-bottom
{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:16px 30px;
  border-top:1px solid var(--line);
  font-size:9px;
  letter-spacing:.7px;
  color:#7e8795
}

.panel-bottom>span:first-child
{
  display:flex;
  align-items:center;
  gap:9px;
  color:#c4c9d2
}

.fine-print
{
  font-size:10px;
  color:#777f8d;
  margin-top:14px
}

.membership-section
{
  background:#101319;
  border-block:1px solid #242a34;
  padding:85px 0
}

.tier-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

.tier-card
{
  position:relative;
  background:#151920;
  border:1px solid #303641;
  padding:25px 24px 24px;
  min-height:320px;
  display:flex;
  flex-direction:column
}

.tier-featured
{
  border-color:#7db8ff;
  background:linear-gradient(150deg,#122e5b,#0d2145 60%)
}

.featured-flag
{
  position:absolute;
  right:0;
  top:0;
  background:var(--lime);
  color:#fff;
  padding:6px 10px;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px
}

.tier-top
{
  display:flex;
  align-items:center;
  justify-content:space-between
}

.tier-number
{
  font:800 22px var(--display);
  color:#626b79
}

.tier-label
{
  font-size:9px;
  letter-spacing:1.5px;
  color:#7db8ff;
  font-weight:800
}

.tier-card h3
{
  font:800 29px var(--display);
  margin:25px 0 5px
}

.tier-desc
{
  font-size:11px;
  color:var(--muted);
  min-height:38px
}

.tier-card ul
{
  padding:0;
  list-style:none;
  margin:18px 0 23px
}

.tier-card li
{
  font-size:11px;
  color:#d0d4dc;
  padding:7px 0;
  border-bottom:1px solid #2a3039
}

.tier-card li:before
{
  content:'+';
  color:#7db8ff;
  font-weight:900;
  margin-right:9px
}

.tier-link
{
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  color:#7db8ff;
  margin-top:auto
}

.partner-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

.partner-card
{
  min-height:185px;
  border:1px solid #303641;
  background:var(--panel);
  padding:23px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:.2s
}

.partner-card:hover
{
  border-color:#7db8ff;
  transform:translateY(-3px)
}

.partner-icon
{
  align-self:flex-end;
  color:#7db8ff;
  font-size:20px
}

.partner-label
{
  font-size:9px;
  color:#858e9c;
  letter-spacing:1.5px;
  font-weight:800;
  margin-top:-12px
}

.partner-card strong
{
  font:700 24px var(--display);
  margin:11px 0 4px
}

.partner-card small
{
  font-size:10px;
  color:var(--muted)
}

.affiliate-note
{
  font-size:10px;
  color:#8d95a3;
  margin-top:17px
}

.merch-section
{
  background:#171c23;
  border-block:1px solid #303641;
  position:relative;
  overflow:hidden
}

.merch-inner
{
  min-height:260px;
  display:grid;
  grid-template-columns:125px 1fr auto;
  align-items:center;
  gap:34px;
  padding-top:42px;
  padding-bottom:42px
}

.merch-stamp
{
  width:108px;
  height:108px;
  border:2px solid var(--red);
  display:grid;
  place-items:center;
  font:900 40px var(--display);
  transform:rotate(-7deg);
  box-shadow:7px 7px 0 #7db8ff3d
}

.merch-stamp span
{
  color:#7db8ff
}

.merch-section h2
{
  font-size:clamp(38px,4vw,54px)
}

.merch-section p,.join-section p
{
  font-size:12px;
  color:var(--muted);
  max-width:460px
}

.merch-action
{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px
}

.coming-soon
{
  font-size:9px;
  letter-spacing:1.2px;
  color:#c7cbd3
}

.coming-soon b
{
  display:block;
  font-size:11px;
  color:#7db8ff;
  margin-top:4px
}

.join-section
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:75px;
  padding-bottom:75px
}

.join-section h2
{
  font-size:clamp(38px,4vw,54px)
}

.join-actions
{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.footer
{
  border-top:1px solid var(--line);
  background:#08090c
}

.footer-inner
{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.footer-inner>span,.footer-inner>a:last-child
{
  font-size:9px;
  letter-spacing:1px;
  color:#7e8795
}

.footer-inner>a:last-child:hover
{
  color:#7db8ff
}

@media(max-width:850px)
{
  .site-header nav
  {
    gap:15px
  }

  .hero
  {
    gap:25px
  }

  .hero-art
  {
    height:340px
  }

  .hero h1
  {
    font-size:68px
  }

  .section-head
  {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }

  .section-intro
  {
    max-width:550px
  }

  .merch-inner
  {
    grid-template-columns:90px 1fr;
    gap:25px
  }

  .merch-stamp
  {
    width:80px;
    height:80px;
    font-size:31px
  }

  .merch-action
  {
    grid-column:2;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap
  }

  .tier-card
  {
    padding:20px 17px
  }

  .tier-card h3
  {
    font-size:25px
  }

}

@media(max-width:640px)
{
  .wrap
  {
    width:calc(100% - 34px)
  }

  .topline
  {
    padding:0 17px;
    font-size:8px
  }

  .topline-right
  {
    display:none
  }

  .site-header
  {
    height:72px
  }

  .menu-toggle
  {
    display:block
  }

  .site-header nav
  {
    display:none;
    position:absolute;
    z-index:10;
    top:104px;
    left:0;
    right:0;
    background:#101319;
    border-bottom:1px solid var(--line);
    padding:20px 24px;
    flex-direction:column;
    align-items:stretch
  }

  .site-header nav.open
  {
    display:flex
  }

  .site-header nav a
  {
    padding:8px
  }

  .nav-cta
  {
    text-align:center
  }

  .hero
  {
    padding-top:50px;
    grid-template-columns:1fr;
    gap:28px
  }

  .hero h1
  {
    font-size:clamp(61px,17vw,82px)
  }

  .hero-art
  {
    height:300px;
    grid-row:2
  }

  .hero-emblem
  {
    height:150px
  }

  .hero-emblem strong
  {
    font-size:69px
  }

  .hero-foot
  {
    font-size:8px
  }

  .section
  {
    padding-top:68px;
    padding-bottom:68px
  }

  .section h2,.membership-section h2
  {
    font-size:44px
  }

  .panel-top
  {
    padding:20px
  }

  .panel-top h3
  {
    font-size:24px
  }

  .panel-bottom
  {
    padding:14px 18px;
    flex-direction:column
  }

  .tier-grid,.partner-grid
  {
    grid-template-columns:1fr
  }

  .tier-card
  {
    min-height:0
  }

  .tier-desc
  {
    min-height:0
  }

  .tier-card ul
  {
    margin-bottom:20px
  }

  .membership-section
  {
    padding:65px 0
  }

  .partner-card
  {
    min-height:155px
  }

  .merch-inner
  {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:45px;
    padding-bottom:45px
  }

  .merch-stamp
  {
    width:76px;
    height:76px
  }

  .merch-action
  {
    grid-column:auto;
    flex-direction:column;
    align-items:flex-start
  }

  .join-section
  {
    align-items:flex-start;
    flex-direction:column;
    padding-top:60px;
    padding-bottom:60px
  }

  .footer-inner
  {
    padding:22px 0;
    flex-wrap:wrap
  }

  .footer-inner>span
  {
    order:3;
    width:100%
  }

  .social-proof
  {
    flex-wrap:wrap
  }

  .vertical-rule
  {
    display:none
  }

}

/* Cardiff City-inspired blue, white and red theme */

.brand-logo-img
{
  width:172px;
  height:58px;
  object-fit:contain;
  object-position:left center;
  display:block
}

.hero-emblem
{
  border-color:#e51d3e
}

.tier-featured
{
  border-color:#7db8ff
}

.featured-flag
{
  background:#7db8ff;
  color:#07152f
}

.button-primary
{
  background:#7db8ff;
  color:#07152f
}

.button-primary:hover
{
  background:#a5d0ff
}

.outline
{
  -webkit-text-stroke:1.5px #7db8ff
}

.merch-stamp
{
  border-color:#7db8ff
}

/* Cardiff City-inspired blue, white and red theme */

.brand-logo-img
{
  width:172px;
  height:58px;
  object-fit:contain;
  object-position:left center;
  display:block
}

.tier-featured
{
  border-color:#7db8ff
}

.featured-flag
{
  background:#7db8ff;
  color:#07152f
}

.button-primary
{
  background:#7db8ff;
  color:#07152f
}

.button-primary:hover
{
  background:#a5d0ff
}

.outline
{
  -webkit-text-stroke:1.5px #7db8ff
}

.merch-stamp
{
  border-color:#7db8ff
}

.tier-price
{
  font:800 30px var(--display);
  color:#fff;
  margin-top:6px
}

.tier-price span
{
  font:500 11px var(--font);
  color:var(--muted)
}

.tier-card ul
{
  margin-top:12px
}

/* Blue-and-white-only Cardiff palette: no red accents */

:root
{
  --red:#7db8ff;
  --lime:#7db8ff
}

.featured-flag
{
  background:#7db8ff;
  color:#07152f
}

.button-primary
{
  background:#7db8ff;
  color:#07152f
}

.button-primary:hover
{
  background:#a5d0ff
}

.merch-stamp
{
  border-color:#7db8ff;
  box-shadow:7px 7px 0 #7db8ff33
}

.hero-emblem
{
  border-color:#7db8ff;
  box-shadow:12px 12px 0 #7db8ff22
}

/* Simpler, direct homepage top: use only the creator's supplied logo asset. */

.hero
{
  min-height:440px;
  padding-top:48px;
  padding-bottom:30px;
  grid-template-columns:1fr .8fr;
  gap:52px
}

.hero h1
{
  font-size:clamp(54px,6.3vw,78px);
  margin:18px 0
}

.hero-text
{
  max-width:470px
}

.hero-art
{
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:none;
  background:#07152f;
  border:1px solid #234574;
  padding:26px
}

.hero-art .hero-logo
{
  display:block;
  width:100%;
  max-width:430px;
  height:auto;
  max-height:240px;
  object-fit:contain
}

.quick-links
{
  display:flex;
  gap:10px 20px;
  flex-wrap:wrap;
  margin-top:26px
}

.quick-links a
{
  font-size:10px;
  color:#aabbd6;
  border-bottom:1px solid #234574;
  padding-bottom:4px
}

.quick-links a span
{
  color:#7db8ff;
  margin-left:5px
}

.quick-links a:hover
{
  color:#fff;
  border-color:#7db8ff
}

@media(max-width:640px)
{
  .hero
  {
    padding-top:40px;
    grid-template-columns:1fr;
    gap:25px
  }

  .hero-art
  {
    grid-row:auto;
    height:220px
  }

  .hero-art .hero-logo
  {
    max-height:170px
  }

  .hero h1
  {
    font-size:60px
  }

  .quick-links
  {
    gap:12px 16px
  }

}

/* User-supplied racing screenshot used as the homepage hero image */

.hero-art
{
  padding:0;
  overflow:hidden;
  background:#07152f
}

.hero-art .hero-logo
{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
  display:block
}

/* Automatic TikTok LIVE banner: hidden unless the status endpoint confirms LIVE. */

.live-banner[hidden]
{
  display:none!important
}

.live-banner
{
  min-height:38px;
  background:#e51b32;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 16px;
  text-align:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px
}

.live-banner a
{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px
}

.live-banner-dot
{
  width:8px;
  height:8px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 0 4px #ffffff35;
  animation:livePulse 1.4s infinite
}

@keyframes livePulse
{
  0%,100%
  {
    opacity:1
  }

  50%
  {
    opacity:.45
  }

}

/* TTDM United FC Pro Clubs section */

.proclubs-panel
{
  border:1px solid #303b4c;
  background:linear-gradient(145deg,#101a2a,#0b0e14 55%);
  overflow:hidden
}

.proclubs-top
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:28px 30px;
  border-bottom:1px solid #263246
}

.proclubs-top h3
{
  font:800 32px var(--display);
  margin:7px 0
}

.proclubs-top p
{
  font-size:11px;
  color:var(--muted);
  margin:0;
  max-width:540px
}

.club-status-dot
{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7db8ff;
  margin-left:9px;
  vertical-align:middle;
  box-shadow:0 0 0 4px #7db8ff22
}

.club-platform
{
  border:1px solid #35517b;
  color:#a9cfff;
  padding:10px 14px;
  text-align:center;
  font-size:8px;
  line-height:1.7;
  letter-spacing:1.5px;
  white-space:nowrap
}

.club-platform b
{
  font-size:13px;
  color:#fff
}

.club-stats
{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid #263246
}

.club-stat
{
  padding:22px 18px;
  border-right:1px solid #263246
}

.club-stat:last-child
{
  border-right:0
}

.club-stat span
{
  display:block;
  font-size:8px;
  letter-spacing:1.2px;
  color:#8e9db2;
  font-weight:800
}

.club-stat strong
{
  display:block;
  font:800 30px var(--display);
  margin-top:7px
}

.club-subhead
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:22px 28px 10px
}

.club-subhead h4
{
  font:800 18px var(--display);
  margin:0;
  letter-spacing:.7px
}

.club-subhead span
{
  font-size:8px;
  color:#8e9db2;
  letter-spacing:1px
}

.squad-table
{
  min-width:570px
}

.squad-table th
{
  background:transparent
}

.squad-table td
{
  padding-top:12px;
  padding-bottom:12px
}

.squad-table td:first-child
{
  font:700 12px var(--font);
  color:#f3f6fb;
  width:auto
}

.squad-table td:not(:first-child)
{
  font-variant-numeric:tabular-nums
}

.recent-results
{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  padding:4px 28px 24px
}

.result-card
{
  border:1px solid #29374a;
  background:#111a27;
  padding:13px 10px;
  text-align:center;
  min-width:0
}

.result-card .result-outcome
{
  font-size:8px;
  letter-spacing:1px;
  font-weight:900;
  color:#7db8ff
}

.result-card .result-score
{
  font:800 24px var(--display);
  margin:7px 0;
  white-space:nowrap
}

.result-card .result-opponent
{
  font-size:9px;
  color:#c0c9d7;
  overflow-wrap:anywhere
}

.result-card .result-date
{
  font-size:8px;
  color:#77869a;
  margin-top:8px
}

.club-empty
{
  padding:0 28px 20px;
  font-size:11px;
  color:var(--muted)
}

.club-foot
{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:15px 28px;
  border-top:1px solid #263246;
  color:#8e9db2;
  font-size:9px
}

.club-foot a
{
  color:#7db8ff;
  font-weight:800;
  letter-spacing:.8px
}

.club-foot a:hover
{
  color:#fff
}

@media(max-width:700px)
{
  .proclubs-top
  {
    padding:22px 18px
  }

  .proclubs-top h3
  {
    font-size:27px
  }

  .club-stats
  {
    grid-template-columns:repeat(2,1fr)
  }

  .club-stat
  {
    padding:16px;
    border-bottom:1px solid #263246
  }

  .club-stat:nth-child(2n)
  {
    border-right:0
  }

  .club-stat:last-child
  {
    grid-column:span 2;
    border-bottom:0
  }

  .recent-results
  {
    grid-template-columns:repeat(2,1fr);
    padding-inline:16px
  }

  .club-subhead
  {
    padding-inline:18px
  }

  .club-foot
  {
    padding-inline:18px;
    flex-direction:column;
    align-items:flex-start
  }

  .club-platform
  {
    font-size:7px;
    padding:8px
  }

  .proclubs-top p
  {
    line-height:1.6
  }

}

/* TikTok follower count feature */

.follower-card
{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  width:min(100%,420px);
  min-height:160px;
  box-sizing:border-box;
  margin:24px auto 12px;
  padding:24px 28px;
  border:1px solid #315b91;
  border-radius:14px;
  background:linear-gradient(135deg,#102b56,#0a1c39);
  box-shadow:0 12px 32px #020a1880;
  transition:transform .2s,border-color .2s
}

.follower-card:hover
{
  transform:translateY(-2px);
  border-color:#7db8ff
}

.follower-label
{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#c5d9f7;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  line-height:1.5;
  text-align:center
}

.follower-live-dot
{
  width:8px;
  height:8px;
  display:inline-block;
  border-radius:50%;
  background:#7db8ff;
  box-shadow:0 0 12px #7db8ff
}

.follower-card strong
{
  display:block;
  max-width:100%;
  font-family:var(--display);
  font-size:clamp(54px,7vw,82px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-1px;
  color:#fff;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  text-align:center
}

.follower-foot
{
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin-top:0;
  text-align:center
}

@media(max-width:700px)
{
  .follower-card
  {
    width:100%;
    max-width:420px;
    min-height:145px;
    margin:20px auto 12px;
    padding:22px 16px
  }

  .follower-card strong
  {
    font-size:clamp(54px,16vw,68px)
  }

  .follower-label
  {
    font-size:10px;
    letter-spacing:1.4px
  }

}

/* Compact homepage top: reduce hero artwork and vertical whitespace as a whole */

.hero
{
  min-height:0;
  padding-top:24px;
  padding-bottom:12px;
  gap:28px;
  grid-template-columns:1.08fr .92fr;
  align-items:center
}

.hero h1
{
  font-size:clamp(48px,5.4vw,70px);
  line-height:.9;
  margin:12px 0
}

.hero-art
{
  height:220px;
  min-height:0
}

.hero-text
{
  font-size:13px;
  line-height:1.6
}

.hero-actions
{
  margin:18px 0 16px
}

.follower-card
{
  width:min(100%,340px);
  min-height:112px;
  gap:3px;
  margin:12px 0 0;
  padding:12px 18px;
  border-radius:10px;
  box-shadow:0 6px 18px #020a1840
}

.follower-card strong
{
  font-size:clamp(42px,5vw,60px);
  line-height:1
}

.follower-label
{
  font-size:9px;
  letter-spacing:1.4px
}

.follower-foot
{
  font-size:9px
}

.hero-foot
{
  padding:12px 0
}

@media(max-width:850px)
{
  .hero
  {
    gap:22px
  }

  .hero-art
  {
    height:190px
  }

  .hero h1
  {
    font-size:clamp(45px,6vw,62px)
  }

}

@media(max-width:640px)
{
  .hero
  {
    padding-top:24px;
    padding-bottom:10px;
    grid-template-columns:1fr;
    gap:16px
  }

  .hero h1
  {
    font-size:clamp(48px,13vw,64px);
    margin:10px 0
  }

  .hero-art
  {
    grid-row:auto;
    height:150px
  }

  .hero-art .hero-logo
  {
    max-height:none
  }

  .hero-actions
  {
    margin:16px 0 12px
  }

  .follower-card
  {
    width:100%;
    max-width:none;
    min-height:98px;
    margin:10px 0 0;
    padding:10px 14px
  }

  .follower-card strong
  {
    font-size:clamp(42px,12vw,56px)
  }

  .hero-foot
  {
    padding:10px 0
  }

}

/* Version 12: make the homepage message, buttons and follower count bolder and centred */

.hero-copy
{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

.hero-copy .eyebrow
{
  justify-content:center
}

.hero h1
{
  width:100%;
  text-align:center;
  font-size:clamp(56px,6.4vw,82px);
  line-height:.9;
  margin:16px 0 18px
}

.hero-text
{
  max-width:560px;
  font-size:16px;
  line-height:1.7;
  text-align:center
}

.hero-actions
{
  justify-content:center;
  gap:14px;
  margin:22px 0 18px
}

.hero-actions .button
{
  font-size:12px;
  min-height:52px;
  padding:16px 24px;
  letter-spacing:1.1px
}

.follower-card
{
  width:min(100%,390px);
  min-height:145px;
  margin:14px auto 0;
  padding:18px 24px;
  gap:5px;
  text-align:center;
  align-items:center
}

.follower-label
{
  font-size:12px;
  letter-spacing:1.8px;
  justify-content:center
}

.follower-card strong
{
  font-size:clamp(62px,7vw,88px);
  line-height:1.05;
  text-align:center
}

.follower-foot
{
  font-size:11px;
  text-align:center
}

.hero-art
{
  height:220px;
  align-self:center
}

@media(max-width:850px)
{
  .hero h1
  {
    font-size:clamp(52px,7vw,72px)
  }

  .hero-text
  {
    font-size:15px
  }

  .hero-actions .button
  {
    font-size:11px;
    padding:14px 19px
  }

  .follower-card strong
  {
    font-size:clamp(58px,8vw,76px)
  }

}

@media(max-width:640px)
{
  .hero-copy
  {
    align-items:center
  }

  .hero h1
  {
    font-size:clamp(52px,14vw,70px);
    margin:12px 0 16px
  }

  .hero-text
  {
    font-size:15px;
    max-width:34rem
  }

  .hero-actions
  {
    width:100%;
    justify-content:center;
    gap:10px;
    margin:18px 0 14px
  }

  .hero-actions .button
  {
    font-size:11px;
    min-height:48px;
    padding:13px 16px
  }

  .follower-card
  {
    width:min(100%,390px);
    min-height:132px;
    margin:12px auto 0;
    padding:16px 20px
  }

  .follower-card strong
  {
    font-size:clamp(58px,17vw,78px)
  }

  .follower-label
  {
    font-size:11px
  }

  .follower-foot
  {
    font-size:10px
  }

  .hero-art
  {
    height:150px
  }

}

/* Version 13: full-width integrated racing hero, then centred headline and follower count */

.hero.wrap
{
  width:100%;
  max-width:none;
  padding:0 0 18px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:0;
  overflow:hidden
}

.hero-art
{
  order:0;
  width:100%;
  height:clamp(230px,32vw,410px);
  margin:0;
  position:relative;
  align-self:stretch;
  border:0;
  border-radius:0;
  clip-path:none;
  padding:0;
  overflow:hidden;
  background:#07152f
}

.hero-art::after
{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,21,47,.04) 35%,#07152f 100%),linear-gradient(90deg,#07152f55,transparent 30%,transparent 70%,#07152f55);
  pointer-events:none
}

.hero-art .hero-logo
{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center 52%;
  display:block;
  filter:saturate(.88) contrast(1.05)
}

.hero-copy
{
  order:1;
  width:min(1240px,calc(100% - 48px));
  margin:-10px auto 0;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

.hero-copy .eyebrow
{
  justify-content:center;
  font-size:12px;
  letter-spacing:3px
}

.hero h1
{
  width:100%;
  max-width:1500px;
  text-align:center;
  font-size:clamp(68px,10.5vw,156px);
  line-height:.82;
  letter-spacing:-.025em;
  margin:10px auto 24px;
  white-space:normal
}

.hero h1 br
{
  display:none
}

.hero h1 .outline
{
  display:block;
  -webkit-text-stroke:2px #7db8ff
}

.hero-text
{
  max-width:760px;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.65;
  text-align:center;
  margin:0 auto
}

.hero-actions
{
  justify-content:center;
  gap:16px;
  margin:26px 0 18px
}

.hero-actions .button
{
  font-size:13px;
  min-height:56px;
  padding:17px 27px
}

.follower-card
{
  width:min(100%,470px);
  min-height:150px;
  margin:12px auto 0;
  padding:18px 26px;
  gap:5px;
  text-align:center;
  align-items:center
}

.follower-label
{
  font-size:13px;
  letter-spacing:2px;
  justify-content:center
}

.follower-card strong
{
  font-size:clamp(72px,8vw,104px);
  line-height:1;
  text-align:center
}

.follower-foot
{
  font-size:12px;
  text-align:center
}

.hero-copy .quick-links
{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin:22px 0 10px;
  text-align:center
}

.hero-foot
{
  width:min(1240px,calc(100% - 48px));
  margin:0 auto;
  padding:18px 0
}

@media(max-width:850px)
{
  .hero-art
  {
    height:clamp(210px,38vw,310px)
  }

  .hero-copy
  {
    width:calc(100% - 36px)
  }

  .hero h1
  {
    font-size:clamp(58px,10vw,92px)
  }

  .hero-text
  {
    font-size:16px
  }

  .hero-actions .button
  {
    font-size:12px;
    padding:15px 21px
  }

  .follower-card strong
  {
    font-size:clamp(66px,10vw,86px)
  }

}

@media(max-width:640px)
{
  .hero.wrap
  {
    padding-bottom:8px
  }

  .hero-art
  {
    height:210px
  }

  .hero-art .hero-logo
  {
    object-position:center 50%
  }

  .hero-copy
  {
    width:calc(100% - 30px);
    margin-top:-4px
  }

  .hero-copy .eyebrow
  {
    font-size:10px;
    letter-spacing:2px
  }

  .hero h1
  {
    font-size:clamp(49px,12.6vw,76px);
    line-height:.86;
    margin:12px auto 16px;
    letter-spacing:-.02em
  }

  .hero h1 .outline
  {
    -webkit-text-stroke:1.4px #7db8ff
  }

  .hero-text
  {
    font-size:15px;
    line-height:1.55;
    max-width:34rem
  }

  .hero-actions
  {
    margin:19px 0 13px;
    gap:10px
  }

  .hero-actions .button
  {
    font-size:10px;
    min-height:47px;
    padding:13px 15px;
    letter-spacing:.7px
  }

  .follower-card
  {
    width:min(100%,390px);
    min-height:126px;
    margin:10px auto 0;
    padding:15px 18px
  }

  .follower-card strong
  {
    font-size:clamp(62px,17vw,82px)
  }

  .follower-label
  {
    font-size:10px;
    letter-spacing:1.5px
  }

  .follower-foot
  {
    font-size:10px
  }

  .hero-copy .quick-links
  {
    gap:12px 18px;
    margin:18px 0 6px;
    font-size:12px
  }

  .hero-foot
  {
    width:calc(100% - 30px);
    padding:12px 0;
    font-size:8px
  }

}

/* Version 14: cinematic image above a compact two-column hero content row */

@media (min-width: 861px)
{
  .hero-copy
  {
    width:min(1240px,calc(100% - 64px));
    margin:0 auto;
    padding:10px 0 16px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
    grid-template-areas:"eyebrow text" "headline text" "headline actions" "headline followers";
    column-gap:clamp(28px,5vw,76px);
    row-gap:8px;
    align-items:center;
    text-align:left
  }

  .hero-copy .eyebrow
  {
    grid-area:eyebrow;
    justify-content:flex-start;
    align-self:end
  }

  .hero-copy h1
  {
    grid-area:headline;
    align-self:center;
    text-align:left;
    max-width:none;
    font-size:clamp(76px,8.2vw,128px);
    line-height:.82;
    margin:0;
    letter-spacing:-.035em
  }

  .hero-copy h1 br
  {
    display:block
  }

  .hero-copy h1 .outline
  {
    display:inline;
    -webkit-text-stroke:2px #7db8ff
  }

  .hero-copy .hero-text
  {
    grid-area:text;
    max-width:530px;
    text-align:left;
    margin:0;
    align-self:end;
    font-size:clamp(16px,1.35vw,19px)
  }

  .hero-copy .hero-actions
  {
    grid-area:actions;
    justify-content:flex-start;
    margin:6px 0 0;
    gap:12px
  }

  .hero-copy .hero-actions .button
  {
    min-height:52px;
    padding:14px 20px
  }

  .hero-copy .follower-card
  {
    grid-area:followers;
    width:min(100%,430px);
    margin:4px 0 0;
    justify-self:start;
    min-height:115px;
    padding:12px 20px;
    gap:2px
  }

  .hero-copy .follower-card strong
  {
    font-size:clamp(54px,5vw,72px)
  }

  .hero-copy .follower-label
  {
    font-size:11px
  }

  .hero-copy .follower-foot
  {
    font-size:10px
  }

  .hero
  {
    padding:0;
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-copy
  {
    width:calc(100% - 48px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(270px,.85fr);
    grid-template-areas:"eyebrow text" "headline text" "headline actions" "headline followers";
    gap:12px 24px;
    text-align:left;
    align-items:center;
    margin:0 auto;
    padding:10px 0 14px
  }

  .hero-copy .eyebrow
  {
    grid-area:eyebrow;
    justify-content:flex-start
  }

  .hero-copy h1
  {
    grid-area:headline;
    text-align:left;
    font-size:clamp(54px,7vw,76px);
    line-height:.86;
    margin:0
  }

  .hero-copy h1 br
  {
    display:block
  }

  .hero-copy h1 .outline
  {
    display:inline
  }

  .hero-copy .hero-text
  {
    grid-area:text;
    text-align:left;
    font-size:14px;
    margin:0
  }

  .hero-copy .hero-actions
  {
    grid-area:actions;
    justify-content:flex-start;
    gap:8px;
    margin:0;
    flex-wrap:wrap
  }

  .hero-copy .hero-actions .button
  {
    font-size:10px;
    min-height:44px;
    padding:11px 13px
  }

  .hero-copy .follower-card
  {
    grid-area:followers;
    width:100%;
    min-height:100px;
    margin:0;
    padding:10px 14px
  }

  .hero-copy .follower-card strong
  {
    font-size:clamp(42px,6vw,60px)
  }

}

@media (max-width:640px)
{
  .hero-art
  {
    height:clamp(160px,48vw,240px)
  }

  .hero-copy
  {
    display:flex;
    width:calc(100% - 34px);
    margin:0 auto;
    padding:8px 0 14px;
    align-items:center;
    text-align:center;
    gap:0
  }

  .hero-copy .eyebrow
  {
    justify-content:center
  }

  .hero-copy h1
  {
    font-size:clamp(48px,12vw,68px);
    line-height:.88;
    text-align:center;
    margin:10px 0 14px
  }

  .hero-copy h1 br
  {
    display:block
  }

  .hero-copy h1 .outline
  {
    display:inline
  }

  .hero-copy .hero-text
  {
    text-align:center;
    font-size:14px;
    line-height:1.55
  }

  .hero-copy .hero-actions
  {
    justify-content:center;
    margin:15px 0 10px;
    gap:9px
  }

  .hero-copy .hero-actions .button
  {
    min-height:46px;
    padding:12px 14px;
    font-size:10px
  }

  .hero-copy .follower-card
  {
    width:min(100%,390px);
    margin:8px auto 0;
    min-height:110px;
    padding:12px 16px
  }

  .hero-copy .follower-card strong
  {
    font-size:clamp(52px,15vw,70px)
  }

}

/* Version 15: tighten the hero vertically and remove duplicate quick links. */

.hero-copy .quick-links
{
  display:none!important
}

@media(min-width:861px)
{
  .hero-art
  {
    height:clamp(210px,29vw,370px)
  }

}

/* Version 16: horizontal brand header */

.site-header
{
  height:82px;
  position:relative;
  gap:24px
}

.brand
{
  flex:0 0 auto;
  padding:5px 0
}

.brand-logo-img
{
  width:230px;
  height:66px;
  object-fit:contain;
  object-position:left center;
  display:block
}

.site-header nav
{
  gap:clamp(12px,1.8vw,25px);
  font-size:12px
}

.site-header nav a:not(.nav-cta)
{
  position:relative;
  padding:9px 0;
  transition:color .2s ease
}

.site-header nav a:not(.nav-cta)::after
{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:2px;
  background:#7db8ff;
  transition:right .2s ease
}

.site-header nav a:not(.nav-cta):hover::after
{
  right:0
}

.nav-cta
{
  border-color:#7db8ff55;
  background:#7db8ff12;
  padding:10px 14px
}

.nav-cta:hover
{
  background:#7db8ff;
  color:#07152f!important
}

@media(max-width:850px)
{
  .site-header
  {
    height:72px
  }

  .brand-logo-img
  {
    width:190px;
    height:56px
  }

  .site-header nav
  {
    top:72px;
    background:#0b1c39;
    border:1px solid #234574;
    border-radius:0 0 12px 12px
  }

}

@media(max-width:420px)
{
  .brand-logo-img
  {
    width:164px;
    height:50px
  }

  .site-header
  {
    gap:10px
  }

}

/* Version 17: polished, compact motorsport navigation */

.site-header
{
  height:74px;
  padding:0 clamp(16px,2.8vw,38px);
  margin-top:10px;
  border:1px solid rgba(125,184,255,.22);
  border-radius:15px;
  background:linear-gradient(110deg,rgba(13,31,61,.96),rgba(7,14,27,.96));
  box-shadow:0 10px 32px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
}

.brand-logo-img
{
  width:176px;
  height:48px;
  object-fit:contain;
  object-position:left center
}

.site-header nav
{
  gap:clamp(10px,1.5vw,22px);
  font-size:12px
}

.site-header nav a:not(.nav-cta)
{
  color:#d9e5f7;
  transition:color .18s ease,transform .18s ease
}

.site-header nav a:not(.nav-cta):hover
{
  color:#9ccaff;
  transform:translateY(-1px)
}

.nav-cta
{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 17px!important;
  border:1px solid #8fc4ff!important;
  border-radius:8px;
  background:linear-gradient(135deg,#a9d4ff,#65aaff)!important;
  color:#07152d!important;
  font-weight:900!important;
  letter-spacing:.35px;
  box-shadow:0 4px 18px rgba(88,164,255,.2);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.nav-cta::before
{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.42) 48%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .45s ease
}

.nav-cta:hover
{
  transform:translateY(-2px);
  box-shadow:0 7px 24px rgba(88,164,255,.36);
  filter:brightness(1.05)
}

.nav-cta:hover::before
{
  transform:translateX(130%)
}

.site-header nav a:focus-visible,.menu-toggle:focus-visible
{
  outline:2px solid #a9d4ff;
  outline-offset:4px;
  border-radius:5px
}

.menu-toggle
{
  border:1px solid rgba(143,196,255,.35);
  border-radius:8px;
  padding:7px 10px;
  background:#7db8ff12
}

@media(max-width:850px)
{
  .site-header
  {
    height:66px;
    margin-top:7px;
    padding:0 14px;
    border-radius:12px
  }

  .brand-logo-img
  {
    width:150px;
    height:42px
  }

  .site-header nav
  {
    top:66px;
    padding:12px;
    border-radius:0 0 12px 12px;
    box-shadow:0 18px 30px rgba(0,0,0,.3)
  }

  .site-header nav .nav-cta
  {
    width:100%;
    margin-top:4px
  }

}

@media(max-width:420px)
{
  .brand-logo-img
  {
    width:138px;
    height:40px
  }

  .site-header
  {
    gap:8px
  }

}

/* Version 19: match the desktop header-to-hero gap to the header top offset */

.site-header
{
  margin-bottom:7px
}

@media(max-width:640px)
{
  .site-header
  {
    margin-bottom:16px
  }

}

/* Hero image and floating navigation layout. */
/* Version 20: cinematic full-bleed hero with the floating navigation layered over it */

.site-header.wrap
{
  position:absolute;
  z-index:30;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:min(1160px,calc(100% - 48px));
  height:76px;
  margin:0;
  padding:0 22px;
  border:1px solid rgba(145,190,245,.34);
  border-radius:15px;
  background:linear-gradient(110deg,rgba(5,16,37,.88),rgba(10,30,62,.70));
  box-shadow:0 14px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.site-header .brand-logo-img
{
  width:150px;
  height:48px
}

.site-header nav
{
  gap:clamp(12px,1.7vw,24px)
}

.hero.wrap
{
  padding-top:0
}

.hero-art
{
  height:clamp(380px,48vw,610px);
  margin-top:0;
  position:relative
}

.hero-art::before
{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(180deg,rgba(4,12,28,.55) 0%,rgba(4,12,28,.08) 28%,rgba(7,21,47,.08) 58%,#07152f 100%);
  pointer-events:none
}

.hero-art .hero-logo
{
  object-position:center 53%
}

.hero-copy
{
  margin-top:-20px
}

@media(max-width:850px)
{
  .site-header.wrap
  {
    width:calc(100% - 32px);
    padding:0 16px;
    height:70px
  }

  .site-header .brand-logo-img
  {
    width:140px;
    height:44px
  }

  .hero-art
  {
    height:clamp(330px,55vw,460px)
  }

}

@media(max-width:640px)
{
  .site-header.wrap
  {
    top:10px;
    width:calc(100% - 24px);
    height:64px;
    padding:0 13px;
    border-radius:12px
  }

  .site-header .brand-logo-img
  {
    width:128px;
    height:39px
  }

  .site-header nav
  {
    top:70px;
    left:0;
    right:0
  }

  .hero-art
  {
    height:310px
  }

  .hero-copy
  {
    margin-top:-8px
  }

}

/* Leaderboard styling and responsive table layout. */
/* Version 21: bring the hero copy back up and give the championship table a cleaner race-day look */

@media (min-width:861px)
{
  .hero-copy
  {
    margin-top:-42px;
    padding-top:0;
    padding-bottom:12px
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-copy
  {
    margin-top:-28px;
    padding-top:4px
  }

}

@media (max-width:640px)
{
  .hero-copy
  {
    margin-top:-18px
  }

}

#championship .leaderboard-panel
{
  border:1px solid rgba(125,184,255,.24);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(145deg,#0d2145 0%,#09172f 72%);
  box-shadow:0 18px 48px rgba(0,0,0,.18)
}

#championship .panel-top
{
  padding:23px 26px;
  background:linear-gradient(100deg,rgba(125,184,255,.10),transparent 68%);
  border-bottom:1px solid rgba(125,184,255,.18)
}

#championship .table-wrap
{
  padding:8px 14px 12px;
  overflow-x:auto
}

#championship table
{
  width:100%;
  border-collapse:separate;
  border-spacing:0 6px
}

#championship thead th
{
  padding:12px 16px;
  background:#10294f;
  color:#9fcaff;
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:800;
  border:0
}

#championship thead th:first-child
{
  border-radius:8px 0 0 8px;
  width:82px
}

#championship thead th:last-child
{
  border-radius:0 8px 8px 0;
  text-align:right
}

#championship tbody tr
{
  background:rgba(255,255,255,.025);
  transition:background .18s,transform .18s
}

#championship tbody tr:hover
{
  background:rgba(125,184,255,.09);
  transform:translateY(-1px)
}

#championship tbody td
{
  padding:12px 16px;
  border-top:1px solid rgba(125,184,255,.10);
  border-bottom:1px solid rgba(125,184,255,.10)
}

#championship tbody td:first-child
{
  border-left:1px solid rgba(125,184,255,.10);
  border-radius:9px 0 0 9px
}

#championship tbody td:last-child
{
  border-right:1px solid rgba(125,184,255,.10);
  border-radius:0 9px 9px 0;
  text-align:right
}

#championship .position-number
{
  display:inline-grid;
  place-items:center;
  min-width:36px;
  height:32px;
  border-radius:7px;
  background:#142d52;
  color:#a9cfff;
  font:800 15px var(--display)
}

#championship tbody tr:first-child .position-number
{
  background:#7db8ff;
  color:#07152f
}

#championship .driver
{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700
}

#championship .driver-badge
{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  background:linear-gradient(145deg,#183963,#0e2342);
  border:1px solid rgba(125,184,255,.24);
  color:#d9eaff;
  font:800 15px var(--display)
}

#championship .wins
{
  display:inline-flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:7px;
  min-width:74px;
  color:#fff;
  font:900 25px/.9 var(--display);
  font-variant-numeric:tabular-nums
}

#championship .wins small
{
  font:800 8px var(--font);
  letter-spacing:1px;
  color:#9fcaff
}

#championship .panel-bottom
{
  padding:15px 25px;
  background:rgba(0,0,0,.12);
  border-top:1px solid rgba(125,184,255,.12)
}

@media(max-width:640px)
{
  #championship .panel-top
  {
    padding:18px 16px
  }

  #championship .table-wrap
  {
    padding:6px 7px 9px
  }

  #championship thead th,#championship tbody td
  {
    padding:10px 8px
  }

  #championship .driver
  {
    gap:7px;
    font-size:12px
  }

  #championship .driver-badge
  {
    width:28px;
    height:28px
  }

  #championship .wins
  {
    font-size:22px;
    min-width:52px
  }

  #championship thead th
  {
    font-size:8px;
    letter-spacing:.8px
  }

  #championship thead th:first-child
  {
    width:48px
  }

}

/* Desktop/laptop hero sizing adjustments. Later version blocks intentionally override earlier values. */
/* Version 24: balance the hero position after the Version 23 adjustment */

@media (min-width: 861px)
{
  .hero-art
  {
    height:clamp(250px,31vw,390px)
  }

  .hero-copy
  {
    margin-top:-34px;
    padding-top:0;
    padding-bottom:10px
  }

  .hero-copy h1
  {
    font-size:clamp(66px,7.3vw,108px);
    margin-top:4px
  }

  .hero-copy .hero-text
  {
    line-height:1.5
  }

  .hero-copy .hero-actions
  {
    margin-top:2px
  }

  .hero-copy .follower-card
  {
    min-height:100px;
    padding-top:8px;
    padding-bottom:8px
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-art
  {
    height:clamp(270px,38vw,350px)
  }

  .hero-copy
  {
    margin-top:-24px;
    padding-top:2px;
    padding-bottom:10px
  }

}

@media (max-width:640px)
{
  .hero-art
  {
    height:280px
  }

  .hero-copy
  {
    margin-top:-14px
  }

}

/* Version 25: keep the racing image visible, then anchor the hero copy lower on laptop screens */

@media (min-width: 861px)
{
  .hero-art
  {
    height:clamp(390px,35vw,470px)
  }

  .hero-copy
  {
    margin-top:-6px;
    padding-top:0;
    padding-bottom:0
  }

  .hero-copy h1
  {
    margin-top:8px
  }

  .hero-copy .hero-actions
  {
    margin-top:6px
  }

  .hero
  {
    padding-bottom:0;
    margin-bottom:0
  }

  #championship
  {
    padding-top:42px
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-art
  {
    height:clamp(300px,40vw,370px)
  }

  .hero-copy
  {
    margin-top:-12px;
    padding-top:2px;
    padding-bottom:4px
  }

}

/* Version 26: lower the hero copy further so the full hero owns the laptop viewport */

@media (min-width: 861px)
{
  .hero-copy
  {
    margin-top:30px;
    padding-bottom:0
  }

  #championship
  {
    padding-top:56px
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-copy
  {
    margin-top:8px;
    padding-bottom:6px
  }

}

/* Version 27: reveal more of the racing image and place the hero content lower */

@media (min-width: 861px)
{
  .hero-art
  {
    height:clamp(470px,39vw,535px)
  }

  .hero-copy
  {
    margin-top:38px;
    padding-bottom:0
  }

  #championship
  {
    padding-top:64px
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-art
  {
    height:clamp(340px,44vw,410px)
  }

  .hero-copy
  {
    margin-top:14px;
    padding-bottom:6px
  }

}

@media (max-width:640px)
{
  .hero-art
  {
    height:320px
  }

  .hero-copy
  {
    margin-top:-4px
  }

}

/* Current fine-tuning: move hero copy slightly upward without changing image or championship spacing. */
/* Version 28: move only the hero copy slightly upward; keep image and championship position unchanged */

@media (min-width: 861px)
{
  .hero-copy
  {
    margin-top:24px
  }

}

@media (min-width:641px) and (max-width:860px)
{
  .hero-copy
  {
    margin-top:8px
  }

}


/* Partner logos: keep the four partner cards aligned and easy to scan. */
.partner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-card {
  gap: 8px;
}

.partner-logo {
  display: block;
  width: 100%;
  height: 58px;
  object-fit: contain;
  object-position: left center;
  margin: 4px 0 2px;
}

.partner-logo-loaded,
.partner-logo-vitesse {
  width: 58px;
  height: 58px;
  object-position: left center;
}

.partner-card .partner-label {
  margin-top: 0;
}

.partner-card strong {
  margin-top: 2px;
}

@media (max-width: 900px) {
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .partner-grid {
    grid-template-columns: 1fr;
  }
}

/* Partner cards: polished surfaces and consistent logo sizing. */
.partner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.partner-card {
  position: relative;
  min-width: 0;
  min-height: 245px;
  gap: 9px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(125, 184, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(20, 43, 76, 0.92), rgba(7, 20, 43, 0.98) 72%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  text-decoration: none;
}

.partner-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #7db8ff, rgba(125, 184, 255, 0.08));
  opacity: 0.85;
}

.partner-card:hover {
  border-color: rgba(125, 184, 255, 0.72);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}

.partner-card:focus-visible {
  outline: 2px solid #7db8ff;
  outline-offset: 3px;
}

.partner-icon {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  font-size: 18px;
}

.partner-logo-stage {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 78px;
  margin: 4px 0 8px;
}

.partner-logo-stage-wide {
  max-width: 100%;
}

.partner-logo-stage-icon {
  width: 78px;
  height: 78px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.22);
}

.partner-logo {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}

/* NordVPN's source image has more transparent padding, so give it a taller box. */
.partner-logo-nordvpn {
  height: 76px;
}

.partner-logo-nordpass {
  height: 56px;
}

.partner-logo-loaded,
.partner-logo-vitesse {
  width: 62px;
  height: 62px;
  object-position: center;
}

.partner-card .partner-label {
  margin: 0;
  line-height: 1.4;
}

.partner-card strong {
  margin: 2px 0 0;
  line-height: 1.15;
}

.partner-card small {
  margin-top: auto;
  padding-top: 8px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .partner-grid {
    grid-template-columns: 1fr;
  }

  .partner-card {
    min-height: 220px;
  }
}


/* FAQs section — easy-to-edit cards for hardware and F1 camera settings. */
.faq-section { scroll-margin-top: 100px; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.faq-card {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(119, 177, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20, 39, 70, 0.92), rgba(8, 19, 39, 0.96));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
}
.faq-number {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent, #78b4ff);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.faq-card h3 { margin: 0 0 18px; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.spec-list, .camera-settings { margin: 0; }
.spec-list > div, .camera-settings > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.spec-list > div:last-child, .camera-settings > div:nth-last-child(-n+2) { border-bottom: 0; }
.spec-list dt, .camera-settings dt { color: #aabbd2; }
.spec-list dd, .camera-settings dd { margin: 0; text-align: right; font-weight: 700; }
.faq-note { margin: 16px 0; color: #c4d0e2; line-height: 1.65; }
.faq-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent, #78b4ff); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; }
.faq-card-wide { grid-column: 1 / -1; }
.camera-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 700px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-card-wide { grid-column: auto; }
  .camera-settings { grid-template-columns: 1fr; }
}

/* Mobile: fit the Championship leaderboard to the screen */
@media (max-width: 640px) {
  #championship .table-wrap {
    overflow-x: hidden;
    padding: 6px 5px 9px;
  }

  #championship table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  #championship thead th,
  #championship tbody td {
    padding: 9px 5px;
  }

  #championship thead th {
    font-size: 8px;
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;
  }

  #championship thead th:first-child {
    width: 42px;
  }

  #championship thead th:nth-child(2) {
    width: auto;
  }

  #championship thead th:last-child {
    width: 100px;
  }

  #championship .driver {
    min-width: 0;
    gap: 5px;
    font-size: 11px;
  }

  #championship .driver-badge {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    font-size: 12px;
  }

  #championship .wins {
    min-width: 0;
    gap: 3px;
    font-size: 19px;
  }

  #championship .wins small {
    font-size: 7px;
    letter-spacing: 0;
  }
}