.proc-triangles-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}

.proc-triangles-bg svg{
  width:100%;
  height:8%;
  display:block;
  margin-right:-150px;
}

.proc-triangles-bg{
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.086) 25%,
    rgba(0,0,0,0.150) 55%,
    rgba(0,0,0,0.300) 65%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.086) 25%,
    rgba(0,0,0,0.150) 55%,
    rgba(0,0,0,0.300) 65%
  );
}

.proc-triangles-bg polygon{
  opacity:0.9;
}

/* ==================== MANUFACTURING HERO ====================== */

.manu-hero{
  position:relative;
  height:320px;
  border-radius:20px;
  margin:10px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  margin-bottom:25px;
  background:url('../images/factory_machinery.png') center/cover no-repeat;
}

.manu-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.2) 100%
  );
}

.manu-hero-content{
  position:relative;
  z-index:2;
  padding:0 40px;
  display:flex;
  align-items:flex-end;
  gap:40px;
}

.manu-hero h1{
  font-size:74px;
  font-weight:800;
  color:#fff;
  font-style:italic;
  margin-bottom:10px;
  letter-spacing:1px;
  white-space:nowrap;
}

.manu-hero p{
  font-size:16px;
  line-height:1.3;
  max-width:520px;
  margin-bottom:30px;
  color:rgba(255,255,255,0.85);
}


/* =====================================================================
   PROCESS — Cinematic Storytelling Section
   ===================================================================== */

:root {
  --proc-bg:        #e0f4ff;
  --proc-surface:   #ffffff;
  --proc-border:    #242b33;
  --proc-blue:      #076fd2;
  --proc-blue-dim:  #0770d24f;
  --proc-blue-glow: #0770d227;
  --proc-white:     #2D4054;
  --proc-muted:     rgba(0,33,76,0.755);
  --proc-accent:    #e05c2a;
  --proc-radius:    16px;
  --proc-max:       1140px;
}

.proc-cursor-glow {
  pointer-events:none;
  position:fixed;
  top:0; left:0;
  width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, var(--proc-blue) 0%, transparent 70%);
  opacity:0.09;
  transform:translate(-50%,-50%);
  z-index:0;
  mix-blend-mode:screen;
  will-change:transform;
}

.proc-section {
  position:relative;
  background:var(--proc-bg);
  overflow:hidden;
  font-family:'DM Sans', sans-serif;
  color:var(--proc-white);
}

.proc-orb {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(90px);
  will-change:transform;
}

/* ── INTRO ── */
.proc-intro {
  position:relative;
  z-index:2;
  padding:40px 60px 80px;
  max-width:var(--proc-max);
  margin:0 auto;
}

.proc-intro__line {
  display:block;
  height:3px;
  width:72px;
  background:var(--proc-blue);
  margin-bottom:28px;
  transform:scaleX(0);
  transform-origin:left;
  visibility:hidden;
}

.proc-intro__label {
  display:inline-block;
  font-family:'DM Sans', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--proc-blue);
  font-style:italic;
  margin-bottom:20px;
  transform:translateY(20px);
}

.proc-intro__heading {
  font-family:'Bebas Neue','Impact',sans-serif;
  font-size:clamp(56px, 8vw, 108px);
  font-weight:400;
  line-height:0.92;
  letter-spacing:2px;
  color:var(--proc-white);
  margin-bottom:28px;
  transform:translateY(30px);
}

.proc-intro__heading em {
  font-style:italic;
  color:var(--proc-blue);
}

.proc-step__glyph img{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  opacity:1;
  transition:all 0.3s ease;
}

.proc-step:hover .proc-step__glyph img{
  opacity:1;
  transform:scale(1.1);
}

.proc-intro__sub {
  font-size:17px;
  line-height:1.65;
  max-width:560px;
  margin-bottom:0;
  color:var(--proc-muted);
  transform:translateY(20px);
}

/* ── STEPS WRAPPER ── */
.proc-steps-wrap {
  position:relative;
  z-index:2;
  padding:0 60px 40px;
  max-width:var(--proc-max);
  margin:0 auto;
}

#proc-connector-svg {
  position:absolute;
  left:110px;
  top:0;
  width:4px;
  height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}

#proc-connector-svg path {
  stroke:#5b5b5b55;
  stroke-width:2;
  filter:drop-shadow(0 0 2px rgba(0,0,0,0.2));
}

/* ── INDIVIDUAL STEP ── */
.proc-step {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:80px 1fr auto;
  align-items:start;
  gap:0 36px;
  padding:52px 0;
  border-bottom:1px solid var(--proc-border);
  cursor:default;
  transition:background 0.3s;
}
.proc-step:last-child { border-bottom:none; }
.proc-step:hover { background:rgba(255,255,255,0.504); border-radius:var(--proc-radius); }

