/* =====================================================
   SafeFloor Fire Services — Design System v2
   Premium Industrial Warm White
   ===================================================== */

/* ---- Tokens ---- */
:root {
  /* Surface — tinted warm, never pure white */
  --bg: #FCFCFA;
  --bg-pure: #FEFEFD;
  --bg-concrete: #F4F4F1;
  --bg-warm: #FAF9F5;
  --bg-card: #FEFEFD;

  /* Brand */
  --red: #D71920;
  --red-hover: #B8141B;
  --red-light: rgba(215,25,32,0.06);
  --red-mid: rgba(215,25,32,0.12);
  --yellow: #FFC400;
  --yellow-light: rgba(255,196,0,0.12);
  --orange: #FF7A00;
  --green: #2E7D32;
  --blue: #1565C0;
  --white-card: #FFFFFF;

  /* Neutral — warm-tinted, never pure black/white */
  --ink: #1A1918;
  --gray: #5A5856;
  --gray-mid: #8A8886;
  --gray-light: #B5B3B0;
  --border: #E8E6E3;
  --border-light: #F0EEEB;
  --divider: #ECEAE7;
  --white-tinted: #FAF9F7;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(26,25,24,0.04);
  --shadow-sm: 0 2px 8px rgba(26,25,24,0.06);
  --shadow-md: 0 4px 20px rgba(26,25,24,0.08);
  --shadow-lg: 0 8px 40px rgba(26,25,24,0.10);
  --shadow-xl: 0 20px 60px rgba(26,25,24,0.12);
  --shadow-card: 0 1px 3px rgba(26,25,24,0.04), 0 4px 16px rgba(26,25,24,0.06);
  --shadow-card-hover: 0 4px 12px rgba(26,25,24,0.06), 0 12px 36px rgba(26,25,24,0.10);

  /* Typography */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 860px;
  --section: clamp(80px, 10vw, 140px);
  --section-sm: clamp(48px, 6vw, 80px);

  /* Motion — ease-out-quart per design law */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.5s;
  --dur-fast: 0.25s;
  --dur-slow: 0.8s;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.6; overflow-x:hidden; width:100%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto!important; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition:color var(--dur-fast) var(--ease); }
button { border:none; background:none; cursor:pointer; font-family:inherit; color:inherit; }
ul, ol { list-style:none; }
input, textarea, select { font-family:inherit; font-size:inherit; border:none; outline:none; background:none; color:inherit; }
::selection { background:var(--red); color:var(--white-tinted); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-light); }

/* ---- Accessibility: Focus Styles ---- */
:focus-visible {
  outline:2px solid var(--red);
  outline-offset:2px;
  border-radius:4px;
}
a:focus-visible, button:focus-visible {
  outline:2px solid var(--red);
  outline-offset:2px;
}
.form-input:focus-visible {
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-light);
}

/* ---- Skip to Content ---- */
.skip-to-content {
  position:fixed;
  top:-100%;
  left:16px;
  z-index:99999;
  padding:12px 24px;
  background:var(--red);
  color:var(--white-tinted);
  font-weight:600;
  font-size:0.875rem;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none;
  transition:top 0.3s var(--ease);
  box-shadow:var(--shadow-md);
}
.skip-to-content:focus {
  top:0;
  outline:2px solid var(--white-tinted);
  outline-offset:2px;
}

/* ---- Form Validation States ---- */
.form-group.error .form-input {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(215,25,32,0.1);
}
.form-error {
  display:none;
  font-size:0.75rem;
  color:var(--red);
  margin-top:4px;
  align-items:center;
  gap:4px;
}
.form-group.error .form-error {
  display:flex;
}
.form-group.success .form-input {
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(46,125,50,0.08);
}

/* ---- Improved Text Contrast ---- */
.t-body { color:var(--gray); }
.t-body-lg { color:#4A4845; }
.section-desc { color:#4A4845; }
.footer-brand-desc { color:var(--gray-light); }

/* ---- Typography ---- */
.t-display { font-family:var(--display); font-size:clamp(3rem,6.5vw,6.5rem); font-weight:700; line-height:0.95; letter-spacing:-0.03em; }
.t-h1 { font-family:var(--display); font-size:clamp(2.25rem,4.5vw,4.5rem); font-weight:700; line-height:1.05; letter-spacing:-0.025em; }
.t-h2 { font-family:var(--display); font-size:clamp(1.75rem,3vw,3rem); font-weight:600; line-height:1.12; letter-spacing:-0.02em; }
.t-h3 { font-family:var(--display); font-size:clamp(1.35rem,2vw,2rem); font-weight:600; line-height:1.2; letter-spacing:-0.015em; }
.t-h4 { font-family:var(--display); font-size:clamp(1.1rem,1.3vw,1.35rem); font-weight:600; line-height:1.3; }
.t-body { font-size:1rem; line-height:1.7; color:var(--gray); }
.t-body-lg { font-size:1.125rem; line-height:1.7; color:var(--gray); }
.prevention-section .t-body-lg { font-size:0.9375rem; line-height:1.65; }
.t-small { font-size:0.8125rem; line-height:1.5; color:var(--gray-mid); }
.t-caption { font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600; color:var(--red); }
.t-accent { color:var(--red); }

/* ---- Layout ---- */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.container-wide { max-width:var(--container-wide); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.container-narrow { max-width:var(--container-narrow); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
section { padding:var(--section) 0; position:relative; }
.grid { display:grid; gap:clamp(16px,2.5vw,32px); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.home-products-grid { grid-template-columns:repeat(3,1fr); }
@media(max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4,.home-products-grid{grid-template-columns:repeat(2,1fr);} .prevention-section .grid-2{grid-template-columns:1fr !important;gap:32px !important;} .prevention-section .reveal-right > div{padding:28px 20px !important;} .prevention-section .reveal-right svg[width="72"]{width:56px !important;height:56px !important;} .manufacturing-section .grid-2{grid-template-columns:1fr !important;gap:24px !important;} .manufacturing-section .factory-timeline{padding-left:20px;} .manufacturing-section .factory-timeline-item{padding:0 0 24px 24px;} .manufacturing-section .factory-timeline-item::before{left:-28px;} .manufacturing-section .reveal-right > div{gap:10px;} .manufacturing-section .reveal-right > div > div{padding:16px 10px !important;} .certifications-grid{grid-template-columns:1fr !important;gap:10px !important;} .cert-card{padding:14px 12px !important;gap:10px !important;} .cert-card-icon{width:36px !important;height:36px !important;} .cert-card-icon img{width:26px !important;height:26px !important;} .cert-card-name{font-size:0.8125rem !important;} .cert-card-desc{font-size:0.6875rem !important;line-height:1.4 !important;} .cert-card-download{width:30px !important;height:30px !important;} .cert-card-download svg{width:12px !important;height:12px !important;} .blog-grid{grid-template-columns:1fr !important;gap:16px !important;} .blog-card-image{height:160px !important;} .blog-card-body{padding:14px 16px 16px !important;} .blog-card-title{font-size:0.9375rem !important;} .why-choose-grid{grid-template-columns:repeat(2,1fr);gap:12px;overflow:hidden;} .why-choose-grid .reveal{padding:20px 12px !important;box-sizing:border-box;overflow:hidden;} .why-choose-grid .reveal > div:first-child{width:40px !important;height:40px !important;margin-bottom:12px !important;} .why-choose-grid .reveal > div:first-child svg{width:20px !important;height:20px !important;} .why-choose-grid .reveal h3{font-size:0.8125rem !important;margin-bottom:6px !important;} .why-choose-grid .reveal p{font-size:0.6875rem !important;line-height:1.4 !important;} section{padding:var(--section-sm) 0;} }
.flex{display:flex;} .flex-col{flex-direction:column;} .items-center{align-items:center;} .justify-center{justify-content:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:8px;} .gap-2{gap:16px;} .gap-3{gap:24px;} .gap-4{gap:40px;}
.text-center{text-align:center;}

/* ---- Screen Reader Only ---- */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---- Diagonal Stripe Accent ---- */
.stripe-accent {
  position:relative;
}
.stripe-accent::before {
  content:'';
  position:absolute;
  top:0; right:0;
  width:120px; height:100%;
  background:repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    var(--red) 8px,
    var(--red) 10px
  );
  opacity:0.06;
  pointer-events:none;
}

/* ---- Preloader ---- */
.preloader {
  position:fixed; inset:0; z-index:99999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px;
  transition:opacity 0.6s var(--ease), visibility 0.6s;
}
.preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-logo { position:relative; width:64px; height:64px; }
.preloader-ring {
  position:absolute; inset:0;
  border:2px solid var(--border);
  border-top-color:var(--red);
  border-right-color:var(--red);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-12px);} to{opacity:1;transform:translateY(0);} }
.preloader-text { font-family:var(--display); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--gray); }
.preloader-progress { width:160px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.preloader-bar { height:100%; background:linear-gradient(90deg,var(--red),var(--orange)); width:0%; border-radius:2px; transition:width 0.3s ease; }

/* ---- Navigation — Floating Pill ---- */
.nav-wrapper {
  position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:1000;
  display:flex; align-items:center; gap:5px;
  max-width:calc(100vw - 32px);
}
.nav {
  position:relative;
  height:52px;
  display:flex; align-items:center; gap:2px;
  background:rgba(250,249,247,0.08);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-radius:9999px;
  box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(250,249,247,0.1);
  border:1px solid rgba(250,249,247,0.12);
  padding:0 28px;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.nav.scrolled {
  background:rgba(250,249,247,0.12);
  box-shadow:0 4px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(250,249,247,0.08);
  height:48px;
}
.brand-chip {
  display:flex; align-items:center; gap:10px;
  height:50px; padding:0 18px 0 10px;
  background:rgba(250,249,247,0.07);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(250,249,247,0.12);
  border-radius:9999px;
  box-shadow:0 4px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(250,249,247,0.08);
  flex-shrink:0;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.brand-chip:hover {
  transform:scale(1.04);
  box-shadow:0 4px 24px rgba(0,0,0,0.12), 0 0 20px rgba(215,25,32,0.25), 0 0 40px rgba(215,25,32,0.12);
  border-color:rgba(215,25,32,0.3);
}
.brand-chip-logo {
  width:38px; height:38px;
  background:transparent;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:none;
  transition:box-shadow 0.3s ease;
}
.brand-chip:hover .brand-chip-logo {
  box-shadow:none;
}
.brand-chip-logo img {
  width:30px; height:30px;
  border-radius:50%;
  object-fit:contain;
}
.brand-chip-divider {
  width:1px; height:24px;
  background:rgba(250,249,247,0.2);
  flex-shrink:0;
}
.brand-chip-name {
  font-family:var(--display);
  font-size:1rem; font-weight:700;
  color:var(--white-tinted);
  letter-spacing:0.02em;
  white-space:nowrap;
}
.nav-link {
  font-size:0.8125rem; font-weight:500;
  color:rgba(250,249,247,0.7);
  padding:8px 12px;
  border-radius:9999px;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  white-space:nowrap;
  position:relative;
}
.nav-link:hover { color:var(--white-tinted); background:rgba(250,249,247,0.1); }
.nav-link.active {
  color:var(--white-tinted);
  background:var(--red);
  box-shadow:0 2px 12px rgba(215,25,32,0.35);
}
.nav-link.active:hover { background:var(--red-hover); }
.nav-link::after { display:none; }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 20px;
  background:var(--red); color:var(--white-tinted);
  border-radius:9999px;
  font-size:0.8125rem; font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow:0 2px 12px rgba(215,25,32,0.3);
}
.nav-cta:hover { background:var(--red-hover); transform:translateY(-1px); box-shadow:0 4px 20px rgba(215,25,32,0.4); }
.nav-toggle { display:none; flex-direction:column; gap:5px; width:28px; z-index:1001; cursor:pointer; }
.nav-toggle span { width:100%; height:1.5px; background:var(--white-tinted); border-radius:2px; transition:all 0.3s ease; transform-origin:center; }
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);} .nav-toggle.active span:nth-child(2){opacity:0;} .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ---- Mobile Header ---- */
.mobile-header {
  display:none; position:fixed; top:0; left:0; right:0; z-index:1001;
  padding:16px 20px;
  align-items:center; justify-content:space-between;
}
.mobile-header-logo {
  width:56px; height:56px;
  background:rgba(250,249,247,0.07);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(250,249,247,0.08);
  border:1px solid rgba(250,249,247,0.12);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.mobile-header-logo:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(0,0,0,0.12), 0 0 16px rgba(215,25,32,0.2); }
.mobile-header-logo img { width:44px; height:44px; border-radius:50%; object-fit:contain; }
.mobile-hamburger {
  width:48px; height:48px;
  background:var(--ink);
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  cursor:pointer; border:none; z-index:1002;
  transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.mobile-hamburger:hover { background:var(--red); }
.mobile-hamburger:active { transform:scale(0.92); }
.mobile-hamburger span {
  width:18px; height:1.5px; background:var(--white-tinted); border-radius:2px;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  transform-origin:center;
}
.mobile-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px);}
.mobile-hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.mobile-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px);}

