/* =========================================================
   ARK STEEL — Design System
   Palette: Deep Steel Blue #163A5F / Industrial Orange #F97316
            Silver #C0C0C0 / BG #F8FAFC / Dark #111827 / White
   Type: Poppins (headings) / Inter (body)
   Signature motif: rolled-steel diagonal cuts + I-beam profile
   dividers + molten-orange glow on interaction
   ========================================================= */

:root{
  --steel-blue: #163A5F;
  --steel-blue-light: #1F5187;
  --steel-blue-dark: #0D2540;
  --orange: #F97316;
  --orange-light: #FFB020;
  --silver: #C0C0C0;
  --bg: #F8FAFC;
  --dark: #111827;
  --white: #FFFFFF;

  --grad-btn: linear-gradient(90deg, var(--steel-blue) 0%, var(--orange) 100%);
--grad-hero: linear-gradient(
    135deg,
    rgba(13,37,64,.95) 0%,
    rgba(13,37,64,.90) 20%,
    rgba(13,37,64,.75) 40%,
    rgba(13,37,64,.35) 65%,
    rgba(13,37,64,0) 100%
);  --grad-text: linear-gradient(90deg,#8FB7E0, #FFB020);

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(13,37,64,.08);
  --shadow-card: 0 20px 40px rgba(13,37,64,.12);
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; font-family: var(--font-body); color: var(--dark);
  background: var(--bg); overflow-x:hidden; line-height:1.6;
}
h1,h2,h3,h4,h5{ font-family: var(--font-head); margin:0 0 .5em; color: var(--steel-blue-dark); font-weight:700; }
p{ margin:0 0 1em; color:#3d4758; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }
.section{ padding:100px 0; position:relative; }
.section-tight{ padding:60px 0; }
.bg-dark{ background: var(--dark); color:#fff; }
.bg-dark h2,.bg-dark h3,.bg-dark p{ color:#fff; }
.bg-alt{ background:#EEF3F8; }

/* ---------- Eyebrow / Section head ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-head); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color: var(--orange); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:26px; height:3px; background: var(--orange); border-radius:2px; }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* ---------- Beam divider (signature element) ---------- */
.beam-divider{ display:flex; align-items:center; gap:14px; margin: 8px 0 30px; }
.beam-divider .flange{ height:5px; width:46px; background: var(--steel-blue); border-radius:2px; }
.beam-divider .web{ height:16px; width:3px; background: var(--orange); }
.beam-divider span.label{ font-family:var(--font-head); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-blue); }

.diag-cut-top{ clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); }
.diag-cut-bottom{ clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 32px;
  border-radius:50px; font-family:var(--font-head); font-weight:600; font-size:.94rem;
  border:none; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background: var(--grad-btn); color:#fff; box-shadow:0 10px 24px rgba(249,115,22,.28); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(249,115,22,.4); }
.btn-outline{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5); }
.btn-outline:hover{ background:#fff; color:var(--steel-blue-dark); border-color:#fff; transform:translateY(-3px); }
.btn-dark{ background:var(--steel-blue-dark); color:#fff; }
.btn-dark:hover{ background:var(--orange); transform:translateY(-3px); }
.btn-sm{ padding:10px 20px; font-size:.82rem; }
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:rippleAnim .6s linear; pointer-events:none; }
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* ---------- Loader ---------- */
#page-loader{
  position:fixed; inset:0; background:var(--steel-blue-dark); z-index:9999;
  display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease;
}
#page-loader.hide{ opacity:0; visibility:hidden; }
.loader-beam{ width:70px; height:70px; position:relative; }
.loader-beam span{
  position:absolute; inset:0; border:4px solid transparent; border-top-color:var(--orange);
  border-right-color: var(--silver); border-radius:50%; animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Scroll progress ---------- */
#scroll-progress{ position:fixed; top:0; left:0; height:3px; background:var(--grad-btn); z-index:1201; width:0%; }

/* ---------- Header ---------- */
#site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1100; transition: all .4s var(--ease);
  background: rgba(17,24,39,.0);
}
#site-header.dark-bar{ background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.12) 65%, transparent 100%); }
#site-header.scrolled{ background: rgba(13,37,64,.97); box-shadow:0 8px 24px rgba(0,0,0,.2); backdrop-filter: blur(10px); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.logo-wrap{
  display:flex; align-items:center; gap:12px; background:#fff; padding:8px 18px;
  border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.18); transition:.3s var(--ease);
}
.logo-wrap:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.24); }
.logo-wrap img{ height:38px; width:auto; }
.logo-wrap span{ display:none; }
@media (max-width:900px){ .logo-wrap{ padding:6px 12px; } .logo-wrap img{ height:32px; } }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:6px; }
.main-nav a.nav-link{
  color:#fff; font-family:var(--font-head); font-size:.9rem; font-weight:500; padding:10px 16px;
  border-radius:30px; display:flex; align-items:center; gap:6px; transition:.3s;
}
.main-nav a.nav-link:hover, .main-nav li.active > a.nav-link{ background: rgba(255,255,255,.1); color: var(--orange-light); }
.main-nav li{ position:relative; }