.proc-step__num {
  font-family:'Bebas Neue',sans-serif;
  font-size:64px;
  line-height:1;
  color:var(--proc-blue);
  opacity:0.35;
  letter-spacing:1px;
  align-self:start;
  transition:opacity 0.3s;
  margin-left:-50px;
}
.proc-step:hover .proc-step__num { opacity:0.7; }

.proc-step__body { display:flex; flex-direction:column; gap:10px; }

.proc-step__bar {
  height:2px;
  width:48px;
  background:var(--proc-blue);
  margin-bottom:4px;
  transform:scaleX(0);
  transform-origin:left;
}

.proc-step__name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(32px, 4.5vw, 54px);
  letter-spacing:1.5px;
  color:var(--proc-white);
  line-height:1;
}

.proc-step__desc {
  font-size:15px;
  line-height:1.7;
  color:var(--proc-muted);
  max-width:520px;
}

.proc-step__tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:5px 14px;
  border:1px solid var(--proc-blue);
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  font-style:italic;
  text-transform:uppercase;
  color:var(--proc-blue);
  width:fit-content;
}

.proc-step__glyph {
  font-size:42px;
  line-height:1;
  opacity:0.18;
  align-self:center;
}
.proc-step:hover .proc-step__glyph { opacity:0.55; filter:grayscale(0); }

/* ── BRANCH ── */
.proc-branch {
  position:relative;
  z-index:2;
  max-width:var(--proc-max);
  margin:0 auto;
  padding:48px 60px;
  border-top:1px solid var(--proc-border);
  border-bottom:1px solid var(--proc-border);
}

.proc-branch__title {
  font-family:'Bebas Neue',sans-serif;
  font-size:13px;
  letter-spacing:5px;
  color:var(--proc-blue);
  font-style:italic;
  text-transform:uppercase;
  margin-bottom:36px;
}

.proc-branch__grid {
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  align-items:center;
}

.proc-branch__arm {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.proc-branch__arm--right { align-items:flex-end; text-align:right; }

.proc-branch__node {
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;
  letter-spacing:1px;
  color:var(--proc-white);
  padding:14px 22px;
  border:1px solid var(--proc-border);
  border-radius:var(--proc-radius);
  background:var(--proc-surface);
}

.proc-branch__node--blue {
  border-color:var(--proc-blue);
  color:var(--proc-blue);
  background:var(--proc-blue-dim);
}

.proc-branch__label {
  font-size:12px;
  letter-spacing:1px;
  color:var(--proc-muted);
  transform:translateY(8px);
}

.proc-branch__center {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.proc-branch__fork-line {
  width:2px;
  height:60px;
  background:linear-gradient(to bottom, var(--proc-blue), transparent);
  opacity:0.5;
}

.proc-branch__fork-icon {
  font-size:22px;
  color:var(--proc-blue);
  opacity:0.7;
}

/* ── STATS ── */



/* ── BENTO ── */
.proc-bento{
  padding:80px 0;
}

.bento-grid{
  max-width:1500px;
  margin:auto;
  margin-right:-110px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:20px;
}

.bento-card{
  background:#ffffff;
  border-radius:18px;
  padding:40px;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.bento-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.bento-big  { grid-column:span 4; grid-row:span 2; z-index:5; }
.bento-mid  { grid-column:span 4; }
.bento-wide { grid-column:span 4; }

.bento-card:not(.bento-big):not(.bento-mid):not(.bento-wide){
  grid-column:span 2;
}

.bento-card h2{
  font-size:48px;
  font-weight:800;
  color:#076FD2;
  margin-bottom:10px;
}

.bento-card span{
  display:block;
  font-size:28px;
  font-weight:700;
  color:#076FD2;
  margin-bottom:10px;
}

.bento-card p{
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#5b6b7c;
}

.bento-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(7,111,210,0.08), transparent);
  opacity:0;
  transition:0.3s;
}
.bento-card:hover::before{ opacity:1; }

/* ── OUTRO ── */
.proc-outro {
  position:relative;
  z-index:2;
  padding:40px 60px 100px;
  max-width:var(--proc-max);
  margin:0 auto;
  text-align:center;
}

.proc-outro__eyebrow {
  font-size:11px;
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--proc-blue);
  font-style:italic;
  margin-bottom:24px;
}

.proc-outro__title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(44px, 6vw, 76px);
  letter-spacing:2px;
  line-height:0.95;
  color:#2D4054;
  margin-bottom:28px;
}

