/* ================================================================
   LITTLEMAKER CAMBODIA — main.css v3.0
   Premium industrial aesthetic with smooth animations
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Barlow+Condensed:wght@500;600;700;800;900&family=Kantumruy+Pro:wght@400;500;600;700&family=Battambang:wght@400;700&display=swap');

/* ── CSS Variables ── */
:root {
  --blue:      #004d99;
  --blue-l:    #0066cc;
  --blue-ll:   #e8f0fa;
  --orange:    #f90;
  --orange-d:  #e68a00;
  --red:       #cc0000;
  --dark:      #0f1923;
  --dark-2:    #1a2535;
  --dark-3:    #243040;
  --light:     #f3f6fa;
  --light-2:   #e8edf5;
  --card:      #fff;
  --text:      #1e2a38;
  --muted:     #5a6a7e;
  --border:    #dde4ef;
  --white:     #fff;

  --sh1: 0 1px 8px rgba(0,0,0,.06);
  --sh2: 0 6px 28px rgba(0,77,153,.11);
  --sh3: 0 18px 56px rgba(0,0,0,.14);

  --r:    14px;
  --r-sm:  7px;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --t: all .28s var(--ease);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Barlow',sans-serif;
  font-size:16px; line-height:1.65;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
}
ul { list-style:none }
a  { text-decoration:none; color:inherit }
img { max-width:100%; display:block }

/* diagonal grid texture */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(0,77,153,.018) 40px,
      rgba(0,77,153,.018) 41px
    );
  pointer-events:none; z-index:0;
}

/* ── Utilities ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px }
.section-padding { padding:100px 0 }
.pt-20    { padding-top:20px }
.bg-light { background:var(--light) }
.bg-dark  { background:var(--dark); color:var(--white) }
.text-white  { color:var(--white) }
.text-grey   { color:#888 }
.text-center { text-align:center }

/* Eyebrow label */
.sub-heading {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.78rem; font-weight:700;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--orange);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.sub-heading::before,
.sub-heading::after {
  content:'';
  width:24px; height:2px;
  background:var(--orange);
  border-radius:2px;
}

.section-header { text-align:center; margin-bottom:64px }
.section-header h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.2rem,4vw,3rem);
  font-weight:900;
  color:var(--blue);
  letter-spacing:-1px;
  line-height:1.05;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 34px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.05rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  border-radius:var(--r-sm);
  border:2px solid transparent;
  cursor:pointer; transition:var(--t);
  position:relative; overflow:hidden;
  white-space:nowrap;
}
/* shine sweep */
.btn::after {
  content:'';
  position:absolute; top:0; left:-110%;
  width:65%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.btn:hover::after { left:130% }
.btn:active { transform:scale(.97) }

.btn-primary {
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  color:#fff;
  box-shadow:0 4px 20px rgba(255,153,0,.38);
}
.btn-primary:hover {
  transform:translateY(-3px);
  background:linear-gradient(135deg, #ff4d4d, #cc0000);
  box-shadow:0 10px 32px rgba(204,0,0,.6);
}

.btn-outline {
  border-color:rgba(255,255,255,.7);
  color:#fff;
  backdrop-filter:blur(8px);
}
.btn-outline:hover {
  background:rgba(255,255,255,.16);
  border-color:#fff;
  transform:translateY(-3px);
}

.btn-link {
  color:#fff; font-family:'Barlow Condensed',sans-serif;
  font-size:1rem; font-weight:700; letter-spacing:.5px;
  margin-top:18px;
  display:inline-flex; align-items:center; gap:9px;
  border-bottom:2px solid var(--orange);
  padding-bottom:3px; transition:gap .3s;
}
.btn-link:hover { gap:15px }

/* ── Navbar ── */
.navbar {
  position:sticky; top:0; z-index:1000;
  height:70px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--sh1);
  display:flex; align-items:center;
  transition:height .3s var(--ease), box-shadow .3s;
}
.navbar.scrolled { height:62px; box-shadow:var(--sh2) }

.navbar .container {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:100%; padding:0 36px;
}

/* Logo */
.logo {
  display:flex;
  align-items:center;
  gap:12px;
  transition:transform .28s var(--ease), filter .28s var(--ease);
  text-decoration:none;
  position:relative;
}
.logo-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: height 0.3s var(--ease), transform 0.3s var(--ease), filter 0.3s var(--ease);
  filter: drop-shadow(0 4px 10px rgba(204,0,0,.15));
}
.navbar.scrolled .logo-img {
  height: 36px;
}
.logo:hover {
  transform:translateY(-1px);
}
.logo:hover .logo-img {
  transform: scale(1.03);
  filter: drop-shadow(0 6px 14px rgba(204,0,0,.22));
}
.logo-mark {
  width:58px;
  height:58px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(232,240,250,.95));
  border:1px solid rgba(0,77,153,.08);
  box-shadow:0 10px 28px rgba(0,77,153,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
  transition:transform .32s var(--spring), box-shadow .32s var(--ease);
}
.logo-mark img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:7px;
  filter:drop-shadow(0 6px 14px rgba(204,0,0,.18));
}
.logo-copy {
  display:flex;
  flex-direction:column;
  line-height:1;
}
.logo .logo-text {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.7rem;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--red);
  text-shadow:0 6px 20px rgba(204,0,0,.14);
}
.logo-sub {
  display:block;
  font-family:'Barlow',sans-serif;
  font-size:.6rem;
  font-weight:700;
  color:var(--muted);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:4px;
}
@keyframes gearSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Nav menu */
.nav-menu { display:flex; align-items:center; gap:28px }

/* Nav Dropdown */
.nav-item-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  background: #ffffff; min-width: 260px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius: 12px; padding: 12px 0; opacity: 0; visibility: hidden;
  transition: all 0.3s ease; z-index: 100; border: 1px solid rgba(0,0,0,0.05);
}
.nav-item-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #ffffff; border-left: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(0,0,0,0.05);
}
.nav-item-dropdown::after {
  content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 25px; background: transparent;
}
.nav-dropdown-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  color: var(--text); text-decoration: none; font-weight: 500; font-family: 'Barlow', sans-serif;
  transition: all 0.2s ease;
}
.nav-dropdown-item i { color: var(--red); font-size: 1.1em; width: 24px; text-align: center; }
.nav-dropdown-item:hover { background: rgba(204,0,0,0.05); color: var(--red); padding-left: 24px; }
body.dark-mode .nav-dropdown-menu { background: #1c2230; border-color: rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
body.dark-mode .nav-dropdown-menu::before { background: #1c2230; border-color: rgba(255,255,255,0.05); }
body.dark-mode .nav-dropdown-item { color: #e0e6ed; }
body.dark-mode .nav-dropdown-item:hover { background: rgba(255,102,102,0.1); color: #ff6666; }

.nav-link {
  font-family:'Barlow',sans-serif;
  font-weight:600; font-size:.92rem;
  color:var(--text);
  display:flex; align-items:center; gap:7px;
  padding:4px 0; position:relative;
  transition:color .22s;
}
.nav-link i { font-size:.9em; opacity:.7; transition:transform .25s }
.nav-link:hover i { transform:translateY(-2px); opacity:1 }
.nav-link::after {
  content:''; position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--orange),var(--red));
  border-radius:2px;
  transition:width .3s var(--ease);
}
.nav-link:hover, .nav-link.active { color:var(--red) }
.nav-link:hover::after, .nav-link.active::after { width:100% }

.mobile-only { display:none }
.mobile-bottom-bar { display:none }

/* Cart icon */
.cart-wrapper {
  position:relative; font-size:1.2rem; cursor:pointer;
  padding:8px; border-radius:50%;
  color:var(--text); transition:var(--t);
  display:flex; align-items:center;
}
.cart-wrapper:hover { background:var(--light); color:var(--blue) }
.cart-badge {
  position:absolute; top:0; right:0;
  background:var(--red); color:#fff;
  font-size:.62rem; font-weight:800;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  transition:transform .22s var(--spring);
}
.cart-badge.bump { transform:scale(1.7) }

.nav-controls { display:flex; align-items:center; gap:8px }
.menu-toggle  { display:none; cursor:pointer }
.bar {
  display:block; width:24px; height:2.5px;
  margin:5px; background:var(--text);
  border-radius:2px; transition:var(--t);
}

/* ── Page Header ── */
.page-header {
  height:300px;
  background:
    linear-gradient(135deg, rgba(204, 0, 0, 0.8) 0%, rgba(102, 0, 0, 0.9) 100%),
    url('../images/cabinet.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
/* animated diagonal scan line */
.page-header::after {
  content:'';
  position:absolute; top:0; left:-120%;
  width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:scanLine 5s ease-in-out infinite;
}
@keyframes scanLine { to { left:150% } }
.page-header .container { position:relative; z-index:1 }
.page-header h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.2rem,5vw,3.2rem);
  font-weight:900; letter-spacing:-1px;
  margin-bottom:10px;
  text-shadow:0 4px 28px rgba(0,0,0,.45);
  animation:headIn .65s var(--ease) both;
}
.page-header p {
  font-size:1.1rem; opacity:.88;
  animation:headIn .65s .12s var(--ease) both;
}
@keyframes headIn {
  from { opacity:0; transform:translateY(-20px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ══════════════════════════════════════════
   SHOP HERO — Premium Dark Redesign
══════════════════════════════════════════ */
.shop-hero {
  position: relative;
  min-height: 520px;
  background: linear-gradient(135deg, #050d1a 0%, #0a1628 40%, #061230 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 90px 0 80px;
}

/* Animated gradient blobs */
.shop-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.55;
}
.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #003399 0%, transparent 70%);
  top: -200px; left: -150px;
  animation: blobFloat1 12s ease-in-out infinite alternate;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #ff6600 0%, transparent 70%);
  bottom: -150px; right: 0;
  opacity: 0.3;
  animation: blobFloat2 15s ease-in-out infinite alternate;
}
.blob-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #0066ff 0%, transparent 70%);
  top: 50%; left: 45%;
  opacity: 0.25;
  animation: blobFloat1 10s ease-in-out infinite alternate-reverse;
}
@keyframes blobFloat1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.1); }
}
@keyframes blobFloat2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-30px, -20px) scale(1.08); }
}

/* Subtle dot-grid overlay */
.shop-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Layout */
.shop-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 56px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Left text ── */
.shop-hero-text { color: #fff; }

.shop-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);
  backdrop-filter: blur(10px);
  color: #ffaa44;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 7px 18px;
  margin-bottom: 22px;
  animation: slideUp 0.55s cubic-bezier(.22,1,.36,1) both;
}
.shop-hero-badge i { font-size: 0.75rem; color: #ffaa44; }

.shop-hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(3rem, 5.5vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: #fff;
  margin-bottom: 18px;
  animation: slideUp 0.55s 0.1s cubic-bezier(.22,1,.36,1) both;
}
.shop-hero-gradient {
  background: linear-gradient(90deg, #4d9fff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shop-hero-white { color: #fff; }

.shop-hero-desc {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 32px;
  line-height: 1.6;
  animation: slideUp 0.55s 0.18s cubic-bezier(.22,1,.36,1) both;
}

/* Stats row */
.shop-hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
  animation: slideUp 0.55s 0.25s cubic-bezier(.22,1,.36,1) both;
}
.shop-stat { text-align: center; }
.shop-stat-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
}
.shop-stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
}
.shop-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.18);
}

/* Buttons */
.shop-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  animation: slideUp 0.55s 0.3s cubic-bezier(.22,1,.36,1) both;
}

/* Trust chips */
.shop-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  animation: slideUp 0.55s 0.38s cubic-bezier(.22,1,.36,1) both;
}
.shop-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  border-radius: 30px;
  padding: 5px 13px;
  white-space: nowrap;
}
.shop-trust-chip i { color: #4d9fff; font-size: 0.72rem; }
.shop-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ff6b35 0%, #ff9200 100%);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 14px 30px;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(255,107,53,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.shop-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255,107,53,0.55);
  color: #fff;
}
.shop-hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 14px 26px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.shop-hero-btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Right image ── */
.shop-hero-visual {
  position: relative;
  animation: slideUp 0.6s 0.2s cubic-bezier(.22,1,.36,1) both;
}

/* Decorative ring */
.shop-hero-ring {
  position: absolute;
  width: 500px; height: 500px;
  border: 1px solid rgba(77,159,255,0.15);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ringPulse 5s ease-in-out infinite;
}
.shop-hero-ring::before {
  content: '';
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(255,107,53,0.12);
  border-radius: 50%;
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.03); }
}

.shop-hero-img-wrap {
  position: relative;
  height: 470px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}

/* Image corner label */
.shop-img-label {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(5,13,26,0.82);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  color: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  animation: floatBadge 4s ease-in-out infinite;
}
.shop-img-label i { color: #4d9fff; font-size: 1.1rem; }
.shop-img-label strong { display: block; font-size: 0.82rem; font-weight: 700; }
.shop-img-label small { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-top: 1px; }

.shop-banner-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.shop-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease-in-out, transform 7s linear;
}
.shop-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Subtle gradient overlay on image */
.shop-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,13,26,0.5) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Floating ISO badge on image */
.shop-floating-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,22,40,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 30px;
  padding: 8px 16px;
  animation: floatBadge 4s ease-in-out infinite;
}
.shop-floating-badge i { color: #4d9fff; }
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Slide dot indicators */
.shop-slide-dots {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  gap: 7px;
}
.shop-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.shop-dot.active {
  background: #ff6b35;
  transform: scale(1.4);
}

/* Keyword Marquee Ticker */
.shop-keyword-ticker {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
  margin-top: 40px;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
}
.ticker-track span {
  display: inline-block;
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.5px;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: color 0.2s;
}
.ticker-track span:hover { color: #4d9fff; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Search Tags */
.search-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
}
.stag-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.stag-label i { color: #ff6b35; }
.search-tag {
  background: rgba(0,77,153,0.08);
  border: 1px solid rgba(0,77,153,0.2);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 4px 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}
.search-tag:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 960px) {
  .shop-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 0 20px;
  }
  .shop-hero-badge, .shop-hero-actions, .shop-hero-stats, .shop-trust-row { justify-content: center; }
  .shop-hero-visual { max-width: 100%; }
  .shop-hero-ring { display: none; }
  .shop-hero-img-wrap { height: 280px; }
}

/* ── Hero ── */
.hero {
  min-height:92vh;
  background-image:url('../images/backgroud_1.png');
  background-size:cover; background-position:center;
  background-attachment:scroll;
  position:relative; display:flex; align-items:flex-start;
  padding:120px 0 80px;
  overflow:hidden;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    130deg,
    rgba(0,14,45,.88) 0%,
    rgba(0,50,120,.6) 50%,
    rgba(0,30,80,.2) 100%
  );
}
/* animated bokeh dots */
.hero-overlay::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle 3px at 18% 28%, rgba(255,153,0,.8) 0%, transparent 0%),
    radial-gradient(circle 2px at 72% 58%, rgba(255,255,255,.6) 0%, transparent 0%),
    radial-gradient(circle 3px at 85% 25%, rgba(255,153,0,.6) 0%, transparent 0%),
    radial-gradient(circle 2px at 42% 75%, rgba(255,255,255,.5) 0%, transparent 0%),
    radial-gradient(circle 2px at 58% 38%, rgba(255,200,80,.55) 0%, transparent 0%),
    radial-gradient(circle 1px at 28% 62%, rgba(255,255,255,.4) 0%, transparent 0%);
  background-size:320px 320px;
  animation:bokeh 10s ease-in-out infinite alternate;
}
@keyframes bokeh {
  from { transform:translate(0,0) scale(1) }
  to   { transform:translate(18px,-22px) scale(1.04) }
}

