/* ==========================================================================
   Kaiketsuteknik India Pvt. Ltd. — Dark Theme
   ========================================================================== */

:root{
  --bg-0:#08080c;
  --bg-1:#0d0e14;
  --bg-2:#13141c;
  --bg-3:#191b26;
  --panel:#14151f;
  --panel-border:rgba(255,255,255,.08);
  --text-0:#f4f5f7;
  --text-1:#c7c9d4;
  --text-muted:#8a8d9c;
  --accent:#e6262b;
  --accent-2:#ff4d4f;
  --accent-dark:#a3181c;
  --accent-glow:rgba(230,38,43,.45);
  --gradient-accent:linear-gradient(135deg,#ff4d4f 0%,#c5171b 100%);
  --gradient-dark:linear-gradient(180deg,rgba(8,8,12,0) 0%,rgba(8,8,12,.9) 100%);
  --radius:14px;
  --shadow-soft:0 10px 40px rgba(0,0,0,.45);
  --shadow-glow:0 0 0 1px rgba(230,38,43,.25),0 20px 50px -10px rgba(230,38,43,.35);
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg-0);
  color:var(--text-1);
  font-family:var(--font-body);
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--text-0);
  font-weight:600;
  letter-spacing:-.01em;
}

a{ text-decoration:none; color:inherit; transition:color .25s ease; }

::selection{ background:var(--accent); color:#fff; }

img{ max-width:100%; display:block; }

.text-accent{ color:var(--accent-2)!important; }
.bg-panel{ background:var(--panel); }

/* Background texture */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 90% -10%, rgba(230,38,43,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 20%, rgba(230,38,43,.06), transparent 55%);
  pointer-events:none;
  z-index:0;
}

/* ---------- Buttons ---------- */
.btn{ font-family:var(--font-head); font-weight:500; border-radius:999px; padding:.7rem 1.6rem; transition:all .3s ease; }

.btn-accent{
  background:var(--gradient-accent);
  border:none;
  color:#fff;
  box-shadow:0 8px 24px -6px var(--accent-glow);
}
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -4px var(--accent-glow); color:#fff; }

