/* ============================================================
   BilFotografen Landing Page — Premium Visual System v4
   "Showroom Monochrome" — Apple-Inspired, Image-First

   DESIGN RATIONALE — Apple Monochrome + Image Color:
   -----------------------------------------------
   1. IMAGES ARE THE COLOR: The car showroom photos provide
      ALL the visual interest. The UI stays monochrome to
      let those images be the hero — exactly like apple.com
      lets product shots be the only color on each page.

   2. PURE NEUTRAL PALETTE: No warm tint, no cool tint.
      True blacks, true whites, neutral grays. This is how
      Apple achieves that "clean glass" feeling. Any color
      cast in the UI competes with the product imagery.

   3. SINGLE CTA ACCENT: Apple's #0071e3 — a refined,
      slightly dark blue used ONLY on interactive elements.
      This is NOT generic SaaS blue (#2563eb/#3b82f6).
      It is darker, more confident, more restrained.

   4. MAXIMUM 5% COLOR: The accent blue appears only on
      CTA buttons, eyebrow labels, and active/focus states.
      Everything else is black, white, or gray.

   5. CONTRAST: #0071e3 on #000000 = 4.6:1 (WCAG AA for
      normal text). #f5f5f7 on #000000 = 18.1:1 (AAA).
      #86868b on #000000 = 4.5:1 (AA).

   INSPIRATION SOURCES:
   - Apple.com — pure monochrome, product as hero, #0071e3 CTA
   - Porsche.com — automotive digital premium
   - Leica.com — photography + monochrome mastery
   - Tesla.com — cars on black, minimal chrome

   ============================================================ */


/* ==========================================================
   1. COLOR TOKENS — Apple Monochrome System
   ========================================================== */
