/* ===================================================
         TOKENS
         =================================================== */
:root {
    --R: #ee2b24;
    --Rd: #c41e18;
    --Rg: rgba(238, 43, 36, .09);
    --Rb: rgba(238, 43, 36, .18);
    --N: #0d0d0d;
    --NM: #0D1F44;
    --NL: #162B5F;
    --W: #000000;
    --Off: #0a0a0a;
    --G1: #111111;
    --G2: #1a1a1a;
    --G4: #666666;
    --Td: #ffffff;
    --Tb: rgba(255,255,255,0.78);
    --Tm: rgba(255,255,255,0.50);
    --Br: rgba(255,255,255,0.10);
    --r4: 4px;
    --r8: 8px;
    --r12: 12px;
    --r16: 16px;
    --r24: 24px;
    --r99: 999px;
    --shadow: 0 20px 60px rgba(0,0,0,0.55);
    --FH: 'Outfit', sans-serif;
    --FB: 'DM Sans', sans-serif;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t: .2s;
  --red:#ee2b24;
  --red-lo:rgba(238,43,36,0.1);
  --red-md:rgba(238,43,36,0.18);
  --navy:#0c0c0c;
  --navy-mid:#141414;
  --white:#ffffff;
  --g3:var(--gray-300);
  --gray-300:#c8c8c8;
  --gray-400:#8a8a8a;
  --gray-600:#555555;
  --card:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.09);
  --hover:rgba(255,255,255,0.07);
  --tr:0.28s cubic-bezier(0.4,0,0.2,1);
  /* Light palette */
  --lt-bg:#000000;
  --lt-surface:#0d0d0d;
  --lt-border:rgba(255,255,255,0.10);
  --lt-card:rgba(255,255,255,0.04);
  --lt-hover:rgba(255,255,255,0.07);
  --lt-text:#ffffff;
  --lt-muted:rgba(255,255,255,0.55);
  --lt-faint:rgba(255,255,255,0.22);

  --tr:0.25s cubic-bezier(0.4,0,0.2,1);

}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--FB) !important;
    color: #ffffff;
    background: #000000;
    overflow-x: hidden;
    line-height: 1.65;
    font-size: 18px !important;
    font-weight: 400;
}

a {
    text-decoration: none !important;
    color: inherit ;
}

ul {
    list-style: none ;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font: inherit
}

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

/* ===================================================
         TOPBAR
         =================================================== */
.topbar {
    background: #000000;
    font-family: var(--FH);
    font-size: .87rem;
    padding: 7px 0;
    z-index: 200;
    position: relative;
}

.tb-in {
    max-width: 1400px;
    margin: auto;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.site-header{position:sticky;top:0;z-index:1100;width:100%}


.tb-left {
    display: flex;
    gap: 20px
}

.tb-left a {
    color: rgba(255, 255, 255, .68);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--t)
}

.tb-left a:hover {
    color: #fff
}

.tb-pill {
    background: #e7e5e5;
    color: #000;
    font-weight: 700;
    font-size: .72rem;
    padding: 3px 13px;
    border-radius: var(--r99);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background var(--t);
    animation: glow 3s ease-in-out infinite;
}

.tb-pill:hover {
    background: var(--Rd)
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(238, 43, 36, .45)
    }

    50% {
        box-shadow: 0 0 0 5px transparent
    }
}

/* ===================================================
         NAVBAR
         =================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgba(0,0,0,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    transition: box-shadow var(--t)
}

.navbar.sh {
    box-shadow: 0 4px 24px rgba(0,0,0,0.55)
}

.nav-in {
    max-width: 1400px;
    margin: auto;
    padding: 10px 28px;
    display: flex;
    align-items: center;
    height: 80px;
    gap: 0
}

/* logo */
.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin-right: 24px
}

.logo-box {
    width: 34px;
    height: 34px;
    background: var(--R);
    border-radius: var(--r8);
    display: grid;
    place-items: center;
    font-family: var(--FH);
    font-weight: 800;
    font-size: .9rem;
    color: #fff;
    box-shadow: 0 4px 14px rgba(238, 43, 36, .35)
}

.logo-name {
    font-family: var(--FH);
    font-weight: 800;
    font-size: 1rem;
    color: var(--N);
    letter-spacing: -.01em
}

.logo-name em {
    font-style: normal;
    color: var(--R)
}

/* nav items */
.nav-list {
    display: flex;
    align-items: stretch;
    height: 100%;
    flex: 1
}

.ni {
    position: static;
    display: flex;
    align-items: stretch
}

.nt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    font-family: var(--FH);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    transition: color var(--t), border-color var(--t);
    white-space: nowrap;
    height: 100%;
}

.nt .arr {
       font-size: 18px;
    display: inline-block;
    transition: transform var(--t)
}

/*.ni:hover>.nt,
.ni.on>.nt {
    color: var(--R);
    border-bottom-color: var(--R)
}*/

.ni:hover .arr {
    transform: rotate(180deg)
}

a.nt {
    display: flex
}

/* nav actions */
.nav-right {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    flex-shrink: 0
}

.btn-ghost {
    padding: 7px 18px;
    font-family: var(--FH);
    font-size: .8rem;
    font-weight: 500;
    border: 1.5px solid rgba(255,255,255,0.18);
    color: #ffffff;
    border-radius: var(--r99);
    transition: all var(--t)
}

.btn-ghost:hover {
    border-color: var(--R);
    color: var(--R);
    background: var(--Rg)
}

.btn-solid {
    padding: 8px 19px;
    font-family: var(--FH);
    font-size: 15px;
    font-weight: 500;
    background: var(--R);
    color: #fff;
    border-radius: var(--r99);
    box-shadow: 0 4px 16px rgba(238, 43, 36, .3);
    transition: all var(--t)
}

.btn-solid:hover {
    background: var(--Rd);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(238, 43, 36, .4)
}

.ham {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    margin-left: 10px
}

.ham span {
    display: block;
    width: 21px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all var(--t)
}

/* ===================================================
         FLYOUT SUBMENU
         =================================================== */

/* Give each nav item a positioning context */
.ni.has-fly {
    position: relative;
}

/* The flyout panel */
.fly-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #0d0d0d;
    border-top: 2.5px solid var(--R);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 16px 48px rgba(0,0,0,0.75);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease),
                visibility .2s var(--ease),
                transform .2s var(--ease);
    pointer-events: none;
}

/* Open state — driven by JS class */
.ni.fly-open > .fly-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Individual flyout links */
.fly-sub a {
    display: block;
    padding: 10px 18px;
    font-family: var(--FH);
    font-size: .88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
    transition: color .2s var(--ease), background .2s var(--ease), padding-left .2s var(--ease);
}

.fly-sub a:last-child {
    border-bottom: none;
}

/*.fly-sub a:first-child {
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    letter-spacing: .01em;
}*/

.fly-sub a:hover {
       color: #fff;
    background: #242424;
    padding-left: 24px;
}

/* Responsive — flyout shifts to inline block on narrow screens
   (below 960 px the hamburger takes over, but we keep flyout
    functional for the in-between tablet range) */
@media (max-width: 960px) {
    .fly-sub {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--R);
        border-top: none;
        background: rgba(255,255,255,0.04);
        margin: 0 11px 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s var(--ease);
    }

    .ni.fly-open > .fly-sub {
        max-height: 600px;
        pointer-events: auto;
    }

    .fly-sub a {
        padding: 8px 14px;
        white-space: normal;
    }

    .fly-sub a:hover {
        padding-left: 18px;
    }
}

/* ===================================================
         MEGA PANEL (shared base)
         =================================================== */
.mega {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mega-top, 120px);
    background: #0d0d0d;
    border-top: 3px solid var(--R);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease), transform var(--t) var(--ease);
    pointer-events: none;
}

/* Show/hide is now controlled entirely by JS (teleport fix — see script) */
.mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto
}

.mega-wrap {
    max-width: 1400px;
    margin: auto;
    padding: 26px 28px 30px
}

/* columns inside mega */
.mega-grid {
    display: grid;
    gap: 0
}

.col {
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.08)
}

.col:first-child {
    padding-left: 0
}

.col:last-child {
    border-right: none;
    padding-right: 0
}

.col-hd {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08)
}

.col-hd-t {
    font-family: var(--FH);
    font-weight: 800;
    font-size: .9rem;
    color: #ffffff;
    line-height: 1.25
}

.col-hd-t a {
    color: inherit;
    transition: color var(--t)
}

.col-hd-t a:hover {
    color: var(--R)
}

.col-hd-s {
   font-size: .88rem;
    color: rgba(255,255,255,0.52);
    font-weight: 500;
    margin-top: 9px;
    line-height: 1.4;
}

/* mega link row */
.mlink {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--r8);
    transition: background var(--t);
    margin: 0 -9px
}

.mlink:hover {
    background: #b7b4b417;
}

.mlink:hover .mlt {
    color: var(--R)
}

.mli {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.07);
    border-radius: var(--r4);
    display: grid;
    place-items: center;
    font-size: .88rem;
    transition: background var(--t)
}

.mlink:hover .mli {
    background: var(--Rb)
}

.mlt {
    font-family: var(--FH);
       font-weight: 500;
    font-size: .91rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.25;
    transition: color var(--t)
}

.mld {
      font-size: .82rem;
    color: var(--Tm);
    line-height: 1.4;
    margin-top: 4px;
}

/* sub-links (indented) */
.sub-list {
    margin: 3px 0 7px 16px
}

.slink {
 display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: var(--r4);
    font-family: var(--FH);
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.60);
    transition: all var(--t);
    margin: 0 -7px;
}

