/* === THEME VARIABLES === */
/* Default = LIGHT */
:root{
  --bg-start: #f8fbff;
  --bg-end:   #e9f0ff;
  --brand:    #7c5cff;            /* primary accent */
  --brand-2:  #21d4fd;            /* gradient accent */
  --glass-bg: rgba(255,255,255,0.65);
  --glass-br: rgba(0,0,0,0.06);
  --txt:      #1f2430;
  --txt-2:    #5c667a;
  --soft:     rgba(0,0,0,0.04);
  --shadow:   0 10px 25px rgba(0,0,0,.08);
}

/* Dark overrides */
[data-bs-theme="dark"]{
  --bg-start: #0f1021;
  --bg-end:   #1c1f4a;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-br: rgba(255,255,255,0.20);
  --txt:      #e9ecf1;
  --txt-2:    #b9c0cf;
  --soft:     rgba(255,255,255,0.06);
  --shadow:   0 10px 30px rgba(0,0,0,.35);
}

html,body{height:100%;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--txt);
  background: linear-gradient(160deg, var(--bg-start), var(--bg-end));
  background-attachment: fixed;
}

/* floating orbs for depth */
.bg-orb{position:fixed; filter: blur(80px); opacity:.5; z-index:-1;}
.orb-1{ width:520px; height:520px; left:-120px; top:-120px; background: radial-gradient(600px circle at 30% 30%, #9b5cff55, transparent 60%); }
.orb-2{ width:520px; height:520px; right:-140px; bottom:-160px; background: radial-gradient(600px circle at 80% 70%, #21d4fd55, transparent 60%); }

/* NAV */
.navbar-glass{
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-br);
}
.navbar-brand{ color: var(--txt); }
.navbar .nav-link{ color: var(--txt-2); }
.navbar .nav-link.active, .navbar .nav-link:hover{ color: var(--txt); }
.brand-icon{ font-size:1.25rem; color: var(--brand); }
.btn-ghost{ background: var(--soft); color: var(--txt); }
.btn-ghost:hover{ background: rgba(0,0,0,.06); }

/* GLASS CARDS */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-br);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.shadow-hover{ transition: transform .18s ease, box-shadow .2s ease; }
.shadow-hover:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }

/* HERO */
.hero .badge.bg-pill{ border-radius: 999px; padding: .5rem .8rem; font-weight:600; }
.bg-gradient-primary{
  background: linear-gradient(90deg, var(--brand), #b794ff);
}
.bg-gradient-secondary{
  background: linear-gradient(90deg, var(--brand-2), #a0f1ff);
}

/* TABLE */
.table-modern{
  --bs-table-bg: transparent;
  color: var(--txt);
}
.table-modern thead th{
  background: var(--soft);
  font-weight: 600;
  border-bottom: 1px solid var(--glass-br);
}
.table-modern tbody tr{
  transition: background .15s ease, transform .08s ease;
}
.table-modern tbody tr:hover{
  background: rgba(0,0,0,.04);
}
.row-click{ cursor: pointer; }

.fw-600{ font-weight:600; }
.fw-extrabold{ font-weight:800; }

/* THUMBS */
.thumb-wrap{
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  background: var(--soft); display: grid; place-items: center; border: 1px solid var(--glass-br);
}
.thumb{ width: 100%; height: 100%; object-fit: cover; }
.thumb-empty{ color: var(--txt-2); font-size: 11px; }

/* BADGES */
.bg-soft{ background: var(--soft); border: 1px solid var(--glass-br); color: var(--txt); }

/* CONTACT */
.avatar{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color:white; font-weight:700;
}
.link-strong{ color: var(--txt); text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.25); }
[data-bs-theme="dark"] .link-strong{ border-bottom-color: rgba(255,255,255,.3); }
.link-strong:hover{ opacity:.9; }

/* PHOTO GRID + VIEWER */
.photo-grid{
  display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
}
.photo-item-btn{
  padding:0; border:0; background:transparent; cursor: zoom-in;
}
.photo-item-btn img{
  width:100%; height:160px; object-fit:cover; border-radius: 12px; border:1px solid var(--glass-br);
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: var(--shadow);
}
.photo-item-btn:hover img{ transform: scale(1.01); }

/* Viewer */
.viewer-overlay{ position:fixed; inset:0; display:none; z-index: 1050; }
.viewer-overlay.open{ display:block; }
.viewer-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.75); backdrop-filter: blur(2px); }
.viewer-frame{
  position:absolute; inset:0; display:grid;
  grid-template-columns: 64px 1fr 64px; grid-template-rows: 64px 1fr 64px;
  align-items:center; justify-items:center; padding:16px;
}
.viewer-image{
  max-width:min(92vw,1400px); max-height:78vh; border-radius:14px; background:#000; object-fit:contain; box-shadow: var(--shadow);
  grid-column:2; grid-row:2;
}
.viewer-btn{
  width:44px; height:44px; border-radius:999px; background: rgba(255,255,255,0.9); color:#111; border:0; display:grid; place-items:center;
  font-size:28px; cursor:pointer; transition: transform .1s ease, background .2s ease;
}
.viewer-btn:hover{ transform: scale(1.05); background:#fff; }
.viewer-close{ grid-column:3; grid-row:1; align-self:start; justify-self=end; margin:10px; font-size:30px; width:40px; height:40px; }
.viewer-prev{ grid-column:1; grid-row:2; font-size:36px; }
.viewer-next{ grid-column:3; grid-row:2; font-size:36px; }
.viewer-counter{ grid-column:2; grid-row:3; color:#eee; font-size:14px; letter-spacing:.5px; margin-top:8px; }

/* HR */
.soft-hr{ border:0; height:1px; background: var(--glass-br); opacity:.6; }

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg, var(--brand), #b794ff);
  border: 0;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-secondary{
  border-color: var(--glass-br); color: var(--txt);
}
.btn-outline-secondary:hover{ background: var(--soft); color: var(--txt); }

/* ---- Bento grid / cards ---- */
.bento-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.car-card{
  position: relative;
  display: grid;
  grid-template-rows: 160px auto;
  border-radius: 16px;
  text-decoration: none;
  color: var(--txt);
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid var(--glass-br);
  overflow: hidden;
}
.car-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

.car-card .card-thumb{
  background: var(--soft);
  display: grid; place-items: center;
}
.car-card .card-thumb img{
  width: 100%; height: 100%; object-fit: cover;
}

.car-card .card-body{
  padding: 12px 14px 14px;
}
.car-card .title{
  font-weight: 700;
  letter-spacing: .2px;
}
.car-card .title .model{
  font-weight: 600;
  opacity: .85;
  margin-left: 4px;
}
.car-card .meta{
  margin-top: 6px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.car-card .chip{
  background: var(--soft);
  border: 1px solid var(--glass-br);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--txt);
}
.car-card .cta{
  margin-top: 10px;
}

/* tweak form controls in glass card */
.form-select, .form-control, .input-group-text{
  background: rgba(255,255,255,.6);
  border: 1px solid var(--glass-br);
}
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .input-group-text{
  background: rgba(0,0,0,.2);
}

/* --- Compact hero --- */
.hero-compact { padding-top: .5rem !important; padding-bottom: .25rem !important; }
.hero-compact .card { padding: .5rem .75rem !important; border-radius: 14px; }
.hero-compact .hero-title { font-size: 1.0rem; line-height: 1.2; }
.hero-compact .hero-sub   { font-size: .85rem; opacity: .85; }

/* Slightly reduce spacing below hero */
.hero-compact + main { padding-top: .25rem; }

/* Tighten when under navbar */
.navbar-glass + .hero { padding-top: .5rem !important; }

/* === HERO 3D CAROUSEL (SLIM) === */
.hero-carousel{
  position: relative;
  border-radius: 14px;
  padding: 0;
  height: clamp(180px, 24vw, 280px); /* slim height so it doesn’t steal attention */
}

.hero-carousel--slim .hc-card{
  border-radius: 14px;
}

.hero-carousel .hc-stage{
  list-style: none; margin: 0; padding: 0;
  position: relative; height: 100%; width: 100%;
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.hc-item{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease, filter .45s ease;
  will-change: transform, opacity, filter;
  pointer-events: none; /* center slide re-enables pointer events via JS */
}

.hc-card{
  width: min(92%, 880px);
  height: 100%;
  display: grid;
  grid-template-columns: 56% 44%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-br);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  color: var(--txt);
}

.hc-photo{
  background: #000;
  position: relative;
}
.hc-photo img, .hc-photo .hc-photo-empty{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hc-photo .hc-photo-empty{
  display: grid; place-items: center; color: #bbb; font-size: .9rem;
  background: linear-gradient(120deg, var(--soft), rgba(0,0,0,.15));
}

.hc-info{
  padding: clamp(10px, 2.2vw, 18px);
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
}
[data-bs-theme="dark"] .hc-info{
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}
.hc-info .title{
  font-weight: 800; letter-spacing: .2px; font-size: clamp(.95rem, 2.2vw, 1.25rem);
  margin-bottom: 2px;
}
.hc-info .title .model{ font-weight: 700; opacity: .9; margin-left: 4px; }
.hc-info .meta{ margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.hc-info .chip{
  background: var(--soft);
  border: 1px solid var(--glass-br);
  padding: 4px 10px; border-radius: 999px; font-size: .75rem;
  color: var(--txt);
}

/* depth positions (JS toggles these via inline transform/z-index) */
.hc-depth-center { filter: none; opacity: 1; }
.hc-depth-1      { filter: blur(0.3px) saturate(.95); opacity: .95; }
.hc-depth-2      { filter: blur(.9px)  saturate(.9);  opacity: .85; }
.hc-depth-hidden { opacity: 0; }

/* nav buttons */
.hc-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 38px; height: 38px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,0.92); color: #111;
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform .1s ease, background .2s ease, opacity .2s ease;
}
.hc-btn:hover{ transform: translateY(-50%) scale(1.05); background: #fff; }
.hc-btn:active{ transform: translateY(-50%) scale(0.98); }
.hc-btn.prev{ left: 8px; }
.hc-btn.next{ right: 8px; }
[data-bs-theme="dark"] .hc-btn{ background: rgba(255,255,255,.85); }

/* dots */
.hc-dots{
  position: absolute; left: 0; right: 0; bottom: 6px;
  display: flex; gap: 6px; justify-content: center; z-index: 4;
}
.hc-dots button{
  width: 5px; height: 5px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.25);
}
[data-bs-theme="dark"] .hc-dots button{ background: rgba(255,255,255,.35); }
.hc-dots button.active{ width: 18px; background: var(--brand); }

@media (max-width: 900px){
  .hc-card{ grid-template-columns: 1fr; }
}