/* =========================================================
   AUZZIE WHOLESALE – MAIN THEME (Pearl White + Grey)
   ========================================================= */

:root{
  /* Base */
  --pearl: #F2F2EE;      /* pearl off-white */
  --white: #FFFFFF;

  /* Core palette (from your image) */
  --navy: #011425;
  --blue: #1F4959;
  --slate: #5C7C89;
  --charcoal: #242424;

  /* System usage */
  --ink: var(--charcoal);
  --muted: #4B5B63;
  --line: #D9DAD6;

  --card: var(--white);
  --soft: #EDF1F2;

  /* Main accent */
  --accent: var(--blue);
}

.site-body{
  background: var(--pearl);
  color: var(--ink);
}


/* =========================================================
   BRAND / LOGO (UPDATED)
   ========================================================= */

.brand{
  position:relative;
  width:210px;
  height:88px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
}
.brand:hover{ color:var(--ink); }

/* If you are NOT using .brand-mark anywhere, you can keep it or delete it.
   Leaving it doesn’t hurt. */
.brand-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:#fff;
  font-weight:800;
  letter-spacing:.5px;
}

/* Header logo image (bigger + clearer) */
.site-logo{
  height:64px;
  width:auto;
  max-width:none;
  object-fit:contain;
  display:block;
  filter:brightness(1.35) contrast(1.15);
}

/* MAIN HEADER LOGO — PREMIUM SIZE */

.site-logo--main{
height:150px;
width:auto;
max-width:none;
object-fit:contain;
display:block;
position:absolute;
top:46%;
transform:translateY(-50%);
filter:brightness(1.2) contrast(1.15) saturate(1.15);
}

/* Brand text */
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.12;
}

/* Name + tagline hierarchy */
.brand-name{
  font-weight:800;
  font-size:18px;
  letter-spacing:0.2px;
}

.brand-tagline{
  font-size:13px;       /* was 12px */
  color:var(--muted);
  margin-top:2px;
}

/* Home header: make brand more visible on transparent hero */
.is-home .brand-name{ color:#fff; }
.is-home .brand-tagline{ color:rgba(255,255,255,0.75); }
.is-home .site-logo{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* Mobile */
@media (max-width:768px){
  .site-logo{ height:40px; }
  .brand-name{ font-size:16px; }
  .brand-tagline{ font-size:12px; }
}

/* =========================================================
HEADER NAVIGATION — PREMIUM
========================================================= */

.navlink{
position:relative;
font-size:15px;
font-weight:600;
color:#0B1F2A;
text-decoration:none;
padding:6px 2px;
transition:color 250ms ease;
}

.navlink::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#2F5D62;
border-radius:2px;
transition:width 300ms ease;
}

.navlink:hover{
color:#2F5D62;
}

.navlink:hover::after{
width:100%;
}

/* =========================================================
   HOME HEADER NAV — CLEAN WHITE PILLS (PREVIOUS STYLE)
   + OPTION 2: PREMIUM SHINE SWEEP ON HOVER
   ========================================================= */

.is-home .site-header nav .navlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;

  padding:10px 22px;
  border-radius:999px;

  background:#ffffff;
  border:1px solid rgba(1,20,37,0.12);

  color:#0B1F2A !important;
  font-weight:700;
  text-decoration:none;

  /* base shadow */
  box-shadow: 0 10px 22px rgba(1,20,37,0.08);

  /* ✅ stop floating completely (in case other CSS exists) */
  transform:none !important;
  animation:none !important;

  /* for shine layering */
  isolation:isolate;
  will-change: box-shadow, border-color, background;
  z-index:1;

  transition: box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* remove underline */
.is-home .site-header nav .navlink::after{ display:none; }

/* ✅ OPTION 2: Shine sweep layer (was disabled before) */
.is-home .site-header nav .navlink::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;

  /* keep behind text */
  z-index:0;

  /* hidden by default */
  opacity:0;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0) 65%
  );

  transform: translateX(-70%);
  transition: opacity 180ms ease, transform 650ms ease;
}

/* ensure text stays above shine */
.is-home .site-header nav .navlink > *{
  position:relative;
  z-index:2;
}

/* ✅ HOVER = ORANGE GLOW OUTSIDE + INSIDE (NO LIFT) + SHINE */
.is-home .site-header nav .navlink:hover{
  transform:none !important;
  animation:none !important;

  border-color: rgba(244,124,32,0.45);

  /* tiny warm fill INSIDE */
  background: rgba(244,124,32,0.06);

  box-shadow:
    0 14px 30px rgba(1,20,37,0.12),          /* depth */
    0 0 0 4px rgba(244,124,32,0.12),         /* outer glow ring */
    inset 0 0 0 999px rgba(244,124,32,0.05), /* inside glow */
    inset 0 1px 0 rgba(255,255,255,0.75);    /* soft highlight */
}

/* shine sweep on hover */
.is-home .site-header nav .navlink:hover::before{
  opacity:0.55;
  transform: translateX(70%);
}

/* ✅ ACTIVE = NORMAL WHITE (NO ORANGE BY DEFAULT) */
.is-home .site-header nav .navlink.is-active{
  background:#ffffff;
  border-color: rgba(1,20,37,0.12);
  box-shadow: 0 10px 22px rgba(1,20,37,0.08);
  transform:none !important;
  animation:none !important;
}

