:root {
  --brand-1: #D71820;   /* 🔴 Primary Brand Color (Red) */
  --brand-2: #6c757d;   /* Neutral / Secondary Gray */
  --brand-3: #0b132b;   /* Deep base text color */
  --accent:  #f97316;   /* Warm accent (orange tone complements red) */
  --soft:    #f8fafc;   /* Light background shade */
  --chip:    #f1f3f6;   /* Light card/chip background */
  
  /* Bootstrap primary sync (optional) */
  --bs-primary: var(--brand-1);
}

/* Optional: force the outline button's internal vars (helps if something else overrides) */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bd151d;         /* ~10-15% darker */
  --bs-btn-hover-border-color: #bd151d;

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a51219;        /* deeper for active */
  --bs-btn-active-border-color: #a51219;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
}

/* Keep a matching focus ring */
.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary{
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35);
}

html,body{scroll-behavior:smooth}
body{
  font-kerning:normal;
  background:#f3f4f6; /* light base */
  color:#0b132b;      /* dark text */
}

/* Tech background (light) */
.bg-tech{
  position:relative;isolation:isolate;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.09), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(14,165,165,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #ffffff 100%);
}
.bg-tech::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.6;pointer-events:none;
  background-image:
    linear-gradient(transparent 95%, rgba(0,0,0,.06) 96%),
    linear-gradient(90deg, transparent 95%, rgba(0,0,0,.06) 96%);
  background-size:24px 24px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 60%, transparent 70%);
}

/* Slider (unique to first block) */
.carousel-item{min-height:100vh}
.slide-cover{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.65))
}
.slide-content{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 1rem}
.slide-content h1{font-weight:800;text-shadow:none;color:#0b132b;}
.slide-badges .badge{
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  color:#0b132b;
}

/* Mega dropdown (unchanged behavior) */
.brand-pill{
  display:inline-block;padding:.25rem .6rem;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;margin:.2rem .3rem .3rem 0;font-size:.85rem;
  background:#ffffff;color:#0b132b;
}
@media (min-width:992px){
  .dropdown-mega .dropdown-menu{display:block;opacity:0;transform:translateY(10px);visibility:hidden;transition:all .18s ease}
  .dropdown-mega:hover .dropdown-menu{opacity:1;transform:none;visibility:visible}
}

/* Sections */
.section-title{font-weight:800;letter-spacing:.2px;color:#0b132b}
.section-sub{color:#5e6166}

/* Product cards (light) */
.product-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;overflow:hidden;height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.12);
}
.product-thumb{position:relative;overflow:hidden;background:#f3f4f6}
.product-thumb img{width:100%;height:220px;object-fit:cover;transform:scale(1);transition:transform .6s ease}
.product-card:hover .product-thumb img{transform:scale(1.06)}
.product-card h5{color:#0b132b}
.product-body{padding:1.1rem}

.product-card{
  display:flex;
  flex-direction:column;
}
.product-body{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.product-body a.btn{
  margin-top:auto;          /* stick to bottom */
  align-self:flex-start;    /* prevent full-width stretch */
  /* optional safety: */
  width:auto;
  display:inline-block;
}

.brand-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  background:#eef2f7;border:1px solid rgba(0,0,0,.06);
  color:#0b132b;font-weight:600;border-radius:999px;
  padding:.35rem .7rem;font-size:.85rem;margin:.25rem .35rem .35rem 0
}

/* Feature */
.feature-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;background:#ffffff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Footer (light) */
footer{
  background:#f8fafc;color:#374151
}
footer a{
  color:rgba(31,41,55,.85);
  text-decoration:none;
}
footer a:hover{
  color:rgba(31,41,55,.85);
  text-decoration:underline;
}
.footer-bottom{border-top:1px solid rgba(0,0,0,.08)}
footer li:hover{background:#f3f4f6}

/* Back-to-top */
#backToTop{position:fixed;right:1rem;bottom:1rem;display:none}

/* Spacers */
.py-6{padding-top:4.5rem;padding-bottom:4.5rem}

/* === Dark Slides (hero/slider only) === */
/* .carousel-item{ */
  /* min-height:100vh; */
  /* background:#0b1220; /* fallback behind images/videos */ */
/* } */
.slide-cover{
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)) !important;
}
.slide-content h1{
  color:#e5e7eb !important; /* light text */
  text-shadow:0 10px 30px rgba(0,0,0,.6);
}
.carousel-item .slide-badges .badge{
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#e5e7eb !important;
}
.carousel-item .brand-pill{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#e5e7eb !important;
}

/* If your first section uses .bg-tech as the hero background, keep it dark */
.carousel-item .bg-tech{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(32,201,151,.12), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 40%, #0b1220 100%) !important;
}
.carousel-item .bg-tech::before{
  opacity:.28 !important;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.06) 96%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 96%) !important;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 60%, transparent 70%);
}

