/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 1691:0 Unexpected "<"
Line 1983:135 Unterminated string token
Line 2129:60 Unterminated string token
Line 2223:246 Unterminated string token
Line 2354:311 Unterminated string token
Line 2355:201 Unterminated string token
Line 2391:187 Unterminated string token
Line 2407:225 Unterminated string token
Line 2432:202 Unterminated string token
... and 142 more hidden warnings

**/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoSystems – Wireless Apple CarPlay & Android Auto</title>
<meta name="description" content="Upgrade your VW, SEAT, or Skoda instantly with Wireless Apple CarPlay & Android Auto. Premium smart car display systems.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --black: #0a0a0a;
    --near-black: #111111;
    --dark: #1a1a1a;
    --mid-dark: #2a2a2a;
    --grey: #888;
    --light-grey: #d4d4d4;
    --off-white: #f5f5f7;
    --white: #ffffff;
    --accent: #0071e3;
    --accent-hover: #0077ed;
    --accent-soft: rgba(0,113,227,0.12);
    --gold: #c9a84c;
    --success: #30d158;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --radius: 18px;
    --radius-sm: 10px;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --shadow-soft: 0 4px 32px rgba(0,0,0,0.06);
    --shadow-medium: 0 8px 48px rgba(0,0,0,0.10);
    --shadow-strong: 0 16px 64px rgba(0,0,0,0.18);
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ─── ANNOUNCEMENT BAR ─── */
  .announcement {
    background: var(--black);
    color: var(--white);
    text-align: center;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 100;
  }

  /* ─── HEADER / NAV ─── */
  .header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: rgba(255,255,255,0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: background var(--transition);
  }

  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .logo {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.03em;
    color: var(--black);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .logo-icon {
    width: 28px;
    height: 28px;
    background: var(--black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-icon svg { width: 16px; height: 16px; fill: white; }

  nav { display: flex; align-items: center; gap: 4px; }

  nav a {
    font-size: 14px;
    font-weight: 400;
    color: var(--dark);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all var(--transition);
    white-space: nowrap;
  }

  nav a:hover { background: var(--off-white); color: var(--black); }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .lang-select {
    background: transparent;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    color: var(--dark);
    outline: none;
  }

  .btn-cart {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--off-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background var(--transition);
  }

  .btn-cart:hover { background: var(--light-grey); }
  .btn-cart svg { width: 18px; height: 18px; }

  .cart-count {
    position: absolute;
    top: -2px; right: -2px;
    width: 16px; height: 16px;
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    gap: 5px;
  }

  .mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--black);
    transition: all var(--transition);
  }

  /* ─── HERO ─── */
  .hero {
    min-height: 92vh;
    background: var(--near-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 80px 24px 60px;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(0,113,227,0.18) 0%, transparent 70%),
                radial-gradient(ellipse 50% 40% at 20% 20%, rgba(100,100,120,0.15) 0%, transparent 60%);
  }

  .hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 100%, black 20%, transparent 70%);
  }

  .hero-content { position: relative; z-index: 2; max-width: 820px; }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
    animation: fadeInDown 0.8s ease both;
  }

  .hero-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
  }

  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(52px, 8vw, 96px);
    font-weight: 400;
    color: var(--white);
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    animation: fadeInUp 0.9s ease 0.1s both;
  }

  .hero h1 em {
    font-style: italic;
    color: rgba(255,255,255,0.6);
  }

  .hero-sub {
    font-size: clamp(16px, 2.5vw, 20px);
    color: rgba(255,255,255,0.55);
    font-weight: 300;
    max-width: 520px;
    margin: 0 auto 48px;
    animation: fadeInUp 0.9s ease 0.2s both;
    letter-spacing: 0.01em;
  }

  .hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.9s ease 0.3s both;
  }

  .btn-primary {
    background: var(--white);
    color: var(--black);
    border: none;
    border-radius: 100px;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition);
    letter-spacing: -0.01em;
  }

  .btn-primary:hover { background: var(--off-white); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }

  .btn-secondary {
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-body);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
  }

  .btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: white; transform: translateY(-2px); }

  .hero-dashboard {
    position: relative;
    z-index: 2;
    margin-top: 72px;
    width: 100%;
    max-width: 900px;
    animation: fadeInUp 1s ease 0.4s both;
  }

  .hero-dashboard-img {
    width: 100%;
    height: 380px;
    background: var(--mid-dark);
    border-radius: 24px 24px 0 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    overflow: hidden;
    position: relative;
    box-shadow: 0 -24px 80px rgba(0,113,227,0.15), 0 0 0 1px rgba(255,255,255,0.06);
  }

  .dashboard-mockup {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #1c2030 0%, #0d0f1a 50%, #0a0c14 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
  }

  .dash-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px;
    flex: 1;
    max-width: 200px;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dash-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .dash-card-icon.blue { background: rgba(0,113,227,0.3); }
  .dash-card-icon.green { background: rgba(48,209,88,0.3); }
  .dash-card-icon.purple { background: rgba(191,90,242,0.3); }
  .dash-card-icon.orange { background: rgba(255,159,10,0.3); }

  .dash-card-label { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
  .dash-card-value { font-size: 15px; color: rgba(255,255,255,0.9); font-weight: 500; }

  .dash-center {
    flex: 2;
    max-width: 340px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }

  .dash-map {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #1a2a3a 0%, #0d1820 100%);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
  }

  .dash-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0,113,227,0.15) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,113,227,0.15) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  .dash-map-pin {
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%,-50%);
    width: 12px; height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0,113,227,0.3), 0 0 0 8px rgba(0,113,227,0.1);
  }

  .dash-carplay {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .carplay-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: white;
  }

  /* ─── SECTION SHARED ─── */
  section { padding: 100px 24px; }
  .container { max-width: 1200px; margin: 0 auto; }

  .section-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }

  .section-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--black);
    margin-bottom: 20px;
  }

  .section-title em { font-style: italic; color: var(--grey); }

  .section-sub {
    font-size: 17px;
    color: var(--grey);
    max-width: 520px;
    line-height: 1.7;
    font-weight: 300;
  }

  .section-header { margin-bottom: 60px; }
  .section-header.centered { text-align: center; }
  .section-header.centered .section-sub { margin: 0 auto; }

  /* ─── BRAND LOGOS ─── */
  .brands {
    padding: 48px 24px;
    background: var(--off-white);
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .brands-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .brands-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey);
    margin-right: 8px;
  }

  .brand-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    transition: all var(--transition);
    cursor: default;
  }

  .brand-chip:hover {
    border-color: var(--black);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
  }

  .brand-chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
  }

  .brand-chip.soon { opacity: 0.5; }
  .brand-chip.soon .brand-chip-dot { background: var(--grey); }

  /* ─── FEATURED PRODUCTS ─── */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
  }

  .product-card {
    background: var(--off-white);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid transparent;
    position: relative;
  }

  .product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
    border-color: rgba(0,0,0,0.06);
  }

  .product-card-badge {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 5;
    background: var(--black);
    color: white;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 100px;
  }

  .product-card-badge.blue { background: var(--accent); }
  .product-card-badge.gold { background: var(--gold); }

  .product-card-img {
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #e8e8ed 0%, #d4d4d8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  .product-card-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--off-white));
  }

  .product-img-mockup {
    width: 240px;
    height: 160px;
    background: var(--dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.1);
    position: relative;
  }

  .product-img-screen {
    width: 220px;
    height: 140px;
    background: linear-gradient(140deg, #1a1f2e 0%, #0d1018 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
  }

  .screen-icon {
    font-size: 28px;
    opacity: 0.9;
  }

  .screen-ui {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .screen-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.15);
  }

  .screen-bar.active { background: var(--accent); width: 70%; }
  .screen-bar.w50 { width: 50%; }
  .screen-bar.w80 { width: 80%; }

  .product-card-body { padding: 24px; }
  .product-card-category { font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
  .product-card-name { font-size: 18px; font-weight: 500; color: var(--black); margin-bottom: 6px; letter-spacing: -0.01em; }
  .product-card-desc { font-size: 14px; color: var(--grey); margin-bottom: 20px; line-height: 1.6; }

  .product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .product-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -0.02em;
  }

  .product-price-original {
    font-size: 14px;
    color: var(--grey);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 6px;
  }

  .btn-add-cart {
    background: var(--black);
    color: white;
    border: none;
    border-radius: 100px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
  }

  .btn-add-cart:hover { background: var(--accent); transform: scale(1.03); }

  /* ─── WHY CHOOSE US ─── */
  .why { background: var(--near-black); color: white; }
  .why .section-title { color: white; }
  .why .section-sub { color: rgba(255,255,255,0.5); }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .feature-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 32px;
    transition: all var(--transition);
  }

  .feature-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-4px);
  }

  .feature-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(0,113,227,0.2);
    border: 1px solid rgba(0,113,227,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
  }

  .feature-title {
    font-size: 17px;
    font-weight: 500;
    color: white;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }

  .feature-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
    font-weight: 300;
  }

  /* ─── INSTALL STEPS ─── */
  .install { background: var(--off-white); }

  .install-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .install-visual {
    background: var(--dark);
    border-radius: 24px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-strong);
  }

  .install-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(0,113,227,0.2) 0%, transparent 60%);
  }

  .install-phone {
    width: 200px;
    height: 360px;
    background: var(--mid-dark);
    border-radius: 32px;
    border: 6px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  }

  .install-phone-screen {
    width: 160px;
    height: 280px;
    background: linear-gradient(160deg, #1a2030 0%, #0d1020 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .install-phone-icon { font-size: 36px; }
  .install-phone-text { font-size: 12px; color: rgba(255,255,255,0.6); text-align: center; }

  .install-steps { display: flex; flex-direction: column; gap: 32px; }

  .install-step { display: flex; gap: 20px; align-items: flex-start; }

  .step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--black);
    color: white;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .step-content h4 { font-size: 16px; font-weight: 500; margin-bottom: 6px; color: var(--black); }
  .step-content p { font-size: 14px; color: var(--grey); line-height: 1.7; }

  /* ─── TESTIMONIALS ─── */
  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }

  .review-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    transition: all var(--transition);
  }

  .review-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
  }

  .review-stars { color: #ff9f0a; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
  .review-text { font-size: 15px; color: var(--dark); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
  .review-author { display: flex; align-items: center; gap: 12px; }

  .review-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: white;
    font-family: var(--font-body);
  }

  .review-name { font-size: 14px; font-weight: 500; color: var(--black); }
  .review-car { font-size: 12px; color: var(--grey); }

  /* ─── FAQ ─── */
  .faq { background: var(--off-white); }

  .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 2px; }

  .faq-item {
    background: var(--white);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 4px;
  }

  .faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 22px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--black);
    font-family: var(--font-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: color var(--transition);
  }

  .faq-q:hover { color: var(--accent); }

  .faq-q-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition), background var(--transition);
    font-size: 14px;
  }

  .faq-item.open .faq-q-icon { transform: rotate(45deg); background: var(--accent); color: white; }

  .faq-a {
    display: none;
    padding: 0 24px 22px;
    font-size: 14px;
    color: var(--grey);
    line-height: 1.8;
  }

  .faq-item.open .faq-a { display: block; }

  /* ─── FOOTER ─── */
  footer {
    background: var(--near-black);
    color: rgba(255,255,255,0.6);
    padding: 60px 24px 40px;
  }

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
  }

  .footer-brand .logo { color: white; margin-bottom: 16px; }
  .footer-brand p { font-size: 14px; line-height: 1.8; max-width: 240px; color: rgba(255,255,255,0.4); }

  .footer-col h4 { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8); margin-bottom: 16px; letter-spacing: 0.02em; }

  .footer-col a {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color var(--transition);
  }

  .footer-col a:hover { color: rgba(255,255,255,0.8); }

  .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.3); }

  .footer-bottom-links { display: flex; gap: 20px; }
  .footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.3); text-decoration: none; transition: color var(--transition); }
  .footer-bottom-links a:hover { color: rgba(255,255,255,0.6); }

  .trust-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
  }

  .trust-badge svg { width: 14px; height: 14px; opacity: 0.5; }

  /* ─── PRODUCT DETAIL MODAL ─── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .modal-overlay.open { opacity: 1; pointer-events: all; }

  .modal {
    background: var(--white);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    transform: translateY(60px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 40px;
  }

  .modal-overlay.open .modal { transform: translateY(0); }

  .modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--off-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background var(--transition);
  }

  .modal-close:hover { background: var(--light-grey); }

  .modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .modal-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--off-white);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
  }

  .modal-product-name {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }

  .modal-price { font-size: 24px; font-weight: 600; margin-bottom: 20px; }

  .variants { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .variants-label { font-size: 13px; font-weight: 500; color: var(--grey); }

  .variant-options { display: flex; gap: 8px; flex-wrap: wrap; }

  .variant-btn {
    border: 1.5px solid var(--light-grey);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    background: white;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--dark);
  }

  .variant-btn:hover, .variant-btn.selected {
    border-color: var(--black);
    background: var(--black);
    color: white;
  }

  .add-to-cart-big {
    width: 100%;
    background: var(--black);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 18px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 12px;
  }

  .add-to-cart-big:hover { background: var(--accent); transform: scale(1.01); }

  .modal-trust {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .modal-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--grey);
  }

  .specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 24px;
  }

  .spec-item {
    background: var(--off-white);
    border-radius: 10px;
    padding: 12px 14px;
  }

  .spec-label { font-size: 11px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
  .spec-value { font-size: 13px; font-weight: 500; color: var(--black); }

  /* ─── STICKY CART BAR ─── */
  .sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 14px 24px;
    transform: translateY(100%);
    transition: transform var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .sticky-bar.visible { transform: translateY(0); }

  .sticky-bar-product { font-size: 14px; font-weight: 500; }

  .sticky-bar-btn {
    background: var(--black);
    color: white;
    border: none;
    border-radius: 100px;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition);
  }

  .sticky-bar-btn:hover { background: var(--accent); }

  /* ─── CART SIDEBAR ─── */
  .cart-sidebar {
    position: fixed;
    top: 0; right: 0;
    width: 380px;
    height: 100vh;
    z-index: 1000;
    background: white;
    box-shadow: var(--shadow-strong);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
  }

  .cart-sidebar.open { transform: translateX(0); }

  .cart-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-header h3 { font-size: 18px; font-weight: 500; }

  .cart-close {
    background: var(--off-white);
    border: none;
    border-radius: 50%;
    width: 36px; height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background var(--transition);
  }

  .cart-close:hover { background: var(--light-grey); }

  .cart-body { flex: 1; overflow-y: auto; padding: 24px; }
  .cart-empty { text-align: center; padding: 60px 0; color: var(--grey); }
  .cart-empty-icon { font-size: 48px; margin-bottom: 16px; }
  .cart-empty p { font-size: 15px; }

  .cart-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--off-white);
    align-items: flex-start;
  }

  .cart-item-img {
    width: 72px; height: 72px;
    border-radius: 10px;
    background: var(--off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
  }

  .cart-item-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
  .cart-item-variant { font-size: 12px; color: var(--grey); margin-bottom: 8px; }
  .cart-item-price { font-size: 16px; font-weight: 600; }

  .cart-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  .qty-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--off-white);
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
  }

  .qty-btn:hover { background: var(--light-grey); }
  .qty-val { font-size: 14px; font-weight: 500; min-width: 20px; text-align: center; }

  .cart-footer { padding: 20px 24px; border-top: 1px solid rgba(0,0,0,0.06); }
  .cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 15px; }
  .cart-subtotal span:last-child { font-weight: 600; font-size: 18px; }

  .checkout-btn {
    width: 100%;
    background: var(--black);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 18px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 10px;
  }

  .checkout-btn:hover { background: var(--accent); }

  .checkout-note { font-size: 12px; color: var(--grey); text-align: center; }

  /* ─── OVERLAY ─── */
  .cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }

  .cart-overlay.open { opacity: 1; pointer-events: all; }

  /* ─── PAGE SECTIONS ─── */
  .page { display: none; }
  .page.active { display: block; }

  /* ─── COMPATIBILITY TABLE ─── */
  .compat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 40px;
  }

  .compat-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: all var(--transition);
    box-shadow: var(--shadow-soft);
  }

  .compat-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-medium);
    transform: translateY(-3px);
  }

  .compat-car { font-size: 32px; margin-bottom: 12px; }
  .compat-brand { font-size: 16px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
  .compat-years { font-size: 13px; color: var(--grey); }
  .compat-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 100px;
  }

  .compat-status.available { background: rgba(48,209,88,0.12); color: #1a8a3d; }
  .compat-status.coming { background: rgba(255,159,10,0.12); color: #a05e00; }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Reveal: used on inner pages for subtle scroll entrance */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.06s; }
  .reveal-delay-2 { transition-delay: 0.12s; }
  .reveal-delay-3 { transition-delay: 0.18s; }
  .reveal-delay-4 { transition-delay: 0.24s; }


  /* Staggered cards on home page */
  #page-home .product-card,
  #page-home .feature-card,
  #page-home .review-card,
  #page-home .compat-card,
  #page-home .install-step,
  #page-home .faq-item {
    animation: sectionFadeIn 0.5s ease both;
  }
  #page-home .product-card:nth-child(1),
  #page-home .feature-card:nth-child(1),
  #page-home .review-card:nth-child(1),
  #page-home .compat-card:nth-child(1),
  #page-home .install-step:nth-child(1) { animation-delay: 0.1s; }
  #page-home .product-card:nth-child(2),
  #page-home .feature-card:nth-child(2),
  #page-home .review-card:nth-child(2),
  #page-home .compat-card:nth-child(2),
  #page-home .install-step:nth-child(2) { animation-delay: 0.18s; }
  #page-home .product-card:nth-child(3),
  #page-home .feature-card:nth-child(3),
  #page-home .review-card:nth-child(3),
  #page-home .compat-card:nth-child(3),
  #page-home .install-step:nth-child(3) { animation-delay: 0.26s; }
  #page-home .feature-card:nth-child(4),
  #page-home .review-card:nth-child(4),
  #page-home .compat-card:nth-child(4) { animation-delay: 0.34s; }
  #page-home .feature-card:nth-child(5),
  #page-home .review-card:nth-child(5),
  #page-home .compat-card:nth-child(5) { animation-delay: 0.42s; }
  #page-home .feature-card:nth-child(6),
  #page-home .review-card:nth-child(6),
  #page-home .compat-card:nth-child(6) { animation-delay: 0.5s; }
  #page-home .faq-item:nth-child(1) { animation-delay: 0.1s; }
  #page-home .faq-item:nth-child(2) { animation-delay: 0.17s; }
  #page-home .faq-item:nth-child(3) { animation-delay: 0.24s; }
  #page-home .faq-item:nth-child(4) { animation-delay: 0.31s; }
  #page-home .faq-item:nth-child(5) { animation-delay: 0.38s; }

  /* Home page sections: always-on staggered fade-in */
  @keyframes sectionFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #page-home .brands,
  #page-home section {
    animation: sectionFadeIn 0.6s ease both;
  }
  #page-home .brands       { animation-delay: 0.05s; }
  #page-home section:nth-of-type(1) { animation-delay: 0.1s; }
  #page-home section:nth-of-type(2) { animation-delay: 0.15s; }
  #page-home section:nth-of-type(3) { animation-delay: 0.2s; }
  #page-home section:nth-of-type(4) { animation-delay: 0.25s; }
  #page-home section:nth-of-type(5) { animation-delay: 0.3s; }
  #page-home section:nth-of-type(6) { animation-delay: 0.35s; }
  #page-home section:nth-of-type(7) { animation-delay: 0.4s; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 900px) {
    nav { display: none; }
    .mobile-menu-btn { display: flex; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .install-grid { grid-template-columns: 1fr; gap: 40px; }
    .install-visual { height: 280px; }
    .modal-grid { grid-template-columns: 1fr; }
    .cart-sidebar { width: 100%; }
    .sticky-bar { gap: 10px; }
    .sticky-bar-product { display: none; }
    .hero-dashboard { display: none; }
  }

  @media (max-width: 600px) {
    section { padding: 70px 20px; }
    #page-about .container > section > div[style*='grid-template-columns:repeat(2'] { grid-template-columns: 1fr !important; }
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .modal { padding: 24px; }
    .hero-ctas { gap: 10px; }
    .hero h1 { font-size: 42px; }
    .dashboard-mockup { gap: 8px; }
    .dash-card { display: none; }
    .dash-card:first-child, .dash-center { display: flex; }
  }

  /* ─── MOBILE MENU ─── */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: white;
    padding: 80px 24px 40px;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-nav.open { transform: translateX(0); }

  .mobile-nav-close {
    position: absolute;
    top: 18px; right: 20px;
    background: var(--off-white);
    border: none;
    border-radius: 50%;
    width: 40px; height: 40px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav a {
    font-size: 22px;
    font-weight: 400;
    color: var(--black);
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--off-white);
    transition: color var(--transition);
  }

  .mobile-nav a:hover { color: var(--accent); }

  /* ─── POLICY PAGE ─── */
  .policy-content {
    max-width: 720px;
    margin: 0 auto;
  }

  .policy-content h2 {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

  .policy-content .updated {
    font-size: 13px;
    color: var(--grey);
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--off-white);
  }

  .policy-content h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 32px 0 12px;
    color: var(--black);
  }

  .policy-content p {
    font-size: 15px;
    color: var(--grey);
    line-height: 1.8;
    margin-bottom: 16px;
  }

  /* ABOUT */
  .about-hero {
    background: var(--near-black);
    color: white;
    padding: 100px 24px 80px;
    text-align: center;
  }

  .about-hero .section-title { color: white; }

  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 48px;
  }

  .team-card {
    background: var(--off-white);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
  }

  .team-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
  }

  .team-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
  .team-role { font-size: 13px; color: var(--grey); }

  /* CONTACT */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-label { font-size: 13px; font-weight: 500; color: var(--dark); }

  .form-input, .form-textarea {
    border: 1.5px solid var(--light-grey);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--transition);
    background: white;
    color: var(--black);
  }

  .form-input:focus, .form-textarea:focus { border-color: var(--accent); }
  .form-textarea { resize: vertical; min-height: 120px; }

  .form-submit {
    background: var(--black);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition);
  }

  .form-submit:hover { background: var(--accent); }

  .contact-info { display: flex; flex-direction: column; gap: 24px; }

  .contact-info-item {
    background: var(--off-white);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .contact-info-icon { font-size: 24px; }

  .contact-info-content h4 { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
  .contact-info-content p { font-size: 14px; color: var(--grey); }

  @media (max-width: 700px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-badge { font-size: 12px; }
  }

  /* NOTIFICATION TOAST */
  .toast {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 9999;
    background: var(--black);
    color: white;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 14px;
    box-shadow: var(--shadow-strong);
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
  }

  .toast.show { transform: translateY(0); opacity: 1; }
  .toast-icon { font-size: 18px; }

  /* Highlight on selected variant */
  .selected-variant-info {
    font-size: 13px;
    color: var(--grey);
    margin-bottom: 16px;
  }
</style>
</head>
<body>

<!-- ANNOUNCEMENT BAR -->
<div class="announcement">
  <span>📦</span>
  <span>🇮🇪 Free Delivery Across Ireland</span>
  <span style="margin-left:16px;color:rgba(255,255,255,0.4)">|</span>
  <span style="margin-left:16px">30-Day Easy Returns</span>
</div>

<!-- HEADER -->
<header class="header">
  <div class="header-inner">
    <a href="#" class="logo" onclick="showPage('home')">
      <div class="logo-icon">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.236L20 8.472v7.056L12 19.764l-8-4.236V8.472L12 4.236z"/></svg>
      </div>
      AutoSystems
    </a>

    <nav>
      <a href="#" onclick="showPage('home')">Home</a>
      <a href="#" onclick="showPage('catalog')">Shop</a>
      <a href="#" onclick="showPage('about')">About</a>
      <a href="#" onclick="showPage('faq-page')">FAQ</a>
      <a href="#" onclick="showPage('contact')">Contact</a>
    </nav>

    <div class="header-actions">
      <select class="lang-select" onchange="setLanguage(this.value)" title="Language">
        <option>🇬🇧 EN</option>
        <option>🇵🇱 PL</option>
        <option>🇩🇪 DE</option>
        <option>🇫🇷 FR</option>
      </select>

      <button class="btn-cart" onclick="toggleCart()" title="Cart">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
          <line x1="3" y1="6" x2="21" y2="6"/>
          <path d="M16 10a4 4 0 01-8 0"/>
        </svg>
        <span class="cart-count" id="cartCount">0</span>
      </button>

      <button class="mobile-menu-btn" onclick="toggleMobileMenu()" title="Menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</header>

<!-- MOBILE NAV -->
<div class="mobile-nav" id="mobileNav">
  <button class="mobile-nav-close" onclick="toggleMobileMenu()">✕</button>
  <a href="#" onclick="showPage('home');toggleMobileMenu()">Home</a>
  <a href="#" onclick="showPage('catalog');toggleMobileMenu()">Shop</a>
  <a href="#" onclick="showPage('about');toggleMobileMenu()">About</a>
  <a href="#" onclick="showPage('faq-page');toggleMobileMenu()">FAQ</a>
  <a href="#" onclick="showPage('contact');toggleMobileMenu()">Contact</a>
  <a href="#" onclick="showPage('shipping');toggleMobileMenu()">Shipping Policy</a>
</div>

<!-- CART OVERLAY -->
<div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>

<!-- CART SIDEBAR -->
<div class="cart-sidebar" id="cartSidebar">
  <div class="cart-header">
    <h3>Your Cart</h3>
    <button class="cart-close" onclick="toggleCart()">✕</button>
  </div>
  <div class="cart-body" id="cartBody">
    <div class="cart-empty">
      <div class="cart-empty-icon">🛒</div>
      <p>Your cart is empty</p>
    </div>
  </div>
  <div class="cart-footer">
    <div class="cart-subtotal">
      <span>Subtotal</span>
      <span id="cartTotal">€0.00</span>
    </div>
    <button class="checkout-btn">Proceed to Checkout →</button>
    <div class="checkout-note">🔒 Secure checkout · Free delivery</div>
  </div>
</div>

<!-- TOAST -->
<div class="toast" id="toast">
  <span class="toast-icon">🛒</span>
  <span id="toastMsg">Added to cart!</span>
</div>

<!-- ═══════════════════════════════ PAGES ═══════════════════════════════ -->

<!-- HOME PAGE -->
<div class="page active" id="page-home">

  <!-- HERO -->
  <section class="hero">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>
    <div class="hero-content">
      <div class="hero-badge">
        <div class="hero-badge-dot"></div>
        New Generation Smart Car Systems
      </div>
      <h1>Upgrade Your Car<br><em>Instantly.</em></h1>
      <p class="hero-sub">Wireless Apple CarPlay & Android Auto for VW, SEAT, and Skoda. No wires. No complicated setup. Just connect.</p>
      <div class="hero-ctas">
        <a href="#" class="btn-primary" onclick="showPage('catalog')">Shop Now →</a>
        <a href="#" class="btn-secondary" onclick="document.getElementById('features-section').scrollIntoView({behavior:'smooth'})">See Features</a>
      </div>
    </div>

    <div class="hero-dashboard">
      <div class="hero-dashboard-img">
        <div class="dashboard-mockup">
          <div class="dash-card">
            <div class="dash-card-icon blue">📱</div>
            <div class="dash-card-label">CarPlay</div>
            <div class="dash-card-value">Connected</div>
          </div>
          <div class="dash-center">
            <div class="dash-map">
              <div class="dash-map-pin"></div>
            </div>
            <div class="dash-carplay">
              <div class="carplay-logo">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
                Now Playing
              </div>
              <span style="color:rgba(255,255,255,0.4);font-size:11px">Wireless</span>
            </div>
          </div>
          <div class="dash-card">
            <div class="dash-card-icon green">🔊</div>
            <div class="dash-card-label">Bluetooth</div>
            <div class="dash-card-value">Active</div>
          </div>
          <div class="dash-card">
            <div class="dash-card-icon purple">🛰</div>
            <div class="dash-card-label">GPS</div>
            <div class="dash-card-value">Live</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- BRAND COMPATIBILITY -->
  <div class="brands">
    <div class="brands-inner">
      <span class="brands-label">Compatible With</span>
      <div class="brand-chip"><div class="brand-chip-dot"></div>Volkswagen</div>
      <div class="brand-chip"><div class="brand-chip-dot"></div>SEAT</div>
      <div class="brand-chip"><div class="brand-chip-dot"></div>Škoda</div>
      <div class="brand-chip soon"><div class="brand-chip-dot"></div>Ford</div>
      <div class="brand-chip soon"><div class="brand-chip-dot"></div>Renault</div>
      <div class="brand-chip soon" style="font-size:12px"><div class="brand-chip-dot"></div>More soon →</div>
    </div>
  </div>

  <!-- FEATURED PRODUCTS -->
  <section style="padding:100px 24px;background:white;">
    <div class="container">
      <div class="section-header">
        <div class="section-eyebrow">Our Products</div>
        <div class="section-title">Built for <em>your</em> car.</div>
        <p class="section-sub">Engineered for European vehicles from 2003–2013. Drop-in fit, no cutting, no drilling.</p>
      </div>

      <div class="products-grid">
        <div class="product-card" onclick="openProduct(0)">
          <div class="product-card-badge blue">Best Seller</div>
          <div class="product-card-img">
            <div class="product-img-mockup">
              <div class="product-img-screen">
                <div class="screen-icon">🚗</div>
                <div class="screen-ui">
                  <div class="screen-bar active"></div>
                  <div class="screen-bar w80"></div>
                  <div class="screen-bar w50"></div>
                  <div class="screen-bar active" style="width:40%"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="product-card-body">
            <div class="product-card-category">VW / SEAT / Skoda · 2003–2013</div>
            <div class="product-card-name">CarPlay Pro 2G</div>
            <div class="product-card-desc">Wireless Apple CarPlay & Android Auto. 2GB RAM / 32GB Storage. Perfect for daily use.</div>
            <div class="product-card-footer">
              <div>
                <span class="product-price">€179</span>
                <span class="product-price-original">€229</span>
              </div>
              <button class="btn-add-cart" onclick="event.stopPropagation();addToCart(0,'2GB/32GB')">Add to Cart</button>
            </div>
          </div>
        </div>

        <div class="product-card" onclick="openProduct(1)">
          <div class="product-card-badge gold">Premium</div>
          <div class="product-card-img" style="background:linear-gradient(135deg,#e8e0d0,#d0c4a8)">
            <div class="product-img-mockup" style="background:linear-gradient(135deg,#2a2010,#1a1508)">
              <div class="product-img-screen">
                <div class="screen-icon">⚡</div>
                <div class="screen-ui">
                  <div class="screen-bar active"></div>
                  <div class="screen-bar active w80"></div>
                  <div class="screen-bar w50"></div>
                  <div class="screen-bar active"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="product-card-body">
            <div class="product-card-category">VW / SEAT / Skoda · 2003–2013</div>
            <div class="product-card-name">CarPlay Pro 4G</div>
            <div class="product-card-desc">4GB RAM / 64GB Storage. Enhanced performance, faster maps, smoother streaming.</div>
            <div class="product-card-footer">
              <div>
                <span class="product-price">€229</span>
                <span class="product-price-original">€279</span>
              </div>
              <button class="btn-add-cart" onclick="event.stopPropagation();addToCart(1,'4GB/64GB')">Add to Cart</button>
            </div>
          </div>
        </div>

        <div class="product-card" style="background:var(--near-black);color:white;">
          <div class="product-card-badge" style="background:rgba(255,255,255,0.15);color:white;">Coming Soon</div>
          <div class="product-card-img" style="background:linear-gradient(135deg,#1a1a2e,#0d0d1a)">
            <div style="display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,0.3);font-size:13px;padding:40px;">
              <div style="font-size:48px">🔮</div>
              <div>Ultra Smart System</div>
              <div style="font-size:11px">8GB / 128GB</div>
            </div>
          </div>
          <div class="product-card-body">
            <div class="product-card-category" style="color:rgba(255,255,255,0.3)">All Brands · 2003–Present</div>
            <div class="product-card-name" style="color:white">CarPlay Ultra</div>
            <div class="product-card-desc" style="color:rgba(255,255,255,0.45)">The next generation. 8GB RAM, AI voice control, over-the-air updates. Register your interest.</div>
            <div class="product-card-footer">
              <div>
                <span class="product-price" style="color:rgba(255,255,255,0.4)">From €349</span>
              </div>
              <button class="btn-add-cart" style="background:rgba(255,255,255,0.1);color:white;" onclick="showToast('📧 Added to waitlist!')">Notify Me</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- WHY CHOOSE US -->
  <section class="why" id="features-section">
    <div class="container">
      <div class="section-header">
        <div class="section-eyebrow" style="color:rgba(0,113,227,0.8)">Why AutoSystems</div>
        <div class="section-title">Technology that <em>belongs</em> in your car.</div>
        <p class="section-sub" style="color:rgba(255,255,255,0.45)">We design smart in-car systems for drivers who want modern technology without the dealership price.</p>
      </div>

      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">📱</div>
          <div class="feature-title">Wireless CarPlay</div>
          <div class="feature-desc">Connect your iPhone wirelessly the moment you get in. No cables, no hassle — just music, navigation, and calls.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🤖</div>
          <div class="feature-title">Android Auto</div>
          <div class="feature-desc">Full Android Auto support for Google Maps, Waze, Spotify, and voice control. Wireless and instant.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🛰</div>
          <div class="feature-title">GPS Navigation</div>
          <div class="feature-desc">Integrated GPS with offline maps. Never worry about signal again on rural Irish roads.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🎵</div>
          <div class="feature-title">Music Streaming</div>
          <div class="feature-desc">Spotify, Apple Music, YouTube Music — all on your dashboard, with hands-free voice controls.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📞</div>
          <div class="feature-title">Hands-Free Calls</div>
          <div class="feature-desc">Crystal-clear Bluetooth calling through your car's speakers. Siri and Google Assistant ready.</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⚙️</div>
          <div class="feature-title">Plug & Play Install</div>
          <div class="feature-desc">No special tools. Swap your old head unit in under 30 minutes with our step-by-step guide.</div>
        </div>
      </div>
    </div>
  </section>

  <!-- INSTALLATION -->
  <section class="install">
    <div class="container">
      <div class="install-grid">
        <div class="install-visual">
          <div class="install-phone">
            <div class="install-phone-screen">
              <div class="install-phone-icon">📲</div>
              <div class="install-phone-text">Follow our step-by-step installation guide</div>
              <div style="width:100%;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;margin-top:8px">
                <div style="width:65%;height:100%;background:var(--accent);border-radius:2px"></div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="section-eyebrow">Installation</div>
          <div class="section-title">Ready in <em>30 minutes.</em></div>
          <p class="section-sub" style="margin-bottom:40px">No mechanic needed. Our systems are designed to slot perfectly into your existing dashboard.</p>

          <div class="install-steps">
            <div class="install-step">
              <div class="step-num">1</div>
              <div class="step-content">
                <h4>Remove the old head unit</h4>
                <p>Use the supplied removal keys to safely extract your existing radio. Takes about 5 minutes.</p>
              </div>
            </div>
            <div class="install-step">
              <div class="step-num">2</div>
              <div class="step-content">
                <h4>Connect the harness</h4>
                <p>Plug in the pre-wired ISO harness. Colour-coded connectors — no soldering, no cutting wires.</p>
              </div>
            </div>
            <div class="install-step">
              <div class="step-num">3</div>
              <div class="step-content">
                <h4>Slide in your AutoSystem</h4>
                <p>It clicks right into the existing DIN slot. Perfectly flush with your dashboard.</p>
              </div>
            </div>
            <div class="install-step">
              <div class="step-num">4</div>
              <div class="step-content">
                <h4>Connect & drive</h4>
                <p>Power on, connect your phone wirelessly, and you're ready. That's genuinely it.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- COMPATIBILITY -->
  <section style="padding:100px 24px; background:white;">
    <div class="container">
      <div class="section-header centered">
        <div class="section-eyebrow">Compatibility</div>
        <div class="section-title">Your car, <em>upgraded.</em></div>
        <p class="section-sub">Our systems are precisely engineered for specific vehicle models to guarantee a perfect fit.</p>
      </div>

      <div class="compat-grid">
        <div class="compat-card">
          <div class="compat-car">🚗</div>
          <div class="compat-brand">Volkswagen Golf</div>
          <div class="compat-years">Mk4 · 2003–2008</div>
          <div class="compat-status available">✓ Available</div>
        </div>
        <div class="compat-card">
          <div class="compat-car">🚙</div>
          <div class="compat-brand">VW Passat</div>
          <div class="compat-years">B5/B6 · 2001–2010</div>
          <div class="compat-status available">✓ Available</div>
        </div>
        <div class="compat-card">
          <div class="compat-car">🏎</div>
          <div class="compat-brand">SEAT Ibiza</div>
          <div class="compat-years">Mk3/4 · 2002–2012</div>
          <div class="compat-status available">✓ Available</div>
        </div>
        <div class="compat-card">
          <div class="compat-car">🚘</div>
          <div class="compat-brand">SEAT Leon</div>
          <div class="compat-years">Mk1/2 · 2000–2012</div>
          <div class="compat-status available">✓ Available</div>
        </div>
        <div class="compat-card">
          <div class="compat-car">🚔</div>
          <div class="compat-brand">Škoda Octavia</div>
          <div class="compat-years">Mk1/2 · 2000–2013</div>
          <div class="compat-status available">✓ Available</div>
        </div>
        <div class="compat-card">
          <div class="compat-car">🚕</div>
          <div class="compat-brand">Škoda Fabia</div>
          <div class="compat-years">Mk1/2 · 2000–2014</div>
          <div class="compat-status available">✓ Available</div>
        </div>
        <div class="compat-card" style="opacity:0.6">
          <div class="compat-car">🚐</div>
          <div class="compat-brand">Ford Focus</div>
          <div class="compat-years">Mk2/3 · 2005–2015</div>
          <div class="compat-status coming">⏳ Coming Soon</div>
        </div>
        <div class="compat-card" style="opacity:0.6">
          <div class="compat-car">🚌</div>
          <div class="compat-brand">Renault Megane</div>
          <div class="compat-years">Mk2/3 · 2004–2015</div>
          <div class="compat-status coming">⏳ Coming Soon</div>
        </div>
      </div>

      <p style="text-align:center;margin-top:40px;font-size:14px;color:var(--grey)">Not sure if your car is compatible? <a href="#" onclick="showPage('contact')" style="color:var(--accent);text-decoration:none;font-weight:500">Ask us →</a></p>
    </div>
  </section>

  <!-- REVIEWS -->
  <section style="padding:100px 24px; background:var(--off-white);">
    <div class="container">
      <div class="section-header centered">
        <div class="section-eyebrow">Reviews</div>
        <div class="section-title">What drivers <em>say.</em></div>
      </div>

      <div class="reviews-grid">
        <div class="review-card">
          <div class="review-stars">★★★★★</div>
          <div class="review-text">"Absolutely transformed my Golf Mk5. The wireless CarPlay works flawlessly — I couldn't believe how easy the installation was. Best €179 I've spent on my car."</div>
          <div class="review-author">
            <div class="review-avatar" style="background:linear-gradient(135deg,#667eea,#764ba2)">M</div>
            <div>
              <div class="review-name">Michael O'Brien</div>
              <div class="review-car">VW Golf Mk5 · Dublin, Ireland</div>
            </div>
          </div>
        </div>

        <div class="review-card">
          <div class="review-stars">★★★★★</div>
          <div class="review-text">"Ordered on Tuesday, arrived Thursday. Took me 25 minutes to install. Now I have Google Maps and Spotify in my Skoda Octavia. This is incredible value."</div>
          <div class="review-author">
            <div class="review-avatar" style="background:linear-gradient(135deg,#f093fb,#f5576c)">A</div>
            <div>
              <div class="review-name">Anna Kowalska</div>
              <div class="review-car">Škoda Octavia Mk2 · Cork, Ireland</div>
            </div>
          </div>
        </div>

        <div class="review-card">
          <div class="review-stars">★★★★★</div>
          <div class="review-text">"My SEAT Leon looks like a brand new car inside. The display quality is excellent and the touch response is smooth. Customer support was also incredibly helpful."</div>
          <div class="review-author">
            <div class="review-avatar" style="background:linear-gradient(135deg,#4facfe,#00f2fe)">T</div>
            <div>
              <div class="review-name">Tomasz Wiśniewski</div>
              <div class="review-car">SEAT Leon Mk2 · Galway, Ireland</div>
            </div>
          </div>
        </div>

        <div class="review-card">
          <div class="review-stars">★★★★★</div>
          <div class="review-text">"I was sceptical at first, but the build quality is genuinely premium. Not a single rattle or issue after 3 months. Waze on my dashboard every day, wireless. Brilliant."</div>
          <div class="review-author">
            <div class="review-avatar" style="background:linear-gradient(135deg,#43e97b,#38f9d7)">S</div>
            <div>
              <div class="review-name">Seán Murphy</div>
              <div class="review-car">VW Passat B6 · Limerick, Ireland</div>
            </div>
          </div>
        </div>

        <div class="review-card">
          <div class="review-stars">★★★★★</div>
          <div class="review-text">"Got the 4GB version for my SEAT Ibiza. Maps load instantly, streaming is seamless, no lag. Honestly better than systems in much newer cars. Very impressed."</div>
          <div class="review-author">
            <div class="review-avatar" style="background:linear-gradient(135deg,#fa709a,#fee140)">L</div>
            <div>
              <div class="review-name">Laura Smyth</div>
              <div class="review-car">SEAT Ibiza Mk4 · Waterford, Ireland</div>
            </div>
          </div>
        </div>

        <div class="review-card">
          <div class="review-stars">★★★★★</div>
          <div class="review-text">"I bought it as a gift for my husband's Škoda Fabia. He was speechless. The screen looks so clean in the dashboard. Installation video was clear and simple to follow."</div>
          <div class="review-author">
            <div class="review-avatar" style="background:linear-gradient(135deg,#a18cd1,#fbc2eb)">K</div>
            <div>
              <div class="review-name">Katarzyna Nowak</div>
              <div class="review-car">Škoda Fabia Mk2 · Belfast, Ireland</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ PREVIEW -->
  <section class="faq">
    <div class="container">
      <div class="section-header centered">
        <div class="section-eyebrow">FAQ</div>
        <div class="section-title">Common <em>questions.</em></div>
      </div>

      <div class="faq-list">
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFaq(this)">
            Will this fit my car? <span class="faq-q-icon">+</span>
          </button>
          <div class="faq-a">Our systems are designed for specific car models. Check our compatibility list above, or contact us with your car's registration and we'll confirm instantly. Currently we support VW, SEAT, and Škoda models from 2003–2013.</div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFaq(this)">
            Is installation really that easy? <span class="faq-q-icon">+</span>
          </button>
          <div class="faq-a">Yes. Our systems use the standard DIN/2-DIN format that your existing radio occupies. You use the supplied removal tools, unplug the old unit, plug in the ISO harness, and slide ours in. We include a step-by-step guide and video walkthrough with every order.</div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFaq(this)">
            How does wireless CarPlay work? <span class="faq-q-icon">+</span>
          </button>
          <div class="faq-a">The system creates a Wi-Fi hotspot that your iPhone connects to automatically when it detects the car's Bluetooth. After the first setup, it connects within seconds of you getting in — no plugging in required.</div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFaq(this)">
            What is your return policy? <span class="faq-q-icon">+</span>
          </button>
          <div class="faq-a">We offer 30-day hassle-free returns. Return in original packaging for a full refund. Contact us at hello@autosystems.ie to start a return.</div>
        </div>
        <div class="faq-item">
          <button class="faq-q" onclick="toggleFaq(this)">
            How quickly will I receive my order? <span class="faq-q-icon">+</span>
          </button>
          <div class="faq-a">Orders within Ireland typically arrive in 2–4 business days with free standard shipping. Tracked express options are available at checkout. European delivery takes 4–8 business days.</div>
        </div>
      </div>

      <div style="text-align:center;margin-top:40px">
        <a href="#" onclick="showPage('faq-page')" style="color:var(--accent);font-size:14px;font-weight:500;text-decoration:none">View all FAQs →</a>
      </div>
    </div>
  </section>


</div><!-- /home -->


<!-- PRODUCT CATALOG -->
<div class="page" id="page-catalog">
  <section style="padding:100px 24px; background:var(--off-white)">
    <div class="container">
      <div style="margin-bottom:52px">
        <div class="section-eyebrow">All Products</div>
        <div class="section-title">Shop <em>all systems.</em></div>
        <p class="section-sub">Genuine wireless CarPlay &amp; Android Auto systems for VW, SEAT, and Skoda vehicles.</p>
      </div>
      <div class="products-grid">

        <div class="product-card" onclick="openProduct(0)">
          <div class="product-card-badge blue">Best Seller</div>
          <div class="product-card-img">
            <div class="product-img-mockup">
              <div class="product-img-screen">
                <div class="screen-icon">🚗</div>
                <div class="screen-ui">
                  <div class="screen-bar active"></div>
                  <div class="screen-bar w80"></div>
                  <div class="screen-bar w50"></div>
                  <div class="screen-bar active" style="width:40%"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="product-card-body">
            <div class="product-card-category">VW / SEAT / Skoda · 2003–2013</div>
            <div class="product-card-name">CarPlay Pro 2G</div>
            <div class="product-card-desc">Wireless Apple CarPlay &amp; Android Auto. 2GB RAM / 32GB Storage. Perfect for daily use.</div>
            <div class="product-card-footer">
              <div><span class="product-price">€179</span><span class="product-price-original">€229</span></div>
              <button class="btn-add-cart" onclick="event.stopPropagation();addToCart(0,'2GB/32GB')">Add to Cart</button>
            </div>
          </div>
        </div>

        <div class="product-card" onclick="openProduct(1)">
          <div class="product-card-badge gold">Premium</div>
          <div class="product-card-img" style="background:linear-gradient(135deg,#e8e0d0,#d0c4a8)">
            <div class="product-img-mockup" style="background:linear-gradient(135deg,#2a2010,#1a1508)">
              <div class="product-img-screen">
                <div class="screen-icon">⚡</div>
                <div class="screen-ui">
                  <div class="screen-bar active"></div>
                  <div class="screen-bar active w80"></div>
                  <div class="screen-bar w50"></div>
                  <div class="screen-bar active"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="product-card-body">
            <div class="product-card-category">VW / SEAT / Skoda · 2003–2013</div>
            <div class="product-card-name">CarPlay Pro 4G</div>
            <div class="product-card-desc">4GB RAM / 64GB Storage. Enhanced performance, faster maps, smoother streaming.</div>
            <div class="product-card-footer">
              <div><span class="product-price">€229</span><span class="product-price-original">€279</span></div>
              <button class="btn-add-cart" onclick="event.stopPropagation();addToCart(1,'4GB/64GB')">Add to Cart</button>
            </div>
          </div>
        </div>

        <div class="product-card" style="background:var(--near-black);color:white;">
          <div class="product-card-badge" style="background:rgba(255,255,255,0.15);color:white;">Coming Soon</div>
          <div class="product-card-img" style="background:linear-gradient(135deg,#1a1a2e,#0d0d1a)">
            <div style="display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,0.3);font-size:13px;padding:40px;">
              <div style="font-size:48px">🔮</div>
              <div>Ultra Smart System</div>
              <div style="font-size:11px">8GB / 128GB</div>
            </div>
          </div>
          <div class="product-card-body">
            <div class="product-card-category" style="color:rgba(255,255,255,0.3)">All Brands · 2003–Present</div>
            <div class="product-card-name" style="color:white">CarPlay Ultra</div>
            <div class="product-card-desc" style="color:rgba(255,255,255,0.45)">Next generation. 8GB RAM, AI voice control, over-the-air updates. Register your interest.</div>
            <div class="product-card-footer">
              <div><span class="product-price" style="color:rgba(255,255,255,0.4)">From €349</span></div>
              <button class="btn-add-cart" style="background:rgba(255,255,255,0.1);color:white;" onclick="showToast('📧 Added to waitlist!')">Notify Me</button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
</div>

<div class="page" id="page-about">
  <div class="about-hero">
    <div class="container" style="max-width:700px;text-align:center">
      <div class="section-eyebrow" style="color:rgba(0,113,227,0.7)">About AutoSystems</div>
      <div class="section-title" style="color:white">We believe <em>every car</em> deserves modern technology.</div>
      <p style="color:rgba(255,255,255,0.5);font-size:17px;font-weight:300;line-height:1.8;margin-top:16px">Founded with one mission: make premium in-car technology accessible to every driver, regardless of how old their vehicle is.</p>
    </div>
  </div>

  <section style="padding:100px 24px;">
    <div class="container">

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px">
        <div>
          <div class="section-eyebrow">Our Story</div>
          <div class="section-title">Built from <em>frustration.</em></div>
          <p style="color:var(--grey);font-size:16px;line-height:1.8;margin-top:16px">We got tired of watching drivers in perfectly good VWs, SEATs, and Škodas miss out on technology that makes modern driving safer and more enjoyable.</p>
          <p style="color:var(--grey);font-size:16px;line-height:1.8;margin-top:12px">Dealerships wanted thousands to upgrade. Third-party options were poorly made or simply didn't fit. So we built our own — designed to fit precisely, work from day one, and install without a workshop in under 30 minutes.</p>
          <p style="color:var(--grey);font-size:16px;line-height:1.8;margin-top:12px">AutoSystems is based in Ireland and ships across Europe. Every product we sell is one we'd put in our own cars.</p>
        </div>
        <div style="background:linear-gradient(135deg,#1a1a2e,#0d0f1a);border-radius:24px;height:360px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:40px;box-shadow:var(--shadow-strong)">
          <div style="font-size:52px">🚗</div>
          <div style="color:rgba(255,255,255,0.55);font-size:15px;text-align:center;line-height:1.7;font-weight:300">Smart technology<br>for every driveway</div>
          <div style="display:flex;gap:12px;flex-wrap:wrap;justify-content:center">
            <div style="background:rgba(0,113,227,0.2);border:1px solid rgba(0,113,227,0.3);border-radius:10px;padding:9px 16px;font-size:13px;color:rgba(255,255,255,0.75)">📱 CarPlay</div>
            <div style="background:rgba(48,209,88,0.15);border:1px solid rgba(48,209,88,0.25);border-radius:10px;padding:9px 16px;font-size:13px;color:rgba(255,255,255,0.75)">🤖 Android Auto</div>
          </div>
        </div>
      </div>

      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:60px">
        <div style="background:var(--off-white);border-radius:20px;padding:32px;text-align:center">
          <div style="font-family:var(--font-display);font-size:44px;font-weight:400;color:var(--black);margin-bottom:6px">500+</div>
          <div style="font-size:13px;color:var(--grey)">Happy Customers</div>
        </div>
        <div style="background:var(--off-white);border-radius:20px;padding:32px;text-align:center">
          <div style="font-family:var(--font-display);font-size:44px;font-weight:400;color:var(--black);margin-bottom:6px">4.9★</div>
          <div style="font-size:13px;color:var(--grey)">Average Rating</div>
        </div>
        <div style="background:var(--off-white);border-radius:20px;padding:32px;text-align:center">
          <div style="font-family:var(--font-display);font-size:44px;font-weight:400;color:var(--black);margin-bottom:6px">30</div>
          <div style="font-size:13px;color:var(--grey)">Day Easy Returns</div>
        </div>
      </div>

      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:60px">
        <div style="background:var(--off-white);border-radius:18px;padding:32px">
          <div style="font-size:28px;margin-bottom:12px">🎯</div>
          <h3 style="font-size:16px;font-weight:600;margin-bottom:8px">Our Mission</h3>
          <p style="font-size:14px;color:var(--grey);line-height:1.8">Make premium in-car technology accessible to every driver at a fair price — not just those buying a new car.</p>
        </div>
        <div style="background:var(--off-white);border-radius:18px;padding:32px">
          <div style="font-size:28px;margin-bottom:12px">🔬</div>
          <h3 style="font-size:16px;font-weight:600;margin-bottom:8px">Quality First</h3>
          <p style="font-size:14px;color:var(--grey);line-height:1.8">Every product is tested for compatibility before we list a single vehicle model. We don't sell untested fitments.</p>
        </div>
        <div style="background:var(--off-white);border-radius:18px;padding:32px">
          <div style="font-size:28px;margin-bottom:12px">📦</div>
          <h3 style="font-size:16px;font-weight:600;margin-bottom:8px">Fast Delivery</h3>
          <p style="font-size:14px;color:var(--grey);line-height:1.8">Shipped from Ireland. Most orders arrive in 2–4 business days, fully tracked with eco-friendly packaging.</p>
        </div>
        <div style="background:var(--off-white);border-radius:18px;padding:32px">
          <div style="font-size:28px;margin-bottom:12px">🤝</div>
          <h3 style="font-size:16px;font-weight:600;margin-bottom:8px">Real Support</h3>
          <p style="font-size:14px;color:var(--grey);line-height:1.8">When you email us, you speak to someone who knows the product. We respond within 4 hours on weekdays.</p>
        </div>
      </div>

      <div style="background:var(--near-black);border-radius:24px;padding:60px 40px;color:white;text-align:center">
        <div class="section-title" style="color:white;margin-bottom:12px">Ready to upgrade <em>your</em> car?</div>
        <p style="color:rgba(255,255,255,0.5);font-size:16px;max-width:460px;margin:0 auto 32px;line-height:1.8;font-weight:300">Join hundreds of satisfied drivers across Ireland and Europe who've already made the switch.</p>
        <a href="#" onclick="showPage('catalog')" class="btn-primary" style="display:inline-flex">Browse Products →</a>
      </div>

    </div>
  </section>
</div>

<div class="page" id="page-faq-page">
  <section style="padding:100px 24px; background:var(--off-white)">
    <div class="container">
      <div style="max-width:720px;margin:0 auto">

        <div class="section-eyebrow">FAQ</div>
        <div class="section-title">Frequently asked <em>questions.</em></div>
        <p class="section-sub" style="margin-bottom:52px">Everything you need to know about our products, ordering, and installation.</p>

        <div style="font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);margin-bottom:12px">📦 Orders &amp; Delivery</div>
        <div class="faq-list" style="margin-bottom:36px">
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">How long does delivery take? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">Standard delivery within Ireland is free and takes 2–4 business days. Express (1–2 days) is available at checkout. European deliveries take 4–8 business days. All orders include a tracking number sent by email within 24 hours of dispatch.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">How will I know my order has shipped? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">You'll get an order confirmation email immediately, then a separate dispatch email with your tracking number once your order ships — usually within 1 business day.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">Do you ship outside Ireland? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">Yes — we ship to all EU countries and the UK. Costs and times are calculated at checkout. All international orders are fully tracked.</div>
          </div>
        </div>

        <div style="font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);margin-bottom:12px">🚗 Compatibility &amp; Fitment</div>
        <div class="faq-list" style="margin-bottom:36px">
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">Will this fit my specific car? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">Our systems fit the standard DIN/2-DIN radio slot. Currently supported: VW (Golf Mk4/5, Passat B5/B6), SEAT (Ibiza, Leon), and Škoda (Octavia, Fabia) from 2003–2013. Email us your reg plate and we'll confirm within a few hours.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">What if my vehicle isn't listed? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">Contact us with your vehicle details. We're actively developing support for Ford, Renault, Opel, and Peugeot. Register your interest and we'll notify you when your vehicle is supported.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">Will it work with my steering wheel controls? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">Yes, for most supported vehicles. The included steering wheel control adapter preserves your existing volume, track skip, and call controls. Confirm with us before ordering if unsure.</div>
          </div>
        </div>

        <div style="font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);margin-bottom:12px">⚙️ Product &amp; Installation</div>
        <div class="faq-list" style="margin-bottom:36px">
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">How does wireless CarPlay work? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">After the first pairing, your iPhone connects automatically via Wi-Fi when it detects the car's Bluetooth. CarPlay launches the moment you get in — no cable ever needed.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">What's the difference between 2GB and 4GB? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">The 2GB/32GB handles daily use perfectly — navigation, streaming, calls. The 4GB/64GB offers faster app loading, smoother multitasking, and more storage for offline maps. If you use heavy navigation apps daily, go 4GB.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">Do I need a mechanic to install? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">No. Installation takes around 30 minutes with the included removal tools, ISO harness, and step-by-step guide. If you get stuck, email us with photos and we'll help.</div>
          </div>
        </div>

        <div style="font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);margin-bottom:12px">↩️ Returns &amp; Support</div>
        <div class="faq-list" style="margin-bottom:40px">
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">What is your return policy? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">30-day hassle-free returns. Return in original packaging for a full refund. Email hello@autosystems.ie with your order number and we'll handle it quickly.</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" onclick="toggleFaq(this)">My item arrived damaged. What do I do? <span class="faq-q-icon">+</span></button>
            <div class="faq-a">Contact us within 48 hours with your order number and photos. We'll arrange a free replacement or full refund immediately — no lengthy back-and-forth.</div>
          </div>
        </div>

        <div style="background:var(--white);border:1px solid rgba(0,0,0,0.07);border-radius:20px;padding:32px;text-align:center">
          <div style="font-size:28px;margin-bottom:12px">💬</div>
          <h3 style="font-size:17px;font-weight:500;margin-bottom:8px">Still have a question?</h3>
          <p style="font-size:14px;color:var(--grey);margin-bottom:20px">We respond within 4 hours on weekdays.</p>
          <a href="#" onclick="showPage('contact')" class="btn-primary" style="display:inline-flex;background:var(--black);color:white;">Contact Us →</a>
        </div>

      </div>
    </div>
  </section>
</div>

<div class="page" id="page-contact">
  <section style="padding:100px 24px;">
    <div class="container">
      <div class="section-eyebrow">Get in Touch</div>
      <div class="section-title" style="margin-bottom:12px">We're here to <em>help.</em></div>
      <p class="section-sub" style="margin-bottom:60px">Whether it's a compatibility question, an order query, or installation support — we respond fast and we know our products.</p>

      <div class="contact-grid">
        <div style="background:var(--off-white);border-radius:20px;padding:36px">
          <h3 style="font-size:16px;font-weight:600;margin-bottom:24px;letter-spacing:-0.01em">Send us a message</h3>
          <div class="contact-form">
            <div class="form-field">
              <label class="form-label">Your Name</label>
              <input class="form-input" type="text" placeholder="John Murphy">
            </div>
            <div class="form-field">
              <label class="form-label">Email Address</label>
              <input class="form-input" type="email" placeholder="john@example.com">
            </div>
            <div class="form-field">
              <label class="form-label">Your Vehicle <span style="color:var(--grey);font-weight:400">(optional)</span></label>
              <input class="form-input" type="text" placeholder="e.g. VW Golf Mk5 2007">
            </div>
            <div class="form-field">
              <label class="form-label">Subject</label>
              <select class="form-input" style="cursor:pointer">
                <option>Compatibility question</option>
                <option>Order query</option>
                <option>Installation help</option>
                <option>Return or refund</option>
                <option>Other</option>
              </select>
            </div>
            <div class="form-field">
              <label class="form-label">Message</label>
              <textarea class="form-textarea" placeholder="Tell us how we can help..."></textarea>
            </div>
            <button class="form-submit" onclick="showToast('✅ Message sent! We'll reply within 4 hours.')">Send Message →</button>
            <p style="font-size:12px;color:var(--grey)">We respond within 4 business hours, Monday–Friday.</p>
          </div>
        </div>

        <div class="contact-info">
          <div style="background:var(--near-black);border-radius:20px;padding:28px;color:white">
            <div style="font-size:26px;margin-bottom:14px">📧</div>
            <h4 style="font-size:15px;font-weight:500;color:white;margin-bottom:6px">Email Us Directly</h4>
            <p style="font-size:15px;color:rgba(255,255,255,0.7)">hello@autosystems.ie</p>
            <p style="font-size:12px;color:rgba(255,255,255,0.35);margin-top:4px">For all enquiries</p>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">🕐</div>
            <div class="contact-info-content">
              <h4>Response Times</h4>
              <p>Monday–Friday: Within 4 hours<br>Saturday: Within 12 hours<br>Sunday: Next business day</p>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">🚗</div>
            <div class="contact-info-content">
              <h4>Compatibility Checks</h4>
              <p>Email your registration or vehicle details and we'll confirm compatibility for free — usually within the hour.</p>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">↩️</div>
            <div class="contact-info-content">
              <h4>Returns &amp; Refunds</h4>
              <p>Email your order number and a brief description. We'll get it sorted quickly — no lengthy back-and-forth.</p>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="contact-info-icon">🇮🇪</div>
            <div class="contact-info-content">
              <h4>Based in Ireland</h4>
              <p>AutoSystems Ireland · VAT Registered<br>Shipping across Europe</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<div class="page" id="page-shipping">
  <section style="padding:100px 24px;">
    <div class="container">
      <div class="policy-content">
        <h2>Shipping Policy</h2>
        <div class="updated">Last updated: May 2025</div>
        <h3>🇮🇪 Free Delivery — Ireland</h3>
        <p>All orders within the Republic of Ireland and Northern Ireland qualify for free standard delivery. Orders are dispatched within 1–2 business days of payment confirmation. Standard delivery takes 2–4 business days.</p>
        <h3>⚡ Express Delivery</h3>
        <p>Express tracked delivery (1–2 business days) is available at checkout for a small additional fee. Express orders placed before 12:00 noon on a business day are typically dispatched same day.</p>
        <h3>🇪🇺 European Delivery</h3>
        <p>We ship to all EU countries. Delivery times vary by destination, typically 4–8 business days. Shipping rates are calculated at checkout based on your location and order weight. All shipments include tracking.</p>
        <h3>📬 Tracking Your Order</h3>
        <p>A tracking number will be emailed to you within 24 hours of dispatch. Use the carrier tracking link emailed to you to monitor your shipment in real time.</p>
        <h3>📦 Packaging</h3>
        <p>All products are shipped in protective, branded packaging designed to keep your system safe in transit. We use eco-friendly materials where possible.</p>
      </div>
    </div>
  </section>
</div>

<!-- REFUND POLICY -->
<div class="page" id="page-refund">
  <section style="padding:100px 24px;">
    <div class="container">
      <div class="policy-content">
        <h2>Refund Policy</h2>
        <div class="updated">Last updated: May 2025</div>
        <h3>30-Day Returns</h3>
        <p>We offer a 30-day return window from the date of delivery. If you're not completely satisfied, contact us within 30 days for a full refund or exchange. Items must be returned in their original packaging and in unused condition.</p>
        <h3>Defective Items</h3>
        <p>If your item arrives defective or damaged, contact us within 48 hours with photos of the issue. We will arrange a free replacement shipment or full refund at your preference, including covering all return shipping costs.</p>
        <h3>How to Initiate a Return</h3>
        <p>Email hello@autosystems.ie with your order number and reason for return. We will reply within 1 business day with return instructions and a pre-paid label for eligible returns.</p>
        <h3>Refund Processing</h3>
        <p>Refunds are processed within 3–5 business days of receiving the returned item. The refund will be issued to your original payment method. Bank processing time may add an additional 3–5 business days.</p>
      </div>
    </div>
  </section>
</div>

<!-- PRIVACY POLICY -->
<div class="page" id="page-privacy">
  <section style="padding:100px 24px;">
    <div class="container">
      <div class="policy-content">
        <h2>Privacy Policy</h2>
        <div class="updated">Last updated: May 2025 · AutoSystems Ireland</div>
        <h3>Information We Collect</h3>
        <p>We collect information you provide when placing an order (name, email, address, payment information) and information collected automatically (IP address, browser type, pages visited). We do not store full payment card numbers.</p>
        <h3>How We Use Your Information</h3>
        <p>Your information is used to process and fulfill orders, send shipping updates, and provide customer support. With your consent, we may send you news about new products and offers. You can unsubscribe at any time.</p>
        <h3>Data Sharing</h3>
        <p>We do not sell your personal data. We share necessary information with shipping carriers to fulfill your order, and with payment processors for secure transactions. All third-party partners are GDPR compliant.</p>
        <h3>GDPR Rights</h3>
        <p>Under GDPR, you have the right to access, correct, or delete your personal data at any time. To exercise these rights, contact us at hello@autosystems.ie.</p>
        <h3>Cookies</h3>
        <p>We use essential cookies for shopping cart functionality and analytics cookies (with your consent) to understand how visitors use our site. You can manage cookie preferences in your browser settings.</p>
      </div>
    </div>
  </section>
</div>

<!-- TERMS OF SERVICE -->
<div class="page" id="page-terms">
  <section style="padding:100px 24px;">
    <div class="container">
      <div class="policy-content">
        <h2>Terms of Service</h2>
        <div class="updated">Last updated: May 2025 · AutoSystems Ireland</div>
        <h3>Agreement</h3>
        <p>By accessing our website and placing an order, you agree to these Terms of Service. These terms apply to all customers of AutoSystems Ireland.</p>
        <h3>Products</h3>
        <p>All products are described accurately to the best of our ability. Product images are representative. Compatibility information is provided in good faith but it is your responsibility to verify compatibility with your specific vehicle before ordering.</p>
        <h3>Pricing & Payment</h3>
        <p>All prices are in Euros (€) and include VAT where applicable. We reserve the right to change prices at any time. Payment is processed securely through our payment provider.</p>
        <h3>Installation</h3>
        <p>AutoSystems products are designed for self-installation. We are not liable for damage caused by incorrect installation. If you are unsure, we recommend consulting a qualified auto electrician.</p>
        <h3>Limitation of Liability</h3>
        <p>AutoSystems Ireland is not liable for any indirect, incidental, or consequential damages arising from product use. Our total liability shall not exceed the purchase price of the product.</p>
        <h3>Governing Law</h3>
        <p>These terms are governed by the laws of Ireland. Any disputes will be subject to the exclusive jurisdiction of the Irish courts.</p>
      </div>
    </div>
  </section>
</div>

<!-- FOOTER -->
<footer>
  <div class="footer-inner">
    <div class="footer-brand">
      <div class="logo" style="color:white;margin-bottom:12px">
        <div class="logo-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.236L20 8.472v7.056L12 19.764l-8-4.236V8.472L12 4.236z"/></svg></div>
        AutoSystems
      </div>
      <p>Premium wireless CarPlay & Android Auto systems for European vehicles. Upgrade your car instantly.</p>
      <div class="trust-badges" style="margin-top:20px">
        <div class="trust-badge">🔒 Secure Checkout</div>
        <div class="trust-badge">📦 Free Delivery</div>
        <div class="trust-badge">↩️ 30-Day Returns</div>
        </div>
    </div>

    <div class="footer-col">
      <h4>Shop</h4>
      <a href="#" onclick="showPage('catalog')">All Products</a>
      <a href="#">Compatible Vehicles</a>
    </div>

    <div class="footer-col">
      <h4>Support</h4>
      <a href="#" onclick="showPage('faq-page')">FAQ</a>
      <a href="#" onclick="showPage('contact')">Contact Us</a>
      <a href="#" onclick="showPage('shipping')">Shipping Info</a>
    </div>

    <div class="footer-col">
      <h4>Policies</h4>
      <a href="#" onclick="showPage('shipping')">Shipping Policy</a>
      <a href="#" onclick="showPage('refund')">Refund Policy</a>
      <a href="#" onclick="showPage('privacy')">Privacy Policy</a>
      <a href="#" onclick="showPage('terms')">Terms of Service</a>
    </div>
  </div>

  <div class="footer-bottom">
    <p>© 2025 AutoSystems Ireland. All rights reserved. VAT Registered.</p>
    <div class="footer-bottom-links">
      <a href="#" onclick="showPage('privacy')">Privacy</a>
      <a href="#" onclick="showPage('terms')">Terms</a>
      <a href="#" onclick="showPage('shipping')">Shipping</a>
      <a href="#" onclick="showPage('refund')">Returns</a>
    </div>
  </div>
</footer>

<!-- PRODUCT MODAL -->
<div class="modal-overlay" id="productModal" onclick="closeModal(event)">
  <div class="modal" style="position:relative" id="modalContent">
    <button class="modal-close" onclick="closeProductModal()">✕</button>

    <div class="modal-grid">
      <div>
        <div class="modal-img" id="modalImg">📱</div>
      </div>

      <div>
        <div style="font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px" id="modalCategory"></div>
        <div class="modal-product-name" id="modalName"></div>
        <div class="modal-price" id="modalPrice"></div>
        <div style="font-size:14px;color:var(--grey);line-height:1.8;margin-bottom:24px" id="modalDesc"></div>

        <div class="variants">
          <div class="variants-label">Storage & RAM</div>
          <div class="variant-options" id="variantOptions"></div>
        </div>

        <div class="selected-variant-info" id="selectedVariantInfo"></div>

        <button class="add-to-cart-big" id="addToCartBtn">Add to Cart</button>

        <div class="modal-trust">
          <div class="modal-trust-item">🚚 Free Delivery</div>
          <div class="modal-trust-item">↩️ 30-Day Returns</div>
          <div class="modal-trust-item">🔒 Secure Checkout</div>
        </div>

        <div class="specs-grid" id="specsGrid"></div>
      </div>
    </div>
  </div>
</div>

<script>
// ─── STATE ───
let cart = [];
let currentProduct = null;
let selectedVariant = '2GB/32GB';
let currentPage = 'home';

const products = [
  {
    id: 0,
    name: 'CarPlay Pro 2G',
    category: 'VW / SEAT / Skoda · 2003–2013',
    price: 179,
    originalPrice: 229,
    emoji: '🖥️',
    desc: 'The essential wireless upgrade. Brings Apple CarPlay, Android Auto, GPS navigation, and Bluetooth to your existing dashboard. Plug-and-play installation with the included harness and removal tools.',
    variants: [
      { label: '2GB / 32GB', price: 179 },
      { label: '4GB / 64GB', price: 229, extra: '+€50' }
    ],
    specs: [
      { label: 'RAM', value: '2GB / 4GB' },
      { label: 'Storage', value: '32GB / 64GB' },
      { label: 'CarPlay', value: 'Wireless' },
      { label: 'Android Auto', value: 'Wireless' },
      { label: 'Screen Size', value: '9" Touchscreen' },
      { label: 'GPS', value: 'Built-in' },
      { label: 'Bluetooth', value: '5.0' },
      { label: 'Voltage', value: '12V DC' }
    ]
  },
  {
    id: 1,
    name: 'CarPlay Pro 4G',
    category: 'VW / SEAT / Skoda · 2003–2013',
    price: 229,
    originalPrice: 279,
    emoji: '⚡',
    desc: 'Our premium model. Enhanced processor, more RAM, and double the storage means faster map loading, smoother app switching, and a more responsive driving experience. Highly recommended for power users.',
    variants: [
      { label: '4GB / 64GB', price: 229 },
      { label: '8GB / 128GB', price: 299, extra: '+€70' }
    ],
    specs: [
      { label: 'RAM', value: '4GB / 8GB' },
      { label: 'Storage', value: '64GB / 128GB' },
      { label: 'CarPlay', value: 'Wireless' },
      { label: 'Android Auto', value: 'Wireless' },
      { label: 'Screen Size', value: '9" Touchscreen' },
      { label: 'GPS', value: 'Built-in' },
      { label: 'Bluetooth', value: '5.0' },
      { label: 'Voltage', value: '12V DC' }
    ]
  }
];

// ─── PAGE ROUTING ───
function showPage(name) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  const page = document.getElementById('page-' + name);
  if (page) {
    page.classList.add('active');
    window.scrollTo(0, 0);
    if (mobileNavOpen) toggleMobileMenu();
    // Double rAF ensures browser has painted before we check visibility
    requestAnimationFrame(() => requestAnimationFrame(() => revealPage(page)));
  }
}

function revealPage(page) {
  const winH = window.innerHeight;
  const els = page.querySelectorAll('.reveal');
  // Immediately show everything above the fold
  els.forEach(el => {
    if (el.getBoundingClientRect().top < winH + 100) el.classList.add('visible');
  });
  // Observer for below-fold elements
  const hidden = page.querySelectorAll('.reveal:not(.visible)');
  if (hidden.length) {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }});
    }, { threshold: 0, rootMargin: '0px 0px -30px 0px' });
    hidden.forEach(el => obs.observe(el));
  }
}