/* ✅ IMPORTANT: active tab must ALSO glow on hover */
.is-home .site-header nav .navlink.is-active:hover{
  transform:none !important;
  animation:none !important;

  border-color: rgba(244,124,32,0.45);
  background: rgba(244,124,32,0.06);

  box-shadow:
    0 14px 30px rgba(1,20,37,0.12),
    0 0 0 4px rgba(244,124,32,0.12),
    inset 0 0 0 999px rgba(244,124,32,0.05),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

/* keep shine on active hover too */
.is-home .site-header nav .navlink.is-active:hover::before{
  opacity:0.55;
  transform: translateX(70%);
}




/* =========================================================
   SEARCH BAR — CLEAN WHITE (HOME ONLY)
   ========================================================= */

.is-home .site-header .searchbar{
  position:relative;
  overflow:hidden;

  background:#ffffff;
  border:1px solid rgba(1,20,37,0.12);
  border-radius:999px;

  min-width:380px;
  height:44px;

  box-shadow: 0 10px 22px rgba(1,20,37,0.08);

  /* ✅ stop floating completely */
  transform:none !important;
  animation:none !important;

  /* for shine layering */
  isolation:isolate;
  will-change: box-shadow, border-color, background;

  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

/* ✅ searchbar shine sweep */
.is-home .site-header .searchbar::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;

  opacity:0;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.80) 50%,
    rgba(255,255,255,0) 65%
  );

  transform: translateX(-70%);
  transition: opacity 180ms ease, transform 650ms ease;
}

.is-home .site-header .searchbar > *{
  position:relative;
  z-index:2;
}

.is-home .site-header .searchbar input{
  background:transparent !important;
  font-size:14px;
  color:#0B1F2A !important;
  font-weight:600;
  padding-left:16px;
}

.is-home .site-header .searchbar input::placeholder{
  color: rgba(1,20,37,0.45);
}

.is-home .site-header .searchbar button{
  color: rgba(1,20,37,0.70) !important;
  padding-right:14px;
}

/* ✅ hover = ORANGE GLOW OUTSIDE + INSIDE (NO LIFT) + SHINE */
.is-home .site-header .searchbar:hover{
  transform:none !important;
  animation:none !important;

  border-color: rgba(244,124,32,0.45);
  background: rgba(244,124,32,0.03);

  box-shadow:
    0 14px 30px rgba(1,20,37,0.12),
    0 0 0 4px rgba(244,124,32,0.12),
    inset 0 0 0 999px rgba(244,124,32,0.04);
}

.is-home .site-header .searchbar:hover::before{
  opacity:0.45;
  transform: translateX(70%);
}

/* ✅ focus = ORANGE GLOW OUTSIDE + INSIDE (and keep shine subtle) */
.is-home .site-header .searchbar:focus-within{
  transform:none !important;
  animation:none !important;

  border-color: rgba(244,124,32,0.45);
  background: rgba(244,124,32,0.03);

  box-shadow:
    0 14px 30px rgba(1,20,37,0.12),
    0 0 0 4px rgba(244,124,32,0.12),
    inset 0 0 0 999px rgba(244,124,32,0.04);
}

/* =========================================================
   HEADER ACTIONS (SEARCH + CART)
========================================================= */
.header-actions {
    gap: 12px;
}

.cart-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #011425;

    background:
        linear-gradient(135deg, rgba(143, 211, 220, 0.25), rgba(31, 73, 89, 0.15)),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.05) 0,
            rgba(255, 255, 255, 0.05) 8px,
            rgba(255, 255, 255, 0.02) 8px,
            rgba(255, 255, 255, 0.02) 16px
        );

    border: 1px solid rgba(31, 73, 89, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 6px 18px rgba(31, 73, 89, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);

    transition: all 0.25s ease;
}

.cart-link i {
    font-size: 1.1rem;
}

.cart-link:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px rgba(31, 73, 89, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    color: #011425;
}

/* =========================================================
   HEADER ICONS
   ========================================================= */

.iconbtn{
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: white;
  text-decoration: none;
}
.iconbtn:hover{ filter: brightness(0.98); }

.badge-dot{
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: 2px 6px;
}

/* =========================================================
   TYPOGRAPHY HELPERS
   ========================================================= */

.eyebrow{
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.section-eyebrow{
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
}
.section-title{
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 6px 0 0;
}

/* =========================================================
   ICON SYSTEM (PROFESSIONAL LOOK)
   Used in features + why sections
   ========================================================= */

.icon-badge{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--slate);
}

.icon-badge svg{
  width: 26px;
  height: 26px;
  display: block;
}

/* =========================================================
   BUTTONS (HOMEPAGE + CTA)
   ========================================================= */

.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  transition: 0.2s ease;

  /* IMPORTANT FIX */
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* texture stripes */
.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background:
  repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.15) 0px,
    rgba(255,255,255,0.15) 6px,
    transparent 6px,
    transparent 12px
  );

  opacity:0.35;
}

/* keep text above stripes */
.btn-primary span,
.btn-primary{
  position: relative;
  z-index: 2;
}

.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  color: #fff;
}



/* ===============================
   SECONDARY BUTTON
   =============================== */

.btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;

  border: 1px solid rgba(255,255,255,0.55);
  background: transparent;

  /* BLUE TEXT */
  color: var(--accent);

  transition: 0.2s ease;
}

.btn-secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.80);
  color: #fff;
}

/* =========================================================
   HOMEPAGE – HERO SECTION (NEW PREMIUM LAYOUT)
   ========================================================= */