/* ---- Full-Screen Mobile Menu ---- */
.mobile-menu {
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column;
  visibility:hidden; pointer-events:none;
}
.mobile-menu.active { visibility:visible; pointer-events:auto; }
.mobile-menu-bg {
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(26,25,24,0.97) 0%, rgba(43,0,0,0.95) 40%, rgba(43,0,0,0.92) 100%);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  opacity:0;
  transition:opacity 0.4s ease;
}
.mobile-menu.active .mobile-menu-bg { opacity:1; }
.mobile-menu-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  height:100%; padding:100px 24px 40px;
  overflow-y:auto;
  transform:translateY(-30px);
  opacity:0;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.mobile-menu.active .mobile-menu-content { transform:translateY(0); opacity:1; }
.mobile-menu-nav {
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.mobile-menu-item {
  display:block;
  background:rgba(250,249,247,0.04);
  border:1px solid rgba(250,249,247,0.06);
  border-radius:16px;
  padding:16px 20px;
  color:rgba(250,249,247,0.6);
  font-family:var(--display);
  font-size:1.125rem;
  font-weight:600;
  text-decoration:none;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  transform:translateY(20px);
  opacity:0;
  cursor:pointer;
}
.mobile-menu.active .mobile-menu-item {
  transform:translateY(0);
  opacity:1;
}
.mobile-menu-item:active { transform:scale(0.97); }
.mobile-menu-item:hover, .mobile-menu-item:active {
  background:rgba(250,249,247,0.08);
  border-color:rgba(250,249,247,0.1);
  color:var(--white-tinted);
}
.mobile-menu-item.active-page {
  background:var(--red);
  border-color:var(--red);
  color:var(--white-tinted);
  box-shadow:0 4px 20px rgba(215,25,32,0.3);
}
.mobile-menu-item-text { display:block; }
.mobile-menu-chevron {
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  transition:transform 0.3s ease;
}
.mobile-menu-dropdown { position:relative; }
.mobile-menu-dropdown.open .mobile-menu-chevron { transform:translateY(-50%) rotate(180deg); }
.mobile-menu-item-btn {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; color:inherit; font:inherit; cursor:pointer; padding:0;
}
.mobile-menu-submenu {
  display:flex; flex-direction:column; gap:4px;
  max-height:0; overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, padding 0.3s ease;
  opacity:0; padding:0;
}
.mobile-menu-dropdown.open .mobile-menu-submenu {
  max-height:400px; opacity:1; padding:8px 0 4px;
}
.mobile-menu-subitem {
  display:block; padding:10px 16px;
  color:rgba(250,249,247,0.5);
  font-size:0.9375rem; font-weight:500;
  border-radius:10px;
  text-decoration:none;
  transition:all 0.25s ease;
}
.mobile-menu-subitem:hover { color:var(--white-tinted); background:rgba(250,249,247,0.06); }
.mobile-menu-footer {
  display:flex; flex-direction:column; gap:12px;
  padding-top:24px; margin-top:auto;
}
.mobile-menu-cta {
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:var(--red); color:var(--white-tinted);
  border-radius:14px;
  font-family:var(--display); font-size:1rem; font-weight:700;
  text-decoration:none;
  transition:all 0.3s ease;
  box-shadow:0 4px 20px rgba(215,25,32,0.3);
}
.mobile-menu-cta:active { transform:scale(0.97); }
.mobile-menu-phone {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px;
  background:rgba(250,249,247,0.04);
  border:1px solid rgba(250,249,247,0.08);
  border-radius:14px;
  color:rgba(250,249,247,0.6);
  font-size:0.9375rem; font-weight:500;
  text-decoration:none;
  transition:all 0.3s ease;
}
.mobile-menu-phone:hover { background:rgba(250,249,247,0.08); color:var(--white-tinted); }

/* Nav — Light background adaptation */
.nav.light-bg { background:rgba(252,252,250,0.7); border-color:rgba(0,0,0,0.08); box-shadow:0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(250,249,247,0.8); }
.nav.light-bg.scrolled { background:rgba(252,252,250,0.85); box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.nav.light-bg .nav-link { color:rgba(26,25,24,0.6); }
.nav.light-bg .nav-link:hover { color:var(--ink); background:rgba(0,0,0,0.05); }
.nav.light-bg .nav-link.active { color:var(--white-tinted); background:var(--red); }
.nav.light-bg .nav-cta { box-shadow:0 2px 12px rgba(215,25,32,0.25); }
.nav.light-bg .nav-toggle span { background:var(--ink); }
.nav-wrapper.light-bg .brand-chip { background:rgba(26,25,24,0.06); border-color:rgba(0,0,0,0.1); }
.nav-wrapper.light-bg .brand-chip:hover { border-color:rgba(215,25,32,0.3); }
.nav-wrapper.light-bg .brand-chip:hover .brand-chip-logo { box-shadow:none; }
.nav-wrapper.light-bg .brand-chip-name { color:var(--ink); }
.nav-wrapper.light-bg .brand-chip-divider { background:rgba(0,0,0,0.15); }
.nav-wrapper.light-bg .brand-chip-logo { box-shadow:none; }

@media(max-width:1024px){
  .nav-wrapper{display:none;}
  .mobile-header{display:flex;}
}
@media(max-width:480px){
  .mobile-menu-content{padding:90px 16px 32px;}
  .mobile-menu-item{padding:14px 16px;font-size:1rem;border-radius:14px;}
}
@media(max-width:480px){ .nav-wrapper{width:calc(100% - 32px);gap:4px;} .nav{padding:0 14px;gap:1px;} .brand-chip{height:40px;padding:0 14px 0 8px;gap:8px;} .brand-chip-logo{width:32px;height:32px;} .brand-chip-logo img{width:24px;height:24px;} .brand-chip-name{font-size:0.875rem;} .brand-chip-divider{height:20px;} .nav-cta{height:32px;padding:0 14px;font-size:0.75rem;} }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 32px;
  font-family:var(--display); font-size:0.875rem; font-weight:600;
  border-radius:var(--r-full);
  transition:all var(--dur-fast) var(--ease);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn-primary { background:var(--red); color:var(--white-tinted); }
.btn-primary:hover { background:var(--red-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary { background:transparent; color:var(--red); border:1.5px solid var(--red); }
.btn-secondary:hover { background:var(--red); color:var(--white-tinted); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--ink); transform:translateY(-2px); }
.btn-white { background:var(--white-tinted); color:var(--ink); border:1px solid var(--border); }
.btn-white:hover { border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn .btn-arrow { transition:transform var(--dur-fast) var(--ease); }
.btn:hover .btn-arrow { transform:translateX(4px); }
.btn-sm { padding:10px 20px; font-size:0.8125rem; }
.btn-lg { padding:18px 40px; font-size:1rem; }

/* ---- Section Header ---- */
.section-header { max-width:680px; margin-bottom:clamp(40px,5vw,72px); }
.section-header.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-label { display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; }
.section-label span { font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:600; color:var(--red); }
.section-label::before { content:''; width:24px; height:1.5px; background:var(--red); }
.section-title { margin-bottom:16px; }
.section-desc { font-size:1.0625rem; line-height:1.7; color:var(--gray); }

/* ---- Hero ---- */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding-top:100px;
  background:var(--ink);
  background: radial-gradient(ellipse at 50% 40%, #1a0505 0%, #0e0303 40%, var(--ink) 100%);
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(43,0,0,0.45) 0%, rgba(26,25,24,0.3) 35%, transparent 65%);
  pointer-events:none;
}
.hero-particles-canvas {
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;
  overflow:hidden;
}
.hero-overlay-fade {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(26,25,24,0.4);
}
.hero .container { position:relative; z-index:2; }
.hero .hero-content { color:var(--white-tinted); }
.hero .hero-title { color:var(--white-tinted); }
.hero .hero-title .accent { color:var(--red); }
.hero .hero-subtitle { color:rgba(250,249,247,0.7); }
.hero .hero-badge { background:rgba(215,25,32,0.15); border-color:rgba(215,25,32,0.3); color:var(--white-tinted); }
.hero .btn-ghost { color:var(--white-tinted); border-color:rgba(250,249,247,0.2); }
.hero .btn-ghost:hover { border-color:var(--white-tinted); }
.hero-layout {
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,4vw,60px);
  align-items:center; width:100%;
}
.hero-content { position:relative; z-index:2; }
.hero-visual { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px 8px 10px;
  background:var(--red-light);
  border:1px solid var(--red-mid);
  border-radius:var(--r-full);
  font-size:0.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--red);
  margin-bottom:28px;
  box-shadow:0 2px 12px rgba(215,25,32,0.08);
  animation:fadeInDown 0.7s var(--ease) both;
}
.hero-title { font-family:var(--display); font-size:clamp(3rem,6vw,5.5rem); font-weight:700; line-height:0.95; letter-spacing:-0.03em; margin-bottom:24px; color:var(--white-tinted); }
.hero-title .accent { color:var(--red); }
.hero-subtitle { font-size:clamp(1rem,1.2vw,1.2rem); line-height:1.7; color:rgba(250,249,247,0.7); max-width:540px; margin-bottom:40px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; animation:fadeInUp 0.8s var(--ease) 1.4s both; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

/* ---- Hero Carousel ---- */
.hero-carousel { position:relative; width:50vw; margin-right:-10vw; overflow:visible; }
.hero-slide {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:translateX(100%);
  transition:opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 1.2s cubic-bezier(0.25,0.1,0.25,1);
  pointer-events:none;
}
.hero-slide.active {
  position:relative;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  z-index:1;
}
.hero-slide.exit-left {
  opacity:0;
  transform:translateX(-120%);
  pointer-events:none;
}
.hero-slide img {
  width:100%; height:auto;
  max-height:70vh;
  object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(215,25,32,0.3)) drop-shadow(0 0 60px rgba(215,25,32,0.12));
  animation:heroFloat 6s ease-in-out infinite;
  transition:transform 0.5s var(--ease), filter 0.5s ease;
  cursor:pointer;
}
.hero-slide img:hover {
  transform:scale(1.06) translateY(-6px);
  filter:drop-shadow(0 0 40px rgba(215,25,32,0.45)) drop-shadow(0 0 80px rgba(215,25,32,0.2));
}
@keyframes heroFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* Hero floating decorative elements — hidden on mobile */
.float-element { animation:floatElement 6s ease-in-out infinite; }
@keyframes floatElement {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33% { transform:translateY(-8px) rotate(1deg); }
  66% { transform:translateY(4px) rotate(-1deg); }
}

@media(max-width:768px){
  .hero{min-height:100vh;min-height:100svh;}
  .hero-layout{grid-template-columns:1fr;text-align:center;}
  .hero-actions{justify-content:center;gap:10px;}
  .hero-actions .btn{padding:12px 24px !important;font-size:0.875rem !important;}
  .hero-content{order:1;}
  .hero-visual{order:2;}
  .hero-carousel{width:65vw !important;margin:0 auto !important;}
  .hero-slide img{max-height:40vh;}
  .hero-subtitle{max-width:100%;font-size:0.9375rem;line-height:1.6;margin-bottom:32px;}
  .hero-badge{font-size:0.5rem;padding:4px 10px 4px 7px;margin-bottom:20px;letter-spacing:0.05em;}
  .hero-title{font-size:clamp(2rem,7vw,3rem);line-height:1.05;margin-bottom:20px;letter-spacing:-0.02em;}
  .float-element{display:none;}
}
@media(max-width:480px){
  .hero{min-height:100vh;min-height:100svh;padding:90px 0 40px;}
  .hero-carousel{width:80vw !important;margin:0 auto !important;}
  .hero-slide img{max-height:36vh;}
  .hero-badge{font-size:0.4375rem;padding:3px 8px 3px 6px;margin-bottom:14px;}
  .hero-title{font-size:clamp(1.75rem,8vw,2.25rem);line-height:1.1;margin-bottom:16px;}
  .hero-subtitle{font-size:0.8125rem;line-height:1.55;margin-bottom:24px;}
  .hero-actions{flex-direction:row;justify-content:center;gap:8px;}
  .hero-actions .btn{padding:10px 16px !important;font-size:0.8125rem !important;width:auto !important;}


}

/* ---- Certification Marquee ---- */
.marquee-section {
  position:relative;
  padding:32px 0;
  background:var(--ink);
  overflow:hidden;
  border-bottom:1px solid rgba(215,25,32,0.08);
}
.marquee-fade-left, .marquee-fade-right {
  position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.marquee-fade-left {
  left:0;
  background:linear-gradient(90deg, var(--ink) 0%, transparent 100%);
}
.marquee-fade-right {
  right:0;
  background:linear-gradient(-90deg, var(--ink) 0%, transparent 100%);
}
.marquee-track {
  width:100%;
  overflow:hidden;
}
.marquee-content {
  display:flex; align-items:center; gap:80px;
  width:max-content;
  animation:marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll {
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.marquee-item {
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  height:70px;
  opacity:0.6;
  filter:grayscale(100%);
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.marquee-item:hover {
  opacity:1;
  filter:grayscale(0%);
  transform:scale(1.1);
}
.marquee-item img {
  height:60px; width:auto;
  max-width:180px;
  object-fit:contain;
  transition:filter 0.4s ease;
}
.marquee-item:hover img {
  filter:drop-shadow(0 0 14px rgba(215,25,32,0.5));
}
@media(max-width:768px){
  .marquee-content{gap:60px;}
  .marquee-item{height:56px;}
  .marquee-item img{height:48px;max-width:140px;}
}

/* ---- Stats Bar ---- */
.stats-bar {
  padding:clamp(40px,5vw,56px) 0;
  background:var(--bg-pure);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
}
.stat-item {
  text-align:center;
  padding:20px 16px;
  position:relative;
  min-width:0;
}
.stat-item:not(:last-child)::after {
  content:'';
  position:absolute;
  right:0; top:20%; height:60%;
  width:1px;
  background:var(--border);
}
.stat-number {
  font-family:var(--display);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:700;
  line-height:1;
  margin-bottom:4px;
  color:var(--ink);
}
.stat-label {
  font-size:0.75rem;
  color:var(--gray-mid);
  letter-spacing:0.01em;
}

@media(max-width:768px){
  .stats-grid { display:flex; flex-wrap:nowrap; gap:0; overflow-x:auto; }
  .stat-item {
    flex:1 1 0;
    min-width:0;
    padding:14px 4px;
    text-align:center;
    border-left:1px solid var(--border);
  }
  .stat-item:first-child { border-left:none; }
  .stat-item:not(:last-child)::after { display:none; }
  .stat-number { font-size:clamp(1rem,3.5vw,1.35rem); }
  .stat-label { font-size:0.5625rem; line-height:1.3; letter-spacing:0; }
}
@media(max-width:480px){
  .stats-grid { gap:0; }
  .stat-item { padding:12px 2px; }
  .stat-number { font-size:1rem; }
  .stat-label { font-size:0.5rem; }
}

/* ---- Product Range ---- */
.pr-section {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.pr-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(215,25,32,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255,196,0,0.03) 0%, transparent 100%);
  pointer-events: none;
}
.pr-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 1;
}
.pr-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* Visual */
.pr-visual {
  position: relative;
}
.pr-img-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  padding: clamp(24px, 4vw, 48px);
}
.pr-img-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}
.pr-img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.pr-img-frame:hover .pr-img {
  transform: scale(1.02);
}
.pr-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 22px;
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 2;
}
.pr-float-tl {
  top: clamp(12px, 2vw, 24px);
  left: clamp(12px, 2vw, 24px);
  animation: prFloat 3s ease-in-out infinite;
}
.pr-float-br {
  bottom: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  background: var(--red);
  color: white;
  animation: prFloat 3s ease-in-out 1.5s infinite;
}
.pr-float-val {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
.pr-float-lbl {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
@keyframes prFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Content */
.pr-content {
  color: var(--white-tinted);
}
.pr-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(215,25,32,0.15);
  border: 1px solid rgba(215,25,32,0.3);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 24px;
}
.pr-title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.pr-accent {
  color: var(--red);
}
.pr-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
  max-width: 480px;
}