.slink:hover {
    background: var(--Rg);
    color: var(--R)
}

.slink::before {
    content: '›';
    color: var(--G4);
    font-size: .72rem;
    transition: color var(--t)
}

.slink:hover::before {
    color: var(--R)
}

/* yellow highlight box */
.hl-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(232,200,74,0.08);
    border: 1px solid rgba(232,200,74,0.25);
    border-radius: var(--r8);
    padding: 10px 13px;
    margin-top: 5px;
    transition: background var(--t)
}

.hl-box:hover {
    background: rgba(232,200,74,0.14)
}

.hl-t {
    font-family: var(--FH);
    font-weight: 800;
    font-size: .84rem;
    color: #E8C84A
}

.hl-d {
    font-size: .7rem;
    color: rgba(232,200,74,0.70);
    margin-top: 1px
}

/* red CTA card inside mega */
.cta-card {
    background: linear-gradient(135deg, var(--R) 0%, var(--Rd) 100%);
    border-radius: var(--r12);
    padding: 18px 16px;
    margin-top: 4px
}

.cta-card-t {
    font-family: var(--FH);
    font-weight: 800;
    font-size: .88rem;
    color: #fff;
    margin-bottom: 4px
}

.cta-card-d {
    font-size: .72rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 12px;
    line-height: 1.5
}

.cta-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: var(--R);
    font-family: var(--FH);
    font-weight: 800;
    font-size: .78rem;
    padding: 7px 15px;
    border-radius: var(--r99);
    transition: all var(--t)
}

.cta-card-btn:hover {
    background: var(--Off);
    transform: translateY(-1px)
}

/* featured snippet */
.feat {
 background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r8);
    padding: 13px 14px;
    margin-bottom: 9px;
}

.feat-tag {
    font-size: .63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:rgba(255,255,255,0.55);
    margin-bottom: 4px
}

.feat-t {
    font-family: var(--FH);
    font-weight: 700;
    font-size: .81rem;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 6px
}

.feat-l {
    font-family: var(--FH);
    font-weight: 700;
    font-size: .73rem;
    color: var(--R)
}

/* ===================================================
         MEGA — ABOUT (3 cols)
         =================================================== */
#mega-about .mega-grid {
    grid-template-columns: 1fr 1fr 1.1fr
}

/* ===================================================
         MEGA — PRODUCTS (2 main + 1 highlight + 1 cta)
         =================================================== */
#mega-prod .mega-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr
}

/* ===================================================
         MEGA — SOLUTIONS (3 cols)
         =================================================== */
#mega-sol .mega-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

/* ===================================================
         MEGA — INDUSTRIES (3 content + 1 cta)
         =================================================== */
#mega-ind .mega-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.ind-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0
}

/* ===================================================
         MEGA — RESOURCES (3 cols)
         =================================================== */
#mega-res .mega-grid {
    grid-template-columns: 1fr 1fr 1fr
}

/* ===================================================
         MEGA — CONTACT (3 cols)
         =================================================== */
#mega-contact .mega-grid {
    grid-template-columns: 1fr 1fr 1fr
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-top: 2px
}

.ci-label {
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--Tm);
    margin-bottom: 3px
}

.ci-val {
    font-family: var(--FH);
    font-weight: 700;
    font-size: .9rem;
    color: var(--N);
    transition: color var(--t)
}

.ci-val:hover {
    color: var(--R)
}

.ci-val-sm {
    font-size: .82rem;
    font-weight: 500;
    color: var(--Tb);
    line-height: 1.5
}

/* ===================================================
         MOBILE NAV
         =================================================== */
.mob {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: #0a0a0a;
    transform: translateX(100%);
    transition: transform .28s var(--ease);
    overflow-y: auto;
        z-index: 9999;
}

.mob.open {
    transform: translateX(0)
}

.mob-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    background: #0a0a0a;
    z-index: 1
}

.mob-x {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: grid;
    place-items: center;
    font-size: .9rem;
    color: #ffffff
}

.mob-s {
    border-bottom: 1px solid rgba(255,255,255,0.08)
}

.mob-s-t {
    padding: 12px 22px;
    font-family: var(--FH);
    font-weight: 700;
    font-size: .9rem;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.mob-arr {
    font-size: .6rem;
    transition: transform var(--t)
}

.mob-s.exp .mob-arr {
    transform: rotate(180deg)
}

.mob-body {
    display: none;
    padding: 4px 0 10px
}

.mob-s.exp .mob-body {
    display: block
}

.mob-body a {
    display: block;
    padding: 8px 22px 8px 34px;
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    transition: color var(--t)
}

.mob-body a:hover {
    color: var(--R)
}

.mob-ctas {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 9px
}

.mob-r {
    display: block;
    text-align: center;
    padding: 13px;
    background: var(--R);
    color: #fff;
    font-family: var(--FH);
    font-weight: 700;
    border-radius: var(--r99)
}

.mob-o {
    display: block;
    text-align: center;
    padding: 12px;
    border: 1.5px solid rgba(255,255,255,0.18);
    color: #ffffff;
    font-family: var(--FH);
    font-weight: 500;
    border-radius: var(--r99)
}

/* ===================================================
         HERO
         =================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: #000;
    padding:75px 0 75px;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 65% at 68% -8%, rgba(238, 43, 36, .055) 0%, transparent 60%);
    pointer-events: none
}

.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(220, 228, 245, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 228, 245, .09) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none
}

.hero-in {
    max-width: 1400px;
    margin: auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1
}

.h-badge {
display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff3b;
    border: 1px solid rgb(118 114 114 / 18%);
    border-radius: var(--r99);
    padding: 5px 15px;
    font-family: var(--FH);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}

.h-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: blink 1.8s ease-in-out infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(1.65)
    }
}

.hero h1 {
    font-family: var(--FH);
    font-size: clamp(2.1rem, 3.8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.3;
    color:#fff;
    margin-bottom: 20px
}

 .hero h1 .hl {
    color: var(--R);
    position: relative
}

.hero h1 .hl::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2.5px;
    background: var(--R);
    opacity: .28;
    border-radius: 2px
}

.h-p {
  
    color: #fff;

/*    max-width: 475px;*/
    margin-bottom: 32px
}

.font-h2{font-size: 2.3rem !important; }
.font-700{font-weight: 700 !important;}
.pr-5{padding-right: 13%;}
.h-acts {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 44px;
    align-items: center;
    justify-content: center;
}

.h-btn-r {
    padding: 13px 32px;
    font-size: .93rem;
    background: var(--R);
    color: #fff;
    border-radius: var(--r99);
    font-family: var(--FH);
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(238, 43, 36, .35);
    transition: all var(--t);
    display: inline-flex;
    align-items: center;
    gap: 7px
}

.h-btn-r:hover {
    background: var(--Rd);
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(238, 43, 36, .45)
}

.h-btn-o {
    padding: 13px 32px;
    font-size: .93rem;
    border: 1.5px solid var(--Br);
    color: #000;
    border-radius: var(--r99);
    font-family: var(--FH);
    font-weight: 700;
    background: #e7e5e5;
    transition: all var(--t)
}

.h-btn-o:hover {
    border-color: var(--R);
    color: var(--R)
}

.h-stats {
       display: flex;
    gap: 35px;
    flex-wrap: wrap;
    background: #ffffff12;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    padding: 30px 40px;
    width: max-content;
    margin-top: 48px;
}

.hs .hn {
    font-family: var(--FH);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--Td);
    line-height: 1
}

.hs .hn span {
    color: var(--R)
}

.hs .hl2 {
    font-size: 14px;
    color: var(--Td);
    font-weight: 500;
    margin-top: 2px
}

/* hero visual */
.h-vis {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.h-screen {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 490px;
    aspect-ratio: 4/3;
    overflow: hidden;
    box-shadow: 0 -5px 0 0 #cfc6c6, 0 36px 72px rgba(7, 17, 43, .28), 0 0 0 1px rgba(255, 255, 255, .05)
}

.sc-in {
    position: absolute;
    inset: 11px;
    background: linear-gradient(155deg, #1a1a1a 0%, #141414 58%, #1f1010 100%);
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.sc-in::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 28% 38%, rgba(238, 43, 36, .16) 0%, transparent 52%);
}

.sc-cnt {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 22px
}

.sc-lbl {
    font-family: var(--FH);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 5px
}

.sc-ttl {
    font-family: var(--FH);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.22;
    margin-bottom: 13px
}

.sc-bars {
display: flex;
    align-items: flex-end;
    gap: 5px;
    height: auto;
    justify-content: center;
    margin: 0 0 9px;
    width: 66%;
    align-items: center;
    margin: 0 auto;
}

.mq-item img {
    width: auto;
    height: 30px !important;
}


.sc-bar {
    width: 10px;
    background: linear-gradient(180deg, var(--R) 0%, rgba(238, 43, 36, .3) 100%);
    border-radius: 3px 3px 0 0;
    animation: ba 2.3s ease-in-out infinite
}

.sc-bar:nth-child(1) {
    height: 42%;
    animation-delay: 0s
}

.sc-bar:nth-child(2) {
    height: 74%;
    animation-delay: .14s
}

.sc-bar:nth-child(3) {
    height: 54%;
    animation-delay: .28s
}

.sc-bar:nth-child(4) {
    height: 88%;
    animation-delay: .42s
}

.sc-bar:nth-child(5) {
    height: 66%;
    animation-delay: .56s
}

.sc-bar:nth-child(6) {
    height: 79%;
    animation-delay: .7s
}

.sc-bar:nth-child(7) {
    height: 47%;
    animation-delay: .84s
}

.sc-bar:nth-child(8) {
    height: 70%;
    animation-delay: .98s
}

@keyframes ba {

    0%,
    100% {
        opacity: .72;
        transform: scaleY(.95)
    }

    50% {
        opacity: 1;
        transform: scaleY(1)
    }
}

.sc-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.sc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22C55E;
    animation: blink 1.6s infinite
}