/* HERO BADGE */

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;

padding:8px 18px;
margin-bottom:14px;

border-radius:999px;

background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.25);

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

color:#fff;
font-weight:700;
font-size:14px;

box-shadow:
0 10px 30px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.35);
}

.hero-badge-star{
color:#FFD34D;
font-size:16px;
}

.is-home .site-header{
position:relative;
top:auto;
left:auto;
right:auto;
z-index:50;
background:#FFFFFF !important;
border-bottom:1px solid #E5E7EB !important;
box-shadow:0 10px 30px rgba(1,20,37,0.08);
height:auto;
display:flex;
align-items:center;
}

.is-home .site-header.is-scrolled{
background:#FFFFFF !important;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom:1px solid #E5E7EB;
}

.is-home .site-header{
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

/* HEADER SHRINK ON SCROLL */

.is-home .site-header .container{
min-height:58px;
display:flex;
align-items:center;
gap:4px;
justify-content:space-between;
}

.is-home .site-header.is-scrolled .container{
  padding-top:4px !important;
  padding-bottom:4px !important;
}


.is-home .site-header.is-scrolled .searchbar{
  height:38px;
  min-width:320px;
  transition:height 220ms ease, min-width 220ms ease;
}

@media(max-width:768px){
  .is-home .site-header.is-scrolled .searchbar{
    min-width:auto;
    width:100%;
  }
}

/* ✅ HOME HEADER — LIQUID GLASS (OPTION 2 STRONG GLOW) */

.is-home .navlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;

  padding:8px 16px;
  border-radius:999px;
  text-decoration:none;

  font-weight:700;
  color:#0B1F2A !important;

  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(1,20,37,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 10px 26px rgba(1,20,37,0.06),
    inset 0 1px 0 rgba(255,255,255,0.70);

  /* ✅ Option 1 — soft inner glow pulse */
  animation: navFloat 4.8s ease-in-out infinite;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

@keyframes navPulse{
  0%, 100%{
    box-shadow:
      0 10px 26px rgba(1,20,37,0.06),
      inset 0 1px 0 rgba(255,255,255,0.70),
      inset 0 0 0 rgba(31,73,89,0.00);
  }
  50%{
    box-shadow:
      0 14px 32px rgba(1,20,37,0.10),
      inset 0 1px 0 rgba(255,255,255,0.85),
      inset 0 0 26px rgba(31,73,89,0.22);
  }
}

.is-home .navlink:hover{
  animation-play-state: paused;
  transform: translateY(-2px);
  background: rgba(255,255,255,0.80);
  border-color: rgba(31,73,89,0.90);

  box-shadow:
    0 10px 30px rgba(1,20,37,0.15),
    /* MAIN BLUE AMBIENT GLOW */
    0 40px 80px rgba(31,73,89,0.45),
    0 20px 50px rgba(31,73,89,0.35),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.is-home .navlink.is-active{
  animation-play-state: paused;

  background: rgba(244,124,32,0.22);
  border-color: rgba(244,124,32,0.55);

  box-shadow:
    0 18px 44px rgba(1,20,37,0.18),
    0 0 0 4px rgba(244,124,32,0.22),
    0 0 46px rgba(244,124,32,0.40),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

/* SEARCH GLASS — SOFT INNER GLOW PULSE */

.is-home .searchbar{
  height:38px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(1,20,37,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 999px;

  box-shadow:
    0 10px 26px rgba(1,20,37,0.06),
    inset 0 1px 0 rgba(255,255,255,0.70);

  /* ✅ Soft glow pulse */
  animation: navFloat 4.8s ease-in-out infinite;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

@keyframes searchPulse{
  0%, 100%{
    box-shadow:
      0 10px 26px rgba(1,20,37,0.06),
      inset 0 1px 0 rgba(255,255,255,0.70),
      inset 0 0 0 rgba(31,73,89,0.00);
  }
  50%{
    box-shadow:
      0 14px 32px rgba(1,20,37,0.10),
      inset 0 1px 0 rgba(255,255,255,0.85),
      inset 0 0 30px rgba(31,73,89,0.24);
  }
}

@keyframes navFloat{
  0%,100%{
    transform: translateY(0px);
  }
  50%{
    transform: translateY(-4px);
  }
}

.is-home .searchbar:hover{
  animation-play-state: paused;
  transform: translateY(-1px);
  background: rgba(255,255,255,0.80);
  border-color: rgba(31,73,89,0.90);

  box-shadow:
    0 10px 30px rgba(1,20,37,0.15),
    0 45px 90px rgba(31,73,89,0.48),
    0 25px 60px rgba(31,73,89,0.38),
    inset 0 1px 0 rgba(255,255,255,0.90);
}

.is-home .searchbar input{
  background: transparent;
  color: #011425;
}

.is-home .searchbar input::placeholder{
  color: rgba(1,20,37,0.55);
}

.is-home .searchbar .btn{
  color: rgba(1,20,37,0.80) !important;
}

.is-home .brand-name{ color: #fff; }
.is-home .brand-tagline{ color: rgba(255,255,255,0.70); }

.is-home .iconbtn{
  border-color: rgba(255,255,255,0.20) !important;
  color: #fff !important;
}

.is-home .iconbtn:hover{
  background: rgba(255,255,255,0.10);
}

/* Background image + premium overlay */
.home-hero{
  padding: 32px 0 10px;
  min-height: 470px;
}
.home-hero--image{
  background-image:
    radial-gradient(1200px 700px at 25% 20%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(135deg, rgba(3, 43, 66, 0.92) 0%, rgba(1, 20, 37, 0.88) 60%, rgba(1, 20, 37, 0.95) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}

.home-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 20px;
  align-items: center;
}

.home-hero-title{
  font-weight: 950;
  letter-spacing: -0.9px;
  font-size: 54px;
  line-height: 1.02;
  margin: 0 0 14px;
  color: #fff;
}

.home-hero-sub{
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 0 20px;
}

.home-hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.home-hero-actions .btn-primary,
.home-hero-actions .btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  transition:all 220ms ease;
}

.home-hero-actions .btn-primary{
  background:rgba(47,93,98,0.28);
  box-shadow:0 20px 45px rgba(0,0,0,0.25);
}

.home-hero-actions .btn-secondary{
  background:rgba(255,255,255,0.10);
  color:#fff !important;
}

.home-hero-actions .btn-primary:hover,
.home-hero-actions .btn-secondary:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.35);
}

.home-hero-note{
  color: rgba(255,255,255,0.82);
  font-size:14px;
  letter-spacing:0.4px;
  font-weight:500;
}

.home-hero .eyebrow{
  color: rgba(255,255,255,0.80);
}

/* Right side visual (liquid-glass block) */
.home-hero-media .hero-visual{
  height: 420px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.30);
}

/* Responsive */
@media (max-width: 992px){
  .home-hero{ padding: 40px 0 18px; }
  .home-hero-grid{ grid-template-columns: 1fr; }
  .home-hero-title{ font-size: 44px; }
  .home-hero-media .hero-visual{ height: 320px; }
}

@media (max-width: 576px){
  .home-hero{ padding: 30px 0 14px; }
  .home-hero-title{ font-size: 36px; }
  .home-hero-media .hero-visual{ height: 260px; }
}

/* =========================================================
   HERO PRODUCT SLIDER — FINAL PREMIUM VERSION
   ========================================================= */

.hero-slider{
  position:relative;
  width:100%;
  height:420px;
  border-radius:26px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.15);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateZ(0);
}

/* PRODUCT SLIDES */

.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  padding:0px;
  opacity:0;
  transform:scale(0.94) translateY(10px);
  filter:drop-shadow(0 35px 70px rgba(0,0,0,0.40));
  transition:opacity 700ms ease, transform 900ms cubic-bezier(.2,.9,.2,1), filter 900ms cubic-bezier(.2,.9,.2,1);
  z-index:3;
}

.hero-slide.active{
  opacity:1;
  transform:scale(1) translateY(0);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,0.38)) drop-shadow(0 0 40px rgba(47,93,98,0.22));
  z-index:4;
}

