/* ==========================================================================
   NOIR DETAILING — style.css
   0. Fonts (self-hosted, subset to the characters this site actually uses)
   1. Tokens & themes      5. Packages
   2. Base & utilities     6. About / Why us
   3. Navigation           7. Order form
   4. Hero                 8. Process / Footer / Modal / Floating UI
   9. Responsive
   ========================================================================== */

/* ========== 0. FONTS ========== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-latin-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00C7, U+00E7, U+00D6, U+00F6,
                 U+00DC, U+00FC, U+011E, U+011F, U+0130, U+0131, U+015E, U+015F,
                 U+018F, U+0259, U+00AB, U+00BB, U+2013, U+2014, U+2018, U+2019,
                 U+201C, U+201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin-600.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00C7, U+00E7, U+00D6, U+00F6,
                 U+00DC, U+00FC, U+011E, U+011F, U+0130, U+0131, U+015E, U+015F,
                 U+018F, U+0259, U+00AB, U+00BB, U+2013, U+2014, U+2018, U+2019,
                 U+201C, U+201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00C7, U+00E7, U+00D6, U+00F6,
                 U+00DC, U+00FC, U+011E, U+011F, U+0130, U+0131, U+015E, U+015F,
                 U+018F, U+0259, U+00AB, U+00BB, U+2013, U+2014, U+2018, U+2019,
                 U+201C, U+201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin-800.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00C7, U+00E7, U+00D6, U+00F6,
                 U+00DC, U+00FC, U+011E, U+011F, U+0130, U+0131, U+015E, U+015F,
                 U+018F, U+0259, U+00AB, U+00BB, U+2013, U+2014, U+2018, U+2019,
                 U+201C, U+201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-900.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00C7, U+00E7, U+00D6, U+00F6,
                 U+00DC, U+00FC, U+011E, U+011F, U+0130, U+0131, U+015E, U+015F,
                 U+018F, U+0259, U+00AB, U+00BB, U+2013, U+2014, U+2018, U+2019,
                 U+201C, U+201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-900.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ========== 1. TOKENS & THEMES ========== */
:root {
  --on-accent-soft: rgba(0, 0, 0, 0.38);
  --dark-bg: #060608;
  --dark-surface: #0b0b0e;
  --dark-card: #0d0d10;
  --dark-border: rgba(255, 255, 255, 0.09);
  --text-main: #ffffff;
  --text-muted: #94949e;
  --text-dim: #5c5c64;

  --accent: #2ed1b2;
  --accent-hover: #1ebd9e;
  --accent-glow: rgba(46, 209, 178, 0.42);
  --accent-glow-subtle: rgba(46, 209, 178, 0.09);
  --accent-btn-text: #050505;

  --trans-smooth: 650ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Fluid layout scale */
  --gutter: clamp(16px, 4vw, 50px);
  --section-y: clamp(64px, 9vw, 110px);
  --nav-h: 74px;
  --maxw: 1440px;
  --radius: 14px;
  --radius-lg: 20px;
}

body[data-theme="teal"] {
  --on-accent-soft: rgba(0, 0, 0, 0.38);
  --accent: #2ed1b2;
  --accent-hover: #1ebd9e;
  --accent-glow: rgba(46, 209, 178, 0.42);
  --accent-glow-subtle: rgba(46, 209, 178, 0.09);
  --accent-btn-text: #050505;
}
body[data-theme="yellow"] {
  --on-accent-soft: rgba(0, 0, 0, 0.38);
  --accent: #ffb800;
  --accent-hover: #e5a500;
  --accent-glow: rgba(255, 184, 0, 0.38);
  --accent-glow-subtle: rgba(255, 184, 0, 0.09);
  --accent-btn-text: #050505;
}
body[data-theme="red"] {
  --on-accent-soft: rgba(255, 255, 255, 0.5);
  --accent: #e8001d;
  --accent-hover: #c40018;
  --accent-glow: rgba(232, 0, 29, 0.45);
  --accent-glow-subtle: rgba(232, 0, 29, 0.09);
  --accent-btn-text: #ffffff;
}

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