// ─── PRODUCT MODAL ───
function openProduct(idx) {
  const p = products[idx];
  currentProduct = p;
  selectedVariant = p.variants[0].label;

  document.getElementById('modalImg').textContent = p.emoji;
  document.getElementById('modalCategory').textContent = p.category;
  document.getElementById('modalName').textContent = p.name;
  document.getElementById('modalPrice').textContent = '€' + p.price;
  document.getElementById('modalDesc').textContent = p.desc;

  const vo = document.getElementById('variantOptions');
  vo.innerHTML = '';
  p.variants.forEach((v, i) => {
    const btn = document.createElement('button');
    btn.className = 'variant-btn' + (i === 0 ? ' selected' : '');
    btn.textContent = v.label + (v.extra ? ' ' + v.extra : '');
    btn.onclick = () => selectVariant(v, btn);
    vo.appendChild(btn);
  });

  const sg = document.getElementById('specsGrid');
  sg.innerHTML = p.specs.map(s => `<div class="spec-item"><div class="spec-label">${s.label}</div><div class="spec-value">${s.value}</div></div>`).join('');

  document.getElementById('selectedVariantInfo').textContent = 'Selected: ' + p.variants[0].label;
  document.getElementById('addToCartBtn').onclick = () => { addToCart(idx, selectedVariant); closeProductModal(); };

  document.getElementById('productModal').classList.add('open');
  document.body.style.overflow = 'hidden';
}