/* SLIDER BUTTONS */

.hero-slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.hero-slider-btn:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.35);
  transform:translateY(-50%) scale(1.05);
}

.hero-slider-btn:active{
  transform:translateY(-50%) scale(0.96);
}

.hero-prev{left:14px;}
.hero-next{right:14px;}

/* DOTS */

.hero-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:7;
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(10px);
}

.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,0.35);
  cursor:pointer;
  transition:width 200ms ease, background 200ms ease;
}

.hero-dot.is-active{
  width:20px;
  background:rgba(255,255,255,0.95);
}

/* GLASS REFLECTION */

.hero-slider::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 60%);
  transform:translateX(-45%) rotate(6deg);
  animation:heroGlassSweep 4.8s ease-in-out infinite;
  mix-blend-mode:screen;
  opacity:0.55;
}

.hero-slider::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 15%, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 55%);
}

@keyframes heroGlassSweep{
  0%{transform:translateX(-45%) rotate(6deg);}
  55%{transform:translateX(55%) rotate(6deg);}
  100%{transform:translateX(55%) rotate(6deg);}
}

/* MOBILE */

@media (max-width:768px){
  .hero-slider{height:320px;border-radius:22px;}
  .hero-slide{padding:18px;}
  .hero-slider-btn{width:40px;height:40px;font-size:22px;}
}


/* =========================================================
   HOMEPAGE – TRUST FEATURES BAR
   ========================================================= */

.home-features{
  padding: 18px 0 28px;
}

.features-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.feature-item{
  background: var(--charcoal);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 16px;
}
.feature-title{
  color: #fff;
}

.feature-text{
  color: rgba(255,255,255,0.78);
}

.feature-icon{
  margin-bottom: 12px;
}

.feature-title{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 6px;
}

