/* all css here: */
/* ------------------------------------------------ */

:root {
  --max-width: 1200px;
}
html,
body {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial;
}

/* Micro-layout */
.container-max {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Fancy hero spotlight */
.hero-spot {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.hero-spot::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
      circle at 10% 20%,
      rgba(231, 111, 81, 0.12),
      transparent 8%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(99, 102, 241, 0.06),
      transparent 18%
    );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Smooth image reveal */
.img-reveal {
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1), filter 0.6s;
  will-change: transform;
}
.img-reveal:hover {
  transform: scale(1.03) translateY(-6px);
  filter: brightness(1.02) saturate(1.02);
}

/* Card hover glow */
.card-frost {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card-frost:hover {
  transform: translateY(-8px) rotate(-0.4deg);
  box-shadow: 0 20px 40px rgba(14, 18, 28, 0.12);
}

/* Gradient border utility */
.g-border {
  border: 6px solid transparent;
  background-image: linear-gradient(white, white),
    linear-gradient(90deg, #e76f51, #7c3aed 45%, #06b6d4);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 1rem;
}

/* Fancy CTA shimmer */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: "";
  position: absolute;
  left: -60%;
  top: 0;
  width: 60%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transition: all 0.9s;
}
.btn-shimmer:hover::after {
  left: 120%;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .g-border {
    border-width: 4px;
  }
}

/* Footer gradient */
.footer-gradient {
  background: linear-gradient(90deg, rgba(14, 21, 33, 1), rgba(24, 24, 27, 1));
}

/* Accessibility focus ring */
:focus {
  outline: none;
}
.focus-ring:focus {
  box-shadow: 0 0 0 4px rgba(231, 111, 81, 0.16);
}

/* Decorative bike wheel spin */
.wheel-spin {
  animation: wiggle 3s ease-in-out infinite;
}

/* Simple, elegant badge */
.badge-pill {
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-weight: 600;
}

/* Subtle staggered reveal */
.reveal-stagger {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.show {
  opacity: 1;
  transform: none;
}

/* Footer small text */
.muted {
  opacity: 0.7;
}

/* Decorative floating shapes */
.float-shape {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* ----------------------end----------------------- */