/* =====================================================
   MARYAM IMPEX INDUSTRY — STYLE.CSS v2
   E-Commerce Store · Logo-Contrast Color Scheme
   Orange #E07020 / Navy #0D1520 / White #F5F0EB
   ===================================================== */

/* ── HERO RIGHT CSS SHOWCASE FIX ────────────────── */
.hero__showcase {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  background: var(--line);
}

.showcase__card {
  position: relative;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--navy-2);
  transition: all 0.3s var(--ease);
  border-bottom: 3px solid transparent;
  overflow: hidden;
}

.showcase__card:hover {
  background: var(--navy-3);
  border-color: var(--orange);
}

.showcase__card-icon {
  width: 32px;
  height: 32px;
  color: var(--orange);
  margin-bottom: 20px;
}
.showcase__card-icon svg {
  width: 32px !important;
  height: 32px !important;
  display: block;
}

.showcase__card-num {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 12px;
  display: block;
}

.showcase__card-title {
  font-family: var(--font-h);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  line-height: 1;
}

.showcase__card-items {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.showcase__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--navy);
  border: 1px solid var(--line-light);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--navy), 0 0 0 7px var(--orange);
}

.showcase__stamp-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 50%;
  padding: 4px;
}

.showcase__stamp-text {
  display: none;
}

