:root {
    --brand: 88 180 146;
}

* {
    box-sizing: border-box;
}

.font-inter {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.nav-link {
    @apply px-3 py-2 rounded-lg hover: bg-white/5 text-sm font-medium;
}

.btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl font-semibold bg-emerald-500/90 hover: bg-emerald-400 text-neutral-900 shadow;
}

.btn-outline {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl font-semibold border border-white/15 hover: bg-white/5;
}

.nav-mobile {
    @apply px-3 py-2 rounded-lg hover: bg-white/5;
}

.badge {
    @apply inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-400/20;
}

.section {
    @apply max-w-7xl mx-auto px-4 md: px-6 mt-16;
}

.section-head {
    @apply flex items-end justify-between mb-6;
}

.section-title {
    @apply text-2xl md: text-3xl font-bold;
}

.link {
    @apply text-emerald-300 hover: text-emerald-200;
}

.input {
    @apply bg-white/5 border border-white/10 rounded-xl px-3 py-2 w-full outline-none focus: ring-2 focus:ring-emerald-400/40;
}

.label {
    @apply block text-sm text-neutral-300 mb-1;
}

.list li {
    @apply pl-6 relative;
}

.list li::before {
    content: "✓";
    @apply absolute left-0 top-0 text-emerald-400;
}

.chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm bg-white/5 hover: bg-white/10 border border-white/10;
}

.footer-title {
    @apply font-semibold text-neutral-200 mb-2;
}

.footer-link {
    @apply hover: text-white;
}

.hero {
    background-image: url('https://images.unsplash.com/photo-1549923746-c502d488b3ea?q=80&w=2400&auto=format&fit=crop');
    @apply bg-cover bg-center min-h-[68vh];
}

.page-hero {
    @apply bg-[url('https://images.unsplash.com/photo-1525609004556-c46c7d6cf023?q=80&w=2400&auto=format&fit=crop')] bg-cover bg-center;
}

.page-hero {
    @apply relative;
}

.page-hero::before {
    content: '';
    @apply absolute inset-0 bg-neutral-950/60;
}

.page-hero>* {
    @apply relative;
}

.page-title {
    @apply max-w-7xl mx-auto px-4 md: px-6 pt-28 md:pt-40 text-4xl md:text-5xl font-black;
}

.page-subtitle {
    @apply max-w-7xl mx-auto px-4 md: px-6 pb-14 text-neutral-300;
}

.card-type {
    @apply bg-white/5 rounded-2xl overflow-hidden ring-1 ring-white/10 hover: ring-emerald-400/30 transition;
}

.card-type img {
    @apply h-44 w-full object-cover;
}

.card-title {
    @apply text-lg font-semibold;
}

.card-desc {
    @apply text-neutral-300 text-sm;
}

.card {
    @apply bg-white/5 rounded-2xl overflow-hidden ring-1 ring-white/10 hover: ring-emerald-400/30 transition flex flex-col;
}

.card img {
    @apply h-48 w-full object-cover;
}

.card-body {
    @apply p-5 flex-1 flex flex-col;
}

.car-name {
    @apply text-lg font-bold;
}

.car-meta {
    @apply text-sm text-neutral-300;
}

.card-actions {
    @apply mt-4 flex gap-2;
}

.wapp {
    @apply inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-emerald-400/10 text-emerald-300 border border-emerald-400/20;
}

.call {
    @apply inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-white/10 hover: bg-white/5;
}

.book {
    @apply inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white text-neutral-900 font-semibold;
}

.price-table {
    @apply w-full text-sm;
}

.price-table th {
    @apply text-left bg-white/5 p-3 font-semibold;
}

.price-table td {
    @apply p-3 border-t border-white/10;
}

.cta {
    @apply rounded-2xl bg-gradient-to-r from-emerald-500/10 to-cyan-500/10 ring-1 ring-white/10 p-6 flex items-center justify-between flex-wrap gap-4;
}

.prose h2 {
    @apply text-2xl font-bold mb-2;
}

.prose h3 {
    @apply text-xl font-semibold mt-4 mb-2;
}

.prose p,
.prose li {
    @apply text-neutral-300;
}

.kpi {
    @apply bg-white/5 rounded-2xl p-6 text-center ring-1 ring-white/10;
}