.feature-text{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 992px){
  .features-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  .features-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   HOMEPAGE – SECTIONS (HEADINGS / SPACING)
   ========================================================= */

.home-section{
  padding: 44px 0;
}

.section-head{
  margin-bottom: 18px;
}

.home-section-title{
  font-weight: 900;
  letter-spacing: -0.7px;
  margin: 0;
  font-size: 34px;
}

.home-section-sub{
  margin: 10px auto 0;
  max-width: 820px;
  color: #374151;
  line-height: 1.7;
}

.home-text{
  color: #374151;
  line-height: 1.8;
  margin: 14px 0 0;
}

.home-actions{
  margin-top: 18px;
}

@media (max-width: 576px){
  .home-section-title{ font-size: 28px; }
}

/* =========================================================
   OUR PRODUCTS / CATEGORIES SECTION
   ========================================================= */

.categories-section{
margin-top:0;
padding:80px 0 90px;
position:relative;
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
background:
radial-gradient(900px 400px at 15% 20%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(700px 380px at 85% 30%, rgba(244,124,32,0.10), transparent 60%),
linear-gradient(135deg, #0F2A38 0%, #1C3F52 50%, #0A1F2A 100%);
border-top:none;
border-bottom:none;
overflow:hidden;
}

.categories-section::before{
content:"";
position:absolute;
inset:-120px;
background:
radial-gradient(900px 400px at 15% 20%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(700px 380px at 85% 30%, rgba(244,124,32,0.12), transparent 60%),
linear-gradient(135deg, #0A2540 0%, #133A5A 50%, #081F33 100%);
filter:blur(18px);
opacity:1;
pointer-events:none;
z-index:0;
}

.categories-section::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 45%, rgba(0,0,0,0.10) 100%);
pointer-events:none;
z-index:0;
}

.categories-section > *{
position:relative;
z-index:1;
}

.categories-section .container{
max-width:1200px;
}

/* ===== Categories heading glass box ===== */

.categories-head{
margin:0 auto 26px;
max-width:920px;
text-align:center;
position:relative;
padding-bottom:16px;
}

.categories-head::after{
content:"";
display:block;
width:120px;
height:3px;
margin:14px auto 0;
border-radius:999px;
background:linear-gradient(90deg, rgba(1,20,37,0) 0%, rgba(1,20,37,1) 50%, rgba(1,20,37,0) 100%);
box-shadow:0 10px 30px rgba(1,20,37,0.35);
opacity:0.95;
}

.categories-kicker{
color:#5C6F7A;
font-weight:700;
font-size:13px;
margin:0 0 10px;
}

.categories-title-glass{
display:inline-block;
padding:14px 22px;
border-radius:18px;
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.22);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 18px 45px rgba(0,0,0,0.25);
margin:0 0 12px;
}

.categories-title{
margin:0;
color:#0B1F2A !important;
font-weight:900;
letter-spacing:-0.6px;
font-size:40px;
line-height:1.1;
}

.categories-sub{
margin:0;
color:#40525C;
font-size:16px;
line-height:1.7;
}

.categories-section .section-title,
.categories-section .home-section-title,
.categories-section h2,
.categories-section h3{
color:#FFFFFF;
}

.categories-section .section-head p,
.categories-section .home-section-sub,
.categories-section .section-eyebrow{
color:rgba(255,255,255,0.78);
}

.categories-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
margin-top:18px;
align-items:stretch; /* ✅ FIX: forces equal height cards */
}

/* =========================================================
   CATEGORY CARDS — MATCH IMAGE #1 (single clean version)
   ========================================================= */

.categories-grid{align-items:stretch;}

.category-card{
position:relative;
isolation:isolate;
display:flex;
flex-direction:column;
height:100%;
text-decoration:none;
overflow:visible;
border-radius:22px;
background:rgba(180,200,215,0.10);
border:1px solid rgba(255,255,255,0.38);
box-shadow:0 26px 60px rgba(1,20,37,0.22), inset 0 1px 0 rgba(255,255,255,0.45);
transform:translateZ(0);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.category-card:hover{
transform:translateY(-6px);
border-color:rgba(255,255,255,0.55);
box-shadow:0 34px 78px rgba(1,20,37,0.28), inset 0 1px 0 rgba(255,255,255,0.50);
}

/* image area */
.category-image{
position:relative;
height:200px;
overflow:hidden;
border-radius:22px 22px 0 0;
filter:none !important;
}

.category-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
transform:scale(1.02);
transition:transform .35s ease;
filter:none !important;
opacity:1 !important;
mix-blend-mode:normal !important;
}

.category-card:hover .category-image img{
transform:scale(1.06);
}

/* ✅ top glass highlight (subtle) */
.category-image::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:18%;
background:linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0) 100%);
pointer-events:none;
opacity:.55;
z-index:2;
}

/* ✅ bottom fog blend */
.category-image::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:56%;
background:linear-gradient(to bottom, rgba(10,35,50,0) 0%, rgba(10,35,50,0.08) 30%, rgba(235,240,245,0.55) 65%, rgba(235,240,245,0.95) 100%);
pointer-events:none;
z-index:2;
}

/* footer glass */
.category-footer{
position:relative;
z-index:1;
flex:1 1 auto;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:18px 16px 14px;
text-align:center;
background:rgba(235,240,245,0.82);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-top:1px solid rgba(255,255,255,0.55);
border-radius:0 0 22px 22px;
}

/* icon circle (FIXED POSITION - sits on image/footer seam) */
.category-icon{
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  position:absolute;
  left:50%;
  bottom:-29px;                 /* ✅ half outside image */
  transform:translateX(-50%);

  z-index:50;                   /* ✅ always in front */

  background:#011425;           /* ✅ full dark blue */
  border:1px solid rgba(255,255,255,0.60);

  box-shadow:
    0 18px 40px rgba(1,20,37,0.28),
    inset 0 2px 3px rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.12);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  color: rgba(255,255,255,0.96); /* icon white */
}

.category-media{
  position: relative;
}

