/* ============================================================
   Shared styles — footer, mobile action bar, responsive fixes,
   horizontal scroll-driven carousels.
   ============================================================ */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#2563EB;--purple:#7C3AED;--cyan:#06B6D4;--green:#059669;
  --text:#0F172A;--text2:#334155;--text3:#64748B;--text4:#94A3B8;
  --grad:linear-gradient(135deg,#2563EB,#7C3AED);
  --border:rgba(15,23,42,.06);--border2:rgba(15,23,42,.1);
  --shadow:0 2px 8px rgba(15,23,42,.06),0 4px 20px rgba(15,23,42,.05);
  --r:16px;--r2:12px;
}
body{font-family:'Inter',sans-serif;background:#0F172A;color:#131212}
a{text-decoration:none;color:inherit}

/* ── FOOTER ── */
.site-footer{background:#0F172A;border-top:1px solid rgba(255,255,255,.06);padding:0}

/* Newsletter bar */
.footer-nl{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.12));border-bottom:1px solid rgba(255,255,255,.06);padding:40px 0}
.footer-nl-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-nl-text h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:4px}
.footer-nl-text p{font-size:.85rem;color:rgba(255,255,255,.5)}
.footer-nl-form{display:flex;gap:10px;flex:1;max-width:460px}
.footer-nl-input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;padding:11px 16px;border-radius:10px;font-size:.875rem;font-family:'Inter',sans-serif;outline:none;transition:.25s}
.footer-nl-input::placeholder{color:rgba(255,255,255,.3)}
.footer-nl-input:focus{border-color:rgba(37,99,235,.5);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.footer-nl-btn{background:var(--grad);color:#fff;border:none;padding:11px 22px;border-radius:10px;font-size:.875rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;transition:.2s}
.footer-nl-btn:hover{opacity:.9;transform:translateY(-1px)}

/* Main grid */
.footer-main{max-width:1200px;margin:0 auto;padding:60px 32px 48px}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.footer-brand{}
.footer-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:16px}
.footer-logo-icon{width:32px;height:32px;background:var(--grad);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.footer-logo-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer-brand p{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.75;margin-bottom:24px;max-width:240px}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.footer-badge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 11px;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.04em}
.footer-social{display:flex;gap:8px}
.footer-social-link{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.2s;cursor:pointer}
.footer-social-link:hover{background:rgba(37,99,235,.25);border-color:rgba(37,99,235,.4)}
.footer-social-link svg{width:16px;height:16px;fill:rgba(255,255,255,.55);transition:.2s}
.footer-social-link:hover svg{fill:#fff}

/* Footer columns */
.footer-col h5{font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.12em;margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col li a{font-size:.85rem;color:rgba(255,255,255,.45);transition:.2s;display:flex;align-items:center;gap:6px}
.footer-col li a::before{content:'';width:4px;height:4px;border-radius:50%;background:rgba(37,99,235,.5);flex-shrink:0;transition:.2s}
.footer-col li a:hover{color:rgba(255,255,255,.9)}
.footer-col li a:hover::before{background:#2563EB}

/* Contact column */
.footer-contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.footer-contact-icon{width:32px;height:32px;border-radius:8px;background:rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.footer-contact-icon svg{width:14px;height:14px;fill:#2563EB}
.footer-contact-detail{}
.footer-contact-detail span{display:block;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.footer-contact-detail a,.footer-contact-detail p{font-size:.82rem;color:rgba(255,255,255,.55);transition:.2s}
.footer-contact-detail a:hover{color:rgba(255,255,255,.9)}

/* Footer bottom */
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-bottom-left p{font-size:.78rem;color:rgba(255,255,255,.28)}
.footer-bottom-left p span{color:rgba(255,255,255,.5)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{font-size:.78rem;color:rgba(255,255,255,.28);transition:.2s}
.footer-bottom-links a:hover{color:rgba(255,255,255,.65)}
.footer-bottom-right{display:flex;align-items:center;gap:6px;font-size:.75rem;color:rgba(255,255,255,.25)}
.footer-online-dot{width:7px;height:7px;border-radius:50%;background:#059669;box-shadow:0 0 8px rgba(5,150,105,.5);animation:ft-pulse 2s infinite}
@keyframes ft-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── MOBILE STICKY ACTION BAR ── */
.mobile-action-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:900;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(15,23,42,.08);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 24px rgba(15,23,42,.1);
}
.mab-inner{display:flex;gap:8px}
.mab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px;border-radius:10px;border:1px solid rgba(15,23,42,.1);background:transparent;color:#334155;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s}
.mab-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mab-btn:active{transform:scale(.95)}
.mab-btn.mab-primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(37,99,235,.3)}
.mab-btn.mab-primary svg{stroke:#fff}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:100%}
}
@media(max-width:768px){
  .site-footer{padding-bottom:80px}
  .footer-nl-inner{flex-direction:column;align-items:flex-start}
  .footer-nl-form{width:100%;max-width:100%}
  .footer-main{padding:40px 20px 36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .footer-bottom-links{justify-content:center}
  .mobile-action-bar{display:block}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}


/* ── HORIZONTAL SCROLL CAROUSEL (scroll-driven) ── */
.hcarousel-section {
  position: relative;
  background: #ffffff;
  padding: 0;
}
.hcarousel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* overflow: hidden;  REMOVED — was clipping the track */
}
.hcarousel-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 32px;
  text-align: center;
}
.hcarousel-header .eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2563EB;
  margin-bottom: 14px;
}
.hcarousel-header h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0F172A;
  line-height: 1.1;
  margin-bottom: 14px;
}
.hcarousel-header p {
  font-size: 1.05rem;
  color: #64748B;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── VIEWPORT — now has overflow hidden and proper sizing ── */
.hcarousel-viewport {
  overflow: hidden;           /* ← ADDED: clips the track */
  width: 100%;
  position: relative;
}
.hcarousel-track {
  display: flex;
  gap: 24px;
  padding: 0 calc(50vw - 180px);
  will-change: transform;
  transition: transform .08s linear;
}
.hcarousel-card {
  flex: 0 0 320px;
  height: 380px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(15, 23, 42, .06);
  transition: transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.hcarousel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(15, 23, 42, .12);
}
.hcarousel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, .04), rgba(124, 58, 237, .02));
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.hcarousel-card:hover::before {
  opacity: 1;
}
.hcarousel-card .icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .25);
  flex-shrink: 0;
}
.hcarousel-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.hcarousel-card p {
  font-size: .92rem;
  color: #64748B;
  line-height: 1.65;
  flex: 1;
}
.hcarousel-card .meta {
  font-size: .75rem;
  color: #94A3B8;
  margin-top: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hcarousel-progress {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hcarousel-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(15, 23, 42, .08);
  border-radius: 100px;
  overflow: hidden;
}
.hcarousel-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border-radius: 100px;
  transform-origin: left;
  transition: transform .08s linear;
}
.hcarousel-hint {
  font-size: .72rem;
  color: #94A3B8;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── MOBILE RESPONSIVE ── */
@media(max-width: 768px) {
  .hcarousel-sticky {
    height: auto;
    padding: 80px 0;
    position: relative; /* fallback for sticky on mobile */
  }
  .hcarousel-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-y: visible;
  }
  .hcarousel-viewport::-webkit-scrollbar {
    height: 6px;
  }
  .hcarousel-viewport::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 100px;
  }
  .hcarousel-viewport::-webkit-scrollbar-track {
    background: transparent;
  }
  .hcarousel-track {
    padding: 0 20px;
    transition: none; /* snap scrolling, no JS transform needed on mobile */
    transform: none !important;
    width: max-content;
  }
  .hcarousel-card {
    flex: 0 0 260px;
    height: 340px;
    padding: 24px;
    scroll-snap-align: start;
  }
  .hcarousel-progress {
    display: none; /* hide progress on mobile, use scrollbar instead */
  }
}

