/* ==========================================================================
   BotBridge India — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --blue-900:#0b3fc4;
  --blue-700:#1450e0;
  --blue-600:#2f5fe8;
  --blue-500:#3f6ff2;
  --blue-100:#e8effe;
  --navy-900:#0c1220;
  --navy-800:#0e1526;
  --navy-700:#131c33;
  --navy-600:#1a2540;
  --orange:#f5720a;
  --white:#ffffff;
  --bg-light:#f5f7fa;
  --bg-light-2:#eef1f7;
  --text-dark:#0c1220;
  --text-muted:#6b7280;
  --text-muted-2:#8a93a6;
  --text-on-dark:#ffffff;
  --text-muted-on-dark:#c9d3e6;
  --border-light:#e6e9f0;
  --border-dark:#232d47;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(12,18,32,.06);
  --shadow-md:0 10px 30px rgba(12,18,32,.10);
  --shadow-lg:0 20px 60px rgba(12,18,32,.16);
  --shadow-blue:0 14px 34px rgba(20,80,224,.28);
  --container:1240px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --header-h:82px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-dark);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  position:relative;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
h1,h2,h3,h4,p{margin:0;}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-700);
  margin-bottom:14px;
}
/* mockups show the eyebrow as plain letter-spaced uppercase text — no leading dash */
.section-title{
  font-size:clamp(28px,3.4vw,42px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--text-dark);
}
.section-title.on-dark{color:var(--white);}
.section-title .accent{color:var(--blue-700);}
.section-title.on-dark .accent{color:var(--blue-600);}
.section-sub{
  margin-top:14px;
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
  max-width:560px;
}
.section-sub.on-dark{color:var(--text-muted-on-dark);}
.section-head{margin-bottom:44px;}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-head.center .section-sub{margin-left:auto;margin-right:auto;}
.section{padding:88px 0;}
.section.tight{padding:64px 0;}
.bg-light{background:var(--bg-light);}
.bg-navy{background:var(--navy-900);}
.bg-white{background:var(--white);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:700;
  padding:15px 26px;
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .25s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:linear-gradient(135deg,var(--blue-600),var(--blue-900));color:#fff;box-shadow:var(--shadow-blue);}
.btn-primary:hover{box-shadow:0 18px 40px rgba(20,80,224,.4);}
.btn-white{background:#fff;color:var(--navy-900);}
.btn-white:hover{box-shadow:var(--shadow-md);}
.btn-outline-dark{border-color:rgba(255,255,255,.35);color:#fff;background:transparent;}
.btn-outline-dark:hover{background:rgba(255,255,255,.08);border-color:#fff;}
.btn-outline-blue{border-color:var(--blue-700);color:var(--blue-700);background:transparent;}
.btn-outline-blue:hover{background:var(--blue-100);}
.btn-sm{padding:11px 20px;font-size:14px;}
.btn-block{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .3s ease,box-shadow .3s ease,height .3s ease;
}
.site-header.light{background:#fff;box-shadow:0 1px 0 rgba(12,18,32,.06);}
.site-header.dark{background:var(--navy-900);}
.site-header.shrink{height:64px;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:50px;width:auto;}
.brand .logo-light{display:none;}
.site-header.dark .brand .logo-default{display:none;}
.site-header.dark .brand .logo-light{display:block;}
.nav-main{display:flex;align-items:center;gap:34px;}
.nav-main a{
  font-size:15px;font-weight:600;position:relative;padding:8px 0;
  color:var(--text-dark);
  transition:color .2s ease;
}
.site-header.dark .nav-main a{color:#fff;}
.nav-main a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue-600);
  transition:width .25s ease;
}
.nav-main a:hover,.nav-main a.active{color:var(--blue-600);}
.site-header.dark .nav-main a:hover,.site-header.dark .nav-main a.active{color:var(--blue-500);}
.nav-main a.active::after{width:100%;}
.nav-item-dropdown{position:relative;}
.nav-item-dropdown > a{display:flex;align-items:center;gap:6px;}
.nav-item-dropdown > a svg{width:12px;height:12px;transition:transform .25s ease;}
.nav-item-dropdown:hover > a svg{transform:rotate(180deg);}
.products-dropdown{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);
  width:560px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  z-index:50;
}
.nav-item-dropdown:hover .products-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.products-dropdown a{
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--text-dark) !important;
}
.products-dropdown a::after{display:none;}
.products-dropdown a:hover{background:var(--bg-light);}
.products-dropdown img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:var(--bg-light);flex:none;}
.products-dropdown .pd-name{font-size:14px;font-weight:700;display:block;}
.products-dropdown .pd-tag{font-size:12px;font-weight:500;color:var(--text-muted);display:block;margin-top:2px;}
.header-actions{display:flex;align-items:center;gap:22px;}
.header-phone{display:flex;align-items:center;gap:8px;font-size:14px;}
.header-phone .icon-circle{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;color:var(--blue-700);flex:none;
}
.header-phone .icon-circle svg{width:22px;height:22px;}
.site-header.dark .header-phone .icon-circle{color:#fff;}
.header-phone strong{display:block;font-weight:700;color:var(--text-dark);}
.site-header.dark .header-phone strong{color:#fff;}
.header-phone span{color:var(--text-muted);font-size:12px;}
.site-header.dark .header-phone span{color:var(--text-muted-on-dark);}
.hamburger{
  display:none;width:44px;height:44px;border:none;background:var(--bg-light);border-radius:10px;
  align-items:center;justify-content:center;flex:none;
}
.site-header.dark .hamburger{background:rgba(255,255,255,.08);}
.hamburger svg{width:20px;height:20px;color:var(--text-dark);}
.site-header.dark .hamburger svg{color:#fff;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-muted-on-dark);margin-bottom:22px;}
.breadcrumb a{color:var(--text-muted-on-dark);opacity:.85;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb span{opacity:.5;}
.breadcrumb .current{color:#fff;}

/* ---------- Hero (dark, inner pages) ---------- */
.hero-dark{
  position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  padding:56px 0 70px;
}
.hero-dark::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(700px 420px at 78% 30%,rgba(47,95,232,.25),transparent 70%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}
.hero-copy h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.01em;}
.hero-copy h1 .accent{color:var(--blue-500);}
.hero-copy .tagline{font-size:19px;font-weight:700;margin-top:10px;color:#dfe6f8;}
.hero-copy p.desc{margin-top:16px;font-size:16px;line-height:1.75;color:var(--text-muted-on-dark);max-width:450px;}
.hero-chips{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:26px;}
.hero-chip{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#fff;}
.hero-chip .ic{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--blue-500);
}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero-media{position:relative;}
.home-hero-grid{grid-template-columns:1fr 1.1fr;align-items:start;}
.home-hero-grid .hero-copy h1{font-size:clamp(32px,3.6vw,46px);line-height:1.12;}
.spotlight{
  position:relative;border-radius:26px;overflow:hidden;
  aspect-ratio:4/3.05;
  background:radial-gradient(circle at 50% 62%,rgba(47,95,232,.35),rgba(12,18,32,0) 60%);
}
.spotlight img{width:100%;height:100%;object-fit:cover;border-radius:26px;}
.spotlight .pedestal-ring{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:82%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(64,130,255,.55),rgba(64,130,255,.15) 70%,transparent 100%);
  filter:blur(2px);
  animation:glowpulse 3.4s ease-in-out infinite;
}
@keyframes glowpulse{0%,100%{opacity:.75;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.04);}}

/* CSS-built product spotlight for standardized cutout photos */
.spotlight-cutout{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3.05;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 60%,rgba(47,95,232,.35),transparent 70%),
    linear-gradient(180deg,#0e1730 0%,#0a101f 100%);
}
.spotlight-cutout::before{
  content:'';position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  width:74%;height:20%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(64,130,255,.65),rgba(64,130,255,.18) 68%,transparent 100%);
  box-shadow:0 0 60px 10px rgba(47,95,232,.35);
  animation:glowpulse 3.4s ease-in-out infinite;
}
.spotlight-cutout img{
  position:relative;z-index:2;max-width:70%;max-height:72%;object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));
}

/* WhatsApp float + Request Inquiry tab */
.float-stack{position:fixed;right:22px;bottom:26px;z-index:850;display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.whatsapp-float{
  width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(37,211,102,.45);
  animation:wapulse 2.6s ease-in-out infinite;
}
.whatsapp-float svg{width:28px;height:28px;}
@keyframes wapulse{0%,100%{box-shadow:0 10px 24px rgba(37,211,102,.45);}50%{box-shadow:0 10px 24px rgba(37,211,102,.75),0 0 0 8px rgba(37,211,102,.12);}}
.inquiry-tab{
  position:fixed;right:0;top:58%;transform:translateY(-50%);z-index:840;
  writing-mode:vertical-rl;
  background:linear-gradient(180deg,var(--blue-600),var(--blue-900));
  color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.03em;
  padding:16px 11px;border-radius:10px 0 0 10px;display:flex;align-items:center;gap:8px;
  box-shadow:-6px 6px 20px rgba(12,18,32,.18);
  transition:padding-right .25s ease;
}
.inquiry-tab svg{width:16px;height:16px;transform:rotate(90deg);}
.inquiry-tab:hover{padding-right:16px;}

/* ---------- Icon feature cards ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.feature-card{
  background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:26px 18px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.icon-badge{
  width:56px;height:56px;border-radius:16px;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.icon-badge svg{width:26px;height:26px;}
.feature-card:hover .icon-badge{transform:scale(1.1) rotate(-4deg);background:var(--blue-700);color:#fff;}
.feature-card h3{font-size:15px;font-weight:700;}
.feature-card p{margin-top:6px;font-size:13px;color:var(--text-muted);line-height:1.5;}

/* ---------- Product ecosystem row / cards ---------- */
.eco-row{display:flex;gap:16px;}
.product-card{
  flex:1;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:18px;text-align:left;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
  display:flex;flex-direction:column;
}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
.product-card .thumb{
  aspect-ratio:1/1;border-radius:10px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:14px;
}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.product-card:hover .thumb img{transform:scale(1.08);}
.product-card .name{font-size:15px;font-weight:800;}
.product-card .name .accent{color:var(--blue-700);}
.product-card .desc{font-size:12.5px;color:var(--text-muted);margin-top:6px;line-height:1.5;flex:1;}
.product-card .view-link{margin-top:14px;font-size:13px;font-weight:700;color:var(--blue-700);display:inline-flex;align-items:center;gap:6px;}
.product-card .view-link svg{width:14px;height:14px;transition:transform .25s ease;}
.product-card:hover .view-link svg{transform:translateX(4px);}

/* Big product grid (listing page) */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.product-grid-card{
  background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.product-grid-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
/* Bleeds the photo out to the card's own edges (negative margin cancels the
   card's padding) so it reads as a full-width photo, not an inset thumbnail;
   .product-grid-card's overflow:hidden clips it back to the card's rounded
   corners instead of needing a separately matched border-radius here. */
.product-grid-card .photo{
  height:210px;position:relative;display:flex;align-items:center;justify-content:center;
  margin:-26px -26px 18px;
}
.product-grid-card .photo img{width:100%;height:100%;object-fit:cover;}
.product-grid-card .top-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  width:40px;height:40px;border-radius:12px;background:var(--blue-100);color:var(--blue-700);
  box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
}
.product-grid-card .top-badge svg{width:19px;height:19px;}
.product-grid-card h3{font-size:19px;font-weight:800;}
.product-grid-card h3 .accent{color:var(--blue-700);}
.product-grid-card .tagline{font-size:13px;font-weight:700;color:var(--blue-700);margin-top:4px;}
.product-grid-card p.desc{font-size:13.5px;color:var(--text-muted);margin-top:10px;line-height:1.6;flex:1;}
.pill-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.pill-list li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-dark);}
.pill-list svg{width:15px;height:15px;color:var(--blue-700);flex:none;}
/* GSM BOT's wide card lays its 3 features out side-by-side instead of
   stacked; below 860px there isn't enough row width left next to the photo
   for that, so each item wraps to 2 lines. Drop back to the same stacked,
   one-item-per-line layout the other product cards use once space is tight. */