/* Features */
.pr-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.pr-feat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.pr-feat:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: translateX(8px);
}
.pr-feat:active {
  transform: translateX(8px) scale(0.98);
}
.pr-feat-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  background: var(--feat-bg);
  color: var(--feat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.pr-feat:hover .pr-feat-icon {
  transform: scale(1.1);
}
.pr-feat-text {
  flex: 1;
}
.pr-feat-text h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.pr-feat-text p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.4;
}
.pr-feat-arrow {
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.3);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  opacity: 0;
  transform: translateX(-8px);
}
.pr-feat:hover .pr-feat-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--red);
}

/* Actions */
.pr-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pr-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--red);
  color: white;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 24px rgba(215,25,32,0.3);
}
.pr-btn-primary:hover {
  background: #b8141c;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(215,25,32,0.4);
}
.pr-btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.pr-btn-primary svg {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.pr-btn-primary:hover svg {
  transform: translateX(4px);
}
.pr-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.pr-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,25,32,0.5);
}
.pr-btn-secondary:active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 1024px) {
  .pr-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .pr-content { order: 1; }
  .pr-visual { order: 2; max-width: 500px; margin: 0 auto; }
  .pr-desc { margin-left: auto; margin-right: auto; }
  .pr-features { max-width: 420px; margin-left: auto; margin-right: auto; }
  .pr-actions { justify-content: center; }
  .pr-feat:hover { transform: translateY(-2px); }
  .pr-feat-arrow { display: none; }
}
@media (max-width: 640px) {
  .pr-img-frame { padding: 20px; border-radius: 20px; }
  .pr-float { padding: 10px 16px; }
  .pr-float-val { font-size: 1.125rem; }
  .pr-feat { padding: 14px 16px; gap: 12px; }
  .pr-feat-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; }
  .pr-feat-text h4 { font-size: 0.875rem; }
  .pr-feat-text p { font-size: 0.75rem; }
  .pr-btn-primary, .pr-btn-secondary { flex: 1; justify-content: center; padding: 14px 24px; font-size: 0.875rem; }
}

/* ---- Product Card ---- */
.product-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:all 0.4s var(--ease);
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
}
.product-card:hover {
  transform:translateY(-8px);
  border-color:transparent;
  box-shadow:0 20px 50px rgba(27,27,27,0.10), 0 8px 20px rgba(27,27,27,0.06);
}
.product-card-image {
  position:relative;
  aspect-ratio:1/1;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  overflow:hidden;
}
.product-card-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform 0.5s var(--ease);
}
.product-card:hover .product-card-image img {
  transform:scale(1.06);
}
.product-card-placeholder {
  width:80px;
  height:80px;
  background:var(--red);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white-tinted);
  opacity:0.85;
}
.product-type-badge {
  position:absolute;
  top:12px;
  right:12px;
  padding:4px 12px;
  background:rgba(215,25,32,0.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--white-tinted);
  font-size:0.625rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  border-radius:var(--r-full);
  z-index:1;
}
.product-card-body {
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
  background:var(--red);
}
.product-card-body[data-name*="clean agent"] {
  background:var(--green);
}
.product-card-body[data-name*="foam"] {
  background:var(--yellow);
}
.product-card-body[data-name*="water"] {
  background:var(--white-card);
}
.product-card-body[data-name^="co2"],
.product-card-body[data-name^="co₂"] {
  background:#1A1918;
}
.product-card-body[data-name*="dry powder"],
.product-card-body[data-name*="abc"],
.product-card-body[data-name^="bc "] {
  background:var(--blue);
}
.product-card-class {
  display:none;
}
.product-card-title {
  font-family:var(--display);
  font-size:0.875rem;
  font-weight:600;
  line-height:1.35;
  color:#fff;
  margin-bottom:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card-body[data-name*="water"] .product-card-title {
  color:var(--ink);
}
.product-card-divider {
  display:none;
}
.product-card-footer {
  display:none;
}
.product-card-category {
  display:none;
}
.product-card-desc {
  display:none;
}
.product-card-capacity {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.capacity-label {
  font-size:0.5625rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--gray-mid);
  font-weight:600;
}
.capacity-value {
  font-size:0.8125rem;
  font-weight:700;
  color:var(--red);
}
.product-card-cta {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--red);
  color:var(--white-tinted);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.3s var(--ease);
  box-shadow:0 4px 14px rgba(215,25,32,0.3);
}
.product-card:hover .product-card-cta {
  background:var(--red-hover);
  transform:translateX(4px);
  box-shadow:0 6px 20px rgba(215,25,32,0.4);
}

/* ---- Product Detail Page ---- */
.product-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);
  align-items:start;
}
.product-detail-image { position:sticky; top:100px; }
.product-detail-image-box {
  background:var(--bg-concrete);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
}
.product-detail-image-box img {
  max-width:80%;
  max-height:80%;
  object-fit:contain;
  transition:transform 0.5s var(--ease);
}
.product-detail-image-box:hover img { transform:scale(1.05); }
.product-detail-placeholder {
  width:180px;
  height:180px;
  background:var(--red);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white-tinted);
}
.product-detail-title {
  margin-bottom:12px;
  font-size:clamp(1.5rem,3vw,2.25rem);
}
.product-detail-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.tag {
  padding:5px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  font-size:0.75rem;
  color:var(--gray);
  font-weight:500;
  transition:all 0.2s;
}
.tag:hover { border-color:var(--gray-light); color:var(--ink); }
.tag-green {
  background:rgba(46,125,50,0.06);
  border-color:rgba(46,125,50,0.15);
  color:var(--green);
}
.tag-green:hover {
  background:rgba(46,125,50,0.1);
  border-color:rgba(46,125,50,0.25);
}
.product-detail-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.product-detail-specs { margin-bottom:36px; }
.specs-table {
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
}
.specs-row {
  display:flex;
  border-bottom:1px solid var(--border-light);
  transition:background 0.2s;
}
.specs-row:hover { background:var(--bg); }
.specs-row:last-child { border-bottom:none; }
.specs-key {
  flex:0 0 40%;
  padding:12px 16px;
  font-size:0.8125rem;
  font-weight:500;
  color:var(--gray);
  background:var(--bg);
}
.specs-val {
  flex:1;
  padding:12px 16px;
  font-size:0.8125rem;
  color:var(--ink);
}

/* ---- Industry Card ---- */
.industry-card {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; cursor:pointer;
  border:1px solid var(--border);
  background:var(--bg-card);
}
.industry-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.8s var(--ease); }
.industry-card:hover .industry-card-bg { transform:scale(1.04); }
.industry-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(252,252,250,0.2) 0%,rgba(27,27,27,0.85) 100%); transition:background 0.5s; }
.industry-card:hover .industry-card-overlay { background:linear-gradient(180deg,rgba(252,252,250,0.3) 0%,rgba(27,27,27,0.92) 100%); }
.industry-card-content { position:absolute; bottom:0; left:0; right:0; padding:28px; z-index:1; }
.industry-card-icon {
  width:44px; height:44px;
  background:rgba(255,255,255,0.15);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; transition:all var(--dur);
}
.industry-card:hover .industry-card-icon { background:var(--red); transform:scale(1.1); }
.industry-card-title { font-family:var(--display); font-size:1.25rem; font-weight:600; color:var(--white-tinted); margin-bottom:4px; }
.industry-card-desc { font-size:0.8125rem; color:rgba(255,255,255,0.7); line-height:1.5; opacity:0; transform:translateY(8px); transition:all var(--dur); }
.industry-card:hover .industry-card-desc { opacity:1; transform:translateY(0); }

/* ---- CTA Section ---- */
.cta-section { text-align:center; position:relative; overflow:hidden; }
.cta-inner {
  position:relative;
  padding:clamp(56px,7vw,96px) clamp(32px,5vw,72px);
  background:linear-gradient(135deg,var(--bg-pure) 0%,var(--bg-warm) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.cta-inner::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(215,25,32,0.06),transparent 70%);
  border-radius:50%; pointer-events:none;
}
.cta-inner::after {
  content:''; position:absolute; bottom:-40px; left:-40px;
  width:120px; height:120px;
  background:radial-gradient(circle,rgba(255,196,0,0.04),transparent 70%);
  border-radius:50%; pointer-events:none;
}
.cta-title { font-family:var(--display); font-size:clamp(1.75rem,3.5vw,3rem); font-weight:700; margin-bottom:16px; line-height:1.1; color:var(--ink); }
.cta-desc { font-size:1.0625rem; color:var(--gray); max-width:560px; margin:0 auto 32px; line-height:1.7; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- GST Certificate Section ---- */
.gst-section { overflow:hidden; }
.gst-showcase {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
.gst-details-card {
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.gst-details-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,var(--red),var(--orange));
}
.gst-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  background:rgba(46,125,50,0.08);
  border:1px solid rgba(46,125,50,0.15);
  border-radius:var(--r-full);
  font-size:0.75rem;
  font-weight:600;
  color:var(--green);
  margin-bottom:20px;
}
.gst-badge svg { color:var(--green); }
.gst-company-name {
  font-family:var(--display);
  font-size:clamp(1.35rem,2.5vw,1.75rem);
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
  line-height:1.2;
}
.gst-registration-type {
  font-size:0.875rem;
  color:var(--gray);
  margin-bottom:28px;
}
.gst-info-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:24px;
}
.gst-info-item {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
}
.gst-info-label {
  font-size:0.6875rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
  color:var(--gray-mid);
}
.gst-info-value {
  font-family:var(--display);
  font-size:0.9375rem;
  font-weight:600;
  color:var(--ink);
}
.gst-address {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  font-size:0.8125rem;
  color:var(--gray);
  line-height:1.6;
}
.gst-address svg {
  color:var(--red);
  flex-shrink:0;
  margin-top:2px;
}
.gst-certificate-wrapper {
  position:relative;
  display:flex;
  justify-content:center;
}
.gst-certificate-frame {
  position:relative;
  z-index:1;
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:12px;
  box-shadow:var(--shadow-lg);
  transition:transform 0.5s var(--ease);
  max-width:420px;
  width:100%;
}
.gst-certificate-frame:hover {
  transform:translateY(-4px) rotate(-1deg);
}
.gst-certificate-frame img {
  width:100%;
  height:auto;
  border-radius:calc(var(--r-lg) - 4px);
  display:block;
}
.gst-certificate-shadow {
  position:absolute;
  bottom:-16px;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:40px;
  background:radial-gradient(ellipse,rgba(26,25,24,0.12),transparent 70%);
  filter:blur(12px);
  z-index:0;
}

