/* ==========================================================================
   AGGARWAL FABRICS - MASTER STYLESHEET
   Premium industrial manufacturing website
   Author: Aggarwal Fabrics Web Team | Version 1.0
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS / CSS VARIABLES ---------- */
:root {
  /* Brand Colors */
  --af-primary:        #0B2545;   /* deep navy - trust, industrial */
  --af-primary-dark:   #061a35;
  --af-primary-light:  #13386b;
  --af-secondary:      #1976D2;   /* electric blue - modern */
  --af-secondary-dark: #0d5cb6;
  --af-accent:         #F59E0B;   /* amber - premium quality */
  --af-accent-dark:    #d97706;

  /* Neutrals */
  --af-ink:        #0F172A;
  --af-text:       #334155;
  --af-muted:      #64748B;
  --af-line:       #E2E8F0;
  --af-surface:    #F8FAFC;
  --af-surface-2:  #F1F5F9;
  --af-white:      #FFFFFF;

  /* Status */
  --af-success: #10B981;
  --af-danger:  #EF4444;
  --af-info:    #06B6D4;

  /* Typography */
  --af-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --af-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale (8pt) */
  --af-s-1: 0.25rem;  --af-s-2: 0.5rem;  --af-s-3: 0.75rem; --af-s-4: 1rem;
  --af-s-5: 1.5rem;   --af-s-6: 2rem;    --af-s-7: 3rem;    --af-s-8: 4rem;
  --af-s-9: 6rem;     --af-s-10: 8rem;

  /* Radii */
  --af-r-sm: 6px; --af-r-md: 10px; --af-r-lg: 16px; --af-r-xl: 24px; --af-r-full: 999px;

  /* Shadows */
  --af-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --af-shadow-sm: 0 4px 14px rgba(15,23,42,.06);
  --af-shadow-md: 0 10px 30px rgba(15,23,42,.08);
  --af-shadow-lg: 0 20px 50px rgba(15,23,42,.12);
  --af-shadow-glow: 0 12px 40px rgba(25,118,210,.25);

  /* Transitions */
  --af-ease:      cubic-bezier(.4,0,.2,1);
  --af-ease-out:  cubic-bezier(.16,1,.3,1);
  --af-t-fast:    .15s;
  --af-t-base:    .25s;
  --af-t-slow:    .5s;

  /* Layout */
  --af-container: 1240px;
  --af-header-h:  84px;
  --af-header-h-sm: 68px;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--af-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--af-text);
  background: var(--af-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--af-secondary); text-decoration: none; transition: color var(--af-t-base) var(--af-ease); }
a:hover { color: var(--af-primary); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--af-font-display);
  color: var(--af-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 var(--af-s-4) 0;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.35rem, 1.5vw + 1rem, 2rem); }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 var(--af-s-4) 0; }
::selection { background: var(--af-secondary); color: #fff; }

.container, .container-fluid, .container-xl { max-width: var(--af-container); }

/* ---------- 3. UTILITY ---------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.bg-surface { background: var(--af-surface); }
.bg-surface-2 { background: var(--af-surface-2); }
.bg-primary-deep { background: var(--af-primary); color: #fff; }
.bg-primary-deep h1, .bg-primary-deep h2, .bg-primary-deep h3, .bg-primary-deep h4, .bg-primary-deep h5 { color: #fff; }
.text-primary-deep { color: var(--af-primary) !important; }
.text-accent { color: var(--af-accent) !important; }
.text-secondary-blue { color: var(--af-secondary) !important; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--af-font-display);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--af-secondary);
  margin-bottom: var(--af-s-4);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--af-accent); }
.eyebrow.eyebrow-light { color: var(--af-accent); }

.section-title { max-width: 780px; margin-bottom: var(--af-s-6); }
.section-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title p { color: var(--af-muted); font-size: 1.075rem; }

.divider-accent {
  width: 64px; height: 4px; background: var(--af-accent);
  border-radius: var(--af-r-full); margin-top: var(--af-s-3);
}
.center .divider-accent { margin-left: auto; margin-right: auto; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  font-family: var(--af-font-display);
  font-weight: 600;
  letter-spacing: .01em;
  padding: 14px 28px;
  border-radius: var(--af-r-md);
  transition: all var(--af-t-base) var(--af-ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid transparent;
  font-size: .95rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn:focus { box-shadow: 0 0 0 4px rgba(25,118,210,.25); }

.btn-af-primary {
  background: var(--af-primary);
  color: #fff;
  box-shadow: var(--af-shadow-sm);
}
.btn-af-primary:hover {
  background: var(--af-primary-light);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--af-shadow-md);
}

.btn-af-secondary {
  background: linear-gradient(135deg, var(--af-secondary), var(--af-secondary-dark));
  color: #fff;
  box-shadow: var(--af-shadow-glow);
}
.btn-af-secondary:hover { transform: translateY(-2px); color: #fff; filter: brightness(1.08); }

.btn-af-accent {
  background: var(--af-accent);
  color: var(--af-ink);
  box-shadow: 0 8px 24px rgba(245,158,11,.32);
}
.btn-af-accent:hover { background: var(--af-accent-dark); color: #fff; transform: translateY(-2px); }

.btn-af-outline {
  background: transparent;
  color: var(--af-primary);
  border-color: var(--af-line);
}
.btn-af-outline:hover {
  background: var(--af-primary);
  color: #fff;
  border-color: var(--af-primary);
}

.btn-af-light-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.btn-af-light-outline:hover { background: #fff; color: var(--af-primary); border-color: #fff; }

.btn-arrow::after {
  content: "→";
  transition: transform var(--af-t-base) var(--af-ease);
  font-weight: 400;
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ---------- 5. ANNOUNCEMENT BAR ---------- */
.announce-bar {
  background: var(--af-ink);
  color: #fff;
  font-size: .85rem;
  padding: 9px 0;
  font-weight: 500;
}
.announce-bar a { color: #fff; }
.announce-bar a:hover { color: var(--af-accent); }
.announce-bar .ann-divider { color: rgba(255,255,255,.25); margin: 0 12px; }
.announce-bar i { color: var(--af-accent); margin-right: 6px; }

/* ---------- 6. HEADER / NAVIGATION ---------- */
/* ----- Header shell ----- */
.af-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--af-line);
  transition: box-shadow var(--af-t-base) var(--af-ease);
}
.af-header.scrolled { box-shadow: var(--af-shadow-sm); }

/* ----- Navbar layout
   Strategy: each of the three header sections (brand | nav | CTA) lives in
   its own flex track with explicit shrink priorities. min-width:0 lets nav
   shrink, flex-shrink:0 protects brand + CTA from clipping. The navbar
   container expands beyond Bootstrap's defaults on wide screens so 8 nav
   items + brand + phone + button never compete for the same px.
----- */
.af-navbar {
  min-height: var(--af-header-h);
  padding: 0;
}
.af-navbar > .container {
  /* Override Bootstrap's tight container so the header has room to breathe.
     The rest of the site keeps its 1240px container — only the header widens. */
  max-width: 100%;
  padding-left: clamp(16px, 2vw, 28px);
  padding-right: clamp(16px, 2vw, 28px);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
@media (min-width: 1200px) { .af-navbar > .container { max-width: 1280px; } }
@media (min-width: 1400px) { .af-navbar > .container { max-width: 1380px; } }
@media (min-width: 1600px) { .af-navbar > .container { max-width: 1540px; } }
@media (min-width: 1800px) { .af-navbar > .container { max-width: 1680px; } }

/* ----- Brand ----- */
.af-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--af-font-display);
  font-weight: 800;
  color: var(--af-primary) !important;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  flex-shrink: 0;       /* never let the brand clip */
  white-space: nowrap;
}
.af-brand-mark {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--af-primary), var(--af-secondary));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: var(--af-shadow-sm);
  flex-shrink: 0;
}
.af-brand-text { display: flex; flex-direction: column; line-height: 1; }
.af-brand-text span:first-child { font-size: 1.15rem; }
.af-brand-text span:last-child {
  font-size: .65rem;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--af-muted);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ----- Navigation list ----- */
