/* ==========================================================
   VEN Desiccant — Global Stylesheet
   Brand: VEN  |  Product: Silica Gel & Desiccant Manufacturer
   ========================================================== */

:root{
  --brand:        #0B4D8F;   /* deep industrial blue */
  --brand-dark:   #073766;
  --brand-light:  #1E6FBF;
  --accent:       #F08A24;   /* orange — indicating silica gel */
  --text:         #1A2230;
  --text-soft:    #5A6472;
  --line:         #E3E8EF;
  --bg:           #FFFFFF;
  --bg-soft:      #F5F8FC;
  --bg-dark:      #0A1626;
  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 4px 20px rgba(10,22,38,.08);
  --shadow-lg:    0 12px 40px rgba(10,22,38,.14);
  --maxw:         1180px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:var(--bg); line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-light); }
h1,h2,h3,h4{ line-height:1.22; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(28px,4vw,46px); }
h2{ font-size:clamp(23px,3vw,34px); }
h3{ font-size:clamp(18px,2vw,23px); }
p{ margin:0 0 1em; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section{ padding:72px 0; }
.section.soft{ background:var(--bg-soft); }
.section.tight{ padding:48px 0; }
.center{ text-align:center; }
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.section-head{ max-width:760px; margin:0 auto 44px; text-align:center; }
.section-head p{ color:var(--text-soft); font-size:17px; margin:0; }
.lead{ font-size:18px; color:var(--text-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 26px; border-radius:var(--radius); font-weight:600; font-size:15.5px;
  border:2px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#d97a16; color:#fff; transform:translateY(-1px); }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dark); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-ghost:hover{ background:var(--brand); color:#fff; }
.btn-light{ background:#fff; color:var(--brand); }
.btn-light:hover{ background:#eef4fb; color:var(--brand); }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#1eb257; color:#fff; }

/* ---------- Header / Nav ---------- */
.header{
  position:sticky; top:0; z-index:1000; background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:26px; height:70px;
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:21px;
  color:var(--brand-dark); letter-spacing:-.02em; }
.brand-logo{
  width:38px; height:38px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand),var(--brand-light));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px; letter-spacing:.02em;
}
.brand small{ display:block; font-size:10.5px; font-weight:600; color:var(--text-soft);
  letter-spacing:.06em; text-transform:uppercase; margin-top:-3px; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav > a, .nav .drop > button{
  padding:9px 14px; border-radius:8px; font-size:15px; font-weight:600; color:var(--text);
  background:none; border:none; font-family:inherit; cursor:pointer; display:inline-flex;
  align-items:center; gap:6px;
}
.nav > a:hover, .nav .drop > button:hover{ background:var(--bg-soft); color:var(--brand); }
.nav a.active{ color:var(--brand); background:var(--bg-soft); }

/* Dropdown */
.drop{ position:relative; }
.drop-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:300px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:12px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:.16s; z-index:1200;
}
.drop:hover .drop-menu, .drop:focus-within .drop-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.drop-menu .dm-group + .dm-group{ border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
.dm-group-title{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); padding:6px 10px 4px;
}
.dm-group a{
  display:block; padding:7px 10px; border-radius:7px; font-size:14px;
  color:var(--text); font-weight:500;
}
.dm-group a:hover{ background:var(--bg-soft); color:var(--brand); }

/* Language switcher */
.lang{ position:relative; margin-left:6px; }
.lang-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:8px;
  border:1px solid var(--line); background:#fff; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; color:var(--text);
}
.lang-btn:hover{ border-color:var(--brand-light); color:var(--brand); }
.lang-btn .globe{ font-size:16px; line-height:1; }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:186px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.16s; z-index:1200; max-height:70vh; overflow:auto;
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{
  display:block; width:100%; text-align:left; padding:8px 11px; border:none;
  background:none; border-radius:7px; font-family:inherit; font-size:14px;
  color:var(--text); cursor:pointer; font-weight:500;
}
.lang-menu button:hover{ background:var(--bg-soft); color:var(--brand); }
.lang-menu button.on{ background:var(--brand); color:#fff; }

/* Mobile menu toggle */
.burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; width:42px; height:40px; cursor:pointer; font-size:20px; }
.mobile-nav{ display:none; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(30,111,191,.55), transparent 62%),
    linear-gradient(135deg, var(--brand-dark), var(--brand) 62%, #0d5aa8);
  color:#fff; padding:88px 0 84px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; bottom:-140px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(240,138,36,.22), transparent 68%); border-radius:50%;
}
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; position:relative; z-index:2; }
.hero h1{ color:#fff; margin-bottom:18px; }
.hero p{ color:#dbe7f6; font-size:18.5px; max-width:560px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-badges{ display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }
.hero-badges div strong{ display:block; font-size:25px; color:#fff; }
.hero-badges div span{ font-size:13px; color:#b9cde4; }
.hero-visual{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-card{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg); padding:20px; backdrop-filter:blur(4px);
}
.hero-card b{ color:#fff; font-size:15px; }
.hero-card span{ display:block; color:#c3d5ea; font-size:13px; margin-top:5px; }
.hero-card .num{ font-size:26px; color:var(--accent); font-weight:800; }

/* ---------- Trust strip ---------- */
.trust{ background:var(--bg-soft); border-bottom:1px solid var(--line); padding:26px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center; }
.trust-item b{ display:block; font-size:15px; color:var(--text); }
.trust-item span{ font-size:13px; color:var(--text-soft); }
.trust-item .ic{ font-size:22px; margin-bottom:6px; }

/* ---------- Cards / Grids ---------- */
.grid{ display:grid; gap:24px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; transition:.18s; height:100%;
}
.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:#cfe0f2; }
.card .ic{
  width:48px; height:48px; border-radius:12px; background:var(--bg-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:15px;
}
.card h3{ font-size:18.5px; margin-bottom:9px; }
.card p{ color:var(--text-soft); font-size:14.5px; margin:0; }

/* Product category cards */
.cat-card{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:.18s; color:inherit;
}
.cat-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); color:inherit; }
.cat-thumb{
  height:158px; background:linear-gradient(135deg,#e9f1fa,#d5e5f6);
  display:flex; align-items:center; justify-content:center; color:var(--brand);
  font-size:44px; position:relative; overflow:hidden;
}
.cat-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-body{ padding:20px 22px 22px; }
.cat-body h3{ font-size:18px; margin-bottom:6px; }
.cat-body p{ font-size:14px; color:var(--text-soft); margin:0 0 12px; }
.cat-body .more{ font-size:13.5px; font-weight:700; color:var(--accent); }
.pill{
  display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:99px;
  background:var(--bg-soft); color:var(--text-soft); margin:0 5px 5px 0;
}

/* ---------- Spec table ---------- */
.spec-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); }
table.spec{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:420px; }
table.spec th, table.spec td{ padding:11px 15px; text-align:left; border-bottom:1px solid var(--line); }
table.spec thead th{ background:var(--bg-soft); color:var(--text); font-weight:700; font-size:13.5px; }
table.spec tbody tr:last-child td{ border-bottom:none; }
table.spec tbody tr:nth-child(even){ background:#fafcfe; }
table.spec td:first-child{ font-weight:600; color:var(--text); width:38%; }

/* ---------- Page hero (inner) ---------- */
.page-hero{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff; padding:52px 0 46px;
}
.page-hero h1{ color:#fff; margin-bottom:8px; }
.page-hero p{ color:#c9dbef; margin:0; max-width:720px; }
.crumb{ font-size:13px; color:#a9c2de; margin-bottom:12px; }
.crumb a{ color:#cfe0f2; }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand-light));
  color:#fff; border-radius:var(--radius-lg); padding:46px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin:0 0 8px; }
.cta-band p{ color:#d5e5f6; margin:0; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Contact / Form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13.5px; font-weight:600; color:var(--text); }
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:15px; color:var(--text); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(30,111,191,.12);
}
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:12.5px; color:var(--text-soft); margin-top:10px; }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-dark); color:#cddbea; padding:58px 0 26px; font-size:15px; }
.footer a{ color:#dbe7f4; }
.footer a:hover{ color:#fff; }
.footer h4{ color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px; }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid li{ margin-bottom:9px; }
.foot-bottom{
  border-top:1px solid #1d2c40; margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#a9bdd4; font-size:13.5px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8798ad;
}
.foot-brand{ display:flex; align-items:center; gap:11px; color:#fff; font-weight:800; font-size:20px; margin-bottom:14px; }

/* ---------- Misc ---------- */
.note-box{
  background:#FFF7EC; border:1px solid #F7D9AE; border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:16px 20px; font-size:14.5px; color:#7a4a10;
}
.info-box{
  background:var(--bg-soft); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--radius); padding:16px 20px; font-size:14.5px;
}
.tick{ list-style:none; padding:0; margin:0; }
.tick li{ padding-left:28px; position:relative; margin-bottom:10px; color:var(--text-soft); }
.tick li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:800; }
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:900; background:#25D366; color:#fff;
  border-radius:99px; padding:13px 20px; font-weight:700; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:9px; font-size:15px;
}
.wa-float:hover{ color:#fff; background:#1eb257; }

@media (max-width:980px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-visual{ grid-template-columns:1fr 1fr; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .mobile-nav.open{ display:block; }
  .mobile-nav{ background:#fff; border-bottom:1px solid var(--line); padding:12px 0; }
  .mobile-nav a{ display:block; padding:11px 22px; color:var(--text); font-weight:600; }
  .mobile-nav a:hover{ background:var(--bg-soft); }
  .mobile-nav .m-group{ font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); padding:12px 22px 4px; font-weight:700; }
}
@media (max-width:620px){
  .g4,.g3,.g2,.form-grid,.hero-visual{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .section{ padding:52px 0; }
  .cta-band{ padding:34px 26px; }
  .hero{ padding:60px 0; }
}

/* RTL (Arabic) */
html[dir="rtl"] .nav{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .hero p{ margin-right:0; }
html[dir="rtl"] .tick li{ padding-left:0; padding-right:28px; }
html[dir="rtl"] .tick li::before{ left:auto; right:0; }
html[dir="rtl"] .crumb{ text-align:right; }

/* Product & facility images */
.product-figure{
  margin:20px 0 0; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:#f6f9fc; box-shadow:var(--shadow);
}
.product-photo{ width:100%; max-height:420px; object-fit:contain; display:block; background:#fff; }
.img-ph.product-photo{
  min-height:280px; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed #c3d3e6; color:#94a9c4; font-size:12px; letter-spacing:.06em;
}
.side-photo{
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#f6f9fc;
}
.side-photo-img{ width:100%; height:180px; object-fit:contain; display:block; background:#fff; }
.img-ph.side-photo-img{
  height:180px; display:flex; align-items:center; justify-content:center;
  border:1.5px dashed #c3d3e6; color:#94a9c4; font-size:12px; letter-spacing:.06em;
}
.facility-photo{ width:100%; height:180px; object-fit:cover; border-radius:10px; display:block; }