.pill-list-row{flex-direction:row;gap:20px;}
@media (max-width:860px){
  .pill-list-row{flex-direction:column;gap:8px;}
}
.product-grid-card .btn{margin-top:20px;}

/* Wide GSM style card */
.product-wide-card{
  background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:center;
  overflow:hidden;
}
/* Same edge-bleed pattern as .product-grid-card .photo: negative margin
   cancels the card's own padding on the top/left/bottom sides (the right
   side stays inset since the text column follows), and align-self:stretch
   makes it fill the full row height instead of sitting at a fixed size. */
.product-wide-card .photo{
  position:relative;display:flex;align-items:center;justify-content:center;
  align-self:stretch;margin:-26px 0 -26px -26px;
}
.product-wide-card .photo img{width:100%;height:100%;object-fit:cover;}
.product-wide-card .top-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  width:40px;height:40px;border-radius:12px;background:var(--blue-100);color:var(--blue-700);
  box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.product-wide-card .top-badge svg{width:19px;height:19px;}

/* ---------- Dark why-choose band ---------- */
.why-band{
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-700) 100%);
  border-radius:var(--radius-lg);
  padding:46px;
  display:grid;grid-template-columns:.85fr 1.6fr;gap:36px;align-items:center;
}
.why-band .why-heading .eyebrow{color:var(--blue-500);}
.why-heading .why-divider{display:block;width:56px;height:2px;background:rgba(255,255,255,.35);margin-top:22px;}
.why-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.why-cards .why-card{flex:0 0 calc((100% - (var(--items,5) - 1) * 14px) / var(--items,5));}
.why-cards.cols-4{grid-template-columns:repeat(4,1fr);}
.why-card{
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:16px;
  padding:24px 18px;text-align:left;transition:background .3s ease,transform .3s ease,border-color .3s ease;
}
.why-card:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border-color:rgba(94,143,255,.4);transform:translateY(-4px);
}
.why-card .icon-badge{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(120,160,255,.28);
  color:var(--blue-500);margin:0 0 18px;
}
.why-card .icon-badge .icon-primary{
  width:30px;height:30px;
  filter:drop-shadow(0 0 6px rgba(70,120,255,.55));
}
.why-card:hover .icon-badge{background:var(--blue-700);border-color:var(--blue-500);}
.why-card:hover .icon-badge .icon-primary{color:#fff;}
.why-card h4{color:#fff;font-size:15px;font-weight:700;}
.why-card p{color:var(--text-muted-on-dark);font-size:12.5px;margin-top:6px;line-height:1.55;}

/* ---------- Industries grid ---------- */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.industry-grid.cols-8{grid-template-columns:repeat(8,1fr);}
.industry-grid.cols-5{grid-template-columns:repeat(5,1fr);}

/* Generic responsive split-grid utilities (replace inline grid-template-columns) */
.split{display:grid;gap:50px;align-items:center;}
.split-1-1{grid-template-columns:1fr 1fr;}
.split-85-2{grid-template-columns:.85fr 2fr;gap:40px;align-items:end;}
.split-8-12{grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start;}
.split-contact{display:grid;grid-template-columns:.85fr 1.3fr .9fr;gap:22px;align-items:start;}
@media (max-width:960px){
  .split-1-1,.split-85-2,.split-8-12{grid-template-columns:1fr;}
}
@media (max-width:1080px){
  .split-contact{grid-template-columns:1fr;}
}
.industry-card{
  background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:22px 14px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.industry-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.industry-card .icon-badge{width:46px;height:46px;border-radius:12px;}
.industry-card .icon-badge svg{width:20px;height:20px;}
.industry-card span{font-size:13px;font-weight:700;display:block;margin-top:4px;}

/* Photo industry cards (About page) */
.industry-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.industry-photo-card{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3.1;
  box-shadow:var(--shadow-sm);transition:transform .35s ease,box-shadow .35s ease;
}
.industry-photo-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.industry-photo-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.industry-photo-card:hover img{transform:scale(1.08);}
.industry-photo-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,32,.15),rgba(12,18,32,.75));}
.industry-photo-card .ic{
  position:absolute;top:10px;left:10px;z-index:2;width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .3s ease,transform .3s ease;
}
.industry-photo-card:hover .ic{background:var(--blue-700);border-color:var(--blue-700);transform:scale(1.08);}
.industry-photo-card .ic svg{width:15px;height:15px;}
.industry-photo-card span{position:absolute;left:10px;bottom:10px;z-index:2;color:#fff;font-size:12.5px;font-weight:700;}

/* ---------- Stat bar ---------- */
.stat-bar{
  background:linear-gradient(120deg,var(--blue-100),#dfe9ff);
  border-radius:var(--radius-lg);
  padding:38px 24px;
  display:flex;flex-wrap:wrap;justify-content:center;
}
.stat-bar .stat-item{flex:0 0 20%;}
.stat-item{text-align:center;position:relative;}
.stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:8%;height:84%;width:1px;background:rgba(20,80,224,.16);}
.stat-item .icon-badge{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.7);margin:0 auto 12px;}
.stat-item .icon-badge svg{width:26px;height:26px;}
.stat-item:hover .icon-badge{transform:scale(1.15) rotate(-6deg);background:var(--blue-700);color:#fff;}
.stat-item:hover .stat-num{transform:scale(1.06);}
.stat-num{font-size:clamp(24px,2.6vw,34px);font-weight:800;color:var(--blue-700);line-height:1;display:inline-block;transition:transform .3s ease;}
.stat-label{margin-top:8px;font-size:13px;font-weight:600;color:var(--text-muted);}

/* ---------- Process timeline ---------- */
.process-row{display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:0;position:relative;}
.process-step{position:relative;text-align:center;padding:0 14px;}
.process-step .dot{
  width:74px;height:74px;border-radius:50%;background:#fff;border:2px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;z-index:2;
  color:var(--blue-700);box-shadow:var(--shadow-sm);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.process-step .dot svg{width:28px;height:28px;}
.process-row.on-dark .process-step .dot{background:var(--navy-800);border-color:rgba(255,255,255,.14);}
.process-step:hover .dot{background:var(--blue-700);color:#fff;transform:scale(1.08);}
.process-line{
  position:absolute;top:37px;left:calc(50%/var(--steps,4) + 37px);right:calc(50%/var(--steps,4) + 37px);height:2px;
  background-image:linear-gradient(90deg,var(--border-light) 50%,transparent 50%);
  background-size:14px 2px;z-index:1;
}
.process-row.on-dark .process-line{background-image:linear-gradient(90deg,rgba(255,255,255,.18) 50%,transparent 50%);}
.process-num{font-size:12px;font-weight:800;color:var(--blue-700);letter-spacing:.05em;}
.process-step h4{margin-top:6px;font-size:16px;font-weight:800;}
.process-row.on-dark .process-step h4{color:#fff;}
.process-step p{margin-top:6px;font-size:13px;color:var(--text-muted);line-height:1.55;}
.process-row.on-dark .process-step p{color:var(--text-muted-on-dark);}

/* Milestone timeline (About "Our Journey") — vertical dots row */
.milestones{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding-top:10px;}
.milestones::before{content:'';position:absolute;top:37px;left:36px;right:36px;border-top:2px dashed var(--border-light);}
.milestone{position:relative;text-align:center;flex:1;padding:0 6px;}
.milestone .dot{
  width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:2;
  transition:transform .3s ease,background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.milestone .dot svg{width:22px;height:22px;}
.milestone:hover .dot{
  transform:scale(1.12) rotate(-6deg);
  background:var(--blue-700);border-color:var(--blue-700);color:#fff;
  box-shadow:0 8px 18px rgba(47,95,232,.35);
}
.milestone .year{font-size:13px;font-weight:800;color:var(--blue-700);}
.milestone h4{margin-top:4px;font-size:14px;font-weight:800;}
.milestone p{margin-top:6px;font-size:12px;color:var(--text-muted);line-height:1.5;}

/* ---------- Featured solutions photo cards ---------- */
.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.featured-card{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4.3;box-shadow:var(--shadow-md);
  border:1px solid rgba(10,20,40,.06);transition:transform .35s ease,box-shadow .35s ease;
}
.featured-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(10,20,45,.22);}
.featured-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.featured-card:hover img{transform:scale(1.08);}
.featured-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,20,.05) 0%,rgba(6,10,20,.28) 38%,rgba(6,10,20,.8) 68%,rgba(6,10,20,.96) 100%);
}
.featured-card .content{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff;}
.featured-card .ic{
  width:38px;height:38px;border-radius:10px;background:var(--blue-700);display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;box-shadow:0 8px 18px rgba(20,80,224,.5);transition:transform .3s ease;
}
.featured-card:hover .ic{transform:scale(1.1) rotate(-6deg);}
.featured-card .ic svg{width:18px;height:18px;}
.featured-card h4{font-size:16px;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.4);}
.featured-card p{font-size:12.5px;margin-top:6px;color:#e4e8f2;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.35);}
.featured-card .explore{margin-top:12px;font-size:12.5px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:6px;opacity:.92;transition:gap .25s ease;}
.featured-card:hover .explore{gap:9px;}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-lg);
  padding:34px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band.solid{background:linear-gradient(120deg,var(--blue-600),var(--blue-900));color:#fff;}
.cta-band.navy{
  background:linear-gradient(100deg,var(--navy-900) 45%,var(--navy-700) 100%);color:#fff;
  position:relative;overflow:hidden;
}
.cta-band-photo{
  width:120px;height:80px;border-radius:12px;overflow:hidden;flex:none;position:relative;
  box-shadow:0 10px 24px rgba(20,80,224,.35);
}
.cta-band-photo img{width:100%;height:100%;object-fit:cover;}
.cta-band-text{display:flex;align-items:center;gap:20px;flex:1;min-width:260px;}

/* Navy CTA: photo bleeds flush to the card's left edge, full height, with a glow
   that fades into the navy background instead of sitting in a small boxed thumbnail. */
.cta-band.navy .cta-band-text{gap:30px;}
.cta-band.navy .cta-band-photo{
  align-self:stretch;width:280px;height:auto;border-radius:0;box-shadow:none;
  margin:-34px 0 -34px -40px;
}
.cta-band.navy .cta-band-photo::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(160px 160px at 34% 70%,rgba(64,140,255,.45),transparent 70%),
    linear-gradient(90deg,rgba(8,13,26,0) 42%,var(--navy-900) 96%);
}
.cta-band h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;}
.cta-band h3 .accent{color:var(--blue-300,#8fb3ff);}
.cta-band.solid h3 .accent{color:#dbe6ff;}
.cta-band p{margin-top:6px;font-size:14px;color:var(--text-muted-on-dark);}
.cta-band.solid p{color:#dbe6ff;}
.cta-band-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:#fff;border:1px solid var(--border-light);border-radius:12px;overflow:hidden;
}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-size:15px;font-weight:700;
}
.faq-q .plus{
  width:26px;height:26px;border-radius:50%;background:var(--blue-100);color:var(--blue-700);flex:none;
  display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background .3s ease,color .3s ease;
}
.faq-q .plus svg{width:13px;height:13px;}
.faq-item.open .faq-q .plus{background:var(--blue-700);color:#fff;transform:rotate(135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 22px 20px;font-size:13.5px;color:var(--text-muted);line-height:1.65;}
.faq-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}

/* ---------- Tech specs table ---------- */
.spec-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:36px;align-items:center;}
.spec-photo{border-radius:var(--radius-md);overflow:hidden;background:var(--bg-light);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.spec-photo img{width:100%;height:100%;object-fit:cover;}
.spec-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
.spec-table tr:nth-child(odd){background:var(--bg-light);}
.spec-table tr:nth-child(even){background:#fff;}
.spec-table td{padding:14px 20px;font-size:14px;}
.spec-table td:first-child{background:var(--navy-900);color:#fff;font-weight:700;width:38%;}
.spec-table td:last-child{color:var(--text-dark);font-weight:600;}
/* Products sold in several model ranges repeat the photo + table row once per
   range, so each variant has its own picture beside its own spec table. */
.spec-group-label{font-size:14px;font-weight:800;margin:0 0 10px;color:var(--navy-900);}
.spec-wrap + .spec-wrap{margin-top:36px;}
/* What's Included closes the section under the last spec table: heading on the
   left, items as chips flowing to the right. A rigid column grid left an orphan
   item on its own row whenever the count wasn't a multiple of the columns. */
.spec-included{
  background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:22px 26px;margin-top:36px;box-shadow:var(--shadow-sm);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
}
.spec-included h4{font-size:14px;font-weight:800;margin:0;color:var(--navy-900);flex:none;}
.spec-included .pill-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:0;flex:1 1 320px;}
.spec-included .pill-list li{
  background:var(--bg-light);border:1px solid var(--border-light);
  border-radius:999px;padding:8px 15px;
}

/* ---------- Carousel (Our other solutions) ---------- */
.carousel{position:relative;}
.carousel-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track .product-card{min-width:220px;scroll-snap-align:start;}
.carousel-nav{display:flex;gap:10px;}
.carousel-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border-light);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--blue-700);transition:background .2s ease,color .2s ease;
}
.carousel-btn:hover{background:var(--blue-700);color:#fff;}
.carousel-btn:disabled{opacity:.4;cursor:default;pointer-events:none;}
.carousel-btn svg{width:16px;height:16px;}
.carousel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px;}