function selectVariant(v, btn) {
  document.querySelectorAll('.variant-btn').forEach(b => b.classList.remove('selected'));
  btn.classList.add('selected');
  selectedVariant = v.label;
  document.getElementById('modalPrice').textContent = '€' + v.price;
  document.getElementById('selectedVariantInfo').textContent = 'Selected: ' + v.label;
}

function closeProductModal() {
  document.getElementById('productModal').classList.remove('open');
  document.body.style.overflow = '';
}

function closeModal(e) {
  if (e.target === document.getElementById('productModal')) closeProductModal();
}

// ─── CART ───
function addToCart(productIdx, variant) {
  const p = products[productIdx];
  const v = p.variants.find(vr => vr.label === variant) || p.variants[0];
  const existing = cart.find(i => i.id === productIdx && i.variant === v.label);
  if (existing) {
    existing.qty++;
  } else {
    cart.push({ id: productIdx, name: p.name, variant: v.label, price: v.price, qty: 1, emoji: p.emoji });
  }
  updateCartUI();
  showToast('🛒 ' + p.name + ' added to cart!');
}

function updateCartUI() {
  const count = cart.reduce((a, i) => a + i.qty, 0);
  document.getElementById('cartCount').textContent = count;

  const total = cart.reduce((a, i) => a + i.price * i.qty, 0);
  document.getElementById('cartTotal').textContent = '€' + total.toFixed(2);

  const body = document.getElementById('cartBody');
  if (cart.length === 0) {
    body.innerHTML = '<div class="cart-empty"><div class="cart-empty-icon">🛒</div><p>Your cart is empty</p></div>';
    return;
  }

  body.innerHTML = cart.map((item, idx) => `
    <div class="cart-item">
      <div class="cart-item-img">${item.emoji}</div>
      <div style="flex:1">
        <div class="cart-item-name">${item.name}</div>
        <div class="cart-item-variant">${item.variant}</div>
        <div class="cart-item-price">€${item.price.toFixed(2)}</div>
        <div class="cart-qty">
          <button class="qty-btn" onclick="changeQty(${idx}, -1)">−</button>
          <span class="qty-val">${item.qty}</span>
          <button class="qty-btn" onclick="changeQty(${idx}, 1)">+</button>
        </div>
      </div>
    </div>
  `).join('');
}

