#metconnect-root {
    --red:#E31E24;
    --black:#1B1B1B;
    --white:#FFFFFF;
    --gray-bg:#F5F5F5;
    --gray-text:#666666;
    font-family:'Inter',sans-serif;
    background:#FFFFFF;
    color:#1B1B1B;
    overflow-x:hidden;
    cursor:default;
  }
  #metconnect-root *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-scrolling iframe { pointer-events: none; }

  #metconnect-root h1, #metconnect-root h2, #metconnect-root h3, #metconnect-root h4, #metconnect-root .font-display{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:-0.02em;
  }
  ::selection{ background:#E31E24; color:#fff; }

  #metconnect-root a:focus-visible, #metconnect-root button:focus-visible{
    outline:2px solid #E31E24;
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    #metconnect-root *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- Nav ---------- */
  #nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    transition:background-color .5s ease, box-shadow .5s ease, padding .4s ease;
    padding:16px 0;
  }
  @media(min-width:768px){ #nav{ padding:26px 0; } }
  #nav.scrolled{
    background:rgba(27,27,27,0.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 30px rgba(0,0,0,0.25);
    padding:14px 0;
  }
  .nav-link{ position:relative; color:#fff; opacity:.82; }
  .nav-link::after{
    content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:#E31E24;
    transition:width .3s ease;
  }
  .nav-link:hover{ opacity:1; }
  .nav-link:hover::after, .nav-link.active::after{ width:100%; }

  /* ---------- Hero ---------- */
  #hero{
    position:relative; min-height:100svh; overflow:hidden;
    background:#1B1B1B;
    transform: translateZ(0);
  }
  .hero-slide{
    position:absolute; inset:0; opacity:0;
    background-size:cover; background-position:center;
    transform:scale(1.12) translateZ(0);
    transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
    will-change:opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .hero-slide.active{ opacity:1; animation:heroZoom var(--slide-duration,7s) linear forwards; z-index:1; }
  @keyframes heroZoom{ from{transform:scale(1.1) translateZ(0);} to{transform:scale(1.0) translateZ(0);} }

  .hero-bottom-gradient {
    position: absolute; bottom: 0; left: 0; right: 0; height: 50%; z-index: 2; pointer-events: none;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
  }

  @media (max-width: 767px) {
    .hero-overlay{
      position:absolute; inset:0; z-index:2; pointer-events: none;
      background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    }
    .hero-copy { text-shadow: 0 4px 24px rgba(0,0,0,0.8); }
  }

  .hero-copy{ transition:opacity .55s ease, transform .55s ease; }
  .hero-copy.switching{ opacity:0; transform:translateY(18px); }

  .hero-nav{
    position:absolute; left:0; right:0; bottom:26px; z-index:20;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  @media(min-width:768px){ .hero-nav{ justify-content:flex-start; left:auto; right:auto; margin-left:max(24px, calc(50% - 620px)); } }
  .hero-dot{
    position:relative; width:46px; height:3px; border-radius:3px; overflow:hidden;
    background:rgba(255,255,255,.25); cursor:pointer; border:none; padding:0;
  }
  .hero-dot-fill{
    position:absolute; inset:0; width:0%; background:#E31E24; border-radius:3px;
  }

  .hero-arrow{
    position:absolute; top:50%; z-index:20;
    width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transform: translateY(-50%);
    transition:background .3s ease, transform .2s ease, border-color .3s ease;
    user-select: none;
    cursor: pointer;
  }
  .hero-arrow:hover{ background:#E31E24; border-color:#E31E24; transform: translateY(-50%) scale(1.06); }
  .hero-arrow:active{ transform: translateY(-50%) scale(0.95); }
  .hero-arrow.prev{ left:20px; } .hero-arrow.next{ right:20px; }
  @media(max-width:767px){ .hero-arrow{ display:none; } }

  .hero-label{
    position:absolute; z-index:20; top:112px; right:24px;
    font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.55);
    display:none;
  }
  @media(min-width:768px){ .hero-label{ display:flex; align-items:center; gap:8px; top:120px; } }
  .hero-label .idx{ color:#fff; font-weight:600; }
  
  .hero-grain{
    position:absolute; inset:0; opacity:.05; pointer-events:none; z-index:3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
    padding:16px 32px; border-radius:100px; letter-spacing:.01em;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease;
    white-space:nowrap;
  }
  .btn-primary{ background:#E31E24; color:#fff; box-shadow:0 8px 24px rgba(227,30,36,.35);}
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(227,30,36,.5); }
  .btn-ghost{
    background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .btn-ghost:hover{ background:rgba(255,255,255,.15); transform:translateY(-3px); border-color:#fff;}
  .btn-dark{ background:#1B1B1B; color:#fff; }
  .btn-dark:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.35); }

  .magnetic{ will-change:transform; }

  /* ---------- Marquee chips ---------- */
  .marquee-track{
    display:flex; gap:14px; width:max-content;
    animation:marquee 26s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .chip{
    font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:500;
    padding:10px 22px; border-radius:100px; white-space:nowrap;
    background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.16); color:#fff;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .chip .dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:#E31E24; margin-right:8px; }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(46px); }

  /* ---------- Why cards ---------- */
  .why-card{
    background:#fff; border:1px solid #ECECEC; border-radius:22px; padding:34px 28px;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
    position:relative; overflow:hidden;
  }
  .why-card::before{
    content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
    background:linear-gradient(150deg, rgba(227,30,36,.06), transparent 60%);
  }
  .why-card:hover{ transform:translateY(-10px); box-shadow:0 24px 50px rgba(27,27,27,.12); border-color:rgba(227,30,36,.25); }
  .why-card:hover::before{ opacity:1; }
  .why-icon{
    width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:#1B1B1B; color:#fff; transition:background .45s ease, transform .45s ease;
  }
  .why-card:hover .why-icon{ background:#E31E24; transform:rotate(-6deg) scale(1.05); }

  /* ---------- Category blocks ---------- */
  .cat-card{
    position:relative; border-radius:26px; overflow:hidden; isolation:isolate;
    background:#1B1B1B; min-height:420px;
    transition:box-shadow .5s ease;
  }
  .cat-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 80%);
  }
  .cat-bg{
    position:absolute; inset:0; z-index:0;
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .cat-card:hover .cat-bg{ transform:scale(1.08); }
  .cat-pattern{
    position:absolute; inset:0; opacity:.5; z-index:0;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:22px 22px;
    mask-image:linear-gradient(180deg, transparent, black 60%);
  }
  .cat-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; }
  .cat-content h3 { text-shadow: 0 4px 12px rgba(0,0,0,0.7); }
  .cat-products{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .65s cubic-bezier(.2,.8,.2,1), opacity .45s ease, margin .45s ease;
  }
  .cat-card:hover .cat-products{ max-height:800px; opacity:1; margin-top:16px; }
  .cat-num{ font-family:'Space Grotesk',sans-serif; font-size:13px; color:rgba(255,255,255,.8); text-shadow: 0 2px 6px rgba(0,0,0,0.7); }

  /* ---------- Signature Products Grid (Full Width, 3-column) ---------- */
  .sig-prod-grid { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 1.25rem; 
  }
  @media (min-width: 1024px) {
    .sig-prod-grid { 
      grid-template-columns: repeat(3, minmax(0, 1fr)); 
      gap: 2rem; 
    }
  }

  /* hide scrollbar on carousels */
  .no-scrollbar::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .no-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; }

  /* ---------- Industry circles ---------- */
  .ind-circle{
    width:100%; aspect-ratio:1/1; border-radius:50%;
    background:#F5F5F5; display:flex; align-items:center; justify-content:center;
    transition:background .4s ease, transform .4s ease, box-shadow .4s ease;
    border:1px solid #ECECEC;
  }
  .ind-item:hover .ind-circle{ background:#1B1B1B; transform:translateY(-6px); box-shadow:0 16px 34px rgba(0,0,0,.18); }
  .ind-item:hover .ind-circle svg{ color:#E31E24; }
  .ind-circle svg{ color:#1B1B1B; transition:color .4s ease; }

  /* ---------- dark section ---------- */
  .dark-section{ background:#1B1B1B; color:#fff; position:relative; overflow:hidden;}
  .red-blur{
    position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none;
    background:#E31E24;
  }
  .check-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .check-mark{
    width:30px; height:30px; min-width:30px; border-radius:50%; background:rgba(227,30,36,.15);
    display:flex; align-items:center; justify-content:center; color:#E31E24;
  }

  /* ---------- USP split ---------- */
  .spare-card{
    background:#fff; border:1px solid #ECECEC; border-radius:16px; padding:18px;
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .spare-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(0,0,0,.1); border-color:rgba(227,30,36,.3); }

  /* ---------- process timeline ---------- */
  .timeline-line{
    position:absolute; top:29px; left:0; height:2px; background:#E5E5E5; right:0;
  }
  .timeline-line-fill{
    position:absolute; top:29px; left:0; height:2px; background:#E31E24; width:0%;
  }
  .step-dot{
    width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid #E5E5E5;
    display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600;
    position:relative; z-index:2; transition:border-color .4s ease, background .4s ease, color .4s ease, transform .4s ease;
  }
  .step.in-view .step-dot{ border-color:#E31E24; background:#E31E24; color:#fff; transform:scale(1.08); }

  /* ---------- counters ---------- */
  .counter-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; }

  /* ---------- testimonial ---------- */
  .testi-card{
    background:#fff; border:1px solid #ECECEC; border-radius:22px; padding:32px;
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .testi-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(0,0,0,.1); }

  /* ---------- final CTA particles ---------- */
  #particles-canvas{ position:absolute; inset:0; z-index:0; opacity: 0.25; }

  /* ---------- footer ---------- */
  footer{ background:#141414; color:#B9B9B9; }
  .footer-link{ transition:color .25s ease, padding-left .25s ease; }
  .footer-link:hover{ color:#fff; padding-left:4px; }

  /* ---------- mobile bottom bar ---------- */
  #mobile-bar{
    position:fixed; bottom:0; left:0; right:0; z-index:90;
    background:rgba(27,27,27,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(0,0,0,.25);
  }
  @media (max-width:767px){ #mobile-bar{ display:flex; } #metconnect-root{ padding-bottom:78px; } }

  /* scrollbar */
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:#fff; }
  ::-webkit-scrollbar-thumb{ background:#D5D5D5; border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover{ background:#E31E24; }

  .section-eyebrow{
    font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.14em; font-weight:600;
    color:#E31E24; text-transform:uppercase;
  }

  .split-heading{
    font-size:clamp(40px,7vw,84px); line-height:0.98; font-weight:700;
  }

  #loader{
    position:fixed; inset:0; z-index:9999; background:#1B1B1B;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
    transition:opacity .7s ease, visibility .7s ease;
  }
  #loader .loader-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; color:#fff; letter-spacing:.02em;}
  #loader .loader-logo span{ color:#E31E24; }
  .loader-bar{ width:180px; height:2px; background:rgba(255,255,255,.15); overflow:hidden; border-radius:2px;}
  .loader-bar-fill{ height:100%; width:0%; background:#E31E24; }

  .logo-img {
    height: 40px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
  }
  #loader img {
    height: 50px !important;
    width: auto !important;
    max-width: 250px !important;
    object-fit: contain !important;
  }

/* Elementor widget wrapper fixes */
.metconnect-widget { font-family:'Inter',sans-serif; color:#1B1B1B; }
.metconnect-widget .font-display{ font-family:'Space Grotesk',sans-serif; }
.elementor-widget-metconnect-full-landing #metconnect-root{ overflow-x:hidden; }

/* ================= MetConnect: Industries (exact original) ================= */
.mc-container{max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem;}
@media(min-width:768px){.mc-container{padding-left:2.5rem;padding-right:2.5rem;}}
.mc-industries{padding:6rem 0;}
.mc-industries .mc-heading,.mc-signature .mc-heading{line-height:.98;letter-spacing:-.02em;}
.mc-ind-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;}
.ind-item{text-align:center;}
.ind-circle{width:100%;aspect-ratio:1/1;border-radius:50%;background:#F5F5F5;border:1px solid #ECECEC;display:flex;align-items:center;justify-content:center;transition:background .4s ease,transform .4s ease,box-shadow .4s ease;}
.ind-circle svg{color:#1B1B1B;transition:color .4s ease;}
.ind-circle img{object-fit:contain;}
.mc-industries .ind-item:hover .ind-circle{background:#1B1B1B;}
.mc-industries.mc-lift .ind-item:hover .ind-circle{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.18);}
.mc-industries .ind-item:hover .ind-circle svg{color:#E31E24;}
.ind-label{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;line-height:1.4;color:#1B1B1B;margin:14px 0 0;}

/* ================= MetConnect: Signature Products (exact original) ================= */
.mc-signature{padding:6rem 0;}
.mc-sig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;align-items:stretch;}
@media(max-width:1023px){.mc-sig-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}}
.sig-prod-card{background:#FFFFFF;border:1px solid #EDEDED;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;height:100%;}
.mc-sig-slider{position:relative;overflow:hidden;}
.mc-sig-slider::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 60%,rgba(255,255,255,1) 100%);pointer-events:none;z-index:10;}
.mc-sig-slides{position:relative;aspect-ratio:4/5;overflow:hidden;background:#F5F5F5;}
.mc-sig-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;}
.mc-sig-slide.is-active{opacity:1;z-index:1;}
.mc-sig-slider[data-transition="slide"] .mc-sig-slides{display:flex;transition:transform .65s cubic-bezier(.4,0,.2,1);}
.mc-sig-slider[data-transition="slide"] .mc-sig-slide{position:relative;inset:auto;flex:0 0 100%;width:100%;max-width:100%;opacity:1;transition:none;z-index:auto;}
.mc-sig-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:20;}
.mc-sig-dot{width:20px;height:4px;border-radius:999px;background:rgba(255,255,255,.75);border:0;padding:0;cursor:pointer;transition:background .3s ease;}
.mc-sig-dot.is-active{background:#E31E24;}
.mc-sig-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:32px;height:32px;border-radius:9999px;background:rgba(255,255,255,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#FFFFFF;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .15s ease;}
.mc-sig-arrow svg{width:20px;height:20px;}
.mc-sig-prev{left:8px;}
.mc-sig-next{right:8px;}
@media(min-width:768px){.mc-sig-arrow{opacity:0;}.sig-prod-card:hover .mc-sig-arrow{opacity:1;}}
.sig-prod-body{padding:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;}
.sig-prod-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em;color:#1B1B1B;margin:0 0 12px;line-height:1.3;}
@media(min-width:768px){.sig-prod-name{font-size:17px;}}
.sig-prod-cta{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:#E31E24;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:color .2s ease;}
.sig-prod-cta svg{width:16px;height:16px;}
.sig-prod-cta:hover{color:#1B1B1B;}

/* ================= MetConnect: Final CTA (style defaults; typography controls override) ================= */
.mc-final-cta .mc-cta-heading{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#FFFFFF;font-size:clamp(34px,6vw,64px);line-height:1.05;margin:0;letter-spacing:-.02em;}
.mc-final-cta .mc-cta-desc{color:rgba(255,255,255,.6);font-size:18px;line-height:1.6;margin:24px 0 0;}
.mc-final-cta .mc-cta-btns{margin-top:40px;}
.mc-final-cta .mc-btn-call{background:#E31E24;color:#FFFFFF;}
.mc-final-cta .mc-btn-wa{border:1px solid rgba(255,255,255,.2);color:#FFFFFF;background:transparent;}

/* ================= MetConnect: Hero — mobile exact match (desktop untouched) ================= */
@media (max-width: 767px){
  .metconnect-hero{ transform:translateZ(0); }
  /* Buttons: exact icon gap (Tailwind gap-2 would otherwise shrink it) */
  .metconnect-hero .btn{ gap:10px; }
  /* Slide dots: exact 10px gap, centered */
  .metconnect-hero .hero-nav{ gap:10px; justify-content:center; }
  /* Marquee chips: exact padding / bg / border / timing of the original site */
  .metconnect-hero .marquee-track{ gap:14px; animation:marquee 26s linear infinite; }
  .metconnect-hero .chip{
    display:inline-flex; align-items:center; gap:0;
    font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:500; line-height:1;
    padding:10px 22px; border-radius:100px; color:#fff; white-space:nowrap;
    background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .metconnect-hero .chip .dot{ width:5px; height:5px; margin-right:8px; }
}