.btn-outline-light{ border:1px solid rgba(255,255,255,.35); color:var(--text-0); }
.btn-outline-light:hover{ background:#fff; color:#0a0a0a; border-color:#fff; }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:14px 0;
  background:rgba(8,8,12,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:all .35s ease;
}
.navbar.scrolled{
  padding:8px 0;
  background:rgba(8,8,12,.92);
  border-bottom:1px solid var(--panel-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.brand{ display:flex; align-items:center; gap:.65rem; }
.brand .logo-mark{ height:42px; width:auto; flex:0 0 auto; object-fit:contain; }
.brand .brand-text{ line-height:1.15; }
.brand .brand-text .name{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--text-0); letter-spacing:.01em; }
.brand .brand-text .sub{ font-size:.62rem; letter-spacing:.14em; color:var(--text-muted); text-transform:uppercase; }

.navbar-nav .nav-link{
  color:var(--text-1)!important;
  font-family:var(--font-head);
  font-size:.92rem;
  font-weight:500;
  padding:.55rem 1rem!important;
  position:relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color:var(--text-0)!important; }
.navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.2rem; height:2px;
  background:var(--gradient-accent); border-radius:2px;
}

.dropdown-menu{
  background:var(--bg-3); border:1px solid var(--panel-border); border-radius:12px;
  padding:.5rem; box-shadow:var(--shadow-soft);
}
.dropdown-item{ color:var(--text-1); border-radius:8px; padding:.55rem .8rem; font-size:.9rem; }
.dropdown-item:hover,.dropdown-item:focus{ background:rgba(230,38,43,.12); color:#fff; }

.navbar-toggler{ border:1px solid var(--panel-border); }

@media (max-width:991.98px){
  .navbar-collapse{
    background:var(--bg-2); margin-top:14px; padding:1rem; border-radius:14px;
    border:1px solid var(--panel-border);
  }
}

/* ---------- Client Ticker ---------- */
.client-ticker{
  position:relative; z-index:1;
  background:var(--bg-2);
  border-bottom:1px solid var(--panel-border);
  padding-top:76px;
  overflow:hidden;
}
.client-ticker-inner{
  overflow:hidden; padding:12px 0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.client-ticker-track{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  animation:ticker-scroll 26s linear infinite;
  will-change:transform;
}
.client-ticker:hover .client-ticker-track{ animation-play-state:paused; }
.ticker-label{
  font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-right:.6rem;
}
.ticker-item{
  font-family:var(--font-head); font-weight:500; font-size:.92rem; letter-spacing:.03em;
  color:var(--text-muted); white-space:nowrap;
}
.ticker-dot{ color:var(--accent); opacity:.7; margin:0 .4rem; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Hero Slider ---------- */
.hero-slider{ position:relative; height:92vh; min-height:560px; margin-top:0; }
/* The client ticker normally clears the fixed navbar; without it the hero must do so itself */
.hero-slider-flush{ margin-top:76px; }
.hero-slide{
  height:92vh; min-height:560px;
  display:flex; align-items:center;
  position:relative;
  background-size:cover; background-position:center;
}
.hero-slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,8,12,.94) 10%, rgba(8,8,12,.65) 55%, rgba(8,8,12,.35) 100%);
}
.hero-slide .container{ position:relative; z-index:2; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--accent-2); font-family:var(--font-head); font-weight:600;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem;
}
.hero-eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent-2); display:inline-block; }
.hero-slide h1{ font-size:clamp(2.1rem,5vw,3.6rem); color:#fff; line-height:1.12; margin-bottom:1.1rem; }
.hero-slide p{ font-size:1.08rem; color:var(--text-1); max-width:560px; margin-bottom:2rem; }

.hero-slider .carousel-indicators{ bottom:28px; }
.hero-slider .carousel-indicators [data-bs-target]{
  width:34px; height:3px; border-radius:3px; background:rgba(255,255,255,.35); border:none; opacity:1;
}
.hero-slider .carousel-indicators .active{ background:var(--gradient-accent); }

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{ width:56px; height:56px; top:50%; transform:translateY(-50%); bottom:auto; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--panel-border); backdrop-filter:blur(6px); opacity:.85;}
.hero-slider .carousel-control-prev{ left:24px; }
.hero-slider .carousel-control-next{ right:24px; }
.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover{ background:var(--accent); opacity:1; }
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon{ width:1.1rem; height:1.1rem; }

.hero-scroll-cue{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  color:var(--text-muted); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:3;
}
.hero-scroll-cue span{ width:1px; height:28px; background:linear-gradient(var(--accent-2),transparent); animation:scrollDown 1.8s infinite; }
@keyframes scrollDown{ 0%{opacity:0; transform:scaleY(0);} 40%{opacity:1; transform:scaleY(1);} 100%{opacity:0; transform:scaleY(1) translateY(6px);} }

/* ---------- Sections ---------- */
section{ position:relative; z-index:1; }
.section-pad{ padding:5.5rem 0; }
.section-pad:has(+ .section-pad){ padding-bottom:2rem; }
.section-pad + .section-pad{ padding-top:1.5rem; }
@media (max-width:767.98px){
  .section-pad{ padding:3.5rem 0; }
  .section-pad:has(+ .section-pad){ padding-bottom:1.5rem; }
  .section-pad + .section-pad{ padding-top:1.25rem; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--accent-2); font-family:var(--font-head); font-weight:600;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent-2); }

.section-title{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:.5rem; }
.section-title u{ text-decoration:none; border-bottom:3px solid var(--accent); padding-bottom:2px; }
.section-sub{ color:var(--text-muted); max-width:640px; }

.bg-alt{ background:var(--bg-1); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); }
.bg-deep{ background:var(--bg-0); }