html {
  scroll-behavior: smooth;
  background: var(--dark-bg);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "locl" 1, "case" 1;
  /* transparent on purpose: html paints the base colour, so the fixed
     z-index:-1 backdrop canvas isn't covered by body's own background */
  background: transparent;
  color: var(--text-main);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  background: var(--accent);
  color: var(--accent-btn-text);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

.section-header {
  text-align: center;
  margin-bottom: clamp(38px, 5vw, 60px);
}
.section-header h2 {
  font-size: clamp(28px, 5.2vw, 54px);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 10px;
}
.section-header p {
  color: var(--text-muted);
  font-size: clamp(12px, 2.6vw, 13.5px);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ========== 3. NAVIGATION ========== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1002;
  min-height: var(--nav-h);
  padding: 10px var(--gutter);
  padding-top: max(10px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(8, 8, 10, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dark-border);
  transition: background 0.3s ease, min-height 0.3s ease;
}
.navbar.is-scrolled {
  background: rgba(5, 5, 7, 0.96);
  min-height: 64px;
}

.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo-img {
  height: clamp(38px, 7vw, 52px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
  transition: opacity 0.25s ease, height 0.3s ease;
}

.nav-links {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
}
.nav-links a {
  position: relative;
  display: block;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease, background-color var(--trans-smooth);
}
.nav-links a:hover,
.nav-links a.active { color: #fff; }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  border-radius: 20px;
}
.lang-btn {
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 5px;
  transition: color 0.2s ease;
}
.lang-btn:hover { color: #fff; }
.lang-btn.is-active { color: var(--accent); }
.lang-divider { color: rgba(255, 255, 255, 0.2); font-size: 11px; }

.btn-nav-order {
  background: var(--accent);
  color: var(--accent-btn-text);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 18px var(--accent-glow);
  transition: transform 0.3s var(--ease-out), filter 0.3s ease,
              background var(--trans-smooth), color var(--trans-smooth),
              box-shadow var(--trans-smooth);
}

.hamburger-btn {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--dark-border);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.is-open { opacity: 1; }

.mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 1001;
  padding: calc(var(--nav-h) + 20px) 24px calc(24px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 13, 0.98);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--dark-border);
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer a {
  color: #fff;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.drawer-lang { display: flex; justify-content: center; padding: 20px 0 12px; }
.mobile-drawer .drawer-cta {
  justify-content: center;
  border-bottom: none;
  padding: 14px 20px;
  margin-top: 4px;
  text-align: center;
}
.drawer-phone {
  text-align: center;
  border-bottom: none !important;
  color: var(--accent) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

/* ========== 4. HERO ========== */
.hero-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) clamp(56px, 8vw, 80px);
  overflow: hidden;
  background: radial-gradient(circle at 75% 45%, var(--accent-glow-subtle) 0%, transparent 65%);
  transition: background var(--trans-smooth);
}

.bg-lines-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;            /* above the body background, below every section */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-ambient-glow {
  position: absolute;
  top: 15%;
  right: 8%;
  width: min(600px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
  animation: pulseGlow 6s ease-in-out infinite alternate;
  transition: background var(--trans-smooth);
}
@keyframes pulseGlow {
  from { transform: scale(0.92); opacity: 0.5; }
  to   { transform: scale(1.08) translate(-15px, 15px); opacity: 0.75; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 22px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: color var(--trans-smooth);
}
.hero-badge::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent);
  transition: background-color var(--trans-smooth);
}

.hero-titles-wrap { display: flex; flex-direction: column; gap: 4px; }
.hero-main-title {
  font-size: clamp(38px, 8.5vw, 84px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}
.hero-main-subtitle {
  font-size: clamp(30px, 7vw, 72px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--trans-smooth);
}

.hero-desc {
  color: var(--text-muted);
  font-size: clamp(13.5px, 2.9vw, 15px);
  line-height: 1.7;
  max-width: 48ch;
}

.hero-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-hero-primary,
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px clamp(20px, 4vw, 32px);
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.btn-hero-primary {
  background: var(--accent);
  color: var(--accent-btn-text);
  box-shadow: 0 6px 24px var(--accent-glow);
  transition: transform 0.35s var(--ease-out), filter 0.3s ease,
              background var(--trans-smooth), color var(--trans-smooth),
              box-shadow var(--trans-smooth);
}
.btn-hero-outline {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, border-color var(--trans-smooth),
              color var(--trans-smooth), background var(--trans-smooth);
}

.hero-trust-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.avatar-stack { display: flex; align-items: center; }
.avatar-stack picture { display: block; }
.avatar-stack picture + picture,
.avatar-more { margin-left: -12px; }
.avatar-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--dark-bg);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.avatar-more {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-btn-text);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--dark-bg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--trans-smooth), color var(--trans-smooth),
              transform 0.25s var(--ease-out);
}
.trust-label strong { display: block; font-size: 14px; font-weight: 700; }
.trust-label span { font-size: 12px; color: var(--text-muted); }

/* Hero right */
.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  position: relative;
}

