/* Joyride Software — shared styles */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FAF7F2;
  color: #191613;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #191613; text-decoration: none; }
a:hover { color: #D9530F; }

.container { max-width: 1140px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* Nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,242,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(25,22,19,0.08);
}
.site-nav { max-width: 1140px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0.04em; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; }
.nav-link { color: #5B554D; }
.nav-link:hover { color: #D9530F; }
.nav-link.active { color: #191613; font-weight: 600; }

/* Buttons */
.btn-dark {
  display: inline-flex; align-items: center; gap: 10px;
  background: #191613; color: #FAF7F2;
  padding: 14px 24px; border-radius: 12px;
  font-weight: 600; font-size: 16px;
  transition: background 0.2s ease;
}
.btn-dark:hover { background: #D9530F; color: #FAF7F2; }
.btn-pill {
  background: #191613; color: #FAF7F2;
  padding: 8px 16px; border-radius: 99px; font-weight: 600;
  transition: background 0.2s ease;
}
.btn-pill:hover { background: #D9530F; color: #FAF7F2; }
.btn-orange {
  display: inline-flex; align-items: center;
  background: #D9530F; color: #FAF7F2;
  padding: 13px 22px; border-radius: 12px;
  font-weight: 600; font-size: 15.5px;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-orange:hover { background: #FAF7F2; color: #191613; }

/* Eyebrow label */
.eyebrow {
  margin: 0 0 16px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #D9530F;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: #D9530F; display: inline-block; }

/* iPhone device frame (CSS-only port of the IOSDevice component) */
.device {
  position: relative; overflow: hidden; background: #14110E;
  box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12);
}
/* frame heights match the 1179x2556 screenshot ratio exactly — no crop */
.device-lg { width: 300px; height: 650px; border-radius: 36px; }
.device-sm { width: 210px; height: 455px; border-radius: 25px; }
.device-screen { position: absolute; inset: 0; background: #14110E; background-repeat: no-repeat; }
.device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.device-island {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: #000; z-index: 5;
}
.device-lg .device-island { top: 8px; width: 94px; height: 28px; border-radius: 18px; }
.device-sm .device-island { top: 6px; width: 66px; height: 19px; border-radius: 13px; }

/* Feature-card screenshot crops (all from the same route-detail screenshot) */
.shot-discover {
  background-image: url("/assets/drivrmaps-route-detail.png");
  background-size: cover;
  background-position: 50% 0%;
}
.shot-route {
  background-image: url("/assets/drivrmaps-route-detail.png");
  background-size: 133% auto;
  background-position: 0% 100%;
}
.shot-drive {
  background-image: url("/assets/drivrmaps-route-detail.png");
  background-size: 235% auto;
  background-position: 100% 100%;
}

/* Footer links */
.flink { color: rgba(250,247,242,0.8); }
.flink:hover { color: #E8956B; }

/* Animations */
@keyframes jr-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.fade-up { animation: jr-fade-up 0.8s ease both; }
.fade-up-delay { animation: jr-fade-up 0.8s 0.15s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up, .fade-up-delay { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-route-path] { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 900px) {
  [data-jr-grid2] { grid-template-columns: 1fr !important; }
  [data-jr-hero] { grid-template-columns: 1fr !important; padding-top: 72px !important; }
  [data-jr-hide-m] { display: none !important; }
}
@media (max-width: 360px) {
  .hero-device { width: calc(100vw - 56px) !important; }
  .device-lg { width: 100%; height: auto; aspect-ratio: 300 / 650; }
}