/* ── IOT SMALLER PRODUCT CARDS ── */
.products-grid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:18px !important}
.prod-card{border-radius:14px !important}
.prod-card-header{padding:18px !important;min-height:96px !important}
.prod-card-header h3{font-size:.92rem !important;line-height:1.25 !important}
.prod-category{font-size:.6rem !important;padding:3px 7px !important;margin-bottom:6px !important}
.prod-card-body{padding:16px !important}
.prod-desc{font-size:.72rem !important;line-height:1.55 !important;margin-bottom:12px !important;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.prod-features{gap:5px !important;margin-bottom:12px !important}
.prod-feature{font-size:.7rem !important;line-height:1.4 !important}
.prod-feature-dot{width:4px !important;height:4px !important;margin-top:5px !important}
.prod-tag{font-size:.6rem !important;padding:2px 6px !important}
@media(max-width:1024px){ .products-grid{grid-template-columns:repeat(3,1fr) !important} }
@media(max-width:768px){ .products-grid{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:480px){ .products-grid{grid-template-columns:1fr !important} }

/* ── IOT PRODUCTS HORIZONTAL CAROUSEL WRAPPER ── */
.iot-carousel-wrap{position:relative;margin-top:32px}
.iot-carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.iot-carousel-viewport::-webkit-scrollbar{height:8px}
.iot-carousel-viewport::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:100px}
.iot-carousel-viewport::-webkit-scrollbar-track{background:transparent}
.iot-carousel-viewport .products-grid{display:flex !important;grid-template-columns:none !important;gap:18px !important;width:max-content;padding:4px 32px}
.iot-carousel-viewport .prod-card{flex:0 0 280px;scroll-snap-align:start}
.iot-carousel-controls{display:flex;justify-content:center;gap:10px;margin-top:18px}
.iot-carousel-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(15,23,42,.1);background:#fff;color:#0F172A;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.iot-carousel-btn:hover{background:#2563EB;color:#fff;border-color:#2563EB;transform:translateY(-1px)}
@media(max-width:768px){
  .iot-carousel-viewport .products-grid{padding:4px 16px}
  .iot-carousel-viewport .prod-card{flex:0 0 240px}
}

/* ── GLOBAL RESPONSIVE TIGHTENING ── */
@media(max-width:768px){
  .container{padding:0 18px !important}
  .footer-main{padding:40px 18px 32px !important}
  .footer-nl-inner{padding:0 18px !important}
  h1,h2{word-wrap:break-word;overflow-wrap:break-word}
}
@media(max-width:480px){
  .nav-inner{padding:0 16px !important}
  .hero-stats-row{display:grid !important;grid-template-columns:1fr 1fr !important;gap:16px !important}
  .iot-hero-stats{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important}
}
/* ── Fix showcase overflow on mobile ── */
@media (max-width: 768px) {
  /* The parent grid (1fr 2fr) that wraps the showcase */
  .section > .container > div[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Each showcase item that uses 1fr 1fr inside */
  .showcase {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 0 !important;
  }

  /* Ensure the visual area doesn't overflow */
  .showcase-visual {
    padding: 24px !important;
    overflow: hidden;
  }

  /* Testimonials – switch from 2‑column to single column */
  .section > .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* The right side with two testimonials – stack them */
  .testi-large {
    padding: 32px !important;
  }
}

/* ── REDUCE EMPTY SPACES ── */
/* Section vertical padding */
.section { padding: 80px 0 !important; }
.section-sm { padding: 56px 0 !important; }

/* Hero */
.hero-inner { padding: 120px 0 80px !important; }

/* Headers */
.section-header { margin-bottom: 48px !important; }

/* Cards & Cells */
.bento-cell { padding: 28px !important; }
.card { padding: 28px !important; }

/* Stats / Counters */
.stat-billboard-item { padding: 40px 28px !important; }
.counter-cell { padding: 32px 24px !important; }

/* Showcase (the "Enterprise AI, end to end" section) */
.showcase { padding: 48px 0 !important; }

/* Framework steps */
.framework-steps { margin-top: 40px !important; }

/* CTA Stripe */
.cta-stripe { padding: 80px 0 !important; }

/* Page Heroes (Services, Solutions, About, Cases headers) */
.svc-hero, .sol-hero, .about-hero,
#page-cases > div:first-child {
  padding: 120px 0 60px !important;
}

/* Carousel header */
.hcarousel-header { margin-bottom: 24px !important; }

/* Trust bar */
.trust-bar { padding: 32px 0 !important; }

/* Testimonial cards */
.testi-large { padding: 32px !important; }

/* ── MOBILE TIGHTENING ── */
@media (max-width: 768px) {
  .container { padding: 0 16px !important; }
  .bento-cell { padding: 20px !important; }
  .card { padding: 20px !important; }
  .hero-inner { padding: 100px 0 60px !important; }
  .section { padding: 60px 0 !important; }
  .showcase { padding: 32px 0 !important; }
  .stat-billboard-item { padding: 28px 20px !important; }
  .counter-cell { padding: 24px 16px !important; }
  .testi-large { padding: 24px !important; }
  .svc-hero, .sol-hero, .about-hero,
  #page-cases > div:first-child {
    padding: 100px 0 40px !important;
  }
}