.ceramic-perfection-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-bottom: 24px;
  z-index: 3;
}
.ceramic-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  transition: color var(--trans-smooth);
}
.ceramic-title {
  font-size: clamp(24px, 4.6vw, 48px);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.05;
  text-transform: uppercase;
}
.ceramic-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ceramic-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}
.ceramic-feature-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.cf-label {
  flex: 1;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}
.cf-icon-box {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-glow-subtle);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 0 15px var(--accent-glow-subtle);
  transition: all var(--trans-smooth);
}

/* Car stage */
.car-slider-stage-wrap {
  position: relative;
  width: 100%;
  max-width: 740px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-stage {
  position: relative;
  width: 100%;
  height: clamp(180px, 34vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  touch-action: pan-y;
}
.car-image-wrapper {
  position: relative;
  /* Above the nav arrows so the headlight flash is never covered.
     pointer-events:none keeps the arrows and swipe gestures working. */
  z-index: 11;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Shared transform layer: image + flash move together, so the flash
   stays glued to the headlight at any scale, rotation or screen size. */
.car-visual {
  position: relative;
  width: 100%;
  max-width: 640px;
  line-height: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  animation: carGentleFloat 5s ease-in-out infinite alternate;
}
.car-view-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 25px 45px var(--accent-glow)) drop-shadow(0 15px 30px rgba(0, 0, 0, 0.9));
  transition: filter var(--trans-smooth), opacity 0.3s ease;
}
@keyframes carGentleFloat {
  from { transform: translateY(0) rotate(-0.5deg); }
  to   { transform: translateY(-8px) rotate(0.5deg); }
}
.car-floor-reflection {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 55px;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
  transition: background var(--trans-smooth);
}

.headlight-flash {
  position: absolute;
  z-index: 4;
  /* Size follows the image width, so it scales down on mobile automatically */
  width: 10%;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}
.headlight-flash::before,
.headlight-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Hard bright core — reads as an actual bulb flash */
.headlight-flash::before {
  inset: 34%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.95);
}
/* Soft halo/glare around the core */
.headlight-flash::after {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 246, 214, 0.55) 30%,
    rgba(255, 230, 160, 0.22) 55%,
    transparent 75%);
  filter: blur(1px);
}
.headlight-flash.is-flashing {
  animation: headlightFlashPulse 560ms ease-in-out 2;
}
@keyframes headlightFlashPulse {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  16%  { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
  42%  { opacity: 0;   transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
}

.car-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 14, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  transition: background var(--trans-smooth), border-color var(--trans-smooth),
              color var(--trans-smooth), box-shadow var(--trans-smooth), transform 0.25s var(--ease-out);
}
.car-nav-arrow.arrow-prev { left: -12px; }
.car-nav-arrow.arrow-next { right: -12px; }
.car-nav-arrow:active { transform: translateY(-50%) scale(0.94); }

.car-dots {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.car-dot {
  width: 26px;
  height: 4px;
  border-radius: 4px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background var(--trans-smooth), width 0.3s var(--ease-out);
}
.car-dot.is-active { background: var(--accent); width: 34px; }

/* ========== 5. SERVICES & PACKAGES ========== */
.services-section {
  padding: var(--section-y) var(--gutter);
  background: rgba(6, 6, 8, 0.26);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.service-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform 0.35s var(--ease-out), border-color var(--trans-smooth),
              box-shadow var(--trans-smooth);
}
.service-img-wrap {
  display: block;
  width: 100%;
  height: clamp(200px, 29vw, 270px);
  overflow: hidden;
  background: #15151a;
}
/* <picture> is inline by default — without this the image can't fill the box */
.service-img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}
.service-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Most of these shots have the subject in the upper half — bias the crop
     upward instead of centring, so heads/panels don't get cut off. */
  object-position: center 38%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 18px 20px 22px;
}
.service-title {
  font-size: clamp(13px, 2.8vw, 14.5px);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.service-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

.packages-section {
  padding: var(--section-y) var(--gutter);
  background: rgba(8, 8, 11, 0.48);
  border-block: 1px solid var(--dark-border);
}
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
  max-width: 1400px;
  margin: 16px auto 0;
  align-items: start;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #101015 0%, #0c0c0f 100%);
  border: 1px solid var(--dark-border);
  border-radius: 18px;
  padding: clamp(28px, 3.4vw, 36px) clamp(20px, 2.6vw, 30px);
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card.featured-card {
  border-color: var(--accent);
  background: linear-gradient(180deg, #16161f 0%, #0d0d12 100%);
  box-shadow: 0 0 35px var(--accent-glow-subtle);
}

.popular-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-btn-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 5px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 15px var(--accent-glow);
}

.package-header { text-align: center; margin-bottom: 22px; }
.package-title-badge {
  display: inline-block;
  font-size: clamp(14px, 3vw, 16px);
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 8px 22px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}
.featured-card .package-title-badge {
  background: var(--accent);
  color: var(--accent-btn-text);
}

.price-split-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 12px;
  margin-bottom: 22px;
}
.price-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.price-car-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.price-val { font-size: clamp(22px, 4.6vw, 26px); font-weight: 900; line-height: 1.1; }
.price-val span { font-size: 14px; font-weight: 700; color: var(--accent); margin-left: 2px; }
.price-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.1); }