.category-icon svg{
  width:24px;
  height:24px;
  display:block;

  stroke: currentColor;
  fill: none;

  stroke-width: 2.2;
  opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* force any inner paths to stay white + no fill */
.category-icon svg *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* text */
.category-name{
margin-top:16px;
font-size:20px;
font-weight:800;
color:#0B1F2A;
letter-spacing:-0.2px;
line-height:1.15;
min-height:46px; /* ✅ makes all cards same height even if title is 2 lines */
}

.category-cta{
margin-top:6px;
display:inline-flex;
gap:8px;
align-items:center;
font-size:14px;
font-weight:600;
color:rgba(11,31,42,0.62);
text-decoration:none;
}

.category-card:hover .category-cta{
color:rgba(11,31,42,0.78);
}

/* =========================================================
   CATEGORIES / PRODUCTS – BLUE LIQUID GLASS PANEL (SYNCED)
   ========================================================= */

.categories-glass-panel{
  position:relative;
  margin:0 auto;
  max-width:1250px;
  padding:45px 35px 55px;
  border-radius:26px;
  overflow:hidden;

  /* Blue liquid glass base */
  background:
  radial-gradient(1200px 650px at 12% 8%, rgba(255,255,255,0.38), transparent 60%),
  radial-gradient(900px 600px at 88% 18%, rgba(255,255,255,0.14), transparent 65%),
  radial-gradient(1000px 700px at 18% 100%, rgba(47,93,98,0.28), transparent 72%),
  linear-gradient(135deg,
    rgba(255,255,255,0.14) 0%,
    rgba(185,215,230,0.55) 45%,
    rgba(47,93,98,0.38) 100%
  );

  border:1px solid rgba(255,255,255,0.55);

  box-shadow:
    0 60px 140px rgba(1,20,37,0.45),
    inset 0 3px 14px rgba(255,255,255,0.65),
    inset 0 -25px 45px rgba(1,20,37,0.25);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}



/* highlight + depth */
.categories-glass-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.12) 20%,
      rgba(255,255,255,0) 50%
    ),
    radial-gradient(
      1400px 700px at 50% 120%,
      rgba(1,20,37,0.35),
      transparent 60%
    );

  opacity:1;
}



/* micro texture */
.categories-glass-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background-image:
    radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);

  background-size:6px 6px;

  opacity:0.18;

  mix-blend-mode:overlay;
}

/* =========================================================
   HOMEPAGE – ABOUT SECTION
   ========================================================= */

.home-about{
  background: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(230,230,224,0.8);
  border-bottom: 1px solid rgba(230,230,224,0.8);
}

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: center;
}

@media (max-width: 992px){
  .two-col{ grid-template-columns: 1fr; }
}

.about-placeholder{
  height: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
}

/* =========================================================
   HOMEPAGE – WHY / BUSINESS ADVANTAGES (BLUE GLASS SECTION)
   Used by: resources/views/components/home/why.blade.php
   ========================================================= */

/* Section background (blue gradient + soft blobs) */
.trust-blue{
  position: relative;
  padding: 90px 0;
  overflow: hidden;

  background:
    radial-gradient(900px 420px at 15% 20%, rgba(92,124,137,0.22) 0%, rgba(92,124,137,0) 60%),
    radial-gradient(700px 380px at 85% 25%, rgba(31,73,89,0.22) 0%, rgba(31,73,89,0) 60%),
    linear-gradient(135deg, #0B2233 0%, #13384A 45%, #0B2233 100%);
}

/* soft glow layer */
.trust-blue::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(520px 340px at 15% 30%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(420px 280px at 80% 25%, rgba(92,124,137,0.20) 0%, rgba(92,124,137,0) 62%),
    radial-gradient(520px 340px at 70% 80%, rgba(31,73,89,0.22) 0%, rgba(31,73,89,0) 62%),
    radial-gradient(520px 340px at 80% 70%, rgba(244,124,32,0.12) 0%, rgba(244,124,32,0) 65%);
  filter: blur(18px);
  pointer-events:none;
  z-index: 0;
}

/* keep content above blobs */
.trust-blue > *{
  position: relative;
  z-index: 1;
}

/* Heading text color inside blue section */
.trust-blue .section-eyebrow,
.trust-blue .eyebrow{
  color: rgba(255,255,255,0.75);
}

.trust-blue .home-section-title,
.trust-blue h2,
.trust-blue h3{
  color: #fff;
}

.trust-blue .home-section-sub,
.trust-blue .section-head p{
  color: rgba(255,255,255,0.82);
}

/* Grid */
.trust-blue .why-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

@media (max-width: 992px){
  .trust-blue .why-grid{ grid-template-columns: 1fr; }
}

/* Glass cards */
.trust-blue .why-card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 22px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 26px 70px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* subtle diagonal texture */
.trust-blue .why-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 14px,
      rgba(255,255,255,0.02) 14px,
      rgba(255,255,255,0.02) 28px
    );
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* glass shine */
.trust-blue .why-card::after{
  content: "";
  position: absolute;
  left: -40%;
  top: -60%;
  width: 120%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.30),
    rgba(255,255,255,0.10),
    transparent 55%
  );
  transform: rotate(25deg);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* keep content above effects */
.trust-blue .why-card > *{
  position: relative;
  z-index: 2;
}

.trust-blue .why-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.26);
  box-shadow:
    0 30px 85px rgba(0,0,0,0.45),
    0 0 60px rgba(244,124,32,0.22),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