/* ── IMAGE FALLBACK BACKGROUNDS ───────────────────── */
.hero__img-stack { background: var(--navy-mid); }
.hero__img--main { background: #1a2a3a; }
.hero__img--float { background: #253040; }
.coll-card__img  { background: #1a2535; }
.prod-card__img-wrap { background: #1a2535; }
.banner-cta__bg img { background: #111; }
.dev-strip__item { background: #1a2535; }
.dev-strip__item img { background: #1a2535; }


/* ── RESET ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x: hidden;
  max-width: 100vw;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}
input,select,textarea{font:inherit;}

/* ── CSS VARIABLES ────────────────────────────────── */
:root{
  --navy:       #0A0A0A;
  --navy-2:     #121212;
  --navy-3:     #1C1C1C;
  --navy-mid:   #252525;
  --line:       #282828;
  --line-light: #383838;

  --red:        #E62129;
  --red-dk:     #C01017;
  --red-lt:     #FF3B43;

  /* Map old orange to new red to prevent breaking existing classes */
  --orange:     var(--red);
  --orange-dk:  var(--red-dk);
  --orange-lt:  var(--red-lt);

  --white:      #FFFFFF;
  --off-white:  #F5F0EB;
  --cream:      #E8E0D5;
  --muted:      #9E9E9E;
  --mid-text:   #CCCCCC;

  --font-h:   'Bebas Neue','Barlow Condensed',sans-serif;
  --font-b:   'Barlow Condensed','Inter',sans-serif;
  --font-body:'Inter',sans-serif;

  --cont: 1320px;
  --r: 3px;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}


/* ── CONTAINER ────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--cont);
  margin-inline:auto;
  padding-inline:48px;
}

/* ── SECTION ──────────────────────────────────────── */
.section{padding-block:110px;}

/* ── TYPOGRAPHY TOKENS ────────────────────────────── */
.eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
  display:block;
}
.eyebrow--light{color:rgba(255,255,255,0.6);}

.sec-title{
  font-family:var(--font-h);
  font-size:clamp(42px,5.5vw,76px);
  font-weight:400;
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1.0;
  color:var(--white);
}

/* ── BUTTONS ──────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.13em;
  text-transform:uppercase;
  padding:15px 34px;
  border-radius:var(--r);
  transition:all 0.22s var(--ease);
  white-space:nowrap;
  border:2px solid transparent;
}
.btn--orange{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.btn--orange:hover{
  background:var(--red-dk);
  border-color:var(--red-dk);
  transform:translateY(-2px);
}
.btn--red{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.btn--red:hover{
  background:var(--red-dk);
  border-color:var(--red-dk);
  transform:translateY(-2px);
}
.btn--outline-light{
  border-color:rgba(255,255,255,0.3);
  color:var(--white);
}
.btn--outline-light:hover{
  border-color:var(--white);
  background:rgba(255,255,255,0.06);
}
.btn--outline-dark{
  border-color:var(--red);
  color:var(--red);
}
.btn--outline-dark:hover{
  background:var(--red);
  color:#fff;
}
.btn--nav{
  background:var(--red);
  color:#fff;
  padding:10px 22px;
  font-size:11px;
  border-radius:var(--r);
  border-color:var(--red);
}
.btn--nav:hover{background:var(--red-dk);border-color:var(--red-dk);}
.btn--full{width:100%;justify-content:center;}


/* ── REVEAL ───────────────────────────────────────── */
.reveal{
  opacity: 1; /* default visible so no blank gaps show on load */
  transform: translateY(0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* JS-enabled smooth progressive enhancement reveal */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   ANNOUNCEMENT BAR
===================================================== */
.announce-bar{
  background:var(--orange);
  overflow:hidden;
  padding-block:10px;
}
.announce-bar__track{
  display:flex;
  align-items:center;
  gap:36px;
  white-space:nowrap;
  animation:ticker 35s linear infinite;
  width:max-content;
}
.announce-bar__track span{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#fff;
}
.announce-bar__track .dot{
  font-size:8px;
  color:rgba(255,255,255,0.5);
}
@keyframes ticker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* =====================================================
   NAVIGATION
===================================================== */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--navy);
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.3s;
}
.nav.shadow{box-shadow:0 4px 40px rgba(0,0,0,0.5);}

.nav__wrapper{
  max-width:var(--cont);
  margin-inline:auto;
  padding-inline:48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:100px;
  gap:20px;
}

/* LEFT */
.nav__left{display:flex;align-items:center;gap:6px;}

.nav__hamburger{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:6px;
}
.nav__hamburger span{
  display:block;
  width:22px;height:2px;
  background:var(--off-white);
  transition:all 0.25s var(--ease);
  transform-origin:center;
}
.nav__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav__menu{
  display:none;
  align-items:center;
  gap:2px;
}
.nav__item{position:relative;}

.nav__link{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mid-text);
  padding:10px 10px;
  border-radius:var(--r);
  transition:color 0.2s;
  display:block;
  white-space:nowrap;
}
.nav__link:hover{color:var(--white);}

/* MEGA MENU */
.mega-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:0;
  background:var(--navy-2);
  border:1px solid var(--line-light);
  border-radius:var(--r);
  padding:28px 32px;
  display:grid;
  grid-template-columns:repeat(4, 170px);
  gap:32px 24px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all 0.25s var(--ease);
  width:max-content;
  max-width: 90vw;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.has-mega:hover .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mega-menu__col{display:flex;flex-direction:column;gap:10px;}
.mega-menu__label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:6px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.mega-menu a{
  font-size:13px;
  color:var(--muted);
  transition:color 0.2s;
}
.mega-menu a:hover{color:var(--white);}

/* CENTER — LOGO */
.nav__logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.nav__logo{
  height:80px;
  width:auto;
  object-fit:contain;
  /* White circular bg so black logo text is visible on dark nav */
  background: #ffffff;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 0 0 2px rgba(224,112,32,0.3);
  transition: box-shadow 0.3s;
}
.nav__logo:hover{ box-shadow: 0 0 0 3px rgba(224,112,32,0.6); }

/* RIGHT */
.nav__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}
.nav__icon-link{
  color:var(--muted);
  display:flex;
  align-items:center;
  transition:color 0.2s;
  padding:6px;
}
.nav__icon-link:hover{color:var(--orange);}

/* DRAWER (mobile) */
.nav__drawer{
  position:fixed;
  top:0;right:-100%;
  bottom:0;
  width:min(320px,85vw);
  background:var(--navy-2);
  border-left:1px solid var(--line-light);
  z-index:1100;
  transition:right 0.4s var(--ease-out);
  overflow-y:auto;
}
.nav__drawer.open{right:0;}
.nav__drawer-inner{
  padding:100px 28px 48px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.drawer__label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:12px;
  margin-top:20px;
}
.drawer__link{
  font-size:15px;
  color:var(--mid-text);
  padding:12px 0;
  border-bottom:1px solid var(--line);
  transition:color 0.2s;
}
.drawer__link:hover{color:var(--white);}
.drawer__link--cta{
  background:var(--orange);
  color:#fff;
  text-align:center;
  border-radius:var(--r);
  border-bottom:none;
  padding:14px;
  font-weight:700;
  letter-spacing:0.1em;
  font-size:12px;
  text-transform:uppercase;
  margin-top:16px;
}
.drawer__div{height:1px;background:var(--line);margin-block:16px;}
.drawer__contact{
  font-size:13px;
  color:var(--muted);
  padding-block:6px;
}
.drawer__contact:hover{color:var(--orange);}

/* Drawer backdrop */
.drawer-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.6);
  z-index:1050;
  opacity:0;visibility:hidden;
  transition:all 0.3s;
}
.drawer-backdrop.visible{opacity:1;visibility:visible;}

/* =====================================================
   HERO — SPLIT
===================================================== */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100vh - 91px);
  background:var(--navy);
}