/* ---------- Video gallery ---------- */
.filter-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.filter-pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--border-light);background:#fff;font-size:13.5px;font-weight:700;color:var(--text-dark);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.filter-pill svg{width:15px;height:15px;}
.filter-pill:hover{border-color:var(--blue-600);}
.filter-pill.active{background:var(--blue-700);border-color:var(--blue-700);color:#fff;}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;}
.video-card{border-radius:var(--radius-md);overflow:hidden;background:#fff;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease;}
.video-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.video-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.video-card:hover .video-thumb img{transform:scale(1.08);}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;
}
.video-card:hover .video-play{transform:translate(-50%,-50%) scale(1.12);background:#fff;}
.video-play svg{width:20px;height:20px;margin-left:2px;}
.video-duration{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px;}
.video-info{padding:16px 18px 20px;}
.video-info h4{font-size:14.5px;font-weight:800;line-height:1.4;}
.video-info p{font-size:12.5px;color:var(--text-muted);margin-top:8px;line-height:1.55;}
.video-info .watch{margin-top:12px;font-size:13px;font-weight:700;color:var(--blue-700);display:inline-flex;align-items:center;gap:6px;}
.video-card[hidden]{display:none;}

/* Video lightbox */
.video-lightbox{
  position:fixed;inset:0;z-index:2000;background:rgba(6,10,20,.92);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;
}
.video-lightbox.open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s;}
.video-lightbox-inner{
  width:100%;max-width:900px;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;position:relative;
  transform:translateY(22px) scale(.97);transition:transform .4s ease;
}
.video-lightbox.open .video-lightbox-inner{transform:translateY(0) scale(1);}
.video-lightbox-inner iframe,.video-lightbox-inner video,.video-lightbox-inner .placeholder{width:100%;height:100%;border:0;display:block;}
.video-lightbox-inner video{background:#000;object-fit:contain;}
.video-lightbox-inner .placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;text-align:center;padding:20px;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
}
.video-lightbox-inner .placeholder .ph-play{
  width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.video-lightbox-inner .placeholder .ph-play svg{width:24px;height:24px;margin-left:3px;color:#fff;}
.video-lightbox-inner .placeholder strong{font-size:16px;font-weight:800;max-width:520px;line-height:1.4;}
.video-lightbox-inner .placeholder span{font-size:12.5px;color:var(--text-muted-on-dark);}
/* Close button sits INSIDE the box (not floating above it) — the box has
   overflow:hidden to round the video/iframe corners, which was silently
   clipping an outside-positioned close button and making it invisible. */
.video-lightbox-close{
  position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;
  background:rgba(6,10,20,.55);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:background .25s ease,transform .25s ease;
}
.video-lightbox-close:hover{background:var(--blue-700);transform:rotate(90deg);}
.video-lightbox-close svg{width:18px;height:18px;}
@media (max-width:640px){
  .video-lightbox{padding:14px;}
  .video-lightbox-close{top:10px;right:10px;width:36px;height:36px;}
  .video-lightbox-inner .placeholder{gap:10px;padding:14px;}
  .video-lightbox-inner .placeholder strong{font-size:14px;}
}

/* ---------- Forms ---------- */
.form-field{position:relative;width:100%;min-width:0;}
.form-field input,.form-field textarea,.form-field select{
  width:100%;min-width:0;box-sizing:border-box;
  padding:15px 16px;border-radius:10px;border:1px solid var(--border-light);background:#fff;
  font-size:14px;color:var(--text-dark);transition:border-color .2s ease,box-shadow .2s ease;
}
.form-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:38px;}
.form-field textarea{resize:vertical;min-height:110px;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 4px rgba(47,95,232,.12);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-stack{display:flex;flex-direction:column;gap:16px;}
.form-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);}
.form-note svg{width:16px;height:16px;color:var(--blue-700);flex:none;}

/* Dark-context forms (inside popup / dark hero cards) */
.field-dark input,.field-dark textarea,.field-dark select{
  background-color:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#fff;
}
.field-dark input::placeholder,.field-dark textarea::placeholder{color:#8b93a9;}
.field-dark select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23c9d3e6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.field-dark select option{background-color:#0c1220;color:#fff;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:var(--text-muted-on-dark);padding-top:70px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:28px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand img{height:34px;margin-bottom:16px;}
.footer-brand p{font-size:13.5px;line-height:1.7;color:var(--text-muted-on-dark);max-width:280px;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease;color:#fff;
}
.footer-social a:hover{background:var(--blue-700);transform:translateY(-3px);}
.footer-social svg{width:16px;height:16px;}
.footer-col h5{color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:13.5px;transition:color .2s ease;}
.footer-col a:hover{color:#fff;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;}
.footer-contact li a{display:contents;}
.footer-contact svg{width:16px;height:16px;color:var(--blue-500);flex:none;margin-top:2px;}
.footer-bottom{display:flex;justify-content:center;padding:22px 0;font-size:12.5px;color:#7f89a3;}
.footer-bottom a{margin-left:4px;}

/* ---------- Popup ---------- */
.popup-overlay{
  position:fixed;inset:0;background:rgba(6,10,20,.72);z-index:1500;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;
}
.popup-overlay.open{opacity:1;visibility:visible;}
.popup-modal{
  width:100%;max-width:980px;max-height:92vh;overflow:hidden;
  background:var(--navy-900);border-radius:24px;position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  transform:translateY(28px) scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.popup-overlay.open .popup-modal{transform:translateY(0) scale(1);}
.popup-scroll{
  display:grid;grid-template-columns:1fr 1fr;
  max-height:92vh;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--blue-500) transparent;
}
.popup-scroll::-webkit-scrollbar{width:6px;}
.popup-scroll::-webkit-scrollbar-track{background:transparent;}
.popup-scroll::-webkit-scrollbar-thumb{background:var(--blue-500);border-radius:10px;}
.popup-scroll-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:none;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  pointer-events:none;z-index:4;
  animation:popupScrollHintBounce 1.6s ease-in-out infinite;
  transition:opacity .25s ease,visibility .25s ease;
}
.popup-scroll-hint svg{width:15px;height:15px;}
.popup-scroll-hint.hide{opacity:0;visibility:hidden;}
@keyframes popupScrollHintBounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(5px);}}
@media (max-width:1080px){
  .popup-scroll-hint{display:flex;}
}
.popup-close{
  position:absolute;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:color .3s ease,background .3s ease,transform .3s ease;
}
.popup-close:hover{color:var(--blue-500);background:rgba(255,255,255,.18);transform:scale(1.12);}
.popup-close svg{width:16px;height:16px;}
.popup-left{
  padding:26px 28px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0e1730 0%,#0a101f 70%);
  display:flex;flex-direction:column;
}
.popup-left img.logo{width:190px;margin-bottom:10px;}
.popup-left h3{color:#fff;font-size:21px;font-weight:800;line-height:1.2;margin-top:6px;}
.popup-left h3 .accent{color:var(--blue-500);}
.popup-left p{color:var(--text-muted-on-dark);font-size:12.5px;margin-top:8px;line-height:1.5;}
.popup-left .cluster{margin-top:12px;border-radius:14px;overflow:hidden;position:relative;flex:1;min-height:100px;}
.popup-left .cluster img{width:100%;height:100%;object-fit:cover;}
.popup-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.popup-trust{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 6px;text-align:center;}
.popup-trust .icon-badge{background:rgba(255,255,255,.06);color:var(--blue-500);width:28px;height:28px;margin-bottom:5px;}
.popup-trust .icon-badge svg{width:14px;height:14px;}
.popup-trust span{font-size:10px;font-weight:700;color:#fff;line-height:1.25;display:block;}
.popup-trusted-by{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);color:var(--text-muted-on-dark);font-size:11px;font-weight:600;
}
.popup-trusted-by svg{width:16px;height:16px;color:var(--blue-500);flex:none;}
.popup-trusted-by strong{color:#fff;}
.popup-right{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;}
.popup-right h3{font-size:20px;font-weight:800;color:#fff;}
.popup-right h3 .accent{color:var(--blue-500);}
.popup-right h3::after{content:'';display:block;width:56px;height:3px;border-radius:2px;background:var(--blue-500);margin-top:12px;}
.popup-right > p:not(.popup-safe-note){color:var(--text-muted-on-dark);font-size:12.5px;margin-top:12px;margin-bottom:16px;line-height:1.5;max-width:340px;}
.popup-right .form-stack{gap:14px;}
.popup-right .form-row{gap:14px;}
.popup-right .form-field input,.popup-right .form-field textarea,.popup-right .form-field select{padding-top:11px;padding-bottom:11px;font-size:13.5px;}
.popup-right .form-field textarea{min-height:56px;}
.popup-right .btn-block{padding:12px 20px;font-size:14px;}
.form-field.has-icon .field-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#8b93a9;pointer-events:none;}
.form-field.has-icon.ic-top .field-ic{top:13px;transform:none;}
.form-field.has-icon input,.form-field.has-icon select{padding-left:38px;}
.form-field.has-icon textarea{padding-left:38px;}
.popup-safe-note{display:flex;align-items:center;gap:6px;margin-top:18px;color:var(--text-muted-on-dark);font-size:11px;line-height:1.4;}
.popup-safe-note svg{width:14px;height:14px;color:var(--blue-500);flex:none;}
.popup-or{display:flex;align-items:center;gap:14px;margin:10px 0;color:#5b6580;font-size:12px;font-weight:700;}
.popup-or::before,.popup-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.12);}
.btn-whatsapp-outline{
  border:1.5px solid #25d366;color:#25d366;background:rgba(37,211,102,.06);
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border-radius:var(--radius-pill);
  font-weight:700;font-size:14px;transition:background .25s ease;
}
.btn-whatsapp-outline:hover{background:rgba(37,211,102,.15);}
.btn-whatsapp-outline svg{width:18px;height:18px;}

/* ---------- Mobile menu ---------- */
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(6,10,20,.55);z-index:1200;display:none;}
.mobile-menu-overlay.open{display:block;}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(380px,88vw);z-index:1300;
  background:linear-gradient(160deg,#111a30,#0b1120);
  transform:translateX(100%);transition:transform .35s ease;
  overflow-y:auto;padding:22px 22px 30px;
}
.mobile-menu.open{transform:translateX(0);}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.mm-head img{height:30px;}
.mm-close,.mm-back{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.mm-close svg,.mm-back svg{width:16px;height:16px;}
.mm-panel{display:none;}
.mm-panel.active{display:block;}
.mm-list{display:flex;flex-direction:column;gap:4px;}
.mm-list > li > a,.mm-list > li > button{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;border:none;background:transparent;
  color:#fff;font-size:15px;font-weight:700;border-radius:12px;text-align:left;
}
.mm-list > li > a svg:first-child,.mm-list > li > button svg:first-child{width:19px;height:19px;color:#9fb0d9;flex:none;}
.mm-list > li > a.mm-active{background:var(--blue-700);}
.mm-list > li > button .chev{margin-left:auto;width:14px;height:14px;color:#9fb0d9;}
.mm-sub-head{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--blue-700);color:#fff;font-weight:700;margin-bottom:12px;
}
.mm-sub-head svg{width:18px;height:18px;}
.mm-product-list{display:flex;flex-direction:column;gap:10px;}
.mm-product-list a{
  display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);
}
.mm-product-list img{width:52px;height:52px;object-fit:cover;border-radius:9px;background:rgba(255,255,255,.06);flex:none;}
.mm-product-list a > span{display:flex;flex-direction:column;min-width:0;}
.mm-product-list .name{display:block;font-size:14px;font-weight:800;color:#fff;}
.mm-product-list .name .accent{color:var(--blue-500);}
.mm-product-list .tag{display:block;font-size:11.5px;color:#9fb0d9;margin-top:2px;}
.mm-product-list svg.arrow{width:14px;height:14px;color:#9fb0d9;margin-left:auto;flex:none;}
.mm-cta{background:rgba(255,255,255,.04);border-radius:16px;padding:20px;text-align:center;margin-top:22px;}
.mm-cta h4{color:#fff;font-size:17px;font-weight:800;}
.mm-cta p{color:#9fb0d9;font-size:12.5px;margin-top:8px;line-height:1.5;}
.mm-cta .btn{width:100%;margin-top:14px;}
.mm-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;}
.mm-trust li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:600;color:#dfe4f0;line-height:1.3;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 12px;}
.mm-trust svg{width:20px;height:20px;color:var(--blue-500);flex:none;}
.mm-contact{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);}
.mm-contact h5{color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.mm-contact li{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#dfe4f0;margin-bottom:12px;}
.mm-contact li a{display:contents;}
.mm-contact svg{width:17px;height:17px;color:var(--blue-500);flex:none;}
.mm-social{display:flex;gap:10px;margin-top:16px;}
.mm-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#fff;}
.mm-social svg{width:15px;height:15px;}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.11s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.17s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.29s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.35s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.41s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.47s;}

/* ---------- Scroll to top ---------- */
.scroll-top{
  position:fixed;right:30px;bottom:98px;z-index:850;width:46px;height:46px;border-radius:50%;border:none;
  background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.7);transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s ease,background .3s ease,box-shadow .3s ease;
  box-shadow:0 10px 24px rgba(12,18,32,.28);
}
.scroll-top:hover{background:var(--blue-700);box-shadow:0 10px 24px rgba(18,45,110,.4);}
.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.scroll-top svg{width:18px;height:18px;}

/* ---------- Trust logos row ---------- */
.trust-row{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:26px;}
.trust-row .avatars{display:flex;}
.trust-row .avatars img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-10px;}
.trust-row .avatars img:first-child{margin-left:0;}
.trust-row .label{font-size:13px;color:var(--text-muted);font-weight:600;}
.trust-logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:16px;}
.trust-logos span{font-weight:800;font-size:17px;letter-spacing:.01em;opacity:.85;color:#333;font-family:Georgia,'Times New Roman',serif;}
.trust-logos span.tl-welspun{font-family:Arial,sans-serif;color:#333;}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1180px){
  .container{padding:0 20px;}
  .feature-grid{grid-template-columns:repeat(3,1fr);}
  .why-cards .why-card{flex:0 0 calc(33.333% - 9.333px);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:1100px){
  /* CTA band: buttons crowd the heading at this width, so stack them
     vertically inside their own div instead of side by side, while staying
     in the same row next to the text (reset back to a row at the 760px
     mobile breakpoint below, which has its own centered/stacked layout) */
  .cta-band-actions{flex-direction:column;align-items:flex-start;}
}
@media (max-width:1080px){
  .nav-main,.header-phone{display:none;}
  .hamburger{display:flex;}
  .popup-scroll{grid-template-columns:1fr;}
  .popup-left .cluster{min-height:90px;}
  /* .popup-left (product image + trust badges) stacks above the form on
     mobile — once a validation/response error is showing (.has-error,
     toggled in main.js) hide it so the form + error stay in view instead of
     needing a long scroll past marketing content the user's already seen */
  .popup-scroll.has-error .popup-left{display:none;}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .spec-wrap{grid-template-columns:1fr;}
  .spec-photo{max-width:260px;margin:0 auto;}
  .spec-head{text-align:center;}
  .spec-wrap > div:first-child{max-width:420px;margin:0 auto;}
}
@media (max-width:960px){
  .why-band{grid-template-columns:1fr;padding:32px 24px;}
  .why-cards .why-card{flex:0 0 calc(33.333% - 9.333px);}
  .industry-grid,.industry-grid.cols-8,.industry-grid.cols-5,.industry-photo-grid{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .featured-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stat-bar .stat-item{flex:0 0 33.333%;}
  .stat-bar{row-gap:26px;}
  .stat-item:nth-child(3n)::after{display:none;}
  /* Milestones: keep the original 3-up/2-up wrapped grid, centered, but
     connect each row's dots with its own dashed line (a single line across
     the whole row would misalign with the centered, incomplete 2nd row) */
  .milestones{flex-wrap:wrap;row-gap:28px;justify-content:center;}
  .milestones::before{display:none;}
  .milestone{flex:1 1 30%;position:relative;}
  .milestone:nth-child(1)::after,
  .milestone:nth-child(2)::after,
  .milestone:nth-child(4)::after{
    /* drawn on the earlier dot's own box (not reaching back from the next
       one) so DOM paint order keeps it behind both dots it connects,
       instead of drawing on top of the previous item's icon */
    content:'';position:absolute;left:50%;width:100%;top:25px;
    border-top:2px dashed var(--border-light);z-index:1;
  }

  /* How It Works: left-aligned vertical timeline with a connecting line
     (starts here instead of at 760px so the 2-up grid range doesn't lose
     its connecting line entirely) */
  .process-row{grid-template-columns:1fr;row-gap:0;}
  .process-line{display:none;}
  .process-step{
    display:grid;grid-template-columns:64px 1fr;align-items:start;gap:14px;
    text-align:left;padding:0 0 26px;position:relative;
  }
  .process-step .dot{width:56px;height:56px;margin:0;}
  .process-step .dot svg{width:24px;height:24px;}
  .process-step:not(:last-child)::before{
    content:'';position:absolute;left:28px;top:60px;bottom:6px;width:2px;
    background-image:linear-gradient(180deg,var(--border-light) 55%,transparent 55%);
    background-size:2px 10px;
  }
  .process-step .process-num{margin-top:2px;}
}
@media (max-width:767px){
  .section{padding:64px 0;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .why-cards .why-card{flex:0 0 calc(50% - 7px);}
  /* Stacked layout: the photo becomes a full row instead of a left column,
     so it needs the .product-grid-card bleed pattern (all 3 sides + fixed
     height) instead of the desktop version's stretch-to-row-height + inset
     right edge, which only makes sense next to a side-by-side text column. */
  .product-wide-card{grid-template-columns:1fr;text-align:center;}
  .product-wide-card .photo{align-self:auto;height:210px;margin:-26px -26px 18px;}
  .faq-two-col{grid-template-columns:1fr;}
  .cta-band{padding:28px;justify-content:center;text-align:center;}
  .cta-band-text{flex-direction:column;text-align:center;}
  .cta-band-actions{flex-direction:row;justify-content:center;align-items:center;width:100%;}
  .cta-band.navy .cta-band-text{gap:20px;}
  .cta-band.navy .cta-band-photo{
    align-self:stretch;width:auto;height:230px;margin:-28px -28px 0 -28px;
  }
  .cta-band.navy .cta-band-photo::after{
    background:linear-gradient(180deg,rgba(8,13,26,0) 18%,rgba(9,14,27,.55) 50%,rgba(9,14,27,.92) 75%,var(--navy-900) 90%);
  }
  /* Stack the nav buttons below the title instead of alongside it — at this
     width the row no longer had space to push them apart (justify-content:
     center pulled them in tight instead), so they ended up floating beside/
     overlapping the two-line eyebrow+title block. */
  .carousel-head{flex-direction:column;align-items:center;text-align:center;}
}
@media (max-width:640px){
  :root{--header-h:70px;}
  .form-row{grid-template-columns:1fr;}
  .industry-grid,.industry-grid.cols-8,.industry-grid.cols-5,.industry-photo-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr;}
  .featured-grid{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;text-align:left;}
  .stat-bar .stat-item{flex:0 0 50%;}
  .stat-item:nth-child(3n)::after{display:block;}
  .stat-item:nth-child(2n)::after{display:none;}
  .process-row{grid-template-columns:1fr;}

  /* Milestones on mobile: switch from the 3-up/2-up row grid to a single
     left-aligned vertical timeline (row-connector lines above don't apply
     to a single column, so this uses its own vertical dashed connector) */
  .milestones{flex-direction:column;row-gap:0;}
  .milestone{
    flex:1 1 auto;text-align:left;padding:0 0 28px;
    display:grid;grid-template-columns:52px 1fr;align-items:start;gap:16px;
  }
  .milestone::after{display:none;}
  .milestone .dot{margin:0;}
  .milestone:not(:last-child)::before{
    content:'';position:absolute;left:25px;top:56px;bottom:6px;width:2px;
    background-image:linear-gradient(180deg,var(--border-light) 55%,transparent 55%);
    background-size:2px 10px;
  }
  .section-title{font-size:28px;}
  .hero-copy h1{font-size:32px;}
  .brand img{height:42px;}
}
@media (max-width:480px){
  .container{padding:0 16px;}
  .feature-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .feature-card{padding:20px 12px;}
  .why-cards .why-card{flex:0 0 calc(50% - 7px);}
  .cta-band{padding:22px 18px;}
  .cta-band-photo{display:none;}
  .cta-band.navy .cta-band-photo{
    display:block;align-self:stretch;width:auto;height:200px;margin:-22px -18px 0 -18px;
  }
  .popup-left{padding:22px 20px;}
  .popup-right{padding:22px 20px;}
  .footer-bottom{font-size:13px;white-space:nowrap;padding:18px 0;}
}
@media (max-width:360px){
  .feature-grid{grid-template-columns:1fr;}
  .why-cards .why-card{flex:0 0 100%;}
  .industry-grid,.industry-grid.cols-8,.industry-grid.cols-5,.industry-photo-grid{grid-template-columns:1fr;}
  .header-actions .btn{padding:10px 14px;font-size:13px;}
  .footer-bottom{font-size:13px;}
}

/* ============================================================
   DESIGN-MOCKUP MATCH PASS
   ============================================================ */

/* --- Home: trust row on a single line (avatars + label + client logos) --- */
.trust-row{flex-wrap:nowrap;gap:18px;}
.trust-row .avatars{flex:none;}
.trust-row .avatars img{flex:none;}
.trust-row .label{white-space:nowrap;}
.trust-row .trust-logos{margin-top:0;gap:18px;flex-wrap:nowrap;}
.trust-row .trust-logos span{font-size:15px;}

/* --- Home: ecosystem = one horizontal intro row (heading+description stacked on the
   left, button on the right), then the 7 product cards start on their own row below,
   4 per row so each card gets real width instead of squeezing 7-across into a narrow column --- */
.eco-layout{display:flex;flex-direction:column;gap:30px;}
.eco-intro{display:flex;align-items:center;justify-content:space-between;gap:36px;}
.eco-intro-head{flex:0 1 640px;}
.eco-layout .eco-intro .section-title{font-size:clamp(24px,2.3vw,30px);}
.eco-layout .eco-intro .section-sub{font-size:14px;line-height:1.65;max-width:none;margin:10px 0 0;}
.eco-intro .btn{flex:0 0 auto;white-space:nowrap;}
.eco-layout .eco-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px;}
.eco-layout .eco-row .product-card{flex:0 0 calc(25% - 12px);}
.eco-layout .product-card{padding:16px;}
.eco-layout .product-card .name{order:-1;margin-bottom:10px;font-size:14px;}
.eco-layout .product-card .thumb{margin-bottom:10px;}
.eco-layout .product-card .view-link{margin-top:10px;white-space:nowrap;}

/* --- Home: why-choose band spans the full viewport width --- */
.why-section{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-700) 100%);
  padding:58px 0;
}
.why-section::before{
  content:'';position:absolute;inset:0;
  background:url('../img/hero/hero-bg-factory.png') center/cover no-repeat;
  opacity:.55;
}
.why-section::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-900) 0%,rgba(9,14,28,.9) 32%,rgba(9,14,28,.62) 68%,rgba(9,14,28,.4) 100%);
}
.why-section>.container{position:relative;z-index:2;}
.why-band.flush{background:none;border-radius:0;padding:0;grid-template-columns:1fr 2fr;}
.why-band.flush .section-title{font-size:clamp(24px,2.4vw,32px);}

/* --- Home: industries row with the arrow inline at the right edge (mockup shows
   plain outline icons floating on the card, no colored badge box, and a shorter card) --- */
.industry-row{display:flex;align-items:stretch;gap:12px;}
.industry-row .industry-card{
  flex:1 1 0;min-width:0;padding:20px 10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.industry-row .industry-card .icon-badge{width:auto;height:auto;background:none;border-radius:0;margin:0 auto 10px;}
.industry-row .industry-card .icon-badge svg{width:30px;height:30px;stroke-width:1.5;}
.industry-row .industry-card:hover .icon-badge{background:none;transform:none;color:var(--blue-700);}
.industry-row .industry-card span{font-size:12px;}

/* --- Home: featured solutions = intro column left, 4 photo cards right --- */
.featured-layout{display:grid;grid-template-columns:1fr 2.9fr;gap:30px;align-items:center;}
.featured-layout .featured-intro .section-title{font-size:clamp(24px,2.3vw,30px);}
.featured-layout .featured-grid{gap:14px;}

/* --- CTA band: logo lockup + dark demo button on the blue variant --- */
.cta-band-logo{height:40px;width:auto;flex:none;}
.btn-cta-dark{background:var(--navy-900);color:#fff;}
.btn-cta-dark:hover{background:var(--navy-700);}

/* --- CTA band: light variant (About page mockup) --- */
.cta-band.light{background:#fff;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);color:var(--text-dark);}
.cta-band.light h3{color:var(--text-dark);}
.cta-band.light h3 .accent{color:var(--blue-700);}
.cta-band.light p{color:var(--text-muted);}
.cta-band.light .cta-band-photo{width:210px;height:120px;}
.cta-band.light .btn-outline-dark{border-color:var(--blue-700);color:var(--blue-700);}
.cta-band.light .btn-outline-dark:hover{background:var(--blue-100);}

/* --- Hero chips: always a single row on inner-page heroes --- */
.hero-chips{flex-wrap:nowrap;gap:18px;}
.hero-chips .hero-chip{min-width:0;}
.hero-chips .hero-chip .ic{width:34px;height:34px;}
.hero-chips .hero-chip .ic svg{width:16px;height:16px;}
.hero-chips.chips-stacked .hero-chip{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px;}
/* chips that carry a heading + description need tighter type to stay on one row */
.hero-chips.chips-detail{gap:14px;align-items:flex-start;}
.hero-chips.chips-detail .hero-chip{flex:1 1 0;min-width:0;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--text-muted-on-dark);}
.hero-chips.chips-detail .hero-chip strong{display:block;font-size:12.5px;color:#fff;margin-bottom:3px;}
.hero-chips.chips-detail .hero-chip .ic{width:36px;height:36px;margin-top:1px;background:rgba(47,95,232,.14);border-color:rgba(47,95,232,.32);}
.hero-chips.chips-detail .hero-chip .ic svg{width:16px;height:16px;}
@media (max-width:900px){
  .hero-chips{flex-wrap:wrap;}
}

/* --- Product detail hero: product sits on the pedestal, no card crop --- */
.hero-media .spotlight.bare{
  background:none;border-radius:0;overflow:visible;aspect-ratio:auto;
  display:flex;align-items:center;justify-content:center;
}
.hero-media .spotlight.bare img{
  width:100%;height:auto;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));
  /* feather the photo's own backdrop into the dark hero so it reads as a
     pedestal shot rather than a pasted rectangle */
  -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 48%,#000 52%,transparent 88%);
  mask-image:radial-gradient(ellipse 74% 74% at 50% 48%,#000 52%,transparent 88%);
}
.hero-media .spotlight.bare::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(47,95,232,.34) 0%,rgba(47,95,232,.12) 42%,transparent 68%);
  z-index:1;pointer-events:none;
}

/* --- Product detail: applications shown as industry photo cards --- */
.split.split-apps{grid-template-columns:.6fr 1.7fr;gap:36px;align-items:center;}
.split.split-apps .section-title{font-size:clamp(24px,2.3vw,30px);}
.split.split-apps .section-sub{font-size:14px;}
@media (max-width:960px){.split.split-apps{grid-template-columns:1fr;}}
/* ---------- Applications + Industries Served showcase (product pages) ----------
   Merged into a single centered section instead of two stacked .section
   blocks (which doubled up padding into one flat, featureless gap). Two soft
   radial-gradient blobs behind the content add depth to the plain bg-light
   fill, echoing the glowing-pedestal motif used in the hero/CTA sections. */
.apps-showcase{position:relative;overflow:hidden;}
.apps-showcase::before,.apps-showcase::after{
  content:'';position:absolute;width:380px;height:380px;border-radius:50%;
  pointer-events:none;z-index:0;
}
.apps-showcase::before{top:-120px;right:-120px;background:radial-gradient(circle,rgba(47,95,232,.14),transparent 70%);}
.apps-showcase::after{bottom:-140px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(47,95,232,.1),transparent 70%);}
.apps-showcase .container{position:relative;z-index:1;}
.apps-industries-label{text-align:center;margin:52px 0 30px;}
.apps-industries-label .eyebrow{justify-content:center;}

/* 5 cards at 3-per-row (was 5-per-row, which squeezed each card to ~165px
   inside the old split layout's ~75%-width column). flex+justify-content:
   center instead of grid so the 2-card second row centers itself instead of
   grid auto-placement's default left-alignment under an empty 3rd slot. */
.applications-photos{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:900px;margin:0 auto;}
.applications-photos .industry-photo-card{aspect-ratio:4/3.4;flex:0 1 calc(33.333% - 14px);border-radius:16px;}
.applications-photos .industry-photo-card .ic{width:38px;height:38px;border-radius:10px;}
.applications-photos .industry-photo-card .ic svg{width:17px;height:17px;}
.applications-photos .industry-photo-card span{font-size:13.5px;letter-spacing:.01em;}
@media (max-width:1000px){.applications-photos .industry-photo-card{flex-basis:calc(50% - 10px);}}
@media (max-width:640px){.applications-photos{gap:14px;}.applications-photos .industry-photo-card{flex-basis:calc(50% - 7px);}.applications-photos .industry-photo-card span{font-size:12px;}}

/* --- About: hero photo bleeds to the right viewport edge --- */
.hero-bleed .hero-grid{grid-template-columns:1fr 1fr;align-items:center;}
.hero-bleed .hero-media{
  /* min() keeps it from pushing inward once the viewport is narrower than the container */
  margin-right:min(0px, calc((100vw - var(--container)) / -2 - 24px));
}
.hero-bleed .hero-media .spotlight{border-radius:0;aspect-ratio:16/10;}
.hero-bleed .hero-media .spotlight::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-900) 0%,rgba(12,18,32,.45) 26%,transparent 60%);
}
@media (max-width:960px){
  .hero-bleed .hero-media{margin-right:0;}
}