/* HERO (page banner) only */
.hero-carousel .carousel-item{ min-height:100vh }
.hero-carousel .slide-cover{
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)) !important;
}
.hero-carousel .slide-content h1{
  color:#e5e7eb !important; text-shadow:0 10px 30px rgba(0,0,0,.6);
}
.hero-carousel .slide-badges .badge{
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#e5e7eb !important;
}
.hero-carousel .brand-pill{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#e5e7eb !important;
}
.hero-carousel .bg-tech{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(32,201,151,.12), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 40%, #0b1220 100%) !important;
}
.hero-carousel .bg-tech::before{
  opacity:.28 !important;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.06) 96%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 96%) !important;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 60%, transparent 70%);
}

/* === Hero carousel: make media cover and keep overlays on top === */
.hero-carousel .carousel-item{
  position: relative;           /* ensure absolute children are scoped */
  min-height: 100vh;            /* already present; keep for full-height */
}

.hero-carousel .carousel-item > img,
.hero-carousel .carousel-item > video,
.hero-carousel .carousel-item .bg-tech{
  position: absolute;           /* take media out of normal flow */
  inset: 0;                     /* fill the slide */
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crop to viewport nicely */
}

/* Overlay layers: cover underlay + content on top */
.hero-carousel .slide-cover{ z-index: 2; }
.hero-carousel .slide-content{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1rem;
  z-index: 3;                   /* > image and cover */
  text-align: center;
}

/* (Optional) Prevent accidental stacking issues with indicators/controls */
.hero-carousel .carousel-indicators,
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ z-index: 4; }

/* BRANDS carousel — compact, card grid, flip */
.brands-carousel .carousel-item{
  min-height:auto;                   /* not full height */
  background:transparent;
  padding: .25rem 0;
}

.brands-carousel .row.g-3{           /* tighter gutters on small screens */
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

/* Indicators: small dots and lower offset */
.brands-carousel .carousel-indicators{
  bottom: -1.75rem;
}
.brands-carousel .carousel-indicators [data-bs-target]{
  width:.5rem; height:.5rem; border-radius:999px;
  background:#cfd4da; opacity:.8;
}
.brands-carousel .carousel-indicators .active{
  background: var(--bs-primary);
  opacity:1;
}

/* Controls: subtle */
.brands-carousel .carousel-control-prev,
.brands-carousel .carousel-control-next{
  width: 2.75rem;
}
.brands-carousel .carousel-control-prev-icon,
.brands-carousel .carousel-control-next-icon{
  filter: invert(0.4) grayscale(1);
}
.brands-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.brands-carousel .carousel-control-next:hover .carousel-control-next-icon{
  filter: none;
}

/* Flip cards (scoped so they don't affect other cards) */
.brands-carousel .brand-flip{
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  background:#fff;
  perspective: 1000px;
  cursor: pointer;
  overflow:hidden;
}
.brands-carousel .brand-flip-inner{
  position:relative;
  width:100%;
  height:160px;
  transform-style:preserve-3d;
  transition:transform .6s ease;
}
@media (min-width:768px){
  .brands-carousel .brand-flip-inner{ height:180px; }
}
.brands-carousel .brand-flip:where(:hover, :focus, .is-flipped) .brand-flip-inner{
  transform: rotateY(180deg);
}
.brands-carousel .brand-face{
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.brands-carousel .brand-front{
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.brands-carousel .brand-back{
  transform: rotateY(180deg);
  background:#0f172a; color:#e5e7eb; text-align:center;
}
.brands-carousel .brand-back h6{ margin-bottom:.25rem; font-weight:700; }
.brands-carousel .brand-logo{
  max-width:80%; max-height:70%; object-fit:contain; filter:contrast(1.05) saturate(1.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .brands-carousel .brand-flip-inner{ transition:none }
}



/* === Dark Footer === */
footer{
  background:#0b1220 !important;
  color:#cbd5e1 !important;
}
footer a{
  color:rgba(221,221,221,.85) !important;
  text-decoration:none;
}
footer a:hover{
  color:rgba(221,221,221,.95) !important;
  text-decoration:none;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12) !important;
}
footer li:hover{
  background:#0b1220 !important;
}

/* Brand flip card */
.brand-flip{
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  background:#fff;
  perspective: 1000px;
  cursor: pointer;
  overflow:hidden;
}

.brand-flip-inner{
  position:relative;
  width:100%;
  height:160px;                  /* card height */
  transform-style:preserve-3d;
  transition:transform .6s ease;
}

@media (min-width: 768px){
  .brand-flip-inner{ height:180px; }
}

.brand-flip:where(:hover, :focus, .is-flipped) .brand-flip-inner{
  transform: rotateY(180deg);
}

.brand-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.brand-front{
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.brand-back{
  transform: rotateY(180deg);
  background:#0f172a;             /* dark back for contrast */
  color:#e5e7eb;
  text-align:center;
}

.brand-back h6{
  margin-bottom:.25rem;
  font-weight:700;
}

.brand-logo{
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  filter: contrast(1.05) saturate(1.05);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-flip-inner{ transition:none }
}