.mega-menu{
  position:absolute; top:120%; left:50%; transform:translateX(-50%) translateY(10px);
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-card); padding:28px;
  width:560px; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;
  opacity:0; visibility:hidden; transition:.3s var(--ease);
}
.main-nav li:hover .mega-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-menu a{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; color:var(--dark); }
.mega-menu a:hover{ background:#F1F5F9; }
.mega-menu a strong{ font-family:var(--font-head); font-size:.88rem; color:var(--steel-blue); }
.mega-menu a small{ color:#748094; font-size:.76rem; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.icon-btn{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:.3s; }
.icon-btn:hover{ background:var(--orange); }
.hamburger{ display:none; flex-direction:column; gap:5px; width:28px; cursor:pointer; z-index:1200; }
.hamburger span{ height:2px; background:#fff; border-radius:2px; transition:.3s; }

.search-overlay{
  position:fixed; inset:0; background:rgba(13,37,64,.97); z-index:1300; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:.4s;
}
.search-overlay.active{ opacity:1; visibility:visible; }
.search-overlay input{ width:min(600px,80vw); background:transparent; border:none; border-bottom:2px solid var(--orange); font-size:2rem; color:#fff; font-family:var(--font-head); padding:12px 0; outline:none; }
.search-close{ position:absolute; top:30px; right:40px; color:#fff; font-size:1.8rem; cursor:pointer; }

/* Mobile nav */
.mobile-nav{
  position:fixed; top:0; right:-100%; width:min(340px,86vw); height:100vh; background:var(--steel-blue-dark);
  z-index:1150; transition:right .45s var(--ease); padding:100px 28px 28px; overflow-y:auto;
}
.mobile-nav.active{ right:0; }
.mobile-nav a{ display:block; color:#fff; font-family:var(--font-head); padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav .sub-list{ padding-left:14px; }
.mobile-nav .sub-list a{ font-size:.85rem; color:var(--silver); padding:8px 0; border:none; }
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1140; opacity:0; visibility:hidden; transition:.4s; }
.nav-overlay.active{ opacity:1; visibility:visible; }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden;
  background: var(--steel-blue-dark);
}
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-bg::after{ content:""; position:absolute; inset:0; background: var(--grad-hero); }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.floating-shape{ position:absolute; opacity:.5; pointer-events:none; }
.shape-beam{
  width:340px; height:70px; border:3px solid rgba(249,115,22,.35); border-radius:6px; transform:rotate(-18deg);
  animation: floatY 8s ease-in-out infinite;
}
.shape-ring{ width:220px; height:220px; border:2px solid rgba(255,255,255,.12); border-radius:50%; animation: floatY 10s ease-in-out infinite reverse; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) rotate(-18deg);} 50%{ transform:translateY(-26px) rotate(-14deg);} }

/* ---------- Hero Auto Slider (multiple animation styles) ---------- */
.hero-slider{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; z-index:1; transition:opacity 1.1s ease; overflow:hidden; }
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slide::after{ content:""; position:absolute; inset:0; background: var(--grad-hero); }

/* effect: slow zoom (Ken Burns) */
.hero-slide[data-effect="zoom"].active img{ animation: kenburns 6.5s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1);} to{ transform:scale(1.16);} }