/* --- About: stat chips in one strip under the hero copy --- */
.stat-chip-row{display:flex;gap:10px;flex-wrap:nowrap;margin-top:28px;}
.stat-chip-row .stat-chip{flex:1 1 0;min-width:0;}
@media (max-width:900px){.stat-chip-row{flex-wrap:wrap;}}

/* --- About: story photo larger with readable mission/vision cards --- */
.story-media .story-photo{aspect-ratio:16/10;}
.story-media .story-photo img{height:100% !important;object-fit:cover;}
.story-media{padding-bottom:30px;}
.story-overlay{
  position:absolute;left:6%;right:6%;bottom:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
.story-overlay .mv-card{padding:22px 20px;}
.story-overlay .mv-card + .mv-card{border-left:1px solid rgba(255,255,255,.1);}
.story-overlay .mv-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.story-overlay .mv-head .ic{
  width:38px;height:38px;border-radius:10px;background:rgba(47,95,232,.18);color:var(--blue-500);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.story-overlay .mv-head .ic svg{width:19px;height:19px;}
.story-overlay h4{color:#fff;font-size:17px;font-weight:800;}
.story-overlay p{color:var(--text-muted-on-dark);font-size:13px;line-height:1.65;}
@media (max-width:960px){
  .story-overlay{position:static;margin-top:18px;left:auto;right:auto;bottom:auto;}
}
@media (max-width:640px){
  .story-overlay{grid-template-columns:1fr;}
  .story-overlay .mv-card + .mv-card{border-left:none;border-top:1px solid rgba(255,255,255,.1);}
}

/* --- Contact: real map inside the Our Location card --- */
.map-frame{width:100%;height:230px;border:0;display:block;background:var(--bg-light);}

/* --- Responsive collapses for the new home layouts --- */
@media (max-width:1180px){
  .featured-layout{grid-template-columns:1fr;gap:26px;}
  .eco-layout{gap:26px;}
  .eco-intro{flex-direction:column;align-items:flex-start;gap:16px;}
  .eco-intro-head{flex:none;width:auto;}
  .eco-layout .eco-intro .section-sub{max-width:640px;}
  .industry-row{display:grid;grid-template-columns:repeat(4,1fr);}
  .industry-row .industry-card{padding:34px 14px;}
}
@media (max-width:991px){
  .eco-layout .eco-row .product-card{flex:0 0 calc(33.333% - 11px);}
}
@media (max-width:760px){
  .industry-row{grid-template-columns:repeat(2,1fr);}
  .why-band.flush{grid-template-columns:1fr;}
  .cta-band-logo{height:32px;}
}

/* --- Video cards: keep the Watch Video link on one line --- */
.video-info .watch{white-space:nowrap;}

/* ============================================================
   FULL-WIDTH HERO (inner pages) — matches every desktop mockup:
   edge-to-edge background photo, dark gradient mask over the left,
   copy sitting on the mask. No boxed/rounded image card.
   ============================================================ */
.hero-full{
  position:relative;overflow:hidden;padding:0;
  background:var(--navy-900);
  display:flex;align-items:center;
  min-height:540px;
}
.hero-full::before{display:none;}
.hero-bg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:75% center;z-index:0;
}
.hero-full .hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--navy-900) 0%,
      rgba(8,14,28,.95) 22%,
      rgba(8,14,28,.72) 38%,
      rgba(8,14,28,.3) 52%,
      rgba(8,14,28,.04) 66%,
      transparent 78%),
    linear-gradient(180deg,rgba(8,14,28,.55) 0%,transparent 26%,transparent 74%,rgba(8,14,28,.5) 100%);
}
.hero-full > .container{position:relative;z-index:3;}
.hero-content{max-width:625px;padding:62px 0;}
.hero-full .breadcrumb{margin-bottom:18px;}
.hero-full .hero-copy h1{font-size:clamp(32px,3.3vw,47px);}
.hero-full .hero-copy .tagline{font-size:22px;margin-top:12px;}
.hero-full .hero-copy p.desc{max-width:490px;}