.sc-status span {
    font-size: .75rem;
    color: rgba(255,255,255,0.75);
    font-family: var(--FH)
}

.fcard {
    position: absolute;
    background: #161616;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r12);
    padding: 11px 14px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.7);
    font-family: var(--FH)
}

.fc1 {
    top: 50px;
    left: -52px
}

.fc2 {
    top: 46%;
    right: -42px;
    transform: translateY(-50%)
}

.fcard .fci {
    width: 28px;
    height: 28px;
    background: var(--Rg);
    border-radius: var(--r4);
    display: grid;
    place-items: center;
    font-size: .85rem;
    margin-bottom: 5px
}

.fcard .fcv {
    font-weight: 800;
    font-size: 1.25rem;
    color: #ffffff;
    line-height: 1
}

.fcard .fcl {
    font-size: .62rem;
    color: var(--Tm);
    font-weight: 500;
    margin-top: 1px
}

.fcard .fct {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .59rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--R);
    background: var(--Rg);
    padding: 2px 8px;
    border-radius: var(--r99);
    margin-top: 5px
}

/* ===================================================
         MARQUEE
         =================================================== */
.brands {
   background: #000;
    border-top: 1px solid #ffffff12;
    border-bottom: 1px solid #ffffff12;
    padding: 28px 0;
    overflow: hidden;
}

.br-lbl {
text-align: center;
    font-family: var(--FH);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color:  #fff;;
    margin-bottom: 48px;
}

.mq {
    overflow: hidden
}

.mq-row {
    display: flex;
    gap: 52px;
    animation: mqs 26s linear infinite;
    width: max-content
}

.mq-row:hover {
    animation-play-state: paused
}

.mq-item {
    font-family: var(--FH);
    font-weight: 700;
    font-size: .98rem;
    color: #ffffff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color var(--t)
}

.mq-item:hover {
    color: var(--R)
}

.mq-item::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    opacity: .22;
    flex-shrink: 0
}

@keyframes mqs {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* ===================================================
         SHARED SECTION STYLES
         =================================================== */
section {
    padding: 88px 0
}

.ctn {
    max-width: 1400px;
    margin: auto;
    padding: 0 28px
}

.sbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--FH);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
  background: #ffffff3b;
color: #fff;
    border: 1px solid rgb(118 114 114 / 18%);
    border-radius: var(--r99);
    padding: 4px 13px;
    margin-bottom: 11px
}

.new h2 {
    font-family: var(--FH) !important;
    font-size:  2.2rem !important;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.4;
    
}

.new2 h2 {
    font-family: var(--FH) !important;
    font-size:  1.6rem !important;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.7;
    
}

.white{color: #fff !important;}

.black{color: rgba(255,255,255,0.88) !important;}

.ssub {
/*    font-size: 1rem;*/
    color: rgba(255,255,255,0.72);
    line-height: 1.72;
    max-width: 680px;
    margin-top: 10px
}

.shd {
    margin-bottom: 48px
}

.shd.ctr {
    text-align: center
}

.shd.ctr .ssub { margin:15px auto 0 }

.shd.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px
}

.btn-line {
 display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--FH);
    font-weight: 600;
    font-size: .98rem;
    color: rgba(255,255,255,0.88);
    border: 1.5px solid rgba(255,255,255,0.22);
    padding: 8px 20px;
    border-radius: var(--r99);
    transition: all var(--t);
    width:max-content !important;
}

.btn-line:hover {
    border-color: var(--R);
    color: var(--R) !important;
    background: var(--Rg)
}

/* ===================================================
         INDUSTRIES
         =================================================== */
.sec-ind {
    background: #000000;
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px
}

.ind-c {
        background: #ffffff08;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r16);
    padding: 12px;
    text-align: center;
    transition: all var(--t);    
    margin-bottom: 20px;
}

.radius-2{border-radius: 10px;}
.min-img-h2 {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.ind-c:hover {
    border-color: var(--R);
    box-shadow: 0 8px 24px rgba(238, 43, 36, .11);
    transform: translateY(-3px)
}

.ind-ic {
   width: 60px;
    height: 75px;
    background: var(--Off);
    border-radius: var(--r8);
    display: grid;
    place-items: center;
    margin: 0 auto 9px;
    font-size: 1.3rem;
    transition: background var(--t)
}

.ind-c:hover .ind-ic {
    background: var(--Rg)
}

.ind-nm {
    font-family: var(--FH);
    font-weight: 600;
    font-size: 22px;
    color: #fff;
    line-height: 1.3;
    text-align: left;
    padding-left: 10px;
}
.w-100{width: 100% !important;}
/* ===================================================
         PRODUCTS
         =================================================== */
.sec-prod {
    background: #000000
}

.prod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 19px
}

.pc {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r24);
    padding: 30px 25px;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
    transition: all var(--t)
}

.pc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--R);
    opacity: 0;
    transition: opacity var(--t)
}

.pc:hover {
    box-shadow: 0 18px 54px rgba(0,0,0,0.55);
    border-color: transparent;
    transform: translateY(-4px)
}

.pc:hover::after {
    opacity: 1
}

.pc-n {
    font-family: var(--FH);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.50);
    margin-bottom: 9px
}

.pc-ic {
    width: 55px;
    height: 55px;
/*    background: var(--Rg);*/
    border-radius: var(--r8);
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    margin-bottom: 15px;
    padding: 2px;
}

.pc-t {
    font-family: var(--FH);
    font-size: 1.18rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 9px
}

.pc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 11px
}

.pc-tag {
font-size: .65rem;
    font-weight: 500;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    padding: 3px 9px;
    border-radius: var(--r99);
}

.pc-d {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.64;
    margin-bottom: 19px
}

.pc-l {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--FH);
    font-weight: 700;
    font-size: .89rem;
        color: rgba(255,255,255,0.88);
    transition: gap var(--t)
}

.pc-l:hover {
    gap: 8px
}

.pc-dk {
    background:linear-gradient(135deg, #1e1e1e, #141414);
    border: none
}

.pc-dk .pc-n {
    color: rgba(255, 255, 255, 1)
}

.pc-dk .pc-ic {
    background: rgba(255, 255, 255, .08)
}

.pc-dk .pc-t {
    color: #fff
}

.pc-dk .pc-d {
    color: rgba(255, 255, 255, .78)
}

.pc-dk .pc-l {
    color: #fff;
}

/* ===================================================
         SERVICES
         =================================================== */
.sec-svc {
    background: #000000;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px
}

.sc2 {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r24);
    padding: 22px 19px;
    transition: all var(--t)
}

.sc2:hover {
    border-color: var(--R);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(238, 43, 36, .09)
}

.sic {
    font-size: 1.75rem;
    margin-bottom: 11px
}

.sn {
    font-family: var(--FH);
    font-weight: 700;
    font-size: .9rem;
    color: #ffffff;
    margin-bottom: 6px
}

.sd {
    font-size: .82rem;
    color: rgba(255,255,255,0.60);
    line-height: 1.6
}

/* ===================================================
         WHY E3 (dark)
         =================================================== */
.sec-why {
    background: var(--N);
    position: relative;
    overflow: hidden
}

.sec-why::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 82% 50%, rgb(245 245 245 / 14%) 0%, transparent 68%), radial-gradient(ellipse 35% 40% at 5% 82%, rgb(100 100 96 / 7%) 0%, transparent 58%);
    pointer-events: none
}

.sec-why h2 {
    color: #fff
}

.sec-why .ssub {
    color: rgba(255, 255, 255, .6)
}

.sec-why .sbadge {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9)
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    position: relative;
    z-index: 1
}

.fc3 {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--r24);
    padding: 26px 22px;
    backdrop-filter: blur(6px);
    transition: all var(--t)
}

.fc3:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(238, 43, 36, .38);
    transform: translateY(-3px)
}

.fi {
    width: 46px;
    height: 46px;
    background: var(--R);
    border-radius: var(--r8);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    margin-bottom: 13px;
    box-shadow: 0 5px 16px rgba(238, 43, 36, .38)
}

.ft {
    font-family: var(--FH);
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 7px
}

.fd {
    font-size: .9rem;
    color: rgba(255, 255, 255, .54);
    line-height: 1.6
}

/* ===================================================
         PROCESS
         =================================================== */
.sec-proc {
    background: #000000
}

.proc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative
}

.proc-grid::before {
    content: '';
    position: absolute;
    top: 47px;
    left: calc(16.66% + 48px);
    right: calc(16.66% + 48px);
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.04))
}

.proc-s {
    text-align: center;
    padding: 32px 24px
}

.pnum {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--R);
    display: grid;
    place-items: center;
    margin: -18px auto 40px;
    font-family: var(--FH);
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 7px 22px rgba(238,43,36,0.35);
}

.pt {
    font-family: var(--FH);
    font-weight: 700;
    font-size: 19px;
    color: #ffffff;
    margin-bottom: 8px
}

/*.pd {
    font-size: .93rem;
    color: var(--Tb);
    line-height: 1.65
}
*/
/* ===================================================
         STATS
         =================================================== */