:root {
  /* ---- Background Layers ----
     Pure black foundation, like Apple product pages.
     No warm tint, no cool tint. True neutral.
     The images provide ALL the color.                   */
  --bg-page:       #000000;     /* Pure black — Apple product page */
  --bg-surface:    #1c1c1e;     /* Card/content surface — Apple systemGray6 */
  --bg-elevated:   #2c2c2e;     /* Modals, dropdowns — Apple systemGray5 */
  --bg-hover:      #3a3a3c;     /* Interactive hover states — Apple systemGray4 */
  --bg-subtle:     #0a0a0a;     /* Alternate section bg */

  /* Legacy aliases (backward compat with v2) */
  --bg-void:       #000000;
  --bg-primary:    var(--bg-page);
  --bg-card:       var(--bg-surface);

  /* ---- Text — Pure Neutral White System ----
     Apple's exact text colors from their dark mode.
     No yellow warmth, no blue coolness. Pure neutral.
     This lets the car images be the only color.         */
  --text-primary:   #f5f5f7;    /* Headlines — Apple's primary text — 18.1:1 */
  --text-secondary: #a1a1a6;    /* Body text — Apple systemGray — 7.3:1 */
  --text-tertiary:  #86868b;    /* Captions, labels — 4.5:1 (AA) */
  --text-dim:       #48484a;    /* Decorative, disabled — Apple systemGray3 */

  /* Legacy alias */
  --text-muted:     var(--text-tertiary);

  /* ---- Accent: Apple CTA Blue ----
     Apple's exact interactive blue: #0071e3.
     NOT generic SaaS blue (#2563eb/#3b82f6).
     Darker, more confident, more restrained.

     USAGE RULES (maximum 5% of visual surface):
     - CTA buttons (primary action only)
     - Eyebrow labels / section label dots
     - Focus rings and active states
     - NEVER on large background fills
     - NEVER on body text or headings
     - The car images are the visual interest             */
  --accent-300:     #409cff;    /* Lighter — text on dark bg */
  --accent-400:     #0071e3;    /* Standard — Apple's CTA blue */
  --accent-500:     #0066cc;    /* Medium — buttons at rest */
  --accent-600:     #005bb5;    /* Darker — pressed states */
  --accent-700:     #004d99;    /* Darkest — subtle backgrounds */

  /* Hover state: slightly brighter */
  --accent-hover:   #0077ed;

  /* Accent glow for special elements (hero, featured card) */
  --accent-glow:    rgba(0, 113, 227, 0.12);
  --accent-glow-strong: rgba(0, 113, 227, 0.20);

  /* ---- Brand aliases ---- */
  --brand-400:      var(--accent-300);
  --brand-500:      var(--accent-400);
  --brand-600:      var(--accent-500);
  --brand-700:      var(--accent-600);
  --brand-hover:    var(--accent-hover);

  /* ---- Semantic Colors ----
     Muted, sophisticated — not neon.                   */
  --semantic-success:  #30d158;   /* Apple system green */
  --semantic-warning:  #ffd60a;   /* Apple system yellow */
  --semantic-error:    #ff453a;   /* Apple system red */
  --semantic-info:     #64d2ff;   /* Apple system cyan */

  /* Legacy aliases */
  --accent-success:  var(--semantic-success);
  --accent-warning:  var(--semantic-warning);
  --accent-error:    var(--semantic-error);

  /* ---- Borders ----
     Pure neutral whites, no warm/cool cast.             */
  --border-default:   rgba(255, 255, 255, 0.06);
  --border-hover:     rgba(255, 255, 255, 0.12);
  --border-active:    rgba(0, 113, 227, 0.40);
  --border-accent:    rgba(0, 113, 227, 0.20);

  /* Legacy aliases */
  --border-subtle:    var(--border-default);
  --border-light:     var(--border-hover);
  --border-brand:     var(--border-active);
  --border-gold:      var(--border-accent);  /* Legacy compat */

  /* ---- Glassmorphism — pure neutral ---- */
  --glass-bg:         rgba(28, 28, 30, 0.85);
  --glass-border:     rgba(255, 255, 255, 0.06);
  --glass-blur:       20px;
  --glass-bg-light:   rgba(44, 44, 46, 0.70);

  /* ---- Shadows — true black, neutral ----
     No warm/cool tint. Pure black shadows.              */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30),
                  0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.35),
                  0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 12px 28px rgba(0, 0, 0, 0.45),
                  0 4px 10px rgba(0, 0, 0, 0.30);
  --shadow-xl:    0 20px 50px rgba(0, 0, 0, 0.55),
                  0 8px 20px rgba(0, 0, 0, 0.35);

  /* Card hover lift shadow */
  --shadow-lift:  0 8px 24px rgba(0, 0, 0, 0.40),
                  0 2px 6px rgba(0, 0, 0, 0.25);

  /* Accent shadow — used on featured cards only */
  --shadow-accent: 0 8px 32px rgba(0, 113, 227, 0.10),
                   0 2px 8px rgba(0, 113, 227, 0.06);
  --shadow-gold:   var(--shadow-accent);  /* Legacy compat */


  /* ==========================================================
     2. TYPOGRAPHY SCALE
     Font: Inter for everything.
     Scale: Apple-inspired — VERY large display, VERY small captions.
     The extreme contrast is what separates premium from generic.
     ========================================================== */

  /* Size scale */
  --text-xs:    0.8125rem;  /* 13px — captions, eyebrows */
  --text-sm:    0.875rem;   /* 14px — small body, nav links */
  --text-base:  1rem;       /* 16px — body text */
  --text-lg:    1.125rem;   /* 18px — large body */
  --text-xl:    1.25rem;    /* 20px — sub-headings */
  --text-2xl:   1.5rem;     /* 24px — mobile section headings */
  --text-3xl:   2rem;       /* 32px — tablet section headings */
  --text-4xl:   2.5rem;     /* 40px — desktop section headings */
  --text-5xl:   3rem;       /* 48px — tablet hero */
  --text-6xl:   4rem;       /* 64px — intermediate hero */
  --text-7xl:   5rem;       /* 80px — desktop hero */
  --text-8xl:   6rem;       /* 96px — IMPACT display (Apple-scale) */

  /* Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;


  /* ==========================================================
     3. SPACING SYSTEM — 4px base grid, generous gaps
     ========================================================== */
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* Layout containers */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  /* Radii — soft, never harsh rectangles */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   32px;
  --radius-full:  9999px;

  /* Transitions */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.22, 0.68, 0, 1.0);  /* Slow start, decisive end */
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
  --duration-reveal: 700ms;

  /* Z-index scale */
  --z-behind:     -1;
  --z-base:        0;
  --z-elevated:   10;
  --z-sticky:     50;
  --z-overlay:   100;
  --z-modal:     200;
}