/* foreground subject (product on its pedestal) over the backdrop */
.hero-subject{
  position:absolute;z-index:2;
  right:2%;top:50%;transform:translateY(-50%);
  height:86%;width:auto;max-width:52%;object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65));
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 56%,transparent 86%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 56%,transparent 86%);
}

/* chip capsule — About / Products mockups wrap the chip row in a bordered pill */
.hero-chips.chips-capsule{
  display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(6px);
  padding:6px 4px;margin-top:30px;
  max-width:660px;
}
.hero-chips.chips-capsule .hero-chip{
  flex:1 1 0;min-width:0;padding:10px 16px;gap:11px;
}
.hero-chips.chips-capsule .hero-chip + .hero-chip{border-left:1px solid rgba(255,255,255,.12);}
.hero-chips.chips-capsule .hero-chip .ic{width:36px;height:36px;background:rgba(47,95,232,.16);border-color:rgba(47,95,232,.3);}
.hero-chips.chips-capsule .hero-chip strong{display:block;font-size:19px;font-weight:800;color:#fff;line-height:1.1;}
.hero-chips.chips-capsule .hero-chip div{font-size:11.5px;color:var(--text-muted-on-dark);line-height:1.35;}

/* plain chip row (product pages / video gallery) */
.hero-chips.chips-plain{gap:22px;margin-top:24px;}
.hero-chips.chips-plain .hero-chip{font-size:12.5px;line-height:1.35;align-items:center;}
.hero-chips.chips-plain .hero-chip .ic{width:36px;height:36px;background:rgba(47,95,232,.14);border-color:rgba(47,95,232,.32);}

/* short blue rule under a hero sub-heading (Contact mockup) */
.hero-rule{width:64px;height:3px;background:var(--blue-600);border-radius:3px;margin:18px 0 4px;}

@media (max-width:1100px){
  .hero-subject{opacity:.5;right:-6%;}
  .hero-full .hero-scrim{background:linear-gradient(90deg,var(--navy-900) 0%,rgba(8,14,28,.95) 52%,rgba(8,14,28,.75) 100%);}
}
@media (max-width:860px){
  .hero-full{min-height:0;}
  .hero-content{padding:48px 0;max-width:none;}
  .hero-chips.chips-capsule{flex-wrap:wrap;max-width:none;row-gap:10px;}
  .hero-chips.chips-capsule .hero-chip{flex:1 1 45%;}
  .hero-chips.chips-capsule .hero-chip + .hero-chip{border-left:none;}
  .hero-chips.chips-capsule .hero-chip:nth-child(even){border-left:1px solid rgba(255,255,255,.12);}
  .hero-chips.chips-plain{flex-wrap:wrap;gap:16px;}
}

/* ---------- Home hero: desktop uses a full-bleed product-cluster photo as
   the section background (blank studio space on its left is where the
   image itself already leaves room for the copy); mobile reverts to the
   original stacked layout with a separate boxed cluster image, see the
   max-width:960px block below ---------- */
.hero-home{
  position:relative;overflow:hidden;
  padding:72px 0 64px;
  min-height:600px;display:flex;align-items:center;
  background:linear-gradient(115deg,#ffffff 0%,#f4f7fd 42%,#e8eefb 100%);
}
.hero-home .hero-bg-img{object-position:right center;}
/* Legibility scrim: fades the page's own light gradient over the photo's
   blank left-side studio backdrop, transparent before the product cluster
   starts (~43% across) so it never dims the products themselves */
.hero-home::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    #eef3fb 0%,
    #eef3fb 20%,
    rgba(238,243,251,.88) 30%,
    rgba(238,243,251,.4) 36%,
    rgba(238,243,251,0) 42%);
}
.hero-home > .container{position:relative;z-index:2;width:100%;}
.hero-home .home-hero-grid{grid-template-columns:1fr;}
.hero-home .hero-copy{max-width:520px;}
.hero-cluster-mobile{display:none;}
.trust-block{margin-top:34px;}
.trust-block .label{font-size:13px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:12px;}
.trust-block .trust-row{margin-top:0;gap:26px;}
@media (max-width:960px){
  /* Mobile keeps the original stacked layout: copy, then the product
     cluster as its own boxed image, not the desktop full-bleed background */
  .hero-home{min-height:0;padding:40px 0 34px;}
  .hero-home .hero-copy{max-width:none;}
  .hero-home .hero-bg-img{display:none;}
  .hero-home::after{display:none;}
  .hero-cluster-mobile{
    display:block;width:100%;height:auto;margin:24px 0 0;
    border-radius:20px;box-shadow:0 14px 34px rgba(10,20,40,.14);
  }
}

