/* ============================================================
   PREMIUM TECH — Royal Precision Design System
   Fonts: Outfit (display) + Nunito (body)
   Primary: Emerald #2BAE8E · Silver · Charcoal on White
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ─── Tokens ───────────────────────────────────────────────── */
:root {
  --green:        #2BAE8E;
  --green-dk:     #1A9178;
  --green-lt:     #4DC9A8;
  --green-glow:   rgba(43,174,142,.14);
  --green-glow2:  rgba(43,174,142,.06);
  --silver:       #A8ADB5;
  --silver-lt:    #D4D8DF;
  --charcoal:     #4B5563;
  --dark:         #111827;

  --bg:           #FFFFFF;
  --bg-alt:       #F7FAFA;
  --bg-alt2:      #EFF5F4;
  --bg-dot:       radial-gradient(circle, #d4ece7 1px, transparent 1px);

  --text:         #111827;
  --text-muted:   #6B7280;
  --text-light:   #9CA3AF;
  --border:       #E5E7EB;
  --border-lt:    #F3F4F6;

  --font-display: 'Outfit', sans-serif;
  --font-body:    'Nunito', sans-serif;

  --pad-x:  clamp(1.25rem, 5vw, 5rem);
  --max-w:  1280px;
  --max-w-sm: 900px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 9999px;

  --sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --sh-md: 0 8px 32px rgba(0,0,0,.09);
  --sh-lg: 0 24px 72px rgba(0,0,0,.12);
  --sh-green: 0 20px 60px rgba(43,174,142,.22);
  --sh-card: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --sh-card-hover: 0 16px 56px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  
  /* New Premium Ambient Shadows */
  --sh-ambient: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --sh-elevated: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --sh-floating: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(12px) saturate(180%);

  --ease:        cubic-bezier(.16,1,.3,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    180ms;
  --dur-med:     380ms;
  --dur-slow:    700ms;
}

/* ─── Utilities ───────────────────────────────────────────── */
.glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border) }
.sh-ambient { box-shadow: var(--sh-ambient) }
.sh-elevated { box-shadow: var(--sh-elevated) }
.sh-floating { box-shadow: var(--sh-floating) }

[data-magnetic] { display: inline-block; transition: transform 0.3s var(--ease-out) }

/* ─── Reset ────────────────────────────────────────────────── */
*,*::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: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; height:auto }
a  { color:inherit; text-decoration:none }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul,ol { list-style:none }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:4px }

/* ─── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family:var(--font-display); line-height:1.1; font-weight:800; color:var(--dark) }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem) }
h2 { font-size: clamp(1.9rem, 4vw, 3rem) }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem) }
h4 { font-size: 1.1rem }
p  { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7 }
.grad { background: linear-gradient(135deg, var(--green), var(--green-lt)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.eyebrow { font-family:var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); display:block; margin-bottom:.75rem }

/* ─── Layout ────────────────────────────────────────────────── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x) }
.container--sm { max-width:var(--max-w-sm) }
.section { padding: clamp(4rem,8vw,7rem) 0 }
.section--alt { background:var(--bg-alt) }
.section--alt2 { background:var(--bg-alt2) }
.section__head { text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem) }
.section__head p { max-width:52ch; margin:.75rem auto 0 }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  padding:.75rem 1.6rem; border-radius:var(--r-pill);
  cursor:pointer; transition:all var(--dur-fast) var(--ease-out);
  letter-spacing:.02em; white-space:nowrap; border:2px solid transparent;
}
.btn--primary {
  background:var(--green); color:#fff;
  box-shadow: 0 4px 20px rgba(43,174,142,.35);
}
.btn--primary:hover { background:var(--green-dk); transform:translateY(-2px); box-shadow:var(--sh-green) }
.btn--outline {
  background:transparent; color:var(--green); border-color:var(--green);
}
.btn--outline:hover { background:var(--green); color:#fff; transform:translateY(-2px) }
.btn--dark {
  background:var(--dark); color:#fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.btn--dark:hover { background:#1f2937; transform:translateY(-2px) }
.btn--ghost {
  background:transparent; color:var(--text); border-color:var(--border);
}
.btn--ghost:hover { border-color:var(--green); color:var(--green) }
.btn--lg { padding:.9rem 2rem; font-size:1rem }
.btn--sm { padding:.5rem 1rem; font-size:.82rem }
.btn svg { flex-shrink:0; transition:transform var(--dur-fast) var(--ease-out) }
.btn:hover svg { transform:translateX(3px) }

/* ─── Badges ────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-size:.68rem; font-weight:700;
  padding:.28rem .7rem; border-radius:var(--r-pill);
  letter-spacing:.06em; text-transform:uppercase;
}
.badge--new         { background:#dcfdf4; color:#0f7a5a }
.badge--on-sale     { background:#fff3dc; color:#a0520a }
.badge--free-shipping{ background:#e8f4ff; color:#1155aa }
.badge--sold        { background:#f3f4f6; color:#9ca3af }

/* ─── Custom Cursor ─────────────────────────────────────────── */
.cursor {
  position:fixed; pointer-events:none; z-index:9999;
  width:12px; height:12px; border-radius:50%;
  background:var(--green);
  transform:translate(-50%,-50%);
  transition:transform .1s linear, width .2s var(--ease), height .2s var(--ease), opacity .2s, background .2s;
  mix-blend-mode: normal;
}
.cursor--ring {
  width:44px; height:44px;
  background:transparent; border:1.2px solid var(--green);
  opacity:.4;
  transition:transform .2s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .3s, border .2s;
}
.cursor--expanded { width:64px!important; height:64px!important; opacity:.2!important; background:var(--green)!important; border-color:transparent!important }
.cursor--magnetic { width:24px!important; height:24px!important; opacity:.8!important; mix-blend-mode: color-dodge }
@media(hover:none),(pointer:coarse){ .cursor,.cursor--ring{display:none} }