.hero-content {
  position:relative;
  z-index:1;
  color:#fff;
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.hero.hero-apple #heroParticles { display:none }
.hero.hero-apple .hero-overlay::after { display:none }
.hero.hero-ikea #heroParticles { display:none }
.hero.hero-ikea .hero-overlay::after { display:none }
.hero.hero-ikea .hero-content { max-width:1200px; text-align:left }
.hero-eyebrow {
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.2px;
  opacity:.92;
  margin-bottom:18px;
}
.hero.hero-ikea-split {
  min-height:auto;
  background:var(--light);
  padding:56px 0;
  align-items:stretch;
}
.hero.hero-ikea-split .hero-content { max-width:1200px; text-align:left; color:var(--text) }
.hero.hero-ikea-split .hero-overlay,
.hero.hero-ikea-split #heroParticles,
.hero.hero-ikea-split .hero-slideshow { display:none }
.ikea-split {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  align-items:stretch;
}
.ikea-tile {
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  background:#fff;
}
.ikea-tile:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 70px rgba(0,0,0,.16);
}
.ikea-tile-image {
  position:relative;
  display:block;
  min-height:560px;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.ikea-tile-image::before {
  content:'';
  position:absolute;
  inset:-8%;
  background:inherit;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  animation:heroImagePulse 14s ease-in-out infinite alternate;
  z-index:-1;
}
.ikea-tile-image::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(255,153,0,.26), transparent 34%),
    radial-gradient(circle at bottom left, rgba(0,77,153,.3), transparent 38%);
  mix-blend-mode:screen;
  pointer-events:none;
}
.ikea-image-overlay {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px 26px 22px;
  color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);
}
.home-hero-grid { position:relative }
.hero-feature-badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero-feature-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 6px rgba(255,153,0,.18);
  animation:signalPulse 2.4s ease-in-out infinite;
}
.ikea-kicker {
  font-size:.85rem;
  font-weight:700;
  opacity:.92;
  margin-bottom:8px;
}
.ikea-hero-desc {
  margin-top:10px;
  max-width:520px;
  color:rgba(255,255,255,.9);
  font-weight:500;
  line-height:1.65;
}
.hero-quick-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.hero-mini-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  font-weight:700;
  color:#fff;
}
.hero-buttons-left {
  justify-content:flex-start;
  margin-top:22px;
}
.hero-outline-btn {
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);
}
.hero-floating-stats {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:22px;
}
.hero-stat-card {
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 28px rgba(0,0,0,.12);
}
.hero-stat-card strong {
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.7rem;
  line-height:1;
  color:#fff;
  margin-bottom:6px;
}
.hero-stat-card span {
  display:block;
  font-size:.82rem;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}
.hero.hero-ikea-split h1 {
  font-family:'Barlow',sans-serif;
  font-size:clamp(2.1rem,4.4vw,3.2rem);
  letter-spacing:-1px;
  margin:0;
  color:#fff;
}
.hero.hero-ikea-split .highlight { color:#fff }
.hero.hero-ikea-split .highlight::after { display:none }
.ikea-slide-dots {
  display:flex;
  gap:8px;
  margin-top:16px;
}
.ikea-slide-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:var(--t);
}
.ikea-slide-dot.active {
  background:#fff;
  border-color:#fff;
  transform:scale(1.18);
}
.ikea-slide-dot:hover { background:rgba(255,255,255,.5) }
.ikea-tile-cta {
  background:linear-gradient(180deg,#ffdb00 0%, #ffd200 100%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:560px;
}
.ikea-cta-wrap {
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}
.ikea-cta-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ikea-cta-label {
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-.3px;
  color:#111;
}
.ikea-cta-round {
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--t);
  flex:0 0 auto;
}
.ikea-cta-round:hover { transform:translateY(-2px); background:#000 }
.ikea-cta-desc {
  margin:0;
  color:rgba(17,17,17,.82);
  line-height:1.75;
  font-weight:600;
  font-size:1rem;
}
.home-side-highlights {
  display:grid;
  gap:12px;
}
.home-side-card {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(17,17,17,.08);
}
.home-side-card i {
  width:40px;
  height:40px;
  border-radius:12px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.home-side-card strong {
  display:block;
  font-size:1rem;
  color:#111;
  margin-bottom:4px;
}
.home-side-card span {
  display:block;
  color:rgba(17,17,17,.72);
  font-size:.88rem;
  line-height:1.55;
}
.ikea-chips {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ikea-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(17,17,17,.12);
  color:#111;
  font-weight:800;
  letter-spacing:.2px;
  transition:var(--t);
}
.ikea-chip:hover { transform:translateY(-2px); background:#fff; border-color:rgba(17,17,17,.2) }
.ikea-quick-contact {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}
.ikea-contact-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(17,17,17,.07);
  color:#111;
  font-weight:800;
  transition:var(--t);
}
.ikea-contact-pill:hover { transform:translateY(-2px); background:rgba(17,17,17,.12) }
.ikea-cta-bottom {
  padding:16px 18px 18px;
  border-top:1px solid rgba(17,17,17,.18);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:center;
}
.ikea-cta-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  transition:var(--t);
  border:1px solid rgba(17,17,17,.18);
}
.ikea-cta-btn-dark { background:#111; color:#fff; border-color:#111 }
.ikea-cta-btn-dark:hover { transform:translateY(-2px); background:#000 }
.ikea-cta-btn-light { background:rgba(255,255,255,.8); color:#111 }
.ikea-cta-btn-light:hover { transform:translateY(-2px); background:#fff }
.ikea-cta-more {
  grid-column:1 / -1;
  display:inline-flex;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  color:#111;
  background:rgba(17,17,17,.06);
  transition:var(--t);
}
.ikea-cta-more:hover { transform:translateY(-2px); background:rgba(17,17,17,.12) }
@keyframes heroImagePulse {
  0% { transform:scale(1.02) translate3d(0,0,0) }
  100% { transform:scale(1.1) translate3d(10px,-8px,0) }
}
@keyframes signalPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,153,0,.2) }
  50% { box-shadow:0 0 0 8px rgba(255,153,0,0) }
}

/* ── Home Spotlight Band ── */
.home-spotlight-band {
  padding:0 0 28px;
  background:linear-gradient(180deg, var(--light) 0%, #fff 100%);
}
.home-spotlight-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:-8px;
}
.home-spotlight-card {
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:24px 24px 22px;
  background:linear-gradient(145deg, #fff, #f4f8fc);
  border:1px solid rgba(0,77,153,.08);
  box-shadow:0 16px 40px rgba(0,77,153,.1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.home-spotlight-card::before {
  content:'';
  position:absolute;
  top:-40px;
  right:-30px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,153,0,.18) 0%, rgba(255,153,0,0) 72%);
}
.home-spotlight-card:hover {
  transform:translateY(-8px);
  box-shadow:0 22px 50px rgba(0,77,153,.16);
  border-color:rgba(255,153,0,.24);
}
.spotlight-icon {
  width:54px;
  height:54px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(0,77,153,.12), rgba(255,153,0,.18));
  color:var(--blue);
  font-size:1.35rem;
  margin-bottom:18px;
}
.home-spotlight-card strong {
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.35rem;
  color:var(--dark);
  margin-bottom:8px;
}
.home-spotlight-card p {
  color:var(--muted);
  line-height:1.75;
}

/* ── Company Intro ── */
.company-intro {
  padding:72px 0 40px;
  background:linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}
.company-intro-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:34px;
  align-items:start;
}
.company-intro-text h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.2rem,4vw,3.1rem);
  font-weight:900;
  color:var(--blue);
  letter-spacing:-1px;
  line-height:1.05;
  margin-bottom:16px;
}
.company-intro-text p {
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.85;
  margin-bottom:22px;
}
.company-intro-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.company-outline-dark {
  border-color:rgba(0,0,0,.18);
  color:var(--text);
  backdrop-filter:none;
}
.company-outline-dark:hover {
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.26);
  color:var(--text);
}
.company-intro-cards { display:grid; gap:14px }
.company-mini-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px;
  box-shadow:var(--sh1);
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.company-mini-card:hover { transform:translateY(-4px); box-shadow:var(--sh2) }
.company-mini-icon {
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(0,77,153,.12), rgba(255,153,0,.12));
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:1.1rem;
}
.company-mini-card h3 {
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:-.2px;
  margin-bottom:4px;
  color:var(--dark);
}
.company-mini-card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.6 }
.hero-card {
  max-width:620px;
  padding:28px 28px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  color:#111;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 70px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
}
.hero.hero-ikea .hero-eyebrow { color:#111; opacity:.9 }
.hero.hero-ikea h1 { color:#111 }
.hero.hero-ikea p { color:rgba(17,17,17,.78) }
.hero-ikea-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
}
.hero-ikea-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.hero-ikea-shop { margin-left:auto }
.ikea-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  transition:var(--t);
}
.ikea-btn:hover { transform:translateY(-2px); background:#000 }
.ikea-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:#111;
  padding:10px 6px;
  border-radius:999px;
  transition:var(--t);
}
.ikea-link:hover { background:rgba(17,17,17,.07); transform:translateY(-1px) }
.hero h1 {
  font-family:'Barlow',sans-serif;
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:900; line-height:1.08;
  letter-spacing:-1.5px;
  margin:0 auto 16px;
}
.hero p {
  font-size:1.12rem;
  margin:0 auto 22px;
  opacity:.92;
  max-width:720px;
  line-height:1.75;
  font-weight:400;
}
.highlight {
  color:var(--orange);
  position:relative; white-space:nowrap;
}
.highlight::after {
  content:'';
  position:absolute; bottom:6px; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),transparent);
  border-radius:2px;
}
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap }

/* ── Grid / Cols ── */
.row      { display:flex; flex-wrap:wrap; margin:0 -16px }
.col-half { width:50%; padding:0 16px }

/* ── Feature Boxes ── */
.feature-box {
  height:310px;
  background-size:cover; background-position:center;
  border-radius:var(--r);
  position:relative; overflow:hidden;
  margin-bottom:20px;
  box-shadow:var(--sh2);
  cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s;
}
.feature-box::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,77,153,.15),transparent);
  opacity:0; transition:opacity .4s; z-index:1;
}
.feature-box:hover { transform:translateY(-8px) scale(1.01); box-shadow:var(--sh3) }
.feature-box:hover::before { opacity:1 }

.box-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.16) 55%, transparent 100%);
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start;
  color:#fff; padding:30px;
  transition:background .4s;
}
.box-overlay h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.5rem; font-weight:800;
  letter-spacing:.3px; margin-bottom:6px;
}
.box-overlay p { font-size:.92rem; opacity:.85; margin-bottom:12px }
.feature-box:hover .box-overlay {
  background:linear-gradient(0deg,rgba(0,55,140,.84) 0%,rgba(0,0,0,.1) 65%,transparent 100%);
}

/* About */
.about-img {
  width:100%; border-radius:var(--r);
  box-shadow:var(--sh3);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.about-img:hover { transform:translateY(-8px) rotate(.4deg); box-shadow:0 32px 72px rgba(0,0,0,.22) }

.content-center { display:flex; flex-direction:column; justify-content:center }
.content-center h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.4rem; font-weight:900;
  color:var(--blue); margin-bottom:18px;
  letter-spacing:-1px; line-height:1.1;
}
.content-center p { color:var(--muted); margin-bottom:14px; line-height:1.8 }

.feature-list { margin-top:22px }
.feature-list li {
  margin-bottom:10px;
  display:flex; align-items:center; gap:12px;
  font-weight:500; padding:10px 14px;
  border-radius:var(--r-sm);
  border-left:3px solid transparent;
  transition:background .22s, border-color .22s;
}
.feature-list li:hover { background:rgba(0,77,153,.06); border-left-color:var(--orange) }
.feature-list i { color:var(--orange); font-size:1.1rem; flex-shrink:0 }

/* ── CTA ── */
.cta-section {
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%);
  position:relative; overflow:hidden;
}
/* decorative circle */
.cta-section::before {
  content:'';
  position:absolute; top:-160px; right:-160px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,153,0,.1) 0%,transparent 70%);
  animation:pulse 6s ease-in-out infinite;
}
.cta-section::after {
  content:'';
  position:absolute; bottom:-80px; left:-80px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,77,153,.12) 0%,transparent 70%);
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.cta-section h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.8rem; font-weight:900; letter-spacing:-1px;
}

/* ── Services ── */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:24px;
}
.service-card {
  background:var(--card);
  padding:44px 32px;
  border-radius:var(--r);
  box-shadow:var(--sh1);
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  text-align:center;
  transition:transform .32s var(--ease), box-shadow .32s, border-color .32s;
}
/* animated top bar */
.service-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--red));
  background-size:200%;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.service-card:hover::before { transform:scaleX(1) }
.service-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--sh2); border-color:rgba(0,77,153,.2);
}

/* ── Careers ── */
.careers-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:28px;
}
.career-card {
  background:var(--card);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh1);
  border:1px solid var(--border);
  transition:transform .35s var(--ease), box-shadow .35s;
  display:flex;
  flex-direction:column;
}
.career-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--sh2);
  border-color:rgba(0,77,153,.2);
}
.career-img {
  height:200px;
  overflow:hidden;
  position:relative;
}
.career-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.career-card:hover .career-img img {
  transform:scale(1.08);
}
.career-body {
  padding:30px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.career-body h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem; font-weight:800; color:var(--dark); margin-bottom:12px;
}
.career-meta {
  display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.career-meta .badge {
  background:rgba(0,77,153,.08); color:var(--blue);
  padding:4px 10px; border-radius:4px; font-size:0.8rem; font-weight:600;
}
.career-body p {
  color:var(--muted); font-size:0.95rem; line-height:1.6; margin-bottom:24px; flex:1;
}
.career-body .btn {
  align-self:flex-start;
}

.icon-box {
  font-size:2.8rem; color:var(--blue);
  margin-bottom:22px; display:inline-block;
  transition:transform .35s var(--spring), color .3s;
}
.service-card:hover .icon-box { transform:scale(1.22) rotate(-8deg); color:var(--orange) }
.service-card h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.25rem; font-weight:800;
  letter-spacing:.2px; margin-bottom:12px; color:var(--dark);
}
.service-card p { color:var(--muted); font-size:.9rem; line-height:1.7 }

/* ── Shop / Products ── */
.filter-section { display:flex; flex-direction:column; align-items:center; gap:22px; margin-bottom:52px }

.search-wrapper { position:relative; width:100%; max-width:520px }
.search-wrapper input {
  width:100%; padding:14px 28px; padding-right:60px;
  border:2px solid var(--border); border-radius:50px;
  font-family:'Barlow',sans-serif; font-size:.95rem;
  background:var(--card); color:var(--text);
  transition:var(--t); box-shadow:var(--sh1); outline:none;
}
.search-wrapper input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,77,153,.1);
}
.search-wrapper button {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  color:#fff; cursor:pointer; transition:var(--t);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.search-wrapper button:hover { transform:translateY(-50%) scale(1.1); box-shadow:0 4px 16px rgba(0,77,153,.3) }

.filter-container { display:flex; justify-content:center; flex-wrap:wrap; gap:10px }
.filter-btn {
  font-family:'Barlow Condensed',sans-serif;
  padding:9px 28px; background:transparent;
  border:2px solid var(--border); border-radius:50px;
  cursor:pointer; font-weight:700; font-size:.95rem;
  letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); transition:var(--t);
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--blue); background:var(--blue);
  color:#fff; box-shadow:0 4px 16px rgba(0,77,153,.28);
  transform:translateY(-2px);
}

.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:28px }

/* ── Carousel for Home Featured ── */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}
.carousel-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}
.carousel-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.carousel-track .product-card {
  min-width: 280px;
  max-width: 320px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh1);
  color: var(--dark);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--t);
}
.carousel-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.carousel-prev { left: -15px; }
.carousel-next { right: -15px; }
@media (min-width: 1200px) {
  .carousel-prev { left: -20px; }
  .carousel-next { right: -20px; }
}

.product-card {
  background:var(--card); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh1);
  border:1px solid var(--border);
  transition:transform .35s var(--ease), box-shadow .35s;
  position:relative;
}
.product-card:hover { transform:translateY(-8px); box-shadow:var(--sh2) }

.product-img { height:240px; position:relative; overflow:hidden; background:var(--light); display:flex; align-items:center; justify-content:center }
.product-img img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .55s var(--ease);
  display:block;
}
.product-card:hover .product-img img { transform:scale(1.08) }

/* hover overlay */
.product-img::after {
  content:'\f06e  View';
  font-family:'Font Awesome 6 Free', 'Barlow', sans-serif;
  font-weight:900;
  position:absolute; inset:0;
  background:rgba(0,60,140,.55);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; gap:8px;
  opacity:0; transition:opacity .3s;
  letter-spacing:.5px;
  z-index:1;
}
.product-card:hover .product-img::after { opacity:1 }
/* Hide VIEW overlay on mobile touch devices */
@media(hover:none) {
  .product-img::after { display:none }
}