.stats {
    background: linear-gradient(135deg, #1e1e1e, #141414);
    padding: 64px 0
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px
}

.si {
    text-align: center
}

.sv {
    font-family: var(--FH);
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.03em
}

.sv em {
    font-style: normal;
    color: rgba(255, 255, 255, .5)
}

.sl {
    font-size: .89rem;
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
    margin-top: 14px;
}

/* ===================================================
         TESTIMONIAL
         =================================================== */
.sec-testi {
    background: #000000;
}

.testi-w {
    max-width: 840px;
    margin: 0 auto;
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r24);
    padding: 50px;
    position: relative;
    overflow: hidden
}

.testi-w::before {
    content: '\201C';
    position: absolute;
    top: -22px;
    left: 28px;
    font-size: 12rem;
    font-family: var(--FH);
    font-weight: 800;
    color: var(--R);
    opacity: .055;
    line-height: 1;
    pointer-events: none
}

.testi-stars {
    display: flex;
    gap: 3px;
    color: #F59E0B;
    font-size: 1.25rem;
margin-bottom: 7px;
    margin-top: 16px;
}

.testi-tx {
    color: rgba(255,255,255,0.88);
    line-height: 1.68;
    font-style: italic;
    margin-bottom: 24px;
    position: relative;
    z-index: 1
}

.testi-auth {
    display: flex;
    align-items: center;
    gap: 13px
}

.testi-av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--R);
    display: grid;
    place-items: center;
    font-family: var(--FH);
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0
}

.testi-nm {
    font-family: var(--FH);
    font-weight: 700;
    color: #ffffff;
    font-size: 18px;
}

.testi-rl {
    font-size: .78rem;
    color: var(--Tm)
}

.testi-tg {
        display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--R);
    background: var(--Rg);
    padding: 2px 9px;
    border-radius: var(--r99);
    margin-top: 9px;
}

/* ===================================================
         CERTS
         =================================================== */
.sec-cert {
    background: #000000
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px
}

.cc {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r12);
    padding: 19px 11px;
    text-align: center;
    transition: all var(--t)
}

.cc:hover {
    border-color: var(--R);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5)
}

.cci {
    font-size: 1.75rem;
    margin-bottom: 7px
}

.ccn {
    font-family: var(--FH);
  font-size: .88rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3
}

.loc-g {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px;
    max-width: 640px;
    margin: 44px auto 0
}

.lc {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r16);
    padding: 22px 20px;
    text-align: center
}

.lcf {
    font-size: 1.9rem;
    margin-bottom: 6px
}

.lcn {
    font-family: var(--FH);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px
}

.lcd {
    font-size: .78rem;
    color: rgba(255,255,255,0.60);
    line-height: 1.55
}

/* ===================================================
         BLOG
         =================================================== */
.sec-blog {
    background: #000000
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 19px
}

.bc {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r24);
    overflow: hidden;
    transition: all var(--t)
}

.bc:hover {
    box-shadow: 0 18px 54px rgba(0,0,0,0.6);
    transform: translateY(-3px)
}

.bth {
    height: 270px;
    background: linear-gradient(135deg, var(--NM), var(--NL));
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    position: relative;
    overflow: hidden
}

.bcat {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-family: var(--FH);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(5px);
    padding: 3px 9px;
    border-radius: var(--r99)
}

.bb {
    padding: 19px
}

.bdt {
    font-size: .69rem;
    color: rgba(255,255,255,0.40);
    font-weight: 500;
    margin-bottom: 5px
}

.bt {
    font-family: var(--FH);
      font-weight: 600;
    font-size: 1.3rem;
    color: #ffffff;
    line-height: 1.38;
    margin-bottom: 10px;
    transition: color var(--t)
}

.bc:hover .bt {
    color: var(--R)
}

.br {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--FH);
    font-weight: 700;
    font-size: .77rem;
    color: var(--R);
    transition: gap var(--t)
}

.br:hover {
    gap: 7px
}

/* ===================================================
         CTA BANNER
         =================================================== */
.sec-cta {
    background: linear-gradient(135deg, var(--R) 0%, var(--Rd) 52%, #620000 100%);
    padding: 88px 0;
    position: relative;
    overflow: hidden
}

.sec-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 75% at 50% 50%, rgba(238, 43, 36, .16) 0%, transparent 62%);
    pointer-events: none
}

.cta-in {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    margin: 0 auto
}

.cta-in h2 {
    color: color: var(--N);
    margin-bottom: 12px
}

.cta-in p {
    color: rgba(255,255,255,0.78);
    margin-bottom: 30px
}

.cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.cta-r {
    padding: 13px 34px;
    font-size: .93rem;
    background: var(--R);
    color: #fff;
    border-radius: var(--r99);
    font-family: var(--FH);
    font-weight: 800;
    box-shadow: 0 6px 22px rgba(238, 43, 36, .32);
    transition: all var(--t)
}

.cta-r:hover {
    background: var(--Rd);
    transform: translateY(-2px)
}

.cta-g {
    padding: 12px 34px;
    font-size: .93rem;
    border: 1.5px solid rgba(255, 255, 255, .24);
    color: #fff;
    border-radius: var(--r99);
    font-family: var(--FH);
    font-weight: 700;
    transition: all var(--t)
}

.cta-g:hover {
    border-color: rgba(255, 255, 255, .52);
    background: rgba(255, 255, 255, .07)
}

/* ===================================================
         FOOTER
         =================================================== */
.footer {
    background: #0d0d0d;
    color: rgba(255, 255, 255, .52);
    padding: 66px 0 28px
}

.ft-g {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 42px;
    padding-bottom: 46px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    margin-bottom: 26px
}

.ft-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom:30px
}

.ft-mk {
    width: 32px;
    height: 32px;
    background: var(--R);
    border-radius: var(--r8);
    display: grid;
    place-items: center;
    font-family: var(--FH);
    font-weight: 800;
    font-size: .88rem;
    color: #fff
}

.ft-nm {
    font-family: var(--FH);
    font-weight: 800;
    font-size: .98rem;
    color: #fff
}

.ft-tg {
    margin-bottom: 25px;
}

.ft-ct {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.ft-ct a,
.ft-ct span {
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    transition: color var(--t)
}

.ft-ct a:hover {
    color: var(--R)
}

.ft-col h4 {
    font-family: var(--FH);
    font-weight: 500;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 28px
}

.ft-col ul {
    display: flex;
    flex-direction: column;
    gap: 8px;padding-left: 11px;
}

.ft-col ul a {
   font-size: 16px;
    color: rgba(255, 255, 255, .68);
    transition: color var(--t)
}

.ft-col ul a:hover {
    color: var(--R)
}

.ft-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .75rem;
    color: rgba(255, 255, 255, .28)
}

.ft-bot a {
    color: rgba(255, 255, 255, .44);
    transition: color var(--t)
}

.ft-bot a:hover {
    color: var(--R)
}

.ft-leg {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

/* ===================================================
         ANIMATIONS
         =================================================== */
.fu {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .52s var(--ease), transform .52s var(--ease)
}

.fu.v {
    opacity: 1;
    transform: translateY(0)
}

.d1 {
    transition-delay: .1s
}

.d2 {
    transition-delay: .2s
}

.d3 {
    transition-delay: .3s
}





.img-full{    object-fit: cover !important;
    overflow: hidden;
    height: 100%;
}


.video-container iframe {
      width: 100%;
    height: 360px;
    object-fit: cover;
    background-position: center;
    margin: 0 auto;
    box-shadow: 0 -5px 0 0 var(--R), 0 36px 72px rgba(7, 17, 43, .28), 0 0 0 1px rgba(255, 255, 255, .05);
    border-radius: 16px;
}


/* ===================================================
         RESPONSIVE
         =================================================== */
@media(max-width:1180px) {

    .feat-grid,
    .svc-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .prod-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .cert-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px
    }

    .ft-g {
        grid-template-columns: 1fr 1fr;
        gap: 28px
    }

    #mega-prod .mega-grid,
    #mega-sol .mega-grid,
    #mega-ind .mega-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:960px) {

.nav-right{display: none;}

    .hero-in {
        grid-template-columns: 1fr;
        text-align: center
    }

    .h-p {
        margin: 0 auto 32px
    }

    .h-acts {
        justify-content: center
    }

    .h-stats {
        justify-content: center
    }

    .h-vis {
        margin-top: 40px
    }

    .fc1 {
        left: 0;
        top: 18px
    }

    .fc2 {
        right: 0
    }

    .nav-list {
        display: none
    }

    .ham {
        display: flex
    }

    .ind-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .proc-grid {
        grid-template-columns: 1fr
    }

    .proc-grid::before {
        display: none
    }
}

@media(max-width:640px) {
    section {
        padding: 52px 0
    }

    .ind-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .prod-grid,
    .feat-grid,
    .svc-grid {
        grid-template-columns: 1fr
    }

    .cert-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .blog-grid {
        grid-template-columns: 1fr
    }

    .ft-g {
        grid-template-columns: 1fr
    }

    .testi-w {
        padding: 28px 18px
    }

    .loc-g {
        grid-template-columns: 1fr
    }
}


.img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px; /* match your design */
}

/* Image zoom */
.img-wrap img {
  width: 100%;
  height:250PX;
  display: block;
  transition: transform 0.4s ease;
}

/* Overlay base */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Overlay text */
.overlay-text {
  color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    transform: translateY(20px);
    transition: all 0.4s ease;
    PADDING: 0 10PX 30px;
}

/* Hover Effects */
.img-wrap:hover img {
  transform: scale(1.1);
}

.img-wrap:hover .overlay {
  opacity: 1;
}

.img-wrap:hover .overlay-text {
  transform: translateY(0);
}