/* ─── NAV ───────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.25rem var(--pad-x);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  transition: all var(--dur-fast) var(--ease-out);
}
.nav.scrolled {
  padding:.8rem var(--pad-x);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--sh-ambient);
}
.nav__logo { display:flex; align-items:center; gap:.6rem; flex-shrink:0 }
.nav__logo img { height:44px; width:auto; object-fit:contain }
.nav__links { display:flex; align-items:center; gap:1.8rem; margin-left:auto }
.nav__links a {
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
  color:var(--text-muted); letter-spacing:.03em;
  transition:color var(--dur-fast);
  position:relative;
}
.nav__links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--green); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover, .nav__links a.active { color:var(--dark) }
.nav__links a:hover::after, .nav__links a.active::after { transform:scaleX(1) }
.nav__actions { display:flex; align-items:center; gap:.75rem; margin-left:1.5rem }
.nav__hamburger {
  display:none; width:42px; height:42px;
  align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1.5px solid var(--border);
  flex-direction:column; gap:5px;
}
.nav__hamburger span {
  display:block; height:2px; width:22px; background:var(--dark);
  transition:all .25s var(--ease); border-radius:2px;
}
.nav__hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav__hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.nav__hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile nav drawer */
.nav__drawer {
  position:fixed; inset:0; z-index:800; background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform:translateX(100%); transition:transform .35s var(--ease);
}
.nav__drawer.open { transform:none }
.nav__drawer a {
  font-family:var(--font-display); font-size:2rem; font-weight:800;
  color:var(--dark); opacity:.7; transition:opacity .15s, color .15s;
}
.nav__drawer a:hover { opacity:1; color:var(--green) }

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  min-height:100svh; display:flex; align-items:center;
  padding: 7rem var(--pad-x) 5rem;
  background: var(--bg);
  background-image: var(--bg-dot);
  background-size: 30px 30px;
  position:relative; overflow:hidden;
}
/* ambient glows */
.hero::before {
  content:''; position:absolute; top:-10%; right:-5%; width:700px; height:700px;
  background: radial-gradient(circle, rgba(43,174,142,.14) 0%, transparent 65%);
  border-radius:50%; pointer-events:none; z-index:0;
}
.hero::after {
  content:''; position:absolute; bottom:-10%; left:-8%; width:500px; height:500px;
  background: radial-gradient(circle, rgba(43,174,142,.08) 0%, transparent 65%);
  border-radius:50%; pointer-events:none; z-index:0;
}
/* CSS 3D perspective floor grid — key immersive detail */
.hero-floor {
  position:absolute; bottom:0; left:-30%; right:-30%; height:260px;
  background-image:
    linear-gradient(rgba(43,174,142,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,174,142,.18) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(350px) rotateX(72deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.25) 0%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.25) 0%, transparent 100%);
  pointer-events:none; z-index:0;
}
.hero__inner {
  max-width:var(--max-w); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  position:relative; z-index:2;
}
.hero__copy { max-width:560px }
.hero__title {
  font-family:var(--font-display); font-size:clamp(2.6rem,6vw,4.4rem);
  font-weight:800; line-height:1.05; color:var(--dark); margin:.5rem 0 1.5rem;
}
.hero__title em { font-style:normal; color:var(--green) }
.hero__sub {
  font-size:1.1rem; color:var(--text-muted); max-width:44ch; margin-bottom:2rem; line-height:1.7;
}
.hero__cta { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem }
.hero__trust { display:flex; flex-wrap:wrap; gap:1.25rem }
.hero__trust-item {
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-size:.82rem; font-weight:700;
  color:var(--text-muted); letter-spacing:.03em;
}
.hero__trust-item svg { color:var(--green) }