.hero__left{
  display:flex;
  align-items:center;
  padding:80px 60px 80px 80px;
  border-right:1px solid var(--line);
  background: linear-gradient(to right, rgba(10,10,10,0.92) 40%, rgba(10,10,10,0.65) 100%), url('hero_streetwear.jpg') no-repeat center/cover;
}

.hero__left-content{max-width:560px;}

.hero__sup{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:20px;
}

.hero__title{
  font-family:var(--font-h);
  font-size:clamp(60px,9vw,130px);
  font-weight:400;
  line-height:0.92;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:30px;
  display:flex;
  flex-direction:column;
}
.hero__title-line{color:var(--white);}
.hero__title-line--stroke{
  -webkit-text-stroke:1.5px var(--white);
  color:transparent;
}
.hero__title-line--accent{color:var(--orange);}

.hero__body{
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:36px;
}

.hero__actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:48px;
}

.hero-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.hero__badges{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--line-light);
  border-radius:var(--r);
  overflow:hidden;
  max-width:480px;
}
.hero__badge{
  flex:1;
  padding:16px 20px;
  border-right:1px solid var(--line-light);
}
.hero__badge:last-child{border-right:none;}
.hero__badge-sep{display:none;}
.badge__num{
  display:block;
  font-family:var(--font-h);
  font-size:28px;
  letter-spacing:0.03em;
  color:var(--orange);
  line-height:1;
  margin-bottom:4px;
}
.badge__label{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}


/* HERO RIGHT */
.hero__right{
  display:flex;
  align-items:stretch;
  background:var(--navy-2);
  overflow:hidden;
  padding:0;
}


/* =====================================================
   STATS BAR
===================================================== */
.stats-bar{
  background:var(--navy-3);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:40px;
}
.stats-bar__inner{
  max-width:var(--cont);
  margin-inline:auto;
  padding-inline:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.stat-item{
  flex:1;
  text-align:center;
  padding:10px 20px;
}
.stat-sep{
  width:1px;
  height:50px;
  background:var(--line-light);
}
.stat-num{
  font-family:var(--font-h);
  font-size:clamp(36px,4vw,56px);
  color:var(--orange);
  letter-spacing:0.02em;
  line-height:1;
}
.stat-label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:8px;
}

/* =====================================================
   COLLECTIONS
===================================================== */
.collections{padding-block:110px 0;}
.section-head{
  margin-bottom:56px;
}

.coll-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap:3px;
  margin-top:3px;
}