/* GST Section Mobile */
@media(max-width:768px){
  .gst-showcase {
    grid-template-columns:1fr;
    gap:32px;
  }
  .gst-details-card { order:2; }
  .gst-certificate-wrapper { order:1; }
  .gst-certificate-frame { max-width:320px; }
  .gst-info-grid { gap:12px; }
  .gst-info-item { padding:12px 14px; }
  .gst-info-value { font-size:0.875rem; }
  .gst-address { font-size:0.75rem; padding:12px 14px; }
}
@media(max-width:480px){
  .gst-details-card { padding:20px 16px; }
  .gst-certificate-frame { max-width:280px; padding:8px; }
  .gst-info-grid { grid-template-columns:1fr; gap:10px; }
  .gst-company-name { font-size:1.25rem; }
}

/* ---- Footer ---- */
/* ---- Desktop Footer ---- */
.footer { background:#111110; padding-top:clamp(72px,9vw,100px); position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:0.4; }

/* Watermark */
.footer-watermark {
  position:absolute;
  top:clamp(20px,4vw,50px);
  left:50%;
  transform:translateX(-50%);
  font-family:var(--display);
  font-size:clamp(5rem,12vw,10rem);
  font-weight:800;
  letter-spacing:0.15em;
  color:rgba(250,249,247,0.025);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* Grid */
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(28px,3.5vw,48px);
  padding-bottom:40px;
  align-items:stretch;
  position:relative;
  z-index:1;
}

/* ---- Brand Column ---- */
.footer-brand-col { display:flex; flex-direction:column; align-items:flex-start; }

/* Logo Badge */
.footer-logo-link { display:inline-flex; margin-bottom:20px; text-decoration:none; }
.footer-logo-badge {
  width:120px;
  height:120px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  box-shadow:0 0 40px rgba(215,25,32,0.15),0 8px 32px rgba(0,0,0,0.3);
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.footer-logo-badge::before {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(215,25,32,0.3),transparent,rgba(215,25,32,0.15),transparent);
  z-index:-1;
  opacity:0.6;
  transition:opacity 0.4s;
}
.footer-logo-link:hover .footer-logo-badge {
  box-shadow:0 0 60px rgba(215,25,32,0.25),0 12px 40px rgba(0,0,0,0.4);
  transform:translateY(-2px);
}
.footer-logo-link:hover .footer-logo-badge::before { opacity:1; }
.footer-logo-img { width:100%; height:100%; object-fit:contain; border-radius:50%; }

/* Brand Name */
.footer-brand-name {
  font-family:var(--display);
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:8px;
  line-height:1;
}
.footer-brand-safe { color:var(--white-tinted); }
.footer-brand-floor { color:var(--red); }

/* Tagline */
.footer-tagline {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.footer-tagline-line {
  width:24px;
  height:2px;
  background:var(--red);
  border-radius:1px;
}
.footer-tagline-text {
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(250,249,247,0.6);
  white-space:nowrap;
}

/* Brand Description */
.footer-brand-desc {
  font-size:0.8125rem;
  color:rgba(250,249,247,0.45);
  line-height:1.75;
  margin-bottom:20px;
  max-width:280px;
}

/* Social Icons */
.footer-social { display:flex; gap:12px; margin-bottom:28px; }
.footer-social-link {
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(250,249,247,0.05);
  border:1px solid rgba(250,249,247,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(250,249,247,0.5);
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.footer-social-link:hover {
  background:var(--red);
  border-color:var(--red);
  color:white;
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 6px 20px rgba(215,25,32,0.3);
}
.footer-social-link svg { width:18px; height:18px; }

/* Trust Badges */
.footer-trust-badges { display:flex; gap:10px; flex-wrap:nowrap; }
.footer-trust-badge {
  padding:14px 16px;
  background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  min-width:96px;
  backdrop-filter:blur(8px);
  transition:all 0.3s;
}
.footer-trust-badge:hover {
  border-color:rgba(215,25,32,0.25);
  background:linear-gradient(145deg,rgba(215,25,32,0.08),rgba(215,25,32,0.02));
  transform:translateY(-2px);
}
.footer-trust-badge-icon {
  width:30px;
  height:30px;
  color:rgba(250,249,247,0.5);
}
.footer-trust-badge-icon svg { width:100%; height:100%; }
.footer-trust-badge-title {
  font-family:var(--display);
  font-size:0.5625rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--white-tinted);
  line-height:1.2;
}
.footer-trust-badge-sub {
  font-size:0.5625rem;
  color:rgba(250,249,247,0.4);
  line-height:1.2;
}

/* ---- Column Titles ---- */
.footer-links-col { display:flex; flex-direction:column; height:100%; }
.footer-contact-col { display:flex; flex-direction:column; height:100%; }
.footer-title {
  font-family:var(--display);
  font-size:0.8125rem;
  font-weight:700;
  margin-bottom:20px;
  color:var(--white-tinted);
  position:relative;
  padding-bottom:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.footer-title::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:28px;
  height:2px;
  background:var(--red);
  border-radius:1px;
  transition:width 0.3s;
}
.footer-title:hover::after { width:48px; }

/* ---- Links ---- */
.footer-links { display:flex; flex-direction:column; gap:8px; flex:1; justify-content:flex-start; }
.footer-link {
  font-size:0.8125rem;
  color:rgba(250,249,247,0.5);
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:4px 0;
}
.footer-link-arrow {
  font-size:1rem;
  color:var(--red);
  opacity:0.5;
  transition:all 0.3s;
  font-weight:700;
}
.footer-link:hover {
  color:var(--white-tinted);
  transform:translateX(4px);
}
.footer-link:hover .footer-link-arrow { opacity:1; transform:translateX(2px); }

/* ---- Contact Column ---- */
.footer-contact-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:10px;
}
.footer-contact-icon-circle {
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  background:rgba(215,25,32,0.1);
  border:1px solid rgba(215,25,32,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--red);
  transition:all 0.3s;
}
.footer-contact-item:hover .footer-contact-icon-circle {
  background:rgba(215,25,32,0.2);
  border-color:rgba(215,25,32,0.3);
  transform:scale(1.05);
}
.footer-contact-icon-circle svg { width:17px; height:17px; }
.footer-contact-text {
  font-size:0.8125rem;
  color:rgba(250,249,247,0.5);
  line-height:1.65;
  padding-top:9px;
}

/* ---- Bottom Bar ---- */
.footer-bottom {
  border-top:1px solid rgba(250,249,247,0.06);
  padding:20px 0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:16px;
  overflow:visible;
  position:relative;
  z-index:1;
}
.footer-copyright { font-size:0.75rem; color:rgba(250,249,247,0.35); white-space:nowrap; }
.footer-legal { display:flex; gap:10px; align-items:center; white-space:nowrap; }
.footer-legal a {
  font-size:0.75rem;
  color:rgba(250,249,247,0.35);
  transition:color 0.3s;
  text-decoration:none;
}
.footer-legal a:hover { color:var(--white-tinted); }
.footer-legal a:not(:last-child)::after {
  content:'|';
  margin-left:10px;
  color:rgba(250,249,247,0.15);
}

/* Dev Badge with Fire Animation */
.dev-badge {
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:6px 16px 16px;
  border-radius:20px;
  background:rgba(250,249,247,0.06);
  border:1px solid rgba(250,249,247,0.1);
  font-size:0.6875rem;
  color:var(--gray-mid);
  text-decoration:none;
  transition:all 0.3s ease;
  overflow:visible;
  cursor:pointer;
}
.dev-badge:hover,
.dev-badge:active {
  color:var(--white-tinted);
  border-color:rgba(255,100,0,0.4);
  background:linear-gradient(135deg,rgba(255,60,0,0.15),rgba(255,140,0,0.1));
  box-shadow:0 0 20px rgba(255,80,0,0.25),0 0 40px rgba(255,60,0,0.1);
}
.dev-badge-text { position:relative; z-index:2; }
.dev-badge-text strong { color:#ff6a00; font-weight:600; }

/* Flames container — rises from below badge */
.dev-badge-flames {
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:36px;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.35s ease;
  z-index:3;
  overflow:visible;
}
.dev-badge:hover .dev-badge-flames,
.dev-badge:active .dev-badge-flames {
  opacity:1;
}
.flame-img {
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,100,0,0.7)) drop-shadow(0 4px 12px rgba(255,60,0,0.4));
  animation:flame-dance 0.6s ease-in-out infinite alternate;
  transform-origin:bottom center;
}
.dev-badge:hover .flame-img,
.dev-badge:active .flame-img {
  filter:drop-shadow(0 0 12px rgba(255,80,0,0.9)) drop-shadow(0 6px 16px rgba(255,60,0,0.5));
}

@keyframes flame-dance {
  0% { transform:scaleY(1) scaleX(1) translateY(0); opacity:0.9; }
  33% { transform:scaleY(1.1) scaleX(0.94) translateY(-2px); opacity:1; }
  66% { transform:scaleY(0.96) scaleX(1.04) translateY(-1px); opacity:0.95; }
  100% { transform:scaleY(1.05) scaleX(0.97) translateY(-2px); opacity:0.92; }
}

.dev-badge:active .flame-img {
  animation-duration:0.25s;
  transform:scaleY(1.2) scaleX(0.9);
}

/* ---- Mobile Footer ---- */
.footer-mobile {
  display:none;
  background:#111110;
  border-top:1px solid rgba(250,249,247,0.06);
  padding:40px 20px 20px;
  position:relative;
  overflow:hidden;
}
.footer-mobile-watermark {
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--display);
  font-size:3rem;
  font-weight:800;
  letter-spacing:0.12em;
  color:rgba(250,249,247,0.025);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.footer-mobile-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  position:relative;
  z-index:1;
}

/* Mobile Logo Badge */
.footer-mobile-logo { display:flex; justify-content:center; }
.footer-mobile-logo-badge {
  width:72px;
  height:72px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  position:relative;
  box-shadow:0 0 32px rgba(215,25,32,0.15),0 6px 24px rgba(0,0,0,0.3);
}
.footer-mobile-logo-badge::before {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(215,25,32,0.3),transparent,rgba(215,25,32,0.15),transparent);
  z-index:-1;
  opacity:0.6;
}
.footer-mobile-logo-badge img {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
}

/* Mobile Brand Name */
.footer-mobile-brand {
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  text-align:center;
}
.fm-brand-safe { color:var(--white-tinted); }
.fm-brand-floor { color:var(--red); }

/* Mobile Tagline */
.footer-mobile-tagline {
  font-size:0.6875rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(250,249,247,0.45);
  text-align:center;
}

/* Mobile Social Icons */
.footer-mobile-social {
  display:flex;
  justify-content:center;
  gap:12px;
  padding:4px 0;
}
.footer-mobile-social a {
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(250,249,247,0.05);
  border:1px solid rgba(250,249,247,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  color:rgba(250,249,247,0.5);
}
.footer-mobile-social a:hover {
  background:var(--red);
  border-color:var(--red);
  color:white;
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 4px 16px rgba(215,25,32,0.3);
}
.footer-mobile-social a svg { width:17px; height:17px; fill:currentColor; }
.footer-mobile-social a svg[stroke] { fill:none; stroke:currentColor; }

/* Mobile Navigation Card */
.footer-mobile-nav-card {
  width:100%;
  background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:16px;
  backdrop-filter:blur(8px);
}
.footer-mobile-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}
.footer-mobile-links a {
  font-size:0.8125rem;
  color:rgba(250,249,247,0.5);
  padding:10px 6px;
  transition:all 0.3s;
  text-align:left;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:8px;
  min-height:44px;
}
.footer-mobile-links a:hover {
  color:var(--white-tinted);
  background:rgba(250,249,247,0.04);
}
.fm-link-arrow {
  font-size:0.875rem;
  color:var(--red);
  opacity:0.5;
  font-weight:700;
  transition:all 0.3s;
}
.footer-mobile-links a:hover .fm-link-arrow { opacity:1; }

/* Mobile Trust Badges */
.footer-mobile-trust {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:100%;
}
.footer-mobile-trust-card {
  padding:12px 8px;
  background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  transition:all 0.3s;
}
.footer-mobile-trust-card:hover {
  border-color:rgba(215,25,32,0.2);
  background:linear-gradient(145deg,rgba(215,25,32,0.06),rgba(215,25,32,0.02));
}
.fm-trust-icon {
  width:22px;
  height:22px;
  color:rgba(250,249,247,0.4);
}
.fm-trust-icon svg { width:100%; height:100%; }
.fm-trust-title {
  font-family:var(--display);
  font-size:0.5rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--white-tinted);
  line-height:1.2;
}
.fm-trust-sub {
  font-size:0.5rem;
  color:rgba(250,249,247,0.35);
  line-height:1.2;
}