.kpi-num {
    @apply block text-3xl font-extrabold;
}

.kpi-label {
    @apply block text-neutral-300;
}












body { background-color:#00341d; }







/* Base look for header links/buttons */
header a, header button { color:#e5e7eb; }

/* Top-nav links */
.nav-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .75rem; border-radius:.6rem;
  font-weight:600; line-height:1;
  background:transparent; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-link:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }

/* Mobile list items */
.nav-mobile{
  display:inline-flex; padding:.5rem .75rem; border-radius:.6rem;
}
.nav-mobile:hover{ background:rgba(255,255,255,.06); }

/* Primary / outline buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:.8rem; font-weight:700;
  background:#34d399; color:#0b1020; box-shadow:0 6px 18px rgba(52,211,153,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:.8rem; font-weight:600;
  border:1px solid rgba(255,255,255,.14); background:transparent;
}
.btn-outline:hover{ background:rgba(255,255,255,.06); }

/* Desktop dropdown panel */
.dropdown-panel{
  position:absolute; left:0; top:100%; margin-top:.5rem;
  width:min(560px,90vw);
  background:rgba(17,17,17,.98);
  border:1px solid rgba(255,255,255,.10); border-radius:1rem; padding:.75rem;
  box-shadow:0 10px 35px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.18s ease; z-index:60;
}
/* Reveal on hover/focus of parent .group */
.group:hover > .dropdown-panel,
.group:focus-within > .dropdown-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Dropdown items */
.dropdown-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem; border-radius:.6rem;
}
.dropdown-link:hover{ background:rgba(255,255,255,.06); }
.icon-badge{
  width:2rem; height:2rem; border-radius:.6rem; display:inline-flex;
  align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
  background:linear-gradient(135deg,#34d39933,#22d3ee33);
  border:1px solid rgba(255,255,255,.08);
}

/* Brand pills in All Cars dropdown */
.dropdown-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .75rem; border-radius:.7rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.dropdown-pill:hover{ background:rgba(255,255,255,.1); }

/* Mobile accordions */
.accordion-btn{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .75rem; border-radius:.6rem;
}
.accordion-btn:hover{ background:rgba(255,255,255,.06); }

/* Optional: softer text selection so it doesn't look like green blocks in screenshots */
::selection{ background:rgba(255,255,255,.14); color:#fff; }




/* --- Dropdown polish --- */
.has-dropdown { position: relative; }

.dropdown-panel{
  position:absolute; left:0; top:100%; margin-top:.5rem;
  width:min(640px,92vw);
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(24,24,27,.96), rgba(10,10,10,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.75rem;
  box-shadow:0 20px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.98);
  transform-origin: top center;
  transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
  z-index:60;
}
/* Open state toggled by JS */
.has-dropdown.open > .dropdown-panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}

/* If near the right edge, anchor right */
.has-dropdown.align-right .dropdown-panel{ right:0; left:auto; }

/* Arrow */
.dropdown-panel::after{
  content:""; position:absolute; top:-8px; left:28px;
  width:14px; height:14px; transform:rotate(45deg);
  background:inherit;
  border-left:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
}
.has-dropdown.align-right .dropdown-panel::after{ left:auto; right:32px; }

/* Caret rotate on open */
.has-dropdown .dropdown-toggle .caret{ transition: transform .18s ease; }
.has-dropdown.open .dropdown-toggle .caret{ transform: rotate(180deg); }

/* Responsive grid inside panel */
.dropdown-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem; }
@media (max-width: 1024px){ .dropdown-grid{ grid-template-columns: repeat(2,1fr); } }

/* (Optional) if you kept hover reveal earlier, remove it to prevent flicker: */
/* .group:hover > .dropdown-panel, .group:focus-within > .dropdown-panel{ ... } */