.navbar-collapse#afMainNav {
  /* Let the collapsible region take the remaining width and host the nav + CTA.
     min-width:0 is essential — without it, flex children can't shrink below content size. */
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.af-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;   /* push nav toward the CTA group */
  flex-wrap: nowrap;
}
.af-nav .nav-item { margin: 0 2px; }
.af-nav .nav-link {
  color: var(--af-ink) !important;
  font-weight: 600;
  font-family: var(--af-font-display);
  font-size: .94rem;
  padding: 8px 12px !important;
  border-radius: var(--af-r-sm);
  transition: all var(--af-t-base) var(--af-ease);
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.af-nav .nav-link .nav-ic {
  font-size: 1rem;
  color: var(--af-muted);
  transition: transform .25s var(--af-ease), color .25s var(--af-ease);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.af-nav .nav-link:hover .nav-ic,
.af-nav .nav-link.active .nav-ic {
  color: var(--af-secondary);
  transform: translateY(-1px) scale(1.08);
}
.af-nav .nav-link:hover, .af-nav .nav-link.active {
  color: var(--af-secondary) !important;
  background: var(--af-surface-2);
}
.af-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 12px; right: 12px;
  height: 2px;
  background: var(--af-accent);
  border-radius: 2px;
}

.af-nav .dropdown-menu {
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-md);
  box-shadow: var(--af-shadow-md);
  padding: 8px;
  margin-top: 6px !important;
  min-width: 260px;
}
.af-nav .dropdown-item {
  padding: 10px 14px;
  border-radius: var(--af-r-sm);
  font-weight: 500;
  font-size: .92rem;
  color: var(--af-text);
}
.af-nav .dropdown-item:hover, .af-nav .dropdown-item:focus {
  background: var(--af-surface-2);
  color: var(--af-secondary);
}

/* ----- CTA group (phone + button) ----- */
.af-header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;       /* CTA must never clip */
  margin-left: auto;    /* sit on the right edge of the collapse region */
}
.af-phone-cta {
  display: flex; align-items: center; gap: 10px;
  color: var(--af-ink);
  font-family: var(--af-font-display);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.af-phone-cta:hover { color: var(--af-secondary); }
.af-phone-cta .phone-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--af-surface-2);
  display: grid; place-items: center;
  color: var(--af-secondary);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.af-phone-cta .phone-text { display: flex; flex-direction: column; line-height: 1.1; }
.af-phone-cta .phone-text small { font-size: .68rem; color: var(--af-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.af-phone-cta .phone-text strong { font-size: 1rem; }

/* Header CTA button — slightly tighter than full .btn so it fits the nav row */
.af-header-cta .btn {
  padding: 11px 20px;
  font-size: .9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.af-toggler {
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-sm);
  padding: 8px 10px;
  background: #fff;
}
.af-toggler:focus { box-shadow: 0 0 0 3px rgba(25,118,210,.25); }
.af-toggler span {
  display: block;
  width: 22px; height: 2px;
  background: var(--af-ink);
  margin: 5px 0;
  transition: transform var(--af-t-base) var(--af-ease);
}

/* ---------- 7. HERO — Premium full-bleed slider ---------- */
.af-hero {
  position: relative;
  background: var(--af-primary-dark);
  color: #fff;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

/* The Bootstrap carousel inherits hero dimensions */
.af-hero .carousel,
.af-hero .carousel-inner,
.af-hero .carousel-item { height: 100%; }
.af-hero .carousel-item {
  /* Bootstrap uses transform on .carousel-item which clips fixed children — use opacity fade instead */
  transition: opacity .9s var(--af-ease-out), visibility .9s var(--af-ease-out);
}

.af-hero-slide {
  position: relative;
  min-height: clamp(560px, 78vh, 760px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

/* Background photo, scaled & cropped */
.af-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.05);
  transition: transform 10s var(--af-ease-out);
}
.carousel-item.active .af-hero-bg {
  transform: scale(1.12);   /* slow Ken-Burns drift while slide is active */
}

/* Dark gradient overlay for legible text */
.af-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgba(6,26,53,.92) 0%, rgba(11,37,69,.78) 38%, rgba(11,37,69,.35) 72%, rgba(11,37,69,.25) 100%),
    linear-gradient(180deg, transparent 60%, rgba(6,26,53,.55) 100%);
}
/* Subtle grid pattern over the overlay */
.af-hero-grid {
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 80% 50%, #000 25%, transparent 75%);
  pointer-events: none;
}

/* Slide content column */
.af-hero-content {
  max-width: 680px;
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 6vw, 4rem) 0;
}
.af-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--af-r-full);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--af-accent);
  backdrop-filter: blur(8px);
  margin-bottom: 1.4rem;
}
.af-hero-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--af-accent); box-shadow: 0 0 0 4px rgba(245,158,11,.22);
  animation: heroDotPulse 2.4s var(--af-ease) infinite;
}
@keyframes heroDotPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(245,158,11,.22); }
  50%     { box-shadow: 0 0 0 8px rgba(245,158,11,.05); }
}

.af-hero-content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}
.af-hero-content h1 .hl {
  background: linear-gradient(90deg, #FBBF24, #F59E0B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.af-hero-content .lead {
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 620px;
  margin-bottom: 2rem;
  line-height: 1.65;
}
.af-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.af-hero-cta .btn-af-accent { padding: 15px 28px; font-size: 1rem; }
.af-hero-cta .btn-light-glass {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  padding: 15px 28px;
  font-size: 1rem;
}
.af-hero-cta .btn-light-glass:hover {
  background: #fff;
  color: var(--af-primary);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Floating product card (right side of each slide) */
.af-hero-product {
  position: absolute;
  right: clamp(20px, 4vw, 60px);
  bottom: clamp(80px, 12vw, 130px);
  width: clamp(220px, 24vw, 320px);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-radius: var(--af-r-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.3);
  z-index: 3;
  transform: rotate(-2deg);
  transition: transform .4s var(--af-ease);
}
.af-hero-product:hover { transform: rotate(0deg) translateY(-4px); }
.af-hero-product-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.af-hero-product-meta {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.af-hero-product-meta strong {
  font-family: var(--af-font-display);
  color: var(--af-primary);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  display: block;
}
.af-hero-product-meta small {
  display: block;
  color: var(--af-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 3px;
  font-weight: 600;
}
.af-hero-product-meta .chev {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--af-accent);
  color: var(--af-ink);
  display: grid; place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Slide indicators — vertical line on the right edge */
.af-hero-indicators {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  z-index: 4;
}
.af-hero-indicators button {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  color: rgba(255,255,255,.5);
  font-family: var(--af-font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-indent: 0;
  height: auto;
  width: auto;
  opacity: 1;
  cursor: pointer;
  transition: color .3s var(--af-ease);
}
.af-hero-indicators button::before {
  content: "";
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,.3);
  transition: all .3s var(--af-ease);
  display: block;
  border-radius: 2px;
}
.af-hero-indicators button.active {
  color: var(--af-accent);
}
.af-hero-indicators button.active::before {
  width: 56px;
  background: var(--af-accent);
  height: 3px;
}
.af-hero-indicators button:hover::before { background: #fff; width: 40px; }

/* Slide controls — chevron arrows at the bottom-left */
.af-hero-controls {
  position: absolute;
  left: clamp(20px, 4vw, 60px);
  bottom: clamp(28px, 4vw, 50px);
  display: flex;
  gap: 10px;
  z-index: 4;
}
.af-hero-controls button {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .25s var(--af-ease);
  backdrop-filter: blur(8px);
}
.af-hero-controls button:hover {
  background: var(--af-accent);
  color: var(--af-ink);
  border-color: var(--af-accent);
  transform: translateY(-2px);
}

/* Slide counter — "01 / 04" */
.af-hero-counter {
  position: absolute;
  bottom: clamp(28px, 4vw, 50px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--af-font-display);
  color: rgba(255,255,255,.6);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.af-hero-counter .now { color: var(--af-accent); font-size: 1.4rem; font-weight: 800; }
.af-hero-counter .total { color: rgba(255,255,255,.4); font-size: .88rem; margin-left: 4px; }

/* Floating stats card straddling hero and next section */
.af-hero-stats-card {
  position: relative;
  z-index: 10;
  margin: -60px auto -40px;
  max-width: 1180px;
  background: #fff;
  border-radius: var(--af-r-xl);
  box-shadow: 0 30px 70px -20px rgba(11,37,69,.25), 0 10px 30px -10px rgba(11,37,69,.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.af-hero-stats-card .stat {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--af-line);
  position: relative;
}
.af-hero-stats-card .stat:last-child { border-right: 0; }
.af-hero-stats-card .stat-val {
  font-family: var(--af-font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--af-primary);
  line-height: 1;
  display: block;
}
.af-hero-stats-card .stat-lbl {
  display: block;
  margin-top: 8px;
  color: var(--af-muted);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.af-hero-stats-card .stat-icon {
  width: 42px; height: 42px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(25,118,210,.1), rgba(245,158,11,.08));
  display: grid; place-items: center;
  color: var(--af-secondary);
  font-size: 1.1rem;
}

@media (max-width: 991.98px) {
  .af-hero-slide { min-height: 560px; }
  .af-hero-product { display: none; }
  .af-hero-indicators {
    flex-direction: row;
    right: auto;
    left: 50%;
    top: auto;
    bottom: 90px;
    transform: translateX(-50%);
  }
  .af-hero-indicators button .label { display: none; }
  .af-hero-counter { display: none; }
  .af-hero-stats-card { grid-template-columns: repeat(2, 1fr); margin: -50px 16px -30px; }
  .af-hero-stats-card .stat { border-right: 0; border-bottom: 1px solid var(--af-line); }
  .af-hero-stats-card .stat:nth-child(odd) { border-right: 1px solid var(--af-line); }
  .af-hero-stats-card .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 575.98px) {
  .af-hero-slide { min-height: 520px; }
  .af-hero-content h1 { font-size: 2rem; }
  .af-hero-cta .btn { width: 100%; justify-content: center; }
  .af-hero-controls { gap: 8px; }
  .af-hero-controls button { width: 44px; height: 44px; }
}

/* ---------- 8. PAGE HEADER (interior pages) ---------- */
.af-page-header {
  position: relative;
  background: linear-gradient(135deg, var(--af-primary-dark), var(--af-primary));
  color: #fff;
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.af-page-header::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 50% at 75% 30%, rgba(25,118,210,.35), transparent 60%);
}
.af-page-header::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.af-page-header > .container { position: relative; z-index: 1; }
.af-page-header h1 { color: #fff; margin-bottom: var(--af-s-3); }
.af-page-header p { color: rgba(255,255,255,.78); max-width: 680px; font-size: 1.075rem; }

.af-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  margin-bottom: var(--af-s-4);
  font-weight: 500;
}
.af-breadcrumb a { color: rgba(255,255,255,.9); }
.af-breadcrumb a:hover { color: var(--af-accent); }
.af-breadcrumb .sep { color: rgba(255,255,255,.35); }

/* ---------- 9. CARDS ---------- */
.af-card {
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-lg);
  overflow: hidden;
  transition: all var(--af-t-base) var(--af-ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.af-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--af-shadow-lg);
  border-color: transparent;
}

.af-card .af-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--af-surface-2);
}
.af-card .af-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--af-ease-out);
}
.af-card:hover .af-card-media img { transform: scale(1.07); }

.af-card .af-card-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--af-accent); color: var(--af-ink);
  font-size: .72rem; font-weight: 700;
  padding: 5px 10px; border-radius: var(--af-r-sm);
  text-transform: uppercase; letter-spacing: .08em;
}

