html { scroll-behavior: smooth; }
::selection { background: #E11D48; color: #fff; }
body { -webkit-font-smoothing: antialiased; }

.font-heading { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #3D0A1B; color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid #F43F5E; outline-offset: 2px; }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-reveal].is-visible .draw-line { animation: draw 1.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Marquee */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee-fast .marquee-track { animation-duration: 18s; }

/* Road / convoy motif */
.road-lane {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 22px, transparent 22px 46px);
  animation: roadLane 1s linear infinite;
}
@keyframes roadLane { from { background-position-x: 0; } to { background-position-x: -46px; } }

.drive-across { position: absolute; left: 6%; animation: driveAcross 6s ease-in-out infinite; }
@keyframes driveAcross {
  0% { left: 6%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}

.vehicle-drift { animation: vehicleDrift 10s ease-in-out infinite; }
@keyframes vehicleDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(18px); } }

/* Brand surfaces */
.gradient-text {
  background-image: linear-gradient(90deg, #FF4D79, #F0A32A);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.gradient-mesh {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,77,121,.25), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(240,163,42,.18), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(244,63,94,.35), transparent 55%);
}
.blob { filter: blur(60px); opacity: .45; }

.topo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23FF4D79' stroke-opacity='0.06'%3E%3Ccircle cx='60' cy='60' r='20'/%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E");
}

/* Nav + footer links */
.nav-link { font-size: .875rem; font-weight: 500; color: #414C4F; transition: color .2s; }
.nav-link:hover { color: #3D0A1B; }
.mobile-link { display: block; padding: .625rem 0; font-size: .95rem; font-weight: 500; color: #2B3335; border-bottom: 1px solid #EEF1F2; }
.footer-heading { font-family: 'Sora', sans-serif; font-weight: 600; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: #96A3A6; }
.footer-link { color: #C2CBCD; transition: color .2s; }
.footer-link:hover { color: #fff; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #F0A32A; color: #1A2022; font-weight: 700; font-size: .875rem;
  padding: .625rem 1.25rem; border-radius: .75rem; transition: box-shadow .2s, transform .2s;
  box-shadow: 0 8px 24px -6px rgba(240,163,42,.5);
}
.btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(240,163,42,.65); transform: translateY(-2px) scale(1.02); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #E11D48; color: #fff; font-weight: 600; font-size: .875rem;
  padding: .625rem 1.25rem; border-radius: .75rem; transition: background .2s;
}
.btn-secondary:hover { background: #9F1239; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; border: 1px solid #DDE3E4; color: #2B3335; font-weight: 600; font-size: .875rem;
  padding: .625rem 1.25rem; border-radius: .75rem; transition: border-color .2s;
}
.btn-ghost:hover { border-color: #F43F5E; }

/* Cards */
.card-lift { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(61,10,27,.18); }

.pill { display: inline-flex; align-items: center; padding: .375rem .875rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.filter-pill { padding: .5rem 1.125rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: #F7F9F9; color: #414C4F; transition: all .2s; }
.filter-pill-active { background-image: linear-gradient(90deg, #FF4D79, #F0A32A); color: #1A2022; }

.price-cell, .stat-number { font-variant-numeric: tabular-nums; }

/* Flashy accents */
.pulse-dot { position: relative; display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: #FF4D79; }
.pulse-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px; background: #FF4D79;
  animation: pingSlowCustom 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingSlowCustom { 0% { transform: scale(1); opacity: .8; } 75%,100% { transform: scale(2.8); opacity: 0; } }

.badge-float {
  box-shadow: 0 16px 40px -12px rgba(61,10,27,.35);
  backdrop-filter: blur(6px);
}

.icon-tile-deep { background: linear-gradient(135deg, #E11D48, #3D0A1B); }
.icon-tile-signal { background: linear-gradient(135deg, #F0A32A, #D4860F); }
.icon-tile-surf { background: linear-gradient(135deg, #FF4D79, #C22648); }

.glow-outline { box-shadow: 0 0 0 1px rgba(255,77,121,.35), 0 20px 45px -20px rgba(255,77,121,.35); }

.stat-glow { text-shadow: 0 0 24px rgba(240,163,42,.5); }

.field-error { color: #E02424; font-size: .75rem; margin-top: .25rem; }

/* Prose overrides for blog */
.prose a { color: #E11D48; }
.prose blockquote { border-left-color: #FF4D79; }
.prose h2, .prose h3 { font-family: 'Sora', sans-serif; }

@media (max-width: 767px) {
  body { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [class*="animate-"], .marquee-track, .draw-line, .road-lane, .drive-across, .vehicle-drift { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}