/* ---------- Cards ---------- */
.card-elegant{
  background:linear-gradient(180deg,var(--panel),rgba(20,21,31,.6));
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:2rem 1.6rem;
  height:100%;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-elegant:hover{ transform:translateY(-6px); border-color:rgba(230,38,43,.4); box-shadow:var(--shadow-glow); }

.icon-badge{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(230,38,43,.12); border:1px solid rgba(230,38,43,.25);
  color:var(--accent-2); font-size:1.5rem; margin-bottom:1.1rem;
  transition:all .3s ease;
}
.card-elegant:hover .icon-badge{ background:var(--gradient-accent); color:#fff; box-shadow:0 8px 20px -4px var(--accent-glow); }

.card-elegant h3,.card-elegant h4{ font-size:1.12rem; margin-bottom:.6rem; }
.card-elegant p{ color:var(--text-muted); font-size:.93rem; margin-bottom:0; }

.card-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; color:var(--accent-2); font-weight:600; font-size:.87rem; }
.card-link i{ transition:transform .25s ease; }
.card-elegant:hover .card-link i{ transform:translateX(5px); }

/* Solution tile with image */
.tile{
  position:relative; border-radius:var(--radius); overflow:hidden; height:210px;
  border:1px solid var(--panel-border);
}
.tile .tile-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s ease; }
.tile:hover .tile-bg{ transform:scale(1.08); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,12,.15) 30%,rgba(8,8,12,.95) 100%); }
.tile .tile-body{ position:absolute; left:0; right:0; bottom:0; padding:.7rem 1.4rem 1.4rem; z-index:2; }
.tile .icon-badge{ margin-bottom:.7rem; }
.tile h3{ font-size:1.05rem; margin-bottom:.3rem; }
.tile p{ color:var(--text-muted); font-size:.85rem; margin-bottom:0; max-height:0; opacity:0; overflow:hidden; transition:all .35s ease; }
.tile:hover p{ max-height:60px; opacity:1; margin-top:.4rem; }

/* ---------- Stats band ---------- */
.stats-band{
  background:var(--bg-2);
  border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
  padding:3rem 0;
}
.stat-item{ text-align:center; }
.stat-item .num{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.8rem,3vw,2.6rem); color:#fff; }
.stat-item .num .accent{ color:var(--accent-2); }
.stat-item .label{ color:var(--text-muted); font-size:.85rem; letter-spacing:.04em; margin-top:.2rem; }