/* ─── 3D Hero Scene — orbiting carousel ────────────────────── */
.hero__scene {
  perspective: 700px;
  perspective-origin: 50% 50%;
  height: 520px;
  position: relative;
}
.hero__scene-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.float-card {
  /* All cards anchored to scene centre; transform places them in orbit */
  position: absolute;
  top: 50%; left: 50%;
  width: 220px;
  border-radius: var(--r-lg);
  background: #fff;
  transform-style: preserve-3d;
  border: 1px solid rgba(0,0,0,.07);
  /* Cards flip to back — hide them so text never appears mirrored */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  box-shadow:
    0 4px 6px rgba(0,0,0,.04),
    0 12px 40px rgba(0,0,0,.10),
    0 40px 80px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.8) inset;
}
.float-card__img { width:100%; aspect-ratio:1; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0 }
.float-card__img img { width:100%; height:100%; object-fit:cover; display:block }
.float-card__body { padding:1rem 1.2rem 1.25rem; border-top:1px solid rgba(0,0,0,.04) }
.float-card__brand { font-size:.7rem; font-weight:700; color:var(--text-light); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.3rem }
.float-card__name { font-family:var(--font-display); font-size:.98rem; font-weight:700; color:var(--dark); margin-bottom:.25rem; line-height:1.2 }
.float-card__price { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--green) }

/* Cards evenly spaced 120° apart around the Y orbit at radius 135px */
.float-card--1 { transform: translate(-50%,-50%) rotateY(  0deg) translateZ(135px); z-index:3; }
.float-card--2 { transform: translate(-50%,-50%) rotateY(120deg) translateZ(135px); z-index:2; }
.float-card--3 { transform: translate(-50%,-50%) rotateY(240deg) translateZ(135px); z-index:1; }

/* Emerald glow halo behind whichever card is currently at the front */
.float-card--1::before {
  content:''; position:absolute; inset:-20px;
  background:radial-gradient(ellipse at 50% 60%, rgba(43,174,142,.20), transparent 65%);
  z-index:-1; pointer-events:none;
}
/* Reflection shimmer */
.float-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  pointer-events:none;
}

/* ─── Ticker Strip ───────────────────────────────────────────── */
.strip {
  background:var(--dark); padding:.85rem 0; overflow:hidden;
  border-top:3px solid var(--green); border-bottom:3px solid var(--green);
}
.strip__track { display:flex; width:max-content; animation:ticker 30s linear infinite }
.strip__group { display:flex; align-items:center; gap:0; white-space:nowrap }
.strip__group span {
  font-family:var(--font-display); font-size:.78rem; font-weight:700;
  color:rgba(255,255,255,.75); letter-spacing:.1em; text-transform:uppercase;
  padding:0 1.5rem;
}
.strip__dot { color:var(--green)!important; font-size:1.2rem; line-height:1; padding:0 .2rem!important }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── Money Shower FX ───────────── */
.money-shower { position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden }
.money-particle { position:absolute; top:-50px; animation:moneyFall 3s linear forwards }
@keyframes moneyFall { to { transform: translateY(110vh) rotate(360deg) } }

/* ─── Featured Products Grid ──────────────────────────────── */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.5rem;
}
/* Featured homepage grid: 3 columns = clean 2×3 layout for 6 products */
.products-grid--featured {
  grid-template-columns: repeat(3, 1fr);
}
@media(max-width:900px){ .products-grid--featured { grid-template-columns: repeat(2,1fr) } }
@media(max-width:520px){ .products-grid--featured { grid-template-columns: 1fr } }