/* Icon badge */
.trust-blue .icon-badge{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Icon color */
.trust-blue .why-icon svg{
  color: #C85A17;
  stroke: #C85A17;
}

.trust-blue .why-card:hover .why-icon svg{
  color: #F47C20;
  stroke: #F47C20;
}

/* Text */
.trust-blue .why-title{
  color: #fff;
  font-weight: 900;
  margin-bottom: 8px;
}

.trust-blue .why-text{
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
}

/* =========================================================
   HOMEPAGE – INFO BOX (SUSTAINABILITY)
   ========================================================= */

.info-box{
  max-width: 920px;
  margin: 18px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
}

.info-list{
  margin: 0;
  padding-left: 18px;
  color: #374151;
  line-height: 1.9;
}

/* =========================================================
   FEATURES SECTION – LIQUID GLASS (PREMIUM)
   ========================================================= */

.features-glass{
  position: relative;
  padding: 20px 0;
  background: transparent;
  overflow: hidden;
}

.features-glass .glass-blobs{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.features-glass .blob{
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.28;
  transform: translate3d(0,0,0);
}

.features-glass .blob-navy{
  left: -120px;
  top: 40px;
  background: radial-gradient(circle at 30% 30%, rgba(27,38,59,0.55), rgba(27,38,59,0.00) 65%);
}

.features-glass .blob-orange{
  right: -140px;
  top: 120px;
  background: radial-gradient(circle at 40% 40%, rgba(244,124,32,0.55), rgba(244,124,32,0.00) 65%);
}

.features-glass .blob-sky{
  left: 35%;
  bottom: -180px;
  background: radial-gradient(circle at 40% 40%, rgba(58,90,116,0.45), rgba(58,90,116,0.00) 65%);
}

.features-glass-grid{
  position: relative;
  z-index: 1;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.glass-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 24px 22px 20px;
  background: rgba(242,242,238,0.58);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.glass-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0.00) 60%
  );
  opacity: 0.65;
  pointer-events: none;
}

.glass-card::after{
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 4px;
  height: 40px;
  background: linear-gradient(to bottom, #f47c20, #ffb37a);
  border-radius: 4px;
}

.glass-card:hover{
  transform: translateY(-10px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.12),
    0 0 40px rgba(244,124,32,0.25);
  border-color: rgba(255,255,255,0.85);
}

.glass-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27,38,59,0.08);
  border: 1px solid rgba(27,38,59,0.12);
  margin-bottom: 14px;
}

.glass-icon img{
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

.glass-title{
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #1B263B;
  line-height: 1.35;
}

.glass-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(27,38,59,0.72);
}

@media (max-width: 992px){
  .features-glass-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .features-glass{ padding: 70px 0; }
  .features-glass-grid{ grid-template-columns: 1fr; gap: 18px; }
  .glass-card{ padding: 22px 18px 18px; }
}

 /* BIG GLASS PANEL */
.features-glass-panel{
  position: relative;
  background: rgba(255, 244, 235, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 28px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
}

.features-glass-panel::after{
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle,
    rgba(244,124,32,0.25),
    rgba(244,124,32,0.08),
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
}

.features-glass-panel::before{
  content: "";
  position: absolute;
  left: -40%;
  top: -60%;
  width: 120%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0.12),
    transparent 50%
  );
  transform: rotate(25deg);
  pointer-events: none;
}

/* =========================================================
   TRUST SECTION – BLUE TEXTURE + GLASS CARDS
   ========================================================= */

.trust-section.trust-blue{
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(700px 380px at 85% 30%, rgba(244,124,32,0.10) 0%, rgba(244,124,32,0) 60%),
    linear-gradient(135deg, #0B2233 0%, #13384A 45%, #0B2233 100%);
}

.trust-section.trust-blue::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 14px,
      rgba(255,255,255,0.00) 14px,
      rgba(255,255,255,0.00) 34px
    );
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.trust-section.trust-blue::after{
  content:"";
  position:absolute;
  inset:-140px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(520px 340px at 20% 55%, rgba(92,124,137,0.28) 0%, rgba(92,124,137,0) 62%),
    radial-gradient(520px 340px at 80% 30%, rgba(31,73,89,0.30) 0%, rgba(31,73,89,0) 62%),
    radial-gradient(520px 340px at 70% 85%, rgba(244,124,32,0.12) 0%, rgba(244,124,32,0) 65%);
  filter: blur(22px);
  opacity: 1;
}

.trust-section.trust-blue > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   HOMEPAGE – BUSINESS SOLUTIONS (BACKGROUND IMAGE FIX)
   ========================================================= */

.home-solutions{
  position: relative;
  padding: 60px 0;
  border-top: 1px solid rgba(230,230,224,0.8);
  border-bottom: 1px solid rgba(230,230,224,0.8);

  /* ✅ FORCE background image */
  background: url("/images/solutions-bg.jpg") center / cover no-repeat !important;
  background-color: transparent !important;

  /* ensures overlay stacking behaves */
  isolation: isolate;
}

/* ✅ LIGHT overlay so image is visible */
.home-solutions::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 80% 25%, rgba(244,124,32,0.10), transparent 60%),
    linear-gradient(180deg, rgba(242,242,238,0.16), rgba(242,242,238,0.22));
  pointer-events:none;
  z-index: 0;
}

.home-solutions > *{
  position: relative;
  z-index: 1;
}

/* wrapper must not override */
.home-solutions .home-solutions-wrapper{
  background: transparent !important;
}

/* glass panel */
.home-solutions .solutions-glass{
  position: relative;
  margin: 28px auto 0;
  max-width: 1250px;
  padding: 34px 28px 28px;
  border-radius: 28px;

  background: rgba(242,242,238,0.62);
  border: 1px solid rgba(255,255,255,0.70);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.65);

  overflow: hidden;
}