.package-includes-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.package-feature-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 26px;
  flex: 1;
}
.package-feature-list li {
  position: relative;
  padding-left: 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.package-feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  transition: color var(--trans-smooth);
}
.package-feature-list li strong { font-weight: 800; }
.package-feature-list li.feature-bonus-item {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-glow-subtle);
  padding: 9px 10px 9px 32px;
  border-radius: 6px;
  border: 1px dashed var(--accent);
}
.package-feature-list li.feature-bonus-item::before {
  content: '★';
  left: 11px;
  top: 9px;
}

.btn-select-package {
  width: 100%;
  min-height: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.featured-card .btn-select-package {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-btn-text);
  box-shadow: 0 4px 18px var(--accent-glow);
}

/* ========== 6. ABOUT / WHY US ========== */
.about-section {
  padding: var(--section-y) var(--gutter);
  background: rgba(6, 6, 8, 0.26);
}
.about-container {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(42px, 5vw, 60px);
}

.about-story-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #101015 0%, #0d0d12 100%);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 50px) clamp(22px, 3.6vw, 48px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}
.about-story-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  box-shadow: 0 0 20px var(--accent);
  transition: background var(--trans-smooth);
}
.about-main-headline {
  font-size: clamp(20px, 3.8vw, 40px);
  font-weight: 900;
  line-height: 1.22;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.about-text-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 80ch;
}
.about-text-content p {
  font-size: clamp(13.5px, 2.8vw, 15px);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
}

.why-us-header { text-align: center; margin-bottom: 32px; }
.why-us-header h3 {
  font-size: clamp(22px, 4.4vw, 28px);
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.why-us-header p {
  color: var(--accent);
  font-size: clamp(11.5px, 2.5vw, 13px);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: color var(--trans-smooth);
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: #0d0d11;
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  padding: clamp(22px, 2.8vw, 32px) clamp(18px, 2.2vw, 24px);
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
.why-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent-glow-subtle);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow-subtle);
  transition: all var(--trans-smooth);
}
.why-card h4 {
  font-size: clamp(13.5px, 2.8vw, 14.5px);
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.35;
  text-transform: uppercase;
}
.why-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ========== 7. ORDER FORM ========== */
.order-section {
  padding: var(--section-y) var(--gutter);
  background: rgba(8, 8, 11, 0.48);
  border-block: 1px solid var(--dark-border);
}
.order-card-container {
  max-width: 900px;
  margin: 0;
  background: linear-gradient(145deg, #111116 0%, #0a0a0d 100%);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px) clamp(18px, 3.6vw, 44px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px var(--accent-glow-subtle);
}
.order-form-grid {
  display: grid;
  grid-template-columns: 1fr;   /* single column: it lives inside a phone */
  gap: 16px;
}
.order-full-width { grid-column: 1 / -1; }

.form-group { margin-bottom: 0; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}
.form-control {
  width: 100%;
  min-height: 48px;
  background: #08080a;
  border: 1px solid var(--dark-border);
  /* readable on any backdrop */
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-size: 16px; /* prevents iOS zoom on focus */
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-control::placeholder { color: var(--text-dim); }
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow-subtle);
}
.form-control.is-invalid { border-color: #ff5252; }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394949e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-error {
  font-size: 11.5px;
  color: #ff6b6b;
  margin-top: 6px;
  min-height: 0;
}
.form-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 10px;
}