/* ---------- Industries strip ---------- */
.industry-chip{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:1.4rem .5rem; text-align:center; color:var(--text-1);
  border-radius:12px; transition:all .3s ease;
}
.industry-chip i{ font-size:1.7rem; color:var(--accent-2); }
.industry-chip:hover{ background:var(--panel); transform:translateY(-4px); color:#fff; }

/* ---------- CTA band ---------- */
.cta-band{
  background:radial-gradient(120% 200% at 0% 0%, #2a0708 0%, #0d0e14 55%), var(--bg-1);
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:2.6rem 2.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.cta-band h3{ font-size:1.5rem; margin-bottom:.25rem; }
.cta-band .eyebrow{ margin-bottom:.4rem; }

/* ---------- Testimonials ---------- */
.testimonial-carousel{ max-width:760px; margin:0 auto; }
.testimonial-card{
  background:linear-gradient(180deg,var(--panel),rgba(20,21,31,.6));
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:2.8rem 2.6rem;
  text-align:center;
  max-width:680px;
}
@media (max-width:575.98px){ .testimonial-card{ padding:2.2rem 1.4rem; } }
.testimonial-card .quote-icon{ font-size:2.4rem; color:var(--accent-2); opacity:.5; }
.testimonial-stars{ color:var(--accent-2); font-size:.9rem; margin-bottom:.8rem; }
.testimonial-stars i{ margin:0 1px; }
.testimonial-quote{ font-size:1.1rem; color:var(--text-1); line-height:1.7; margin-bottom:1.6rem; }
.testimonial-author{ display:flex; align-items:center; justify-content:center; gap:.8rem; text-align:left; }
.testimonial-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.testimonial-avatar-fallback{ display:flex; align-items:center; justify-content:center; background:var(--bg-3); border:1px solid var(--panel-border); color:var(--text-muted); font-size:1.2rem; }
.testimonial-name{ font-family:var(--font-head); font-weight:600; font-size:.95rem; }
.testimonial-role{ color:var(--accent-2); font-size:.8rem; }

.testimonial-carousel .carousel-control-prev,
.testimonial-carousel .carousel-control-next{
  width:44px; height:44px; top:50%; transform:translateY(-50%); bottom:auto; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--panel-border); opacity:.9;
}
.testimonial-carousel .carousel-control-prev{ left:-10px; }
.testimonial-carousel .carousel-control-next{ right:-10px; }
@media (max-width:767.98px){
  .testimonial-carousel .carousel-control-prev{ left:-4px; }
  .testimonial-carousel .carousel-control-next{ right:-4px; }
}
.testimonial-carousel .carousel-control-prev:hover,
.testimonial-carousel .carousel-control-next:hover{ background:var(--accent); border-color:var(--accent); opacity:1; }
.testimonial-carousel .carousel-control-prev-icon,
.testimonial-carousel .carousel-control-next-icon{ width:.9rem; height:.9rem; }

/* ---------- Timeline (About) ---------- */
.timeline{ position:relative; display:flex; justify-content:space-between; margin-top:3rem; flex-wrap:wrap; gap:2rem 0; }
.timeline::before{ content:""; position:absolute; top:26px; left:0; right:0; height:1px; background:var(--panel-border); }
.timeline-item{ position:relative; flex:1 1 150px; text-align:center; z-index:1; }
.timeline-item .t-icon{
  width:52px; height:52px; margin:0 auto 1rem; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:1.2rem;
}
.timeline-item .t-year{ font-family:var(--font-head); font-weight:700; color:#fff; font-size:1.1rem; }
.timeline-item .t-desc{ color:var(--text-muted); font-size:.83rem; margin-top:.2rem; }
.timeline-item .t-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent-2); margin:0 auto .8rem; position:relative; top:-4.6rem; box-shadow:0 0 0 4px rgba(230,38,43,.2); }

/* ---------- Team ---------- */
.team-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--panel-border); background:var(--panel); }
.team-photo{ height:280px; background-size:cover; background-position:center; position:relative; }
.team-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,8,12,.9)); }
.team-body{ padding:1.3rem 1.4rem; }
.team-body h4{ font-size:1.08rem; margin-bottom:.1rem; }
.team-body .role{ color:var(--accent-2); font-size:.82rem; font-weight:600; margin-bottom:.6rem; display:block; }
.team-body p{ color:var(--text-muted); font-size:.87rem; }
.social-dot{ width:34px; height:34px; border-radius:50%; border:1px solid var(--panel-border); display:inline-flex; align-items:center; justify-content:center; color:var(--text-1); margin-top:.6rem; }
.social-dot:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- Share buttons ---------- */
.share-buttons{ display:flex; align-items:center; gap:.6rem; }
.share-buttons .share-label{ color:var(--text-muted); font-size:.85rem; margin-right:.2rem; }
.share-buttons .share-icon{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--panel-border);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-1); background:transparent; cursor:pointer; transition:all .2s ease; padding:0;
}
.share-buttons .share-icon:hover{ background:var(--gradient-accent); border-color:transparent; color:#fff; }

.share-toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,16px);
  background:var(--panel); border:1px solid var(--panel-border); color:var(--text-0);
  padding:.7rem 1.2rem; border-radius:10px; font-size:.88rem; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:1080;
}
.share-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- Footer ---------- */
footer{ background:var(--bg-2); border-top:1px solid var(--panel-border); padding:4rem 0 1.5rem; }
footer h5{ color:#fff; font-size:1rem; margin-bottom:1.1rem; }
footer .footer-links li{ margin-bottom:.6rem; }
footer .footer-links a{ color:var(--text-muted); font-size:.9rem; }
footer .footer-links a:hover{ color:var(--accent-2); }
footer p{ color:var(--text-muted); font-size:.9rem; }
footer .contact-line{ display:flex; gap:.7rem; margin-bottom:.9rem; color:var(--text-muted); font-size:.88rem; }
footer .contact-line i{ color:var(--accent-2); margin-top:.2rem; }
.footer-bottom{ border-top:1px solid var(--panel-border); margin-top:2.5rem; padding-top:1.4rem; font-size:.85rem; color:var(--text-muted); }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--panel-border); display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; color:var(--text-1); }
.social-row a:hover{ background:var(--gradient-accent); border-color:transparent; color:#fff; }

/* ---------- Page header (inner pages) ---------- */
/* Same band as the products catalogue hero, so every inner page opens the
   same way: a lifted panel, a soft red glow top right, a rule underneath. */
.page-header{
  padding:7rem 0 2.5rem; position:relative;
  background:radial-gradient(90% 140% at 100% 0%, rgba(230,38,43,.10), transparent 60%), var(--bg-1);
  border-bottom:1px solid var(--panel-border);
}
.page-header + section.section-pad{ padding-top:2.5rem; }
.page-header .container{ position:relative; z-index:2; }
.page-header h1{ font-size:clamp(1.8rem,4vw,2.7rem); color:#fff; }
.breadcrumb-elegant{ font-size:.85rem; color:var(--text-muted); }
.breadcrumb-elegant a{ color:var(--text-muted); }
.breadcrumb-elegant a:hover{ color:var(--accent-2); }
.breadcrumb-elegant .current{ color:var(--accent-2); }

/* ---------- Products catalog (hero + category tiles + trust strip) ---------- */
/* This hero replaces the shared page-header here, so it owns the fixed-navbar clearance. */
.catalog-hero{
  position:relative; padding:7rem 0 2.5rem;
  background:radial-gradient(90% 140% at 100% 0%, rgba(230,38,43,.10), transparent 60%), var(--bg-1);
  border-bottom:1px solid var(--panel-border);
}
.catalog-hero-title{ font-size:clamp(1.9rem,4vw,3rem); line-height:1.1; }
.catalog-hero-media{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--panel-border);
  position:relative; height:260px;
}
.catalog-hero-media img{ width:100%; height:100%; object-fit:cover; }
.catalog-hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg-1) 0%,rgba(13,14,20,.35) 45%,transparent 100%);
}