/* ============================================================
   MOBILE MOCKUP MATCH PASS
   ============================================================ */

/* .cols-4 (0,2,0) outranked every responsive .feature-grid/.why-cards rule (0,1,0),
   so these strips stayed 4-across down to 360px and overflowed. Match the
   specificity so the breakpoints actually win. */
@media (max-width:1024px){
  .feature-grid.cols-4{grid-template-columns:repeat(3,1fr);}
  .why-cards.cols-4{grid-template-columns:repeat(3,1fr);}
  /* 4 cards in a 3-col grid leaves one orphan on row 2, which grid
     auto-placement always left-aligns under column 1. Every instance of
     this section has exactly 4 cards (:nth-child(4):last-child guards
     against ever matching a page that doesn't), so drop that lone card
     into the middle column to center it instead. */
  .feature-grid.cols-4 .feature-card:nth-child(4):last-child{grid-column:2;}
}
@media (max-width:760px){
  .feature-grid.cols-4,.why-cards.cols-4{grid-template-columns:repeat(2,1fr);}
  /* 2 columns divide 4 cards evenly, no orphan — undo the 3-col centering
     trick or grid-column:2 would try to place it in a column that doesn't
     exist at this width and break the layout. */
  .feature-grid.cols-4 .feature-card:nth-child(4):last-child{grid-column:auto;}
}
@media (max-width:400px){
  .feature-grid.cols-4,.why-cards.cols-4{grid-template-columns:1fr;}
}