/* ==========================================================
   4. RESET & BASE
   ========================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apple-blue text selection */
::selection {
  background: rgba(0, 113, 227, 0.30);
  color: #fff;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}


/* ==========================================================
   5. CONTAINER & SECTION SPACING
   ========================================================== */
.landing-container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (min-width: 768px) {
  .landing-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Sections: Apple-level breathing room */
.landing-section {
  padding-top: var(--space-20);     /* 80px mobile */
  padding-bottom: var(--space-20);
  position: relative;
}

@media (min-width: 768px) {
  .landing-section {
    padding-top: 7.5rem;            /* 120px tablet */
    padding-bottom: 7.5rem;
  }
}

@media (min-width: 1024px) {
  .landing-section {
    padding-top: var(--space-40);   /* 160px desktop */
    padding-bottom: var(--space-40);
  }
}

/* Alternating section with subtle surface color */
.landing-section--alt {
  background: var(--bg-subtle);
}


/* ==========================================================
   6. TYPOGRAPHY COMPONENTS
   ========================================================== */

/* --- Eyebrow / Section Label ---
   Small, uppercase, accent blue. The "premium badge" pattern.
   Used sparingly: one per section maximum.             */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-400);
  margin-bottom: var(--space-6);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-400);
}

/* --- Display Headline ---
   Apple-scale: 80-96px on desktop.
   This is THE statement. One per page (hero).
   Tight tracking, tight leading, extrabold.            */
.heading-display {
  font-size: var(--text-4xl);       /* 40px mobile */
  font-weight: var(--weight-extrabold);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .heading-display {
    font-size: var(--text-6xl);     /* 64px tablet */
  }
}

@media (min-width: 1024px) {
  .heading-display {
    font-size: var(--text-7xl);     /* 80px desktop */
    line-height: 1.02;
  }
}

@media (min-width: 1280px) {
  .heading-display {
    font-size: var(--text-8xl);     /* 96px large desktop */
  }
}

/* --- Section Heading ---
   40px desktop / 32px tablet / 24px mobile             */
.heading-section {
  font-size: var(--text-2xl);       /* 24px mobile */
  font-weight: var(--weight-bold);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .heading-section {
    font-size: var(--text-3xl);     /* 32px tablet */
  }
}

@media (min-width: 1024px) {
  .heading-section {
    font-size: var(--text-4xl);     /* 40px desktop */
    line-height: 1.10;
  }
}

/* --- Card Heading --- */
.heading-card {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.30;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* --- Gradient Text ---
   A clean white-to-gray gradient. Use on 1-3 words MAXIMUM.
   Apple style: the text itself is the visual, not a color.
   On dark backgrounds, this creates a subtle luminance shift
   that reads as premium without adding hue.              */
.text-gradient {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f5f5f7 40%,
    #a1a1a6 80%,
    #f5f5f7 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated shimmer variant for hero headline accent —
   A light sweep across white text, like light on glass. */
.text-gradient-shimmer {
  background: linear-gradient(
    90deg,
    #f5f5f7 0%,
    #ffffff 25%,
    #a1a1a6 50%,
    #ffffff 75%,
    #f5f5f7 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s ease-in-out infinite;
}

@keyframes textShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Body Text --- */
.text-body {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  line-height: 1.70;
}

@media (min-width: 768px) {
  .text-body {
    font-size: var(--text-lg);      /* 18px on tablet+ */
  }
}

.text-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* --- Stats/Numbers ---
   Tabular numerals for alignment in stat displays     */
.text-stat {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* --- Caption --- */
.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}


/* ==========================================================
   7. BUTTONS — Apple-Style CTA System
   ========================================================== */

/* Base button reset */
.btn-primary,
.btn-secondary,
.btn-ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Focus ring */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost-link:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}

/* --- Primary Button: Apple Blue ---
   Apple's CTA blue. The most important action on the page.
   White text on #0071e3 — clean, confident, universal.  */
.btn-primary {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: #ffffff;
  background: var(--accent-400);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 4px 16px rgba(0, 113, 227, 0.25);
}

.btn-primary:active {
  transform: translateY(0);
  background: var(--accent-600);
  box-shadow: var(--shadow-sm);
}

/* Arrow icon slides right on hover */
.btn-primary svg,
.btn-secondary svg {
  transition: transform var(--duration-base) var(--ease-out);
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

/* Large CTA variant (hero) */
.btn-primary-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
}

/* --- Secondary Button: Ghost border --- */
.btn-secondary {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-hover);
}

.btn-secondary:hover {
  color: var(--text-primary);
  border-color: rgba(245, 245, 240, 0.22);
  background: rgba(245, 245, 240, 0.04);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  background: rgba(245, 245, 240, 0.06);
}

/* --- Ghost Link Button --- */
.btn-ghost-link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--accent-400);
  background: transparent;
  border: none;
}