.catalog-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:1rem 1.1rem;
}
.catalog-stat{ display:flex; align-items:center; gap:.7rem; }
.catalog-stat i{ font-size:1.4rem; color:var(--accent-2); }
.catalog-stat b{ display:block; font-family:var(--font-head); font-size:1.25rem; color:var(--text-0); line-height:1.1; }
.catalog-stat span{ font-size:.78rem; color:var(--text-muted); }

/* Fixed column counts rather than auto-fill, so the desktop row is exactly 4
   tiles - 28 categories fill 7 rows with no ragged last row. */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:767.98px){ .cat-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
@media (max-width:575.98px){ .cat-grid{ grid-template-columns:repeat(2,1fr); gap:.75rem; } }
.cat-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.8rem; padding:1.9rem .8rem 1.4rem; min-height:175px;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  color:var(--text-1); text-align:center; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cat-tile:hover{ transform:translateY(-4px); border-color:rgba(230,38,43,.45); box-shadow:var(--shadow-glow); color:var(--text-0); }
.cat-tile-num{
  position:absolute; top:.6rem; left:.75rem;
  font-size:.75rem; font-family:var(--font-head); color:var(--text-muted); opacity:.7;
}
.cat-tile-count{
  position:absolute; top:.55rem; right:.65rem;
  font-size:.72rem; font-weight:600; color:var(--accent-2);
  background:rgba(230,38,43,.15); border:1px solid rgba(230,38,43,.3);
  border-radius:999px; padding:.1rem .5rem;
}
/* Sized for the wider four-across tiles; phones step back down below. */
.cat-tile-media{
  width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:var(--bg-2); border:1px solid var(--panel-border);
  overflow:hidden; flex:0 0 auto;
}
.cat-tile-media i{ font-size:2.1rem; color:var(--accent-2); }
.cat-tile-media img{ width:100%; height:100%; object-fit:cover; }
.cat-tile:hover .cat-tile-media{ border-color:rgba(230,38,43,.4); }
.cat-tile-name{ font-size:1rem; font-weight:500; line-height:1.3; }
@media (max-width:575.98px){
  .cat-tile{ gap:.6rem; padding:1.5rem .6rem 1.1rem; min-height:145px; }
  .cat-tile-media{ width:58px; height:58px; border-radius:12px; }
  .cat-tile-media i{ font-size:1.65rem; }
  .cat-tile-name{ font-size:.88rem; }
}

.trust-strip{ background:var(--bg-2); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); padding:1.6rem 0; }
.trust-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.2rem; }
.trust-item{ display:flex; align-items:center; gap:.7rem; }
.trust-item i{ font-size:1.5rem; color:var(--accent-2); flex:0 0 auto; }
.trust-item b{ display:block; font-family:var(--font-head); font-size:.9rem; color:var(--text-0); }
.trust-item span{ font-size:.78rem; color:var(--text-muted); }

