/* ============================================================
   A.S TRADERS — MAIN STYLESHEET
   Color Scheme: Deep Blue #1A1FC8, Navy #0D1170, Mint #C8E6C9
   ============================================================ */
:root {
  --blue:        #2d437d;
  --blue-dk:     #0D1170;
  --blue-mid:    #213670;
  --blue-lt:     #3B41E8;
  --mint:        #C8E6C9;
  --mint-dk:     #8FC991;
  --navy:        #213670;
  --steel-bg:    #F0F2FF;
  --steel-border:#D0D4F8;
  --white:       #FFFFFF;
  --offwhite:    #F8F9FF;
  --text-dk:     #0A0D40;
  --text-md:     #3A3F7A;
  --text-lt:     #7880B8;
  --warmgray:    #E8EAF6;
  --red-acc:     #E53935;
  --gold:        #FFD600;
  --fh: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --fb: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --shadow: 0 4px 24px rgba(26,31,200,0.10);
  --shadow-lg: 0 12px 48px rgba(26,31,200,0.18);
}

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

html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: #fff;
  color: var(--text-dk);
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--steel-bg); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ---- TOP BAR ---- */
.topbar {
  background: var(--navy);
  padding: 6px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.topbar-in {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px;
}
.topbar a { color: var(--mint); transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar-right { display: flex; gap: 18px; align-items: center; }

/* ---- NAVBAR ---- */
#navbar {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 3px solid var(--blue);
  box-shadow: 0 2px 12px rgba(26,31,200,0.08);
  transition: box-shadow .3s;
}
#navbar.scrolled { box-shadow: 0 4px 28px rgba(26,31,200,0.15); }
.nav-in {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.logo img { height: 52px; width: auto; object-fit: contain; }
.logo-txt { font-family: var(--fh); font-weight: 900; font-size: 13px; color: var(--text-md); line-height: 1.3; letter-spacing: .04em; }
.logo-txt span { display: block; font-size: 10px; font-weight: 500; color: var(--text-lt); }

nav ul { list-style: none; display: flex; align-items: center; }
nav ul li { position: relative; }
nav ul li > a {
  display: block; padding: 8px 13px;
  font-family: var(--fh); font-weight: 700; font-size: 14px;
  color: var(--text-dk); letter-spacing: .04em; text-transform: uppercase;
  transition: color .2s; white-space: nowrap; cursor: pointer;
}
nav ul li > a::after {
  content: ''; display: block; height: 2px;
  background: var(--blue); width: 0; transition: width .3s;
}
nav ul li > a:hover, nav ul li > a.active { color: var(--blue); }
nav ul li > a:hover::after, nav ul li > a.active::after { width: 100%; }

/* Dropdown */
.dd {
  position: absolute; top: 100%; left: 0;
  background: #fff; min-width: 210px;
  border-top: 3px solid var(--blue);
  box-shadow: 0 10px 40px rgba(26,31,200,0.15);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px); transition: all .25s; z-index: 999;
}
nav ul li:hover .dd { opacity: 1; pointer-events: all; transform: translateY(0); }
.dd li a {
  display: block; padding: 10px 18px;
  font-size: 13px; border-bottom: 1px solid var(--warmgray);
  color: var(--text-dk); font-family: var(--fb); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.dd li:last-child a { border-bottom: none; }
.dd li a:hover { background: var(--steel-bg); color: var(--blue); }
.dd li a::after { display: none !important; }

.nav-cta {
  background: var(--blue) !important; color: #fff !important;
  padding: 9px 20px !important; margin-left: 8px !important;
  clip-path: polygon(6% 0,100% 0,94% 100%,0 100%);
}
.nav-cta:hover { background: var(--blue-dk) !important; color: #fff !important; }
.nav-cta::after { display: none !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--blue); transition: all .3s; }

/* Mobile menu */
.mob-menu {
  display: none; position: fixed; inset: 0;
  background: var(--navy); z-index: 2000;
  flex-direction: column; align-items: center; justify-content: center;
  overflow-y: auto; padding: 20px;
}
.mob-menu.open { display: flex; }
.mob-menu a {
  font-family: var(--fh); font-size: 26px; font-weight: 800;
  color: #fff; text-transform: uppercase; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  width: 85%; text-align: center; cursor: pointer;
}
.mob-menu a:hover { color: var(--mint); }
.mob-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: none; border: none; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fh); font-weight: 700; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 28px; cursor: pointer; border: none;
  transition: all .3s; text-decoration: none;
}
.btn-blue { background: var(--blue); color: #fff; clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
.btn-blue:hover { background: var(--blue-dk); transform: translateX(2px); }
.btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--blue); clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
.btn-white:hover { background: var(--mint); }
.btn-mint { background: var(--mint); color: var(--navy); clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
.btn-mint:hover { background: var(--mint-dk); }
.btn-sm { padding: 8px 20px; font-size: 13px; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1da851; }

/* ---- PAGE HERO ---- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dk) 55%, var(--blue) 100%);
  padding: 60px 20px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,.015) 50px, rgba(255,255,255,.015) 51px),
              repeating-linear-gradient(0deg,  transparent, transparent 50px, rgba(255,255,255,.015) 50px, rgba(255,255,255,.015) 51px);
}
.page-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: linear-gradient(90deg, var(--mint), var(--blue-lt), var(--mint));
}
.page-hero h1 {
  font-family: var(--fh); font-weight: 900;
  font-size: clamp(36px,6vw,68px); color: #fff;
  text-transform: uppercase; letter-spacing: -.02em; position: relative;
}
.page-hero p { color: rgba(200,230,201,.9); font-size: 16px; margin-top: 10px; max-width: 600px; margin-inline: auto; position: relative; }
.breadcrumb { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 14px; position: relative; }
.breadcrumb a { color: var(--mint); }

/* ---- SECTION ---- */
section { padding: 80px 20px; }
.container { max-width: 1200px; margin: 0 auto; }
.sec-tag {
  display: inline-block; font-family: var(--fh); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  border-left: 3px solid var(--blue); padding-left: 10px; margin-bottom: 10px;
}
.sec-title {
  font-family: var(--fh); font-weight: 900;
  font-size: clamp(32px,5vw,54px); line-height: 1;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--text-dk);
}
.sec-title span { color: var(--blue); }
.sec-title .ac-mint { color: var(--mint-dk); }
.sec-sub { font-size: 15px; color: var(--text-md); margin-top: 14px; max-width: 560px; line-height: 1.75; }
.sec-hdr { margin-bottom: 52px; }
.sec-hdr-center { margin-bottom: 52px; text-align: center; }
.sec-hdr-center .sec-sub { margin-inline: auto; }