.af-card .af-card-body { padding: var(--af-s-5); flex: 1; display: flex; flex-direction: column; }
.af-card h3, .af-card h4 { margin-bottom: 8px; font-size: 1.15rem; }
.af-card p { color: var(--af-muted); font-size: .92rem; margin-bottom: var(--af-s-4); flex: 1; }
.af-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--af-s-3);
  border-top: 1px solid var(--af-line);
}
.af-price { color: var(--af-primary); font-weight: 700; font-family: var(--af-font-display); }
.af-price small { color: var(--af-muted); font-weight: 400; font-size: .8rem; }

/* ---------- 10. FEATURE / ICON CARDS ---------- */
.af-feature {
  background: #fff;
  border-radius: var(--af-r-lg);
  padding: var(--af-s-6);
  border: 1px solid var(--af-line);
  height: 100%;
  transition: all var(--af-t-base) var(--af-ease);
  position: relative;
  overflow: hidden;
}
.af-feature::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--af-secondary), var(--af-accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--af-t-slow) var(--af-ease);
}
.af-feature:hover { box-shadow: var(--af-shadow-md); transform: translateY(-4px); border-color: transparent; }
.af-feature:hover::before { transform: scaleX(1); }

.af-feature-icon {
  width: 56px; height: 56px;
  border-radius: var(--af-r-md);
  background: linear-gradient(135deg, rgba(25,118,210,.12), rgba(25,118,210,.04));
  display: grid; place-items: center;
  color: var(--af-secondary);
  font-size: 1.5rem;
  margin-bottom: var(--af-s-4);
}
.af-feature h4 { font-size: 1.15rem; margin-bottom: 10px; }
.af-feature p { color: var(--af-muted); font-size: .92rem; margin: 0; }

.af-feature.af-feature-dark {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
.af-feature.af-feature-dark p { color: rgba(255,255,255,.75); }
.af-feature.af-feature-dark .af-feature-icon { background: rgba(245,158,11,.18); color: var(--af-accent); }

/* ---------- 11. STATS BAND ---------- */
.af-stats-band {
  background: linear-gradient(135deg, var(--af-secondary), var(--af-primary));
  color: #fff;
  padding: var(--af-s-7) 0;
  position: relative;
  overflow: hidden;
}
.af-stats-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}
.af-stat-item { text-align: center; padding: var(--af-s-3) 0; position: relative; z-index: 1; }
.af-stat-item .num {
  font-family: var(--af-font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  color: var(--af-accent);
  display: block; line-height: 1;
}
.af-stat-item .lbl {
  display: block;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  margin-top: 10px;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .12em;
}

/* ---------- 12. CTA STRIP ---------- */
.af-cta-strip {
  background:
    linear-gradient(135deg, rgba(11,37,69,.92), rgba(25,118,210,.92));
  color: #fff;
  border-radius: var(--af-r-xl);
  padding: var(--af-s-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.af-cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(40% 40% at 80% 20%, rgba(245,158,11,.3), transparent 70%);
}
.af-cta-strip > * { position: relative; z-index: 1; }
.af-cta-strip h2 { color: #fff; }
.af-cta-strip p { color: rgba(255,255,255,.85); max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- 13. PROCESS / TIMELINE ---------- */
.af-process { position: relative; }
.af-step {
  position: relative;
  padding: var(--af-s-6) var(--af-s-5);
  background: #fff;
  border-radius: var(--af-r-lg);
  border: 1px solid var(--af-line);
  height: 100%;
  transition: all var(--af-t-base) var(--af-ease);
}
.af-step:hover { box-shadow: var(--af-shadow-md); transform: translateY(-4px); }
.af-step-num {
  position: absolute;
  top: -22px; left: var(--af-s-5);
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--af-primary);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--af-font-display);
  font-weight: 800; font-size: 1.1rem;
  box-shadow: var(--af-shadow-sm);
}
.af-step-num::after {
  content: ""; position: absolute; inset: 4px;
  border: 2px solid var(--af-accent);
  border-radius: 8px; opacity: .4;
}
.af-step h4 { margin-top: var(--af-s-3); font-size: 1.1rem; }
.af-step p { color: var(--af-muted); font-size: .92rem; margin: 0; }

/* ---------- 14. INDUSTRY GRID ---------- */
.af-industry {
  background: #fff;
  border-radius: var(--af-r-lg);
  padding: var(--af-s-6) var(--af-s-5);
  border: 1px solid var(--af-line);
  text-align: center;
  transition: all var(--af-t-base) var(--af-ease);
  height: 100%;
}
.af-industry:hover {
  background: linear-gradient(180deg, var(--af-primary), var(--af-primary-dark));
  border-color: var(--af-primary);
  transform: translateY(-6px);
  box-shadow: var(--af-shadow-md);
}
.af-industry:hover h4, .af-industry:hover p, .af-industry:hover .af-industry-icon { color: #fff; }
.af-industry:hover .af-industry-icon { background: rgba(255,255,255,.12); }
.af-industry-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  margin: 0 auto var(--af-s-4);
  background: var(--af-surface-2);
  color: var(--af-secondary);
  display: grid; place-items: center;
  font-size: 1.8rem;
  transition: all var(--af-t-base) var(--af-ease);
}
.af-industry h4 { font-size: 1.05rem; margin-bottom: 6px; transition: color var(--af-t-base) var(--af-ease); }
.af-industry p { font-size: .85rem; color: var(--af-muted); margin: 0; transition: color var(--af-t-base) var(--af-ease); }

/* ---------- 15. TESTIMONIAL ---------- */
.af-testimonial {
  background: #fff;
  border-radius: var(--af-r-lg);
  padding: var(--af-s-6);
  border: 1px solid var(--af-line);
  height: 100%;
  position: relative;
}
.af-testimonial::before {
  content: "“";
  position: absolute;
  top: -14px; left: 24px;
  font-family: var(--af-font-display);
  font-size: 5rem;
  color: var(--af-accent);
  line-height: 1;
  font-weight: 800;
}
.af-testimonial p { font-style: italic; color: var(--af-text); font-size: 1rem; }
.af-test-author {
  display: flex; align-items: center; gap: 14px;
  margin-top: var(--af-s-4);
  padding-top: var(--af-s-4);
  border-top: 1px solid var(--af-line);
}
.af-test-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--af-secondary), var(--af-primary));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--af-font-display);
  font-weight: 700; font-size: 1.1rem;
  flex-shrink: 0;
}
.af-test-author strong { display: block; color: var(--af-ink); font-family: var(--af-font-display); }
.af-test-author small { color: var(--af-muted); }
.af-test-stars { color: var(--af-accent); margin-bottom: 8px; }

