:root { color-scheme: dark; font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #f8f7ef; background: #101512; }
a { color: inherit; }
.landing-nav { position: fixed; top: 0; right: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 max(24px, 5vw); border-bottom: 1px solid rgb(255 255 255 / 10%); background: rgb(10 13 12 / 72%); backdrop-filter: blur(16px); }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: #f8f7ef; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.landing-brand img { display: block; width: 142px; height: auto; }
.landing-brand span { color: rgb(255 255 255 / 42%); }
.landing-nav nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 34px); color: rgb(255 255 255 / 62%); font-size: .73rem; font-weight: 750; }
.landing-menu-toggle { display: grid; width: 42px; height: 42px; padding: 11px 9px; border: 1px solid rgb(255 255 255 / 15%); border-radius: 12px; background: rgb(255 255 255 / 7%); cursor: pointer; }
.landing-menu-toggle span { display: block; width: 100%; height: 2px; align-self: center; border-radius: 9px; background: #fff; transition: transform 180ms ease, opacity 180ms ease; }
.landing-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.landing-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.landing-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.landing-nav nav { position: absolute; top: calc(100% + 10px); right: max(24px, 5vw); display: none; width: min(280px, calc(100vw - 40px)); flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 16px; background: rgb(13 16 15 / 97%); box-shadow: 0 22px 60px rgb(0 0 0 / 38%); }
.landing-nav nav.is-open { display: flex; }
.landing-nav nav a { padding: 11px 12px; border-radius: 9px; }
.landing-nav nav a:hover { background: rgb(231 164 95 / 10%); }
.landing-nav nav a { text-decoration: none; }
.landing-nav nav a:hover { color: #ffd9a0; }
.landing-menu-group { position: relative; }
.landing-menu-group > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: rgb(255 255 255 / 62%); font: inherit; font-size: .73rem; font-weight: 750; cursor: pointer; }
.landing-menu-group > button:hover { background: rgb(231 164 95 / 10%); color: #ffd9a0; }
.landing-submenu { margin: 0 0 5px 14px; padding-left: 8px; border-left: 1px solid rgb(231 164 95 / 28%); }
.landing-submenu[hidden] { display: none; }
.landing-submenu a { display: block; padding-block: 8px !important; color: rgb(255 255 255 / 55%) !important; font-size: .7rem !important; }
.nav-play { padding: 10px 15px; border-radius: 9px; background: #e7a45f; color: #201611 !important; }
.landing-hero { position: relative; display: grid; min-height: 760px; grid-template-columns: minmax(280px, .9fr) 1.1fr; align-items: center; gap: 30px; overflow: hidden; padding: 130px max(24px, 8vw) 90px; background: linear-gradient(90deg, rgb(8 12 18 / 94%) 0%, rgb(8 12 18 / 78%) 35%, rgb(8 12 18 / 15%) 74%), url("../assets/images/driver-hero-road.png") center / cover no-repeat; }
.hero-copy { position: relative; z-index: 2; max-width: 600px; }
.eyebrow { margin: 0 0 18px; color: #e7a45f; font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 26px; font-size: clamp(4.3rem, 10vw, 9.5rem); line-height: .82; letter-spacing: -.085em; }
h1 em, h2 em { color: #e7a45f; font-style: normal; }
.hero-lead { max-width: 470px; color: rgb(255 255 255 / 64%); font-size: 1rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; gap: 18px; padding: 13px 17px; border-radius: 10px; font-size: .78rem; font-weight: 850; text-decoration: none; }
.button-primary { background: #e7a45f; color: #201611; }.button-primary span { font-size: 1.2rem; }.button-quiet { border: 1px solid rgb(255 255 255 / 16%); color: rgb(255 255 255 / 72%); }
.hero-hint { margin: 24px 0 0; color: rgb(255 255 255 / 35%); font-size: .64rem; }
.hero-art { display: none; }
.sun { position: absolute; top: 14%; right: 27%; width: 150px; aspect-ratio: 1; border-radius: 50%; background: #f3c878; box-shadow: 0 0 100px 30px rgb(243 200 120 / 24%); }.road-glow { position: absolute; right: 32%; bottom: 7%; width: 28%; height: 75%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgb(231 164 95 / 18%), transparent); filter: blur(12px); }.road-lines { position: absolute; right: 43%; bottom: -3%; width: 7px; height: 85%; transform: rotate(12deg); background: repeating-linear-gradient(#f5edce 0 36px, transparent 36px 76px); opacity: .65; }.hero-car { position: absolute; right: 35%; bottom: 10%; width: 120px; height: 230px; transform: perspective(300px) rotateX(8deg) rotateZ(10deg); border-radius: 35px 35px 18px 18px; background: linear-gradient(90deg, #1d2730, #e55e42 45%, #792d28); box-shadow: 0 30px 60px rgb(0 0 0 / 50%); }
.landing-section { max-width: 1180px; margin: 0 auto; padding: 120px max(24px, 5vw); }.landing-section h2 { margin-bottom: 50px; font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: .9; letter-spacing: -.07em; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.feature-grid article { min-height: 220px; padding: 24px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 16px; background: rgb(255 255 255 / 4%); }.feature-number { color: #e7a45f; font-size: .67rem; font-weight: 900; }.feature-grid h3 { margin: 48px 0 12px; font-size: 1.2rem; }.feature-grid p { color: rgb(255 255 255 / 53%); font-size: .82rem; line-height: 1.55; }.modes-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }.mode-list { display: grid; gap: 10px; }.mode-list article { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / 12%); }.mode-list strong { font-size: 1.05rem; }.mode-list span, .mode-list small { color: rgb(255 255 255 / 52%); font-size: .75rem; }.mode-list a { color: #e7a45f; font-size: .7rem; font-weight: 800; text-decoration: none; }.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px max(24px, 8vw); border-top: 1px solid rgb(255 255 255 / 10%); color: rgb(255 255 255 / 43%); font-size: .68rem; }.landing-footer > a:last-child { color: #e7a45f; font-weight: 800; text-decoration: none; }
@media (max-width: 760px) { .landing-nav { padding-inline: 16px; }.landing-hero { min-height: 700px; grid-template-columns: 1fr; padding-top: 140px; }.hero-art { right: -28vw; width: 105vw; min-width: 0; height: 55%; opacity: .68; }.hero-copy { align-self: start; }.feature-grid, .modes-section { grid-template-columns: 1fr; }.landing-section { padding-block: 80px; }.mode-list article { grid-template-columns: 1fr; gap: 7px; }.landing-footer { flex-wrap: wrap; }.landing-footer > span { order: 3; width: 100%; } }