/* Mobile Dev Badge with Flames */
.footer-mobile-dev-badge {
  display:flex;
  justify-content:center;
  padding:8px 0 0;
}
.footer-mobile-dev {
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:8px 18px 20px;
  border-radius:20px;
  background:rgba(250,249,247,0.06);
  border:1px solid rgba(250,249,247,0.1);
  font-size:0.6875rem;
  color:var(--gray-mid);
  text-decoration:none;
  transition:all 0.3s ease;
  overflow:visible;
}
.footer-mobile-dev strong { color:var(--red); font-weight:600; }
.footer-mobile-dev:hover {
  color:var(--white-tinted);
  border-color:rgba(255,100,0,0.4);
  background:linear-gradient(135deg,rgba(255,60,0,0.15),rgba(255,140,0,0.1));
}
.footer-mobile-flames {
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  width:28px;
  height:28px;
  pointer-events:none;
  opacity:1;
}
.footer-mobile-dev:hover .footer-mobile-flames { opacity:1; }
.footer-flame-img {
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,100,0,0.7)) drop-shadow(0 4px 12px rgba(255,60,0,0.4));
  animation:flame-dance 0.6s ease-in-out infinite alternate;
  transform-origin:bottom center;
}
.footer-mobile-dev:hover .footer-flame-img {
  filter:drop-shadow(0 0 12px rgba(255,80,0,0.9)) drop-shadow(0 6px 16px rgba(255,60,0,0.5));
}

/* Mobile Bottom Bar */
.footer-mobile-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid rgba(250,249,247,0.06);
  font-size:0.625rem;
  color:rgba(250,249,247,0.35);
  width:100%;
}
.footer-mobile-legal {
  display:flex;
  gap:10px;
  align-items:center;
}
.footer-mobile-legal a {
  font-size:0.625rem;
  color:rgba(250,249,247,0.35);
  transition:color 0.2s;
  text-decoration:none;
}
.footer-mobile-legal a:hover { color:var(--white-tinted); }

@media(max-width:1024px){
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:40px 32px;}
  .footer-brand-col{grid-column:1/-1;padding-right:0;}
  .footer-trust-badges{flex-wrap:nowrap;}
}
@media(max-width:768px){
  .footer{display:none;}
  .footer-mobile{display:block;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-brand-col{align-items:center;text-align:center;}
  .footer-brand-desc{max-width:100%;text-align:center;}
  .footer-social{justify-content:center;}
  .footer-trust-badges{justify-content:center;}
  .footer-tagline{justify-content:center;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .dev-badge{margin:4px 0;}
}

/* ---- Custom Cursor ---- */
.cursor { width:20px; height:20px; border:1px solid var(--red); border-radius:50%; position:fixed; pointer-events:none; z-index:99998; transition:width 0.3s ease,height 0.3s ease,border-color 0.3s ease; transform:translate(-50%,-50%); }
.cursor.hovering { width:52px; height:52px; border-color:var(--ink); }
.cursor-dot { width:4px; height:4px; background:var(--red); border-radius:50%; position:fixed; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); }
@media(max-width:1024px){ .cursor,.cursor-dot{display:none;} }

/* ---- Pill Tabs ---- */
.pill-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(32px,4vw,56px); }
.pill-tab { padding:8px 20px; border-radius:var(--r-full); font-size:0.8125rem; font-weight:500; color:var(--gray); background:var(--bg-pure); border:1px solid var(--border); transition:all var(--dur-fast); cursor:pointer; }
.pill-tab:hover { color:var(--ink); border-color:var(--gray-light); transform:translateY(-2px); }
.pill-tab.active { color:var(--white-tinted); background:var(--red); border-color:var(--red); }

/* ---- Glow Line ---- */
.glow-line { height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:0.2; }

/* ---- Form ---- */
.form-group { margin-bottom:20px; }
.form-input {
  width:100%; padding:14px 18px;
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--ink); font-size:0.9375rem;
  transition:all var(--dur-fast);
}
.form-input:focus { border-color:var(--red); box-shadow:0 0 0 3px var(--red-light); }
.form-input::placeholder { color:var(--gray-light); }
textarea.form-input { min-height:130px; resize:vertical; }
.form-label { display:block; font-size:0.75rem; font-weight:600; color:var(--ink); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em; }

/* ---- Blog Card ---- */
.blog-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  transition:all var(--dur) var(--ease);
  position:relative;
}
.blog-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--red); opacity:0; transition:opacity var(--dur-fast);
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.blog-card:hover::before { opacity:1; }
.blog-card-image { height:200px; overflow:hidden; background:var(--bg-concrete); }
.blog-card-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.blog-card:hover .blog-card-image img { transform:scale(1.06); }
.blog-card-body { padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta { display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:0.6875rem; color:var(--gray-mid); text-transform:uppercase; letter-spacing:0.05em; }
.blog-card-meta svg { color:var(--red); }
.blog-card-title { font-family:var(--display); font-size:1.125rem; font-weight:600; line-height:1.3; margin-bottom:8px; color:var(--ink); transition:color var(--dur-fast); }
.blog-card:hover .blog-card-title { color:var(--red); }

/* ---- Testimonial ---- */
.testimonial-card { padding:32px; background:var(--bg-pure); border:1px solid var(--border); border-radius:var(--r-lg); transition:all 0.3s var(--ease); }
.testimonial-card:hover { border-color:var(--red-mid); box-shadow:var(--shadow-sm); }
.testimonial-stars { display:flex; gap:3px; margin-bottom:16px; color:var(--yellow); }
.testimonial-stars svg { filter:drop-shadow(0 1px 2px rgba(255,196,0,0.3)); }
.testimonial-text { font-size:1rem; line-height:1.7; color:var(--gray); margin-bottom:20px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:44px; height:44px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:var(--white-tinted); flex-shrink:0; transition:transform 0.3s var(--ease); }
.testimonial-card:hover .testimonial-avatar { transform:scale(1.05); }
.testimonial-name { font-weight:600; font-size:0.875rem; color:var(--ink); }
.testimonial-role { font-size:0.75rem; color:var(--gray-mid); }

/* ---- Cert Card ---- */
.cert-card { display:flex; align-items:center; gap:20px; padding:24px; background:var(--bg-pure); border:1px solid var(--border); border-radius:var(--r-lg); transition:all var(--dur) var(--ease); }
.cert-card:hover { border-color:var(--red-mid); transform:translateY(-4px); box-shadow:0 8px 24px rgba(215,25,32,0.08); }
.cert-card-icon { width:52px; height:52px; background:var(--red-light); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.cert-card-icon img { width:40px; height:40px; object-fit:contain; }
.cert-card-name { font-family:var(--display); font-size:1rem; font-weight:600; margin-bottom:2px; color:var(--ink); }
.cert-card-desc { font-size:0.8125rem; color:var(--gray-mid); line-height:1.5; }
.cert-card-download { width:36px; height:36px; border-radius:50%; background:var(--bg-concrete); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); flex-shrink:0; text-decoration:none; }
.cert-card-download:hover { background:var(--red); color:var(--white-tinted); transform:scale(1.1); }

/* ---- Factory Timeline ---- */
.factory-timeline { position:relative; padding-left:32px; }
.factory-timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--red),var(--border),transparent); }
.factory-timeline-item { position:relative; padding:0 0 48px 32px; transition:transform 0.3s var(--ease); }
.factory-timeline-item:hover { transform:translateX(4px); }
.factory-timeline-item::before { content:''; position:absolute; left:-36px; top:5px; width:10px; height:10px; background:var(--red); border-radius:50%; box-shadow:0 0 0 4px var(--red-light); transition:all 0.3s var(--ease); }
.factory-timeline-item:hover::before { transform:scale(1.3); box-shadow:0 0 0 6px var(--red-light); }
.factory-timeline-step { font-size:0.625rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--red); font-weight:600; margin-bottom:6px; }
.factory-timeline-title { font-family:var(--display); font-size:1.25rem; font-weight:600; margin-bottom:8px; color:var(--ink); }
.factory-timeline-desc { font-size:0.875rem; color:var(--gray); line-height:1.6; }

/* ---- Page Header ---- */
.page-header { padding:clamp(100px,14vw,180px) 0 clamp(48px,6vw,80px); position:relative; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border); }
.page-header-glow { position:absolute; top:-120px; right:-120px; width:400px; height:400px; background:radial-gradient(circle,rgba(215,25,32,0.04),transparent 60%); pointer-events:none; }
.page-header-content { position:relative; z-index:1; }
.breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:0.8125rem; color:var(--gray-mid); }
.breadcrumb a { color:var(--gray); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--red); }
.breadcrumb .sep { color:var(--gray-light); }

/* ---- Search Overlay ---- */
.search-overlay {
  position:fixed; inset:0; z-index:10001;
  background:rgba(252,252,250,0.97);
  backdrop-filter:blur(20px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:20vh;
  opacity:0; visibility:hidden; transition:all 0.3s;
}
.search-overlay.active { opacity:1; visibility:visible; }
.search-bar { width:100%; max-width:640px; padding:0 20px; }
.search-close {
  position:absolute; top:15vh; right:clamp(20px,4vw,40px);
  width:44px; height:44px; border-radius:50%; background:var(--bg-concrete); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all var(--dur-fast);
}
.search-close:hover { background:var(--red); border-color:var(--red); color:var(--white-tinted); transform:rotate(90deg) scale(1.1); }
.search-input-wrapper { position:relative; margin-bottom:20px; }
.search-input-wrapper svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--gray-mid); }
.search-input {
  width:100%; padding:18px 56px 18px 50px;
  background:var(--bg-pure); border:1px solid var(--border); border-radius:var(--r-lg);
  font-size:1.125rem; color:var(--ink); transition:all var(--dur-fast);
}
.search-input:hover { border-color:var(--gray-light); }
.search-input:focus { border-color:var(--red); box-shadow:0 0 0 3px var(--red-light); outline:none; }

/* ---- Back to Top ---- */
.back-to-top {
  position:fixed; bottom:28px; right:28px;
  width:44px; height:44px;
  background:var(--red); color:var(--white-tinted);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:100; opacity:0; visibility:hidden; transform:translateY(16px);
  transition:all var(--dur-fast) var(--ease);
  box-shadow:var(--shadow-sm);
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--red-hover); transform:translateY(-3px) scale(1.1); box-shadow:var(--shadow-md); }

/* ---- Reveal Animations ---- */

/* ---- WhatsApp Button ---- */
.whatsapp-btn {
  position:fixed; bottom:80px; right:28px;
  width:56px; height:56px;
  background:#25D366; color:var(--white-tinted);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:100; box-shadow:0 4px 20px rgba(37,211,102,0.35);
  transition:all var(--dur-fast) var(--ease);
  animation:whatsappPulse 2s ease-in-out infinite;
}
.whatsapp-btn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 6px 28px rgba(37,211,102,0.45); }
@keyframes whatsappPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.35);} 50%{box-shadow:0 4px 20px rgba(37,211,102,0.55),0 0 0 8px rgba(37,211,102,0.1);} }

.reveal { opacity:0; transform:translateY(32px); }
.reveal-left { opacity:0; transform:translateX(-32px); }
.reveal-right { opacity:0; transform:translateX(32px); }

/* ---- Gauge/Technical Graphic ---- */
.gauge-ring {
  width:120px; height:120px;
  border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--red);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.gauge-ring::after {
  content:'';
  position:absolute; inset:6px;
  border-radius:50%;
  border:1px solid var(--border-light);
}

/* ---- Blueprint Grid Pattern ---- */
.blueprint-bg {
  background-image:
    linear-gradient(rgba(215,25,32,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,25,32,0.03) 1px, transparent 1px);
  background-size:40px 40px;
}

/* ---- Product Spec Overlay ---- */
.spec-overlay {
  display:none;
}