/* ---------- 16. CERTIFICATION ---------- */
.af-cert {
  background: #fff;
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-lg);
  padding: var(--af-s-5);
  text-align: center;
  transition: all var(--af-t-base) var(--af-ease);
  height: 100%;
}
.af-cert:hover { box-shadow: var(--af-shadow-md); transform: translateY(-4px); border-color: var(--af-accent); }
.af-cert-badge {
  width: 88px; height: 88px;
  margin: 0 auto var(--af-s-4);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--af-surface-2), #fff);
  border: 2px solid var(--af-line);
  display: grid; place-items: center;
  font-family: var(--af-font-display);
  font-size: .75rem;
  font-weight: 800;
  color: var(--af-primary);
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  padding: 8px;
}
.af-cert h4 { font-size: 1rem; margin-bottom: 4px; }
.af-cert p { color: var(--af-muted); font-size: .85rem; margin: 0; }

/* ---------- 17. FOOTER ---------- */
.af-footer {
  background: linear-gradient(180deg, var(--af-primary-dark), #050f1f);
  color: rgba(255,255,255,.7);
  padding: var(--af-s-8) 0 var(--af-s-5);
  position: relative;
}
.af-footer h5 {
  color: #fff;
  font-family: var(--af-font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--af-s-5);
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}
.af-footer h5::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 36px; height: 2px;
  background: var(--af-accent);
}
.af-footer a { color: rgba(255,255,255,.7); }
.af-footer a:hover { color: var(--af-accent); }
.af-footer ul { list-style: none; padding: 0; margin: 0; }
.af-footer ul li { margin-bottom: 10px; font-size: .92rem; }
.af-footer ul li a { display: inline-flex; align-items: center; gap: 8px; }
.af-footer ul li a::before { content: "›"; color: var(--af-accent); font-weight: 700; }

.af-footer .af-brand { color: #fff !important; margin-bottom: var(--af-s-4); }
.af-footer .af-brand-text small { color: rgba(255,255,255,.6); }
.af-footer .footer-about { font-size: .92rem; color: rgba(255,255,255,.7); }

.af-contact-list { display: flex; flex-direction: column; gap: 14px; }
.af-contact-item { display: flex; gap: 14px; align-items: flex-start; font-size: .92rem; }
.af-contact-item i {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--af-accent);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.af-contact-item strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.af-contact-item a { color: rgba(255,255,255,.85); }

.af-socials { display: flex; gap: 10px; margin-top: var(--af-s-4); }
.af-socials a {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  color: #fff !important;
  font-size: .95rem;
  transition: all var(--af-t-base) var(--af-ease);
}
.af-socials a:hover {
  background: var(--af-accent);
  color: var(--af-ink) !important;
  transform: translateY(-2px);
}

.af-footer-bottom {
  margin-top: var(--af-s-7);
  padding-top: var(--af-s-5);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: var(--af-s-3);
  font-size: .86rem;
}
.af-footer-bottom .legal-links { display: flex; gap: var(--af-s-4); flex-wrap: wrap; }

/* ---------- 18. FORMS ---------- */
.af-form-card {
  background: #fff;
  border-radius: var(--af-r-xl);
  padding: var(--af-s-7);
  border: 1px solid var(--af-line);
  box-shadow: var(--af-shadow-md);
}
.af-form-card.compact { padding: var(--af-s-6); }

.form-label {
  font-weight: 600;
  font-family: var(--af-font-display);
  font-size: .88rem;
  color: var(--af-ink);
  margin-bottom: 8px;
}
.form-control, .form-select {
  border: 1.5px solid var(--af-line);
  border-radius: var(--af-r-md);
  padding: 12px 16px;
  font-size: .95rem;
  font-family: var(--af-font-body);
  background: #fff;
  transition: all var(--af-t-base) var(--af-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--af-secondary);
  box-shadow: 0 0 0 4px rgba(25,118,210,.12);
}
textarea.form-control { min-height: 120px; resize: vertical; }

.form-feedback {
  font-size: .82rem; color: var(--af-muted); margin-top: 6px;
}

/* ---------- 19. ACCORDION (FAQ) ---------- */
.accordion-item { border: 1px solid var(--af-line); border-radius: var(--af-r-md) !important; margin-bottom: 12px; overflow: hidden; }
.accordion-button {
  font-family: var(--af-font-display);
  font-weight: 600;
  color: var(--af-ink);
  background: #fff;
  padding: 18px 22px;
  font-size: 1rem;
}
.accordion-button:not(.collapsed) { background: var(--af-surface-2); color: var(--af-primary); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(25,118,210,.18); }
.accordion-body { padding: 4px 22px 22px; color: var(--af-text); font-size: .95rem; }

/* ---------- 20. PRODUCT DETAIL ---------- */
.product-gallery-main {
  background: var(--af-surface-2);
  border-radius: var(--af-r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--af-line);
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--af-s-4); }
.product-price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: var(--af-s-4);
  padding-bottom: var(--af-s-4);
  border-bottom: 1px solid var(--af-line);
}
.product-price .amount { font-family: var(--af-font-display); font-weight: 800; font-size: 2rem; color: var(--af-primary); }
.product-price .unit { color: var(--af-muted); font-size: 1rem; }

.product-spec-table { width: 100%; }
.product-spec-table tr { border-bottom: 1px solid var(--af-line); }
.product-spec-table td { padding: 12px 0; font-size: .94rem; vertical-align: top; }
.product-spec-table td:first-child {
  font-weight: 600;
  color: var(--af-ink);
  width: 40%;
  font-family: var(--af-font-display);
}
.product-spec-table td:last-child { color: var(--af-text); }

.product-features-list { list-style: none; padding: 0; margin: 0; }
.product-features-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  font-size: .95rem;
}
.product-features-list li i { color: var(--af-success); margin-top: 4px; }

/* ---------- 21. CHECK LIST ---------- */
.af-check-list { list-style: none; padding: 0; margin: 0; }
.af-check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0; font-size: .98rem; color: var(--af-text);
}
.af-check-list li i {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(16,185,129,.12);
  color: var(--af-success);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: .72rem;
  margin-top: 2px;
}

/* ---------- 22. GALLERY ---------- */
.af-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--af-s-4);
}
.af-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--af-r-md);
  aspect-ratio: 4 / 3;
  background: var(--af-surface-2);
  cursor: pointer;
}
.af-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--af-ease-out); }
.af-gallery-item:hover img { transform: scale(1.08); }
.af-gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,37,69,.7));
  opacity: 0; transition: opacity var(--af-t-base) var(--af-ease);
}
.af-gallery-item:hover::after { opacity: 1; }
.af-gallery-item .cap {
  position: absolute; bottom: 14px; left: 16px; right: 16px;
  color: #fff; font-weight: 600; font-family: var(--af-font-display);
  opacity: 0; transform: translateY(8px);
  transition: all var(--af-t-base) var(--af-ease);
  z-index: 1;
}
.af-gallery-item:hover .cap { opacity: 1; transform: translateY(0); }

/* ---------- 23. CONTACT INFO BOX ---------- */
.af-contact-card {
  background: #fff;
  border-radius: var(--af-r-lg);
  border: 1px solid var(--af-line);
  padding: var(--af-s-6) var(--af-s-5);
  height: 100%;
  transition: all var(--af-t-base) var(--af-ease);
  text-align: center;
}
.af-contact-card:hover { box-shadow: var(--af-shadow-md); transform: translateY(-4px); }
.af-contact-card-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--af-secondary), var(--af-primary));
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto var(--af-s-4);
  font-size: 1.5rem;
}
.af-contact-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.af-contact-card p, .af-contact-card a { color: var(--af-text); font-size: .95rem; margin: 0; }
.af-contact-card a:hover { color: var(--af-secondary); }

/* ---------- 24. MAP ---------- */
.af-map {
  border-radius: var(--af-r-lg);
  overflow: hidden;
  border: 1px solid var(--af-line);
  height: 420px;
  box-shadow: var(--af-shadow-sm);
}
.af-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 25. BACK TO TOP ---------- */
.af-back-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--af-primary);
  color: #fff;
  display: grid; place-items: center;
  border: 0;
  cursor: pointer;
  box-shadow: var(--af-shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all var(--af-t-base) var(--af-ease);
  z-index: 1040;
}
.af-back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.af-back-top:hover { background: var(--af-secondary); }