.btn-ghost-link:hover {
  color: var(--accent-hover);
}

.btn-ghost-link:hover svg {
  transform: translateX(3px);
}


/* ==========================================================
   8. CARD SYSTEM — Glassmorphism + Warm Borders
   ========================================================== */

/* Base card */
.glass-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.glass-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Featured card — accent border */
.glass-card--featured {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-accent);
}

.glass-card--featured:hover {
  border-color: rgba(0, 113, 227, 0.35);
  box-shadow: var(--shadow-accent),
              0 12px 40px rgba(0, 113, 227, 0.08);
}

/* Directional shadow card — shadow follows cursor */
.card-directional {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
  /* Shadow is set via JS: style="box-shadow: ..." */
}


/* ==========================================================
   9. 3D EFFECTS — Futuristic but Classy
   ========================================================== */

/* --- Hero Image: Perspective Tilt with Glassmorphism Frame ---
   The hero car image floats in 3D space with a subtle
   glass frame around it. The frame catches light.       */
.hero-img-frame {
  perspective: 1200px;
  position: relative;
}

.hero-img-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

.hero-img-frame img {
  width: 100%;
  border-radius: var(--radius-lg);
  transform: rotateY(-3deg) rotateX(1.5deg);
  transition: transform 0.6s var(--ease-premium);
  box-shadow: var(--shadow-xl);
}

.hero-img-frame:hover img {
  transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

/* Gentle floating animation */
.hero-img-frame img {
  animation: heroFloat 6s ease-in-out infinite;
}

.hero-img-frame:hover img {
  animation: none;
  transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

@keyframes heroFloat {
  0%, 100% { transform: rotateY(-3deg) rotateX(1.5deg) translateY(0); }
  50%      { transform: rotateY(-3deg) rotateX(1.5deg) translateY(-10px); }
}

/* --- Light Sweep Effect ---
   A diagonal highlight that moves across the hero image,
   like light reflecting off a car's hood in a showroom.
   Pure CSS, no JS required.                             */
.light-sweep {
  position: relative;
  overflow: hidden;
}

.light-sweep::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 60%
  );
  transform: skewX(-15deg);
  animation: lightSweep 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

@keyframes lightSweep {
  0%   { left: -100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 150%; opacity: 0; }
}

/* --- Parallax Depth Layers ---
   Three layers moving at different speeds on scroll.
   Applied via JS: data-parallax="bg|mid|fg"            */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-bg {
  /* Moves slowest — decorative background elements */
  transform: translateZ(-2px) scale(3);
}

.parallax-mid {
  /* Middle speed — images, illustrations */
  transform: translateZ(-1px) scale(2);
}

.parallax-fg {
  /* Fastest — foreground text, CTAs */
  transform: translateZ(0);
}

/* --- Section Content: Z-Depth Reveal ---
   Content appears to slide in from different Z-depths.
   Left content comes from slightly behind,
   right content from slightly in front.                */
.depth-reveal-back {
  opacity: 0;
  transform: translateZ(-40px) translateY(30px) scale(0.98);
  transition:
    opacity var(--duration-reveal) var(--ease-premium),
    transform var(--duration-reveal) var(--ease-premium);
}

.depth-reveal-front {
  opacity: 0;
  transform: translateZ(20px) translateY(20px) scale(1.01);
  transition:
    opacity var(--duration-reveal) var(--ease-premium),
    transform var(--duration-reveal) var(--ease-premium);
}

.depth-reveal-back.visible,
.depth-reveal-front.visible {
  opacity: 1;
  transform: translateZ(0) translateY(0) scale(1);
}


/* ==========================================================
   10. SCROLL REVEAL — Staggered Fade Up
   ========================================================== */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-reveal) var(--ease-premium),
    transform var(--duration-reveal) var(--ease-premium);
}