/* ─── Product Card ──────────────────────────────────────────── */
.product-card {
  background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-card); border:1px solid var(--border-lt);
  overflow:hidden; transition:box-shadow var(--dur-med) var(--ease), transform 0.5s var(--ease-spring);
  cursor:pointer; will-change: transform;
}
.product-card:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 16px 40px rgba(0,0,0,.14),
    0 40px 80px rgba(0,0,0,.08),
    0 0 0 1px rgba(43,174,142,.12);
  transform: perspective(800px) rotateX(-3deg) rotateY(2deg) translateY(-10px) translateZ(10px);
}
.product-card--sold { opacity:.65; pointer-events:none }
.product-card__img-wrap {
  position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-alt);
}
.product-card__img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-card__img-wrap img { transform:scale(1.06) }
.product-card__img-wrap .badge { position:absolute; top:.75rem; left:.75rem; z-index:2 }
.product-card__overlay {
  position:absolute; inset:0; background:rgba(17,24,39,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--dur-fast);
}
.product-card:hover .product-card__overlay { opacity:1 }
.product-card__body { padding:1.1rem 1.25rem 1.25rem }
.product-card__brand {
  display:flex; align-items:center; height:18px; margin-bottom:.4rem; color:var(--text-light);
}
.product-card__brand svg { fill:var(--silver) }
.product-card__name {
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  color:var(--dark); margin-bottom:.2rem; line-height:1.3;
}
.product-card__tagline { font-size:.85rem; color:var(--text-light); margin-bottom:.9rem; font-style:italic }
.product-card__footer { display:flex; align-items:center; justify-content:space-between }
.product-card__price { display:flex; flex-direction:column; gap:.1rem }
.price-current { font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--green) }
.price-original { font-size:.82rem; color:var(--text-light); text-decoration:line-through }
.product-card__cta {
  width:38px; height:38px; border-radius:50%;
  background:var(--green-glow); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.product-card:hover .product-card__cta { background:var(--green); color:#fff; transform:scale(1.1) }

/* ─── Trade-in CTA Banner ─────────────────────────────────── */
.tradein-banner {
  background:var(--dark); border-radius:var(--r-xl);
  padding:clamp(2.5rem,5vw,4rem); overflow:hidden; position:relative;
}
.tradein-banner::before {
  content:''; position:absolute; right:-5%; top:-20%; width:400px; height:400px;
  background:radial-gradient(circle, rgba(43,174,142,.2), transparent 65%);
  border-radius:50%;
}
.tradein-banner::after {
  content:''; position:absolute; left:-5%; bottom:-20%; width:320px; height:320px;
  background:radial-gradient(circle, rgba(43,174,142,.1), transparent 65%);
  border-radius:50%;
}
.tradein-banner__inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem;
}
.tradein-banner h2 { color:#fff; margin-bottom:.75rem }
.tradein-banner p  { color:rgba(255,255,255,.65); margin-bottom:1.5rem; max-width:50ch }
.tradein-banner__steps { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.5rem }
.tradein-banner__step { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.7); font-size:.9rem }
.tradein-banner__step-num {
  width:26px; height:26px; border-radius:50%;
  background:rgba(43,174,142,.25); color:var(--green-lt);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.75rem; font-weight:800; flex-shrink:0;
}
.tradein-banner__visual {
  width:220px; flex-shrink:0; text-align:right;
  font-family:var(--font-display); font-size:5rem; font-weight:800;
  line-height:1; color:rgba(255,255,255,.06);
  display:flex; flex-direction:column; align-items:flex-end;
  animation: bannerFloat 7s ease-in-out infinite;
  transform-origin: center;
}
@keyframes bannerFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-22px) rotate(-4deg); }
}