function changeQty(idx, delta) {
  cart[idx].qty += delta;
  if (cart[idx].qty <= 0) cart.splice(idx, 1);
  updateCartUI();
}

function toggleCart() {
  const sidebar = document.getElementById('cartSidebar');
  const overlay = document.getElementById('cartOverlay');
  const isOpen = sidebar.classList.contains('open');
  sidebar.classList.toggle('open');
  overlay.classList.toggle('open');
  document.body.style.overflow = isOpen ? '' : 'hidden';
}

// ─── FAQ ───
function toggleFaq(btn) {
  const item = btn.closest('.faq-item');
  const wasOpen = item.classList.contains('open');
  document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
  if (!wasOpen) item.classList.add('open');
}

// ─── MOBILE MENU ───
let mobileNavOpen = false;
function toggleMobileMenu() {
  mobileNavOpen = !mobileNavOpen;
  document.getElementById('mobileNav').classList.toggle('open', mobileNavOpen);
  document.body.style.overflow = mobileNavOpen ? 'hidden' : '';
}

// ─── TOAST ───
function showToast(msg) {
  const toast = document.getElementById('toast');
  document.getElementById('toastMsg').textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 3200);
}

// ─── SCROLL HANDLER ───
window.addEventListener('scroll', () => {
  const page = document.querySelector('.page.active');
  if (!page) return;
  const winH = window.innerHeight;
  page.querySelectorAll('.reveal:not(.visible)').forEach(el => {
    if (el.getBoundingClientRect().top < winH + 100) el.classList.add('visible');
  });
}, { passive: true });