/* ---------- Misc components ---------- */
.badge-soft{ background:rgba(230,38,43,.15); color:var(--accent-2); border:1px solid rgba(230,38,43,.3); font-weight:600; font-size:.7rem; letter-spacing:.05em; padding:.4rem .7rem; border-radius:999px; }
.list-check{ list-style:none; padding:0; margin:0; }
.list-check li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--text-1); margin-bottom:.5rem; }
.list-check i{ color:var(--accent-2); margin-top:.2rem; }

.filter-panel{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:1.4rem; }
.filter-panel h6{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.9rem; }
.filter-panel .form-check{ margin-bottom:.55rem; }
.filter-panel .form-check-label{ color:var(--text-muted); font-size:.88rem; }
.form-check-input{ background-color:var(--bg-3); border-color:var(--panel-border); }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }

.pagination .page-link{ background:var(--panel); border-color:var(--panel-border); color:var(--text-1); }
.pagination .page-link:hover{ background:var(--bg-3); border-color:var(--accent); color:#fff; }
.pagination .page-link:focus{ box-shadow:0 0 0 .2rem var(--accent-glow); }
.pagination .page-item.active .page-link{ background:var(--gradient-accent); border-color:var(--accent); color:#fff; }
.pagination .page-item.disabled .page-link{ background:var(--panel); border-color:var(--panel-border); color:var(--text-muted); }

.case-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--panel-border); background:var(--panel); height:100%; }
.case-media{ height:170px; background-size:cover; background-position:center; position:relative; }
.case-media .badge-soft{ position:absolute; top:12px; left:12px; }
.case-body{ padding:1.4rem; }
.case-body h4{ font-size:1.02rem; margin-bottom:.5rem; }
.case-body p{ color:var(--text-muted); font-size:.86rem; }
.case-metrics{ display:flex; gap:1.2rem; margin:1rem 0; }
.case-metrics .m{ text-align:center; }
.case-metrics .m b{ display:block; color:var(--accent-2); font-family:var(--font-head); font-size:1.1rem; }
.case-metrics .m span{ font-size:.72rem; color:var(--text-muted); }

.product-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:1.3rem; text-align:center; transition:all .3s ease; height:100%; }
.product-card:hover{ transform:translateY(-5px); border-color:rgba(230,38,43,.4); box-shadow:var(--shadow-glow); }
.product-thumb{ height:140px; border-radius:10px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:var(--accent-2); margin-bottom:1rem; overflow:hidden; }
.product-thumb img{ width:100%; height:100%; object-fit:cover; }

