<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Velocity — Fastest Cars</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#f7f8fb;
      --card:#ffffff;
      --ink:#0c1020;
      --muted:#58607a;
      --line:#e7e9f1;
      --accent:#0a84ff;
      --accent-2:#7c4dff;
      --glow: 0 10px 30px rgba(10,132,255,.15);
      --radius:16px;
      --radius-sm:12px;
      --radius-lg:28px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
      background:radial-gradient(1200px 800px at 80% -10%, #ecf3ff 0%, rgba(236,243,255,0) 50%), var(--bg);
      color:var(--ink);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

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

    .wrap{
      max-width:1200px;
      margin:0 auto;
      padding:28px 20px 60px;
    }

    /* Topbar */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 18px;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      position:sticky; top:16px;
      z-index:20;
      backdrop-filter:saturate(1.2) blur(6px);
      box-shadow:0 2px 10px rgba(14,21,47,0.06);
    }
    .brand{
      display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px;
    }
    .logo{
      width:36px; height:36px; border-radius:10px; background:
        conic-gradient(from 210deg at 50% 50%, var(--accent), var(--accent-2));
      box-shadow:0 8px 18px rgba(10,132,255,.25);
      position:relative; overflow:hidden;
    }
    .logo::after{
      content:""; position:absolute; inset:2px; border-radius:8px;
      background:linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,0));
      mix-blend:overlay;
    }
    .nav{
      display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    }
    .nav a{
      padding:10px 12px; color:var(--muted); font-weight:600;
      border-radius:10px; border:1px solid transparent;
    }
    .nav a:hover{ color:var(--ink); background:#f2f5ff; border-color:#e3e8ff; }

    .cta{
      display:flex; gap:10px; align-items:center;
    }
    .btn{
      padding:10px 14px;
      border-radius:12px; border:1px solid var(--line);
      background:var(--card); font-weight:600; color:var(--ink);
    }
    .btn.primary{
      background:linear-gradient(135deg, var(--accent), #56a2ff);
      color:#fff; border:none; box-shadow:var(--glow);
    }
    .btn.primary:hover{ filter:brightness(1.05); }

    /* Hero */
    .hero{
      display:grid; grid-template-columns:1.1fr .9fr; gap:26px;
      margin:28px 0 22px;
    }
    .hero-card{
      background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:34px;
      position:relative; overflow:hidden;
    }
    .hero h1{
      margin:0 0 10px; font-size:48px; line-height:1.02; letter-spacing:-1px;
    }
    .hero p{
      margin:0 0 22px; color:var(--muted); font-size:18px;
    }
    .hero-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
    .chip{
      padding:8px 12px; font-weight:600; color:#0b3e85;
      background:#e9f2ff; border:1px solid #d9e8ff; border-radius:999px;
    }
    .speed-badge{
      position:absolute; right:18px; top:18px;
      padding:10px 12px; border-radius:12px; font-weight:800; font-size:13px;
      color:#fff; background:linear-gradient(135deg, #ff2d55, #ff8a00); box-shadow:0 10px 24px rgba(255,45,85,.25);
    }
    .hero-visual{
      border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card);
      position:relative; overflow:hidden;
    }
    .track{
      position:absolute; inset:0; background:
        radial-gradient(800px 400px at 20% 0%, rgba(124,77,255,.12), transparent 60%),
        radial-gradient(900px 500px at 120% 80%, rgba(10,132,255,.12), transparent 60%),
        linear-gradient(180deg, #fff, #f7f9ff);
    }
    .car-card{
      position:absolute; left:6%; right:6%; bottom:24px;
      background:#0b1226; color:#e8eeff; border-radius:18px; padding:18px;
      display:flex; gap:16px; align-items:center; box-shadow:0 18px 40px rgba(11,18,38,.35);
    }
    .car-silhouette{
      flex:1; height:110px; background:
        radial-gradient(120px 60px at 30% 60%, rgba(255,255,255,.1), transparent 70%),
        linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,0));
      border-radius:14px; position:relative; overflow:hidden;
    }
    .car-silhouette::before{
      content:""; position:absolute; inset:0;
      background:
        linear-gradient(transparent 60%, rgba(255,255,255,.06) 60%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px);
      mix-blend:overlay;
    }
    .car-meta{ min-width:210px; }
    .meta-row{ display:flex; justify-content:space-between; margin:4px 0; font-weight:700; }
    .meta-row span{ color:#aeb9d9; font-weight:600; }

    /* Section header */
    .section-head{
      display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      margin:34px 4px 16px;
    }
    .section-head h2{ margin:0; font-size:28px; letter-spacing:-.3px; }
    .section-head p{ margin:0; color:var(--muted); }

    /* Grid of cars */
    .grid{
      display:grid; grid-template-columns:repeat(12,1fr); gap:18px;
    }
    .card{
      grid-column:span 4; background:var(--card); border:1px solid var(--line);
      border-radius:var(--radius); overflow:hidden; position:relative; transition:transform .25s ease, box-shadow .25s ease;
    }
    .card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(10,22,70,.08); }
    .thumb{
      height:180px; background:
        linear-gradient(180deg, rgba(10,132,255,.25), rgba(10,132,255,0)),
        url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
      filter:saturate(1.1) contrast(1.05);
    }
    .thumb.two{
      background:
        linear-gradient(180deg, rgba(124,77,255,.25), rgba(124,77,255,0)),
        url('https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
    }
    .thumb.three{
      background:
        linear-gradient(180deg, rgba(255,45,85,.25), rgba(255,45,85,0)),
        url('https://images.unsplash.com/photo-1549921296-3b4a6b3a9e52?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
    }
    .content{ padding:16px; }
    .tagline{
      display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; font-size:13px; margin-bottom:6px;
    }
    .title{
      font-size:18px; font-weight:800; margin:2px 0 8px;
      display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    .title .badge{
      padding:6px 10px; border-radius:999px; font-size:12px; color:#0b3e85; background:#e9f2ff; border:1px solid #d9e8ff; font-weight:800;
    }
    .specs{
      display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-weight:700; font-size:13px;
      border-top:1px dashed var(--line); padding-top:12px; margin-top:10px;
    }
    .spec{
      background:#f6f8ff; border:1px solid #e8edff; padding:8px 10px; border-radius:10px; color:#33406a;
    }

    /* Featured lane */
    .lane{
      margin-top:30px; background:linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
      border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; position:relative;
    }
    .lane-head{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:18px 18px; border-bottom:1px solid var(--line);
    }
    .lane-head .switch{
      display:flex; gap:10px; background:#f1f4ff; border:1px solid #e1e7ff; padding:6px; border-radius:999px;
    }
    .switch button{
      background:transparent; border:none; padding:8px 14px; border-radius:999px; font-weight:800; color:#5060a0; cursor:pointer;
    }
    .switch button.active{ background:#fff; color:#0b3e85; box-shadow:0 4px 12px rgba(80,96,160,.18); }
    .lane-scroller{
      display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,1fr); gap:14px;
      overflow-x:auto; padding:18px; scroll-snap-type:x mandatory;
    }
    .mini{
      scroll-snap-align:start; border:1px solid var(--line); border-radius:16px; padding:14px; background:#fff;
      display:flex; flex-direction:column; gap:10px; min-height:160px;
    }
    .mini .bar{
      height:8px; border-radius:8px; background:#eef2ff; overflow:hidden; position:relative;
    }
    .mini .bar span{
      position:absolute; left:0; top:0; bottom:0; width:70%;
      background:linear-gradient(90deg, var(--accent), #56a2ff);
    }
    .mini .bar span.fast{ width:95%; background:linear-gradient(90deg, #ff2d55, #ff8a00); }
    .mini small{ color:var(--muted); font-weight:700; }

    /* Footer */
    footer{
      margin-top:36px; padding:26px 18px; background:var(--card); border:1px solid var(--line);
      border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    }
    footer .links{ display:flex; gap:16px; color:var(--muted); font-weight:700; }

    /* Responsive */
    @media (max-width:980px){
      .hero{ grid-template-columns:1fr; }
      .car-card{ position:relative; left:auto; right:auto; bottom:auto; margin-top:120px; }
      .card{ grid-column:span 6; }
    }
    @media (max-width:680px){
      .nav{ display:none; }
      .section-head{ flex-direction:column; align-items:flex-start; }
      .card{ grid-column:span 12; }
      .hero h1{ font-size:36px; }
      .car-meta{ min-width:unset; }
    }
  </style>
</head>
<body>
  <div class="wrap">

    <header class="topbar">
      <div class="brand">
        <div class="logo"></div>
        <div>Velocity</div>
      </div>
      <nav class="nav">
        <a href="#top">Top Speed</a>
        <a href="#acceleration">Acceleration</a>
        <a href="#range">Range</a>
        <a href="#gallery">Showcase</a>
      </nav>
      <div class="cta">
        <button class="btn">Subscribe</button>
        <button class="btn primary">Explore Cars</button>
      </div>
    </header>

    <section class="hero">
      <div class="hero-card">
        <div class="speed-badge">World’s Fastest</div>
        <h1>Discover the world’s fastest cars</h1>
        <p>Curated specs, clean visuals, and frictionless comparisons — engineered for speed lovers in a sleek light interface.</p>
        <div class="hero-tags">
          <span class="chip">Top speed 300+ mph</span>
          <span class="chip">0–60 in under 2s</span>
          <span class="chip">Hypercar tier</span>
        </div>
        <div class="specs">
          <div class="spec">Carbon monocoque</div>
          <div class="spec">Active aero</div>
          <div class="spec">Hybrid/ICE/Electric</div>
          <div class="spec">Telemetry ready</div>
        </div>
      </div>
      <div class="hero-visual">
        <div class="track"></div>
        <div class="car-card">
          <div class="car-silhouette"></div>
          <div class="car-meta">
            <div class="meta-row"><span>Top Speed</span> 311 mph</div>
            <div class="meta-row"><span>0–60</span> 1.9 s</div>
            <div class="meta-row"><span>Power</span> 1,600 hp</div>
          </div>
        </div>
      </div>
    </section>

    <div class="section-head" id="top">
      <h2>Fastest cars right now</h2>
      <p>Handpicked leaders in straight-line speed</p>
    </div>

    <section class="grid" id="gallery">
      <article class="card">
        <div class="thumb"></div>
        <div class="content">
          <div class="tagline">Hypercar • Quad‑Turbo V8 Hybrid</div>
          <div class="title">
            APEX STRADA 300R
            <span class="badge">311 mph</span>
          </div>
          <div class="specs">
            <div class="spec">0–60: 1.9 s</div>
            <div class="spec">Power: 1,600 hp</div>
            <div class="spec">Drivetrain: AWD</div>
          </div>
        </div>
      </article>

      <article class="card">
        <div class="thumb two"></div>
        <div class="content">
          <div class="tagline">Hyper‑EV • Tri‑Motor</div>
          <div class="title">
            VOLTA CIRCUIT X
            <span class="badge">305 mph</span>
          </div>
          <div class="specs">
            <div class="spec">0–60: 1.8 s</div>
            <div class="spec">Power: 1,400 hp</div>
            <div class="spec">Torque: 1,900 Nm</div>
          </div>
        </div>
      </article>

      <article class="card">
        <div class="thumb three"></div>
        <div class="content">
          <div class="tagline">V12 Twin‑Turbo • Active Aero</div>
          <div class="title">
            NOVA GT-RS
            <span class="badge">299 mph</span>
          </div>
          <div class="specs">
            <div class="spec">0–60: 2.1 s</div>
            <div class="spec">Power: 1,520 hp</div>
            <div class="spec">RWD</div>
          </div>
        </div>
      </article>

      <article class="card">
        <div class="thumb" style="background:
          linear-gradient(180deg, rgba(10,132,255,.25), rgba(10,132,255,0)),
          url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;"></div>
        <div class="content">
          <div class="tagline">V10 NA • Track Focus</div>
          <div class="title">
            CIRRUS V10R
            <span class="badge">217 mph</span>
          </div>
          <div class="specs">
            <div class="spec">0–60: 2.8 s</div>
            <div class="spec">Power: 640 hp</div>
            <div class="spec">RWD</div>
          </div>
        </div>
      </article>

      <article class="card">
        <div class="thumb two" style="background:
          linear-gradient(180deg, rgba(124,77,255,.25), rgba(124,77,255,0)),
          url('https://images.unsplash.com/photo-1525609004556-c46c7d6cf023?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;"></div>
        <div class="content">
          <div class="tagline">Hybrid V6 • Le Mans Tech</div>
          <div class="title">
            ARCADIA LMH
            <span class="badge">236 mph</span>
          </div>
          <div class="specs">
            <div class="spec">0–60: 2.5 s</div>
            <div class="spec">Power: 900 hp</div>
            <div class="spec">AWD</div>
          </div>
        </div>
      </article>

      <article class="card">
        <div class="thumb three" style="background:
          linear-gradient(180deg, rgba(255,45,85,.25), rgba(255,45,85,0)),
          url('https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;"></div>
        <div class="content">
          <div class="tagline">EV • Torque Vectoring</div>
          <div class="title">
            POLARIS E-HYPER
            <span class="badge">280 mph</span>
          </div>
          <div class="specs">
            <div class="spec">0–60: 1.95 s</div>
            <div class="spec">Power: 1,250 hp</div>
            <div class="spec">AWD</div>
          </div>
        </div>
      </article>
    </section>

    <section class="lane" id="acceleration">
      <div class="lane-head">
        <strong>Acceleration lane</strong>
        <div class="switch">
          <button class="active">0–60</button>
          <button>0–124</button>
          <button>1/4 mile</button>
        </div>
      </div>
      <div class="lane-scroller">
        <div class="mini">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <strong>APEX STRADA 300R</strong><span class="badge" style="padding:6px 10px;border-radius:999px;background:#ffecef;color:#b20d2e;border:1px solid #ffd4db;font-weight:800;">1.9 s</span>
          </div>
          <div class="bar"><span class="fast"></span></div>
          <small>Quad‑Turbo Hybrid • AWD</small>
        </div>
        <div class="mini">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <strong>VOLTA CIRCUIT X</strong><span class="badge" style="padding:6px 10px;border-radius:999px;background:#e9f2ff;color:#0b3e85;border:1px solid #d9e8ff;font-weight:800;">1.8 s</span>
          </div>
          <div class="bar"><span class="fast" style="width:98%"></span></div>
          <small>Tri‑Motor EV • Vectoring</small>
        </div>
        <div class="mini">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <strong>NOVA GT‑RS</strong><span class="badge" style="padding:6px 10px;border-radius:999px;background:#fff5e6;color:#8a4b00;border:1px solid #ffe2b8;font-weight:800;">2.1 s</span>
          </div>
          <div class="bar"><span style="width:88%"></span></div>
          <small>V12 Twin‑Turbo • RWD</small>
        </div>
        <div class="mini">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <strong>POLARIS E‑HYPER</strong><span class="badge" style="padding:6px 10px;border-radius:999px;background:#e9f8f1;color:#0b6b3a;border:1px solid #c9f0dd;font-weight:800;">1.95 s</span>
          </div>
          <div class="bar"><span class="fast" style="width:96%"></span></div>
          <small>EV • AWD</small>
        </div>
      </div>
    </section>

    <div class="section-head" id="range">
      <h2>Balance of speed and endurance</h2>
      <p>Performance isn’t only a number — it’s consistency lap after lap</p>
    </div>

    <section class="grid">
      <article class="card" style="grid-column:span 6;">
        <div class="content">
          <div class="title">Cooling and aero packages</div>
          <p style="margin:0; color:var(--muted);">Advanced thermal management, active ducts, and adaptive rear wings maintain peak output on long runs without heat soak.</p>
          <div class="specs" style="margin-top:16px;">
            <div class="spec">Active aero</div>
            <div class="spec">Brake cooling</div>
            <div class="spec">Battery conditioning</div>
          </div>
        </div>
      </article>
      <article class="card" style="grid-column:span 6;">
        <div class="content">
          <div class="title">Telemetry at a glance</div>
          <p style="margin:0; color:var(--muted);">Compare cars with snapshot metrics: top speed, 0–60, power, and drivetrain — clean, fast, and readable.</p>
          <div class="specs" style="margin-top:16px;">
            <div class="spec">Live delta</div>
            <div class="spec">Split timing</div>
            <div class="spec">Lap overlays</div>
          </div>
        </div>
      </article>
    </section>

    <footer>
      <div class="brand">
        <div class="logo"></div>
        <div>Velocity</div>
      </div>
      <div class="links">
        <a href="#">About</a>
        <a href="#">Submit a car</a>
        <a href="#">Contact</a>
        <a href="#">Privacy</a>
      </div>
    </footer>

  </div>
</body>
</html>