/* ---------- 26. WHATSAPP FLOAT ---------- */
.af-whatsapp {
  position: fixed;
  bottom: 24px; left: 24px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.4);
  font-size: 1.5rem;
  z-index: 1040;
  transition: transform var(--af-t-base) var(--af-ease);
}
.af-whatsapp:hover { color: #fff; transform: scale(1.08); }
.af-whatsapp::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: #25D366;
  animation: pulse 2s var(--af-ease) infinite;
  z-index: -1;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- 27. LOGO LOOP / TRUST BAR ---------- */
.af-trust-bar {
  padding: var(--af-s-6) 0;
  background: var(--af-surface);
  border-top: 1px solid var(--af-line);
  border-bottom: 1px solid var(--af-line);
}
.af-trust-bar .trust-lbl {
  text-align: center;
  font-family: var(--af-font-display);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--af-muted);
  margin-bottom: var(--af-s-5);
  font-weight: 600;
}
.af-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--af-s-5);
  align-items: center;
}
.af-trust-grid .trust-item {
  font-family: var(--af-font-display);
  font-weight: 700;
  color: var(--af-muted);
  text-align: center;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: 12px;
  border-radius: var(--af-r-sm);
  transition: color var(--af-t-base) var(--af-ease);
}
.af-trust-grid .trust-item:hover { color: var(--af-primary); }

/* ---------- 28. SECTION DIVIDER PATTERN ---------- */
.af-pattern-bg {
  position: relative;
  background: var(--af-surface);
}
.af-pattern-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,37,69,.08) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}
.af-pattern-bg > .container { position: relative; }

/* ---------- 29. MISC ---------- */
.text-shadow-sm { text-shadow: 0 2px 6px rgba(0,0,0,.18); }
.list-unstyled-pad li { padding: 6px 0; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.rounded-xl { border-radius: var(--af-r-xl); }
.shadow-soft { box-shadow: var(--af-shadow-md); }

/* tags */
.af-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--af-surface-2);
  color: var(--af-primary);
  border-radius: var(--af-r-full);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--af-font-display);
}

/* ---------- 30. UTILITIES ---------- */
.lh-relaxed { line-height: 1.75; }
.fs-large { font-size: 1.075rem; }