/* ---- STATS STRIP ---- */
.stats-strip { background: var(--blue); padding: 0; }
.stats-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { text-align: center; padding: 30px 10px; border-right: 1px solid rgba(255,255,255,.15); }
.stat-item:last-child { border-right: none; }
.stat-n { font-family: var(--fh); font-size: 52px; font-weight: 900; color: #fff; line-height: 1; }
.stat-u { font-size: 20px; color: var(--mint); }
.stat-l { font-size: 11px; color: rgba(255,255,255,.75); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }

/* ---- PRODUCT CARDS ---- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 24px; }
.pcard {
  background: #fff; border: 1px solid var(--steel-border);
  overflow: hidden; transition: all .35s; cursor: pointer;
  box-shadow: var(--shadow);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
.pcard-img {
  height: 220px; background: linear-gradient(135deg,var(--navy),var(--blue-dk));
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
}
.pcard-img .img-ph {
  font-family: var(--fh); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.25); margin-top: 10px;
}
.pcard-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pbadge {
  position: absolute; top: 12px; right: 12px;
  background: var(--blue); color: #fff;
  font-family: var(--fh); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; padding: 4px 12px; text-transform: uppercase;
  clip-path: polygon(5% 0,100% 0,95% 100%,0 100%);
}
.pcard-body { padding: 22px; }
.pcard-name { font-family: var(--fh); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--text-dk); }
.pcard-desc { font-size: 13px; color: var(--text-md); margin: 8px 0 14px; line-height: 1.65; }
.schips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.schip { font-size: 11px; font-weight: 600; padding: 3px 10px; background: var(--steel-bg); color: var(--blue); font-family: var(--fh); border: 1px solid var(--steel-border); letter-spacing: .04em; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--warmgray); }

/* ---- USES CARDS ---- */
.uses-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 24px; }
.use-card {
  background: #fff; border: 1px solid var(--steel-border);
  overflow: hidden; transition: all .3s; box-shadow: var(--shadow);
}
.use-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue); }
.use-card-img {
  height: 180px; overflow: hidden; position: relative;
  background: linear-gradient(135deg,var(--navy),var(--blue));
  display: flex; align-items: center; justify-content: center;
}
.use-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.use-card:hover .use-card-img img { transform: scale(1.05); }
.use-card-img .use-ico { font-size: 60px; line-height: 1; opacity: .7; }
.use-card-body { padding: 20px; }
.use-title {
  font-family: var(--fh); font-size: 19px; font-weight: 800;
  text-transform: uppercase; color: var(--text-dk); margin-bottom: 8px;
  border-left: 3px solid var(--blue); padding-left: 10px;
}
.use-desc { font-size: 13px; color: var(--text-md); line-height: 1.7; }