.location-condition-box {
  display: flow-root;      /* contains the floated legend */
  background: rgba(0, 0, 0, 0.3);
  padding: clamp(14px, 2.4vw, 20px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.condition-title {
  /* A <legend> normally straddles the fieldset's top border and sits outside
     the padding box. Floating it pulls it back in as ordinary content. */
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  padding: 0;
  line-height: 1.4;
}
.condition-title svg { flex-shrink: 0; }
.condition-note { font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; }
.modal-location { margin-bottom: 16px; }

.location-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* inside the phone frame there isn't room for two columns */
.iphone .location-options-grid { grid-template-columns: 1fr; }
.location-card-label { display: block; cursor: pointer; }
.location-card-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.location-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e0e12;
  border-radius: 10px;
  padding: 15px 14px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.location-card-content.is-compact { padding: 13px 12px; }
.location-card-label input:checked + .location-card-content {
  border-color: var(--accent);
  background: var(--accent-glow-subtle);
  box-shadow: 0 0 20px var(--accent-glow-subtle);
}
.location-card-label input:focus-visible + .location-card-content {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.loc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
}
.loc-dot { font-size: 10px; line-height: 1; }
.loc-dot--ok { color: var(--accent); }
.loc-dot--no { color: #ff5252; }
.loc-card-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

.location-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 10px;
  background: rgba(255, 82, 82, 0.09);
  border: 1px solid rgba(255, 82, 82, 0.45);
  color: #ffb3b3;
  font-size: 12.5px;
  line-height: 1.6;
}
.location-notice[hidden] { display: none; }
.location-notice svg { flex-shrink: 0; margin-top: 1px; color: #ff5252; }

.btn-submit-order {
  width: 100%;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--accent-btn-text);
  border: none;
  padding: 15px 18px;
  border-radius: 8px;
  font-size: clamp(13px, 2.9vw, 14px);
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: filter 0.3s ease, transform 0.3s var(--ease-out),
              background var(--trans-smooth), color var(--trans-smooth),
              box-shadow var(--trans-smooth);
}
.btn-submit-order svg { flex-shrink: 0; }

/* ========== 8. PROCESS / FOOTER / MODAL / FLOATING ========== */
.how-section {
  padding: var(--section-y) var(--gutter);
  background: rgba(6, 6, 8, 0.26);
}
.how-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 24px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.how-steps-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
  z-index: 1;
}
.step-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step-num-pill {
  font-size: clamp(32px, 6vw, 42px);
  font-weight: 900;
  color: var(--accent);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 8px;
  transition: color var(--trans-smooth);
}
.step-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dark-card);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
  box-shadow: 0 0 20px var(--accent-glow);
  transition: all var(--trans-smooth);
}
.step-card h3 {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  transition: color var(--trans-smooth);
}
.step-card p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 24ch;
}

.site-footer {
  background: rgba(4, 4, 5, 0.88);
  border-top: 1px solid var(--dark-border);
  padding: clamp(44px, 5vw, 64px) var(--gutter) calc(clamp(20px, 2.6vw, 28px) + env(safe-area-inset-bottom));
}

.footer-top {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding-bottom: clamp(28px, 3.4vw, 40px);
}
.footer-logo { height: 46px; width: auto; }
.footer-tagline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-phone {
  display: inline-block;
  padding: 6px 0;
  font-size: clamp(19px, 3.4vw, 24px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.footer-social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dark-border);
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.25s var(--ease-out);
}
.footer-social svg { width: 19px; height: 19px; }