/* Print */
@media print {
  .af-header, .af-footer, .af-back-top, .af-whatsapp, .announce-bar { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ============================================================
   EXTENDED COMPONENTS — Pages part 2
   ============================================================ */

/* Filter bar (Products / Gallery) */
.af-filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1.5rem 0 1rem; }
.af-filter { background:#fff; border:1.5px solid var(--af-border,#E5E9F0); color:var(--af-navy,#0B2545); padding:.55rem 1.2rem; border-radius:999px; font-weight:600; font-size:.92rem; cursor:pointer; transition:all .25s ease; }
.af-filter:hover { border-color:var(--af-blue,#1976D2); color:var(--af-blue,#1976D2); }
.af-filter.active { background:var(--af-navy,#0B2545); color:#fff; border-color:var(--af-navy,#0B2545); }

/* Product detail */
.af-product-detail .af-product-gallery { position:relative; background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:24px; padding:2rem; overflow:hidden; box-shadow:0 12px 40px -20px rgba(11,37,69,.18); }
.af-product-main img { width:100%; height:auto; max-height:480px; object-fit:contain; border-radius:14px; }
.af-product-badge { position:absolute; top:1.25rem; left:1.25rem; background:var(--af-amber,#F59E0B); color:#fff; padding:.45rem .9rem; border-radius:999px; font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:.45rem; box-shadow:0 6px 20px rgba(245,158,11,.4); }
.af-product-title { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800; color:var(--af-navy,#0B2545); margin:.5rem 0 1rem; line-height:1.18; }
.af-product-meta { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; font-size:.92rem; color:#4a5568; margin-bottom:1.25rem; }
.af-product-meta .af-rating { color:#F59E0B; font-weight:700; }
.af-product-meta .af-divider { color:#cbd5e0; }
.af-product-desc { font-size:1.02rem; color:#4a5568; line-height:1.75; margin-bottom:1.5rem; }
.af-price-box { display:flex; align-items:center; gap:1.25rem; background:linear-gradient(135deg,#F7FAFC 0%,#EDF2F7 100%); border:1px solid var(--af-border,#E5E9F0); border-radius:16px; padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.af-price-box small { display:block; color:#718096; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.af-price-lg { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:1.65rem; font-weight:800; color:var(--af-navy,#0B2545); display:inline-block; }
.af-price-divider { width:1px; height:36px; background:#cbd5e0; }
.af-product-cta { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.5rem; }
.btn-af-whatsapp { background:#25D366; color:#fff; padding:.7rem 1.4rem; border-radius:10px; font-weight:600; border:0; display:inline-flex; align-items:center; gap:.5rem; transition:all .25s ease; }
.btn-af-whatsapp:hover { background:#1ebd5b; color:#fff; transform:translateY(-2px); }
.af-product-trust { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.af-product-trust li { display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:#4a5568; font-weight:600; }
.af-product-trust li i { color:var(--af-blue,#1976D2); font-size:1.1rem; }
.af-product-tabs { margin-top:3.5rem; background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:20px; overflow:hidden; }
.af-product-tabs .nav-tabs { border-bottom:1px solid var(--af-border,#E5E9F0); padding:0 1.5rem; background:#F7FAFC; }
.af-product-tabs .nav-link { color:#4a5568; font-weight:600; padding:1rem 1.25rem; border:0; background:transparent; border-bottom:3px solid transparent; }
.af-product-tabs .nav-link.active { color:var(--af-navy,#0B2545); border-bottom-color:var(--af-amber,#F59E0B); background:transparent; }
.af-product-tabs .tab-content { padding:2rem 2rem 2.5rem; }
.af-product-tabs h3 { color:var(--af-navy,#0B2545); margin-bottom:1.25rem; font-size:1.35rem; font-weight:700; }
.af-feature-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.85rem; }
.af-feature-list li { display:flex; gap:.7rem; padding:.85rem 1rem; background:#F7FAFC; border-radius:10px; align-items:flex-start; }
.af-feature-list li i { color:#22C55E; font-size:1.25rem; flex-shrink:0; margin-top:.1rem; }
.af-spec-table { width:100%; border-collapse:collapse; }
.af-spec-table th, .af-spec-table td { padding:.85rem 1.1rem; border-bottom:1px solid var(--af-border,#E5E9F0); text-align:left; font-size:.94rem; }
.af-spec-table th { width:35%; color:var(--af-navy,#0B2545); font-weight:700; background:#F7FAFC; }
.af-spec-table td { color:#4a5568; }
.af-app-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.af-tag { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1.5px solid var(--af-border,#E5E9F0); padding:.5rem 1rem; border-radius:999px; font-size:.88rem; color:var(--af-navy,#0B2545); font-weight:600; }
.af-tag i { color:var(--af-amber,#F59E0B); }
.af-tag-sm { display:inline-flex; align-items:center; gap:.35rem; background:rgba(25,118,210,.08); color:var(--af-blue,#1976D2); padding:.35rem .8rem; border-radius:999px; font-size:.82rem; font-weight:600; }
.af-tag-sm i { color:var(--af-blue,#1976D2); }
.af-card-compact { display:block; text-decoration:none; transition:all .3s ease; }
.af-card-compact:hover { transform:translateY(-6px); }
.af-card-compact .af-card-media img { height:200px; }
.af-card-compact h4 { font-size:1.05rem; margin:0 0 .5rem; color:var(--af-navy,#0B2545); }
.af-link { color:var(--af-blue,#1976D2); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; transition:gap .2s ease; }
.af-link:hover { gap:.6rem; color:var(--af-amber,#F59E0B); }
.af-mini { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:14px; padding:1.5rem 1.25rem; text-align:center; height:100%; }
.af-mini i { font-size:2rem; color:var(--af-blue,#1976D2); margin-bottom:.75rem; display:block; }
.af-mini h5 { font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.4rem; }
.af-mini p { color:#4a5568; margin:0; font-size:.92rem; }

/* Process flow */
.af-process-flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.af-process-step { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:16px; padding:2rem 1.5rem; text-align:center; position:relative; transition:all .3s ease; }
.af-process-step:hover { transform:translateY(-6px); box-shadow:0 20px 50px -25px rgba(11,37,69,.25); border-color:var(--af-blue,#1976D2); }
.af-process-num { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--af-navy,#0B2545); color:#fff; padding:.35rem .8rem; border-radius:999px; font-weight:800; font-size:.85rem; letter-spacing:.04em; }
.af-process-icon { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#1976D2 0%,#0B2545 100%); color:#fff; font-size:1.7rem; display:flex; align-items:center; justify-content:center; margin:.5rem auto 1.1rem; box-shadow:0 10px 30px -10px rgba(25,118,210,.5); }
.af-process-step h4 { font-size:1.05rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.5rem; }
.af-process-step p { color:#4a5568; font-size:.92rem; margin:0; line-height:1.6; }

/* Pillars */
.af-pillar { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:16px; padding:2rem 1.5rem; height:100%; position:relative; overflow:hidden; transition:all .3s ease; }
.af-pillar::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,var(--af-blue,#1976D2),var(--af-amber,#F59E0B)); }
.af-pillar:hover { transform:translateY(-6px); box-shadow:0 20px 50px -25px rgba(11,37,69,.25); }
.af-pillar-num { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:2.4rem; font-weight:800; color:var(--af-amber,#F59E0B); opacity:.5; line-height:1; margin-bottom:1rem; }
.af-pillar h4 { font-size:1.15rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.6rem; }
.af-pillar p { color:#4a5568; margin:0; font-size:.95rem; line-height:1.65; }

/* Testing cards */
.af-test-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:16px; padding:1.75rem; height:100%; transition:all .3s ease; }
.af-test-card:hover { transform:translateY(-4px); border-color:var(--af-blue,#1976D2); box-shadow:0 16px 40px -20px rgba(11,37,69,.2); }
.af-test-icon { width:54px; height:54px; border-radius:12px; background:rgba(25,118,210,.12); color:var(--af-blue,#1976D2); font-size:1.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.af-test-card h4 { font-size:1.1rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.5rem; }
.af-test-card p { color:#4a5568; font-size:.93rem; margin-bottom:.85rem; }
.af-standard { display:inline-block; background:#F7FAFC; color:var(--af-navy,#0B2545); padding:.3rem .75rem; border-radius:6px; font-size:.78rem; font-weight:600; }

/* Certification banners and cards */
.af-cert-banner { display:flex; gap:1.25rem; align-items:flex-start; background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:16px; padding:1.5rem; height:100%; transition:all .3s ease; }
.af-cert-banner:hover { transform:translateY(-3px); box-shadow:0 16px 40px -20px rgba(11,37,69,.2); }
.af-cert-banner-icon { width:54px; height:54px; flex-shrink:0; border-radius:12px; background:linear-gradient(135deg,var(--af-amber,#F59E0B) 0%,#FCA311 100%); color:#fff; font-size:1.5rem; display:flex; align-items:center; justify-content:center; }
.af-cert-banner h4 { font-size:1.1rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.4rem; }
.af-cert-banner p { color:#4a5568; margin:0; font-size:.93rem; }

.af-cert-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem 1.75rem; height:100%; text-align:center; position:relative; transition:all .3s ease; }
.af-cert-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px -25px rgba(11,37,69,.25); border-color:var(--af-amber,#F59E0B); }
.af-cert-icon { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,var(--af-navy,#0B2545) 0%,#1A365D 100%); color:var(--af-amber,#F59E0B); font-size:2.3rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; box-shadow:0 12px 30px -10px rgba(11,37,69,.4); }
.af-cert-card h3 { font-size:1.2rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.35rem; }
.af-cert-sub { display:block; font-size:.85rem; color:var(--af-blue,#1976D2); font-weight:600; margin-bottom:.85rem; }
.af-cert-card p { color:#4a5568; font-size:.93rem; margin:0; line-height:1.6; }

.af-compliance-note { display:flex; gap:1.5rem; background:linear-gradient(135deg,#FFF7ED 0%,#FFEDD5 100%); border:1px solid #FDBA74; border-radius:16px; padding:1.75rem; align-items:flex-start; }
.af-compliance-note > i { font-size:2rem; color:var(--af-amber,#F59E0B); flex-shrink:0; }
.af-compliance-note h4 { color:var(--af-navy,#0B2545); margin-bottom:.45rem; font-weight:700; }
.af-compliance-note p { color:#4a5568; margin:0; }

/* Industry rows */
.af-industry-list { display:flex; flex-direction:column; gap:2rem; margin-top:2rem; }
.af-industry-row { display:grid; grid-template-columns:80px 80px 1fr; gap:1.5rem; align-items:flex-start; background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem; transition:all .3s ease; }
.af-industry-row:hover { transform:translateY(-4px); box-shadow:0 20px 50px -25px rgba(11,37,69,.2); border-color:var(--af-blue,#1976D2); }
.af-industry-num { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:2.4rem; font-weight:800; color:var(--af-amber,#F59E0B); opacity:.4; line-height:1; }
.af-industry-icon { width:72px; height:72px; border-radius:14px; background:linear-gradient(135deg,#1976D2 0%,#0B2545 100%); color:#fff; font-size:2rem; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -12px rgba(25,118,210,.5); }
.af-industry-content h3 { font-size:1.35rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.6rem; }
.af-industry-content p { color:#4a5568; line-height:1.7; margin-bottom:1rem; }
.af-industry-meta { background:#F7FAFC; padding:.85rem 1.1rem; border-radius:10px; margin-bottom:1rem; font-size:.92rem; }
.af-industry-meta strong { color:var(--af-navy,#0B2545); display:block; margin-bottom:.2rem; }
.af-industry-meta span { color:#4a5568; }
.af-industry-tags { display:flex; flex-wrap:wrap; gap:.5rem; }

/* Gallery overlay */
.af-gallery-item { display:block; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; }
.af-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.af-gallery-item:hover img { transform:scale(1.08); }
.af-gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(11,37,69,.92) 0%,rgba(11,37,69,.3) 60%,transparent 100%); color:#fff; padding:1.5rem; display:flex; flex-direction:column; justify-content:flex-end; opacity:0; transition:opacity .35s ease; }
.af-gallery-item:hover .af-gallery-overlay { opacity:1; }
.af-gallery-cat { display:inline-block; background:var(--af-amber,#F59E0B); color:#fff; padding:.25rem .7rem; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; align-self:flex-start; margin-bottom:.6rem; }
.af-gallery-title { font-weight:700; font-size:1.05rem; }
.af-gallery-overlay > i { position:absolute; top:1.25rem; right:1.25rem; font-size:1.4rem; color:#fff; background:rgba(255,255,255,.15); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }

/* FAQ */
.af-faq-cat { margin-bottom:2.5rem; }
.af-faq-cat-title { font-size:1.4rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:1.25rem; display:flex; align-items:center; gap:.6rem; }
.af-faq-cat-title i { color:var(--af-amber,#F59E0B); }
.af-faq-cat .accordion-item { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:14px !important; margin-bottom:.85rem; overflow:hidden; }
.af-faq-cat .accordion-button { background:#fff; color:var(--af-navy,#0B2545); font-weight:600; font-size:1rem; padding:1.1rem 1.4rem; box-shadow:none; }
.af-faq-cat .accordion-button:not(.collapsed) { background:#F7FAFC; color:var(--af-blue,#1976D2); }
.af-faq-cat .accordion-button:focus { box-shadow:0 0 0 .2rem rgba(25,118,210,.15); }
.af-faq-cat .accordion-body { padding:0 1.4rem 1.25rem; color:#4a5568; line-height:1.7; }

.af-faq-sidebar { position:sticky; top:120px; }
.af-faq-help { background:linear-gradient(135deg,var(--af-navy,#0B2545) 0%,#1A365D 100%); color:#fff; border-radius:20px; padding:2rem; }
.af-faq-help h3 { color:#fff; margin-bottom:.5rem; font-size:1.25rem; font-weight:700; }
.af-faq-help > p { color:rgba(255,255,255,.78); margin-bottom:1.25rem; font-size:.95rem; }
.af-faq-link { display:flex; gap:.85rem; align-items:center; padding:.85rem 1rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#fff; text-decoration:none; margin-bottom:.6rem; transition:all .25s ease; }
.af-faq-link:hover { background:rgba(255,255,255,.12); color:#fff; transform:translateX(4px); }
.af-faq-link i { font-size:1.4rem; color:var(--af-amber,#F59E0B); }
.af-faq-link small { display:block; color:rgba(255,255,255,.6); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }
.af-faq-link strong { font-size:.96rem; }

/* Contact page */
.af-contact-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem 1.75rem; text-align:center; height:100%; transition:all .3s ease; }
.af-contact-card:hover { transform:translateY(-6px); border-color:var(--af-amber,#F59E0B); box-shadow:0 20px 50px -25px rgba(11,37,69,.25); }
.af-contact-icon { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--af-navy,#0B2545) 0%,#1A365D 100%); color:var(--af-amber,#F59E0B); font-size:1.7rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; }
.af-contact-card h3 { font-size:1.15rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.75rem; }
.af-contact-card p { color:#4a5568; font-size:.95rem; margin-bottom:1rem; line-height:1.65; }
.af-phone-large { display:inline-block; font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:1.3rem; font-weight:800; color:var(--af-blue,#1976D2); text-decoration:none; margin-top:.3rem; }

.af-form-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:22px; padding:2.5rem; box-shadow:0 12px 40px -20px rgba(11,37,69,.15); }
.af-form-title { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:1.65rem; font-weight:800; color:var(--af-navy,#0B2545); margin:.5rem 0 .65rem; }
.af-form-card > p { color:#4a5568; margin-bottom:1.5rem; }
.af-label { display:block; font-weight:600; font-size:.86rem; color:var(--af-navy,#0B2545); margin-bottom:.3rem; }
.af-input { border:1.5px solid var(--af-border,#E5E9F0); border-radius:10px; padding:.7rem 1rem; font-size:.95rem; transition:all .2s ease; background:#fff; }
.af-input:focus { border-color:var(--af-blue,#1976D2); box-shadow:0 0 0 .2rem rgba(25,118,210,.12); }
.af-form-msg { margin-top:1rem; padding:0; min-height:1.2rem; font-size:.92rem; }
.af-form-msg.is-success { color:#16A34A; padding:.85rem 1rem; background:#F0FDF4; border-radius:10px; border:1px solid #BBF7D0; }
.af-form-msg.is-error { color:#DC2626; padding:.85rem 1rem; background:#FEF2F2; border-radius:10px; border:1px solid #FECACA; }

.af-map-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:22px; padding:2rem; box-shadow:0 12px 40px -20px rgba(11,37,69,.15); height:100%; }
.af-map-card h3 { color:var(--af-navy,#0B2545); font-weight:700; margin-bottom:.5rem; }
.af-map-card > p { color:#4a5568; margin-bottom:1.25rem; }
.af-hours { margin-top:1.5rem; background:#F7FAFC; padding:1.25rem; border-radius:12px; }
.af-hours h4 { color:var(--af-navy,#0B2545); font-weight:700; font-size:1rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.45rem; }
.af-hours h4 i { color:var(--af-amber,#F59E0B); }
.af-hours ul { list-style:none; padding:0; margin:0; color:#4a5568; font-size:.93rem; }
.af-hours li { padding:.3rem 0; }

.af-inquiry-sidebar { background:linear-gradient(135deg,var(--af-navy,#0B2545) 0%,#1A365D 100%); color:#fff; border-radius:22px; padding:2.5rem; height:100%; }
.af-inquiry-sidebar h3 { color:#fff; font-weight:700; font-size:1.25rem; margin-bottom:1.25rem; }
.af-inquiry-sidebar hr { border-color:rgba(255,255,255,.15); margin:1.75rem 0; }
.af-checklist-lg { list-style:none; padding:0; margin:0; }
.af-checklist-lg li { display:flex; gap:.85rem; margin-bottom:1rem; align-items:flex-start; }
.af-checklist-lg li i { color:var(--af-amber,#F59E0B); font-size:1.3rem; flex-shrink:0; margin-top:.15rem; }
.af-checklist-lg li strong { display:block; color:#fff; font-size:.98rem; margin-bottom:.15rem; }
.af-checklist-lg li span { display:block; color:rgba(255,255,255,.72); font-size:.86rem; line-height:1.5; }
.af-inquiry-help h4 { color:#fff; font-size:1.05rem; font-weight:700; margin-bottom:1rem; }

/* Stat tiles */
.af-stat-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:14px; padding:1.25rem; text-align:center; }
.af-stat-card h3 { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:1.65rem; font-weight:800; color:var(--af-navy,#0B2545); margin-bottom:.2rem; }
.af-stat-card p { color:#4a5568; font-size:.88rem; margin:0; }

.af-stat-tile { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem 1.5rem; text-align:center; height:100%; }
.af-stat-tile h3 { font-family:var(--af-font-display,'Plus Jakarta Sans',sans-serif); font-size:2.6rem; font-weight:800; color:var(--af-navy,#0B2545); margin-bottom:.1rem; }
.af-stat-tile span { display:block; font-size:.85rem; font-weight:600; color:var(--af-amber,#F59E0B); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.6rem; }
.af-stat-tile p { color:#4a5568; margin:0; font-size:.95rem; }

/* Image wraps */
.af-image-wrap { position:relative; border-radius:24px; overflow:hidden; box-shadow:0 25px 60px -30px rgba(11,37,69,.4); }
.af-image-wrap img { width:100%; height:auto; display:block; }
.af-image-badge { position:absolute; bottom:1.5rem; left:1.5rem; background:#fff; padding:.85rem 1.1rem; border-radius:14px; display:inline-flex; align-items:center; gap:.75rem; box-shadow:0 12px 30px -10px rgba(11,37,69,.3); }
.af-image-badge i { color:var(--af-amber,#F59E0B); font-size:1.4rem; }
.af-image-badge span { display:flex; flex-direction:column; font-weight:700; color:var(--af-navy,#0B2545); font-size:.94rem; }
.af-image-badge small { font-weight:500; color:#4a5568; font-size:.78rem; }

/* Feature large */
.af-feature-lg { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem; height:100%; transition:all .3s ease; }
.af-feature-lg:hover { transform:translateY(-6px); border-color:var(--af-blue,#1976D2); box-shadow:0 20px 50px -25px rgba(11,37,69,.25); }

/* Infrastructure cards */
.af-infra-card { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem 1.75rem; height:100%; transition:all .3s ease; }
.af-infra-card:hover { transform:translateY(-6px); border-color:var(--af-blue,#1976D2); box-shadow:0 20px 50px -25px rgba(11,37,69,.25); }
.af-infra-icon { width:64px; height:64px; border-radius:14px; background:rgba(25,118,210,.1); color:var(--af-blue,#1976D2); font-size:1.8rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.af-infra-card h4 { font-size:1.2rem; font-weight:700; color:var(--af-navy,#0B2545); margin-bottom:.5rem; }
.af-infra-card > p { color:#4a5568; line-height:1.65; margin-bottom:.85rem; font-size:.94rem; }
.af-infra-card ul { list-style:none; padding:0; margin:0; }
.af-infra-card ul li { color:#4a5568; font-size:.88rem; padding:.25rem 0 .25rem 1.3rem; position:relative; }
.af-infra-card ul li::before { content:'✓'; position:absolute; left:0; color:#22C55E; font-weight:700; }

/* Checklists */
.af-checklist { list-style:none; padding:0; margin:1rem 0; }
.af-checklist li { display:flex; gap:.65rem; padding:.5rem 0; color:#4a5568; align-items:flex-start; }
.af-checklist li i { color:#22C55E; font-size:1.15rem; flex-shrink:0; margin-top:.15rem; }

/* Quote card */
.af-quote-card { background:linear-gradient(135deg,var(--af-navy,#0B2545) 0%,#1A365D 100%); color:#fff; border-radius:22px; padding:2.5rem; position:relative; overflow:hidden; }
.af-quote-card > i { position:absolute; top:1rem; left:1.5rem; font-size:5rem; color:rgba(245,158,11,.18); line-height:1; font-family:Georgia,serif; }
.af-quote-card p { position:relative; font-size:1.08rem; line-height:1.7; color:rgba(255,255,255,.92); margin-bottom:1.5rem; font-style:italic; }
.af-quote-card span { display:block; color:rgba(255,255,255,.7); font-size:.92rem; }
.af-quote-card span strong { color:var(--af-amber,#F59E0B); font-style:normal; }

/* Legal pages */
.af-legal { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:3rem; }
.af-legal-meta { color:#718096; font-size:.9rem; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--af-border,#E5E9F0); }
.af-legal h2 { color:var(--af-navy,#0B2545); font-size:1.4rem; font-weight:700; margin:2rem 0 .85rem; }
.af-legal h3 { color:var(--af-navy,#0B2545); font-size:1.1rem; font-weight:700; margin:1.5rem 0 .65rem; }
.af-legal p, .af-legal ul, .af-legal ol { color:#4a5568; line-height:1.75; margin-bottom:1rem; }
.af-legal ul, .af-legal ol { padding-left:1.5rem; }
.af-legal li { margin-bottom:.45rem; }
.af-legal a { color:var(--af-blue,#1976D2); text-decoration:none; font-weight:600; }
.af-legal a:hover { text-decoration:underline; }

/* Sitemap */
.af-sitemap-block { background:#fff; border:1px solid var(--af-border,#E5E9F0); border-radius:18px; padding:2rem; height:100%; }
.af-sitemap-block h2 { color:var(--af-navy,#0B2545); font-size:1.3rem; font-weight:700; margin-bottom:1.25rem; display:flex; align-items:center; gap:.6rem; padding-bottom:.85rem; border-bottom:1px solid var(--af-border,#E5E9F0); }
.af-sitemap-block h2 i { color:var(--af-amber,#F59E0B); }
.af-sitemap-list { list-style:none; padding:0; margin:0; }
.af-sitemap-list li { padding:.4rem 0; border-bottom:1px solid var(--af-border,#E5E9F0); }
.af-sitemap-list li:last-child { border-bottom:0; }
.af-sitemap-list a { color:var(--af-navy,#0B2545); text-decoration:none; font-weight:500; transition:color .2s ease; display:inline-flex; align-items:center; gap:.4rem; }
.af-sitemap-list a:hover { color:var(--af-blue,#1976D2); }
.af-sitemap-list-rich li { padding:.85rem 0; }
.af-sitemap-list-rich a { flex-direction:column; align-items:flex-start; gap:.15rem; }
.af-sitemap-list-rich strong { font-size:1rem; color:var(--af-navy,#0B2545); }
.af-sitemap-list-rich span { font-size:.85rem; color:#4a5568; font-weight:400; }

/* Button variants */
.btn-af-light-outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); padding:.7rem 1.4rem; border-radius:10px; font-weight:600; display:inline-flex; align-items:center; gap:.45rem; transition:all .25s ease; }
.btn-af-light-outline:hover { background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.btn-sm { padding:.45rem 1rem !important; font-size:.85rem !important; }

/* Responsive */
@media (max-width: 768px) {
  .af-industry-row { grid-template-columns:60px 1fr; }
  .af-industry-row .af-industry-icon { grid-row:1; grid-column:2; width:54px; height:54px; font-size:1.5rem; }
  .af-industry-num { grid-row:1; grid-column:1; font-size:1.8rem; }
  .af-industry-content { grid-column:1/-1; }
  .af-form-card, .af-map-card, .af-inquiry-sidebar, .af-legal { padding:1.5rem !important; }
  .af-product-detail .af-product-gallery { padding:1rem; }
  .af-product-tabs .nav-tabs { padding:0 .5rem; }
  .af-product-tabs .nav-link { padding:.7rem .85rem; font-size:.86rem; }
  .af-product-tabs .tab-content { padding:1.25rem; }
  .af-price-box { flex-direction:column; gap:.5rem; align-items:flex-start; }
  .af-price-divider { display:none; }
  .af-product-trust { grid-template-columns:1fr; }
}

/* ============================================================
   FEATURED PRODUCT SLIDER (Homepage)
   ============================================================ */
.af-product-slider-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: linear-gradient(180deg, #fff 0%, var(--af-surface) 100%);
  position: relative;
  overflow: hidden;
}
.af-product-slider-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(25,118,210,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.af-product-slider-section::after {
  content: "";
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(245,158,11,.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.af-pslide-head {
  max-width: 760px;
  margin: 0 auto 2.75rem;
  position: relative;
  z-index: 2;
}
.af-pslide-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--af-secondary);
  margin-bottom: .85rem;
}
.af-pslide-head .eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--af-accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}
.af-pslide-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: .85rem;
  color: var(--af-primary);
}
.af-pslide-head .section-sub {
  color: var(--af-muted);
  font-size: 1.05rem;
  margin: 0;
}

/* ----- Carousel shell ----- */
.af-product-slider {
  position: relative;
  z-index: 2;
  border-radius: var(--af-r-xl);
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(11,37,69,.25), 0 8px 24px -12px rgba(11,37,69,.1);
  overflow: hidden;
}
.af-product-slider .carousel-inner { border-radius: inherit; }

/* ----- Individual slide ----- */
.af-pslide {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 460px;
  background: #fff;
}

.af-pslide-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--af-surface-2) 0%, #E0EAF5 100%);
}
.af-pslide-media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: center;
  transition: transform 8s var(--af-ease);
}
.carousel-item.active .af-pslide-media img {
  transform: scale(1.06);   /* slow Ken-Burns drift while slide is active */
}
.af-pslide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,37,69,.18) 0%, transparent 50%, rgba(11,37,69,.05) 100%);
  pointer-events: none;
}
.af-pslide-tag {
  position: absolute;
  top: 24px; left: 24px;
  z-index: 2;
  background: var(--af-accent);
  color: var(--af-ink);
  padding: 7px 16px;
  border-radius: var(--af-r-full);
  font-family: var(--af-font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(245,158,11,.4);
}

.af-pslide-content {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.af-pslide-num {
  font-family: var(--af-font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--af-muted);
  margin-bottom: 1rem;
  display: inline-block;
}
.af-pslide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(25,118,210,.08);
  color: var(--af-secondary);
  padding: 6px 14px;
  border-radius: var(--af-r-full);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1.25rem;
  width: max-content;
  max-width: 100%;
}
.af-pslide-eyebrow i { font-size: .9rem; }
.af-pslide-content h3 {
  font-family: var(--af-font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--af-primary);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.af-pslide-content p {
  color: var(--af-text);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.4rem;
}
.af-pslide-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}
.af-pslide-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--af-ink);
  font-weight: 500;
  font-size: .92rem;
  padding: 5px 0;
}
.af-pslide-bullets li i {
  color: var(--af-success);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.af-pslide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.af-pslide-cta .btn { padding: 11px 22px; font-size: .9rem; }

/* ----- Custom controls (chevron pills outside the image side) ----- */
.af-product-slider .af-pslide-ctrl {
  width: 52px; height: 52px;
  background: #fff;
  border: 1.5px solid var(--af-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--af-primary);
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  transition: all var(--af-t-base) var(--af-ease);
  box-shadow: var(--af-shadow-md);
  z-index: 5;
}
.af-product-slider .af-pslide-ctrl:hover {
  background: var(--af-primary);
  color: #fff;
  border-color: var(--af-primary);
  transform: translateY(-50%) scale(1.08);
}
.af-product-slider .af-pslide-ctrl i { font-size: 1.4rem; line-height: 1; }
.af-product-slider .af-pslide-ctrl-prev { left: -26px; }
.af-product-slider .af-pslide-ctrl-next { right: -26px; }
/* Hide Bootstrap's default chevron sprites */
.af-product-slider .carousel-control-prev-icon,
.af-product-slider .carousel-control-next-icon { display: none; }

/* ----- Indicators (amber pill dots) ----- */
.af-product-slider .af-pslide-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  gap: 8px;
  display: flex;
  z-index: 5;
}
.af-product-slider .af-pslide-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(11,37,69,.25);
  border: 0;
  opacity: 1;
  margin: 0;
  text-indent: 0;
  transition: all var(--af-t-base) var(--af-ease);
}
.af-product-slider .af-pslide-dots button.active {
  background: var(--af-accent);
  width: 28px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(245,158,11,.4);
}
.af-product-slider .af-pslide-dots button:hover { background: var(--af-secondary); }

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
  .af-pslide { grid-template-columns: 1fr; min-height: 0; }
  .af-pslide-media { aspect-ratio: 16/10; min-height: 0; }
  .af-pslide-media img { min-height: 0; }
  .af-pslide-content { padding: 2rem 1.75rem 2.75rem; }
  .af-product-slider .af-pslide-ctrl { width: 44px; height: 44px; }
  .af-product-slider .af-pslide-ctrl-prev { left: 12px; }
  .af-product-slider .af-pslide-ctrl-next { right: 12px; }
  .af-product-slider .af-pslide-ctrl { background: rgba(255,255,255,.95); }
}

@media (max-width: 575.98px) {
  .af-pslide-content { padding: 1.75rem 1.4rem 2.5rem; }
  .af-pslide-tag { top: 16px; left: 16px; font-size: .7rem; padding: 5px 12px; }
  .af-pslide-cta .btn { width: 100%; justify-content: center; }
  .af-product-slider .af-pslide-dots { bottom: 12px; }
  .af-pslide-bullets li { font-size: .88rem; }
}

/* ============================================================
   ABOUT-INTRO MEDIA (Homepage about block)
   ============================================================ */
.af-about-media {
  position: relative;
  aspect-ratio: 5/6;
  border-radius: var(--af-r-xl);
  overflow: hidden;
  isolation: isolate;
}
.af-about-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--af-ease-out);
}
.af-about-media:hover img { transform: scale(1.04); }
.af-about-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,37,69,.4) 100%);
  pointer-events: none;
}
.af-about-media-badge {
  position: absolute;
  bottom: 20px; left: 20px; right: 20px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-radius: var(--af-r-md);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
  z-index: 2;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.25);
}
.af-about-media-badge-num {
  font-family: var(--af-font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--af-primary);
  line-height: 1;
  letter-spacing: -.04em;
}
.af-about-media-badge-num sup {
  color: var(--af-accent);
  font-size: 1.4rem;
  font-weight: 800;
  top: -.6em;
}
.af-about-media-badge strong {
  font-family: var(--af-font-display);
  color: var(--af-primary);
  font-size: 1rem;
  font-weight: 700;
  display: block;
  line-height: 1.1;
}
.af-about-media-badge small {
  color: var(--af-muted);
  font-size: .82rem;
  display: block;
  margin-top: 3px;
}
.af-about-media-accent {
  position: absolute;
  top: -8px; right: -8px;
  width: 84px; height: 84px;
  background: var(--af-accent);
  border-radius: var(--af-r-lg);
  z-index: -1;
  transform: rotate(8deg);
  opacity: .9;
}