.rv.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays: 100ms per element */
.rv-d1 { transition-delay: 0.10s; }
.rv-d2 { transition-delay: 0.20s; }
.rv-d3 { transition-delay: 0.30s; }
.rv-d4 { transition-delay: 0.40s; }
.rv-d5 { transition-delay: 0.50s; }
.rv-d6 { transition-delay: 0.60s; }


/* ==========================================================
   11. IMAGE TREATMENT
   ========================================================== */

/* All images: soft radius, never hard rectangles */
.img-premium {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-out),
    filter var(--duration-base) var(--ease-out);
}

.img-premium:hover {
  transform: scale(1.02);
  filter: brightness(1.06);
}

/* Image with accent frame */
.img-showroom {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  overflow: hidden;
  position: relative;
  transition: all var(--duration-base) var(--ease-out);
}

.img-showroom:hover {
  border-color: var(--border-accent);
  transform: translateZ(6px) scale(1.02);
  box-shadow: var(--shadow-accent);
}

.img-showroom img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: filter var(--duration-base) var(--ease-out);
}

.img-showroom:hover img {
  filter: brightness(1.05);
}


/* ==========================================================
   12. PRICING CARD — Featured Variant
   ========================================================== */
.price-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.price-card:hover {
  transform: translateZ(8px) translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Featured pricing tier — accent border + glow */
.price-card.featured {
  border-color: rgba(0, 113, 227, 0.30);
  box-shadow: var(--shadow-accent);
  position: relative;
}

/* "Populaer" badge on featured card */
.price-card.featured::before {
  content: 'Populaer';
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent-400);
  padding: 4px 14px;
  border-radius: var(--radius-full);
}

/* Pricing button that uses accent blue for featured tier */
.price-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-hover);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-out);
}

.price-btn:hover {
  color: var(--text-primary);
  border-color: rgba(245, 245, 240, 0.22);
  transform: translateY(-1px);
}

.price-card.featured .price-btn {
  color: #ffffff;
  background: var(--accent-400);
  border-color: transparent;
}

.price-card.featured .price-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.30);
  transform: translateY(-1px);
}

/* Price feature list dots: accent blue */
.price-features li::before {
  background: var(--accent-400);
}


/* ==========================================================
   13. STEP NUMBERS — Accent blue
   ========================================================== */
.step-num {
  font-size: 36px;
  font-weight: var(--weight-extrabold);
  color: var(--accent-400);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================
   14. NAVIGATION — Glass Effect
   ========================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  padding: 16px 0;
  transition:
    background var(--duration-base) var(--ease-out),
    backdrop-filter var(--duration-base) var(--ease-out),
    padding var(--duration-base) var(--ease-out);
}

.nav.scrolled {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border-default);
  padding: 10px 0;
}

/* Nav CTA: Apple blue */
.nav-cta {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: #ffffff;
  background: var(--accent-400);
  padding: 7px 16px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
}

.nav-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}


/* ==========================================================
   15. HERO — Full Viewport, Product is the Star
   ========================================================== */

/* Hero ambient glow: very subtle blue, nearly invisible */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(0, 113, 227, 0.04) 0%,
    rgba(0, 113, 227, 0.01) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Secondary ambient: top-left, barely perceptible */
.hero::after {
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* Hero eyebrow */
.hero-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-400);
  margin-bottom: var(--space-4);
}


/* ==========================================================
   16. FEATURE ICONS — Accent blue
   ========================================================== */
.feat-icon {
  color: var(--accent-400);
}

/* Showroom item hover glow: subtle accent */
.showroom-item:hover {
  box-shadow:
    0 0 0 1px rgba(0, 113, 227, 0.20),
    0 8px 24px rgba(0, 0, 0, 0.40);
}