/* ---- WHY CARDS ---- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 22px; }
.wcard {
  padding: 28px 22px; border: 1px solid var(--steel-border);
  background: #fff; transition: all .3s; box-shadow: var(--shadow);
  border-top: 3px solid transparent;
}
.wcard:hover { border-top-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.wicon {
  width: 50px; height: 50px; background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; clip-path: polygon(0 0,85% 0,100% 100%,15% 100%);
}
.wicon svg { width: 24px; height: 24px; fill: #fff; }
.wtitle { font-family: var(--fh); font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--text-dk); margin-bottom: 8px; }
.wtext { font-size: 13px; color: var(--text-md); line-height: 1.7; }

/* ---- TABLES ---- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--steel-border); }
table.stbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.stbl th { background: var(--blue); color: #fff; font-family: var(--fh); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 13px 16px; text-align: left; }
.stbl td { padding: 10px 16px; border-bottom: 1px solid var(--warmgray); color: var(--text-dk); }
.stbl tr:nth-child(even) td { background: var(--steel-bg); }
.stbl tr:hover td { background: rgba(26,31,200,.04); }

/* ---- ORDER FORM ---- */
.form-box { background: #fff; border: 1px solid var(--steel-border); padding: 36px; box-shadow: var(--shadow); }
.form-ttl { font-family: var(--fh); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--text-dk); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 3px solid var(--blue); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-md); margin-bottom: 6px; font-family: var(--fh); }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--steel-border); border-radius: 2px;
  font-family: var(--fb); font-size: 14px; color: var(--text-dk);
  background: #fff; outline: none; transition: border-color .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,31,200,.07); }