/* effect: slide-in from right */
.hero-slide[data-effect="slide"].active img{ animation: slidePan 6.5s ease-out forwards; }
@keyframes slidePan{ from{ transform:translateX(4%) scale(1.08);} to{ transform:translateX(-2%) scale(1.08);} }

/* effect: pan left-right */
.hero-slide[data-effect="pan"].active img{ animation: panLR 7s ease-in-out forwards; }
@keyframes panLR{ 0%{ transform:translateX(-3%) scale(1.1);} 50%{ transform:translateX(3%) scale(1.1);} 100%{ transform:translateX(-1%) scale(1.1);} }

/* effect: fade + subtle rise */
.hero-slide[data-effect="fade"].active img{ animation: fadeRise 6.5s ease-out forwards; }
@keyframes fadeRise{ from{ transform:translateY(3%) scale(1.06); } to{ transform:translateY(0) scale(1.06); } }

.slider-dots{ position:absolute; bottom:100px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:6; }
.slider-dots button{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0; transition:.3s var(--ease); }
.slider-dots button.active{ background:var(--orange); width:30px; border-radius:6px; }

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center; z-index:6; transition:.3s; font-size:1rem;
}
.slider-arrow:hover{ background:var(--orange); border-color:transparent; }
.slider-arrow.prev{ left:24px; } .slider-arrow.next{ right:24px; }

@media (max-width:900px){
  .slider-dots{ bottom:78px; }
}
@media (max-width:640px){
  .slider-arrow{ width:40px; height:40px; }
  .slider-arrow.prev{ left:12px; } .slider-arrow.next{ right:12px; }
  .slider-dots{ bottom:64px; }
}

/* ---------- Split content / animation section ---------- */
.split-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.split-visual .main-img{ border-radius:var(--radius); box-shadow:var(--shadow-card); width:100%; height:420px; object-fit:cover; }
.split-visual .float-badge{
  position:absolute; background:#fff; border-radius:var(--radius-sm); padding:16px 22px; box-shadow:var(--shadow-card);
  display:flex; align-items:center; gap:14px; animation: floatY 6s ease-in-out infinite;
}
.split-visual .float-badge.top-left{ top:-18px; left:-24px; }
.split-visual .float-badge.bottom-right{ bottom:-18px; right:-24px; animation-delay:1.5s; }
.split-visual .float-badge .n{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:var(--orange); }
.split-visual .ring-deco{ position:absolute; width:140px; height:140px; border:3px solid var(--orange); border-radius:50%; opacity:.25; top:-30px; right:-30px; z-index:-1; }
@media (max-width:900px){
  .split-visual .main-img{ height:300px; }
  .split-visual .float-badge{ padding:12px 16px; }
  .split-visual .float-badge.top-left{ left:0; top:-14px; }
  .split-visual .float-badge.bottom-right{ right:0; bottom:-14px; }
}