/* ==========================================================
   17. ASYMMETRIC LAYOUT UTILITIES
   What makes it NOT look AI-generated:
   - Break the grid occasionally
   - Offset elements from center
   - Use unequal column splits                           */

/* 60/40 split (content-heavy left, visual right) */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* 40/60 split (visual left, content-heavy right) */
.grid-asymmetric-reverse {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-16);
  align-items: center;
}

/* Offset element: shifts content 40px left of center */
.offset-left {
  margin-left: -40px;
}

/* Offset element: shifts content 40px right of center */
.offset-right {
  margin-right: -40px;
}

@media (max-width: 767px) {
  .grid-asymmetric,
  .grid-asymmetric-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .offset-left,
  .offset-right {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ==========================================================
   18. MICRO-INTERACTIONS — JavaScript Helpers
   ========================================================== */

/* --- Directional Shadow Card ---
   JS sets --mouse-x and --mouse-y (0-1 range).
   Shadow moves opposite to cursor position.

   Usage:
   element.addEventListener('mousemove', (e) => {
     const rect = element.getBoundingClientRect();
     element.style.setProperty('--mouse-x',
       ((e.clientX - rect.left) / rect.width).toFixed(3));
     element.style.setProperty('--mouse-y',
       ((e.clientY - rect.top) / rect.height).toFixed(3));
   });                                                   */
.card-shadow-follow {
  --mouse-x: 0.5;
  --mouse-y: 0.5;
  --shadow-offset-x: calc((0.5 - var(--mouse-x)) * 20px);
  --shadow-offset-y: calc((0.5 - var(--mouse-y)) * 20px);

  box-shadow:
    var(--shadow-offset-x)
    var(--shadow-offset-y)
    24px rgba(10, 8, 4, 0.35);
  transition:
    box-shadow 0.15s linear,
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.card-shadow-follow:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}


/* ==========================================================
   19. AMBIENT GRAIN TEXTURE
   Adds subtle film grain to the page background.
   Prevents the "flat digital" look. Very premium.       */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* ==========================================================
   20. SCROLL REVEAL OBSERVER — JavaScript

   Paste this script at the bottom of the page:

   <script>
   // Scroll Reveal
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         entry.target.classList.add('visible');
       }
     });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

   document.querySelectorAll('.rv').forEach(el => observer.observe(el));

   // Directional Shadow
   document.querySelectorAll('.card-shadow-follow').forEach(card => {
     card.addEventListener('mousemove', (e) => {
       const rect = card.getBoundingClientRect();
       card.style.setProperty('--mouse-x',
         ((e.clientX - rect.left) / rect.width).toFixed(3));
       card.style.setProperty('--mouse-y',
         ((e.clientY - rect.top) / rect.height).toFixed(3));
     });
     card.addEventListener('mouseleave', () => {
       card.style.setProperty('--mouse-x', '0.5');
       card.style.setProperty('--mouse-y', '0.5');
     });
   });
   </script>
   ========================================================== */


/* ==========================================================
   21. ACCENT COLOR USAGE GUIDE (for developers)

   THE PHILOSOPHY: Apple Monochrome + Image Color.
   The car showroom images ARE the visual interest.
   The UI is a frame — black, white, gray. Period.
   ONE accent color (#0071e3) used at maximum 5% surface.

   WHERE TO USE ACCENT BLUE:
   [x] Primary CTA button background
   [x] Nav CTA button
   [x] Section label/eyebrow text + dot
   [x] Step numbers
   [x] Feature icon color
   [x] Featured pricing card border
   [x] Focus ring outline
   [x] Hero ambient glow (barely visible)
   [x] Showroom item hover border
   [x] Pricing list bullet dots

   WHERE NOT TO USE ACCENT BLUE:
   [ ] Body text color (use neutral whites/grays)
   [ ] Large background fills
   [ ] Headings (keep pure white #f5f5f7)
   [ ] Borders on every card (only featured)
   [ ] Shadows on non-featured elements
   [ ] Secondary buttons (keep neutral)
   [ ] Navigation links (keep neutral gray)

   THE RULE: The images are the color. The UI is the frame.
   ========================================================== */