/* Drift AF page: palette taken from the game logo */
:root {
  --pink: #d77be8;
  --pink-deep: #c13edc;
  --car-red: #e8453c;
  --navy: #cf1971;
  --black: #0a0a0a;
  --white: #ffffff;
  --green: #e8453c; --green-dark: #c9352d;
}
body { background: var(--black); color: #fff; font-family: 'Nunito', system-ui, sans-serif; }
h1, h2, .display { font-family: 'Archivo Black', 'Nunito', sans-serif; font-weight: 400; letter-spacing: .01em; }
a { color: #fff; }

nav { background: var(--pink); border-top: 0; border-bottom: 0; }
.nav-logo, .nav-links a { color: var(--white); }
.nav-links a:hover { color: var(--navy); }
.lang-toggle { background: rgba(255,255,255,.45); }
.lang-btn { color: var(--black); }
.lang-btn.active { background: var(--black); color: #fff; }

.game-hero { background: var(--pink); color: var(--black); }
.game-hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 40px; }
.game-hero h1 {color: var(--white);  font-size: clamp(3.4rem, 10vw, 6.5rem); line-height: .95; margin-bottom: 18px; }
.game-hero h1 .af { color: var(--navy); }
.game-hero p { font-size: 1.3rem; font-weight: 700; max-width: 30ch; margin-bottom: 28px; }
.play-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--black); color: #fff; padding: 14px 28px; border-radius: 14px; font-weight: 800; text-decoration: none; font-size: 1.1rem; }
.play-btn:hover { background: var(--car-red); }
.play-btn svg { width: 24px; height: 24px; fill: currentColor; }
.game-hero img { width: min(400px, 100%); margin-left: auto; border-radius: 6px; border: 5px solid #fff; transform: rotate(-3deg); box-shadow: 8px 8px 0 var(--black); }
.wave { display: block; width: 100%; height: 70px; background: var(--pink); }
.wave path { fill: var(--black); }

.game-trailer { padding: 40px 0 80px; }
.game-trailer h2 { font-size: 2rem; margin-bottom: 24px; }
.game-trailer .video { border: 4px solid #fff; border-radius: 10px; }

.how { background: var(--car-red); color: #fff; padding: 64px 0; }
.how h2 { font-size: 2rem; margin-bottom: 28px; }
.how ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how li { border-top: 3px solid #fff; padding-top: 14px; font-size: 1.25rem; font-weight: 800; }
.how li span { display: block; font-weight: 600; font-size: 1rem; margin-top: 6px; opacity: .95; }

.get { padding: 72px 0; text-align: center; }
.get h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 24px; }
.get .play-btn { background: var(--pink); color: var(--black); }
.get .play-btn:hover { background: #fff; }

footer { background: #151515; border-top: 0; color: #fff; }
.footer-enk, .footer-bottom { color: #b5b5b5; }
.footer-nav a { color: #fff; }
.footer-bottom { border-top-color: #333; }
.footer-social-icon svg { fill: #b5b5b5; }
.footer-social-icon:hover svg { fill: var(--pink); }

@media (max-width: 760px) {
  .game-hero .container { grid-template-columns: 1fr; padding-top: 36px; }
  .game-hero img { margin: 0 auto; width: 260px; }
  .how ul { grid-template-columns: 1fr; }
}