/* ─── Why Us ─────────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.5rem }
.why-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.75rem; transition:border-color var(--dur-fast), box-shadow var(--dur-fast), transform 0.5s var(--ease-spring);
  will-change: transform;
}
.why-card:hover { border-color:var(--green); box-shadow:0 0 0 4px var(--green-glow), 0 20px 50px rgba(0,0,0,.1) }
.why-card__icon {
  width:48px; height:48px; border-radius:var(--r-sm);
  background:var(--green-glow2); color:var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
}
.why-card__icon svg { width:24px; height:24px }
.why-card h3 { font-size:1.05rem; margin-bottom:.5rem }
.why-card p  { font-size:.92rem; color:var(--text-muted) }

/* ─── Stats Row ──────────────────────────────────────────── */
.stats-row { display:flex; flex-wrap:wrap; gap:1px; background:var(--border) }
.stat-item { background:#fff; flex:1; min-width:200px; padding:2.5rem; text-align:center; transition: transform 0.5s var(--ease-spring), box-shadow 0.3s var(--ease); will-change: transform; cursor: default; }
.stat-item:hover { box-shadow: 0 16px 40px rgba(0,0,0,.1) }
.stat-item__num {
  font-family:var(--font-display); font-size:3rem; font-weight:800;
  color:var(--green); line-height:1; margin-bottom:.5rem; display:block;
}
.stat-item__label { font-size:.88rem; color:var(--text-muted); font-weight:500 }

/* ─── Brands Section ─────────────────────────────────────── */
.brands-row { display:flex; justify-content:center; align-items:center; gap:4rem; flex-wrap:wrap }
.brand-pill {
  display:flex; align-items:center; gap:1rem;
  border:1.5px solid var(--border); border-radius:var(--r-pill);
  padding:1rem 2rem; font-family:var(--font-display); font-weight:800;
  font-size:1.1rem; color:var(--dark); letter-spacing:.03em;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast), transform 0.5s var(--ease-spring);
  background:#fff; will-change: transform;
}
.brand-pill:hover { border-color:var(--green); box-shadow:0 0 0 4px var(--green-glow), 0 16px 36px rgba(0,0,0,.1) }
.brand-pill svg { width:28px; height:28px; fill:var(--dark) }

/* ─── About Snippet ──────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center }
.about-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--green-glow2); border:1px solid rgba(43,174,142,.2);
  border-radius:var(--r-pill); padding:.4rem 1rem;
  font-family:var(--font-display); font-size:.78rem; font-weight:700;
  color:var(--green); margin-bottom:1.25rem;
}
.about-img {
  border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3;
  background:var(--bg-alt2); position:relative;
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.55s var(--ease-spring), box-shadow 0.4s var(--ease);
  box-shadow: var(--sh-lg);
}
.about-img:hover {
  transform: perspective(900px) rotateY(0deg) rotateX(0deg) translateY(-10px);
  box-shadow: 0 32px 80px rgba(0,0,0,.18);
}
.about-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(43,174,142,.08) 0%, transparent 60%);
}
.about-img img { width:100%; height:100%; object-fit:cover }
.about-features { margin-top:2rem; display:flex; flex-direction:column; gap:.75rem }
.about-feature { display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:var(--text-muted) }
.about-feature svg { color:var(--green); flex-shrink:0 }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:.75rem }
details.faq-item {
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; transition:border-color var(--dur-fast), transform 0.5s var(--ease-spring), box-shadow var(--dur-fast);
  will-change: transform;
}
details.faq-item[open] { border-color:var(--green); box-shadow: 0 8px 32px rgba(43,174,142,.12) }
details.faq-item summary {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--dark);
  list-style:none; gap:1rem;
}
details.faq-item summary::-webkit-details-marker { display:none }
details.faq-item summary::after {
  content:''; width:18px; height:18px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%232BAE8E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease-out);
}
details.faq-item[open] summary::after { transform:rotate(180deg) }
details.faq-item > p { padding:.25rem 1.5rem 1.25rem; color:var(--text-muted); font-size:.95rem; line-height:1.7 }

/* ─── Footer ─────────────────────────────────────────────── */
.footer { background:var(--dark); color:rgba(255,255,255,.7); padding:4rem 0 0 }
.footer__inner {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:3rem; max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x) 3rem;
}
.footer__brand img { height:44px; width:auto; margin-bottom:1rem; opacity:.9 }
.footer__brand p { font-size:.9rem; line-height:1.7; max-width:32ch }
.footer h4 {
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  margin-bottom:1.25rem;
}
.footer__links { display:flex; flex-direction:column; gap:.65rem }
.footer__links a { font-size:.9rem; color:rgba(255,255,255,.6); transition:color .15s }
.footer__links a:hover { color:var(--green) }
.footer__contact { display:flex; flex-direction:column; gap:.65rem; font-size:.9rem }
.footer__contact a { color:rgba(255,255,255,.6); transition:color .15s; display:flex; align-items:center; gap:.5rem }
.footer__contact a:hover { color:var(--green) }
.footer__bottom {
  border-top:1px solid rgba(255,255,255,.08); padding:1.25rem var(--pad-x);
  max-width:var(--max-w); margin:0 auto; width:100%;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem;
}
.footer__bottom p { font-size:.82rem; color:rgba(255,255,255,.4) }
.footer__bottom a { color:rgba(255,255,255,.4); transition:color .15s }
.footer__bottom a:hover { color:var(--green) }