/* ---- Contact Page ---- */
.contact-form-card {
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:clamp(28px,4vw,48px);
  box-shadow:var(--shadow-card);
  transition:box-shadow 0.3s var(--ease);
}
.contact-form-card:focus-within {
  box-shadow:0 8px 32px rgba(215,25,32,0.08);
}
.contact-info-card {
  display:flex; gap:14px; padding:20px;
  background:var(--bg-pure); border:1px solid var(--border); border-radius:var(--r-md);
  transition:all var(--dur) var(--ease);
}
.contact-info-card:hover { transform:translateX(4px) translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.contact-info-card[data-color="red"]:hover { border-color:rgba(215,25,32,0.2); }
.contact-info-card[data-color="orange"]:hover { border-color:rgba(255,122,0,0.2); }
.contact-info-card[data-color="yellow"]:hover { border-color:rgba(255,196,0,0.2); }
.contact-info-card[data-color="green"]:hover { border-color:rgba(46,125,50,0.2); }
.contact-trust { display:flex; align-items:center; gap:8px; margin-top:16px; padding:12px 16px; background:rgba(46,125,50,0.04); border-radius:var(--r-sm); border:1px solid rgba(46,125,50,0.12); }
.contact-trust svg { color:var(--green); flex-shrink:0; }
.contact-trust span { font-size:0.8125rem; color:#4A4845; line-height:1.5; }
.contact-map { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); height:280px; background:var(--bg-concrete); }
.contact-map iframe { width:100%; height:100%; border:0; }

/* ---- Contact Page Mobile ---- */
@media(max-width:768px){
  /* Main grid: stack form and info vertically */
  .contact-section .grid-2 { grid-template-columns:1fr !important; gap:32px !important; }
  /* Form card */
  .contact-form-card { padding:20px 16px; border-radius:var(--r-lg); }
  .contact-form-card .grid-2 { grid-template-columns:1fr !important; gap:12px !important; }
  /* Info cards */
  .contact-info-card { padding:16px; gap:12px; }
  .contact-info-card > div:first-child { width:36px !important; height:36px !important; }
  .contact-info-card > div:first-child svg { width:16px !important; height:16px !important; }
  .contact-info-card h4 { font-size:0.8125rem !important; }
  .contact-info-card p { font-size:0.8125rem !important; }
  /* Map */
  .contact-map { height:200px; border-radius:var(--r-md); }
  /* Trust bar */
  .contact-trust { padding:10px 12px; gap:6px; }
  .contact-trust span { font-size:0.75rem; }
}
@media(max-width:480px){
  .contact-form-card { padding:16px 14px; }
  .contact-info-card { padding:14px 12px; gap:10px; }
  .contact-map { height:180px; }
}

/* ---- Pill Tabs Scrollable on Mobile ---- */
@media(max-width:640px){
  .pill-tabs {
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:8px; gap:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pill-tabs::-webkit-scrollbar { display:none; }
  .pill-tab { white-space:nowrap; flex-shrink:0; padding:8px 16px; font-size:0.75rem; }
}

/* ---- Comprehensive Mobile Breakpoints ---- */

/* iPhone Pro Max / Large phones (428px) */
@media(max-width:428px){
  .hero-stats { padding:16px; gap:0; }
  .hero-stat { padding:10px 6px; }
  .hero-stat-number { font-size:1.5rem; }
  .section-header { margin-bottom:32px; }
  .cta-inner { padding:40px 24px; }
}

/* iPhone SE / Small phones (375px) */
@media(max-width:375px){
  :root { --section-sm: 40px; }
  .hero-stats { grid-template-columns:1fr 1fr; padding:12px; margin-top:32px; }
  .hero-stat-number { font-size:1.25rem; }
  .hero-stat-label { font-size:0.625rem; }
  .hero-scroll { display:none; }
  .product-card-image { padding:6px; }
  .product-card-body { padding:16px 18px 18px; }
  .product-card-title { font-size:0.9375rem; }
  .product-card-cta { width:36px; height:36px; }
  .product-card-cta svg { width:14px; height:14px; }
  .blog-card-image { height:160px; }
  .contact-form-card { padding:20px; }
  .contact-map { height:220px; }
  .footer-social-link { width:44px; height:44px; }
  .page-header { padding:80px 0 40px; }
}

/* Form Inputs — Mobile Touch Optimization */
@media(max-width:768px){
  .form-input { padding:14px 16px; font-size:1rem; min-height:48px; }
  textarea.form-input { min-height:120px; }
  .btn { min-height:48px; }
}

/* Notch safe area */
@supports(padding:max(0px)){
  .mobile-menu { padding-bottom:max(20px, env(safe-area-inset-bottom)); }
  .footer { padding-bottom:max(20px, env(safe-area-inset-bottom)); }
}

/* ---- Enhanced Animations & Effects ---- */

/* Button Ripple Effect */
.btn::after {
  content:'';
  position:absolute;
  width:0; height:0;
  background:rgba(255,255,255,0.3);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity:0;
}
.btn:active::after {
  width:300px; height:300px;
  opacity:0;
  transition:0s;
}
.btn-ripple::after {
  animation:ripple 0.6s ease-out;
}
@keyframes ripple {
  0% { width:0; height:0; opacity:0.5; }
  100% { width:400px; height:400px; opacity:0; }
}

/* Button primary — refined shadow on hover */
.btn-primary {
  position:relative;
  transition:all 0.3s var(--ease);
}
.btn-primary:hover {
  box-shadow:0 6px 24px rgba(215,25,32,0.3);
}

/* Enhanced CTA Section */
.cta-section {
  position:relative;
}
.cta-inner {
  position:relative;
  background:linear-gradient(135deg,var(--bg-pure) 0%,var(--bg-warm) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
}
.cta-inner:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(26,25,24,0.1), 0 4px 16px rgba(26,25,24,0.06);
}
.cta-inner::before {
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(215,25,32,0.08),transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:ctaFloat 6s ease-in-out infinite;
}
.cta-inner::after {
  content:'';
  position:absolute;
  bottom:-40px; left:-40px;
  width:120px; height:120px;
  background:radial-gradient(circle,rgba(255,196,0,0.06),transparent 70%);
  border-radius:50%;
  pointer-events:none;
  animation:ctaFloat 8s ease-in-out infinite reverse;
}
@keyframes ctaFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  50% { transform:translate(10px,-10px) scale(1.1); }
}

/* CTA section — refined */
.cta-inner .cta-glow {
  position:absolute;
  inset:0;
  border-radius:var(--r-xl);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.5s ease;
}

/* Scroll Reveal Enhancements */
.reveal-scale {
  opacity:0;
  transform:scale(0.9);
  transition:all 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale.active {
  opacity:1;
  transform:scale(1);
}

.reveal-rotate {
  opacity:0;
  transform:rotate(-3deg) translateY(20px);
  transition:all 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-rotate.active {
  opacity:1;
  transform:rotate(0) translateY(0);
}

/* Text Reveal Animation */
.text-reveal {
  overflow:hidden;
}
.text-reveal-inner {
  transform:translateY(100%);
  transition:transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.text-reveal.active .text-reveal-inner {
  transform:translateY(0);
}

/* Stagger Delay Utilities */
.stagger-delay-1 { transition-delay:0.1s !important; }
.stagger-delay-2 { transition-delay:0.2s !important; }
.stagger-delay-3 { transition-delay:0.3s !important; }
.stagger-delay-4 { transition-delay:0.4s !important; }
.stagger-delay-5 { transition-delay:0.5s !important; }

/* Card Hover Effects */
.product-card {
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.product-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(27,27,27,0.12), 0 8px 20px rgba(27,27,27,0.08);
}

.industry-card {
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.industry-card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 48px rgba(0,0,0,0.2);
}

/* Who We Are Cards — hover effects (replaces inline handlers) */
.who-we-are-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(215,25,32,0.06);
}
.who-we-are-card:hover .who-we-are-accent {
  transform:scaleX(1);
}

/* Glow Line Animation */
.glow-line {
  height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  transform-origin:center;
  position:relative;
}
.glow-line::after {
  content:'';
  position:absolute;
  inset:0;
  background:inherit;
  filter:blur(4px);
  opacity:0.5;
}

/* Section Divider Animation */
.section-divider {
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  position:relative;
  overflow:hidden;
}
.section-divider::after {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:50%; height:100%;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:dividerSweep 3s ease-in-out infinite;
}
@keyframes dividerSweep {
  0% { left:-50%; }
  100% { left:150%; }
}

/* Stats Counter Animation */
.counter {
  transition:all 0.3s ease;
}
.counter:hover {
  color:var(--red);
  transform:scale(1.05);
}

/* Smooth Scroll Progress */
.scroll-progress {
  position:fixed;
  top:0; left:0;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  z-index:10000;
  transition:width 0.1s linear;
  box-shadow:0 0 8px rgba(215,25,23,0.4);
}

/* Image Hover Zoom */
.img-zoom {
  overflow:hidden;
}
.img-zoom img {
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.img-zoom:hover img {
  transform:scale(1.08);
}

/* Link Underline Animation */
.link-underline {
  position:relative;
  display:inline-block;
}
.link-underline::after {
  content:'';
  position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:var(--red);
  transition:width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.link-underline:hover::after {
  width:100%;
}

/* Notification Slide */
.notification {
  position:fixed;
  top:20px; right:20px;
  max-width:400px;
  padding:14px 18px;
  border-radius:var(--r-md);
  font-size:0.875rem;
  transform:translateX(120%);
  opacity:0;
  transition:all 0.4s var(--ease);
  z-index:10001;
}
.notification.active {
  transform:translateX(0);
  opacity:1;
}
.notification-success { background:#2E7D32; color:#FFFFFF; box-shadow:0 8px 32px rgba(46,125,50,0.3); }
.notification-error { background:#D71920; color:#FFFFFF; box-shadow:0 8px 32px rgba(215,25,32,0.3); }
.notification-content { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notification-close { color:inherit; opacity:0.7; font-size:1.2rem; cursor:pointer; background:none; border:none; padding:4px; transition:opacity 0.2s; }
.notification-close:hover { opacity:1; }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .reveal, .reveal-left, .reveal-right { opacity:1; transform:none; }
  .scroll-progress { display:none; }
}

/* ---- Mobile Overflow Prevention ---- */
@media(max-width:768px){
  html, body { overflow-x:hidden; width:100%; }
  .container { padding:0 clamp(16px,4vw,24px); }
  section:not(.hero) { overflow:hidden; }
  .grid-2, .grid-3, .grid-4, .home-products-grid { grid-template-columns:repeat(2,1fr); }
  .prevention-section .grid-2 { grid-template-columns:1fr !important;gap:32px !important; }
  .manufacturing-section .grid-2 { grid-template-columns:1fr !important;gap:32px !important; }
  .manufacturing-section .factory-timeline-item { padding-bottom:28px; }
  .manufacturing-section .reveal-right > div { gap:12px; }
  .certifications-grid { grid-template-columns:1fr !important; }
  .cert-card { padding:16px !important;gap:14px !important; }
  .cert-card-icon { width:40px !important;height:40px !important; }
  .cert-card-icon img { width:30px !important;height:30px !important; }
  .cert-card-name { font-size:0.875rem !important; }
  .cert-card-desc { font-size:0.75rem !important; }
  .blog-grid { grid-template-columns:1fr !important; }
  .product-detail-grid { grid-template-columns:1fr; gap:32px; }
  .product-detail-image { position:static; }
  .product-detail-image-box { padding:32px; aspect-ratio:auto; max-height:350px; }
  .product-detail-actions { flex-direction:column; }
  .product-detail-actions .btn { width:100%; justify-content:center; }
  .specs-key, .specs-val { padding:10px 12px; font-size:0.75rem; }
  .product-card-image { padding:6px; }
  .product-card-body { padding:12px 14px 14px; }
  .product-card-title { font-size:0.8125rem; margin-bottom:0; }
  .product-card-category,
  .product-card-desc,
  .product-card-footer,
  .product-card-class,
  .spec-overlay { display:none !important; }
  .product-card-cta { width:32px; height:32px; }
  .product-card-cta svg { width:12px; height:12px; }
  .capacity-value { font-size:0.75rem; }
  .capacity-label { font-size:0.5rem; }
  .cta-inner { padding:40px 20px; }
  .cta-title { font-size:clamp(1.5rem,5vw,2rem); }
  .footer-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .footer-brand-col { padding-right:0 !important; align-items:center; text-align:center; }
  .footer-trust-badges { justify-content:center; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .whatsapp-btn { bottom:80px; right:16px; width:48px; height:48px; }
  .back-to-top { bottom:28px; right:16px; width:40px; height:40px; }
  .nav-wrapper { top:12px; max-width:calc(100vw - 24px); gap:4px; }
  .nav { height:44px; padding:0 20px; gap:1px; }
  .brand-chip { height:44px; padding:0 16px 0 8px; gap:8px; }
  .brand-chip-logo { width:34px; height:34px; }
  .brand-chip-logo img { width:26px; height:26px; }
  .brand-chip-name { font-size:0.9375rem; }
  .brand-chip-divider { height:22px; }
  .nav-link { font-size:0.75rem; padding:6px 10px; }
  .nav-cta { height:36px; padding:0 16px; font-size:0.75rem; }
}
/* Prevent any element from causing horizontal scroll */
img, video, canvas, iframe { max-width:100%; }
* { box-sizing:border-box; }

/* ---- Industry Cards Mobile 2x2 ---- */
@media(max-width:768px){
  .grid-3.stagger-children { grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }
  .industry-card { aspect-ratio:1; }
  .industry-card-content { padding:16px; }
  .industry-card-title { font-size:1rem; }
}
@media(max-width:640px){
  .grid-3.stagger-children { grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .industry-card { aspect-ratio:1; border-radius:var(--r-md); }
  .industry-card-content { padding:12px; }
  .industry-card-title { font-size:0.8125rem; margin-bottom:2px; line-height:1.2; }
  .industry-card-desc { display:none; }
  .industry-card:hover .industry-card-desc { opacity:0; }
}

/* ---- Products Sidebar Layout ---- */
.products-layout {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:start;
}
.products-sidebar {
  position:static;
}
.products-sidebar.sidebar-fixed {
  position:fixed;
  top:80px;
  width:280px;
  max-height:calc(100vh - 100px);
  overflow-y:auto;
  z-index:50;
}
.products-sidebar::-webkit-scrollbar { width:4px; }
.products-sidebar::-webkit-scrollbar-track { background:transparent; }
.products-sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.sidebar-card {
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow 0.3s var(--ease);
}
.sidebar-search {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--border-light);
  color:var(--gray-mid);
}
.sidebar-search input {
  flex:1;
  font-size:0.8125rem;
  background:transparent;
  color:var(--ink);
}
.sidebar-search input::placeholder { color:var(--gray-light); }
.sidebar-search input:focus { outline:none; }
.sidebar-categories {
  max-height:calc(100vh - 260px);
  overflow-y:auto;
  padding:8px 0;
}
.sidebar-categories::-webkit-scrollbar { width:4px; }
.sidebar-categories::-webkit-scrollbar-track { background:transparent; }
.sidebar-categories::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.sidebar-categories::-webkit-scrollbar-thumb:hover { background:var(--gray-light); }

/* Category Items */
.sidebar-cat-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  font-size:0.8125rem;
  font-weight:500;
  color:var(--gray);
  transition:all 0.25s var(--ease);
  border-left:3px solid transparent;
  cursor:pointer;
  text-decoration:none;
}
.sidebar-cat-item:hover {
  color:var(--ink);
  background:var(--bg-concrete);
  padding-left:22px;
}
.sidebar-cat-item.active {
  color:var(--red);
  background:var(--red-light);
  border-left-color:var(--red);
  font-weight:600;
}
.sidebar-cat-info {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.sidebar-cat-info svg { flex-shrink:0; opacity:0.5; }
.sidebar-cat-name {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-cat-meta {
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.sidebar-cat-count {
  font-size:0.6875rem;
  font-weight:600;
  color:var(--gray-light);
  background:var(--bg-concrete);
  padding:2px 8px;
  border-radius:var(--r-full);
  min-width:28px;
  text-align:center;
}
.sidebar-cat-item.active .sidebar-cat-count {
  background:rgba(215,25,32,0.15);
  color:var(--red);
}
.sidebar-cat-chevron {
  display:flex;
  align-items:center;
  transition:transform 0.3s var(--ease);
  color:var(--gray-light);
}
.sidebar-cat-group.expanded .sidebar-cat-chevron,
.sidebar-cat-group.has-active .sidebar-cat-chevron {
  transform:rotate(180deg);
}

/* Subcategories */
.sidebar-subcategory {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s var(--ease), opacity 0.3s ease;
  opacity:0;
}
.sidebar-subcategory.expanded {
  max-height:500px;
  opacity:1;
}
.sidebar-sub-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 18px 8px 44px;
  font-size:0.75rem;
  color:var(--gray-mid);
  transition:all 0.25s var(--ease);
  border-left:3px solid transparent;
  text-decoration:none;
}
.sidebar-sub-item:hover {
  color:var(--ink);
  background:var(--bg-concrete);
  padding-left:48px;
}
.sidebar-sub-item.active {
  color:var(--red);
  font-weight:600;
  border-left-color:var(--red);
}
.sidebar-sub-item .sidebar-cat-count {
  font-size:0.625rem;
  padding:1px 6px;
}

/* Sidebar Footer */
.sidebar-footer {
  padding:14px 18px;
  border-top:1px solid var(--border-light);
}
.sidebar-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:10px 16px;
  background:var(--red);
  color:var(--white-tinted);
  border-radius:var(--r-md);
  font-size:0.8125rem;
  font-weight:600;
  transition:all 0.3s var(--ease);
  text-decoration:none;
}
.sidebar-cta:hover {
  background:var(--red-hover);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(215,25,32,0.35);
}

/* Active Filter Bar */
.active-filter-bar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:var(--bg-pure);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  margin-bottom:24px;
  font-size:0.8125rem;
  transition:all 0.3s var(--ease);
}
.active-filter-label { color:var(--gray-mid); }
.active-filter-tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  background:var(--red-light);
  color:var(--red);
  border-radius:var(--r-full);
  font-weight:600;
  font-size:0.75rem;
  text-transform:capitalize;
}
.active-filter-clear {
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(215,25,32,0.2);
  color:var(--red);
  font-size:0.75rem;
  line-height:1;
  cursor:pointer;
  transition:all 0.2s;
  border:none;
  padding:0;
}
.active-filter-clear:hover { background:var(--red); color:var(--white-tinted); transform:scale(1.1); }
.active-filter-count {
  margin-left:auto;
  color:var(--gray-mid);
  font-size:0.75rem;
}

/* Mobile Filter Toggle */
.mobile-filter-toggle { display:none; }

/* Mobile: sidebar above grid */
@media(max-width:1024px){
  .products-layout { grid-template-columns:1fr; }
  .products-sidebar {
    position:static;
    display:none;
  }
  .products-sidebar.mobile-open { display:block; }
  .mobile-filter-toggle {
    display:flex;
    justify-content:center;
    padding:0 16px;
    margin-top:16px;
  }
  .mobile-filter-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:var(--bg-pure);
    border:1px solid var(--border);
    border-radius:var(--r-full);
    font-size:0.8125rem;
    font-weight:600;
    color:var(--ink);
    box-shadow:var(--shadow-xs);
    transition:all 0.3s var(--ease);
    cursor:pointer;
  }
  .mobile-filter-btn:hover { border-color:var(--red); color:var(--red); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
  .filter-count {
    background:var(--red);
    color:var(--white-tinted);
    font-size:0.625rem;
    padding:1px 6px;
    border-radius:var(--r-full);
  }
}
@media(max-width:768px){
  .products-layout { gap:20px; }
  .sidebar-categories { max-height:50vh; }
}

/* ---- About Hero — Short & Bold ---- */
.about-hero {
  position:relative;
  overflow:hidden;
  background:var(--ink) url('../images/about-hero-bg.jpg') center/cover no-repeat;
  padding:clamp(100px,14vw,160px) 0 clamp(48px,6vw,72px);
}
.about-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
  pointer-events:none;
}
.about-hero::after {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
  opacity:0.5;
}
.about-hero .container {
  position:relative;
  z-index:1;
}
.about-hero-inner {
  text-align:center;
  max-width:700px;
  margin:0 auto;
}
.about-hero-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-full);
  font-size:0.75rem;
  font-weight:500;
  color:rgba(255,255,255,0.7);
  margin-bottom:24px;
  letter-spacing:0.02em;
}
.about-hero-badge svg { color:var(--red); }
.about-hero-title {
  font-family:var(--display);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--white-tinted);
  margin-bottom:20px;
}
.about-hero-accent {
  color:var(--red);
}
.about-hero-desc {
  font-size:clamp(1rem,1.1vw,1.125rem);
  line-height:1.7;
  color:rgba(255,255,255,0.55);
  margin-bottom:32px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.about-hero-actions {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---- About Hero Mobile ---- */
@media(max-width:768px){
  .about-hero {
    padding:80px 0 48px;
  }
  .about-hero-title {
    font-size:clamp(3rem,12vw,4rem);
  }
  .about-hero-badge {
    font-size:0.6875rem;
    padding:6px 14px;
    gap:6px;
  }
  .about-hero-badge svg {
    width:12px;
    height:12px;
  }
  .about-hero-desc {
    font-size:0.75rem;
    line-height:1.5;
  }
  .about-hero-actions {
    gap:8px;
  }
  .about-hero-actions .btn {
    padding:10px 18px;
    font-size:0.75rem;
    min-height:40px;
  }
}
@media(max-width:480px){
  .about-hero {
    padding:70px 0 36px;
  }
  .about-hero-title {
    font-size:clamp(2.75rem,13vw,3.5rem);
  }
  .about-hero-desc {
    font-size:0.6875rem;
  }
  .about-hero-actions {
    flex-direction:row;
    gap:8px;
    justify-content:center;
  }
  .about-hero-actions .btn {
    padding:10px 16px;
    font-size:0.75rem;
  }
}

/* ---- Stats Bar — Fit Screen on Mobile ---- */
@media(max-width:768px){
  .about-stats-bar {
    padding:24px 0 !important;
    overflow:hidden;
  }
  .about-stats-bar .grid-4 {
    display:flex !important;
    flex-wrap:nowrap;
    gap:0;
    padding:0;
  }
  .about-stats-bar .grid-4 > div {
    flex:1;
    min-width:0;
    padding:8px 4px;
    text-align:center;
    overflow:hidden;
  }
  .about-stat-number {
    font-size:1.1rem !important;
    margin-bottom:2px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .about-stats-bar .grid-4 > div > div:last-child {
    font-size:0.5rem !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media(max-width:480px){
  .about-stat-number {
    font-size:0.9375rem !important;
  }
  .about-stats-bar .grid-4 > div {
    padding:6px 2px;
  }
}

/* ---- Grid 5 (Process Timeline) ---- */
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media(max-width:1024px){ .grid-5{grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){ .grid-5{grid-template-columns:repeat(2,1fr);} }

/* ---- About Page Mobile Fixes ---- */
@media(max-width:768px){
  /* Our Story */
  .about-story-section .grid-2 { grid-template-columns:1fr !important; gap:32px !important; }
  .about-story-card { order:2 !important; }
  .about-story-content { order:1 !important; }
  .about-story-logo { width:60px !important; height:60px !important; }
  .about-story-brand { font-size:1.5rem !important; }
  .about-story-est { font-size:0.625rem !important; }
  .about-story-card > div { padding:28px !important; }
  .about-story-card > div > div { gap:12px !important; }
  .about-story-content .t-h1 { font-size:clamp(1.5rem,5vw,2rem) !important; margin-bottom:16px !important; }
  .about-story-content .t-body-lg { font-size:0.9375rem !important; line-height:1.6 !important; margin-bottom:10px !important; }
  .about-story-certs { gap:12px !important; margin-bottom:20px !important; }
  .about-story-certs span { font-size:0.8125rem !important; }

  /* Stats bar */
  .about-stats-bar { padding:clamp(32px,5vw,48px) 0 !important; }
  .about-stats-bar .grid-4 { grid-template-columns:repeat(2,1fr) !important; gap:20px !important; }

  /* Board of Directors */
  .director-card .director-img { width:110px !important; height:110px !important; }
  .director-card > div:first-child { height:200px !important; }

  /* Who We Are — Mission/Vision/Values: single column on mobile */
  .who-we-are-grid { grid-template-columns:1fr !important; gap:16px !important; }
  .who-we-are-card { aspect-ratio:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; padding:28px 20px !important; justify-content:center !important; }
  .who-we-are-card > div:nth-child(2) { margin-bottom:16px !important; }
  .who-we-are-card h3 { font-size:1.125rem !important; margin-bottom:8px !important; }
  .who-we-are-card p { font-size:0.8125rem !important; line-height:1.5 !important; display:-webkit-box !important; -webkit-line-clamp:4 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
  .who-we-are-accent { display:none !important; }

  /* Certifications */
  .about-cert-fade-left, .about-cert-fade-right { width:40px !important; }
  .about-cert-content { gap:40px !important; }
  .about-cert-item { height:60px !important; }
  .about-cert-item img { height:45px !important; }

  /* Industries */
  .about-industry-card { padding:24px 16px !important; }
  .grid-4.stagger-children { grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }

  /* Journey Timeline */
  .about-journey { padding-left:30px !important; }
  .about-journey .reveal { margin-bottom:28px !important; }

  /* CTA */
  .cta-inner { padding:36px 20px !important; }
  .cta-title { font-size:clamp(1.5rem,5vw,2rem) !important; }
  .cta-desc { font-size:0.9375rem !important; margin-bottom:20px !important; }
  .cta-actions { flex-direction:column !important; gap:10px !important; }
  .cta-actions .btn { width:100% !important; justify-content:center !important; }

  /* Generic section spacing */
  section { padding:clamp(40px,8vw,64px) 0 !important; }
  .section-header { margin-bottom:32px !important; }
  .section-header .t-h1 { font-size:clamp(1.5rem,5vw,2rem) !important; }
  .section-desc { font-size:0.9375rem !important; }
  .section-label span { font-size:0.625rem; }
  .section-label::before { width:16px; }

  /* Mission/Vision/Values cards */
  .grid-3 .reveal { padding:28px 20px !important; }

  /* Glow line */
  .glow-line { margin-bottom:40px !important; }
}
@media(max-width:640px){
  /* Our Story compact */
  .about-story-card > div { padding:20px !important; }
  .about-story-logo { width:48px !important; height:48px !important; }
  .about-story-brand { font-size:1.25rem !important; }
  .about-story-stats { gap:12px !important; flex-wrap:wrap; justify-content:center; }
  .about-story-content .t-body-lg { font-size:0.875rem !important; }
  .about-story-certs { gap:8px !important; }
  .about-story-certs > div { gap:4px !important; }
  .about-story-certs svg { width:14px !important; height:14px !important; }
  .about-story-certs span { font-size:0.75rem !important; }

  /* Stats bar tight */
  .about-stats-bar .grid-4 { gap:12px !important; }
  .about-stat-number { font-size:clamp(1.5rem,5vw,2rem) !important; }

  /* Directors 2-column square cards on mobile */
  .grid-2.stagger-children { grid-template-columns:1fr 1fr !important; gap:16px !important; max-width:none !important; }
  .director-card { aspect-ratio:1/1 !important; display:flex !important; flex-direction:column !important; }
  .director-card .director-img { width:80px !important; height:80px !important; }
  .director-card > div:first-child { height:auto !important; flex:0 0 auto !important; padding:20px 16px 0 !important; }
  .director-card > div:last-child { padding:16px !important; flex:1 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; }
  .director-card h3 { font-size:0.9375rem !important; margin-bottom:4px !important; }
  .director-card .director-title { font-size:0.6875rem !important; margin-bottom:8px !important; }
  .director-card .t-body { font-size:0.8125rem !important; line-height:1.5 !important; }

  /* Industries 1-column */
  .grid-4.stagger-children { grid-template-columns:1fr !important; gap:12px !important; }
}
@media(max-width:480px){
  .about-stats-bar .grid-4 { grid-template-columns:1fr 1fr !important; gap:10px !important; padding:0 8px; }
  .about-stats-bar .grid-4 .reveal { padding:8px !important; }
  .about-stat-number { font-size:1.25rem !important; }
  .about-stats-bar > div > div > div > div:last-child { font-size:0.6875rem !important; }
  .counter { font-size:1.5rem !important; }
}

/* =====================================================
   Certification Hub — Interactive Circular Layout
   ===================================================== */

.cert-hub-section {
  padding: var(--section) 0;
  background: var(--bg-concrete);
  overflow: hidden;
  position: relative;
}

/* Header */
.cert-hub-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.cert-hub-title {
  margin-bottom: 16px;
}
.cert-hub-desc {
  color: #4A4845;
  max-width: 520px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Hub Wrapper */
.cert-hub-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 1;
  margin: 0 auto;
}

/* Concentric Circles */
.cert-hub-circles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cert-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--border);
  transform: translate(-50%, -50%);
  opacity: 0.5;
}
.cert-circle-1 {
  width: 44%;
  height: 44%;
  animation: certPulse 4s ease-in-out infinite;
}
.cert-circle-2 {
  width: 62%;
  height: 62%;
  border-style: dashed;
  border-color: var(--border-light);
  animation: certPulse 4s ease-in-out infinite 0.5s;
}
.cert-circle-3 {
  width: 80%;
  height: 80%;
  border-color: transparent;
  background: radial-gradient(circle, rgba(215,25,32,0.015) 0%, transparent 70%);
  animation: certPulse 4s ease-in-out infinite 1s;
}
@keyframes certPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.02); opacity: 0.7; }
}

/* Connection Lines SVG */
.cert-hub-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.cert-line {
  stroke: var(--border);
  stroke-width: 1.5;
  fill: none;
  transition: stroke 0.4s var(--ease), stroke-width 0.4s var(--ease);
}
.cert-line-dot {
  fill: var(--border);
  transition: fill 0.4s var(--ease), r 0.4s var(--ease);
}
.cert-hub-card.active ~ .cert-hub-lines .cert-line,
.cert-hub-card.active .cert-line {
  stroke: var(--red);
  stroke-width: 2;
}
.cert-hub-card.active ~ .cert-hub-lines .cert-line-dot,
.cert-hub-card.active .cert-line-dot {
  fill: var(--red);
}

/* Center Logo */
.cert-hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 140px;
  height: 140px;
}
.cert-center-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.cert-hub-wrapper:hover .cert-center-glow,
.cert-hub-card.active ~ .cert-hub-center .cert-center-glow {
  opacity: 1;
}
.cert-center-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.cert-hub-card.active ~ .cert-hub-center .cert-center-ring {
  border-color: var(--red);
  transform: scale(1.05);
}
.cert-center-logo {
  width: 140px;
  height: 140px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.08));
  transition: transform 0.4s var(--ease);
}
.cert-hub-card.active ~ .cert-hub-center .cert-center-logo {
  transform: scale(1.05);
}

/* Certification Cards */
.cert-hub-card {
  position: absolute;
  z-index: 4;
  --card-size: 130px;
  width: var(--card-size);
  /* Position calculated by JS using --angle */
}
.cert-card-inner {
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 18px 14px 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
  cursor: default;
  position: relative;
}
.cert-card-inner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  border: 2px solid transparent;
  transition: border-color 0.4s var(--ease);
  pointer-events: none;
}
.cert-hub-card:hover .cert-card-inner,
.cert-hub-card.active .cert-card-inner {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(215,25,32,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border-color: rgba(215,25,32,0.2);
}
.cert-hub-card:hover .cert-card-inner::before,
.cert-hub-card.active .cert-card-inner::before {
  border-color: rgba(215,25,32,0.15);
}

/* Card Logo */
.cert-card-logo-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 8px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.cert-hub-card:hover .cert-card-logo-wrap,
.cert-hub-card.active .cert-card-logo-wrap {
  background: var(--red-light);
  transform: scale(1.05);
}
.cert-card-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Card Text */
.cert-card-name {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.cert-card-desc {
  font-size: 0.625rem;
  color: var(--gray-mid);
  line-height: 1.4;
}

/* Connection dot on card edge */
.cert-hub-card::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--border);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -1;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cert-hub-card:hover::after,
.cert-hub-card.active::after {
  background: var(--red);
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(215,25,32,0.4);
}

/* Hint & CTA */
.cert-hub-hint {
  text-align: center;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: 0.875rem;
  color: var(--gray-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cert-hub-hint-dot {
  width: 10px;
  height: 10px;
  border: 2px solid var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.cert-hub-cta {
  text-align: center;
  margin-top: 28px;
}

/* Entrance Animations */
.cert-hub-card {
  opacity: 0;
  transform: scale(0.8);
}
.cert-hub-card.cert-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.cert-hub-center {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}
.cert-hub-center.cert-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.cert-hub-circles {
  opacity: 0;
}
.cert-hub-circles.cert-visible {
  opacity: 1;
  transition: opacity 1s var(--ease);
}

/* ---- Certification Hub — Responsive ---- */
@media(max-width:1024px) {
  .cert-hub-wrapper {
    max-width: 560px;
  }
  .cert-hub-center {
    width: 110px;
    height: 110px;
  }
  .cert-center-logo {
    width: 110px;
    height: 110px;
  }
  .cert-card-inner {
    padding: 14px 10px 12px;
  }
  .cert-card-logo-wrap {
    width: 44px;
    height: 44px;
  }
  .cert-card-name {
    font-size: 0.6875rem;
  }
  .cert-card-desc {
    font-size: 0.5625rem;
  }
}

@media(max-width:768px) {
  .cert-hub-wrapper {
    max-width: 100%;
    aspect-ratio: auto;
    height: auto !important;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 0;
    overflow: visible;
  }

  .cert-hub-circles {
    display: none;
  }

  .cert-hub-lines {
    display: none;
  }

  .cert-hub-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-column: 1 / -1;
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
    opacity: 1;
  }

  .cert-hub-center.cert-visible {
    transform: none;
  }

  .cert-hub-card {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    --card-size: 100%;
    opacity: 1;
    transform: none;
  }

  .cert-hub-card.cert-visible {
    transform: none;
  }

  .cert-card-inner {
    padding: 12px 8px 10px;
    border-radius: var(--r-md);
  }
  .cert-card-logo-wrap {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }
  .cert-card-name {
    font-size: 0.625rem;
  }
  .cert-card-desc {
    display: none;
  }
  .cert-hub-card::after {
    display: none;
  }
  .cert-hub-hint {
    font-size: 0.75rem;
  }
}

@media(max-width:480px) {
  .cert-hub-wrapper {
    max-width: 320px;
    aspect-ratio: 1;
  }
  .cert-hub-center {
    width: 72px;
    height: 72px;
  }
  .cert-center-logo {
    width: 72px;
    height: 72px;
  }
  .cert-center-ring {
    inset: -5px;
  }
  .cert-hub-card {
    --card-size: 82px;
  }
  .cert-card-inner {
    padding: 8px 6px;
    border-radius: var(--r-sm);
  }
  .cert-card-logo-wrap {
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
    border-radius: 6px;
    padding: 4px;
  }
  .cert-card-name {
    font-size: 0.5rem;
    line-height: 1.2;
  }
  .cert-hub-hint {
    font-size: 0.6875rem;
    flex-direction: column;
    gap: 6px;
  }
  .cert-hub-cta .btn {
    font-size: 0.8125rem;
    padding: 10px 18px;
  }

  /* Mobile: Convert circular hub to scrollable 2-column grid */
  .cert-hub-wrapper {
    max-width: 100%;
    aspect-ratio: auto;
    height: auto !important;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 0;
    overflow: visible;
  }

  .cert-hub-circles {
    display: none;
  }

  .cert-hub-lines {
    display: none;
  }

  .cert-hub-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-column: 1 / -1;
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    opacity: 1;
  }

  .cert-hub-center.cert-visible {
    transform: none;
  }

  .cert-hub-card {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    --card-size: 100%;
    opacity: 1;
    transform: none;
  }

  .cert-hub-card.cert-visible {
    transform: none;
  }

  .cert-hub-card::after {
    display: none;
  }
}

/* ---- Mobile Polish — Final Pass ---- */
@media(max-width:768px){
  /* Touch-friendly tap targets: minimum 44px */
  .nav-link, .pill-tab, .footer-link, .mobile-menu-subitem {
    min-height:44px;
    display:flex;
    align-items:center;
  }

  /* Hero section mobile refinements */
  .hero {
    padding-top:90px;
    min-height:100vh;
    min-height:100svh;
  }
  .hero-layout {
    gap:clamp(16px,4vw,32px);
  }
  .hero-content {
    padding-bottom:16px;
  }
  .hero-subtitle {
    margin-bottom:28px;
  }

  /* Section spacing rhythm on mobile */
  section {
    padding:clamp(40px,8vw,60px) 0;
  }

  /* Product cards: tighter grid on mobile */
  .home-products-grid {
    gap:12px;
  }
  .product-card {
    border-radius:var(--r-md);
  }
  .product-card-image {
    aspect-ratio:1;
  }

  /* Stats bar: ensure horizontal scroll works */
  .stats-bar {
    overflow:hidden;
  }
  .stats-grid {
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .stats-grid::-webkit-scrollbar {
    display:none;
  }

  /* Industry cards: ensure 2x2 grid */
  .grid-3.stagger-children {
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }

  /* CTA section: full-width buttons on mobile */
  .cta-inner {
    padding:clamp(32px,6vw,48px) clamp(16px,4vw,24px);
    border-radius:var(--r-lg);
  }
  .cta-actions {
    flex-direction:column;
    gap:10px;
  }
  .cta-actions .btn {
    width:100%;
    justify-content:center;
  }

  /* Footer mobile: small screen spacing */
  .footer-mobile {
    padding:32px 16px 14px;
  }
  .footer-mobile-logo-badge {
    width:60px;
    height:60px;
    padding:12px;
  }
  .footer-mobile-brand {
    font-size:1.25rem;
  }
  .footer-mobile-links a {
    font-size:0.75rem;
    padding:8px 4px;
    gap:4px;
  }
  .fm-link-arrow { font-size:0.75rem; }
  .footer-mobile-trust-card {
    padding:10px 6px;
  }
  .fm-trust-title { font-size:0.4375rem; }
  .fm-trust-sub { font-size:0.4375rem; }

  /* Blog cards: single column on mobile */
  .blog-grid {
    gap:12px;
  }
  .blog-card {
    border-radius:var(--r-md);
  }
  .blog-card-image {
    height:140px;
  }

  /* Testimonial cards: tighter padding */
  .testimonial-card {
    padding:20px;
  }
  .testimonial-text {
    font-size:0.875rem;
    line-height:1.6;
  }

  /* Certification cards: compact */
  .certifications-grid {
    gap:8px !important;
  }
  .cert-card {
    padding:12px !important;
    gap:10px !important;
  }

  /* Glow line: smaller margin */
  .glow-line {
    margin-bottom:32px;
  }

  /* Section headers: tighter spacing */
  .section-header {
    margin-bottom:24px;
  }
}

/* Extra small screens */
@media(max-width:375px){
  .hero-title {
    font-size:clamp(1.5rem,8vw,2rem);
  }
  .hero-subtitle {
    font-size:0.75rem;
  }
  .hero-actions .btn {
    padding:8px 14px !important;
    font-size:0.75rem !important;
  }
  .stat-number {
    font-size:0.9375rem;
  }
  .stat-label {
    font-size:0.5rem;
  }
}

/* ---- Why Choose SafeFloor — Mobile 2x3 Square Grid ---- */
@media(max-width:640px){
  .why-choose-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .why-choose-grid .reveal-scale,
  .why-choose-grid > div {
    aspect-ratio:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px 10px !important;
    text-align:center;
    border-radius:var(--r-md) !important;
    overflow:hidden;
  }
  .why-choose-grid .reveal-scale > div:first-child,
  .why-choose-grid > div > div:first-child {
    width:36px !important;
    height:36px !important;
    margin:0 auto 10px !important;
    flex-shrink:0;
  }
  .why-choose-grid .reveal-scale > div:first-child svg,
  .why-choose-grid > div > div:first-child svg {
    width:18px !important;
    height:18px !important;
  }
  .why-choose-grid .reveal-scale h3,
  .why-choose-grid > div h3 {
    font-size:0.75rem !important;
    margin-bottom:4px !important;
    line-height:1.2;
  }
  .why-choose-grid .reveal-scale p,
  .why-choose-grid > div p {
    font-size:0.625rem !important;
    line-height:1.35 !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}