.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--dark-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.footer-copy,
.footer-credit {
  font-size: 12px;
  color: var(--text-dim);
}
.footer-credit {
  /* keep clear of the floating WhatsApp button in the corner */
  padding-right: 62px;
}
.footer-credit a {
  display: inline-block;
  padding: 8px 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open { opacity: 1; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(90svh, 780px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #111115;
  border: 1px solid var(--dark-border);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px) clamp(18px, 3.4vw, 32px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px var(--accent-glow-subtle);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s var(--ease-out);
}
.modal-overlay.is-open .modal-box { transform: none; }
.modal-close {
  position: absolute;
  z-index: 6;            /* stays reachable above the success panel */
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: #fff; }
.modal-title {
  font-size: clamp(20px, 4.6vw, 26px);
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-right: 40px;
}
.modal-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.modal-box .form-group { margin-bottom: 16px; }

/* Floating WhatsApp */
.floating-wa-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-btn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 25px var(--accent-glow), 0 4px 15px rgba(0, 0, 0, 0.8);
  animation: waPulseGlow 3s infinite;
  transition: transform 0.3s var(--ease-out), background var(--trans-smooth),
              color var(--trans-smooth), box-shadow var(--trans-smooth);
}
@keyframes waPulseGlow {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.wa-tooltip {
  position: absolute;
  right: 68px;
  padding: 7px 14px;
  background: rgba(10, 10, 14, 0.96);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 6px;
  border: 1px solid var(--dark-border);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Mobile sticky CTA */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(6, 6, 8, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--dark-border);
}
.mcta {
  flex: 1;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.mcta-call {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.mcta-order {
  background: var(--accent);
  color: var(--accent-btn-text);
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* ========== SCROLL REVEAL & KINETIC TYPE ========== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}

/* Hero headline: words rise out of their own line box */
.kin-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room for descenders inside the clip, cancelled again by the negative
     margin — the line box stays exactly what it was without the effect. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.kin-word-inner { display: inline-block; }
/* Only hidden while JS is actively running the intro. If the script never
   gets that far, the headline simply shows — text is never hidden by CSS
   alone. */
.hero-section.kin-ready .kin-word-inner { transform: translateY(105%); }
/* The rise itself is driven by motion.js (Web Animations API), which holds
   the final state. This is only the pre-animation resting position. */

.price-num { font-variant-numeric: tabular-nums; }

/* Order section: the form sits inside an iPhone frame */
.phone-stage {
  display: flex;
  justify-content: center;
  padding-inline: clamp(0px, 2vw, 24px);
}

.iphone {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 17px;
  border-radius: 78px;
  /* brushed titanium edge */
  background:
    linear-gradient(145deg, #6f7276 0%, #2f3134 18%, #3d4044 50%, #26282b 82%, #5f6266 100%);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}

.iphone-screen {
  position: relative;
  /* Screen curve runs parallel to the frame: outer radius minus the bezel. */
  border-radius: 61px;
  overflow: hidden;
  padding: 58px clamp(14px, 3.4vw, 22px) 38px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);

  /* Frosted glass: the animated line backdrop shows through, blurred, so the
     screen feels alive and picks up the current theme colour. The tint is
     dark enough to keep form text at full contrast. */
  background:
    linear-gradient(180deg,
      rgba(12, 14, 18, 0.38) 0%,
      rgba(10, 11, 15, 0.55) 45%,
      rgba(8, 9, 12, 0.68) 100%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition: background var(--trans-smooth);
}
/* Top edge highlight, like light catching the glass */
.iphone-screen::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  pointer-events: none;
  opacity: 0.95;
  background: radial-gradient(130% 100% at 50% 0%,
    var(--accent-glow-subtle) 0%, transparent 72%);
  transition: background var(--trans-smooth);
  z-index: 0;
}

/* Status bar: time and icons sit either side of the island */
.iphone-statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 52px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  pointer-events: none;
}
.sb-time {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  min-width: 54px;
}
.sb-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 54px;
  justify-content: flex-end;
}
.sb-signal  { width: 17px; height: 11px; }
.sb-wifi    { width: 16px; height: 12px; }
.sb-battery { width: 25px; height: 12px; }

/* Dynamic Island */
.iphone-island {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 108px;
  height: 31px;
  padding-right: 9px;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.island-cam {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b3a4a 0%, #0d1218 60%, #05070a 100%);
  box-shadow: inset 0 0 2px rgba(120, 180, 255, 0.35);
}

/* home indicator */
.iphone-home {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}

/* side buttons */
.iphone-btn {
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(180deg, #55585c, #303337);
}
.iphone-btn--silent { left: -3px; top: 108px; width: 3px; height: 30px; }
.iphone-btn--up     { left: -3px; top: 156px; width: 3px; height: 56px; }
.iphone-btn--down   { left: -3px; top: 226px; width: 3px; height: 56px; }
.iphone-btn--power  { right: -3px; top: 176px; width: 3px; height: 84px; }

/* Inside the phone the fields sit on a livelier backdrop, so they get a
   slightly deeper fill and a lit edge to stay clearly readable. */
.iphone .form-control,
.iphone .location-card-content,
.iphone .location-condition-box {
  background: rgba(6, 7, 9, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05),
              0 6px 18px rgba(0, 0, 0, 0.35);
}
.iphone .location-card-label input:checked + .location-card-content {
  background: rgba(6, 7, 9, 0.86);
}

/* The card is now the phone's content, so it drops its own frame */
.order-card-container {
  position: relative;
  z-index: 1;            /* above the screen's glow layer */
  max-width: none;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Submit states */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn-submit-order[disabled] { opacity: 0.75; cursor: default; }
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: currentColor;
  animation: btnSpin 0.7s linear infinite;
}
.is-sending .btn-spinner { display: inline-block; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

.form-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}
.form-status[hidden] { display: none; }
.form-status.is-success {
  background: var(--accent-glow-subtle);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.form-status.is-error {
  background: rgba(255, 82, 82, 0.09);
  border: 1px solid rgba(255, 82, 82, 0.45);
  color: #ffb3b3;
}

/* Success screen — takes over the phone display once an order goes through */
.iphone-screen.is-success,
.modal-box.is-success { min-height: 520px; }

.success-screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 64px clamp(20px, 6%, 40px) 44px;
  text-align: center;
  /* the site's own colour, so it changes with the selected car.
     Kept as a flat colour plus an overlay gradient: color-mix() is still
     missing in older mobile browsers and would leave this transparent. */
  background-color: var(--accent);
  background-image: linear-gradient(165deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(0, 0, 0, 0.00) 42%,
    rgba(0, 0, 0, 0.18) 100%);
  color: var(--accent-btn-text);
  animation: successIn 0.45s var(--ease-out) both;
}
.success-screen[hidden] { display: none; }

@keyframes successIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

.success-check { width: 92px; height: 92px; }
.success-check svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent-btn-text);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-ring {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  opacity: 0.55;
  animation: scRing 0.65s var(--ease-out) 0.15s forwards;
}
.sc-tick {
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  stroke-width: 4.2;
  animation: scTick 0.4s var(--ease-out) 0.6s forwards;
}
@keyframes scRing { to { stroke-dashoffset: 0; } }
@keyframes scTick { to { stroke-dashoffset: 0; } }

.success-text {
  font-size: clamp(14px, 3.4vw, 16px);
  font-weight: 700;
  line-height: 1.65;
  max-width: 30ch;
}

.btn-new-order {
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 8px;
  border: 1.5px solid var(--on-accent-soft);
  background: transparent;
  color: var(--accent-btn-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .success-screen { animation: none; }
  .sc-ring, .sc-tick { animation: none; stroke-dashoffset: 0; }
}

/* ========== 9. RESPONSIVE ========== */

/* Hover effects only for real pointers — avoids sticky states on touch */
@media (hover: hover) and (pointer: fine) {
  .btn-nav-order:hover,
  .btn-hero-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .btn-hero-primary:hover { box-shadow: 0 12px 36px var(--accent-glow); }
  .btn-hero-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow-subtle);
    transform: translateY(-2px);
  }
  .service-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 25px var(--accent-glow-subtle);
  }
  .service-card:hover .service-img-wrap img { transform: scale(1.05); }
  .pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
  }
  .pricing-card.featured-card:hover {
    border-color: var(--accent);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px var(--accent-glow);
  }
  .btn-select-package:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-btn-text);
    box-shadow: 0 6px 20px var(--accent-glow);
    transform: translateY(-2px);
  }
  .why-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 25px var(--accent-glow-subtle);
  }
  .car-nav-arrow:hover {
    background: var(--accent);
    color: var(--accent-btn-text);
    border-color: var(--accent);
    box-shadow: 0 0 25px var(--accent-glow);
    transform: translateY(-50%) scale(1.1);
  }
  .btn-submit-order:hover { filter: brightness(1.1); transform: translateY(-2px); }
  .footer-phone:hover { color: var(--accent); }
  .btn-new-order:hover {
    background: var(--on-accent-soft);
    border-color: var(--accent-btn-text);
  }
  .footer-social a:hover {
    color: var(--accent-btn-text);
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  .avatar-more:hover { transform: scale(1.12); filter: brightness(1.08); }
  .footer-credit a:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .floating-wa-btn:hover { transform: scale(1.1) translateY(-3px); filter: brightness(1.1); }
  .floating-wa-btn:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
}