/* --- Layout containers --- */
.section{ max-width: 80rem; margin: 4.5rem auto 0; padding: 0 1.25rem; }
.section:first-of-type{ margin-top: 2.5rem; }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:.75rem; margin-bottom:1rem;
}
.section-title{ font-weight:800; font-size:clamp(1.25rem, 1.2rem + 1vw, 1.875rem); }
.link{ color:#86efac; text-underline-offset:3px; }
.link:hover{ color:#a7f3d0; }

/* --- 3 column cards (auto stack) --- */
.cards-3{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.cards-3 > *{ grid-column: span 12 / span 12; }
@media (min-width: 640px){
  .cards-3 > *{ grid-column: span 6 / span 6; }
}
@media (min-width: 1024px){
  .cards-3 > *{ grid-column: span 4 / span 4; }
}

/* --- Card types --- */
.card-type{
  display:flex; flex-direction:column; overflow:hidden; border-radius:1rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-type:hover{
  transform:translateY(-3px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  border-color: rgba(134,239,172,.35);
}
.card-pad{ padding:1rem 1.1rem; }

/* Consistent media aspect ratio (works even if image fails) */
.media{ position:relative; width:100%; aspect-ratio: 16/9; background:linear-gradient(135deg,#1f2937,#0b1020); }
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Titles / descriptions */
.card-title{ font-weight:700; font-size:1.125rem; }
.card-desc{ color:#d1d5db; font-size:.95rem; line-height:1.5; }

/* --- Featured car cards coming from JS --- */
.card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:1rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); border-color: rgba(134,239,172,.35); box-shadow:0 18px 45px rgba(0,0,0,.45); }
.card .card-body{ padding:1rem 1.1rem; display:flex; flex-direction:column; row-gap:.35rem; }
.card .car-name{ font-weight:700; }
.card .car-meta{ color:#cbd5e1; font-size:.95rem; }
.card img{ width:100%; height:260px; object-fit:cover; display:block; }

/* Actions on cards */
.card-actions{ margin-top:.5rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.wapp, .call, .book{
  display:inline-flex; align-items:center; padding:.5rem .7rem; border-radius:.75rem; font-weight:600;
  border:1px solid rgba(255,255,255,.1);
}
.wapp{ background:rgba(16,185,129,.12); color:#86efac; border-color:rgba(16,185,129,.25); }
.call{ background:transparent; }
.book{ background:#fff; color:#0b1020; border-color:transparent; }

/* --- Prices table --- */
.table-wrap{ overflow:auto; border-radius:1rem; border:1px solid rgba(255,255,255,.08); }
.price-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:650px; }
.price-table thead th{
  text-align:left; font-weight:700; padding:.85rem 1rem;
  background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.12);
}
.price-table tbody td{
  padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.price-table tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }

/* --- About strip --- */
.about-grid{
  display:grid; gap:1.25rem; align-items:center;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.about-copy{ grid-column: span 12 / span 12; }
.about-media{ grid-column: span 12 / span 12; overflow:hidden; border-radius:1rem; border:1px solid rgba(255,255,255,.08); }
.about-media img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (min-width: 1024px){
  .about-copy{ grid-column: span 6 / span 6; }
  .about-media{ grid-column: span 6 / span 6; }
}
.list{ margin:.9rem 0 0; display:grid; gap:.5rem; color:#d1d5db; }
.list li{ position:relative; padding-left:1.3rem; }
.list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:#86efac; font-weight:800;
}
.cta-actions{ margin-top:1rem; display:flex; gap:.6rem; }

/* --- CTA bar --- */
.cta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  border-radius:1rem; padding:1rem 1.1rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(16,185,129,.10), rgba(14,165,233,.10));
}
.cta-title{ font-weight:800; font-size:clamp(1.25rem, 1.2rem + 1vw, 1.75rem); }
.cta-desc{ color:#cbd5e1; }

/* --- Buttons / chips / inputs (reused) --- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; border-radius:.85rem; font-weight:800;
  background:#34d399; color:#0b1020; box-shadow:0 10px 26px rgba(52,211,153,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; border-radius:.85rem; font-weight:700;
  border:1px solid rgba(255,255,255,.14);
}
.btn-outline:hover{ background:rgba(255,255,255,.06); }
.input{
  width:100%; padding:.6rem .8rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.14);
  background:rgb(40 201 134 / 66%); color:#000;
}

/* --- Footer --- */
.site-footer{ margin-top:5rem; border-top:1px solid rgba(255,255,255,.08); }
.footer-inner{
  max-width: 80rem; margin:0 auto; padding:3rem 1.25rem;
  display:grid; gap:2rem; grid-template-columns: repeat(12, minmax(0,1fr));
}
.footer-inner > *{ grid-column: span 12 / span 12; }
@media (min-width: 768px){
  .footer-inner > *{ grid-column: span 4 / span 4; }
}
.footer-brand{ display:flex; align-items:center; gap:.6rem; }
.brand-text{ font-weight:900; font-size:1.25rem; }
.muted{ color:#9ca3af; margin-top:.5rem; }
.chips{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.chip{
  display:inline-flex; padding:.4rem .7rem; border-radius:.75rem;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
}
.footer-title{ font-weight:700; margin-bottom:.5rem; }
.footer-links{ display:grid; gap:.45rem; }
.footer-link{ color:#d1d5db; }
.footer-link:hover{ color:#fff; }
.newsletter{ margin-top:.75rem; display:flex; gap:.5rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center; padding:1rem; color:#9ca3af; font-size:.9rem;
}

.w-26{
    width: 12rem;
}

/* Selection color toned down */
::selection{ background:rgba(255,255,255,.12); color:#fff; }



















/* Floating action base */
.fab{
  position: relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:3.5rem;width:3.5rem; /* 56px */
  border-radius:1rem; /* 16px */
  color:#E6FFFA; /* light text */
  background:rgba(255,255,255,0.08);           /* glass */
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.fab:hover{ transform: translateY(-2px); background:rgba(255,255,255,0.12); }

/* Color accents */
.fab--wa{ color:#6ee7b7; border-color:rgba(16,185,129,.35); }
.fab--call{ color:#5eead4; border-color:rgba(45,212,191,.35); }

/* Hover labels */
.fab .fab-label{
  position:absolute; right:calc(100% + .5rem); top:50%; transform:translateY(-50%);
  padding:.35rem .6rem; border-radius:.75rem;
  font-weight:600; font-size:.85rem; white-space:nowrap;
  color:rgba(255,255,255,.95);
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.fab:hover .fab-label{ opacity:1; }

/* Soft neon pulse glow */
@keyframes neonPulseGreen{
  0%{ box-shadow:0 0 0 0 rgba(16,185,129,.45), 0 0 18px rgba(16,185,129,.35); }
  60%{ box-shadow:0 0 0 14px rgba(16,185,129,0), 0 0 26px rgba(16,185,129,.55); }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0), 0 0 18px rgba(16,185,129,.35); }
}
@keyframes neonPulseTeal{
  0%{ box-shadow:0 0 0 0 rgba(45,212,191,.45), 0 0 18px rgba(45,212,191,.35); }
  60%{ box-shadow:0 0 0 14px rgba(45,212,191,0), 0 0 26px rgba(45,212,191,.55); }
  100%{ box-shadow:0 0 0 0 rgba(45,212,191,0), 0 0 18px rgba(45,212,191,.35); }
}
.glow-emerald{ animation: neonPulseGreen 2.4s ease-out infinite; }
.glow-teal{ animation: neonPulseTeal 2.4s ease-out infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .glow-emerald,.glow-teal{ animation:none; }
}



/* ---------- keep existing FAB styles from earlier ---------- */

/* Hide inline number by default (desktop) */
.fab-text{ display:none; font-weight:700; letter-spacing:.2px; }

/* ---------- Mobile view: convert to pill buttons at the bottom ---------- */
@media (max-width: 640px){
  /* Reposition wrapper to bottom bar */
  .fab-wrap{
    position: fixed;
    left: 0; right: 0;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 12px;
  }

  /* Pill look */
  .fab{
    height: 48px;
    min-width: 44%;
    width: auto;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.78);            /* translucent dark */
    border: 1px solid rgba(255,255,255,0.12);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    transform: translateY(0);                       /* keep flat */
  }

  /* icon spacing */
  .fab svg{ margin-left: 12px; }

  /* Show the phone number text + hide desktop hover label */
  .fab-text{
    display: inline-block;
    color: #fff;
    margin: 0 14px 0 10px;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .fab .fab-label{ display:none; }

  /* Slightly stronger glow on mobile pills */
  .glow-emerald{
    animation: neonPulseGreen 2.2s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(16,185,129,.35), 0 0 18px rgba(16,185,129,.35);
  }
  .glow-teal{
    animation: neonPulseTeal 2.2s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(45,212,191,.35), 0 0 18px rgba(45,212,191,.35);
  }
}