@media (max-width: 480px) {
  .hero-headline { font-size: clamp(2.2rem, 10vw, 3rem) !important; }
  .h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
}

/* ── Make the 4 capability cards a carousel on mobile ── */
@media (max-width: 768px) {
  .cap-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 8px 16px 20px;
    margin: 0 -16px;          /* pull full‑width to the edges */
    width: auto;
    grid-template-columns: none !important;  /* override the grid */
  }

  .cap-grid .cap-card {
    flex: 0 0 80%;            /* cards take ~80% of the viewport width */
    min-width: 260px;
    scroll-snap-align: start;
    box-shadow: var(--shadow);
    margin: 0;                /* reset any existing margin */
  }

  /* subtle scrollbar styling (optional) */
  .cap-grid::-webkit-scrollbar {
    height: 4px;
  }
  .cap-grid::-webkit-scrollbar-thumb {
    background: var(--blue);
    border-radius: 100px;
  }
  .cap-grid::-webkit-scrollbar-track {
    background: var(--bg3);
    border-radius: 100px;
  }
}

/* Add this at the top of styles.css or verify it exists */
html, body {
  overflow-x: hidden;
}

/* Scroll down to your mobile media query and UPDATE the showcase fix */
@media (max-width: 768px) {
  /* Match BOTH variations (with and without space) to prevent the right-side cut-off */
  .section > .container > div[style*="grid-template-columns: 1fr 2fr"],
  .section > .container > div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Testimonials – switch from 2‑column to single column */
  .section > .container > div[style*="grid-template-columns: 1fr 1fr"],
  .section > .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Each showcase item that uses 1fr 1fr inside */
  .showcase {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 0 !important;
  }

  /* Ensure the visual area doesn't overflow */
  .showcase-visual {
    padding: 24px !important;
    overflow: hidden;
  }
}