/* ─── SHOP PAGE ─────────────────────────────────────────── */
.shop-hero {
  background:var(--bg-alt); padding:clamp(5rem,10vw,8rem) var(--pad-x) 3rem;
  border-bottom:1px solid var(--border);
  background-image: var(--bg-dot); background-size:30px 30px;
}
.shop-hero h1 { margin-bottom:.75rem }
.shop-layout {
  display:grid; grid-template-columns:240px 1fr;
  gap:2rem; max-width:var(--max-w); margin:0 auto;
  padding:2.5rem var(--pad-x) 5rem;
}
.shop-filters { position:sticky; top:90px; align-self:start }
.filter-section { margin-bottom:2rem }
.filter-section h4 {
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-light);
  margin-bottom:.75rem;
}
.filter-option {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem 0; cursor:pointer;
  font-size:.9rem; color:var(--text-muted); transition:color .15s;
}
.filter-option input[type=checkbox] {
  width:16px; height:16px; accent-color:var(--green); cursor:pointer; border-radius:3px;
}
.filter-option:hover { color:var(--dark) }
.filter-reset {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  font-size:.82rem; padding:.4rem .9rem; border-radius:var(--r-pill);
  cursor:pointer; margin-top:.5rem; transition:border-color .15s, color .15s;
}
.filter-reset:hover { border-color:var(--green); color:var(--green) }
.shop-top {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom:1.5rem;
}
.shop-count { font-size:.9rem; color:var(--text-muted) }
.shop-sort {
  border:1px solid var(--border); background:#fff; border-radius:var(--r-sm);
  padding:.45rem .85rem; font-size:.88rem; font-family:var(--font-body);
  color:var(--dark); cursor:pointer;
}
.no-results { text-align:center; padding:4rem; color:var(--text-muted); font-size:1rem }

/* ─── TRADE-IN PAGE ─────────────────────────────────────── */
.tradein-page-hero {
  background:var(--dark);
  padding:clamp(5rem,10vw,7rem) var(--pad-x) clamp(3rem,6vw,5rem);
  background-image: radial-gradient(circle at 70% 50%, rgba(43,174,142,.15), transparent 60%);
  text-align:center;
}
.tradein-page-hero h1 { color:#fff; margin-bottom:.75rem }
.tradein-page-hero p  { color:rgba(255,255,255,.65); max-width:52ch; margin:0 auto }

.tradein-layout {
  display:grid; grid-template-columns:1fr 400px; gap:2.5rem;
  max-width:var(--max-w); margin:0 auto;
  padding:clamp(2.5rem,5vw,4rem) var(--pad-x) 5rem;
  align-items:start;
}
.tradein-form-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:2.5rem }
.tradein-form-wrap h2 { font-size:1.5rem; margin-bottom:1.75rem }
.form-section { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border-lt) }
.form-section:last-of-type { border-bottom:none; margin-bottom:0 }
.form-section-title {
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-light);
  margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem;
}
.form-section-title::before {
  content:''; width:20px; height:2px; background:var(--green); border-radius:2px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form-group { display:flex; flex-direction:column; gap:.45rem }
.form-group label { font-size:.85rem; font-weight:600; color:var(--dark) }
.form-group input,
.form-group select,
.form-group textarea {
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  padding:.65rem .9rem; font-family:var(--font-body); font-size:.95rem;
  color:var(--dark); background:#fff; transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--green); outline:none;
  box-shadow:0 0 0 4px var(--green-glow);
}
.form-group textarea { resize:vertical; min-height:100px }
.radio-group, .checkbox-group { display:flex; flex-direction:column; gap:.5rem }
.radio-opt, .check-opt {
  display:flex; align-items:center; gap:.65rem;
  padding:.5rem .8rem; border-radius:var(--r-sm);
  border:1.5px solid var(--border); cursor:pointer;
  font-size:.9rem; color:var(--text-muted);
  transition:border-color .15s, background .15s, color .15s;
}
.radio-opt:has(input:checked),
.check-opt:has(input:checked) { border-color:var(--green); background:var(--green-glow2); color:var(--dark) }
.radio-opt input, .check-opt input { accent-color:var(--green); width:15px; height:15px }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem }

/* Trade-in sidebar */
.tradein-summary {
  position:sticky; top:90px;
  background:var(--dark); border-radius:var(--r-xl); padding:2rem; color:#fff;
}
.tradein-summary h3 { color:#fff; font-size:1.2rem; margin-bottom:1.5rem }
.summary-item { display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.88rem }
.summary-item:last-child { border-bottom:none }
.summary-label { color:rgba(255,255,255,.5) }
.summary-val { color:#fff; font-weight:600; text-align:right; max-width:55% }
.summary-estimate {
  margin-top:1.5rem; background:rgba(43,174,142,.12);
  border:1px solid rgba(43,174,142,.3); border-radius:var(--r-md); padding:1.25rem; text-align:center;
}
.summary-estimate__label { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--green-lt); margin-bottom:.5rem; font-weight:700 }
.summary-estimate__range { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:#fff; line-height:1 }
.summary-estimate__note { font-size:.75rem; color:rgba(255,255,255,.4); margin-top:.4rem }
.tradein-submit {
  width:100%; margin-top:2rem;
  background:var(--green); color:#fff;
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  padding:1rem; border-radius:var(--r-pill); border:none; cursor:pointer;
  transition:background .15s, transform .15s var(--ease-spring), box-shadow .15s;
  box-shadow:0 4px 20px rgba(43,174,142,.35);
}
.tradein-submit:hover { background:var(--green-dk); transform:translateY(-2px); box-shadow:var(--sh-green) }
.form-status { margin-top:1rem; text-align:center; padding:.75rem; border-radius:var(--r-sm); font-size:.9rem; display:none }
.form-status.success { display:block; background:#dcfdf4; color:#0f7a5a; border:1px solid #a7f3d0 }
.form-status.error   { display:block; background:#fef2f2; color:#b91c1c; border:1px solid #fecaca }
.expected-amount { display:flex; gap:.5rem; align-items:center }
.expected-amount input { flex:1 }
.expected-amount .currency { font-weight:600; color:var(--text-muted); padding:.65rem .5rem; font-size:.95rem }

/* ── Trade-In Wizard ───────────────────────────────────────── */
.wizard-progress {
  display: flex; justify-content: space-between; position: relative;
  margin-bottom: 3rem; padding: 0 1rem;
}
.wizard-progress__line {
  position: absolute; top: 15px; left: 1rem; right: 1rem;
  height: 2px; background: var(--border-lt); z-index: 0;
}
.wizard-progress__line-inner {
  height: 100%; background: var(--green); width: 0%;
  transition: width 0.4s var(--ease);
}
.wizard-progress__step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.wizard-progress__dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--text-light);
  transition: all 0.3s var(--ease);
}
.wizard-progress__step.active .wizard-progress__dot {
  border-color: var(--green); color: var(--green); transform: scale(1.1); box-shadow: 0 0 0 4px var(--green-glow);
}
.wizard-progress__step.completed .wizard-progress__dot {
  background: var(--green); border-color: var(--green); color: #fff;
}
.wizard-progress__label {
  font-family: var(--font-display); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-light);
}
.wizard-progress__step.active .wizard-progress__label { color: var(--green) }

.wizard-step { display: none; animation: fadeIn .4s var(--ease) }
.wizard-step.active { display: block }

.wizard-nav { display: flex; justify-content: space-between; margin-top: 2.5rem; gap: 1rem }
.wizard-nav .btn { flex: 1; justify-content: center }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ── Page Loader ───────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; background: #fff; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader__logo { width: 120px; height: auto; animation: pulse 2s infinite var(--ease) }
@keyframes pulse { 0%, 100% { opacity: 0.5; transform: scale(0.95) } 50% { opacity: 1; transform: scale(1) } }

/* ─── ABOUT PAGE ─────────────────────────────────────────── */
.page-hero {
  background:var(--bg-alt); padding:clamp(5rem,10vw,8rem) var(--pad-x) clamp(3rem,5vw,5rem);
  background-image:var(--bg-dot); background-size:30px 30px;
  border-bottom:1px solid var(--border);
}
.page-hero h1 { margin-bottom:.75rem }
.page-hero p { max-width:60ch; font-size:1.1rem }

/* ─── 404 PAGE ───────────────────────────────────────────── */
.page-404 {
  min-height:80svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:4rem var(--pad-x); background-image:var(--bg-dot); background-size:30px 30px;
}
.page-404__num {
  font-family:var(--font-display); font-size:clamp(6rem,18vw,12rem);
  font-weight:800; color:var(--border); line-height:1; margin-bottom:1rem; letter-spacing:-.04em;
}
.page-404__num span { color:var(--green) }
.page-404 h2 { margin-bottom:.75rem }
.page-404 p  { max-width:44ch; margin:0 auto 2rem }

/* ─── Reveal Animations ──────────────────────────────────── */
[data-reveal] {
  opacity:0; transform:translateY(32px) scale(0.96);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].in { opacity:1; transform:none }
[data-delay="1"]  { transition-delay:100ms }
[data-delay="2"]  { transition-delay:200ms }
[data-delay="3"]  { transition-delay:320ms }
[data-delay="4"]  { transition-delay:440ms }
[data-delay="5"]  { transition-delay:560ms }

/* ─── Mobile ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .hero__inner { grid-template-columns:1fr; }
  .hero__scene { height:400px; order:-1 }
  .about-grid { grid-template-columns:1fr }
  .footer__inner { grid-template-columns:1fr 1fr }
  .tradein-banner__inner { grid-template-columns:1fr }
  .tradein-banner__visual { display:none }
}
@media(max-width:768px){
  .nav__links { display:none }
  .nav__hamburger { display:flex }
  .hero { padding-top:5.5rem }
  .float-card--2, .float-card--3 { display:none }
  .float-card--1 { width:200px; transform:translate(-50%,-50%) rotateY(0deg) translateZ(0) }
  .hero__scene { height:360px }
  .shop-layout { grid-template-columns:1fr }
  .shop-filters { position:static }
  .tradein-layout { grid-template-columns:1fr }
  .tradein-summary { position:static }
  .tradein-form-wrap { padding:1.5rem }
  .form-row { grid-template-columns:1fr }
  .footer__inner { grid-template-columns:1fr }
  .brands-row { gap:2rem }
  .stats-row { flex-direction:column }
  .nav__actions .btn { display:none }
  .check-grid { grid-template-columns:1fr }
  .tradein-banner__inner { gap:1.5rem }
}
@media(max-width:480px){
  .hero__title { font-size:2.4rem }
  .products-grid { grid-template-columns:1fr 1fr }
  .why-grid { grid-template-columns:1fr }
}
@media(max-width:380px){
  .products-grid { grid-template-columns:1fr }
}

/* ── Money Shower ─────────────────────────────────────────── */
.money-shower {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden;
}
.money-particle {
  position: absolute; top: -50px;
  font-family: var(--font-display); font-weight: 800; color: var(--green);
  text-shadow: 0 4px 12px rgba(43,174,142,0.3);
  animation: moneyFall 3s linear forwards;
}
@keyframes moneyFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Product Modal ─────────────────────────────────────────── */
.p-modal-overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,0.4); backdrop-filter: blur(8px);
  z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem;
  opacity: 0; pointer-events: none; transition: all .3s ease;
}
.p-modal-overlay.open { opacity: 1; pointer-events: all; }