.badge-new, .badge-sale {
  position:absolute; top:12px; left:12px;
  font-family:'Barlow Condensed',sans-serif;
  padding:4px 13px; border-radius:50px;
  color:#fff; font-size:.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.8px;
  z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.badge-new  { background:linear-gradient(135deg,var(--blue),#0080ff) }
.badge-sale { background:linear-gradient(135deg,var(--red),#ff3333) }

.product-details { padding:18px 20px }
.product-cat {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; color:var(--blue);
  text-transform:uppercase; letter-spacing:2px;
  display:block; margin-bottom:7px; font-weight:700;
}
.product-details h4 {
  font-family:'Barlow',sans-serif;
  font-size:.92rem; font-weight:700;
  margin-bottom:6px; color:var(--dark); line-height:1.35;
  transition:color .22s;
  display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-card:hover .product-details h4 { color:var(--blue) }
.product-desc {
  font-size:.85rem; color:var(--muted);
  margin-bottom:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:13px; border-top:1px solid var(--border);
}
.price {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem; font-weight:900;
  color:var(--red); letter-spacing:-.3px;
}
.old-price { font-size:.88rem; text-decoration:line-through; color:#bbb; margin-right:4px }

.btn-cart {
  background:var(--light); border:1.5px solid var(--border);
  padding:8px 16px; border-radius:var(--r-sm);
  cursor:pointer; font-family:'Barlow',sans-serif;
  font-weight:700; font-size:.82rem;
  color:var(--text); transition:var(--t);
  display:flex; align-items:center; gap:6px;
}
.btn-cart:hover {
  background:var(--orange); border-color:var(--orange);
  color:#fff; transform:scale(1.06);
  box-shadow:0 4px 14px rgba(255,153,0,.4);
}

/* ── Product Detail ── */
.breadcrumb { padding:18px 0; color:var(--muted); font-size:.88rem }
.breadcrumb a { color:var(--blue); transition:color .2s }
.breadcrumb a:hover { text-decoration:underline }

.product-detail-wrapper {
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  background:var(--card); border-radius:var(--r);
  padding:32px; box-shadow:var(--sh2); border:1px solid var(--border);
}
.product-gallery { display:flex; flex-direction:column; gap:14px }

.main-image-container {
  position:relative; width:100%; border-radius:var(--r);
  overflow:hidden; border:1px solid var(--border);
  background:var(--light);
}
.main-image img { width:100%; height:auto; max-height:500px; display:block; object-fit:contain; transition:transform .4s; cursor:zoom-in }
.main-image-container:hover .main-image img { transform:scale(1.03) }
.main-image-container:hover .main-image img { transform:scale(1.03) }

.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.95); color:var(--dark);
  border:none; width:42px; height:42px; border-radius:50%;
  cursor:pointer; transition:var(--t); z-index:2;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh1);
}
.slider-btn:hover { background:var(--blue); color:#fff; transform:translateY(-50%) scale(1.1) }
.slider-btn.prev { left:12px }
.slider-btn.next { right:12px }

.thumb-list { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px }
.thumb-item {
  width:76px; height:76px; border:2px solid transparent;
  border-radius:var(--r-sm); cursor:pointer; opacity:.6;
  flex-shrink:0; overflow:hidden; transition:var(--t);
}
.thumb-item.active, .thumb-item:hover { border-color:var(--blue); opacity:1 }
.thumb-item img { width:100%; height:100%; object-fit:cover }

.product-info h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2rem; font-weight:900; letter-spacing:-.5px;
  margin-bottom:14px; color:var(--dark); line-height:1.2;
}
.price-tag {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.2rem; color:var(--red); font-weight:900;
  margin-bottom:14px; letter-spacing:-.5px;
  background:rgba(204,0,0,.06);
  display:inline-block; padding:6px 18px;
  border-radius:var(--r-sm); border-left:3px solid var(--red);
}
.stock-status { color:#22a746; font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:7px; font-size:.92rem }
.short-desc { color:var(--muted); margin-bottom:26px; border-bottom:1px solid var(--border); padding-bottom:20px; line-height:1.8 }

.quantity-selector { margin-bottom:26px; display:flex; align-items:center; gap:18px; font-weight:600 }
.qty-input { width:54px; text-align:center; border:1.5px solid var(--border); border-radius:var(--r-sm); height:38px; font-size:1rem; font-weight:700; font-family:'Barlow',sans-serif }

.action-buttons { display:flex; gap:14px; margin-bottom:18px }
.btn-action {
  flex:1; padding:14px; border:none; border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.05rem; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; cursor:pointer; transition:var(--t); text-align:center;
}
.btn-action.add-cart {
  background:linear-gradient(135deg,#ffd700,#ffa500); color:#1a1a1a;
  box-shadow:0 4px 14px rgba(255,165,0,.3);
}
.btn-action.add-cart:hover  { transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,165,0,.45) }
.btn-action.buy-now {
  background:linear-gradient(135deg,var(--red),#ff2020); color:#fff;
  box-shadow:0 4px 14px rgba(204,0,0,.3);
}
.btn-action.buy-now:hover  { transform:translateY(-3px); box-shadow:0 8px 24px rgba(204,0,0,.45) }

.chat-seller-btn {
  display:inline-flex; align-items:center; gap:9px;
  color:#229ED9; font-weight:700; margin-top:10px;
  padding:9px 18px; border-radius:var(--r-sm);
  border:1.5px solid rgba(34,158,217,.3);
  transition:var(--t); font-size:.95rem;
}
.chat-seller-btn:hover { background:rgba(34,158,217,.08); transform:translateY(-2px) }

.product-tabs { margin-top:36px; background:var(--card); padding:26px; border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--sh1) }
.tab-headers  { display:flex; border-bottom:2px solid var(--border); margin-bottom:22px }
.tab-btn {
  font-family:'Barlow Condensed',sans-serif;
  padding:10px 24px; background:none; border:none;
  font-size:1rem; cursor:pointer; color:var(--muted);
  border-bottom:3px solid transparent; margin-bottom:-2px;
  font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  transition:var(--t);
}
.tab-btn.active { color:var(--blue); border-bottom-color:var(--blue) }
.tab-btn:hover:not(.active) { color:var(--blue) }
.tab-content { display:none; color:var(--muted); line-height:1.8 }
/* ── Video Player (Multi-Platform: YouTube / Facebook / TikTok) ── */
.pv-player-wrap {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 720px;
}

/* 16:9 responsive iframe container */
.pv-iframe-container {
  position: relative; width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-sm); overflow: hidden;
  background: #000; border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.pv-iframe-container iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* TikTok embed container */
.pv-tiktok-container {
  display: flex; justify-content: center;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--light);
  min-height: 480px; align-items: center;
}
.pv-tiktok-container .tiktok-embed {
  margin: 0 !important;
}

/* "Open on Platform" button */
.pv-open-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 50px;
  font-family: 'Barlow', sans-serif; font-weight: 700; font-size: .88rem;
  color: #fff; text-decoration: none; transition: var(--t);
  width: fit-content;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  box-shadow: 0 4px 14px rgba(255,0,0,.3);
}
.pv-open-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,0,0,.45); color: #fff; }
.pv-open-btn i { font-size: 1rem; }

.pv-fb-btn  { background: linear-gradient(135deg, #1877F2, #0d5fcb); box-shadow: 0 4px 14px rgba(24,119,242,.3); }
.pv-fb-btn:hover  { box-shadow: 0 8px 22px rgba(24,119,242,.45); }

.pv-tiktok-btn { background: linear-gradient(135deg, #010101, #333); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.pv-tiktok-btn:hover { box-shadow: 0 8px 22px rgba(0,0,0,.45); }

/* Dark mode */
body.dark-mode .pv-iframe-container { border-color: #2a3345; }
body.dark-mode .pv-tiktok-container { background: #1f2430; border-color: #2a3345; }

/* Old class kept as alias */
.product-video-wrap { max-width: 720px; }
.product-video-wrap iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-sm); }

/* ── YouTube Click-to-Play Thumbnail Player ── */
.pv-yt-thumb {
  position: relative; width: 100%; max-width: 720px;
  aspect-ratio: 16/9; border-radius: var(--r-sm);
  overflow: hidden; cursor: pointer;
  background: #000 center/cover no-repeat;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.pv-yt-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.3);
  transition: background .2s;
}
.pv-yt-thumb:hover .pv-yt-overlay { background: rgba(0,0,0,.15); }
.pv-yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: none; border: none; cursor: pointer;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
  transition: transform .2s;
}
.pv-yt-thumb:hover .pv-yt-play { transform: translate(-50%,-50%) scale(1.1); }
.pv-yt-label {
  position: absolute; bottom: 12px; left: 14px;
  color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.pv-yt-label i { color: #ff0000; font-size: 1rem; }
.pv-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ── Admin Collapsible Section ── */
.adm-section-toggle {
  display: flex; align-items: center;
  background: var(--light); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-weight: 700; font-size: .88rem; cursor: pointer;
  user-select: none; transition: var(--t);
  margin-bottom: 0 !important;
}
.adm-section-toggle:hover { background: rgba(0,77,153,.06); border-color: var(--blue); }
.adm-chev { margin-left: auto; font-size: .8rem; transition: transform .25s; color: var(--muted); }
.adm-section-toggle.open .adm-chev { transform: rotate(180deg); }

.adm-section-body {
  display: none;
  margin-top: 0 !important;
  padding-left: 4px;
}
.adm-section-toggle.open ~ .adm-section-body { display: block; }

/* ── Admin Toggle Switch ── */
.adm-switch {
  position: relative; display: inline-block;
  width: 34px; height: 18px;
  margin-left: 10px; margin-right: auto; /* Push chevron to the right */
}
.adm-switch input { opacity: 0; width: 0; height: 0; }
.adm-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc; transition: .4s;
  border-radius: 34px;
}
.adm-slider:before {
  position: absolute; content: "";
  height: 14px; width: 14px;
  left: 2px; bottom: 2px;
  background-color: white; transition: .4s;
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
input:checked + .adm-slider { background-color: var(--blue); }
input:checked + .adm-slider:before { transform: translateX(16px); }


.specs-table { width:100%; border-collapse:collapse; margin-top:10px }
.specs-table th, .specs-table td { padding:12px 16px; border:1px solid var(--border); text-align:left }
.specs-table th { background:var(--light); font-weight:700; width:32%; color:var(--dark); font-size:.88rem }
.specs-table tr:hover td { background:rgba(0,77,153,.025) }

/* ── Product Detail — Enhanced Professional Styles ── */

/* Arrival / Deal Badge */
.pd-arrival-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--blue),#0080ff);
  color:#fff; font-size:.72rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; padding:5px 14px; border-radius:50px;
  margin-bottom:10px; box-shadow:0 4px 14px rgba(0,77,153,.3);
  animation: badgePulse 2s ease-in-out infinite;
}
.pd-arrival-badge.pd-arrival-hot {
  background:linear-gradient(135deg,var(--red),#ff2020);
  box-shadow:0 4px 14px rgba(204,0,0,.3);
}
@keyframes badgePulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.04); }
}

/* Category tag in product info */
.pd-info-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.pd-category-pill {
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif; font-size:.72rem;
  font-weight:800; text-transform:uppercase; letter-spacing:2px;
  color:var(--blue); background:rgba(0,77,153,.08);
  padding:4px 14px; border-radius:50px; border:1px solid rgba(0,77,153,.15);
}

/* Product title */
.pd-title { font-size:1.85rem; font-weight:900; line-height:1.22; margin-bottom:10px; }

/* Star Rating */
.pd-rating {
  display:flex; align-items:center; gap:7px;
  margin-bottom:16px;
}
.pd-stars { display:flex; gap:2px; }
.pd-stars i { color:#f5a623; font-size:1rem; }
.pd-rating-val {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:1rem; color:var(--dark);
}
.pd-rating-sep { color:var(--muted); }
.pd-rating-count { font-size:.85rem; color:var(--muted); }

/* Price Row */
.pd-price-row {
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:16px;
}
.pd-stock-badge {
  display:inline-flex; align-items:center; gap:6px;
  color:#22a746; font-weight:700; font-size:.88rem;
  background:rgba(34,167,70,.09); padding:6px 14px;
  border-radius:50px; border:1px solid rgba(34,167,70,.2);
}

/* Feature Highlights (from specs) */
.pd-feature-highlights {
  display:flex; flex-direction:column; gap:8px;
  margin:16px 0; padding:16px 18px;
  background:rgba(0,77,153,.04); border-radius:var(--r-sm);
  border-left:3px solid var(--blue);
}
.pd-feature-item {
  display:flex; align-items:center; gap:10px;
}
.pd-feature-item i {
  color:var(--blue); font-size:.9rem; flex-shrink:0;
}
.pd-feature-item strong {
  font-weight:700; color:var(--dark); font-size:.88rem;
  margin-right:6px;
}
.pd-feature-item span {
  color:var(--muted); font-size:.88rem;
}

/* Delivery strip */
.pd-delivery-strip {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--light); border-radius:var(--r-sm);
  padding:10px 16px; margin:16px 0;
  border:1px solid var(--border); font-size:.82rem;
}
.pd-delivery-item {
  display:flex; align-items:center; gap:6px; color:var(--muted);
}
.pd-delivery-item i { color:var(--blue); font-size:.85rem; }

/* Divider */
.pd-divider {
  border:none; height:1px;
  background:linear-gradient(90deg,var(--border),transparent);
  margin:14px 0;
}

/* Qty controls spacing */
.pd-qty-label { font-weight:700; color:var(--dark); }
.pd-qty-controls { gap:10px; }
.pd-qty-controls .qty-btn {
  width:36px; height:36px; font-size:.85rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.pd-qty-controls .qty-input {
  width:60px; height:36px; font-size:1.05rem;
}

/* Online dot on chat btn */
.pd-online-dot {
  width:8px; height:8px; border-radius:50%;
  background:#22a746; display:inline-block; margin-left:4px;
  box-shadow:0 0 0 2px rgba(34,167,70,.3);
  animation:onlinePulse 1.8s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%,100% { box-shadow:0 0 0 2px rgba(34,167,70,.3); }
  50% { box-shadow:0 0 0 5px rgba(34,167,70,.1); }
}

/* Trust Badges */
.pd-trust-badges {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-top:20px;
}
.pd-trust-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:var(--light); border:1px solid var(--border);
  border-radius:var(--r-sm); font-size:.8rem; font-weight:600;
  color:var(--text); transition:var(--t);
}
.pd-trust-item:hover {
  border-color:var(--blue); background:rgba(0,77,153,.04);
  transform:translateY(-2px);
}
.pd-trust-item i {
  font-size:1.1rem; color:var(--blue); flex-shrink:0;
}

/* Zoom hint overlay on main image */
.pd-zoom-hint {
  position:absolute; bottom:10px; right:10px;
  background:rgba(0,0,0,.55); color:#fff;
  padding:5px 12px; border-radius:50px;
  font-size:.72rem; font-weight:600; letter-spacing:.3px;
  display:flex; align-items:center; gap:6px;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.main-image-container:hover .pd-zoom-hint { opacity:1; }

/* Gallery footer (share + wishlist row) */
.pd-gallery-footer {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-top:10px;
  padding-top:12px; border-top:1px solid var(--border);
}

/* Wishlist button in detail */
.pd-wishlist-detail {
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1.5px solid var(--border);
  border-radius:50px; padding:7px 16px;
  font-family:'Barlow',sans-serif; font-weight:700; font-size:.82rem;
  color:var(--muted); cursor:pointer; transition:var(--t);
}
.pd-wishlist-detail:hover,
.pd-wishlist-detail.active {
  border-color:#e74c3c; color:#e74c3c;
  background:rgba(231,76,60,.06);
}
.pd-wishlist-detail.active i { font-weight:900; }

/* Social Share row */
.pd-share {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pd-share-label {
  font-size:.8rem; font-weight:700; color:var(--muted); margin-right:2px;
}
.pd-share-btn {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; color:#fff; transition:var(--t);
  border:none; cursor:pointer;
}
.pd-share-btn:hover { transform:translateY(-3px) scale(1.12); }
.pd-fb { background:#1877F2; }
.pd-tg { background:#229ED9; }
.pd-wa { background:#25D366; }
.pd-copy { background:var(--dark); }
.pd-copy.copied { background:var(--blue); }

/* Tab icons spacing */
.tab-btn i { margin-right:5px; font-size:.88rem; }
.pd-tab-desc {
  font-size:.95rem; line-height:1.85; color:var(--muted);
  max-width:680px;
}

/* ── Dark Mode: New PD Styles ── */
body.dark-mode .pd-category-pill { background:rgba(77,166,255,.1); border-color:rgba(77,166,255,.2); }
body.dark-mode .pd-arrival-badge { box-shadow:0 4px 14px rgba(77,166,255,.25); }
body.dark-mode .pd-feature-highlights { background:rgba(77,166,255,.06); border-left-color:#4da6ff; }
body.dark-mode .pd-feature-item strong { color:#dce4ef; }
body.dark-mode .pd-delivery-strip { background:#1f2430; border-color:#2a3345; }
body.dark-mode .pd-trust-item { background:#1f2430; border-color:#2a3345; color:#dce4ef; }
body.dark-mode .pd-trust-item:hover { border-color:#4da6ff; background:rgba(77,166,255,.06); }
body.dark-mode .pd-trust-item i { color:#4da6ff; }
body.dark-mode .pd-wishlist-detail { border-color:#2a3345; color:#8a96a6; background:#1f2430; }
body.dark-mode .pd-copy { background:#dce4ef; color:#1c2230; }
body.dark-mode .pd-gallery-footer { border-top-color:#2a3345; }
body.dark-mode .pd-share-label { color:#8a96a6; }
body.dark-mode .pd-rating-val { color:#dce4ef; }
body.dark-mode .pd-stock-badge { color:#34d399; background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.2); }
body.dark-mode .pd-title { color:#f0f0f0; }

.mobile-action-bar {
  display:none; position:fixed; bottom:0; left:0;
  width:100%; height:60px; background:#fff;
  box-shadow:0 -3px 20px rgba(0,0,0,.12); z-index:10000;
}
@media(max-width:768px) {
  .mobile-action-bar {
    bottom:64px; /* sit above the bottom tab nav bar */
  }
}
.mobile-action-bar .action-btn { display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; cursor:pointer }
.mobile-action-bar .chat    { width:20%; flex-direction:column; font-size:.68rem; color:var(--muted); gap:3px; border-right:1px solid var(--border) }
.mobile-action-bar .chat i  { font-size:1.2rem; color:#229ED9 }
.mobile-action-bar .add-cart { width:40%; background:linear-gradient(135deg,#ffd700,#ffa500); color:#1a1a1a }
.mobile-action-bar .buy-now  { width:40%; background:linear-gradient(135deg,var(--red),#ff2020); color:#fff }


/* ── Contact ── */
.contact-form { background:var(--card); padding:40px; border-radius:var(--r); box-shadow:var(--sh2); border:1px solid var(--border) }
.form-group { margin-bottom:18px }
.form-group input, .form-group textarea {
  width:100%; padding:14px 18px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:'Barlow',sans-serif; font-size:.95rem;
  background:var(--card); color:var(--text); transition:var(--t);
}
.form-group input:focus, .form-group textarea:focus {
  border-color:var(--blue); outline:none;
  box-shadow:0 0 0 4px rgba(0,77,153,.09);
}
.full-width { width:100% }

.contact-buttons-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:14px; margin-top:28px }
.contact-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 10px; background:var(--card);
  border:1.5px solid var(--border); border-radius:var(--r);
  transition:var(--t); text-align:center;
  box-shadow:var(--sh1); color:var(--dark);
}
.contact-btn:hover { transform:translateY(-5px); box-shadow:var(--sh2) }
.contact-btn .icon-wrapper {
  width:46px; height:46px; border-radius:50%;
  background:var(--light); display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; font-size:1.25rem; transition:var(--t);
}
.contact-btn:hover .icon-wrapper    { color:#fff; transform:scale(1.12) }
.contact-btn.email:hover    .icon-wrapper { background:#EA4335 }
.contact-btn.facebook:hover .icon-wrapper { background:#1877F2 }
.contact-btn.telegram:hover .icon-wrapper { background:#229ED9 }
.contact-btn.phone:hover    .icon-wrapper { background:#28a745 }
.contact-btn.location:hover .icon-wrapper { background:var(--orange) }
.contact-btn span { font-size:.82rem; font-weight:700; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; text-transform:uppercase }

/* ── Footer ── */
footer {
  background:linear-gradient(160deg,#071520 0%,#0d263b 100%);
  color:#c8d4e0; padding-top:72px; position:relative;
}
/* colored top strip */
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange),var(--red));
}
.footer-content {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-col h3 {
  font-family:'Barlow Condensed',sans-serif;
  color:#fff; margin-bottom:22px;
  font-size:1.1rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.footer-brand img {
  width:58px;
  height:58px;
  object-fit:contain;
  padding:6px;
  border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.08);
}
.footer-brand h3 { margin-bottom:4px }
.footer-brand small {
  display:block;
  color:rgba(200,212,224,.6);
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:700;
}
.footer-col p  { line-height:1.8; font-size:.9rem; color:rgba(200,212,224,.78) }
.footer-col ul li { margin-bottom:11px }
.footer-col ul li a {
  color:rgba(200,212,224,.65); font-size:.9rem;
  display:inline-flex; align-items:center; gap:7px;
  transition:var(--t);
}
.footer-col ul li a::before { content:'›'; color:var(--orange); font-weight:700 }
.footer-col ul li a:hover    { color:var(--orange); padding-left:4px }

.social-links { display:flex; gap:12px; margin-top:10px }
.nav-icon-btn {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:var(--t);
}
.nav-icon-btn:hover { transform:translateY(-4px) scale(1.12); box-shadow:0 8px 20px rgba(0,0,0,.3) }
.nav-icon-btn.telegram { background:#229ED9 }
.nav-icon-btn.facebook { background:#1877F2 }
.nav-icon-btn.phone    { background:#28a745 }

.footer-bottom { text-align:center; padding:20px 0; font-size:.84rem; color:rgba(200,212,224,.4) }

/* ── Toast ── */
.toast {
  visibility:hidden; min-width:280px;
  background:linear-gradient(135deg,var(--dark),var(--dark-2));
  color:#fff; text-align:center;
  border-radius:50px; padding:14px 26px;
  position:fixed; z-index:10000;
  left:50%; bottom:30px; transform:translateX(-50%);
  font-family:'Barlow',sans-serif; font-size:.95rem;
  box-shadow:0 10px 36px rgba(0,0,0,.3);
  border-left:4px solid var(--orange);
}
.toast.show { visibility:visible; animation:toastIn .4s var(--ease), toastOut .4s 2.6s var(--ease) forwards }
@keyframes toastIn  { from{bottom:0;opacity:0;transform:translateX(-50%) scale(.88)} to{bottom:30px;opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes toastOut { from{opacity:1;bottom:30px} to{opacity:0;bottom:8px} }

/* ── Cart Modal ── */
.cart-modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  z-index:100001; display:none; justify-content:flex-end;
}
.cart-modal-overlay.open { display:flex }

.cart-modal {
  background:var(--card); width:420px; max-width:100%; height:100%;
  display:flex; flex-direction:column;
  box-shadow:-12px 0 50px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .38s var(--ease);
}
.cart-modal-overlay.open .cart-modal { transform:translateX(0) }

.cart-header {
  padding:20px 24px;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  color:#fff; display:flex; justify-content:space-between; align-items:center;
}
.cart-header h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.2rem; font-weight:800; letter-spacing:.5px; margin:0;
}
.close-cart {
  cursor:pointer; font-size:1.4rem;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .2s;
}
.close-cart:hover { background:rgba(255,255,255,.22) }

.cart-body { flex:1; overflow-y:auto; padding:20px 24px }
.cart-item {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; border-bottom:1px solid var(--border);
  padding-bottom:14px;
  animation:slideIn .3s var(--ease) both;
}
@keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
.cart-item-info h5 { margin:0 0 4px; color:var(--dark); font-size:.95rem; font-weight:600 }
.cart-item-price   { color:var(--red); font-weight:800; font-size:.95rem; font-family:'Barlow Condensed',sans-serif }
.remove-item { color:#ccc; cursor:pointer; background:none; border:none; padding:6px; border-radius:50%; transition:var(--t) }
.remove-item:hover { color:var(--red); background:rgba(204,0,0,.08) }

.cart-footer { padding:20px 24px; border-top:1px solid var(--border); background:var(--light) }
.cart-total {
  display:flex; justify-content:space-between;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.3rem; font-weight:900; margin-bottom:16px; color:var(--dark);
}
.cart-actions { display:flex; flex-direction:column; gap:10px; margin-top:10px }

.social-checkout-btn {
  width:100%; padding:13px; border:none; border-radius:var(--r-sm);
  font-family:'Barlow Condensed',sans-serif;
  color:#fff; font-size:1rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
  transition:var(--t);
}
.social-checkout-btn:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(0,0,0,.22); color:#fff }
.btn-telegram { background:linear-gradient(135deg,#229ED9,#1a8ec0) }
.btn-facebook { background:linear-gradient(135deg,#1877F2,#1460c0) }
.btn-phone    { background:linear-gradient(135deg,#28a745,#1e8035) }
.dual-btns    { display:flex; gap:10px }
.dual-btns .social-checkout-btn { flex:1 }

.qty-controls { display:flex; align-items:center; gap:8px; margin-right:10px }
.qty-btn {
  width:28px; height:28px;
  background:var(--light); border:1.5px solid var(--border);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; font-weight:700; transition:var(--t);
}
.qty-btn:hover { background:var(--orange); color:#fff; border-color:var(--orange) }
.qty-val { font-weight:800; min-width:22px; text-align:center; font-family:'Barlow Condensed',sans-serif }

/* ── Invoice ── */
.invoice-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(5px); z-index:100001; display:none }
.invoice-backdrop.open { display:block }
.invoice-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--card); width:90%; max-width:680px;
  padding:40px; border-radius:var(--r); box-shadow:var(--sh3);
  z-index:100002; display:none; max-height:90vh; overflow-y:auto;
}
.invoice-modal.open { display:block; animation:popIn .35s var(--ease) }
@keyframes popIn { from{opacity:0;transform:translate(-50%,-50%) scale(.9)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.invoice-header { display:flex; justify-content:space-between; border-bottom:2px solid var(--dark); padding-bottom:20px; margin-bottom:24px }
.inv-logo  { font-family:'Barlow Condensed',sans-serif; font-size:1.8rem; font-weight:900; color:var(--red); letter-spacing:1px }
.inv-title { font-family:'Barlow Condensed',sans-serif; font-size:2rem; color:#333; text-transform:uppercase; letter-spacing:3px }
.invoice-body table { width:100%; border-collapse:collapse; margin-bottom:20px }
.invoice-body th, .invoice-body td { border-bottom:1px solid var(--border); padding:12px 8px; text-align:left }
.invoice-body th { font-weight:700; color:#555; font-size:.82rem; text-transform:uppercase; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px }
.text-right { text-align:right!important }
.invoice-summary { text-align:right; margin-top:20px; font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:900 }
.invoice-actions { margin-top:30px; display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.invoice-actions-right { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* ── Language Dropdown ── */
.lang-dropdown { position:relative }
.lang-btn {
  background:none; border:1.5px solid var(--border); border-radius:50px;
  padding:6px 14px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-family:'Barlow',sans-serif; font-size:.88rem; font-weight:700;
  color:var(--text); transition:var(--t);
}
.lang-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-ll) }
.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--card); box-shadow:var(--sh2);
  border-radius:var(--r); width:148px;
  display:none; flex-direction:column; overflow:hidden;
  z-index:1100; border:1px solid var(--border);
}
.lang-menu.show { display:flex; animation:dropDown .2s var(--ease) }
@keyframes dropDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.lang-menu a {
  padding:11px 16px; font-size:.9rem; font-weight:600;
  color:var(--text); border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .18s;
}
.lang-menu a:last-child { border-bottom:none }
.lang-menu a:hover { background:var(--light); color:var(--blue) }

/* ── Theme Toggle ── */
.theme-toggle {
  cursor:pointer; font-size:1.1rem;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--border);
  color:var(--text); transition:var(--t);
}
.theme-toggle:hover { background:var(--light); border-color:var(--blue); color:var(--blue) }

/* ── Dark Mode ── */
body.dark-mode {
  --blue:    #4da6ff;
  --blue-ll: rgba(77,166,255,.1);
  --dark:    #f0f0f0;
  --light:   #181c24;
  --light-2: #1f2430;
  --text:    #dce4ef;
  --muted:   #8a96a6;
  --card:    #1c2230;
  --border:  #2a3345;
  background:#12161e; color:var(--text);
}
body.dark-mode .navbar     { background:rgba(18,22,30,.97); border-bottom-color:#1e2535 }
body.dark-mode .theme-toggle { color:#ffb84d; border-color:#2a3345 }
body.dark-mode .theme-toggle:hover { background:#1f2430 }
body.dark-mode .bg-dark    { background:#0a0d12; color:#f0f0f0 }
body.dark-mode .product-detail-wrapper,
body.dark-mode .product-tabs,
body.dark-mode .contact-form { background:#1c2230; border-color:#2a3345 }
body.dark-mode .cart-modal { background:#1c2230 }
body.dark-mode .cart-footer { background:#181c24 }
body.dark-mode .cart-item  { border-bottom-color:#2a3345 }
body.dark-mode .qty-btn    { background:#1f2430; border-color:#2a3345; color:#dce4ef }
body.dark-mode input,
body.dark-mode textarea    { background:#1f2430; border-color:#2a3345; color:#dce4ef }
body.dark-mode .lang-menu  { background:#1c2230; border-color:#2a3345 }
body.dark-mode .lang-menu a { color:#dce4ef; border-bottom-color:#2a3345 }
body.dark-mode .lang-menu a:hover { background:#1f2430 }
body.dark-mode .specs-table th { background:#1f2430; color:#fff; border-color:#2a3345 }
body.dark-mode .specs-table td { border-color:#2a3345 }
body.dark-mode .mobile-action-bar { background:#1c2230; border-top:1px solid #2a3345 }
body.dark-mode .filter-btn { border-color:#2a3345; color:#8a96a6 }
body.dark-mode .navbar .nav-menu { background:#1c2230; border-top-color:#2a3345 }
body.dark-mode .mobile-bottom-bar { background:#1c2230 !important; border-top-color:#2a3345 !important }
body.dark-mode .feature-box .box-overlay {
  background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 60%,transparent 100%);
}
body.dark-mode .service-card,
body.dark-mode .product-card  { border-color:#2a3345 }

/* ── Dark Mode Text Visibility Fixes ── */
body.dark-mode .cart-header h3 { color:#fff }
body.dark-mode .cart-item-info h5 { color:#dce4ef }
body.dark-mode .cart-item-price { color:#ff9900 }
body.dark-mode .cart-total { color:#dce4ef }
body.dark-mode .close-cart { color:#dce4ef }
body.dark-mode .close-cart:hover { background:rgba(255,255,255,.15) }
body.dark-mode .cart-body { color:#dce4ef }
body.dark-mode .cart-footer { background:#151920 }
body.dark-mode .cart-footer .btn { color:#dce4ef; border-color:#2a3345 }
body.dark-mode .cart-footer .btn:hover { border-color:#4da6ff; color:#4da6ff }
body.dark-mode .cart-actions .btn { background:#1f2430; border-color:#2a3345; color:#dce4ef }
body.dark-mode .cart-actions .btn:hover { border-color:#4da6ff; color:#4da6ff; background:#1a2535 }

/* ── View Invoice Button Text Color ── */
.cart-footer .btn-outline { color:var(--text); border-color:var(--border); }
.cart-footer .btn-outline:hover { color:var(--blue); border-color:var(--blue); background:var(--blue-ll); }
body.dark-mode .cart-footer .btn-outline { color:#dce4ef; border-color:#2a3345; background:#1f2430; }
body.dark-mode .cart-footer .btn-outline:hover { color:#4da6ff; border-color:#4da6ff; background:rgba(77,166,255,.1); }
body.dark-mode .search-box { background:#1c2230; color:#dce4ef }
body.dark-mode .search-input-wrap { border-bottom-color:#2a3345 }
body.dark-mode .search-input-wrap input { color:#dce4ef }
body.dark-mode .search-result-item:hover { background:#1f2430 }
body.dark-mode .search-result-info h4 { color:#dce4ef }
body.dark-mode .search-no-result { color:#8a96a6 }
body.dark-mode .wishlist-btn { background:rgba(28,34,48,.9); color:#8a96a6 }
body.dark-mode .wishlist-btn.active { color:#ff6b6b }
body.dark-mode .toast { background:#1c2230; color:#dce4ef }
body.dark-mode .btn-cart { background:#1f2430; border-color:#2a3345; color:#dce4ef }
body.dark-mode .btn-cart:hover { background:#ff9900; border-color:#ff9900; color:#1a1a1a }
body.dark-mode .product-cat { color:#4da6ff }
body.dark-mode .product-details h4 { color:#dce4ef }
body.dark-mode .product-desc { color:#8a96a6 }
body.dark-mode .price { color:#ff6b6b }
body.dark-mode .stock-status { color:#34d399 }
body.dark-mode .short-desc { color:#8a96a6; border-bottom-color:#2a3345 }
body.dark-mode .quantity-selector { color:#dce4ef }
body.dark-mode .product-tabs { background:#1c2230; border-color:#2a3345 }
body.dark-mode .tab-content { color:#8a96a6 }
body.dark-mode .specs-table th { background:#1f2430; color:#dce4ef }
body.dark-mode .specs-table td { color:#8a96a6 }
body.dark-mode .breadcrumb { color:#8a96a6 }
body.dark-mode .breadcrumb a { color:#4da6ff }
body.dark-mode .chat-seller-btn { color:#229ED9; border-color:rgba(34,158,217,.3) }
body.dark-mode .chat-seller-btn:hover { background:rgba(34,158,217,.1) }
body.dark-mode .sub-heading { color:#ff9900 }
body.dark-mode .content-center h2 { color:#4da6ff }
body.dark-mode .content-center p { color:#8a96a6 }
body.dark-mode .feature-list li { color:#dce4ef }
body.dark-mode .feature-list li:hover { background:rgba(77,166,255,.08) }
body.dark-mode .feature-list i { color:#ff9900 }
body.dark-mode .contact-btn { background:#1c2230; border-color:#2a3345; color:#dce4ef }
body.dark-mode .contact-btn:hover { border-color:#4da6ff }
body.dark-mode .section-header h2 { color:#4da6ff }
body.dark-mode .service-card h3 { color:#dce4ef }
body.dark-mode .service-card p { color:#8a96a6 }
body.dark-mode .icon-box { color:#4da6ff }
body.dark-mode .footer-col h3 { color:#fff }
body.dark-mode .footer-col p { color:rgba(200,212,224,.7) }
body.dark-mode .footer-col ul li a { color:rgba(200,212,224,.6) }
body.dark-mode .footer-col ul li a:hover { color:#ff9900 }
body.dark-mode .hero-content h1 { color:#fff }
body.dark-mode .hero-content p { color:rgba(255,255,255,.85) }
body.dark-mode .page-header h1 { color:#fff }
body.dark-mode .page-header p { color:rgba(255,255,255,.85) }
body.dark-mode .cta-section h2 { color:#fff }
body.dark-mode .cta-section p { color:rgba(255,255,255,.75) }
body.dark-mode .price-tag { background:rgba(255,107,107,.1); color:#ff6b6b; border-left-color:#ff6b6b }
body.dark-mode .btn-primary { background:linear-gradient(135deg,#ff9900,#e68a00); color:#fff }
body.dark-mode .btn-primary:hover { background:linear-gradient(135deg,#ff4d4d,#cc0000); box-shadow:0 10px 32px rgba(204,0,0,.6); }
body.dark-mode .btn-outline { border-color:rgba(255,255,255,.3); color:#dce4ef }
body.dark-mode .btn-action.add-cart { background:linear-gradient(135deg,#ffd700,#ffa500); color:#1a1a1a }
body.dark-mode .btn-action.buy-now { background:linear-gradient(135deg,#cc0000,#ff2020); color:#fff }
body.dark-mode .badge-new { background:linear-gradient(135deg,#4da6ff,#0080ff) }
body.dark-mode .badge-sale { background:linear-gradient(135deg,#cc0000,#ff3333) }
body.dark-mode .search-overlay { background:rgba(0,0,0,.75) }
body.dark-mode .search-result-item img { border-color:#2a3345 }

/* ── Dark Mode Invoice Modal Fixes ── */
body.dark-mode .invoice-backdrop { background:rgba(0,0,0,.8) }
body.dark-mode .invoice-modal { background:#1c2230; color:#dce4ef }
body.dark-mode .invoice-header { border-bottom-color:#2a3345 }
body.dark-mode .inv-logo { color:#ff9900 }
body.dark-mode .inv-title { color:#dce4ef }
body.dark-mode .invoice-body th { color:#8a96a6; background:#1f2430; border-color:#2a3345 }
body.dark-mode .invoice-body td { color:#dce4ef; border-color:#2a3345 }
body.dark-mode .invoice-summary { color:#dce4ef }
body.dark-mode .invoice-summary span { color:#ff9900 }
body.dark-mode .invoice-actions button { color:#dce4ef; border-color:#2a3345 }
body.dark-mode .invoice-actions button:hover { border-color:#4da6ff; color:#4da6ff }

/* ── Dark Mode: Home New Sections ── */
body.dark-mode .stats-card h3 { color:#4da6ff }
body.dark-mode .stats-card p { color:rgba(255,255,255,.5) }
body.dark-mode .stats-icon { color:#ff9900 }
body.dark-mode .about-preview-content h2 { color:#4da6ff }
body.dark-mode .about-preview-content > p { color:#8a96a6 }
body.dark-mode .about-features-list li { color:#dce4ef; border-bottom-color:#2a3345 }
body.dark-mode .about-features-list i { color:#ff9900 }
body.dark-mode .logo-mark {
  background:linear-gradient(145deg, rgba(28,34,48,.96), rgba(22,28,38,.96));
  border-color:#2a3345;
  box-shadow:0 10px 28px rgba(0,0,0,.26);
}
body.dark-mode .logo-sub { color:#8a96a6 }
body.dark-mode .logo .logo-text { color:#ff6b6b }
body.dark-mode .hero-outline-btn { border-color:rgba(255,255,255,.25); background:rgba(28,34,48,.28) }
body.dark-mode .home-promo-banner { background:linear-gradient(180deg, #12161e 0%, #181c24 100%) }
body.dark-mode .home-promo-wrap {
  background:linear-gradient(135deg, rgba(77,166,255,.12), rgba(255,153,0,.1));
  border-color:#2a3345;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}
body.dark-mode .home-promo-kicker { background:rgba(28,34,48,.7); border-color:#2a3345; color:#4da6ff }
body.dark-mode .home-promo-left h2 { color:#dce4ef }
body.dark-mode .home-promo-left p { color:#8a96a6 }
body.dark-mode .home-promo-outline { border-color:rgba(255,255,255,.16); color:#dce4ef; background:rgba(28,34,48,.45) }
body.dark-mode .home-promo-outline:hover { border-color:rgba(255,255,255,.25); background:rgba(28,34,48,.7) }
body.dark-mode .home-promo-tile { background:rgba(28,34,48,.72); border-color:#2a3345 }
body.dark-mode .home-promo-tile strong { color:#dce4ef }
body.dark-mode .home-promo-tile span { color:#8a96a6 }
body.dark-mode .home-promo-ic { color:#4da6ff }
body.dark-mode .home-side-card {
  background:rgba(28,34,48,.72);
  border-color:#2a3345;
}
body.dark-mode .home-side-card strong { color:#dce4ef }
body.dark-mode .home-side-card span { color:#8a96a6 }
body.dark-mode .home-side-card i { background:#111827 }
body.dark-mode .home-spotlight-band { background:linear-gradient(180deg, #181c24 0%, #12161e 100%) }
body.dark-mode .home-spotlight-card {
  background:linear-gradient(145deg, #1c2230, #181c24);
  border-color:#2a3345;
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}
body.dark-mode .spotlight-icon { color:#4da6ff }
body.dark-mode .home-spotlight-card strong { color:#dce4ef }
body.dark-mode .home-spotlight-card p { color:#8a96a6 }
body.dark-mode .why-card { background:#1c2230; border-color:#2a3345 }
body.dark-mode .why-card h3 { color:#dce4ef }
body.dark-mode .why-card p { color:#8a96a6 }
body.dark-mode .why-icon { background:linear-gradient(135deg,rgba(77,166,255,.1),rgba(255,153,0,.1)); color:#4da6ff }
body.dark-mode .why-card:hover .why-icon { color:#ff9900 }
body.dark-mode .testimonial-card { background:#1c2230; border-color:#2a3345 }
body.dark-mode .testimonial-text { color:#8a96a6 }
body.dark-mode .testimonial-author h4 { color:#dce4ef }
body.dark-mode .testimonial-author span { color:#8a96a6 }
body.dark-mode .testimonial-card::before { color:rgba(77,166,255,.06) }
body.dark-mode .rental-home-content h2 { color:#fff }
body.dark-mode .rental-home-desc { color:rgba(255,255,255,.75) }
body.dark-mode .rental-feature-item { color:rgba(255,255,255,.8) }
body.dark-mode .about-experience-badge { box-shadow:0 8px 32px rgba(255,153,0,.3) }

/* ── Scroll Fade-In ── */
.fade-in {
  opacity:0; transform:translateY(32px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.fade-in.visible { opacity:1; transform:translateY(0) }

/* stagger */
.services-grid .service-card:nth-child(1) { transition-delay:.00s }
.services-grid .service-card:nth-child(2) { transition-delay:.08s }
.services-grid .service-card:nth-child(3) { transition-delay:.16s }
.services-grid .service-card:nth-child(4) { transition-delay:.24s }
.services-grid .service-card:nth-child(5) { transition-delay:.32s }
.services-grid .service-card:nth-child(6) { transition-delay:.40s }
.products-grid .product-card:nth-child(1) { transition-delay:.00s }
.products-grid .product-card:nth-child(2) { transition-delay:.06s }
.products-grid .product-card:nth-child(3) { transition-delay:.12s }
.products-grid .product-card:nth-child(4) { transition-delay:.18s }
.products-grid .product-card:nth-child(5) { transition-delay:.24s }
.products-grid .product-card:nth-child(6) { transition-delay:.30s }

/* ── Tablet ── */
@media(min-width:769px) and (max-width:1024px) {
  .navbar .container { padding:0 24px }
  .products-grid     { grid-template-columns:repeat(3,1fr); gap:18px }
  .product-img       { height:185px }
  .product-detail-wrapper { gap:24px }
}

/* ── Mobile ── */
@media(max-width:768px) {
  .navbar .container { padding:0 14px }
  .navbar .menu-toggle { display:flex; flex-direction:column; justify-content:space-around; width:30px; height:24px; background:transparent; border:none; cursor:pointer; padding:0; z-index:1001; }
  .navbar .menu-toggle .bar { width:30px; height:3px; background:var(--text); border-radius:10px; transition:all 0.3s linear; position:relative; transform-origin:1px; margin:0; }
  
  /* ── Mobile Top Bar: keep navbar at top, show controls ── */
  .navbar {
    position:sticky; top:0; bottom:auto;
    height:58px; z-index:1000;
  }
  .navbar .nav-controls {
    display:flex !important;
    gap:4px;
  }

  /* Bottom Tab Bar */
  .mobile-bottom-bar {
    display:flex;
    position:fixed; left:0; bottom:0; right:0;
    flex-direction:row;
    background:var(--card);
    width:100%; height:62px;
    justify-content:space-around; align-items:center;
    padding:0 4px;
    box-shadow:0 -2px 20px rgba(0,0,0,.12);
    z-index:9999; border-top:1px solid var(--border);
  }
  .mobile-bottom-bar li { flex:1; display:flex; justify-content:center }
  .mobile-bottom-bar .nav-link {
    flex-direction:column; font-size:.6rem; gap:2px;
    padding:6px 0; width:100%; justify-content:center; text-align:center;
    font-weight:700; letter-spacing:.3px; text-transform:uppercase;
    color:var(--muted);
  }
  .mobile-bottom-bar .nav-link i { margin-right:0; font-size:1.15rem; opacity:1 }
  .mobile-bottom-bar .nav-link::after { display:none }
  .mobile-bottom-bar .nav-link.active { color:var(--red) }
  .mobile-bottom-bar .nav-link.active i { color:var(--red) }

  /* Hide original nav-menu on mobile by default, but allow opening */
  .navbar .nav-menu { 
    display:none; 
    position:absolute; top:100%; left:0; width:100%; 
    background:var(--card); 
    flex-direction:column; 
    padding:20px; 
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
    border-top:1px solid var(--border);
    gap:16px;
  }
  .navbar .nav-menu.open { display:flex !important; }
  body.dark-mode .navbar .nav-menu { background: var(--dark-2); }
  
  /* Reset dropdowns for mobile */
  .nav-item-dropdown .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 10px 0 0 20px;
    background: transparent !important;
    min-width: auto;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-item { padding: 8px 10px; }
  
  .mobile-only { display:block }
  body { padding-bottom:70px; padding-top:0 }
  body.has-action-bar { padding-bottom:132px }

  .col-half { width:100%; margin-bottom:28px }
  .hero h1, .page-header h1 { font-size:2.2rem; letter-spacing:-.5px }
  .hero { min-height:74vh; background-attachment:scroll; padding:88px 0 56px }
  .hero.hero-ikea-split { padding:28px 0 18px }
  .ikea-split { grid-template-columns:1fr }
  .ikea-tile-image, .ikea-tile-cta { min-height:360px }
  .hero-feature-badge { margin-bottom:12px; font-size:.72rem }
  .hero-quick-actions { gap:8px }
  .hero-mini-pill { font-size:.8rem; padding:8px 12px }
  .hero-floating-stats { grid-template-columns:1fr; gap:10px }
  .hero-stat-card { padding:12px 14px }
  .hero-stat-card strong { font-size:1.45rem }
  .hero-buttons-left .btn { width:100%; justify-content:center }
  .ikea-cta-wrap { padding:18px }
  .ikea-cta-label { font-size:1.1rem }
  .ikea-cta-bottom { grid-template-columns:1fr }
  .ikea-cta-desc { font-size:.95rem }
  .ikea-hero-desc { font-size:.92rem }
  .home-side-card { padding:12px 14px }
  .home-side-card i { width:36px; height:36px; border-radius:10px }
  .home-spotlight-band { padding:6px 0 20px }
  .home-spotlight-grid { grid-template-columns:1fr; gap:14px }
  .company-intro { padding:52px 0 22px }
  .company-intro-grid { grid-template-columns:1fr; gap:20px }
  .company-intro-actions .btn { width:100%; justify-content:center }
  .hero-eyebrow { font-size:.8rem; margin-bottom:14px }
  .hero-card { max-width:100%; padding:20px 18px; border-radius:16px }
  .hero-ikea-actions { gap:10px; align-items:stretch }
  .hero-ikea-links { gap:8px }
  .ikea-btn { width:100%; justify-content:center }
  .footer-content { grid-template-columns:1fr; gap:28px }
  .product-detail-wrapper { grid-template-columns:1fr; padding:16px; gap:20px }
  .mobile-action-bar { display:flex }
  .action-buttons { display:none }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:12px }
  .product-img   { height:160px }
  .product-details { padding:10px 12px }
  .product-details h4 { font-size:.82rem; -webkit-line-clamp: 2; line-clamp: 2 }
  .product-cat { font-size:.65rem; margin-bottom:4px; letter-spacing:1.5px }
  .product-desc { font-size:.78rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom:10px }
  .price { font-size:.95rem }
  .btn-cart { padding:6px 10px; font-size:.72rem; white-space:nowrap }
  .product-bottom { flex-direction:column; align-items:flex-start; gap:8px }
  .section-padding { padding:64px 0 }
  .contact-form { padding:24px }
  .lang-btn span { display:none }
  .lang-btn { padding:5px; border:none; font-size:1.15rem; background:none }
  .logo { gap:8px }
  .logo-img { height: 32px; }
  .navbar.scrolled .logo-img { height: 28px; }
  .logo-mark { width:44px; height:44px; border-radius:14px }
  .logo-mark img { padding:5px }
  .logo .logo-text { font-size:1.2rem }
  .logo-sub { font-size:.52rem; letter-spacing:2px; margin-top:2px }

  /* dark mode bottom bar */
  body.dark-mode .mobile-bottom-bar { background:#1c2230; border-top-color:#2a3345 }
  body.dark-mode .mobile-bottom-bar .nav-link { color:#5a6a7e }
  body.dark-mode .mobile-bottom-bar .nav-link.active { color:#ff6666 }
}

/* ══════════════════════════════════════
   ENHANCED ANIMATIONS & MOBILE FIXES
   ══════════════════════════════════════ */

/* ── Page Load Stagger Animation ── */
@keyframes slideUp { from { opacity:0; transform:translateY(40px) } to { opacity:1; transform:translateY(0) } }
@keyframes slideRight { from { opacity:0; transform:translateX(-30px) } to { opacity:1; transform:translateX(0) } }
@keyframes slideLeft { from { opacity:0; transform:translateX(30px) } to { opacity:1; transform:translateX(0) } }
@keyframes scaleIn { from { opacity:0; transform:scale(.85) } to { opacity:1; transform:scale(1) } }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 20px rgba(255,153,0,.2)} 50%{box-shadow:0 0 40px rgba(255,153,0,.45)} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ── Hero Enhanced ── */
.hero-content h1 { animation:slideUp .8s var(--ease) both }
.hero-content p { animation:slideUp .8s .15s var(--ease) both }
.hero-card { animation:slideUp .8s .3s var(--ease) both }

/* Hero Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,153,0,.15);
  border:1px solid rgba(255,153,0,.3);
  backdrop-filter:blur(10px);
  padding:10px 22px;
  border-radius:50px;
  font-family:'Barlow',sans-serif;
  font-size:.85rem; font-weight:700;
  color:var(--orange);
  margin-bottom:24px;
  letter-spacing:.5px;
  animation:slideUp .8s var(--ease) both;
}
.hero-badge i { font-size:1.1rem }

/* Glass Button */
.btn-glass {
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.08);
}
.btn-glass:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(255,255,255,.1);
}

/* Glow Button */
.glow-btn {
  animation:glowPulse 3s ease-in-out infinite;
}

/* Hero Trust Row */
.hero-trust-row {
  display:flex; gap:32px; margin-top:40px;
  animation:slideUp .8s .5s var(--ease) both;
}
.hero-trust-item {
  display:flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:600;
  color:rgba(255,255,255,.7);
}
.hero-trust-item i {
  color:var(--orange);
  font-size:1rem;
}

/* Scroll Indicator */
.hero-scroll-indicator {
  position:absolute; bottom:32px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column;
  align-items:center; gap:8px;
  z-index:3;
  animation:fadeInUp 1s 1.2s ease both;
}
.hero-scroll-indicator span {
  font-size:.7rem; font-weight:600;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:2px;
}
.scroll-mouse {
  width:26px; height:40px;
  border:2px solid rgba(255,255,255,.3);
  border-radius:13px;
  display:flex; justify-content:center;
  padding-top:8px;
}
.scroll-wheel {
  width:3px; height:8px;
  background:var(--orange);
  border-radius:2px;
  animation:scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,100% { transform:translateY(0); opacity:1 }
  50% { transform:translateY(10px); opacity:.3 }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateX(-50%) translateY(20px) }
  to { opacity:1; transform:translateX(-50%) translateY(0) }
}

/* Hero Particles */
.hero-particles {
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.hero-particle {
  position:absolute;
  width:var(--size, 4px);
  height:var(--size, 4px);
  background:var(--color, rgba(255,153,0,.6));
  border-radius:50%;
  animation:particleFloat var(--duration, 15s) linear infinite;
  opacity:0;
}
@keyframes particleFloat {
  0% { transform:translateY(100vh) rotate(0deg); opacity:0 }
  10% { opacity:var(--opacity, .6) }
  90% { opacity:var(--opacity, .6) }
  100% { transform:translateY(-10vh) rotate(720deg); opacity:0 }
}

/* ── Feature Box Hover Glow ── */
.feature-box { transition:transform .5s var(--ease), box-shadow .5s, filter .3s }
.feature-box:hover { filter:brightness(1.05) }
.feature-box:hover .box-overlay h3 { animation:float 2s ease-in-out infinite }

/* ── Service Card Hover ── */
.service-card { transition:transform .4s var(--ease), box-shadow .4s, border-color .4s }
.service-card:hover { animation:glowPulse 2s ease-in-out infinite }

/* ── Product Card Enhanced ── */
.product-card { transition:transform .4s var(--ease), box-shadow .4s }
.product-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 20px 50px rgba(0,77,153,.15) }
.product-card:hover .product-img img { transform:scale(1.12) }

/* ── Button Shine Enhanced ── */
.btn-primary { position:relative; overflow:hidden }
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transition:left .6s ease;
}
.btn-primary:hover::before { left:100% }

/* ── CTA Section Animated ── */
.cta-section h2 { animation:slideUp .6s var(--ease) both }
.cta-section p { animation:slideUp .6s .12s var(--ease) both }
.cta-section .btn { animation:slideUp .6s .24s var(--ease) both }

/* ── Contact Button Hover Scale ── */
.contact-btn { transition:transform .3s var(--ease), box-shadow .3s }
.contact-btn:hover { transform:translateY(-8px) scale(1.03); box-shadow:var(--sh3) }
.contact-btn:hover .icon-wrapper { animation:float 1.5s ease-in-out infinite }

/* ── Footer Links Slide ── */
.footer-col ul li a { transition:color .25s, padding-left .3s, transform .25s }
.footer-col ul li a:hover { transform:translateX(4px) }

/* ── Toast Slide Up ── */
.toast { transition:all .4s var(--ease) }

/* ── Page Header Text ── */
.page-header h1 { animation:scaleIn .7s var(--ease) both }
.page-header p { animation:slideUp .7s .15s var(--ease) both }

/* ── Stats Card Pulse on Hover ── */
.stats-card:hover .icon-box { animation:float 1.5s ease-in-out infinite; color:var(--orange) }
.stats-card:hover h3 { color:var(--orange); transition:color .3s }

/* ── Breadcrumb ── */
.breadcrumb { animation:slideUp .5s var(--ease) both }

/* ── Fix AI Chat Widget overlap with mobile action bar ── */
.floating-chat-btn { z-index:9998 !important; bottom:130px !important }
@media(max-width:768px) {
  .floating-chat-btn { bottom:135px !important; right:15px !important }
}

/* ── Product Detail Mobile Fixes ── */
@media(max-width:768px) {
  .product-detail-wrapper {
    grid-template-columns:1fr; padding:14px; gap:16px;
    border-radius:12px;
  }
  .product-gallery { gap:10px }
  .main-image-container { border-radius:10px }
  .main-image img { max-height:350px; height:auto }
  .slider-btn { width:34px; height:34px; font-size:.9rem }
  .slider-btn.prev { left:8px }
  .slider-btn.next { right:8px }
  .thumb-list { gap:8px }
  .thumb-item { width:60px; height:60px }
  .product-info h1 { font-size:1.4rem; margin-bottom:10px; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto }
  .product-info { overflow:visible }
  .price-tag { font-size:1.5rem; padding:5px 14px }
  .short-desc { font-size:.88rem; margin-bottom:18px; padding-bottom:14px }
  .quantity-selector { gap:12px; margin-bottom:18px }
  .quantity-selector span { font-size:.85rem }
  .action-buttons { display:none }
  .product-tabs { padding:16px; margin-top:20px }
  .tab-btn { padding:8px 16px; font-size:.85rem }
  .specs-table th, .specs-table td { padding:10px 12px; font-size:.85rem }
  .chat-seller-btn { font-size:.85rem; padding:8px 14px; width:100%; justify-content:center }
  .breadcrumb { font-size:.8rem; padding:12px 0 }
  
  /* Mobile action bar improvements */
  .mobile-action-bar {
    display:flex; height:auto; padding:8px 10px; gap:6px;
    bottom:62px;
  }
  .mobile-action-bar .action-btn {
    padding:10px 8px; font-size:.8rem; font-weight:800;
    border-radius:8px;
  }
  .mobile-action-bar .chat { width:25%; font-size:.65rem; border-radius:8px }
  .mobile-action-bar .add-cart { width:37.5%; border-radius:8px }
  .mobile-action-bar .buy-now { width:37.5%; border-radius:8px }
}

/* ── Extra small phones ── */
@media(max-width:380px) {
  .product-detail-wrapper { padding:10px; gap:12px }
  .product-info h1 { font-size:1.2rem }
  .price-tag { font-size:1.3rem }
  .main-image img { max-height:280px }
  .mobile-action-bar .action-btn { font-size:.72rem; padding:8px 6px }
}

/* ── Lightbox Prev/Next Arrows ── */
.lightbox-prev, .lightbox-next {
  position:absolute; top:50%; transform:translateY(-50%);
  color:#fff; background:rgba(255,255,255,0.12);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; cursor:pointer; z-index:2;
  transition:background .25s, transform .25s;
  backdrop-filter:blur(4px);
}
.lightbox-prev:hover, .lightbox-next:hover {
  background:var(--orange); transform:translateY(-50%) scale(1.1);
}
.lightbox-prev { left:25px }
.lightbox-next { right:25px }

@media(max-width:600px) {
  .lightbox-prev, .lightbox-next {
    width:40px; height:40px; font-size:1.2rem;
    background:rgba(255,255,255,0.15);
  }
  .lightbox-prev { left:10px }
  .lightbox-next { right:10px }
}

/* ── Product Detail Desktop Enhanced ── */
@media(min-width:769px) {
  .main-image img { max-height:500px }
  .main-image-container { cursor:pointer }
}

/* ── Skeleton Loaders ── */
.skeleton { background:linear-gradient(90deg, var(--light) 25%, var(--light-2) 50%, var(--light) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r-sm); }
.skeleton-text { height:14px; margin-bottom:8px; border-radius:4px; }
.skeleton-text.w50 { width:50% }
.skeleton-text.w75 { width:75% }
.skeleton-title { height:22px; width:60%; margin-bottom:12px; border-radius:4px; }
.skeleton-img { height:200px; width:100%; border-radius:var(--r); }
.skeleton-avatar { width:60px; height:60px; border-radius:50%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Wishlist Button ── */
.wishlist-btn {
  position:absolute; top:12px; right:12px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(4px);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--muted);
  transition:all .3s var(--spring);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.wishlist-btn:hover { transform:scale(1.15); color:var(--red); box-shadow:0 4px 16px rgba(204,0,0,.2); }
.wishlist-btn.active { color:var(--red); }
.wishlist-btn.active i { animation:heartPop .4s var(--spring); }
@keyframes heartPop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* ── Live Search ── */
.search-overlay {
  position:fixed; inset:0; background:rgba(15,25,35,.6); z-index:9999;
  display:none; align-items:flex-start; justify-content:center; padding-top:100px;
  backdrop-filter:blur(6px);
}
.search-overlay.open { display:flex; animation:fadeIn .25s ease }
.search-box {
  background:#fff; width:90%; max-width:600px; border-radius:var(--r);
  box-shadow:var(--sh3); overflow:hidden; animation:slideUp .3s var(--ease);
}
.search-input-wrap {
  display:flex; align-items:center; padding:0 20px; border-bottom:1px solid var(--border);
}
.search-input-wrap i { font-size:1.2rem; color:var(--muted); margin-right:12px; }
.search-input-wrap input {
  flex:1; padding:18px 0; border:none; outline:none; font-size:1.05rem;
  font-family:'Barlow',sans-serif; background:transparent; color:var(--text);
}
.search-results { max-height:400px; overflow-y:auto; padding:8px; }
.search-result-item {
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border-radius:var(--r-sm); cursor:pointer; transition:background .2s;
}
.search-result-item:hover { background:var(--light); }
.search-result-item img { width:50px; height:50px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.search-result-info h4 { font-size:.9rem; font-weight:600; margin-bottom:2px; }
.search-result-info span { font-size:.8rem; color:var(--orange); font-weight:700; }
.search-no-result { padding:30px; text-align:center; color:var(--muted); }

/* ── Smooth Image Load ── */
.lazy-img { opacity:0; transition:opacity .5s ease; }
.lazy-img.loaded { opacity:1; }

/* ── Enhanced Scroll Reveal ── */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease }
.fade-in.visible { opacity:1; transform:translateY(0) }
.fade-in-left { opacity:0; transform:translateX(-40px); transition:opacity .6s ease, transform .6s ease }
.fade-in-left.visible { opacity:1; transform:translateX(0) }
.fade-in-right { opacity:0; transform:translateX(40px); transition:opacity .6s ease, transform .6s ease }
.fade-in-right.visible { opacity:1; transform:translateX(0) }
.fade-in-scale { opacity:0; transform:scale(.9); transition:opacity .5s ease, transform .5s ease }
.fade-in-scale.visible { opacity:1; transform:scale(1) }

/* Dynamic Animations from Admin Selector */
.anim-fade { opacity:0; transition:opacity 1.5s ease }
.anim-fade.visible { opacity:1; }
.anim-slide-left { opacity:0; transform:translateX(100px); transition:opacity 1.2s ease, transform 1.2s ease }
.anim-slide-left.visible { opacity:1; transform:translateX(0) }
.anim-slide-right { opacity:0; transform:translateX(-100px); transition:opacity 1.2s ease, transform 1.2s ease }
.anim-slide-right.visible { opacity:1; transform:translateX(0) }
.anim-zoom-in { opacity:0; transform:scale(0.8); transition:opacity 1.2s ease, transform 1.2s ease }
.anim-zoom-in.visible { opacity:1; transform:scale(1) }
.anim-zoom-out { opacity:0; transform:scale(1.2); transition:opacity 1.2s ease, transform 1.2s ease }
.anim-zoom-out.visible { opacity:1; transform:scale(1) }
.anim-blur { opacity:0; filter:blur(10px); transition:opacity 1.2s ease, filter 1.2s ease }
.anim-blur.visible { opacity:1; filter:blur(0) }


/* ── Toast Enhanced ── */
.toast {
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--dark); color:#fff; padding:14px 28px;
  border-radius:var(--r); font-size:.9rem; font-weight:600;
  box-shadow:var(--sh3); z-index:10000; opacity:0;
  transition:all .4s var(--spring);
  display:flex; align-items:center; gap:10px;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1 }
.toast.success { border-left:4px solid #1a9e5a }
.toast.error { border-left:4px solid var(--red) }

/* ── Counter Animation Enhanced ── */
.stats-card h3 {
  font-size:2.4rem; font-weight:900; color:var(--blue);
  font-family:'Barlow Condensed',sans-serif;
}

/* ── Product Card Wishlist Area ── */
.product-card { position:relative; overflow:hidden }

/* ── Gallery Upload (Multi-Image) ── */
.mu-gallery { border:2px dashed var(--border); border-radius:10px; padding:14px; background:var(--bg); }
.mu-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.mu-gallery-item { position:relative; border-radius:8px; overflow:hidden; border:2px solid var(--border); aspect-ratio:16/10; cursor:move; transition:border-color .2s, box-shadow .2s; }
.mu-gallery-item:hover { border-color:var(--blue); box-shadow:0 4px 12px rgba(0,77,153,.15); }
.mu-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.mu-gallery-item .mu-gal-del { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; background:rgba(204,0,0,.85); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.7rem; opacity:0; transition:opacity .2s; }
.mu-gallery-item:hover .mu-gal-del { opacity:1; }
.mu-gallery-item .mu-gal-order { position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,.6); color:#fff; font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:4px; }
.mu-gallery-add { border:2px dashed var(--border); border-radius:8px; aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:var(--mu); transition:all .2s; background:var(--card); }
.mu-gallery-add:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-ll); }
.mu-gallery-add i { font-size:1.5rem; margin-bottom:4px; }
.mu-gallery-add span { font-size:.7rem; font-weight:600; }

/* ── Hero Slideshow ── */
.hero-slideshow { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slideshow .slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.5s ease; }
.hero-slideshow .slide.active { opacity:1; }
.hero-slideshow .slide-dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.hero-slideshow .slide-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:all .3s; }
.hero-slideshow .slide-dot.active { background:#fff; transform:scale(1.3); }

/* ── Slideshow Animations ── */
.hero-slideshow.anim-fade .slide { opacity:0; transition:opacity 1.5s ease; }
.hero-slideshow.anim-fade .slide.active { opacity:1; }

.hero-slideshow.anim-slide-left .slide { opacity:0; transform:translateX(100%); transition:opacity 1.2s ease, transform 1.2s ease; }
.hero-slideshow.anim-slide-left .slide.active { opacity:1; transform:translateX(0); }
.hero-slideshow.anim-slide-left .slide.prev { opacity:0; transform:translateX(-100%); }

.hero-slideshow.anim-slide-right .slide { opacity:0; transform:translateX(-100%); transition:opacity 1.2s ease, transform 1.2s ease; }
.hero-slideshow.anim-slide-right .slide.active { opacity:1; transform:translateX(0); }
.hero-slideshow.anim-slide-right .slide.prev { opacity:0; transform:translateX(100%); }

.hero-slideshow.anim-zoom-in .slide { opacity:0; transform:scale(1.2); transition:opacity 1.5s ease, transform 8s ease-out; }
.hero-slideshow.anim-zoom-in .slide.active { opacity:1; transform:scale(1); }

.hero-slideshow.anim-zoom-out .slide { opacity:0; transform:scale(0.8); transition:opacity 1.5s ease, transform 8s ease-out; }
.hero-slideshow.anim-zoom-out .slide.active { opacity:1; transform:scale(1); }

.hero-slideshow.anim-ken-burns .slide { opacity:0; transform:scale(1.1) translate(0,0); transition:opacity 1.5s ease, transform 12s ease-out; }
.hero-slideshow.anim-ken-burns .slide.active { opacity:1; transform:scale(1.05) translate(-2%,-1%); }
.hero-slideshow.anim-ken-burns .slide:nth-child(2).active { transform:scale(1.08) translate(2%,1%); }
.hero-slideshow.anim-ken-burns .slide:nth-child(3).active { transform:scale(1.03) translate(-1%,2%); }

.hero-slideshow.anim-blur .slide { opacity:0; filter:blur(20px); transition:opacity 1.2s ease, filter 1.5s ease; }
.hero-slideshow.anim-blur .slide.active { opacity:1; filter:blur(0); }

/* Feature box slideshow animations */
.feature-box .hero-slideshow .slide { transition-duration:1s; }
.feature-box .hero-slideshow.anim-zoom-in .slide { transition:opacity 1s ease, transform 6s ease-out; }
.feature-box .hero-slideshow.anim-ken-burns .slide { transition:opacity 1s ease, transform 8s ease-out; }

/* ══════════════════════════════════════
   HOME PAGE NEW SECTIONS
   ══════════════════════════════════════ */

/* ── Home Promo Banner ── */
.home-promo-banner {
  padding:22px 0 0;
  background:linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}
.home-promo-wrap {
  border-radius:24px;
  padding:28px;
  background:linear-gradient(135deg, rgba(0,77,153,.08), rgba(255,153,0,.08));
  border:1px solid rgba(0,77,153,.1);
  box-shadow:0 22px 60px rgba(0,77,153,.12);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  overflow:hidden;
  position:relative;
}
.home-promo-wrap::before {
  content:'';
  position:absolute;
  top:-140px;
  right:-140px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,153,0,.22) 0%, transparent 70%);
}
.home-promo-wrap::after {
  content:'';
  position:absolute;
  bottom:-120px;
  left:-120px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,77,153,.22) 0%, transparent 70%);
}
.home-promo-left,
.home-promo-right { position:relative; z-index:1 }
.home-promo-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,77,153,.12);
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--blue);
  margin-bottom:14px;
}
.home-promo-left h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.9rem,3vw,2.6rem);
  font-weight:900;
  letter-spacing:-.8px;
  line-height:1.05;
  color:var(--dark);
  margin-bottom:12px;
}
.home-promo-left p {
  color:var(--muted);
  line-height:1.85;
  font-size:1.02rem;
  margin-bottom:18px;
  max-width:560px;
}
.home-promo-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.home-promo-outline {
  border-color:rgba(0,0,0,.22);
  color:var(--dark);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
}
.home-promo-outline:hover {
  background:rgba(255,255,255,.9);
  border-color:rgba(0,0,0,.28);
  transform:translateY(-3px);
}
.home-promo-right { display:grid; gap:12px }
.home-promo-tile {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,77,153,.12);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.home-promo-tile:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 46px rgba(0,77,153,.14);
  border-color:rgba(255,153,0,.28);
}
.home-promo-ic {
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(0,77,153,.12), rgba(255,153,0,.18));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  color:var(--blue);
  flex:0 0 auto;
}
.home-promo-tile strong {
  display:block;
  font-weight:900;
  font-size:1rem;
  color:var(--dark);
  margin-bottom:3px;
}
.home-promo-tile span {
  display:block;
  font-size:.88rem;
  color:var(--muted);
  line-height:1.55;
}
.home-promo-arrow { margin-left:auto; opacity:.6; transition:transform .35s var(--ease), opacity .35s var(--ease) }
.home-promo-tile:hover .home-promo-arrow { transform:translateX(4px); opacity:1 }

/* ── Stats Section ── */
.stats-section {
  padding:0; margin-top:-1px;
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  position:relative; overflow:hidden;
}
.stats-section::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle 2px at 15% 25%, rgba(255,153,0,.6) 0%, transparent 0%),
    radial-gradient(circle 1px at 85% 75%, rgba(255,255,255,.3) 0%, transparent 0%),
    radial-gradient(circle 2px at 55% 15%, rgba(255,153,0,.4) 0%, transparent 0%);
  background-size:400px 400px;
  animation:bokeh 12s ease-in-out infinite alternate;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative; z-index:1;
}
.stats-card {
  text-align:center;
  padding:48px 24px;
  border-right:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.stats-card:last-child { border-right:none }
.stats-card:hover { background:rgba(255,255,255,.04) }
.stats-icon {
  font-size:1.8rem;
  color:var(--orange);
  margin-bottom:16px;
  display:inline-block;
  animation:float 3s ease-in-out infinite;
}
.stats-card h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:3rem; font-weight:900;
  color:#fff; letter-spacing:-2px;
  margin-bottom:6px;
  line-height:1;
}
.stats-card p {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.88rem; font-weight:600;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  letter-spacing:2px;
}

/* ── About Preview Section ── */
.about-preview-section { overflow:hidden }
.about-preview-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-preview-image {
  position:relative;
}
.about-preview-image img {
  width:100%;
  border-radius:var(--r);
  box-shadow:var(--sh3);
  transition:transform .5s var(--ease);
}
.about-preview-image:hover img { transform:translateY(-8px) rotate(.5deg) }
.about-experience-badge {
  position:absolute;
  bottom:-20px; right:-20px;
  width:120px; height:120px;
  background:linear-gradient(135deg, var(--orange), var(--orange-d));
  border-radius:50%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(255,153,0,.4);
  animation:glowPulse 3s ease-in-out infinite;
}
.exp-number {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.2rem; font-weight:900;
  color:#fff; line-height:1;
}
.exp-text {
  font-family:'Barlow',sans-serif;
  font-size:.75rem; font-weight:700;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:2px;
}
.about-preview-content h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.4rem; font-weight:900;
  color:var(--blue); margin-bottom:16px;
  letter-spacing:-1px; line-height:1.1;
}
.about-preview-content > p {
  color:var(--muted);
  line-height:1.8;
  margin-bottom:24px;
  font-size:1.05rem;
}
.about-features-list {
  margin-bottom:28px;
}
.about-features-list li {
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  font-weight:600;
  color:var(--text);
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:padding-left .3s;
}
.about-features-list li:hover { padding-left:8px }
.about-features-list li:last-child { border-bottom:none }
.about-features-list i {
  color:var(--orange);
  font-size:1.1rem;
  flex-shrink:0;
}

/* ── Why Choose Us ── */
.why-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.why-card {
  background:var(--card);
  padding:40px 28px;
  border-radius:var(--r);
  text-align:center;
  box-shadow:var(--sh1);
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.why-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--orange));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.why-card:hover::before { transform:scaleX(1) }
.why-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--sh2);
  border-color:rgba(0,77,153,.2);
}
.why-icon {
  width:72px; height:72px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,77,153,.08), rgba(255,153,0,.08));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  font-size:1.6rem;
  color:var(--blue);
  transition:transform .35s var(--spring), color .3s, background .3s;
}
.why-card:hover .why-icon {
  transform:scale(1.15) rotate(-8deg);
  color:var(--orange);
  background:linear-gradient(135deg, rgba(255,153,0,.12), rgba(255,153,0,.08));
}
.why-card h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.15rem; font-weight:800;
  color:var(--dark); margin-bottom:10px;
  letter-spacing:.2px;
}
.why-card p {
  color:var(--muted);
  font-size:.9rem;
  line-height:1.7;
}

/* ── Testimonials ── */
.testimonials-section { overflow:hidden }
.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.testimonial-card {
  background:var(--card);
  padding:36px 30px;
  border-radius:var(--r);
  box-shadow:var(--sh1);
  border:1px solid var(--border);
  position:relative;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.testimonial-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--sh2);
}
.testimonial-card::before {
  content:'\f10d';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:absolute; top:20px; right:24px;
  font-size:2.5rem;
  color:rgba(0,77,153,.06);
}
.testimonial-stars {
  margin-bottom:16px;
}
.testimonial-stars i {
  color:var(--orange);
  font-size:.85rem;
  margin-right:2px;
}
.testimonial-text {
  font-size:.95rem;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:24px;
  font-style:italic;
}
.testimonial-author {
  display:flex; align-items:center; gap:14px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.testimonial-avatar {
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--blue-l));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem;
  flex-shrink:0;
}
.testimonial-author h4 {
  font-family:'Barlow',sans-serif;
  font-size:.95rem; font-weight:700;
  color:var(--dark);
  margin-bottom:2px;
}
.testimonial-author span {
  font-size:.8rem;
  color:var(--muted);
}

/* ── Rental Home Section ── */
.rental-home-section {
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  color:#fff;
  min-height:500px;
  display:flex;
  align-items:center;
}
.rental-home-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,14,45,.92), rgba(0,50,120,.75));
}
.rental-home-overlay::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle 2px at 20% 30%, rgba(255,153,0,.6) 0%, transparent 0%),
    radial-gradient(circle 1px at 80% 70%, rgba(255,255,255,.3) 0%, transparent 0%);
  background-size:300px 300px;
  animation:bokeh 10s ease-in-out infinite alternate;
}
.rental-home-content h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:900; color:#fff;
  letter-spacing:-1px;
  margin-bottom:16px;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.rental-home-content .sub-heading { color:var(--orange) }
.rental-home-desc {
  font-size:1.1rem;
  color:rgba(255,255,255,.85);
  max-width:680px;
  margin:0 auto 36px;
  line-height:1.8;
}
.rental-features-row {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:40px;
  margin-bottom:16px;
}
.rental-feature-item {
  display:flex; align-items:center; gap:12px;
  font-family:'Barlow',sans-serif;
  font-weight:600;
  font-size:1rem;
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.08);
  padding:14px 24px;
  border-radius:50px;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  transition:background .3s, transform .3s;
}
.rental-feature-item:hover {
  background:rgba(255,255,255,.14);
  transform:translateY(-3px);
}
.rental-feature-item i {
  font-size:1.2rem;
  color:var(--orange);
}

/* ── Home Page Product Section Enhancement ── */
#home-featured-products .product-card {
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
#home-featured-products .product-card:hover {
  box-shadow:0 12px 40px rgba(0,77,153,.12);
}

/* ── Section Divider Gradient ── */
.section-padding + .section-padding {
  border-top:0;
}

/* ── Home Page Rental Section Cards ── */
.rental-home-section .rental-feature-item:nth-child(1) { transition-delay:.1s }
.rental-home-section .rental-feature-item:nth-child(2) { transition-delay:.2s }
.rental-home-section .rental-feature-item:nth-child(3) { transition-delay:.3s }

/* ── Mobile Responsive for New Sections ── */
@media(max-width:1024px) {
  .stats-grid { grid-template-columns:repeat(2, 1fr) }
  .stats-card:nth-child(2) { border-right:none }
  .why-grid { grid-template-columns:repeat(2, 1fr) }
  .testimonials-grid { grid-template-columns:repeat(2, 1fr) }
  .testimonials-grid .testimonial-card:last-child {
    grid-column:1 / -1;
    max-width:480px;
    margin:0 auto;
  }
}
@media(max-width:768px) {
  .home-promo-wrap { grid-template-columns:1fr; padding:18px; border-radius:18px }
  .home-promo-left p { font-size:.95rem }
  .home-promo-actions .btn { width:100%; justify-content:center }
  .home-promo-tile { padding:14px 14px }
  .home-promo-ic { width:46px; height:46px; border-radius:14px; font-size:1.15rem }
  .stats-grid { grid-template-columns:repeat(2, 1fr) }
  .stats-card { padding:32px 16px }
  .stats-card h3 { font-size:2.2rem }
  .stats-card p { font-size:.72rem; letter-spacing:1px }
  .stats-icon { font-size:1.4rem; margin-bottom:10px }
  
  .about-preview-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .about-preview-image { order:0 }
  .about-experience-badge {
    width:90px; height:90px;
    bottom:-10px; right:10px;
  }
  .exp-number { font-size:1.6rem }
  .exp-text { font-size:.65rem }
  .about-preview-content h2 { font-size:1.8rem }
  
  .why-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  .why-card {
    padding:28px 22px;
    text-align:left;
    display:flex; flex-direction:row; align-items:flex-start; gap:16px;
  }
  .why-icon { margin:0; flex-shrink:0; width:56px; height:56px; font-size:1.2rem }
  .why-card h3 { font-size:1rem; margin-bottom:6px }
  .why-card p { font-size:.85rem }
  
  .testimonials-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  .testimonials-grid .testimonial-card:last-child { max-width:100% }
  .testimonial-card { padding:24px 20px }
  .testimonial-text { font-size:.88rem }
  
  .rental-home-section { background-attachment:scroll }
  .rental-features-row { gap:16px }
  .rental-feature-item { font-size:.82rem }
  .rental-home-desc { font-size:.92rem }
  
  .about-experience-badge {
    bottom:10px; right:10px;
  }
}

/* ── Facebook Post Style Careers ── */
.fb-feed {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fb-post-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.fb-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.fb-post-header {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
}
.fb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: contain;
  background: #f0f2f5;
  border: 1px solid rgba(0,0,0,0.05);
  padding: 4px;
}
.fb-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fb-header-info strong {
  font-size: 1rem;
  font-weight: 700;
  color: #050505;
}
.fb-header-info span {
  font-size: 0.85rem;
  color: #65676b;
  margin-top: 2px;
}
.fb-header-dots {
  color: #65676b;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s;
}
.fb-header-dots:hover {
  background: #f0f2f5;
}
.fb-post-content {
  padding: 0 16px 12px;
}
.fb-post-content h3 {
  font-size: 1.15rem;
  color: #050505;
  margin-bottom: 8px;
}
.fb-post-text {
  font-size: 0.95rem;
  color: #050505;
  line-height: 1.6;
}
.fb-post-image {
  position: relative;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  background: #f0f2f5;
}
.fb-post-image img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.fb-post-image:hover img {
  transform: scale(1.03);
}
.fb-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s;
}
.fb-post-image:hover .fb-img-overlay {
  opacity: 1;
}
.fb-post-footer {
  padding: 12px 16px;
}
.fb-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #65676b;
  padding-bottom: 12px;
  border-bottom: 1px solid #ced0d4;
  margin-bottom: 8px;
}
.fb-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fb-reactions i.fa-thumbs-up { color: #0866ff; background: #fff; border-radius: 50%; }
.fb-reactions i.fa-heart { color: #f33e58; background: #fff; border-radius: 50%; }
.fb-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fb-btn {
  flex: 1 1 auto;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #65676b;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
}
.fb-btn:hover {
  background: #f0f2f5;
  transform: translateY(-3px) scale(1.05);
  color: var(--blue);
}

/* ── FB Reactions Hover Box ── */
.fb-like-wrapper {
  position: relative;
  flex: 1;
}
.fb-like-wrapper .fb-btn {
  width: 100%;
}
.fb-reaction-box {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease-in-out;
  z-index: 100;
  border: 1px solid rgba(0,0,0,0.05);
}
.fb-like-wrapper:hover .fb-reaction-box {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fb-reaction-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: #f0f2f5;
  color: #65676b;
}
.fb-reaction-icon:hover {
  transform: scale(1.3) translateY(-5px);
}
.fb-reaction-icon.r-like { color: #0866ff; background: rgba(8,102,255,0.1); }
.fb-reaction-icon.r-love { color: #f33e58; background: rgba(243,62,88,0.1); }
.fb-reaction-icon.r-haha { color: #f7b125; background: rgba(247,177,37,0.1); }
.fb-reaction-icon.r-wow { color: #f7b125; background: rgba(247,177,37,0.1); }
.fb-reaction-icon.r-sad { color: #f7b125; background: rgba(247,177,37,0.1); }
.fb-reaction-icon.r-angry { color: #e9710f; background: rgba(233,113,15,0.1); }

/* Reaction Active Colors */
.fb-btn.liked { color: #0866ff !important; }
.fb-btn.loved { color: #f33e58 !important; }
.fb-btn.haha { color: #f7b125 !important; }
.fb-btn.wow { color: #f7b125 !important; }
.fb-btn.sad { color: #f7b125 !important; }
.fb-btn.angry { color: #e9710f !important; }
.fb-btn-primary {
  color: var(--blue);
  background: rgba(0,77,153,0.08);
  text-decoration: none;
}
.fb-btn-primary:hover {
  background: rgba(0,77,153,0.15);
}

/* ── FB Lightbox Modal ── */
.fb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.fb-lightbox.active {
  display: flex;
  animation: fadeIn 0.3s;
}
.fb-close {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10001;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.2s;
}
.fb-close:hover { background: rgba(255,255,255,0.3); }
.fb-lightbox-content {
  display: flex;
  width: 95%;
  max-width: 1200px;
  height: 90vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.fb-lightbox-img-wrapper {
  flex: 2;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-lightbox-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.fb-lightbox-sidebar {
  flex: 1;
  min-width: 320px;
  max-width: 400px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #ced0d4;
  overflow-y: auto;
}
@media(max-width: 800px) {
  .fb-lightbox-content {
    flex-direction: column;
    height: auto;
    max-height: 95vh;
  }
  .fb-lightbox-img-wrapper { flex: none; height: 50vh; }
  .fb-lightbox-sidebar { max-width: 100%; flex: 1; overflow-y: auto; }
}

/* ── Floating Shop Button ── */
.floating-shop-btn {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 999;
  background: linear-gradient(135deg, var(--red, #cc0000) 0%, #990000 100%);
  color: #fff;
  padding: 10px 24px 10px 18px;
  border-radius: 50px;
  font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(204,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.3);
  animation: floatPulse 3s ease-in-out infinite;
  overflow: hidden;
  transition: all 0.3s var(--ease, ease);
}
.floating-shop-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: shine 4s infinite;
}
.floating-shop-btn .btn-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--orange, #ff9900), #d97700);
  border-radius: 50%;
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 0 15px rgba(255,153,0,0.4);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-shop-btn:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(255,153,0,0.3);
  border-color: var(--orange, #ff9900);
  color: #fff;
}
.floating-shop-btn:hover .btn-icon-wrap {
  transform: rotate(-15deg) scale(1.15);
}
@keyframes floatPulse {
  0% { transform: translateY(0); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
  50% { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(255,153,0,0.2); }
  100% { transform: translateY(0); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
}
@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}
@media(max-width:768px) {
  .floating-shop-btn {
    top: 80px;
    right: 15px;
    padding: 8px 18px 8px 12px;
    font-size: .9rem;
    gap: 8px;
  }
  .floating-shop-btn .btn-icon-wrap {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* ── Print Styles ── */
@media print {
  body * { visibility: hidden; }
  .invoice-modal, .invoice-modal * { visibility: visible; }
  .invoice-modal {
    position: absolute; left: 0; top: 0; transform: none;
    width: 100%; max-width: 100%; box-shadow: none; padding: 20px;
    background: #fff !important; color: #000 !important; border: none;
    max-height: none !important; overflow: visible !important;
  }
  .invoice-actions { display: none !important; }
}

/* ── Modern Homepage Animations ── */
.hero-content h1 {
  animation: heroTextReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}
.hero-content p {
  animation: heroTextReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
  opacity: 0;
  transform: translateY(30px);
}
.hero-buttons {
  animation: heroTextReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
  opacity: 0;
  transform: translateY(30px);
}
@keyframes heroTextReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-image {
  animation: floatImage 5s ease-in-out infinite alternate;
}
@keyframes floatImage {
  0% { transform: translateY(0px); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15)); }
  100% { transform: translateY(-20px); filter: drop-shadow(0 25px 35px rgba(0,0,0,0.25)); }
}

.service-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.service-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--orange) !important;
}
.why-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}
.about-preview-image img {
  transition: transform 0.6s ease !important;
}
.about-preview-image:hover img {
  transform: scale(1.05) !important;
}

/* ── Modern Stat Cards ── */
.modern-stats-container {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
}
.modern-stat-card {
    flex: 1;
    background: rgba(45, 48, 55, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
}
.modern-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.2);
}
.modern-stat-card strong {
    font-size: 2rem;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
}
.modern-stat-card span {
    font-size: 0.9rem;
    color: #a0a5b0;
    font-weight: 500;
}
@media(max-width: 480px) {
    .modern-stats-container {
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Modern Hero Buttons ── */
.hero-vertical-buttons {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    animation: heroTextReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
    opacity: 0;
    transform: translateY(30px);
}
.vert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    padding: 16px 36px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.vert-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}
.vert-btn:hover::before {
    left: 100%;
}
.vert-btn-primary {
    background-color: var(--orange, #ff9900);
    color: #fff;
    border: 2px solid var(--orange, #ff9900);
    box-shadow: 0 10px 25px rgba(255, 153, 0, 0.4);
}
.vert-btn-primary:hover {
    background-color: transparent;
    color: var(--orange, #ff9900);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(255, 153, 0, 0.5);
}
.vert-btn-outline {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.vert-btn-outline:hover {
    background-color: #fff;
    color: #111;
    border-color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.3);
}
@media(max-width: 768px) {
    .hero-vertical-buttons {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }
    .vert-btn {
        width: 100%;
        padding: 14px 24px;
    }
}

/* ── About Page Modernizations ── */
.modern-about-img-wrap {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 5px solid #fff;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: block;
}
.modern-about-img-wrap:hover {
    transform: scale(1.02) translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    border-color: var(--blue, #004d99);
}
.modern-about-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}
.modern-about-img-wrap:hover .modern-about-img {
    transform: scale(1.08);
}
.modern-text-block {
    background: #fff;
    padding: 36px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border-left: 6px solid var(--orange, #ff9900);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.modern-text-block:hover {
    transform: translateX(8px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 30px;
    list-style: none;
    padding: 0;
}
.market-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.market-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--orange));
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}
.market-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}
.market-card:hover::before {
    transform: scaleX(1);
}
.market-card i {
    font-size: 2.8rem;
    color: var(--orange, #ff9900);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.market-card:hover i {
    transform: scale(1.2) rotate(10deg);
    color: var(--blue, #004d99);
}
.market-card span {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

/* ── Modern Chart Component ── */
.modern-chart-container {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}
.chart-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue, #004d99);
    margin-bottom: 24px;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}
.chart-bar-group {
    margin-bottom: 20px;
}
.chart-label {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.chart-track {
    width: 100%;
    height: 12px;
    background: #eef2f6;
    border-radius: 10px;
    overflow: hidden;
}
.chart-fill {
    height: 100%;
    width: 0; /* starts at 0 for animation */
    border-radius: 10px;
    animation: fillBar 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.5s;
}
@keyframes fillBar {
    to { width: var(--target-width); }
}
.chart-stats-row {
    display: flex;
    gap: 16px;
    margin-top: 30px;
    border-top: 1px solid #eef2f6;
    padding-top: 20px;
}
.c-stat-box {
    flex: 1;
    background: #f8fafc;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    transition: transform 0.3s ease;
}
.c-stat-box:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.c-stat-box i {
    font-size: 1.8rem;
    color: var(--orange, #ff9900);
    margin-bottom: 10px;
}
.c-stat-box strong {
    display: block;
    font-size: 1.6rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    color: var(--blue, #004d99);
}
.c-stat-box span {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

/* ══════════════════════════════════════
   lmk INSPIRED HOMEPAGE STYLES
   ══════════════════════════════════════ */

/* ── Cinematic Hero ── */
.lmk-hero {
    position: relative;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}
.lmk-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.lmk-hero-bg .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 10s ease-out;
}
.lmk-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 10, 25, 0.0) 0%, rgba(0, 20, 50, 0.4) 100%);
    z-index: 1;
}
.lmk-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 60px;
}
.lmk-hero h1 {
    font-family: 'Barlow Condensed', 'Kantumruy Pro', 'Battambang', sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -1px;
    margin-bottom: 24px;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.lmk-hero p {
    font-family: 'Barlow', 'Kantumruy Pro', 'Battambang', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(255,255,255,0.9);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.lmk-outline {
    border: 2px solid rgba(255,255,255,0.8);
    color: #fff;
    padding: 16px 36px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.4s var(--ease);
}
.lmk-outline:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(204, 0, 0, 0.4);
}
.lmk-hero-stats-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(180, 15, 15, 0.85), rgba(220, 40, 40, 0.65));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 -10px 40px rgba(200, 0, 0, 0.2);
    z-index: 3;
    padding: 16px 0;
}
.stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

/* ── Partner Marquee ── */
.partner-marquee {
    flex: 1;
    min-width: 250px;
    overflow: hidden;
    padding: 0;
    margin-top: 0;
    border-top: none;
    display: flex;
    white-space: nowrap;
    position: relative;
}
.partner-marquee::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.3);
}
.marquee-track {
    display: flex;
    animation: marquee-scroll 15s linear infinite;
    width: max-content;
}
.marquee-track:hover {
    animation-play-state: paused;
}
.marquee-item {
    padding: 0 20px;
    display: flex;
    align-items: center;
}
.marquee-item a {
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}
.marquee-item a:hover {
    color: #fff;
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    position: relative;
}
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6), transparent);
    opacity: 0.8;
}
.stat-item:hover {
    transform: translateY(-6px) scale(1.05);
}
.stat-number {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 2px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* ── Brand Matrix ── */
.lmk-matrix {
    background: #050a15;
}
.matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.matrix-card {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.1);
    aspect-ratio: 1 / 1;
}
.matrix-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.matrix-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    z-index: 1;
    transition: background 0.4s;
}
.matrix-card:hover .matrix-bg {
    transform: scale(1.1);
}
.matrix-card:hover::before {
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,70,150,0.4) 60%, transparent 100%);
}
.matrix-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.matrix-card:hover .matrix-content {
    transform: translateY(-10px);
}
.matrix-content h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.matrix-content p {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    opacity: 1;
    transition: color 0.4s;
}
.matrix-card:hover .matrix-content p {
    color: rgba(255,255,255,0.9);
}
.matrix-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--orange, #ff9900);
    color: #fff;
    font-size: 1.2rem;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.matrix-card:hover .matrix-arrow {
    transform: translateX(10px);
    background: #e68a00;
}

/* ── Split Section (Core Values) ── */
.lmk-split-section {
    display: flex;
    background: #fff;
    min-height: auto;
    max-width: 1450px;
    margin: 30px auto;

    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.split-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.split-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.split-text {
    flex: 1;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.split-text h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--dark);
    margin-bottom: 24px;
    line-height: 1.1;
    text-transform: uppercase;
}
.split-text > p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 24px;
}
.split-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.split-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}
.split-feature-item:hover {
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateY(-4px);
    border-color: rgba(0,77,153,0.15);
}
.split-feature-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(0,77,153,0.08);
    border-radius: 12px;
    font-size: 1.5rem;
    color: var(--blue, #004d99);
    margin-top: 0;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.split-feature-item:hover i {
    background: var(--blue, #004d99);
    color: #fff;
}
.split-feature-item strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 6px;
}
.split-feature-item p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Map Section ── */
.lmk-map-section {
    background: #050a15;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.map-container {
    display: flex;
    align-items: center;
    gap: 60px;
}
.map-text {
    flex: 1;
    color: #fff;
}
.map-text h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 24px;
    line-height: 1.1;
}
.map-text p {
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}
.map-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.map-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 16px;
}
.map-list i {
    color: var(--orange, #ff9900);
    font-size: 1.2rem;
}
.map-graphic {
    flex: 1;
    position: relative;
}
.map-graphic img {
    width: 100%;
    filter: drop-shadow(0 0 30px rgba(0, 150, 255, 0.2));
}

/* Responsive */
@media(max-width: 992px) {
    .matrix-grid { grid-template-columns: 1fr; height: auto; }
    .matrix-card { min-height: 350px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .matrix-content p { opacity: 1; }
    .matrix-arrow { opacity: 1; transform: translateX(0); }
    
    .lmk-split-section { flex-direction: column; }
    .split-image { min-height: 400px; }
    .split-text { padding: 60px 24px; }
    
    .map-container { flex-direction: column; }
    .map-graphic { width: 100%; order: -1; }
    
    .stats-row { flex-direction: row; flex-wrap: wrap; gap: 20px 10px; }
    .stat-item { flex: 0 0 45%; }
    .stat-item:not(:last-child)::after { display: none; }
    .lmk-hero { height: auto; padding-top: 120px; padding-bottom: 0; flex-direction: column; }
    .lmk-hero-stats-bar { position: relative; width: 100%; margin-top: 40px; }
    .partner-marquee { flex: 0 0 100%; order: 5; margin-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 15px; }
    .partner-marquee::after { display: none; }
}

/* ── Product Matrix & Video Section ── */
.lmk-matrix-section {
    position: relative;
    width: 100%;
    max-width: 1450px;
    margin: 30px auto;
    border-radius: 20px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000;
}
.matrix-video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.matrix-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}
.matrix-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: -1;
}
.matrix-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
}
.matrix-overlay-panel {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    max-width: 500px;
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    margin: 40px 0;
}
.matrix-overlay-panel h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-family: 'Barlow Condensed', sans-serif;
    color: #fff;
}
.matrix-overlay-panel p {
    font-size: 1rem;
    line-height: 1.6;
    color: #cbd5e0;
    margin-bottom: 30px;
}
.matrix-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.matrix-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
}
.matrix-brand-logo:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}
.matrix-brand-logo i {
    font-size: 1.5rem;
    color: var(--orange, #ff9900);
}
@media (max-width: 768px) {
    .lmk-matrix-section { min-height: auto; padding: 60px 0; }
    .matrix-overlay-panel { padding: 30px; max-width: 100%; margin: 0 15px; }
    .matrix-categories { grid-template-columns: 1fr; }
}

/* ── Home Page Featured & Promo Sections ── */
.home-featured-section {
    padding: 80px 0;
    background: var(--bg);
}
.home-career-promo {
    padding: 60px 0;
    background: var(--bg);
}
.career-promo-inner {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    min-height: 400px;
    display: flex;
    align-items: center;
}
.career-promo-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,34,68,0.95) 0%, rgba(0,34,68,0.4) 100%);
}
body.dark-mode .career-promo-inner::before {
    background: linear-gradient(90deg, rgba(10,15,26,0.95) 0%, rgba(10,15,26,0.4) 100%);
}
.career-promo-content {
    position: relative;
    z-index: 2;
    padding: 60px;
    max-width: 600px;
    color: #fff;
}
.career-promo-content h2 {
    font-size: 2.8rem;
    font-family: 'Barlow Condensed', sans-serif;
    margin-bottom: 20px;
}
.career-promo-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}
@media (max-width: 768px) {
    .home-featured-section { padding: 50px 0; }
    .home-career-promo { padding: 30px 0; }
    .career-promo-content { padding: 40px 24px; }
    .career-promo-content h2 { font-size: 2.2rem; }
}

/* ── Product Carousel ── */
.product-carousel-wrapper {
    position: relative;
    padding: 0 40px;
}
.products-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 24px;
    padding: 10px 5px 30px 5px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}
.products-carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
.products-carousel-track > * {
    flex: 0 0 320px; /* Fixed width for carousel items */
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.carousel-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}
body.dark-mode .carousel-btn {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}
body.dark-mode .carousel-btn:hover {
    background: var(--blue);
    color: #fff;
}
.prev-btn { left: -10px; }
.next-btn { right: -10px; }
@media (max-width: 768px) {
    .product-carousel-wrapper { padding: 0; }
    .carousel-btn { display: none; }
    .products-carousel-track > * { flex: 0 0 280px; }
}

/* ── Product Carousel ── */
.product-carousel-wrapper {
    position: relative;
    padding: 0 40px;
}
.products-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 24px;
    padding: 10px 5px 30px 5px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}
.products-carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
.products-carousel-track > * {
    flex: 0 0 320px; /* Fixed width for carousel items */
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.carousel-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}
body.dark-mode .carousel-btn {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}
body.dark-mode .carousel-btn:hover {
    background: var(--blue);
    color: #fff;
}
.prev-btn { left: -10px; }
.next-btn { right: -10px; }
@media (max-width: 768px) {
    .product-carousel-wrapper { padding: 0; }
    .carousel-btn { display: none; }
    .products-carousel-track > * { flex: 0 0 280px; }
}

/* Fix hardcoded backgrounds and text colors in Dark Mode */
body.dark-mode .lmk-split-section,
body.dark-mode .modern-text-block,
body.dark-mode .market-card,
body.dark-mode .milestone-item,
body.dark-mode .global-presence-card,
body.dark-mode .lmk-matrix-grid,
body.dark-mode .career-perk-card,
body.dark-mode .products-carousel-section {
    background: var(--card);
}

body.dark-mode .drive-section.bg-light {
    background-color: var(--light);
}

body.dark-mode .split-feature-item p,
body.dark-mode .modern-text-block p,
body.dark-mode .market-card p {
    color: var(--muted);
}

/* ── News Page ── */
.news-header {
    background: linear-gradient(135deg, var(--red, #b7211a) 0%, #8b1812 100%);
    color: white;
    text-align: center;
    padding: 80px 20px 60px;
}
.news-header h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
    font-family: 'Roboto Slab', serif;
}
.news-header p {
    font-size: 1.1rem;
    opacity: 0.9;
}
#news-featured-container {
    margin-bottom: 50px;
}
.news-featured {
    display: flex;
    background: var(--card);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s;
    text-decoration: none;
    color: var(--text);
}
.news-featured:hover {
    transform: translateY(-5px);
}
.news-featured-img {
    flex: 1.2;
    min-height: 400px;
    background-size: cover;
    background-position: center;
}
.news-featured-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(183, 33, 26, 0.1);
    color: var(--red);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 15px;
    align-self: flex-start;
}
.news-featured-title {
    font-size: 2rem;
    color: var(--text);
    margin-bottom: 15px;
    line-height: 1.3;
    font-family: 'Roboto Slab', serif;
}
.news-date {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.news-desc {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}
.news-card {
    background: var(--card);
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.news-card-img {
    height: 220px;
    background-size: cover;
    background-position: center;
}
.news-card-body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card-title {
    font-size: 1.3rem;
    color: var(--text);
    margin: 10px 0 15px;
    line-height: 1.4;
    font-weight: 700;
    font-family: 'Roboto Slab', serif;
}
.news-card-desc {
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
}
.news-btn {
    align-self: flex-start;
    color: var(--red);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.news-card:hover .news-btn {
    gap: 10px;
}

@media (max-width: 768px) {
    .news-featured {
        flex-direction: column;
    }
    .news-featured-img {
        min-height: 250px;
    }
    .news-featured-content {
        padding: 25px;
    }
    .news-featured-title {
        font-size: 1.5rem;
    }
}

/* Navbar Contact Button */
.nav-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue, #004d99);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 10px rgba(0, 77, 153, 0.2);
  text-decoration: none;
  margin-left: 10px;
}
.nav-contact-btn:hover {
  background: #003d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 77, 153, 0.4);
}
body.dark-mode .nav-contact-btn {
  background: var(--blue, #004d99);
  box-shadow: 0 4px 10px rgba(0, 77, 153, 0.3);
}
body.dark-mode .nav-contact-btn:hover {
  background: #0066cc;
  box-shadow: 0 6px 15px rgba(0, 102, 204, 0.4);
}

/* Mobile Navbar Contact Button */
.mobile-nav-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue, #004d99);
  color: #fff !important;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 15px 20px;
  transition: background 0.2s;
  text-decoration: none;
  text-align: center;
}
.mobile-nav-contact-btn:hover {
  background: #003d7a;
}
body.dark-mode .mobile-nav-contact-btn {
  background: var(--blue, #004d99);
}
body.dark-mode .mobile-nav-contact-btn:hover {
  background: #0066cc;
}