.product-detail-image{ height:420px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--panel-border); background:linear-gradient(160deg,#1b0d0e,#0d0e14 70%); display:flex; align-items:center; justify-content:center; }
.product-detail-image img{ width:100%; height:100%; object-fit:cover; }
.product-detail-image .placeholder-icon{ font-size:4.5rem; color:var(--panel-border); text-shadow:0 12px 30px rgba(0,0,0,.6); }
.product-card h4{ font-size:.98rem; margin-bottom:.35rem; }
.product-card p{ font-size:.82rem; color:var(--text-muted); margin-bottom:.7rem; }

.brand-strip{ background:var(--bg-1); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); padding:2.6rem 0; }
.brand-strip .brand-name{ color:var(--text-muted); font-family:var(--font-head); font-weight:700; font-size:1.2rem; letter-spacing:.02em; opacity:.7; transition:opacity .3s ease; text-align:center; }
.brand-strip .brand-name:hover{ opacity:1; color:#fff; }
.brand-strip .partner-logo{ max-height:40px; max-width:100%; width:auto; margin:0 auto; display:block; object-fit:contain; filter:grayscale(1) brightness(1.8); opacity:.7; transition:opacity .3s ease, filter .3s ease; }
.brand-strip .partner-logo:hover{ opacity:1; filter:grayscale(0) brightness(1); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- WhatsApp float ---------- */
/* Sits in the bottom-right corner, so .back-to-top stacks above it. */
.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; line-height:1; text-decoration:none;
  box-shadow:0 8px 24px -4px rgba(37,211,102,.45);
  z-index:999; transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-fab:hover,.whatsapp-fab:focus{ color:#fff; transform:translateY(-3px); box-shadow:0 12px 30px -4px rgba(37,211,102,.6); }
@media (max-width:575.98px){
  .whatsapp-fab{ right:16px; bottom:16px; width:52px; height:52px; font-size:1.6rem; }
}
/* Only lift the back-to-top button when the WhatsApp button is actually there. */
.whatsapp-fab ~ .back-to-top{ bottom:88px; }
@media (max-width:575.98px){
  .whatsapp-fab ~ .back-to-top{ right:16px; bottom:78px; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--gradient-accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -4px var(--accent-glow); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease; z-index:999; border:none;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg-0); }
::-webkit-scrollbar-thumb{ background:#2a2c3a; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-dark); }

/* ---------- Responsive tweaks ---------- */
@media (max-width:767.98px){
  .hero-slider{ height:auto; }
  .hero-slide{ height:auto; min-height:640px; padding:90px 0 50px; }
  .hero-slide::before{ background:linear-gradient(180deg, rgba(8,8,12,.75) 0%, rgba(8,8,12,.93) 45%, rgba(8,8,12,.97) 100%); }
  .cta-band{ padding:2rem 1.4rem; text-align:center; justify-content:center; }
  .timeline{ flex-direction:column; }
  .timeline::before{ display:none; }
  .timeline-item .t-dot{ display:none; }
  .stat-item{ margin-bottom:1.4rem; }
}

/* ---------- Product specifications ---------- */
.spec-table{ color:var(--text-1); }
.spec-table th,.spec-table td{ border-bottom:1px solid var(--panel-border); padding:.55rem .25rem; font-size:.9rem; vertical-align:top; }
.spec-table th{ color:var(--text-muted); font-weight:500; width:45%; }
.spec-table tr:last-child th,.spec-table tr:last-child td{ border-bottom:none; }

/* ---------- Specification filters ---------- */
.spec-filters{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:1.2rem 1.3rem; }
/* Bootstrap's caret is a dark SVG and vanishes on the dark panel. The repeat,
   position and size have to be restated because .bg-panel uses the shorthand,
   which resets them. */
.spec-filters .form-select{
  font-size:.85rem;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8c0cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .6rem center;
  background-size:14px 11px;
  padding-right:2rem;
}
.spec-filters .form-select option{ background:var(--panel); color:var(--text-0); }
.spec-filters .badge-soft{ cursor:pointer; }
.spec-filters .badge-soft:hover{ background:rgba(230,38,43,.28); color:var(--text-0); }

/* ---------- Contact form phone ---------- */
/* Country code stays compact beside the number; long names truncate. */
.input-group .phone-country{ flex:0 0 auto; width:auto; max-width:9.5rem; }

/* Every dark dropdown on the public site: Bootstrap's caret is a dark SVG,
   and .bg-panel's background shorthand also resets its repeat and position,
   so without this the selects show no arrow at all. */
.form-select.bg-panel{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8c0cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:14px 11px;
  padding-right:2.25rem;
}
.form-select.bg-panel option{ background:var(--panel); color:var(--text-0); }