/* Tablet landscape / small desktop */
@media (max-width: 1200px) {
  .packages-grid { grid-template-columns: 1fr; max-width: 620px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-us-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr 1.1fr; }
}

/* Tablet / mobile: nav collapses */
@media (max-width: 992px) {
  :root { --nav-h: 66px; }

  .nav-links-wrap,
  .nav-actions .btn-nav-order,
  .nav-actions > .lang-switcher { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-drawer { display: flex; }

  .hero-section { min-height: auto; padding-top: calc(var(--nav-h) + 32px); }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .hero-left { align-items: center; }
  .hero-desc { margin-inline: auto; }
  .hero-btn-group { justify-content: center; width: 100%; }
  .hero-trust-box { justify-content: center; }

  .hero-right { align-items: center; }
  .ceramic-perfection-card { align-items: center; text-align: center; }
  .ceramic-features-list { max-width: 320px; margin-inline: auto; }
  .ceramic-feature-row { justify-content: space-between; }
  .cf-label { text-align: left; order: 2; }
  .cf-icon-box { order: 1; }

  .car-slider-stage-wrap { max-width: 100%; }
  .car-nav-arrow.arrow-prev { left: 0; }
  .car-nav-arrow.arrow-next { right: 0; }

  .about-text-content { max-width: none; }

  .order-form-grid { grid-template-columns: 1fr; }

  .how-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps-grid::before { display: none; }

  .footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.footer-social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dark-border);
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.25s var(--ease-out);
}
.footer-social svg { width: 19px; height: 19px; }

.footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
  .footer-credit { padding-right: 0; }

  /* Sticky bottom CTA replaces the desktop nav button */
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 72px; }
  .floating-wa-btn { bottom: 84px; right: 16px; }
}

/* Phone */
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .why-us-grid { grid-template-columns: 1fr; }
  .how-steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .step-card p { max-width: 34ch; }

  .hero-btn-group { flex-direction: column; align-items: stretch; }
  .btn-hero-primary,
  .btn-hero-outline { width: 100%; }

  .location-options-grid { grid-template-columns: 1fr; }

  /* Keep the frame on phones, but slim: a thick bezel would eat ~30px of
     field width. Side buttons go — on a thin edge they read as artefacts. */
  .iphone {
    max-width: none;
    padding: 7px;
    border-radius: 44px;
  }
  .iphone-screen {
    border-radius: 37px;
    padding: 46px 14px 28px;
    /* blur is expensive on low-end phones; the gradient alone reads the same */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg,
      var(--accent-glow-subtle) 0%,
      rgba(10, 10, 14, 0.86) 38%,
      rgba(7, 7, 10, 0.94) 100%);
  }
  .iphone-btn { display: none; }
  .iphone-island { width: 92px; height: 27px; }
  .iphone-home { bottom: 7px; }
  .phone-stage { padding-inline: 0; }

  /* Slimmer bezel means less room either side of the island */
  .iphone-statusbar { height: 44px; padding: 0 16px; }
  .sb-time { font-size: 13px; min-width: 42px; }
  .sb-icons { gap: 5px; min-width: 42px; }
  .sb-signal  { width: 15px; height: 10px; }
  .sb-wifi    { width: 14px; height: 10px; }
  .sb-battery { width: 22px; height: 10px; }

  .car-stage { height: 200px; }
  .car-nav-arrow { width: 44px; height: 44px; }

  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: none;
    max-height: 92svh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* Small phone */
@media (max-width: 400px) {
  .hero-badge { letter-spacing: 2px; }
  .price-split-box { padding: 14px 8px; }
  .price-car-type { font-size: 10px; }
  .avatar-photo,
  .avatar-more { width: 34px; height: 34px; }
  .mcta { font-size: 12.5px; }
}

/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-section { min-height: auto; }
  .car-stage { height: 160px; }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .car-view-img { animation: none; }
  .hero-ambient-glow { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .kin-word-inner { transform: none !important; }
}