@media (max-width:860px){
  /* Contact hero chips wrap 2-up instead of overflowing the viewport */
  .hero-chips.chips-detail{flex-wrap:wrap;}
  .hero-chips.chips-detail .hero-chip{flex:1 1 44%;}

  /* Inner-page heroes: stack the foreground subject under the copy.
     .hero-full is a flex row, so the subject must become a column item —
     leaving it `position:static` in the row shoved the text off-screen. */
  .hero-full{flex-direction:column;align-items:stretch;}
  .hero-full > .container{order:1;width:100%;}
  .hero-full .hero-subject{
    position:static;transform:none;display:block;
    width:100%;height:auto;margin:0;
    opacity:1;right:auto;
    max-width: unset;
    -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 58%,transparent 88%);
    mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 58%,transparent 88%);
  }
  .hero-full .hero-bg-img{object-position:70% center;}
  .hero-full .hero-scrim{
    background:linear-gradient(180deg,rgba(8,14,28,.94) 0%,rgba(8,14,28,.88) 55%,rgba(8,14,28,.94) 100%);
  }
}

@media (max-width:960px){
  .hero-home .hero-actions{flex-wrap:wrap;}
  .hero-home .hero-actions .btn{flex:1 1 auto;}
}

@media (max-width:760px){
  /* Ecosystem: 2-up grid on mobile instead of seven full-width blocks
     (that alone was making the mobile home page ~25,000px tall) */
  .eco-layout .eco-row{gap:12px;}
  .eco-layout .eco-row .product-card{flex:0 0 calc(50% - 6px);}
  .eco-layout .product-card .thumb{aspect-ratio:4/5;}

  /* Featured solutions: landscape cards, as the mobile mockup shows */
  .featured-grid{grid-template-columns:1fr;gap:14px;}
  .featured-card{aspect-ratio:16/8.4;}

  /* Related-product carousel reads as a list on mobile */
  .carousel-track .product-card{flex:0 0 74%;}
}
@media (max-width:480px){
  /* Taller ratio than the 760px rule above so title + description + Explore
     link still fit at very narrow widths; width:100% guards against
     aspect-ratio fighting min-height and blowing out past the grid column. */
  .featured-card{width:100%;aspect-ratio:16/12;min-height:300px;}
}