.fg textarea { resize: vertical; min-height: 95px; }
.form-ok { display: none; background: #E8F5E9; border-left: 4px solid #2E7D32; padding: 14px; color: #2E7D32; font-weight: 500; margin-top: 14px; font-size: 14px; }

/* ---- ORDER INFO PANEL ---- */
.oinfo { background: var(--navy); padding: 32px; color: #fff; }
.oinfo h3 { font-family: var(--fh); font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; color: #fff; border-bottom: 2px solid var(--blue); padding-bottom: 10px; }
.oirow { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.oirow:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.oiicon { width: 38px; height: 38px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oiicon svg { width: 18px; height: 18px; fill: #fff; }
.oil { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(200,230,201,.8); margin-bottom: 3px; font-family: var(--fh); }
.oiv { font-size: 14px; color: #fff; font-weight: 500; }

/* ---- TESTIMONIALS ---- */
.test-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 22px; }
.tcard { background: #fff; padding: 28px; border-top: 3px solid var(--blue); box-shadow: var(--shadow); }
.tstars { color: var(--gold); font-size: 16px; margin-bottom: 12px; }
.ttext { font-size: 13px; color: var(--text-md); line-height: 1.75; font-style: italic; }
.tauth { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.tav { width: 42px; height: 42px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 800; font-size: 16px; flex-shrink: 0; }
.tname { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--text-dk); }
.trole { font-size: 11px; color: var(--text-lt); }

/* ---- CTA BANNER ---- */
.cta-ban { background: linear-gradient(135deg,var(--navy),var(--blue)); padding: 64px 20px; text-align: center; position: relative; overflow: hidden; }
.cta-ban::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; border-radius: 50%; background: rgba(200,230,201,.06); }
.cta-ban::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--mint),var(--blue-lt),var(--mint)); }
.cta-ban h2 { font-family: var(--fh); font-size: clamp(32px,5vw,56px); font-weight: 900; color: #fff; text-transform: uppercase; position: relative; }
.cta-ban p { color: rgba(255,255,255,.85); font-size: 16px; margin: 14px 0 28px; position: relative; max-width: 580px; margin-inline: auto; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ---- ABOUT ---- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.abox { background: var(--navy); padding: 44px 34px; position: relative; }
.abox::before { content: ''; position: absolute; top: -10px; left: -10px; right: 10px; bottom: 10px; border: 2px solid var(--blue); z-index: -1; }
.astat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.astat { background: var(--blue); padding: 20px; text-align: center; }
.astat-n { font-family: var(--fh); font-size: 40px; font-weight: 900; color: #fff; }
.astat-l { font-size: 10px; color: rgba(200,230,201,.9); text-transform: uppercase; letter-spacing: .06em; }
.tline-item { display: flex; gap: 18px; margin-bottom: 26px; position: relative; }
.tline-item::before { content: ''; position: absolute; left: 14px; top: 32px; bottom: -26px; width: 1px; background: var(--steel-border); }
.tline-item:last-child::before { display: none; }
.tdot { width: 30px; height: 30px; background: var(--blue); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 11px; font-weight: 700; color: #fff; margin-top: 2px; }
.tyear { font-family: var(--fh); font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; }
.ttext2 { font-size: 13px; color: var(--text-md); line-height: 1.65; margin-top: 2px; }

/* ---- INDUSTRIES ---- */
.itags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.itag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(200,230,201,.2);
  color: rgba(255,255,255,.8); font-family: var(--fh); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; padding: 9px 18px; text-transform: uppercase; transition: all .3s;
}
.itag:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- GALLERY ---- */
.gal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.gal-item { aspect-ratio: 4/3; overflow: hidden; position: relative; background: linear-gradient(135deg,var(--navy),var(--blue)); cursor: pointer; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gal-item:hover img { transform: scale(1.06); }
.gal-item .gal-ov { position: absolute; inset: 0; background: rgba(10,14,90,.5); opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
.gal-item:hover .gal-ov { opacity: 1; }
.gal-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; }
.gal-ph svg { fill: rgba(255,255,255,.2); }
.gal-ph span { font-family: var(--fh); font-size: 11px; color: rgba(255,255,255,.3); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 10px; }

/* ---- FAQ ---- */
.faq-item { border: 1px solid var(--steel-border); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow); }
.faq-q { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #fff; font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--text-dk); text-transform: uppercase; letter-spacing: .02em; user-select: none; transition: background .2s; }
.faq-q:hover { background: var(--steel-bg); }
.faq-q.open { background: var(--blue); color: #fff; }
.faq-ico { font-size: 22px; color: var(--blue); transition: transform .3s; flex-shrink: 0; margin-left: 12px; }
.faq-q.open .faq-ico { color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .38s ease; }
.faq-a-in { padding: 16px 22px 20px; font-size: 14px; color: var(--text-md); line-height: 1.8; border-top: 1px solid var(--warmgray); background: var(--offwhite); }

/* ---- CONTACT ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.map-box { height: 280px; background: var(--steel-bg); border: 1px solid var(--steel-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-lt); margin-bottom: 22px; }

/* ---- FOOTER ---- */
footer { background: var(--text-dk); color: #fff; padding: 60px 20px 0; }
.foot-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.foot-logo img { height: 56px; width: auto; filter: brightness(0) invert(1); margin-bottom: 14px; }
.foot-brand p { font-size: 13px; color: rgba(200,230,201,.6); line-height: 1.75; }
.foot-col h4 { font-family: var(--fh); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(200,230,201,.15); }
.foot-col ul { list-style: none; }
.foot-col ul li { margin-bottom: 8px; }
.foot-col ul li a { font-size: 13px; color: rgba(255,255,255,.55); transition: color .2s; cursor: pointer; }
.foot-col ul li a:hover { color: var(--mint); }
.foot-btm { max-width: 1200px; margin: 0 auto; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.35); flex-wrap: wrap; gap: 8px; }

/* ---- WA FLOAT ---- */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  width: 56px; height: 56px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.4); animation: wab 2.2s ease-in-out infinite;
  text-decoration: none;
}
.wa-float:hover { background: #1da851; transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
@keyframes wab { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ---- ANIMATIONS ---- */
.fu { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.fl { opacity: 0; transform: translateX(-28px); transition: opacity .65s ease, transform .65s ease; }
.fr { opacity: 0; transform: translateX(28px); transition: opacity .65s ease, transform .65s ease; }
.fu.vis, .fl.vis, .fr.vis { opacity: 1; transform: none; }
.fu:nth-child(2){transition-delay:.1s} .fu:nth-child(3){transition-delay:.2s}
.fu:nth-child(4){transition-delay:.3s} .fu:nth-child(5){transition-delay:.4s}
.fu:nth-child(6){transition-delay:.5s}

/* ---- RESPONSIVE ---- */
@media(max-width:960px){
  .about-grid,.contact-grid,.order-grid { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); }
  nav ul { display: none; }
  .hamburger { display: flex; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px){
  .stats-grid,.foot-grid,.gal-grid { grid-template-columns: 1fr; }
  .prod-grid,.uses-grid,.why-grid,.test-grid { grid-template-columns: 1fr; }
  section { padding: 56px 16px; }
}


/* ========= FLOATING SOCIAL MEDIA ICONS (ANIMATED) ========= */
        /* fixed position, right side, vertical layout */
        .floating-socials {
            position: fixed;
            left: 24px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
            filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
        }

        /* each icon container */
        .social-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 30px;
            text-decoration: none;
            color: #333;
            font-size: 28px;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            position: relative;
            box-shadow: 0 5px 12px rgba(0,0,0,0.15);
            backdrop-filter: blur(2px);
            animation: floatBounce 2.2s infinite ease-in-out;
            transform-origin: center;
        }

        /* individual animation delays for organic floating */
        .social-item:nth-child(1) { animation-delay: 0s; background: linear-gradient(145deg, #fff, #f8f9ff); }
        .social-item:nth-child(2) { animation-delay: 0.3s; }
        .social-item:nth-child(3) { animation-delay: 0.6s; }
        .social-item:nth-child(4) { animation-delay: 0.9s; }
        .social-item:nth-child(5) { animation-delay: 1.2s; }
        .social-item:nth-child(6) { animation-delay: 0.15s; background: #25D366; color: white; box-shadow: 0 5px 15px rgba(37,211,102,0.4); }

        /* keyframe float animation (up-down + slight rotation) */
        @keyframes floatBounce {
            0% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-10px) rotate(2deg);
            }
            100% {
                transform: translateY(0px) rotate(0deg);
            }
        }

        /* hover effect: scale + stop floating? keep smooth, but enhance */
        .social-item:hover {
            transform: scale(1.18) translateY(-4px) !important;
            animation: none;      /* pause float for crisp hover */
            box-shadow: 0 18px 30px -6px rgba(0,0,0,0.3);
            transition: all 0.2s ease;
        }

        /* brand-specific colors on hover / permanent for some */
        .social-item .fab, .social-item .fas {
            transition: transform 0.2s;
        }

        .social-item:hover .fab, .social-item:hover .fas {
            transform: scale(1.05);
        }

        /* specific brand background override for better visibility (optional but aesthetic) */
        .social-item[data-brand="facebook"]:hover { background: #1877f2; color: white; }
        .social-item[data-brand="instagram"]:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: white; }
        .social-item[data-brand="tiktok"]:hover { background: #010101; color: #00f2ea; text-shadow: 0 0 3px #ff0040; }
        .social-item[data-brand="youtube"]:hover { background: #ff0000; color: white; }
        .social-item[data-brand="call"]:hover { background: #2ecc71; color: white; }
        .social-item[data-brand="whatsapp"]:hover { background: #128C7E; color: white; transform: scale(1.2) !important; }

        /* make sure call icon uses fas */
        .social-item .fas.fa-phone-alt {
            font-size: 26px;
        }

        /* tooltip mini labels for extra clarity (optional) */
        .social-item::after {
            content: attr(data-label);
            position: absolute;
            right: 70px;
            background: rgba(0,0,0,0.75);
            color: white;
            font-size: 13px;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 40px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            transform: translateX(8px);
            font-family: 'Segoe UI', sans-serif;
            backdrop-filter: blur(4px);
            letter-spacing: 0.3px;
        }

        .social-item:hover::after {
            opacity: 1;
            transform: translateX(0px);
        }

        /* WhatsApp special floating button (separate from normal social? but consistent: item 6 is WA) 
           we also add get free quotation text inside tooltip */
        .social-item[data-brand="whatsapp"]::after {
            content: "Get Free Quotation 💬";
            background: #075e54;
            font-weight: bold;
        }

        /* responsiveness: if screen too small, move to bottom right corner */
        @media (max-width: 680px) {
            .floating-socials {
                right: 16px;
                gap: 12px;
            }
            .social-item {
                width: 48px;
                height: 48px;
                font-size: 24px;
            }
            .social-item::after {
                right: 58px;
                font-size: 11px;
                padding: 4px 10px;
            }
            .hero h1 {
                font-size: 1.9rem;
            }
        }

        /* optional "back to top" / scroll behavior — not required but nice */
        html {
            scroll-behavior: smooth;
        }

        /* decorative attention */
        .badge-corner {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            color: white;
            padding: 6px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            z-index: 999;
            pointer-events: none;
            font-family: monospace;
        }