// ─── INIT ───
window.addEventListener('load', () => {
  updateCartUI();
  const home = document.getElementById('page-home');
  if (home) requestAnimationFrame(() => requestAnimationFrame(() => revealPage(home)));
});

// ─── TRANSLATIONS ───
const i18n = {
  en: {
    ann: "🇮🇪 Free Delivery Across Ireland", ret: "30-Day Easy Returns",
    nh: "Home", ns: "Shop", na: "About", nf: "FAQ", nc: "Contact",
    badge: "New Generation Smart Car Systems",
    h1: "Upgrade Your Car<br><em>Instantly.</em>",
    sub: "Wireless Apple CarPlay & Android Auto for VW, SEAT, and Skoda. No wires. No complicated setup. Just connect.",
    sn: "Shop Now →", sf: "See Features",
    ct: "Your Cart", ce: "Your cart is empty",
    st: "Subtotal", ck: "Proceed to Checkout →", cn: "Secure checkout · Free delivery",
    ac: "Add to Cart", nm: "Notify Me"
  },
  pl: {
    ann: "🇮🇪 Darmowa dostawa do Irlandii", ret: "30-dniowe łatwe zwroty",
    nh: "Strona główna", ns: "Sklep", na: "O nas", nf: "FAQ", nc: "Kontakt",
    badge: "Nowa generacja systemów samochodowych",
    h1: "Ulepsz swój samochód<br><em>natychmiast.</em>",
    sub: "Bezprzewodowy Apple CarPlay i Android Auto dla VW, SEAT i Skoda. Bez kabli. Bez skomplikowanej konfiguracji.",
    sn: "Kup teraz →", sf: "Zobacz funkcje",
    ct: "Twój koszyk", ce: "Twój koszyk jest pusty",
    st: "Suma", ck: "Przejdź do kasy →", cn: "Bezpieczna płatność · Darmowa dostawa",
    ac: "Dodaj do koszyka", nm: "Powiadom mnie"
  },
  de: {
    ann: "🇮🇪 Kostenlose Lieferung nach Irland", ret: "30 Tage einfache Rücksendung",
    nh: "Startseite", ns: "Shop", na: "Über uns", nf: "FAQ", nc: "Kontakt",
    badge: "Neue Generation smarter Kfz-Systeme",
    h1: "Rüsten Sie Ihr Auto auf<br><em>sofort.</em>",
    sub: "Kabelloses Apple CarPlay & Android Auto für VW, SEAT und Skoda. Keine Kabel. Kein Setup.",
    sn: "Jetzt shoppen →", sf: "Funktionen ansehen",
    ct: "Ihr Warenkorb", ce: "Ihr Warenkorb ist leer",
    st: "Zwischensumme", ck: "Zur Kasse →", cn: "Sicherer Checkout · Kostenlose Lieferung",
    ac: "In den Warenkorb", nm: "Benachrichtigen"
  },
  fr: {
    ann: "🇮🇪 Livraison gratuite en Irlande", ret: "Retours faciles sous 30 jours",
    nh: "Accueil", ns: "Boutique", na: "À propos", nf: "FAQ", nc: "Contact",
    badge: "Systèmes automobiles nouvelle génération",
    h1: "Modernisez votre voiture<br><em>instantanément.</em>",
    sub: "Apple CarPlay & Android Auto sans fil pour VW, SEAT et Skoda. Sans câbles. Sans configuration.",
    sn: "Acheter maintenant →", sf: "Voir les fonctionnalités",
    ct: "Votre panier", ce: "Votre panier est vide",
    st: "Sous-total", ck: "Passer la commande →", cn: "Paiement sécurisé · Livraison gratuite",
    ac: "Ajouter au panier", nm: "Me notifier"
  }
};