.p-modal {
  background: #FFF; border-radius: 24px; width: 100%; max-width: 900px;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-float);
  transform: translateY(30px); transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.p-modal-overlay.open .p-modal { transform: translateY(0); }

.p-modal__close {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px;
  background: #FFF; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 1.8rem; line-height: 1; color: var(--charcoal);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 10; cursor: pointer; border: none;
}
.p-modal__close:hover { color: var(--green); transform: scale(1.1); }

.p-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.p-modal__image { background: var(--bg); display: flex; align-items: center; justify-content: center; }
.p-modal__image img { width: 100%; height: 100%; object-fit: cover; }

.p-modal__content { padding: 3.5rem; }
.p-modal__brand { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); margin-bottom: .5rem; }
.p-modal__title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--dark); margin-bottom: 1rem; line-height: 1.1; }
.p-modal__price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--dark); margin-bottom: 2rem; }
.p-modal__desc { font-size: 1rem; color: var(--charcoal); line-height: 1.7; margin-bottom: 2.5rem; }

.p-modal__specs h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 800; margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.p-modal__specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-bottom: 3rem; }
.p-modal__spec { border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: .5rem; }
.p-modal__spec-k { display: block; font-size: .75rem; font-weight: 800; color: var(--silver); text-transform: uppercase; margin-bottom: .2rem; }
.p-modal__spec-v { display: block; font-size: .95rem; font-weight: 600; color: var(--charcoal); }

@media (max-width: 800px) {
  .p-modal__grid { grid-template-columns: 1fr; }
  .p-modal__content { padding: 2rem; }
  .p-modal__image { aspect-ratio: 1; }
}