.coll-card{
  position:relative;
  overflow:hidden;
  display:block;
  cursor:pointer;
}
.coll-card__img{
  width:100%;
  height:320px;
  object-fit:cover;
  filter:brightness(0.45) saturate(0.7);
  transition:transform 0.8s var(--ease),filter 0.5s;
}
.coll-card:hover .coll-card__img{
  transform:scale(1.06);
  filter:brightness(0.55) saturate(0.9);
}
.coll-card__layer{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
}
.coll-card__body{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:36px 40px;
}
.coll-card__num{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.2em;
  color:var(--orange);
  margin-bottom:10px;
}
.coll-card__title{
  font-family:var(--font-h);
  font-size:clamp(28px,3.5vw,52px);
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--white);
  line-height:1.1;
  margin-bottom:8px;
}
.coll-card__sub{
  font-size:12px;
  color:rgba(255,255,255,0.55);
  letter-spacing:0.08em;
  margin-bottom:20px;
}
.coll-card__btn{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  border-bottom:1px solid var(--orange);
  padding-bottom:2px;
  transition:letter-spacing 0.2s;
}
.coll-card:hover .coll-card__btn{letter-spacing:0.2em;}

/* =====================================================
   PRODUCTS / CATALOG
===================================================== */
.products{background:var(--navy-2);}

.products__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:40px;
  flex-wrap:wrap;
  gap:20px;
}

.products__filter{
  display:flex;
  gap:4px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.filter-btn{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:var(--r);
  border:1px solid var(--line-light);
  color:var(--muted);
  transition:all 0.2s;
}
.filter-btn:hover{color:var(--white);border-color:var(--orange);}
.filter-btn.active{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}

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

.prod-card{
  background:var(--navy);
  transition:transform 0.3s var(--ease);
}
.prod-card.hidden{display:none;}

.prod-card__img-wrap{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4;
}
.prod-card__img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.75) saturate(0.7);
  transition:transform 0.6s var(--ease),filter 0.4s;
}
.prod-card:hover .prod-card__img-wrap img{
  transform:scale(1.05);
  filter:brightness(0.85) saturate(0.9);
}

.prod-card__badge{
  position:absolute;
  top:14px;
  left:14px;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  background:var(--orange);
  color:#fff;
  padding:5px 10px;
  border-radius:var(--r);
}

.prod-card__hover{
  position:absolute;
  bottom:0;left:0;right:0;
  background:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  transform:translateY(100%);
  transition:transform 0.3s var(--ease-out);
}
.prod-card:hover .prod-card__hover{transform:translateY(0);}

.prod-card__cta{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
}

.prod-card__info{
  padding:18px 20px 22px;
  border-top:2px solid transparent;
  transition:border-color 0.3s;
}
.prod-card:hover .prod-card__info{border-color:var(--orange);}

.prod-card__name{
  font-family:var(--font-b);
  font-size:17px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:6px;
}
.prod-card__detail{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* =====================================================
   BANNER CTA
===================================================== */
.banner-cta{
  position:relative;
  overflow:hidden;
  min-height:600px;
  display:flex;
  align-items:center;
  background:#0a0a0a; /* solid black layout block fallback */
}
.banner-cta__bg{
  position:absolute;inset:0;
  background:#0a0a0a;
}
.banner-cta__bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 20%;
  filter:brightness(0.25) saturate(0.4);
}
.banner-cta__overlay{
  position:absolute;inset:0;
  background:rgba(0, 0, 0, 0.7);
}
.banner-cta__content{
  position:relative;z-index:2;
  padding-block:100px;
}
.banner-cta__title{
  font-family:var(--font-h);
  font-size:clamp(48px,7vw,110px);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:0.95;
  color:var(--white);
  margin-bottom:28px;
}
.banner-cta__title em{
  color:var(--orange);
  font-style:normal;
}
.banner-cta__sub{
  font-size:17px;
  color:rgba(255,255,255,0.55);
  line-height:1.75;
  margin-bottom:48px;
  max-width:560px;
}

/* =====================================================
   PROCESS
===================================================== */
.process{background:var(--navy-3);}

.process__head{margin-bottom:64px;}