function setLanguage(lang) {
  const t = i18n[lang] || i18n.en;
  document.documentElement.lang = lang;
  // Announcement
  const annSpans = document.querySelectorAll('.announcement span');
  if (annSpans[1]) annSpans[1].innerHTML = t.ann;
  if (annSpans[3]) annSpans[3].textContent = t.ret;
  // Desktop nav
  const navAs = document.querySelectorAll('nav a');
  [t.nh,t.ns,t.na,t.nf,t.nc].forEach((v,i) => { if(navAs[i]) navAs[i].textContent = v; });
  // Mobile nav
  const mAs = document.querySelectorAll('.mobile-nav a');
  [t.nh,t.ns,t.na,t.nf,t.nc].forEach((v,i) => { if(mAs[i]) mAs[i].textContent = v; });
  // Hero
  const hb = document.querySelector('.hero-badge');
  if(hb) hb.innerHTML = '<div class="hero-badge-dot"></div> ' + t.badge;
  const hh = document.querySelector('.hero h1');
  if(hh) hh.innerHTML = t.h1;
  const hs = document.querySelector('.hero-sub');
  if(hs) hs.textContent = t.sub;
  const hctas = document.querySelectorAll('.hero-ctas a, .hero-ctas button');
  if(hctas[0]) hctas[0].textContent = t.sn;
  if(hctas[1]) hctas[1].textContent = t.sf;
  // Cart UI
  const ch = document.querySelector('.cart-header h3');
  if(ch) ch.textContent = t.ct;
  const cs = document.querySelector('.cart-subtotal span');
  if(cs) cs.textContent = t.st;
  const ckb = document.querySelector('.checkout-btn');
  if(ckb) ckb.textContent = t.ck;
  const cnn = document.querySelector('.checkout-note');
  if(cnn) cnn.innerHTML = '🔒 ' + t.cn;
  // Add to cart buttons
  document.querySelectorAll('.btn-add-cart').forEach(b => {
    if(b.textContent.trim().startsWith('Add') || b.textContent.trim().startsWith('Dodaj') || b.textContent.trim().startsWith('In den') || b.textContent.trim().startsWith('Ajouter')) b.textContent = t.ac;
  });
  const bigBtn = document.getElementById('addToCartBtn');
  if(bigBtn) bigBtn.textContent = t.ac;
}
</script>

</body>
</html>