.engineer-quote {
  margin-top: 20px;
    padding: 40px 20px 0;
    text-align: center;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.engineer-quote p {
  font-size: 18px;
  line-height: 1.6;
  color: #d1d5db; /* soft white */
  font-weight: 400;
}

.engineer-quote strong {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  color: #ffffff;
}


/* ── OUTCOMES ── */


#outcomes{background:var(--navy-mid)}
.out-hdr{text-align:center;max-width:600px;margin:0 auto;padding-bottom:56px}
.out-hdr .sub{margin:14px auto 0;max-width:100%}
.out-cols{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:16px;overflow:hidden}
.out-col{padding:42px 36px}
.out-suc{background:rgba(34,197,94,0.10);border:1px solid rgba(34,197,94,0.1)}
.out-fail{background:rgba(238,43,36,0.10);border:1px solid rgba(238,43,36,0.1)}
.out-head{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.out-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
.ois{background:rgba(34,197,94,0.12);color: #fff;}
.oif{background:rgba(238,43,36,0.12);color: #fff;}
.out-col h3{ font-size: 24px;
    font-weight: 800;
    color: var(--white);
    font-family: var(--FH) !important;}
.out-items{display:flex;flex-direction:column;gap:14px}
.out-item{display:flex;align-items:flex-start;gap:11px}
.out-chk{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700}
.cy{background:rgba(34,197,94,0.14);color:#22c55e}
.cn{background:rgba(238,43,36,0.14);color:var(--red)}
.out-item p{color:rgba(255,255,255,0.70);line-height:1.58}
.out-item p b{color:var(--white);font-weight:500}


/* ══════════════════════════════════
   3. PROBLEM — white
══════════════════════════════════ */
#problem{background:#000000}
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin-top:56px}
.prob-cards{display:flex;flex-direction:column;gap:10px}
.pcard{
  background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.09);
    border-left: 3px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all var(--tr);
}
.pcard:hover{background:#1a1a1a;border-left-color:var(--R);transform:translateX(3px);    border-left: 3px solid var(--R);}
.pcard-ico{
  width:36px;height:36px;border-radius:7px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.10);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.pcard h4{font-size:14px;font-weight:600;color:#ffffff;margin-bottom:4px}
.pcard p{font-size:15px;color:rgba(255,255,255,0.65);line-height:1.55;min-height: 70px;}
.pcard-type{    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
    color: rgba(255,255,255,0.55);}
.prob-right h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:#ffffff;margin-bottom:16px;line-height:1.18}
.prob-body{font-size:18px !important;color:rgba(255,255,255,0.72) !important;line-height:1.7;margin-bottom:20px;font-weight:300}
.prob-q{
  background:#0d0d0d;border:1px solid rgba(255,255,255,0.09);
  border-left:3px solid rgba(255,255,255,0.25);border-radius:0 7px 7px 0;
  padding:16px 20px;margin-bottom:16px;
}
.prob-q p{font-size:14.5px;color:rgba(255,255,255,0.60);line-height:1.62;font-style:italic}
.prob-q cite{display:block;margin-top:9px;font-size:10.5px;color:rgba(255,255,255,0.35);font-style:normal;letter-spacing:0.07em;text-transform:uppercase}
.cost-row{display:flex;gap:12px;margin-top:20px}
.cost-b{
  display:flex;flex-direction:column;
  background:#0d0d0d;border:1px solid rgba(255,255,255,0.09);
  border-radius:8px;padding:16px 20px;flex:1;
}
.cost-n{font-family:'Outfit',sans-serif;font-size:26px;font-weight:900;color:#111;line-height:1}
.cost-l{font-size:11.5px;color:#aaa;margin-top:6px;line-height:1.4}

.subtext {
  margin-top: 10px;
  font-size: 18px;
  color: #d1d5db;
}


/* ── GUIDE ── */

.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:56px}
.auth-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.auth-b{    background: rgb(255 255 255);
    border: 1px solid rgb(58 56 56 / 18%);
    border-radius: 5px;
    padding: 6px 13px;
    font-size:14px;
    font-weight: 500;
    color:#ffffff;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 7px;}
.auth-dot{width:5px;height:5px;border-radius:50%;background:var(--R)}
.gcrd{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;display:flex;align-items:flex-start;gap:13px;transition:all var(--tr)}
.gcrd:hover{background:var(--hover);border-color:rgba(255,255,255,0.13)}
.gcrd-n{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--red);min-width:24px;padding-top:2px;letter-spacing:0.06em}
.gcrd h4{font-size:14.5px;font-weight:600;color:var(--white);margin-bottom:5px}
.gcrd p{font-size:13px;color:var(--gray-600);line-height:1.55}
/*.empathy-quote{background:rgba(238,43,36,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:12px;padding:24px 26px}*/
.empathy-quote p{font-style:italic;font-weight:300}
.testi{background:linear-gradient(135deg,rgba(238,43,36,0.07) 0%,var(--card) 100%);border:1px solid rgba(238,43,36,0.15);border-radius:16px;padding:30px}
.t-stars{color:var(--red);font-size:18px;margin-bottom:14px;letter-spacing:3px}
.testi p{font-size:15.5px;color:rgba(255,255,255,0.82);line-height:1.67;font-style:italic;font-weight:300;margin-bottom:22px}
.t-auth{display:flex;align-items:center;gap:12px}
.t-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),#b81a14);display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--white)}
.t-name{font-size:14px;font-weight:500;color:var(--white)}
.t-role{font-size:12px;color:var(--gray-600);margin-top:2px}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.exp-c{background: rgb(255 255 255 / 75%);
    border: 1px solid rgb(207 201 201 / 64%);
    border-radius: 12px;
    padding: 20px;
    margin-top: 40px;}
.exp-n{font-family:'Outfit',sans-serif;font-size:44px;font-weight:900;color:#4a4a4a;letter-spacing:-0.05em;line-height:1}
.exp-u{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--red)}
.exp-l{font-size:15px;color:var(--gray-600);margin-top:8px;line-height:1.4}
.logos-c{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px}
.logos-lbl{font-size:10.5px;color:var(--gray-600);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:13px}
.logos-row{display:flex;gap:7px;flex-wrap:wrap}
.lpill{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--gray-600);letter-spacing:0.06em;transition:all var(--tr);cursor:default}
.lpill:hover{color:var(--gray-300);border-color:rgba(255,255,255,0.15)}



.ind-ctas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:720px;margin:20px auto 0}
.ind-cta{
      background:#0d0d0d;
    border:1px solid rgba(255,255,255,0.09);
  border-radius:9px;padding:16px;text-align:left;display:block;
  transition:all var(--tr);
}
.ind-cta:hover{border-color:#333;background:#fff;}
.ind-cta-icon{font-size:15px;margin-bottom:6px}
.ind-cta-title{font-size:14px;font-weight:600;color:#ffffff;margin-bottom:3px}
.ind-cta-sub{font-size:11px;color:#444}
.transitional{max-width:720px;margin:26px auto 0}
.trans-label{font-size:10.5px;color:#444;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px;text-align:center}
.trans-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.trans-link{    color: #000 !important;
    font-size: 13px;
    border-bottom: 1px solid #f58686;
    padding-bottom: 1px;
    transition: all var(--tr);
    margin: 3px 8px;
    width: max-content;
    text-align: center;}
.trans-link:hover{color:rgba(255,255,255,0.7);border-color:#555}
.mil-cta{max-width:720px;margin:24px auto 0;    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.09);border-radius:10px;padding:18px 24px;text-align:left}
.mil-cta p{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.62}
.mil-cta a{color:#ffffff;font-weight:500;border-bottom:1px solid #333;transition:all var(--tr)}
.mil-cta a:hover{color:var(--R);border-color:#666}

/*.cta-box {
    max-width: 760px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgb(247 225 225 / 8%), var(--card));
    border: 1px solid rgba(238, 43, 36, 0.18);
    border-radius: 24px;
    padding: 64px 44px;
    position: relative;
    overflow: hidden;
}*/


.cta-box {
    max-width: 760px;
    margin: 0 auto;
    background: #0d0d0d;
    border: 1px solid rgba(238, 43, 36, 0.28);
    border-radius: 24px;
    padding: 64px 44px;
    position: relative;
    overflow: hidden;
}

.prob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.prob-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pcard {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-radius: 10px;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.09);
  transition: 0.3s ease;
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.pcard-img {
    min-width: 140px;
    height: 130px;
  border-radius: 8px;
  overflow: hidden;
}

.pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcard-type {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  color: rgba(255,255,255,0.50);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.pcard p {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

 .pcard {
    align-items: center;
}



/* Responsive */
@media (max-width: 768px) {
  .prob-grid {
    grid-template-columns: 1fr;
  }
}




/* ===================================================
   RESPONSIVE — E3 Displays
   Breakpoints:
     1180px  → tablet landscape
      960px  → tablet portrait
      768px  → small tablet
      640px  → mobile large
      480px  → mobile small
   =================================================== */

/* ── 1180px — Tablet Landscape ── */
@media (max-width: 1180px) {

  /* Mega menus */
  #mega-prod .mega-grid,
  #mega-sol .mega-grid,
  #mega-ind .mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Products */
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Services */
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Why E3 */
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Certifications */
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }

  /* Footer */
  .ft-g {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Outcomes */
  .out-cols {
    grid-template-columns: 1fr 1fr;
  }

  /* Guide */
  .guide-grid {
    gap: 40px;
  }

  /* Problem */
  .prob-grid {
    gap: 24px;
  }

  /* Industry CTAs */
  .ind-ctas {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hero stats */
  .h-stats {
    padding: 22px 28px;
    gap: 24px;
  }
}

/* ── 960px — Tablet Portrait ── */
@media (max-width: 960px) {

  /* Global section spacing */
  section {
    padding: 72px 0;
  }

  /* Hide desktop nav, show hamburger */
  .nav-list {
    display: none;
  }

  .nav-right {
    display: none;
  }

  .ham {
    display: flex;
  }

  /* Nav height */
  .nav-in {
    height: 66px;
  }

  /* Hero */
  .hero {
    padding: 64px 0 56px;
  }

  .hero-in {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .h-p {
    margin: 0 auto 28px;
  }

  .h-acts {
    justify-content: center;
  }

  .h-stats {
    justify-content: center;
    width: auto;
    max-width: 480px;
    margin: 0 auto;
  }

  .h-vis {
    margin-top: 12px;
    justify-content: center;
  }

  .fc1 {
    left: 0;
    top: 18px;
  }

  .fc2 {
    right: 0;
  }

  .h-screen {
    max-width: 420px;
  }

  /* Mega menus — collapse to 2 cols on tablet */
  #mega-about .mega-grid,
  #mega-prod .mega-grid,
  #mega-sol .mega-grid,
  #mega-ind .mega-grid,
  #mega-res .mega-grid,
  #mega-contact .mega-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Products */
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Industries */
  .ind-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Blog */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process — vertical stack */
  .proc-grid {
    grid-template-columns: 1fr;
  }

  .proc-grid::before {
    display: none;
  }

  .proc-s {
    padding: 20px 16px;
    display: grid;
    grid-template-columns: 64px 1fr;
    text-align: left;
    gap: 0 18px;
    align-items: start;
  }

  .pnum {
    margin: 0;
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    grid-row: span 2;
  }

  .pt {
    align-self: center;
    margin-bottom: 4px;
  }

  .pd {
    grid-column: 2;
  }

  /* Outcomes */
  .out-cols {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .out-col {
    padding: 28px 24px;
  }

  /* Problem / Guide */
  .prob-grid,
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Exp grid */
  .exp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Industry CTAs */
  .ind-ctas {
    grid-template-columns: repeat(2, 1fr);
    max-width: 480px;
  }

  /* Testimonial */
  .testi-w {
    padding: 36px 28px;
  }

  /* CTA section */
  .cta-in {
    padding: 0 16px;
  }

  /* Footer */
  .ft-g {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  /* Certifications */
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Loc grid */
  .loc-g {
    max-width: 480px;
    gap: 14px;
  }
}

/* ── 768px — Small Tablet / Large Mobile ── */
@media (max-width: 768px) {

    header .logo img {
    width: 230px !important;
}

  /* Container padding */
  .ctn,
  .tb-in,
  .nav-in,
  .hero-in {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Topbar — stack on small screens */
  .tb-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 20px;
  }

  /* Hero heading */
  .hero h1 {
    font-size: clamp(1.75rem, 5vw, 2.6rem);
  }

 /* .h-p {
    font-size: 0.97rem;
  }*/

  /* Industries */
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Services */
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Why E3 */
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Products */
  .prod-grid {
    grid-template-columns: 1fr;
  }

  /* Problem grid */
  .prob-grid {
    grid-template-columns: 1fr;
  }

  /* Blog */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Certifications */
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer */
  .ft-g {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Mega panels hidden on mobile */
  .mega {
    display: none;
  }

  /* Ind 2-col */
  .ind-2col {
    grid-template-columns: 1fr;
  }
}

/* ── 640px — Mobile ── */
@media (max-width: 640px) {

  /* Global section spacing */
  section {
    padding: 52px 0;
  }

  /* Container padding */
  .ctn,
  .nav-in,
  .hero-in {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Topbar */
  .tb-in {
    padding: 7px 16px;
    gap: 5px;
  }

  .tb-left {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Hero */
  .hero {
    padding: 48px 0 44px;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  }

  .h-badge {
    font-size: 0.78rem;
    padding: 4px 12px;
  }

  .h-stats {
    padding: 18px 20px;
    gap: 18px;
    flex-wrap: wrap;
  }

  .hs .hn {
    font-size: 1.55rem;
  }

  .h-acts {
    gap: 10px;
  }

  .h-btn-r,
  .h-btn-o {
    padding: 11px 22px;
    font-size: 0.88rem;
    width: 100%;
    justify-content: center;
  }

  .h-screen {
    max-width: 100%;
  }

  .fc1,
  .fc2 {
    display: none;
  }

  /* Industries */
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .min-img-h2 {
    height: 150px;
  }

  /* Products */
  .prod-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Services */
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Why E3 */
  .feat-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Process */
  .proc-s {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px 16px;
  }

  .pnum {
    margin: 0 auto 16px;
    grid-row: auto;
  }

  .pt,
  .pd {
    grid-column: 1;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .sv {
    font-size: 2.2rem;
  }

  /* Testimonial */
  .testi-w {
    padding: 26px 18px;
  }

  .testi-tx {
    font-size: 0.96rem;
  }

  /* Certifications */
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Location */
  .loc-g {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  /* Blog */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bth {
    height: 200px;
  }

  /* Footer */
  .ft-g {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 32px;
  }

  .ft-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ft-leg {
    gap: 12px;
  }

  /* Outcomes */
  .out-cols {
    grid-template-columns: 1fr;
  }

  .out-col {
    padding: 24px 18px;
  }

  /* Problem */
  .prob-grid,
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pcard {
    flex-direction: column;
  }

  .pcard-img {
    min-width: unset;
    height: 180px;
    width: 100%;
  }

  .cost-row {
    flex-direction: column;
    gap: 10px;
  }

  /* Exp grid */
  .exp-grid {
    grid-template-columns: 1fr;
  }

  .exp-c {
    margin-top: 20px;
  }

  /* Industry CTAs */
  .ind-ctas {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  /* CTA box */
  .cta-box {
    padding: 36px 20px;
  }

  /* CTA section buttons */
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-r,
  .cta-g {
    text-align: center;
  }

  /* Section headings */
  .shd.row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Video container */
  .video-container iframe {
    height: 240px;
  }

  /* Img wrap */
  .img-wrap img {
    height: 200px;
  }
}

/* ── 480px — Small Mobile ── */
@media (max-width: 480px) {

  /* Container */
  .ctn,
  .nav-in,
  .hero-in {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Topbar — hide secondary links, keep pill */
  .tb-left {
    display: none;
  }

  .tb-in {
    justify-content: center;
  }

  /* Nav */
  .nav-in {
    height: 58px;
  }

  .logo-name {
    font-size: 0.9rem;
  }

  /* Hero */
  .hero h1 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .h-stats {
    gap: 14px;
    padding: 14px 16px;
  }

  .hs .hn {
    font-size: 1.35rem;
  }

  .hs .hl2 {
    font-size: 0.66rem;
  }

  /* Industries — single column */
  .ind-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ind-nm {
    font-size: 16px;
  }

  /* Products — tighter */
  .pc {
    padding: 22px 18px;
  }

  /* Stats — 2-up but smaller */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .sv {
    font-size: 1.9rem;
  }

  .sl {
    font-size: 0.78rem;
  }

  /* Certifications — 2 per row */
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Industry CTAs — full width */
  .ind-ctas {
    grid-template-columns: 1fr 1fr;
  }

  /* Testimonial */
  .testi-w {
    padding: 22px 14px;
    border-radius: var(--r16);
  }

  .testi-tx {
    font-size: 0.9rem;
  }

  /* Blog thumb */
  .bth {
    height: 170px;
  }

  /* Footer */
  .ft-col h4 {
    font-size: 1.1rem;
    margin-bottom: 18px;
  }

  /* Section headings */
  .new h2 {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }

  .ssub {
    font-size: 0.93rem;
  }

  /* CTA box */
  .cta-box {
    padding: 28px 16px;
    border-radius: var(--r16);
  }

  /* Topbar pill */
  .tb-pill {
    font-size: 0.66rem;
    padding: 3px 10px;
  }

  /* Mobile nav header */
  .mob-hd {
    padding: 14px 16px;
  }

  .mob-s-t {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  .mob-body a {
    padding: 7px 16px 7px 28px;
    font-size: 0.82rem;
  }

  .mob-ctas {
    padding: 16px;
  }

  /* Outcome items */
  .out-item p {
    font-size: 14px;
  }

  /* Problem cards */
  .pcard {
    padding: 16px;
  }

  .pcard p {
    font-size: 13px;
    min-height: unset;
  }

  /* Video */
  .video-container iframe {
    height: 200px;
    border-radius: 10px;
  }
}



/*Responsive end*/

.caps{text-transform: uppercase;}

/* ===================================================
   DARK THEME OVERRIDES — additional specificity fixes
   =================================================== */

/* Ensure body background is pure black */
body { background: #000000 !important; color: #ffffff !important; }

/* Navbar dark */
.navbar {
  background: #0d0d0d !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.nt { color: rgba(255,255,255,0.88) !important; }

/* Auth badges in guide section */
.auth-b {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.88) !important;
  border-radius: var(--r99);
  padding: 6px 14px;
  font-family: var(--FH);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.auth-dot { background: var(--R) !important; }

/* Experience stat cards */
.exp-c {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--r16);
  padding: 22px 20px;
}
.exp-n { color: #ffffff !important; }
.exp-u { color: var(--R) !important; }
.exp-l { color: rgba(255,255,255,0.60) !important; }

/* Guide section empathy quote */
.empathy-quote.sc2 {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.80) !important;
}
.empathy-quote.sc2 p { color: rgba(255,255,255,0.80) !important; }

/* Problem section background */
#problem { background: #000000 !important; }

/* Problem section heading */
#problem h2 { color: #ffffff !important; }
#problem .ssub { color: rgba(255,255,255,0.72) !important; }
#problem .sbadge { color: rgba(255,255,255,0.88) !important; }

/* CTA box heading and text */
.cta-box h2 { color: #ffffff !important; }
.cta-box p { color: rgba(255,255,255,0.78) !important; }

/* CTA section inside industries */
.sec-ind { background: #000000 !important; }
.sec-ind h2 { color: #ffffff !important; }
.sec-ind .ssub { color: #fff !important; }

/* Process section */
.sec-proc { background: #000000 !important; }
.sec-proc h2 { color: #ffffff !important; }
.proc-s { background: transparent; }
.pt { color: #ffffff !important; }
.pd { color: rgba(255,255,255,0.68) !important; }

/* pnum gets red in dark */
.pnum { background: #fff;
    color: #fa252c !important; }

/* Guide section text */
.sec-svc h2 { color: #ffffff !important; }
.sec-svc .ssub { color: rgba(255,255,255,0.72) !important; }
.sec-svc p { color: rgba(255,255,255,0.72); }

/* Testimonial */
.sec-testi { background: #000000 !important; }
.sec-testi h2 { color: #ffffff !important; }


/*.testi-w {
  background: #0d0d0d !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}*/



.testi-tx { color: rgba(255,255,255,0.85) !important; }
.testi-nm { color: #ffffff !important; }

/* Blog */
.sec-blog { background: #000000 !important; }
.bc { background: #0d0d0d !important; border-color: rgba(255,255,255,0.09) !important; }
.bt { color: #ffffff !important; }
.bdt { color: rgba(255,255,255,0.40) !important; }

/* ssub global */
.ssub { color: rgba(255,255,255,0.72) !important; }
.new h2 { color: #ffffff !important; }

/* btn-line: readable on dark */
.btn-line {
  color: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.btn-line:hover {
  border-color: var(--R) !important;
  color: var(--R) !important;
  background: var(--Rg) !important;
}

/* pc (product cards) */
.pc {
  background: #0d0d0d !important;
  border-color: rgba(255,255,255,0.09) !important;
}
.pc-t { color: #ffffff !important; }
.pc-n { color: rgba(255,255,255,0.50) !important; }
.pc-d { color: rgba(255,255,255,0.65) !important; }
.pc-tag {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.75) !important;
}
.pc-l { color: rgba(255,255,255,0.88) !important; }

/* Mobile nav */
.mob, .mob-hd { background: #0a0a0a !important; }
.mob-x { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; }
.mob-s-t { color: #ffffff !important; }
.mob-body a { color: rgba(255,255,255,0.65) !important; }
.mob-o { border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; }

/* Mega panel text & borders */
.mega { background: #0d0d0d !important; border-top-color: var(--R) !important; }
.col-hd-t { color: #ffffff !important; }
.col-hd-s { color: rgba(255,255,255,0.52) !important; }
.mlt { color: rgba(255,255,255,0.88) !important; }
.mld { color: rgba(255,255,255,0.50) !important; }
.slink { color: rgba(255,255,255,0.60) !important; }
.mli { background: rgba(255,255,255,0.07) !important; }
.col { border-right-color: rgba(255,255,255,0.08) !important; }
.col-hd { border-bottom-color: rgba(255,255,255,0.08) !important; }
.ci-label { color: rgba(255,255,255,0.45) !important; }
.ci-val { color: #ffffff !important; }
.ci-val-sm { color: rgba(255,255,255,0.65) !important; }

/* feat (mega featured snippet) */
.feat { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; }
.feat-tag { color: rgba(255,255,255,0.50) !important; }
.feat-t { color: #ffffff !important; }

/* engineer-quote text (already has light color set in original) */
.engineer-quote p { color: #fff !important; }

/* Floating hero cards */
.fcard { background: #161616 !important; border-color: rgba(255,255,255,0.10) !important; }
.fcard .fcv { color: #ffffff !important; }
.fcard .fcl { color: rgba(255,255,255,0.50) !important; }

/* sc-in hero screen (dark glass) */
.sc-in { background: linear-gradient(155deg, #1a1a1a 0%, #141414 58%, #1f1010 100%) !important; }
.sc-ttl { color: #ffffff !important; }
.sc-status span { color: rgba(255,255,255,0.75) !important; }

/* Certifications */
.cc { background: #0d0d0d !important; border-color: rgba(255,255,255,0.09) !important; }
.ccn { color: #ffffff !important; }

/* Remove any remaining light backgrounds on generic sections */
section:not(.hero):not(.brands):not(.stats):not(.footer):not(.sec-why):not(.sec-ind) {
  background-color: #000000;
}



header .logo img{width:250px;}


/*carousel*/

:root {
    --swiper-navigation-size: 30px !important;
}
.swiper-button-next, .swiper-button-prev { color:#fff !important; background:transparent !important; border:none !important; }
.swiper-button-prev::after, .swiper-button-next::after {
    font-weight: 500 !important;
}


.swiper-button-prev{
    left: var(--swiper-navigation-sides-offset, 40px) !important;
    right: auto;
}

.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 40px) !important;
    left: auto;
}


.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: var(--swiper-pagination-bottom, 40px) !important;
}
.swiper-pagination-bullet{background: #ffffff;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1.2) !important;}

.swiper-pagination-bullet-active{ background: #fff !important;
  width: 45px; /* active dash longer (nice effect) */}

.swiper-pagination-bullet {
  width: 30px !important;      /* dash length */
  height: 4px !important;      /* thickness */
  border-radius: 2px !important;
  background: rgba(255,255,255,0.5) ;
  opacity: 1;
  margin: 0 6px !important;
}


/* ── Swiper Container ─────────────────────────────────────── */
    .hero-swiper {
      width: 100%;
      height: 700px;
    }

    /* ── Individual Slide ─────────────────────────────────────── */
    .swiper-slide {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Background image */
    .slide-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    /* Gradient overlay */
    .slide-overlay {
      position: absolute;
      inset: 0;

background:linear-gradient(90deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 68%) 36%, rgba(0, 0, 0, 0.37) 100%);

/*background: linear-gradient(90deg,rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.83) 36%, rgba(0, 0, 0, 0.37) 100%);*/
      z-index: 1;
    }

    /* ── Slide Content ────────────────────────────────────────── */
    .slide-content {

 position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction:column;
left:17%;
/*      position: relative;*/
      z-index: 2;
/*      width: 100%;
      max-width: 1260px;*/
      opacity: 0;
      width: 100%;
/*      transform: translateY(28px);*/
      transition: opacity 0.85s var(--ease) 0.35s,
                  transform 0.85s var(--ease) 0.35s;

      top: auto;               /* cancel the top centering */
  bottom: 90px;            /* distance from bottom edge — adjust to taste */            
                  
    }

    .swiper-slide-active .slide-content {
      opacity: 1;
      transform: translateY(0);
    }



    /* Tag / eyebrow label */
    .slide-tag {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clr-accent);
      margin-bottom: 22px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ee2b24;
      opacity: 0;
      transform: translateX(-12px);
      transition: opacity 0.6s var(--ease) 0.5s,
                  transform 0.6s var(--ease) 0.5s;
    }

    .swiper-slide-active .slide-tag {
      opacity: 1;
      transform: translateX(0);
    }

    .slide-heading {
/*      font-family: var(--font-head);*/
font-family: var(--FH) !important;
      font-size: clamp(2rem, 5.5vw, 2.7rem);
      font-weight: 800;
      line-height: 1.07;
      letter-spacing: 0.02em;
      color: var(--clr-white);
      max-width: 680px;
      margin-bottom:25px;
    }

    .slide-sub {
      font-family: var(--font-body);
      font-size: clamp(0.95rem, 1.6vw, 1.15rem);
      font-weight: 300;
      line-height: 1.65;
      color: var(--clr-muted);
      max-width:730px;
      margin-bottom: 40px;
    }

    /* CTA Button */
    .slide-cta {


padding: 13px 34px;
    font-size: .93rem;
    background: var(--R);
    color: #fff;
    border-radius: var(--r99);
    font-family: var(--FH);
    font-weight: 800;
    box-shadow: 0 6px 22px rgba(238, 43, 36, .32);
    transition: all var(--t);

 /*     display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 36px;
      background: #ee2b24;
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.08em;*/
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid #ee2b24;
      cursor: pointer;
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
      opacity: 0;
      transform: translateY(10px);
      transition: background 0.25s ease, color 0.25s ease,
                  border-color 0.25s ease,
                  opacity 0.6s var(--ease) 0.75s,
                  transform 0.6s var(--ease) 0.75s;
    }

    .swiper-slide-active .slide-cta {
      opacity: 1;
      transform: translateY(0);
    }

    .slide-cta:hover {
       background: var(--Rd);
    transform: translateY(-2px);
    }

    .slide-cta svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }

    .slide-cta:hover svg {
      transform: translateX(4px);
    }

    /* ── Navigation Arrows ────────────────────────────────────── */
    .swiper-button-prev,
    .swiper-button-next {
      width: 52px;
      height: 52px;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #fff;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
      border-radius: 0; /* square = industrial feel */
    }

    .swiper-button-prev { left: 32px;  bottom: 100px !important;}
    .swiper-button-next { right: 32px; bottom: 100px !important; }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
      background: #ee2b24;
      border-color: #ee2b24;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 15px;
      font-weight: 700;
    }

    /* ── Pagination Dots ──────────────────────────────────────── */
    .swiper-pagination {
      bottom: 36px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 80px;
      gap: 8px;
    }

    .swiper-pagination-bullet {
      width: 28px;
      height: 2px;
      border-radius: 0;
      background: rgba(255,255,255,0.35);
      opacity: 1;
      transition: background 0.3s ease, width 0.3s ease;
      margin: 0 !important;
    }

    .swiper-pagination-bullet-active {
      background: #ee2b24;
      width: 48px;
    }

    /* ── Progress bar ─────────────────────────────────────────── */
    .slide-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: #242424;
      z-index: 10;
      transform-origin: left;
      transform: scaleX(0);
      width: 100%;
    }

    .slide-progress.running {
      animation: progressAnim var(--autoplay-delay, 8000ms) linear forwards;
    }

    @keyframes progressAnim {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* ── Slide count indicator ────────────────────────────────── */
    .slide-counter {
      position: absolute;
      bottom: 28px;
      right: 80px;
      z-index: 10;
      font-family: var(--font-head);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      color: var(--clr-muted);
      user-select: none;
    }

    .slide-counter .current {
      color: var(--clr-white);
      font-size: 1.1rem;
      font-weight: 600;
    }

    /* ── Responsive ───────────────────────────────────────────── */
    @media (max-width: 960px) {
      .slide-content { padding: 0 48px; }
      .swiper-pagination { padding-left: 48px; }
      .slide-counter { right: 48px; }
      .swiper-button-prev { left: 16px; }
      .swiper-button-next { right: 16px; }
    }

    @media (max-width: 640px) {
      .slide-content { padding: 0 24px; }
      .swiper-pagination { padding-left: 24px; bottom: 24px; }
      .slide-counter { right: 24px; bottom: 20px; font-size: 0.68rem; }
      .slide-overlay {
        background: linear-gradient(to bottom,
          rgba(0,0,0,0.25) 0%,
          rgba(0,0,0,0.7) 100%
        );
      }
      .swiper-button-prev,
      .swiper-button-next { display: none; }
    }



/* ══════════════════════════════════════════════════════
   OPTION C
   MAGAZINE CARDS — Portrait images top-half,
   text bottom-half. 3+2 staggered grid.
   One large hero card + smaller supporting cards.
══════════════════════════════════════════════════════ */
:root{
  --bg:#0c0c0c;
  --s1:#111111;
  --s2:#181818;
  --s3:#1e1e1e;
  --border:#222;
  --border2:#2c2c2c;
  --text:#f0f0f0;
  --muted:#606060;
  --faint:#2a2a2a;
  --tr:0.3s cubic-bezier(0.4,0,0.2,1);
}
.magazine{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:12px;overflow:hidden}

.mc{
  background:var(--s1);
  display:flex;flex-direction:column;
  overflow:hidden;cursor:default;
  transition:background var(--tr);
  position:relative;
}
.mc:hover{background:var(--s2);     border: solid 1px #ff3939;}

/* image half — fixed height, equal across all cards */
.mc-img-wrap{
  position:relative;overflow:hidden;
  height:260px;flex-shrink:0;
}

.mc-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(0.88) saturate(0.85);
/*  filter:brightness(0.48) saturate(0.65);*/
  transition:transform 0.65s cubic-bezier(0.4,0,0.2,1),filter 0.65s;
}
.mc:hover .mc-img{transform:scale(1.05);filter:brightness(0.32) saturate(0.5)}

/* scanline texture */
.mc-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px);
  pointer-events:none;
}

/* text half */
.mc-text{
  flex:1;padding:22px 24px;
  display:flex;flex-direction:column;gap:8px;
}

.mc-meta{display:flex;align-items:center;justify-content:space-between}
.mc-tag{font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.29)}
.mc-num{font-size:14px;font-weight:700;color:rgba(255,255,255,0.4);letter-spacing:0.08em}

.mc h3{font-size:15px;font-weight:700;color:#fff;line-height:1.28;margin:0}
.mc p{font-size:17px;color:#ffffff;line-height:1.5;font-weight:300;margin:0}

/* stat badge over image */
.mc-stat{
  position:absolute;top:12px;left:12px;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.08);border-radius:5px;
  padding:6px 11px;
}
.mc-stat-n{font-size:18px;font-weight:900;color:#fff;letter-spacing:-0.03em;line-height:1}
.mc-stat-l{font-size:8.5px;color:rgba(255,255,255,0.28);margin-top:2px}

/* bottom strip */
.mag-footer{
  grid-column:1/-1;
  background:#0a0a0a;border-top:1px solid var(--border);
  padding:24px 28px;
  display:grid;grid-template-columns:1fr auto;gap:40px;
  align-items:center;
}
.mf-q{font-size:14px;color:rgba(255,255,255,0.28);font-style:italic;font-weight:300;line-height:1.65}
.mf-q cite{display:block;margin-top:8px;font-size:10px;color:rgba(255,255,255,0.15);font-style:normal;letter-spacing:0.08em;text-transform:uppercase}
.mf-stats{display:flex;gap:36px;flex-shrink:0}
.mf-s-n{font-family:'Outfit',sans-serif;font-size:28px;font-weight:900;color:var(--text);letter-spacing:-0.04em;line-height:1}
.mf-s-l{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35;max-width:100px}
.pt-70{padding-top: 70px;}
/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#080808}
::-webkit-scrollbar-thumb{background:#1e1e1e;border-radius:2px}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
    .pt-70{padding-top: 30px;}
  .section{padding:64px 24px}
  .switcher{padding:12px 24px;flex-wrap:wrap}
  .bento-a{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .ba1,.ba2,.ba3,.ba4,.ba5,.ba6,.ba7{grid-column:auto;grid-row:auto}
  .bento-a-footer{grid-template-columns:1fr}
  .baf-q{border-right:none;padding-right:0;padding-bottom:20px;border-bottom:1px solid var(--border)}
  .baf-stats{padding-left:0;padding-top:20px}
  .er{grid-template-columns:1fr!important;min-height:auto}
  .er.flip{grid-template-columns:1fr!important}
  .er-img-wrap{height:220px!important}
  .er-img-fade{display:none}
  .er-footer{grid-template-columns:1fr}
  .er-foot-stats{margin-top:16px}
  .magazine{grid-template-columns:1fr 1fr;grid-column:1/-1}
  .mc1,.mc2,.mc3,.mc4,.mc5{grid-column:auto;grid-row:auto}
  .mc2,.mc3,.mc4,.mc5{height:auto}
  .mc2 .mc-img-wrap,.mc3 .mc-img-wrap,.mc4 .mc-img-wrap,.mc5 .mc-img-wrap{height:180px}
  .mc1 .mc-img-wrap{height:220px}
  .mag-footer{grid-template-columns:1fr;grid-column:1/-1}
  .mf-q{grid-column:auto;border-right:none;padding-right:0;padding-bottom:16px;border-bottom:1px solid var(--border)}
}


.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px; white-space: normal}

  .pill{
    display:flex;align-items:center;gap:11px;
    background:#000;border:1px solid #1e1e1e;
    padding:14px 18px;cursor:default;
    opacity:0;transform:translateY(12px);
    animation:up .45s cubic-bezier(.4,0,.2,1) forwards;
    transition:background .25s,border-color .25s;
    position:relative;
  overflow:hidden;
  }
  .pill:first-child{border-radius:10px 0 0 0}
/*  .pill:nth-child(4){border-radius:0 10px 0 0}*/
/*  .pill:nth-child(5){border-radius:0 0 0 10px}*/
/*  .pill:last-child{border-radius:0 0 10px 10px;}*/

  .pill:nth-child(1){animation-delay:.04s}
  .pill:nth-child(2){animation-delay:.10s}
  .pill:nth-child(3){animation-delay:.16s}
  .pill:nth-child(4){animation-delay:.22s}
  .pill:nth-child(5){animation-delay:.28s}
  .pill:nth-child(6){animation-delay:.34s}
  .pill:nth-child(7){animation-delay:.40s}
  .pill:nth-child(8){animation-delay:.46s}

  @keyframes up{to{opacity:1;transform:translateY(0)}}

  .pill:hover{background:#1c1c1c;border-color:#2a2a2a}

  /* shimmer sweep on hover */
  .pill::before{
    content:'';position:absolute;
    top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.025),transparent);
    transition:none;
  }
  .pill:hover::before{animation:shimmer .55s ease-out forwards}
  @keyframes shimmer{to{left:140%}}

  /* badge icon */
  .badge-ico{
    width:32px;height:32px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .badge-ico i{
       font-size: 27px;
    color: #fa252c;
    transition:color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .pill:hover .badge-ico i{color:#d5cfcf;transform:scale(1.18) rotate(-4deg)}

  /* text */
  .pill-text{font-size:13px;font-weight:700;color:#c8c8c8;letter-spacing:-.005em;white-space:normal;transition:color .25s}
  .pill:hover .pill-text{color:#e8e8e8}


  @media(max-width:600px){
    .grid{grid-template-columns:1fr 1fr}
    .pill-text{font-size:11.5px}
    .pill:nth-child(4){border-radius:0}
    .pill:nth-child(2){border-radius:0 10px 0 0}
  }


  .cta-box {
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(238,43,36,0.14) 0%, transparent 70%), #0e0e0e;
  border: 1px solid rgba(238,43,36,0.12);
  box-shadow: 0 0 120px rgba(238,43,36,0.10);
}
.cta-box::before { /* top red line */
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(238,43,36,0.5), transparent);
}