.process__steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
}
.proc-step{
  display:flex;
  align-items:flex-start;
  gap:28px;
  padding:40px 44px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background 0.3s;
}
.proc-step:hover{background:rgba(224,112,32,0.04);}
.proc-step:nth-child(2n){border-right:none;}
.proc-step:nth-child(5),
.proc-step:nth-child(6){border-bottom:none;}

.proc-step__left{flex-shrink:0;}
.proc-step__num{
  font-family:var(--font-h);
  font-size:56px;
  color:var(--line-light);
  line-height:1;
  letter-spacing:0.02em;
  transition:color 0.3s;
}
.proc-step:hover .proc-step__num{color:var(--orange);}

.proc-step__right{padding-top:6px;}
.proc-step__title{
  font-family:var(--font-b);
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--white);
  margin-bottom:10px;
}
.proc-step__desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
}

.process__cta{
  margin-top:60px;
  display:flex;
  justify-content:center;
}

/* =====================================================
   WHY US
===================================================== */
.why{background:var(--navy);}
.why__head{margin-bottom:64px;}

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

.why-card{
  background:var(--navy-2);
  padding:36px 28px;
  border-top:3px solid transparent;
  transition:border-color 0.3s,background 0.3s;
  position:relative;
}
.why-card:hover{
  border-color:var(--orange);
  background:var(--navy-3);
}
.why-card__num{
  position:absolute;
  top:24px;right:24px;
  font-family:var(--font-h);
  font-size:40px;
  color:var(--line);
  letter-spacing:0.02em;
  line-height:1;
  transition:color 0.3s;
}
.why-card:hover .why-card__num{color:var(--line-light);}
.why-card__icon{
  width:42px;height:42px;
  color:var(--orange);
  margin-bottom:22px;
}
.why-card__title{
  font-family:var(--font-b);
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--white);
  margin-bottom:12px;
}
.why-card__desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
}

/* =====================================================
   CUSTOM DEV STRIP
===================================================== */
.dev-strip{
  background:var(--navy-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dev-strip__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
}
.dev-strip__item{
  position:relative;
  overflow:hidden;
  aspect-ratio:1;
  cursor:pointer;
}
.dev-strip__item img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(0.4) saturate(0.5);
  transition:transform 0.6s var(--ease),filter 0.4s;
}
.dev-strip__item:hover img{
  transform:scale(1.07);
  filter:brightness(0.55) saturate(0.75);
}
.dev-strip__label{
  position:absolute;
  bottom:0;left:0;right:0;
  background:rgba(13,21,32,0.7);
  padding:14px 20px;
  font-family:var(--font-b);
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--white);
  border-top:2px solid var(--orange);
}

.dev-strip__cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:48px 60px;
  gap:32px;
  flex-wrap:wrap;
}
.dev-strip__title{
  font-family:var(--font-h);
  font-size:clamp(28px,3.5vw,52px);
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--white);
  line-height:1.1;
}
.dev-strip__title em{
  color:var(--orange);
  font-style:normal;
}

/* =====================================================
   QUOTE SECTION
===================================================== */
.quote-sec{background:var(--navy);}

.quote-sec__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

.quote-sec__left{padding-top:10px;}
.quote-sec__body{
  font-size:16px;
  color:var(--muted);
  line-height:1.75;
  margin-top:24px;
  margin-bottom:48px;
}

.quote-contacts{display:flex;flex-direction:column;gap:16px;}
.q-contact{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color 0.2s,background 0.2s;
}
.q-contact:hover{
  border-color:var(--orange);
  background:rgba(224,112,32,0.05);
}
.q-contact__icon{
  width:40px;height:40px;
  background:var(--navy-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);
  flex-shrink:0;
}
.q-contact__icon svg{width:18px;height:18px;}
.q-contact__label{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}
.q-contact__val{
  display:block;
  font-size:14px;
  color:var(--off-white);
  font-weight:500;
}