/* Mobile header: mockup shows just the logo and the hamburger */
@media (max-width:860px){
  .header-actions .btn{display:none;}
  .header-phone{display:none;}
}

/* Tablet/mobile keep the same floating WhatsApp bubble as desktop instead
   of a sticky bottom action bar. */
.mobile-action-bar{display:none;}
@media (max-width:860px){
  .inquiry-tab{display:none;}
}

/* --- Exact mockup hero order (ICE BOT trial): the product photo sits between
   the description and the chips in the DOM, so mobile stacks it exactly like
   the mockup. On desktop it lifts back out of flow onto the right-hand side.
   .hero-copy uses reveal-stagger (children animate) rather than reveal, so no
   ancestor carries a transform that would capture the absolute positioning. --- */
.hero-exact .hero-subject{
  position:absolute;z-index:2;
  right:2%;top:50%;transform:translateY(-50%);
  height:86%;width:auto;max-width:52%;margin:0;
  opacity:1;
}
@media (max-width:860px){
  .hero-exact .hero-subject{
    position:static;transform:none;order:0;
    width:78%;max-width:320px;height:auto;margin:18px auto 22px;
  }
}

/* ---------- Testimonials ("Trusted by Industry Leaders") ---------- */
.testimonial-wrap{max-width:820px;margin:0 auto;position:relative;}
.testimonial-card{
  background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:38px 40px;box-shadow:var(--shadow-sm);text-align:left;
}
.testimonial-card .stars{display:flex;gap:5px;margin-bottom:20px;}
.testimonial-card .stars svg{width:20px;height:20px;color:var(--blue-600);}
.testimonial-card .quote{font-size:18px;line-height:1.75;color:var(--text-dark);font-weight:500;}
.testimonial-card .who{margin-top:24px;}
.testimonial-card .who strong{display:block;font-size:15px;font-weight:800;color:var(--text-dark);}
.testimonial-card .who span{font-size:13.5px;color:var(--text-muted);}
.testimonial-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.t-dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(20,80,224,.25);transition:background .25s ease,width .25s ease;
}
.t-dot.active{background:var(--blue-700);width:22px;border-radius:5px;}

/* ---------- Insights / blog teasers ---------- */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.insight-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-light);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease;
}
.insight-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.insight-thumb{aspect-ratio:16/9.6;overflow:hidden;background:var(--bg-light);}
.insight-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.insight-card:hover .insight-thumb img{transform:scale(1.07);}
.insight-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;}
.insight-body h4{font-size:16px;font-weight:800;line-height:1.4;color:var(--text-dark);flex:1;}
.insight-card:hover .insight-body h4{color:var(--blue-700);}
.insight-date{margin-top:12px;font-size:12.5px;color:var(--text-muted);font-weight:600;}
.insight-more{display:flex;justify-content:center;margin-top:34px;}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--blue-700);
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s ease;}
.link-arrow:hover svg{transform:translateX(4px);}

@media (max-width:960px){
  .insight-grid{grid-template-columns:1fr;gap:16px;}
  /* mockup shows these as compact thumbnail-left rows on mobile */
  .insight-card{flex-direction:row;align-items:stretch;}
  .insight-thumb{flex:0 0 38%;aspect-ratio:auto;}
  .insight-body{padding:14px 16px;justify-content:center;}
  .insight-body h4{font-size:14.5px;flex:0 0 auto;}
  .insight-date{margin-top:8px;font-size:12px;}
  .testimonial-card{padding:28px 24px;}
  .testimonial-card .quote{font-size:15.5px;}
}

/* Trust-row avatars: overlapping circular headshots, as in the mockup */
.trust-row .avatars img{width:38px;height:38px;object-fit:cover;object-position:center 32%;}
@media (max-width:860px){
  .trust-row{flex-wrap:wrap;gap:14px;}
  .trust-row .avatars img{width:34px;height:34px;}
}

/* ---------- Legal pages (Privacy / Terms / Return Policy) ---------- */
.legal-content{max-width:860px;display:flex;flex-direction:column;gap:34px;}
.legal-content h2{font-size:20px;font-weight:800;margin-bottom:12px;}
.legal-content p{color:var(--text-muted);line-height:1.8;font-size:14.5px;}
.legal-content ul,.legal-content ol{color:var(--text-muted);line-height:1.8;font-size:14.5px;padding-left:20px;margin-top:8px;}