.proc-outro__body {
  font-size:17px;
  line-height:1.7;
  color:var(--proc-muted);
  max-width:560px;
  margin:0 auto 48px;
}

.proc-outro__badges {
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.proc-outro__badge {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border:1px solid var(--proc-border);
  border-radius:var(--proc-radius);
  background:var(--proc-surface);
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--proc-muted);
  transition:border-color 0.3s, color 0.3s;
}
.proc-outro__badge:hover {
  border-color:var(--proc-blue);
  color:var(--proc-blue);
}
.proc-outro__badge .badge-icon { font-size:20px; }


/* ===================== PRODUCT SLIDER ======================= */

.vigro-product-slider{
  padding:40px 0 0;
}

/* Outer breakout — clips the track */
.product-slider-full{
  width:110vw;
  overflow:hidden;       /* ONLY overflow:hidden here — no scroll */
  position:relative;
}

/* Wrapper — NO overflow/scroll; just aligns content & handles cursor */
.product-slider-wrapper{
  padding-left:calc((110vw - 1840px) / 2);
  cursor:grab;
  user-select:none;      /* prevents text highlight on drag */
  -webkit-user-select:none;
}
.product-slider-wrapper:active{
  cursor:grabbing;
}

/* Track — GPU-composited, no layout shift */
.product-slider{
  display:flex;
  gap:20px;
  will-change:transform;
}

/* CARD */
.product-slide{
  flex:0 0 auto;
  width:400px;
  background:#fff;
  border-radius:16px;
  padding:20px;
  text-decoration:none;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.product-slide img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
  pointer-events:none;   /* stops browser native image drag */
  user-select:none;
  -webkit-user-select:none;
}

.product-slide h3{
  font-size:16px;
  color:#1c2b3a;
}

.product-slide:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
}


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .proc-intro,
  .proc-steps-wrap,
  .proc-branch,
  .proc-stats,
  .proc-outro { padding-left:24px; padding-right:24px; }

  .proc-step {
    grid-template-columns:56px 1fr;
  }
  .proc-step__glyph { display:none; }
  .proc-step__num { font-size:44px; }

  #proc-connector-svg { left:72px; }

  .proc-branch__grid { grid-template-columns:1fr 48px 1fr; }

  .proc-stats__grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 480px) {
  .proc-stats__grid { grid-template-columns:1fr; }
  .proc-branch__grid { display:flex; flex-direction:column; gap:24px; }
  .proc-branch__arm--right { align-items:flex-start; text-align:left; }
}

