@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root { --ink:#101415; --paper:#f1efe8; --red:#e83c2e; --yellow:#f5c928; --muted:#69716e; --line:#d5d5c9; --display:'Barlow Condensed',Impact,sans-serif; --body:'DM Sans',sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); } a { color:inherit; text-decoration:none; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; position:absolute; z-index:5; width:100%; color:#fff; border-bottom:1px solid rgba(255,255,255,.22); }
.brand { display:flex; align-items:center; gap:12px; font:700 18px var(--display); text-transform:uppercase; letter-spacing:.04em; } .brand b { color:var(--yellow); } .brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--red); font:800 14px var(--display); transform:skew(-8deg); }
nav { display:flex; align-items:center; gap:32px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } nav a:not(.nav-release) { opacity:.82; } nav a:hover { opacity:1; color:var(--yellow); }.nav-release { padding:12px 16px; border:1px solid var(--yellow); color:var(--yellow); }
.language-toggle { border:0; border-left:1px solid rgba(255,255,255,.3); padding:12px 0 12px 20px; background:none; color:#fff; cursor:pointer; font:700 12px var(--body); letter-spacing:.1em; }
.hero { min-height:760px; height:92vh; max-height:960px; color:#fff; position:relative; overflow:hidden; background:#132126; }.hero-image { position:absolute; inset:0; background:url('assets/theroadragetrip-loading.png') center center/cover no-repeat; transform:scale(1.01); }.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,13,18,.88) 0%,rgba(4,13,18,.45) 43%,rgba(4,13,18,.08) 80%),linear-gradient(0deg,rgba(4,13,18,.72),transparent 38%); }
.hero-content { position:relative; z-index:1; padding:clamp(150px,23vh,230px) 9vw 0; max-width:700px; animation:rise .8s ease-out both; }.eyebrow,.section-kicker { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.eyebrow { display:flex; align-items:center; gap:9px; color:var(--yellow); }.signal-dot { width:8px; height:8px; background:var(--red); border-radius:50%; box-shadow:0 0 0 5px rgba(232,60,46,.18); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); text-transform:uppercase; line-height:.88; letter-spacing:.01em; } h1 { margin:28px 0 24px; font-size:clamp(70px,9vw,138px); } h1 em,h2 em { color:var(--red); font-style:normal; } .hero-copy { max-width:390px; font-size:18px; line-height:1.5; color:#e5e8e5; }.hero-actions { display:flex; gap:12px; margin-top:34px; }.button { display:inline-flex; align-items:center; gap:18px; padding:15px 18px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { background:var(--yellow); color:var(--ink); }.button-ghost { border:1px solid rgba(255,255,255,.55); color:#fff; }.hero-meta { display:flex; gap:24px; margin-top:70px; font-size:9px; font-weight:700; letter-spacing:.14em; color:#bdc8c4; }.hero-scroll { position:absolute; z-index:1; right:4vw; bottom:30px; writing-mode:vertical-rl; font-size:9px; letter-spacing:.2em; color:#ccd4cf; }.hero-scroll span { display:block; width:1px; height:46px; background:var(--yellow); margin:12px auto 0; }
.section-shell { width:min(1120px,88vw); margin:0 auto; }.intro { padding:125px 0 140px; }.section-kicker { color:var(--red); margin-bottom:30px; }.intro-grid,.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; }.intro h2,.how h2 { font-size:clamp(58px,7vw,94px); margin:0; }.intro h2 span,.how h2 span { color:var(--red); }.intro p { color:var(--muted); line-height:1.7; max-width:450px; }.intro .lead,.how .lead { color:var(--ink); font-size:22px; line-height:1.3; }
.feature-band { padding:112px 0 130px; color:#f5f5ef; background:#171d1e; position:relative; overflow:hidden; }.feature-band:after { content:'RAGE'; position:absolute; right:-3vw; bottom:-.15em; color:rgba(255,255,255,.035); font:800 28vw/1 var(--display); pointer-events:none; }.light { color:var(--yellow); }.feature-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:56px; position:relative; z-index:1; }.feature-heading h2 { margin:0; font-size:clamp(58px,7vw,94px); }.feature-heading p { max-width:240px; color:#9ba5a1; line-height:1.5; margin:0; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; position:relative; z-index:1; }.feature-card { min-height:335px; padding:25px; border:1px solid #35403e; display:flex; flex-direction:column; }.feature-card.accent-card { background:var(--red); border-color:var(--red); }.feature-number { color:var(--yellow); font:700 13px var(--display); }.accent-card .feature-number { color:#fff; }.feature-icon { color:var(--yellow); font:400 44px var(--display); margin:45px 0 22px; }.accent-card .feature-icon { color:#fff; }.feature-card h3 { font-size:30px; margin-bottom:12px; }.feature-card p { color:#aab5b0; font-size:14px; line-height:1.6; margin:0; }.accent-card p { color:#fff; }
.how { padding:130px 0; }.controls-panel { border-top:2px solid var(--ink); }.control-row { display:flex; align-items:center; gap:8px; min-height:65px; border-bottom:1px solid var(--line); font-size:13px; }.control-row span { margin-left:18px; color:var(--muted); }.control-row kbd { display:grid; place-items:center; min-width:34px; height:29px; padding:0 7px; background:#deddd4; font:700 11px var(--body); }.release-callout { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:62px 0 80px; border-top:1px solid var(--line); }.release-marker { align-self:flex-start; color:var(--red); font-size:10px; font-weight:700; letter-spacing:.16em; }.release-callout h2 { margin:0; font-size:clamp(52px,6vw,78px); }.release-callout p { color:var(--muted); margin:14px 0 0; }.site-footer { display:flex; justify-content:space-between; padding:24px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.site-footer a { color:var(--red); font-weight:700; }
@keyframes rise { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } }
@media (max-width:760px) { .site-header { height:64px; padding:0 6vw; }.brand span:last-child, nav a:not(.nav-release) { display:none; } nav { margin-left:auto; margin-right:18px; }.nav-release { padding:10px; }.hero { min-height:700px; height:88vh; }.hero-image { background-position:62% center; }.hero-content { padding:150px 7vw 0; }.hero-meta { gap:12px; flex-wrap:wrap; margin-top:48px; }.hero-scroll { display:none; }.intro,.how { padding:85px 0; }.intro-grid,.how-grid { grid-template-columns:1fr; gap:45px; }.feature-band { padding:85px 0; }.feature-heading { display:block; margin-bottom:38px; }.feature-heading p { margin-top:25px; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:260px; }.feature-icon { margin:28px 0 16px; }.release-callout { display:block; padding:48px 0 65px; }.release-callout .button { margin-top:26px; }.site-footer { flex-wrap:wrap; gap:12px; } }