/* FORM */
.qform{
  background:var(--navy-2);
  border:1px solid var(--line);
  padding:44px;
  border-radius:var(--r);
}
.qform__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.qform__field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.qform__field label{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.qform__field input,
.qform__field select,
.qform__field textarea{
  background:var(--navy);
  border:1px solid var(--line);
  color:var(--white);
  font-size:14px;
  padding:13px 16px;
  border-radius:var(--r);
  outline:none;
  transition:border-color 0.2s;
  width:100%;
}
.qform__field input::placeholder,
.qform__field textarea::placeholder{color:var(--line-light);}
.qform__field input:focus,
.qform__field select:focus,
.qform__field textarea:focus{border-color:var(--orange);}
.qform__field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237A8BA0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  cursor:pointer;
}
.qform__field select option{background:var(--navy-2);}
.qform__field textarea{resize:vertical;min-height:120px;}

.qform__success{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--orange);
  font-size:14px;
  font-weight:600;
  margin-top:16px;
  padding:18px;
  border:1px solid rgba(224,112,32,0.3);
  border-radius:var(--r);
}
.qform__success svg{width:22px;height:22px;flex-shrink:0;}

/* =====================================================
   FOOTER
===================================================== */
.footer{
  background:var(--navy-2);
  border-top:1px solid var(--line);
}
.footer__top{
  display:flex;
  justify-content:space-between;
  gap:60px;
  padding-block:80px;
  flex-wrap:wrap;
}
.footer__logo{
  height:70px;
  width:auto;
  object-fit:contain;
  /* White bg for logo visibility */
  background: #ffffff;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 0 0 2px rgba(224,112,32,0.25);
  margin-bottom:16px;
}
.footer__tagline{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:24px;
}
.footer__socials{display:flex;gap:10px;}
.footer__social{
  width:38px;height:38px;
  border:1px solid var(--line-light);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:all 0.2s;
}
.footer__social:hover{
  border-color:var(--orange);
  color:var(--orange);
}
.footer__social svg{width:17px;height:17px;}