/* ══════════════════════════════════════════════════════════════
   EXTENDED MOBILE RESPONSIVE — appended (original CSS untouched)
   ══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
@media (max-width: 768px) {
  .manu-hero {
    height: 220px;
    margin: 8px;
    border-radius: 14px;
    margin-bottom: 18px;
    align-items: flex-end;
  }

  .manu-hero-content {
    padding: 0 20px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .manu-hero h1 {
    font-size: 28px;
    white-space: normal;
    margin-bottom: -6px;
  }

  .manu-hero p {
    font-size: 8px;
    margin-bottom: 0px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .manu-hero {
    height: 180px;
    margin: 6px;
    border-radius: 10px;
  }

  .manu-hero h1 {
    font-size: 28px;
  }

  .manu-hero p {
    font-size: 10px;
    line-height: 1.4;
  }
}

/* ── PROCESS INTRO ── */
@media (max-width: 768px) {
  .proc-intro {
    padding: 28px 24px 48px;
  }

  .proc-intro__heading {
    font-size: clamp(40px, 11vw, 64px);
  }

  .proc-intro__sub {
    font-size: 15px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .proc-intro__heading {
    font-size: clamp(34px, 13vw, 52px);
  }

  .proc-intro__label {
    font-size: 10px;
  }
}

/* ── PROCESS STEPS ── */
@media (max-width: 768px) {
  .proc-steps-wrap {
    padding: 0 24px 50px;
  }

  .proc-step {
    gap: 0 20px;
    padding: 36px 0;
  }

  .proc-step__name {
    font-size: clamp(26px, 6vw, 40px);
  }

  .proc-step__desc {
    font-size: 14px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .proc-step {
    grid-template-columns: 44px 1fr;
    gap: 0 14px;
    padding: 28px 0;
  }

  .proc-step__num {
    font-size: 36px;
    margin-left: -10px;
  }

  .proc-step__name {
    font-size: clamp(22px, 7vw, 34px);
  }

  #proc-connector-svg {
    left: 54px;
  }
}

/* ── BRANCH ── */
@media (max-width: 768px) {
  .proc-branch {
    padding: 32px 24px;
  }

  .proc-branch__node {
    font-size: 18px;
    padding: 10px 14px;
  }
}

/* ── BENTO GRID ── */
@media (max-width: 1024px) {
  .bento-grid {
    margin-right: 0;
    grid-template-columns: repeat(6, 1fr);
    padding: 0 24px;
  }

  .bento-big  { grid-column: span 6; grid-row: span 1; }
  .bento-mid  { grid-column: span 3; }
  .bento-wide { grid-column: span 3; }

  .bento-card:not(.bento-big):not(.bento-mid):not(.bento-wide) {
    grid-column: span 3;
  }
}

@media (max-width: 768px) {
  .proc-bento {
    padding: 40px 0;
  }

    .bento-grid{
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }

  /* Keep big + 892 full width */
  .bento-big,
  .bento-892{
    grid-column: span 3;
  }

  /* 👇 These 3 become 1 column each */
  .bento-card:not(.bento-big):not(.bento-892){
    grid-column: span 1;
  }
 

  .bento-card {
    padding: 24px 20px;
    border-radius: 14px;
    z-index: 5;
  }

  .bento-card h2 {
    font-size: 34px;
  }

  .bento-card span {
    font-size: 20px;
  }

  .bento-card p {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 21fr;
    gap: 10px;
  }

  .bento-big,
  .bento-mid,
  .bento-wide,
  .bento-card:not(.bento-big):not(.bento-mid):not(.bento-wide) {
    grid-column: span 1;
  }
}

/* ── PRODUCT SLIDER ── */
@media (max-width: 768px) {
  .vigro-product-slider {
    padding: 24px 0 0;
  }

  .product-slider-full {
    width: 100vw;
  }

  .product-slider-wrapper {
    padding-left: 16px;
  }

  .product-slide {
    width: 260px;
  }

  .product-slide img {
    height: 180px;
  }

  .product-slide h3 {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .product-slide {
    width: 220px;
    padding: 14px;
  }

  .product-slide img {
    height: 150px;
    border-radius: 8px;
  }
}

/* ── STEP GLYPH IMAGE ── */
@media (max-width: 768px) {
  .proc-step__glyph img {
    width: 120px;
    height: 120px;
  }
}

/* ── OUTRO ── */
@media (max-width: 768px) {
  .proc-outro {
    padding: 32px 24px 60px;
  }

  .proc-outro__title {
    font-size: clamp(36px, 9vw, 56px);
  }

  .proc-outro__body {
    font-size: 15px;
    max-width: 100%;
  }

  .proc-outro__badges {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .proc-outro__badge {
    padding: 10px 20px;
    font-size: 12px;
  }
}

/* ── TRIANGLES BG ── */
@media (max-width: 768px) {
  .proc-triangles-bg svg {
    height: 6%;
    margin-right: 0;
  }
}

/* ── CURSOR GLOW (disable on touch) ── */
@media (hover: none) {
  .proc-cursor-glow {
    display: none;
  }
}

/* ================= BENTO SMALL CARDS — 3 IN 1 ROW ON MOBILE (appended) ================= */
@media (max-width: 480px) {

  /* Fix the typo (21fr → 3 cols) and keep 3-col grid */
  .bento-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Big cards stay full width */
  .bento-big,
  .bento-mid,
  .bento-892 {
    grid-column: span 3 !important;
  }

  /* 130+, 2, 5 — each takes 1 column → 3 in a row */
  .bento-card:not(.bento-big):not(.bento-mid):not(.bento-892) {
    grid-column: span 1 !important;
    padding: 16px 10px !important;
  }

  .bento-card:not(.bento-big):not(.bento-mid):not(.bento-892) h2 {
    font-size: 24px !important;
  }

  .bento-card:not(.bento-big):not(.bento-mid):not(.bento-892) p {
    font-size: 10px !important;
  }
}


/* ================= BENTO-BIG INNER CARDS — 2 IN 1 ROW ON MOBILE ================= */
@media (max-width: 768px) {

  .bento-big {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .bento-big .bento-card {
    grid-column: span 1 !important;
    margin: 0 !important;
  }
}


/* ================= BENTO-892 CENTERED CONTENT ================= */
.bento-892 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* hide by default */
.prod-arrow{
  display:none;
}

/* mobile only */
@media (max-width: 768px){

  .product-slider-full{
    position:relative;
  }

  .prod-arrow{
    display:flex;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:18px;
    z-index:10;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  .prod-arrow.left{ left:8px; }
  .prod-arrow.right{ right:8px; }

}