.home-solutions .solutions-glass::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.12) 35%,
    rgba(255,255,255,0.00) 60%
  );
  opacity: 0.70;
  pointer-events: none;
}

.home-solutions .solutions-glass::after{
  content:"";
  position:absolute;
  right: -140px;
  top: -140px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle,
    rgba(244,124,32,0.26),
    rgba(244,124,32,0.10),
    transparent 70%
  );
  filter: blur(28px);
  pointer-events: none;
}

.home-solutions .solutions-glass > *{
  position: relative;
  z-index: 1;
}

/* rings row */
.home-solutions .rings{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 30px;

  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.home-solutions .rings::-webkit-scrollbar{ height: 8px; }
.home-solutions .rings::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
}

/* circle */
.home-solutions .ring{
  flex: 0 0 auto;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.82);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 22px 60px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 0 0 1px rgba(0,0,0,0.035);

  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.home-solutions .ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.78), rgba(255,255,255,0.00) 58%),
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.018) 0px,
      rgba(0,0,0,0.018) 10px,
      rgba(255,255,255,0.00) 10px,
      rgba(255,255,255,0.00) 22px
    ),
    linear-gradient(
      120deg,
      rgba(255,255,255,0.62),
      rgba(255,255,255,0.12) 35%,
      rgba(255,255,255,0.00) 60%
    );
  opacity: 0.95;
  pointer-events:none;
}

.home-solutions .ring::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 22px;
  width: 4px;
  height: 48px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #f47c20, #ffb37a);

  opacity: 0;
  transform: translateX(-6px);
  transition: 0.25s ease;
  pointer-events:none;
}

.home-solutions .ring:hover{
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.14),
    0 0 60px rgba(244,124,32,0.20),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 0 0 1px rgba(0,0,0,0.04);
}

.home-solutions .ring:hover::after{
  opacity: 1;
  transform: translateX(0);
}

/* icon inside circle */
.home-solutions .ring-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(244,124,32,0.10);
  border: 1px solid rgba(244,124,32,0.14);

  margin-bottom: 12px;
  color: #C85A17;
}

.home-solutions .ring-text{
  font-weight: 900;
  color: #1B263B;
  font-size: 16px;
}

/* text under circles */
.home-solutions .solutions-text{
  max-width: 920px;
  margin: 22px auto 0;
  text-align: center;
  color: #374151;
  line-height: 1.85;
  font-size: 15px;
}

.home-solutions .solutions-text p{
  margin: 0 0 12px;
}
.home-solutions .solutions-text p:last-child{
  margin-bottom: 0;
}

@media (max-width: 576px){
  .home-solutions .ring{
    width: 150px;
    height: 150px;
  }
}

/* =========================================================
   HOMEPAGE – FINAL CTA
   ========================================================= */

.home-cta{
  padding: 48px 0 60px;
}

.cta-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 26px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cta-title{
  font-weight: 950;
  letter-spacing: -0.6px;
  margin: 0 0 8px;
  font-size: 28px;
}

.cta-text{
  margin: 0;
  color: #374151;
  line-height: 1.7;
  max-width: 760px;
}

.cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 992px){
  .cta-box{
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-actions{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   CTA BACKGROUND IMAGE + ORANGE PREMIUM OVERLAY
   ========================================================= */

.home-cta{
  position: relative;
  padding: 48px 0 60px;
  background: transparent !important;
}

/* CTA BOX becomes the image container */
.cta-box{
  position: relative;
  overflow: hidden;
  border-radius: 26px;

  /* liquid glass base */
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.40);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Background image INSIDE the box */
.cta-box::before{
  content:"";
  position:absolute;
  inset:0;

  background: url("/images/cta-bg.jpg") center/cover no-repeat;

  /* slightly soften image */
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.03);
  z-index: 0;
}

/* Glass overlay + subtle light wash (keeps text readable) */
.cta-box::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(900px 420px at 15% 25%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.38));

  z-index: 1;
}

/* Keep all content above the image+overlay */
.cta-box > *{
  position: relative;
  z-index: 2;
}

/* Text colors for premium readability */
.cta-title{
  color: #111;
}

.cta-text{
  color: rgba(17,17,17,0.75);
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background: #F7F7F2;
  border-top: 1px solid var(--line);
}
.footer-links{
  display: grid;
  gap: 8px;
}
.footer-links a{
  color: #374151;
  text-decoration: none;
  font-size: 14px;
}
.footer-links a:hover{ text-decoration: underline; }

/* =========================================================
   MAINTENANCE OVERLAY (Visitors see, you bypass with ?bypass=KEY)
   ========================================================= */

#maintenance-overlay{
  position: fixed;
  inset: 0;
  background: rgba(242,242,238,0.96);
  display: flex;                /* visible by default */
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 18px;
}

#maintenance-overlay .maintenance-box{
  background: #fff;
  padding: 54px 46px;
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.10);
}

#maintenance-overlay .maintenance-brand{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

#maintenance-overlay h1{
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  margin: 10px 0 14px;
  color: #111;
}

#maintenance-overlay p{
  margin: 0 0 10px;
  color: rgba(17,17,17,0.72);
  line-height: 1.6;
  font-size: 15px;
}

#maintenance-overlay .maintenance-email{
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(237,241,242,0.9);
  border: 1px solid rgba(217,218,214,1);
  color: #111;
}

/* When bypass is active, hide overlay */
html.bypass-maintenance #maintenance-overlay{
  display: none !important;
}