.footer__nav{display:flex;gap:60px;flex-wrap:wrap;}
.footer__col{display:flex;flex-direction:column;gap:10px;}
.footer__col h4{
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.footer__col a{
  font-size:13px;
  color:var(--muted);
  transition:color 0.2s;
  line-height:1.5;
}
.footer__col a:hover{color:var(--orange);}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:22px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
  gap:10px;
}
.footer__bottom p{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* =====================================================
   BACK TO TOP
===================================================== */
.back-top{
  position:fixed;
  bottom:32px;right:32px;
  width:46px;height:46px;
  background:var(--orange);
  color:#fff;
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  z-index:900;
  opacity:0;visibility:hidden;
  transform:translateY(12px);
  transition:all 0.3s var(--ease);
  box-shadow:0 6px 20px rgba(224,112,32,0.35);
}
.back-top.visible{
  opacity:1;visibility:visible;
  transform:translateY(0);
}
.back-top:hover{background:var(--orange-dk);transform:translateY(-3px);}
.back-top svg{width:18px;height:18px;}

/* =====================================================
   WELCOME POPUP
===================================================== */
.welcome-popup {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}

.welcome-popup.visible {
  opacity: 1;
  visibility: visible;
}

.welcome-popup__content {
  text-align: center;
  padding: 40px;
  max-width: 600px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s var(--ease-out) 0.3s;
}

.welcome-popup.visible .welcome-popup__content {
  transform: translateY(0);
  opacity: 1;
}

.welcome-popup__title {
  font-family: var(--font-h);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.welcome-popup__subtitle {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 24px;
}

.welcome-popup__features {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.welcome-popup__loader {
  height: 3px;
  width: 100%;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.welcome-popup__loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--red);
  border-radius: 3px;
}

.welcome-popup.loading .welcome-popup__loader::before {
  animation: fill-loader 2s linear forwards 0.8s;
}

@keyframes fill-loader {
  from { width: 0%; }
  to { width: 100%; }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1200px){
  .container,.stats-bar__inner,.nav__wrapper{padding-inline:32px;}
  .products__grid{grid-template-columns:repeat(3,1fr);}
  .why__grid{grid-template-columns:repeat(3,1fr);}
  .hero__left{padding:60px 44px 60px 56px;}
  .hero__right{padding:40px;}
}

@media(max-width:1024px){
  .container,.stats-bar__inner,.nav__wrapper{padding-inline:24px;}
  .hero{grid-template-columns:1fr;}
  .hero__right{display:none;}
  .hero__left{border-right:none;padding:100px 40px 80px;}
  .hero__left-content{max-width:100%;}
  .nav__wrapper{grid-template-columns:auto 1fr auto;}
  .nav__left{justify-content:flex-start;}
  .nav__logo-wrap{justify-content:center; text-align:center; width:100%;}
  #nav-email-link, #nav-phone-link, #nav-quote-btn { display: none; }
  .products__grid{grid-template-columns:repeat(2,1fr);}
  .why__grid{grid-template-columns:repeat(2,1fr);}
  .quote-sec__inner{grid-template-columns:1fr;gap:56px;}
  .dev-strip__inner{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
  .section{padding-block:72px;}
  .container,.stats-bar__inner,.nav__wrapper{padding-inline:20px;}

  .hero__left{padding:90px 24px 64px;}
  .hero__title{font-size:clamp(52px,14vw,90px);}
  .hero__badges{flex-direction:column;align-items:stretch;}
  .hero__badge{border-right:none;border-bottom:1px solid var(--line-light);}
  .hero__badge:last-child{border-bottom:none;}
  .hero__actions{flex-direction:column;align-items:stretch;}
  .hero__actions .btn{text-align:center;justify-content:center;}

  .stats-bar__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .stat-sep{display:none;}
  .stat-item{border:1px solid var(--line);border-radius:var(--r);padding:20px;}
  .coll-card__img{height:240px;}

  .products__grid{grid-template-columns:repeat(2,1fr);}
  .products__head{flex-direction:column;align-items:flex-start;}

  .process__steps{grid-template-columns:1fr;}
  .proc-step{border-right:none!important;}
  .proc-step:nth-child(5){border-bottom:1px solid var(--line)!important;}

  .why__grid{grid-template-columns:1fr 1fr;}

  .dev-strip__inner{grid-template-columns:1fr 1fr;}
  .dev-strip__cta{padding:36px 24px;flex-direction:column;align-items:flex-start;}

  .qform{padding:28px 22px;}
  .qform__row{grid-template-columns:1fr;}

  .footer__top{flex-direction:column;gap:36px;padding-block:56px;}
  .footer__nav{gap:32px;}
  .footer__bottom{flex-direction:column;align-items:flex-start;}

  .back-top{bottom:20px;right:20px;}
}

@media(max-width:480px){
  .products__grid{grid-template-columns:1fr;}
  .why__grid{grid-template-columns:1fr;}
  .dev-strip__inner{grid-template-columns:1fr;}
  .sec-title{font-size:clamp(36px,12vw,56px);}
  .announce-bar__track span:not(:nth-child(-n+6)){display:none;}
}

/* =====================================================
   CMS ADMIN MODAL STYLES
===================================================== */
.cms-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease);
  padding: 24px;
}
.cms-modal.open {
  opacity: 1;
  visibility: visible;
}

.cms-modal__dialog {
  background: var(--navy-2);
  border: 1px solid var(--line-light);
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.cms-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
}
.cms-modal__header h3 {
  font-family: var(--font-h);
  font-size: 24px;
  color: var(--red);
  letter-spacing: 0.05em;
}
.cms-modal__close {
  font-size: 28px;
  color: var(--muted);
  transition: color 0.2s;
}
.cms-modal__close:hover {
  color: var(--white);
}

.cms-modal__body {
  padding: 32px;
  overflow-y: auto;
}

.cms-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}

.cms-panel {
  background: var(--navy-3);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: var(--r);
}
.cms-panel h4 {
  font-family: var(--font-b);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

/* CMS Product Table */
.cms-table-wrapper {
  overflow-x: auto;
  max-height: 480px;
}
.cms-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.cms-table th, .cms-table td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.cms-table th {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 2;
}
.cms-table td {
  color: var(--mid-text);
}
.cms-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.cms-table-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--navy-mid);
}

