:root {
  --bg: #0e0e0f;
  --bg-soft: #17181a;
  --ink: #f5f5f2;
  --muted: #9c9c96;
  --yellow: #f4e409;
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.moto-clone {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1400px; margin: 0 auto; }

/* Reveal utility */
.reveal2 { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal2.visible { opacity: 1; transform: translateY(0); }

/* Buttons */
.pill-yellow, .pill-outline, .pill-dark {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  border: 1px solid transparent;
}
.pill-yellow { background: var(--yellow); color: #111; }
.pill-outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.pill-dark { background: #111; border-color: var(--line); color: #fff; }
.pill-yellow svg, .pill-outline svg, .pill-dark svg { width: 14px; height: 14px; }

/* Header */
.moto-header {
  position: fixed; top: 44px; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.moto-header .side-link { font-size: 0.85rem; color: var(--ink); }
.moto-header .logo { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 800; letter-spacing: 0.3em; font-size: 0.95rem; }
.moto-header nav { display: flex; gap: 26px; align-items: center; font-size: 0.85rem; }
.moto-header nav a:not(.pill-yellow):hover { color: var(--yellow); }

/* Hero */
.moto-hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-end;
  padding: 0 32px 70px; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #3c3c3e, #101012 72%);
}
.moto-hero .bike-mark { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -48%); width: min(76vw, 820px); color: var(--yellow); opacity: 0.92; }
.hero-copy-moto { position: relative; z-index: 2; max-width: 760px; width: 100%; min-width: 0; }
.hero-label { font-family: 'Consolas', monospace; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--yellow); margin-bottom: 16px; }
.hero-copy-moto h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.03; margin: 0 0 22px; }
.hero-copy-moto h1 .thin { font-weight: 300; display: block; color: #e8e8e4; }
.hero-copy-moto h1 .bold { font-weight: 800; display: block; }
.hero-copy-moto p.sub { color: #cfcfcb; max-width: 520px; margin: 0 0 30px; font-size: 1.03rem; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Section shell */
.moto-section { padding: 110px 32px; }
.moto-section.tight { padding: 70px 32px; }
.eyebrow-moto { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; }

/* Feature scrollspy */
.feature-scroll { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.feature-list { display: flex; flex-direction: column; gap: 58px; padding: 40px 0; }
.feature-list .f-item { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 600; color: #4d4d4c; transition: color .4s ease; }
.feature-list .f-item.active { color: #fff; font-weight: 800; }
.feature-sticky-wrap { position: relative; height: 100%; }
.feature-sticky { position: sticky; top: 110px; height: 540px; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #2a2b2d, #0e0e0f); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.feature-sticky .bike-mark { width: 66%; color: var(--yellow); opacity: 0.9; }
.feature-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); border-radius: 14px; padding: 14px 18px; font-size: 0.92rem; color: #fff; }

/* CTA center */
.cta-center { text-align: center; padding: 40px 32px 100px; }

/* Story section */
.story-section { position: relative; min-height: 88vh; display: flex; align-items: center; padding: 0 32px; overflow: hidden; background: linear-gradient(125deg, #132316, #0c0d0c 60%); }
.speed-streaks { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 42px); mix-blend-mode: overlay; }
.story-copy { position: relative; z-index: 2; max-width: 760px; }
.story-copy h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin: 0 0 22px; }
.story-copy p { color: #d3dbd5; font-size: 1.05rem; max-width: 520px; margin: 0 0 30px; }

/* Trail gallery */
.trail-gallery { position: relative; background: #0b0b0c; padding: 110px 32px 60px; }
.trail-tiles { position: relative; height: 460px; margin-bottom: 40px; }
.trail-tile { position: absolute; width: 210px; height: 210px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 14px; }
.trail-tile > span { position: relative; z-index: 2; font-size: 0.8rem; font-weight: 700; color: #fff; background: rgba(0,0,0,0.4); padding: 5px 10px; border-radius: 999px; }
.trail-tile.t1 { left: 2%; top: 40px; background: linear-gradient(180deg, #17281b 0%, #0a0f0b 100%); }
.trail-tile.t2 { left: 30%; top: 190px; background: linear-gradient(180deg, #2c2013 0%, #0f0c08 100%); }
.trail-tile.t3 { left: 58%; top: 30px; background: linear-gradient(180deg, #3a2410 0%, #120c06 100%); }
.trail-tile.t4 { left: 82%; top: 200px; width: 180px; height: 180px; background: linear-gradient(180deg, #191030 0%, #090711 100%); }

/* Illustrated tile scenes */
.tile-scene { position: absolute; inset: 0; overflow: hidden; }
.tile-scene .scene-bike { position: absolute; width: 74%; left: 13%; bottom: 12%; color: var(--yellow); opacity: 0.95; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.55)); }
.tile-scene .scene-bike.jump { transform: rotate(-12deg); bottom: 26%; left: 16%; }
.tile-scene .dust { position: absolute; bottom: 8%; left: 6%; width: 66%; height: 24%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.38), transparent 72%); filter: blur(7px); }
.tile-scene .dust.big { width: 84%; height: 34%; left: 4%; bottom: 4%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.5), transparent 70%); }
.tile-scene .sun { position: absolute; top: 10%; right: 12%; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #ffe27a, #f4b942 60%, transparent 74%); }
.tile-scene .moon { position: absolute; top: 12%; right: 16%; width: 30px; height: 30px; border-radius: 50%; background: #e9e6f5; box-shadow: -8px 0 0 -4px #191030 inset; }
.tile-scene .star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; opacity: 0.85; }
.tile-scene .tree { position: absolute; bottom: 0; width: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 44px solid #163a20; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 460px; }
.trail-svg path { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 2; stroke-dasharray: 6 8; }

/* Coordinates feature */
.coord-section { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; }
.coord-badge { display: inline-flex; align-items: center; gap: 10px; font-family: 'Consolas', monospace; letter-spacing: 0.05em; color: var(--muted); font-size: 0.85rem; margin-bottom: 22px; }
.coord-badge .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--yellow); }
.coord-section h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 16px; }
.coord-section p { color: var(--muted); font-size: 1.02rem; max-width: 460px; }
.coord-image { position: relative; border-radius: 26px; overflow: hidden; min-height: 420px; background: linear-gradient(150deg, #262729, #0d0d0e); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.coord-image .bike-mark { width: 70%; color: var(--yellow); opacity: 0.9; position: relative; z-index: 1; }
.coord-image .ground-dust { position: absolute; bottom: 14%; left: 12%; width: 76%; height: 20%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.3), transparent 72%); filter: blur(10px); }
.filmstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 50px; }
.filmstrip .strip-tile { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.filmstrip .strip-tile .bike-mark { width: 78%; color: var(--yellow); opacity: 0.9; }
.filmstrip .strip-tile.s1 { background: linear-gradient(160deg, #17281b, #0a0f0b); }
.filmstrip .strip-tile.s2 { background: linear-gradient(160deg, #2c2013, #0f0c08); }
.filmstrip .strip-tile.s3 { background: linear-gradient(160deg, #3a2410, #120c06); }
.filmstrip .strip-tile.s4 { background: linear-gradient(160deg, #191030, #090711); }

/* Limited edition */
.limited-section { position: relative; min-height: 86vh; display: flex; align-items: center; padding: 0 32px 0 130px; background: linear-gradient(125deg, #10160f, #0b0c0b); }
.ruler { position: absolute; left: 32px; top: 100px; bottom: 100px; width: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.ruler .tick { width: 16px; height: 2px; background: rgba(255,255,255,0.28); }
.ruler .tick.major { width: 26px; background: var(--yellow); }
.ruler-badge { position: absolute; left: 22px; font-family: 'Consolas', monospace; font-size: 0.72rem; background: var(--bg); border: 1px solid var(--yellow); color: var(--yellow); padding: 3px 8px; border-radius: 999px; }
.ruler-badge.top { top: 92px; }
.ruler-badge.bottom { bottom: 92px; }
.limited-copy h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 20px; max-width: 640px; }
.limited-copy p.disclaimer { color: var(--muted); font-size: 0.85rem; max-width: 480px; margin-top: 26px; }

/* Footer */
.moto-footer { background: #0a0a0a; padding: 90px 32px 30px; border-top: 1px solid var(--line); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 50px; }
.footer-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin: 0 0 26px; }
.footer-cols { display: flex; gap: 70px; flex-wrap: wrap; }
.footer-col h4 { text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 14px; }
.footer-col a, .footer-col div { display: flex; align-items: center; gap: 8px; color: #e7e7e3; margin-bottom: 10px; font-size: 0.95rem; }
.footer-col a:hover { color: var(--yellow); }
.footer-col svg { width: 15px; height: 15px; }
.footer-video { width: 170px; }
.footer-video .thumb { width: 100%; aspect-ratio: 16/10; border-radius: 14px; background: linear-gradient(160deg, #2c2d2f, #111); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; }
.footer-video .meta { font-size: 0.82rem; color: var(--muted); }
.newsletter { margin-bottom: 50px; max-width: 560px; }
.newsletter h3 { font-size: 1.3rem; margin: 0 0 18px; }
.newsletter form { display: flex; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.newsletter input { flex: 1; background: none; border: none; color: #fff; font-size: 1rem; padding: 8px 0; outline: none; }
.newsletter input::placeholder { color: var(--muted); }
.newsletter button { background: none; border: none; color: var(--yellow); font-weight: 700; cursor: pointer; font-size: 0.95rem; }
.footer-bottom-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.footer-bottom-bar a { margin-left: 18px; }
.footer-bottom-bar a:first-child { margin-left: 0; }

@media (max-width: 980px) {
  .feature-scroll, .coord-section { grid-template-columns: 1fr; }
  .feature-sticky { position: relative; top: 0; height: 380px; }
  .trail-tiles { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .trail-tile { position: relative; left: auto !important; top: auto !important; width: 100%; height: 200px; }
  .trail-svg { display: none; }
  .limited-section { padding-left: 90px; }
}
@media (max-width: 700px) {
  .moto-header nav a:not(.pill-yellow) { display: none; }
  .moto-header .side-link { display: none; }
  .moto-header .logo { position: static; transform: none; }
  .moto-header { padding: 16px 20px; }
  .moto-hero .bike-mark { top: 32%; opacity: 0.4; }
  .filmstrip { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; }
  .ruler { display: none; }
  .limited-section { padding-left: 32px; }
}