.hero-content{ position:relative; z-index:5; padding-top:110px; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--orange-light); font-family:var(--font-head); letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; margin-bottom:22px; }
.hero-eyebrow::before{ content:""; width:40px; height:2px; background:var(--orange-light); }
.hero h1{ color:#fff; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:1.08; max-width:900px; font-weight:700; }
.hero h1 .accent{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ color:#CBD5E1; font-size:1.15rem; max-width:560px; margin:26px 0 38px; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-scroll{ position:absolute; bottom:36px; left:50%; transform:translateX(-50%); color:#fff; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; opacity:.8; }
.scroll-line{ width:1px; height:36px; background:linear-gradient(#F97316,transparent); animation: scrollLine 1.8s infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* small page hero (inner pages) */
.page-hero{ min-height:56vh; }
.page-hero .hero-content{ padding-top:150px; }
.breadcrumbs{ display:flex; gap:8px; align-items:center; color:var(--silver); font-size:.85rem; margin-top:18px; }
.breadcrumbs a{ color:#fff; } .breadcrumbs span{ color:var(--orange-light); }

/* ---------- Stats ---------- */
.stats-bar{ background:var(--steel-blue-dark); position:relative; margin-top:-1px; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; padding:56px 0; }
.stat-item .num{ font-family:var(--font-head); font-size:clamp(2rem,4vw,3rem); font-weight:700; color:#fff; }
.stat-item .num span.plus{ color:var(--orange); }
.stat-item .label{ color:var(--silver); font-size:.88rem; letter-spacing:.05em; margin-top:6px; }

/* ---------- Cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }

.feature-card{
  background:#fff; border-radius:var(--radius); padding:38px 30px; box-shadow:var(--shadow-soft);
  transition:.4s var(--ease); border-bottom:3px solid transparent; position:relative;
}
.feature-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-card); border-bottom-color:var(--orange); }
.feature-icon{
  width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,var(--steel-blue),var(--steel-blue-light));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; margin-bottom:22px;
  transition:.4s;
}
.feature-card:hover .feature-icon{ background:var(--grad-btn); transform:rotate(-8deg) scale(1.05); }
.feature-card h3{ font-size:1.15rem; }

.category-card{ position:relative; border-radius:var(--radius); overflow:hidden; height:340px; box-shadow:var(--shadow-soft); }
.category-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.category-card:hover img{ transform:scale(1.08); }
.category-card .overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,37,64,.92) 0%, rgba(13,37,64,.15) 55%, transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:26px; }
.category-card .overlay h3{ color:#fff; margin-bottom:6px; }
.category-card .overlay p{ color:var(--silver); font-size:.85rem; margin-bottom:14px; }
.category-card .overlay a{ color:var(--orange-light); font-family:var(--font-head); font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; }

.product-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:.4s var(--ease); }
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card); }
.product-card .thumb{ height:230px; overflow:hidden; position:relative; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.product-card:hover .thumb img{ transform:scale(1.1); }
.product-card .thumb .tag{ position:absolute; top:14px; left:14px; background:var(--orange); color:#fff; font-size:.7rem; padding:5px 12px; border-radius:20px; font-family:var(--font-head); }
.product-card .body{ padding:22px; }
.product-card h3{ font-size:1.05rem; margin-bottom:6px; }
.product-card p{ font-size:.86rem; margin-bottom:14px; }
.product-card .actions{ display:flex; gap:10px; }
.compare-check{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:#748094; margin-top:10px; }

.service-card{ background:#fff; border-radius:var(--radius); padding:36px 28px; box-shadow:var(--shadow-soft); transition:.4s var(--ease); position:relative; overflow:hidden; }
.service-card::before{ content:""; position:absolute; top:0; left:0; width:5px; height:0; background:var(--grad-btn); transition:.4s; }
.service-card:hover::before{ height:100%; }
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card); }

/* Timeline */
.timeline{ position:relative; max-width:800px; margin:0 auto; }
.timeline::before{ content:""; position:absolute; left:20px; top:0; bottom:0; width:2px; background:var(--silver); }
.timeline-item{ position:relative; padding-left:60px; margin-bottom:44px; }
.timeline-item .dot{ position:absolute; left:12px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--orange); border:4px solid #fff; box-shadow:0 0 0 2px var(--orange); }
.timeline-item .year{ font-family:var(--font-head); color:var(--orange); font-weight:700; }

/* Process */
.process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.process-step{ text-align:center; padding:20px; }
.process-step .n{ width:70px; height:70px; margin:0 auto 20px; border-radius:50%; background:#fff; border:2px solid var(--silver); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:1.4rem; font-weight:700; color:var(--steel-blue); position:relative; z-index:2; }
.process-step:hover .n{ background:var(--grad-btn); color:#fff; border-color:transparent; }

/* Testimonials */
.testimonial-card{ background:#fff; border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-soft); }
.testimonial-card .stars{ color:var(--orange); margin-bottom:14px; }
.testimonial-card .person{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.testimonial-card .person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testimonial-card .person strong{ display:block; font-family:var(--font-head); font-size:.92rem; }
.testimonial-card .person span{ color:#748094; font-size:.8rem; }

/* Certifications */
.cert-strip{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; }
.cert-badge{ background:#fff; border-radius:var(--radius-sm); padding:20px 26px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:600; color:var(--steel-blue); font-size:.9rem; }
.cert-badge i{ color:var(--orange); font-size:1.4rem; }

/* FAQ */
.faq-item{ background:#fff; border-radius:var(--radius-sm); margin-bottom:14px; box-shadow:var(--shadow-soft); overflow:hidden; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:20px 26px; cursor:pointer; font-family:var(--font-head); font-weight:600; color:var(--steel-blue-dark); }
.faq-q i{ transition:.3s; color:var(--orange); }
.faq-item.active .faq-q i{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:.35s var(--ease); padding:0 26px; }
.faq-item.active .faq-a{ max-height:300px; padding-bottom:20px; }

/* News */
.news-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); transition:.4s; }
.news-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card); }
.news-card .thumb{ height:190px; overflow:hidden; } .news-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.news-card:hover .thumb img{ transform:scale(1.1); }
.news-card .body{ padding:22px; }
.news-card .date{ color:var(--orange); font-size:.78rem; font-family:var(--font-head); font-weight:600; letter-spacing:.05em; }

/* Contact CTA band */
.cta-band{ background: linear-gradient(120deg, var(--steel-blue-dark), var(--steel-blue)); border-radius:24px; padding:60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(249,115,22,.18); }
.cta-band h2{ color:#fff; margin-bottom:8px; } .cta-band p{ color:var(--silver); margin:0; }

/* Map */
.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); height:420px; }
.map-wrap iframe{ width:100%; height:100%; border:0; }

/* Forms */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-family:var(--font-head); font-size:.82rem; font-weight:600; color:var(--steel-blue-dark); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:14px 16px; border:1.5px solid #E2E8F0; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.92rem; transition:.3s; background:#fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(249,115,22,.12); }
.form-card{ background:#fff; border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-card); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* Footer */
footer.site-footer{ background:var(--dark); color:#CBD5E1; padding-top:80px; position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:22px; }
.footer-grid ul li{ margin-bottom:12px; }
.footer-grid ul li a{ color:#94A3B8; font-size:.9rem; transition:.25s; }
.footer-grid ul li a:hover{ color:var(--orange-light); padding-left:4px; }
.footer-logo{ height:42px; margin-bottom:18px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:14px; font-size:.85rem; color:#64748B; }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#fff; transition:.3s; }
.social-row a:hover{ background:var(--orange); transform:translateY(-3px); }
.newsletter-row{ display:flex; margin-top:16px; border-radius:50px; overflow:hidden; background:rgba(255,255,255,.06); padding:5px; }
.newsletter-row input{ flex:1; background:transparent; border:none; padding:10px 16px; color:#fff; outline:none; }
.newsletter-row button{ background:var(--grad-btn); color:#fff; border:none; padding:10px 22px; border-radius:50px; font-family:var(--font-head); font-weight:600; font-size:.85rem; }

/* Floating action buttons */
.fab-stack{ position:fixed; right:26px; bottom:26px; z-index:900; display:flex; flex-direction:column; gap:14px; align-items:center; }
.fab{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; box-shadow:0 10px 24px rgba(0,0,0,.2); transition:.3s; }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background:var(--steel-blue); }
.fab-top{ background:var(--orange); opacity:0; visibility:hidden; transform:translateY(10px); }
.fab-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.fab:hover{ transform:scale(1.1); }
.fab-chat{ position:fixed; left:26px; bottom:26px; z-index:900; background:#fff; border-radius:50px; padding:12px 20px; box-shadow:var(--shadow-card); display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:.85rem; font-weight:600; color:var(--steel-blue); cursor:pointer; }
.fab-chat i{ color:var(--orange); }

/* Cookie */
.cookie-bar{ position:fixed; bottom:0; left:0; width:100%; background:var(--steel-blue-dark); color:#fff; padding:18px 24px; display:flex; justify-content:center; align-items:center; gap:24px; z-index:1500; transform:translateY(100%); transition:.5s var(--ease); flex-wrap:wrap; }
.cookie-bar.show{ transform:translateY(0); }
.cookie-bar p{ color:#CBD5E1; margin:0; font-size:.88rem; }

/* Filters / search (products) */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; align-items:center; justify-content:space-between; }
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-tabs button{ background:#fff; border:1.5px solid #E2E8F0; padding:9px 20px; border-radius:50px; font-family:var(--font-head); font-size:.82rem; font-weight:600; color:var(--steel-blue); transition:.3s; }
.filter-tabs button.active, .filter-tabs button:hover{ background:var(--grad-btn); color:#fff; border-color:transparent; }
.search-box{ display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #E2E8F0; border-radius:50px; padding:10px 20px; min-width:260px; }
.search-box input{ border:none; outline:none; flex:1; font-size:.88rem; }

/* Specs table */
.spec-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); }
.spec-table th,.spec-table td{ padding:16px 20px; text-align:left; border-bottom:1px solid #EEF2F7; font-size:.9rem; }
.spec-table th{ background:var(--steel-blue-dark); color:#fff; font-family:var(--font-head); font-weight:600; }
.spec-table tr:last-child td{ border-bottom:none; }
.spec-table tr:nth-child(even){ background:#F8FAFC; }

/* Reveal animation base (fallback for AOS) */
[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="zoom"]{ transform:scale(.9); } [data-reveal="zoom"].in-view{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-50px);} [data-reveal="left"].in-view{ transform:translateX(0);}
[data-reveal="right"]{ transform:translateX(50px);} [data-reveal="right"].in-view{ transform:translateX(0);}

/* Counters */
.count-up{ display:inline; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .process-steps{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px){
  .main-nav, .header-cta .icon-btn.search-trigger{ display:none; }
  .hamburger{ display:flex; }
  .grid-2{ grid-template-columns:1fr; }
  .cta-band{ padding:40px; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .cta-band{ flex-direction:column; text-align:center; }
  .section{ padding:70px 0; }
  .process-steps{ grid-template-columns:1fr; }
}


@media (max-width:768px){

    .header-cta .btn{
        display:none !important;
    }

    .header-cta{
        gap:10px;
    }

    .hamburger{
        display:flex !important;
    }

}


html,
body{
    width:100%;
    overflow-x:hidden !important;
}

*{
    max-width:100%;
}



@media (max-width:768px){

    .header-inner{
        padding:12px 16px;
    }

    .logo-wrap{
        padding:6px 10px;
    }

    .logo-wrap img{
        height:28px;
    }

    .header-cta{
        margin-left:auto;
    }

}

@media (max-width:768px){

    .hero{
        min-height:100vh;
    }

    .hero-content{
        padding-top:120px;
        padding-left:20px;
        padding-right:20px;
    }

    .hero h1{
        font-size:42px;
        line-height:1.1;
    }

    .hero p{
        font-size:17px;
    }

}


.slider-arrow{
    right:12px;
    left:auto;
}

.floating-shape{
    display:none;
}

.shape-beam,
.shape-ring{
    display:none;
}

.hero-scroll{
    display:none;
}