.cms-table-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: var(--red);
  color: #fff;
  padding: 3px 6px;
  border-radius: var(--r);
  text-transform: uppercase;
}

.cms-delete-btn {
  color: #ff3b43;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}
.cms-delete-btn:hover {
  border-color: #ff3b43;
  letter-spacing: 0.05em;
}

/* Modal Overlay backdrop lock */
body.cms-open {
  overflow: hidden;
}

@media(max-width: 1024px) {
  .cms-layout {
    grid-template-columns: 1fr;
  }
}


@media(max-width:480px){
  .products__grid{grid-template-columns:1fr;}
  .why__grid{grid-template-columns:1fr;}
  .dev-strip__inner{grid-template-columns:1fr;}
  .sec-title{font-size:clamp(36px,12vw,56px);}
  .announce-bar__track span:not(:nth-child(-n+6)){display:none;}
}

/* =====================================================
   INTERACTIVE PRODUCT MODAL STYLES
===================================================== */
.prod-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease);
  padding: 24px;
}
.prod-modal.open {
  opacity: 1;
  visibility: visible;
}

.prod-modal__dialog {
  background: var(--navy-2);
  border: 1px solid var(--line-light);
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8);
  overflow: hidden;
}

.prod-modal__close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 32px;
  color: var(--muted);
  z-index: 10;
  transition: color 0.2s;
}
.prod-modal__close:hover {
  color: var(--red);
}

.prod-modal__body {
  padding: 40px;
  overflow-y: auto;
}

.pm-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
}

/* Gallery styling */
.pm-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pm-gallery__main {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--r);
  overflow: hidden;
  background: #151515;
  border: 1px solid var(--line);
}
.pm-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-gallery__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.pm-thumb {
  width: 60px;
  height: 80px;
  border-radius: var(--r);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #151515;
  transition: border-color 0.2s;
  flex-shrink: 0;
}
.pm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-thumb.active {
  border-color: var(--red);
}

/* Info side */
.pm-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pm-tag {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r);
  margin-bottom: 12px;
}
.pm-title {
  font-family: var(--font-h);
  font-size: 38px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 4px;
}
.pm-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pm-divider {
  height: 1px;
  background: var(--line);
  margin-bottom: 24px;
}
.pm-meta {
  margin-bottom: 20px;
}
.pm-meta h4 {
  font-family: var(--font-b);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.pm-meta p, .pm-meta li {
  font-size: 13px;
  color: var(--mid-text);
  line-height: 1.6;
}
.pm-meta ul {
  padding-left: 18px;
  list-style-type: square;
}
.pm-meta li strong {
  color: var(--white);
}

body.pm-open {
  overflow: hidden;
}

@media(max-width: 768px) {
  .pm-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .prod-modal {
    padding: 16px;
  }
  .prod-modal__dialog {
    max-height: 95vh;
  }
  .prod-modal__body {
    padding: 24px;
  }
}

/* =====================================================
   REVIEWS / TESTIMONIALS SECTION
===================================================== */
.reviews {
  background: var(--navy);
  border-top: 1px solid var(--line);
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--navy-2);
  border: 1px solid var(--line);
  padding: 36px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s var(--ease);
  position: relative;
}
.review-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  background: var(--navy-3);
}
.review-card__header {
  display: flex;
  gap: 4px;
  color: var(--orange);
  margin-bottom: 20px;
  font-size: 13px;
}
.review-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid-text);
  margin-bottom: 24px;
  font-style: italic;
}
.review-card__author {
  font-family: var(--font-body);
}
.review-card__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.review-card__company {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.review-card.hidden-review {
  display: none;
}

@media(max-width: 1024px) {
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 768px) {
  .reviews__grid {
    grid-template-columns: 1fr;
  }
  .review-card {
    padding: 28px;
  }
}