/* ════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════ */
:root {
  --white:        #ffffff;
  --paper:        #f6f7f2;
  --paper-deep:   #edf0e6;
  --rule:         #cdd6bb;
  --rule-light:   #e4ead9;
  --mid:          #8fa07a;
  --text-muted:   #28321e;
  --text-body:    #2e3826;
  --forest:       #1e3a1e;
  --forest-deep:  #152515;
  --forest-mid:   #274527;
  --accent:       #c8860a;
  --accent-lt:    #f5e8cc;
  --ink:          #111a0e;
}


/* ===== PREMIUM CARD ANIMATION ===== */

.tech-card {
  opacity: 0;
  transform: translateY(70px) scale(0.95);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease-out;
  will-change: transform, opacity;
}

.tech-card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* ===== HOVER LIGHT EFFECT ===== */

.tech-card{
  position:relative;
  overflow:hidden;
}

.tech-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.12), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
}

.tech-card:hover::after{
  opacity:1;
}
.tech-card{
  transition:transform .25s ease, box-shadow .25s ease;
}

.tech-card:hover{
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}



/* ===== BENEFITS ANIMATION ===== */

.benefit-card{
  opacity:0;
  transform:translateY(40px);
  transition:all .6s cubic-bezier(.4,0,.2,1);
}

/* alternate direction */
.benefit-card:nth-child(odd){
  transform:translateX(-40px);
}
.benefit-card:nth-child(even){
  transform:translateX(40px);
}

.benefit-card.show{
  opacity:1;
  transform:translateX(0);
}

/* icon pop */
.benefit-card .bc-icon{
  transition:transform .4s ease;
}

.benefit-card.show .bc-icon{
  transform:scale(1.2);
}

/* ===== SCROLL PROGRESS BAR ===== */

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:var(--accent);
  z-index:9999;
  transition:width .1s linear;
}
/* ===== TEXT REVEAL ANIMATION ===== */

.reveal-text{
  opacity:0;
  transform:translateY(30px);
  transition:all .7s cubic-bezier(.4,0,.2,1);
}

.reveal-text.show{
  opacity:1;
  transform:translateY(0);
}.tech-points.reveal-text{
  transition-delay:.2s;
}



/* ===== CURSOR SPOTLIGHT ===== */

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:radial-gradient(
    circle 300px at var(--x,50%) var(--y,50%),
    rgba(255,255,255,0.08),
    transparent 70%
  );
  z-index:999;
  transition:background .1s;
}



/* ════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Barlow', sans-serif;
  background: var(--white);
  color: var(--text-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }


.header-main,
.navbar {
  background: #fff !important
}

.header-main a,
.navbar a,
header a {
  color: #0b1b2b !important
}
header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08)
}

/* ════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
════════════════════════════════════════════ */
.label {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase;
  color: var(--accent);
}
.label-line {
  display:inline-flex; align-items:center; gap:10px;
}
.label-line::before {
  content:'';
  display:block; width:32px; height:2px;
  background: var(--accent); flex-shrink:0;
}


.key-facts{
  padding:40px 0;
}


p.body-copy {
  font-size:15px; font-weight:400; line-height:1.85;
  color:#040404;
}
.tech-points{
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.tech-points li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
  font-size:15px;
  line-height:1.8;
  color:var(--text-muted);
}

.tech-points li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-size:18px;
  line-height:1.6;
}

.tech-points li:last-child{
  margin-bottom:0;
}

@media (max-width:768px){
  .tech-points li{
    font-size:14px;
    line-height:1.7;
  }
}
h1, h2, h3, h4 {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:1;
  color: var(--ink);
}
h1 { font-size: clamp(52px, 7vw, 65px); line-height:0.92; }
h2 { font-size: clamp(34px, 4vw, 52px); }
h3 { font-size: clamp(22px, 2.4vw, 32px); }
h4 { font-size:18px; }

.serif-pull {
  font-family:'DM Serif Display', serif;
  font-style:italic;
  font-size: 18px;
  line-height:1.55;
  font-weight:400;
  color: var(--forest);
  letter-spacing:0;
}

p.lead {
  font-size:18px; font-weight:400; line-height:1.8;
  color: var(--text-muted);
}


/* ════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════ */
.section-inner { max-width:1280px; margin:0 auto; padding:0 80px; }

.btn {
  display:inline-block;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:12px 8px;
  transition: background 0.22s, color 0.22s, transform 0.18s;
}
.btn-dark:hover { background:var(--forest); color:var(--white); }
.btn-dark { background:var(--accent); transform:translateY(-2px); }
.btn-outline { border:1.5px solid var(--forest); color:var(--forest); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }



/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero {
  padding-top:100px;
  min-height:100vh;
  background:var(--white);
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  overflow:hidden;
}

/* ghost grid lines */
.hero::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--rule-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-light) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:0.5;
  pointer-events:none;
}

.hero-left {
  position:relative; z-index:1;
  padding:0px 10px 80px 80px;
  display:flex; flex-direction:column; justify-content:center;
}
/* large ghost number */
.hero-ghost {
  position:absolute; top:-20px; left:-10px;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:36vw; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--rule-light);
  user-select:none; pointer-events:none;
  letter-spacing:-0.06em;
  z-index:0;
}

.hero-meta {
  display:flex; gap:24px; align-items:center;
  margin-bottom:36px; position:relative; z-index:1;
}
.hero-tag {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:5px 14px; border:1px solid var(--accent);
  color:var(--accent);
}


.hero h1 { position:relative; z-index:1; margin-bottom:10px; }
.hero h1 em {
  font-style:normal;
  color:var(--accent);
  display:block;
}
.hero-sub {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:500; font-size:clamp(16px, 2vw, 22px);
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--mid); margin-bottom:32px;
  position:relative; z-index:1;
}
.hero-desc {
  font-size:16px; font-weight:400; line-height:1.8;
  color:var(--text-muted); max-width:480px;
  margin-bottom:48px; position:relative; z-index:1;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }

.hero-right {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  padding:6px 0px 80px 50px !important;
  gap:40px;
}

/* Key facts panel */
.key-facts-title {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mid); margin-bottom:20px;
  margin-top: 35px;
}
.key-facts{
  background:var(--paper);
  border:1px solid var(--rule);
  padding:32px 28px;
  border-bottom: 1px solid var(--rule-light);
}
.key-fact {
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--rule);
}
.key-fact:last-child { border-bottom:none; }
.kf-num {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:28px; color:var(--accent);
  line-height:1; flex-shrink:0; width:48px;
  letter-spacing:0.01em;
}
.kf-text h4 {
  font-size:19px; font-weight:700;
  letter-spacing:0.01em; text-transform:uppercase;
  margin-bottom:4px; color:var(--ink);
}
.kf-text p {
  font-size:15px; font-weight:400;
  line-height:1.65; color:var(--text-muted);
}

/* scroll indicator */
.scroll-hint {
  position:absolute; bottom:36px; left:80px;
  display:flex; align-items:center; gap:12px;
  z-index:2;
}
.scroll-hint-line {
  width:1px; height:48px; background:var(--rule);
  position:relative; overflow:hidden;
}
.scroll-hint-line::after {
  content:''; position:absolute; top:-100%;
  left:0; right:0; height:100%;
  background:var(--accent);
  animation: scrollDrop 1.8s ease infinite;
}
@keyframes scrollDrop {
  0%   { top:-100%; }
  50%  { top:100%; }
  100% { top:100%; }
}
.scroll-hint-label {
  font-family:'Barlow Condensed', sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mid);
  writing-mode:vertical-rl;
}

/* ════════════════════════════════════════════
   TICKER STRIP
════════════════════════════════════════════ */
.ticker {
  background:var(--forest);
  margin-top: -5px;
  border-top:2px solid var(--accent);
  padding:15px 0; overflow:hidden;
}
.ticker-inner {
  display:flex; gap:0; white-space:nowrap;
  animation: crawl 32s linear infinite;
}
@keyframes crawl {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.ticker-chip {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--white); padding:0 36px;
}
.ticker-chip b { color:var(--accent); margin-right:8px; }

/* ════════════════════════════════════════════
   SECTION: WHAT IS
════════════════════════════════════════════ */
.what-is {
  padding:40px 0;
  background:var(--white);
  border-bottom:1px solid var(--rule-light);
}


.what-is-grid {
  display:grid; grid-template-columns:5fr 7fr;
  gap:80px; align-items:start;
}
.sticky-label {
  position:sticky; top:120px;
}
.what-is-body { display:flex; flex-direction:column; gap:10px; }

.pull-quote {
  border-left:3px solid var(--accent);
  padding:24px 28px;
  background:var(--paper);
  margin:8px 0;
}


.ps-content h4 {
  font-size:16px; font-weight:700;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--ink); margin-bottom:8px;
}
.ps-content p {
  font-size:15px; font-weight:400;
  line-height:1.75; color:var(--text-muted);
}

/* ════════════════════════════════════════════
   SECTION: TECHNOLOGIES
════════════════════════════════════════════ */
.technologies {
  padding:40px 0;
  background:var(--paper);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.tech-header {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:end; margin-bottom:58px;
}

.tech-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--rule);
  border:1px solid var(--rule);
  margin-top: -39px;
}
.tech-card {
  background:var(--white);
  padding:27px 32px;
  transition:background 0.26s;
  cursor:default;
  position:relative;
  overflow:hidden;
}
.tc-icon{
  margin-top: 12px;
  margin-bottom: 43px;
}

.tc-icon i{
  font-size:30px;
  color:var(--accent);
  transition:.3s ease;
  display:inline-block;
  margin-top: 20px;
}

.tech-card:hover .tc-icon i{
  color:var(--white);
  transform:translateY(-4px) scale(1.08);
}
.tech-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s ease;
  margin-bottom: 10px;
}
.tech-card:hover::before { transform:scaleX(1); }
.tech-card:hover { background:var(--forest-deep); }
.tech-card:hover .tc-num,
.tech-card:hover .tc-title,
.tech-card:hover .tc-body { color:var(--white); }
.tech-card:hover .tc-body { color:rgba(255,255,255,0.6); }

.tc-num {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mid); 
  transition:color 0.26s;
}
.tc-icon {
  width:36px; height:2px; background:var(--accent);
  margin-bottom:20px;
}
.tc-title {
  font-size:20px; font-weight:600;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--ink); margin-bottom:14px;
  transition:color 0.26s;
  font-family: 'Barlow Condensed', sans-serif;
  margin-top: 61px;
  
}
.tc-body {
  font-size:15px; font-weight:400;
  line-height:1.75; color:var(--text-muted);
  transition:color 0.26s;
  margin-top: -7px
}



/* ════════════════════════════════════════════
   SECTION: HOW IT WORKS
════════════════════════════════════════════ */
.how {
  padding:40px 0;
  background:var(--forest-deep);
  position:relative; overflow:hidden;
}
.how::before {
  content:'HOW';
  position:absolute; bottom:-60px; right:-20px;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:40vw; line-height:1;
  color:transparent; -webkit-text-stroke:1px #1c361c;
  user-select:none; pointer-events:none;
  letter-spacing:-0.06em;
}
.how .label { color:var(--accent); }
.how h2 { color:var(--white); }
.how-header { margin-bottom:20px; }

.timeline { display:flex; flex-direction:column; gap:0; position:relative; }
.timeline::before {
  content:''; position:absolute;
  left:40px; top:0; bottom:0;
  width:1px; background:var(--forest-mid);
}
.tl-item {
  display:grid; grid-template-columns:80px 1fr;
  gap:5px; padding:0 0 37px; position:relative;
}
.tl-item:last-child { padding-bottom:0; }
.tl-dot-wrap {
  display:flex; justify-content:center;
  position:relative; z-index:1;
}
.tl-dot {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--forest-mid);
  background:var(--forest-deep);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s, background 0.2s;
  flex-shrink:0;
  margin-top:4px;
}
.tl-item:hover .tl-dot {
  border-color:var(--accent);
  background:var(--accent);
}
.tl-inner {
  padding-bottom:0;
}
.tl-step-num {
  font-family:'Barlow Condensed', sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:white; margin-bottom:10px;
}
.tl-inner h3 {
  color:var(--white); font-size:22px;
  font-weight:700; letter-spacing:0.01em;
  text-transform:uppercase; margin-bottom:12px;
}
.tl-inner p {
  font-size:15px; font-weight:400;
  line-height:1.8; color:#ffffff;
}

/* ════════════════════════════════════════════
   SECTION: BENEFITS
════════════════════════════════════════════ */
  .benefits {
    padding:40px 0;
    background:var(--white);
    border-top:1px solid var(--rule-light);
  }
  .benefits-header { margin-bottom:35px; }
  .benefits-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2px;
    background:var(--rule-light);
    border:1px solid var(--rule-light);
  }
  .benefit-card {
    background:var(--white);
    padding:52px 44px;
    display:grid; grid-template-columns:56px 1fr;
    gap:24px; align-items:start;
    transition:background 0.24s;
  }
  .benefit-card:hover { background:var(--paper); }
  .bc-icon-wrap {
    width:56px; height:56px;
    border:1px solid var(--rule);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
 .bc-icon{
  font-size:24px;
  color:var(--accent);
  line-height:1;
  transition:.3s ease;
}

.benefit-card:hover .bc-icon{
  transform:scale(1.08);
  color:var(--forest);
}
  .bc-content h3 {
    font-size:22px; font-weight:700;
    letter-spacing:0.01em; text-transform:uppercase;
    color:var(--ink); margin-bottom:12px;
  }
  .bc-content p {
    font-size:15px; font-weight:400;
    line-height:1.8; color:var(--text-muted);
  }

/* ════════════════════════════════════════════
   SECTION: INDUSTRIES
════════════════════════════════════════════ */
.industries {
  padding:40px 0;
  background:var(--paper);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.ind-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  margin-bottom:37px;
  max-width:100%;
}
.ind-header p{
  max-width:100% !important;
}
.ind-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.ind-card {
  background:var(--white);
  border:1px solid var(--rule);
  padding:36px 28px;
  position:relative;
  transition:border-color 0.22s, transform 0.22s;
}
.ind-card:hover {
  border-color:var(--accent);
  transform:translateY(-4px);
}
.ind-card-num {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:48px;
  color:var(--rule); line-height:1;
  letter-spacing:0.01em;
  margin-bottom:20px;
}
.ind-card h3 {
  font-size:18px; font-weight:700;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--ink); margin-bottom:12px;
}
.ind-card p {
  font-size:15px; font-weight:400;
  line-height:1.75; color:var(--text-muted);
}
.ind-card-tag {
  display:inline-block; margin-top:20px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:4px 12px; background:var(--accent-lt);
  color:var(--accent); border:1px solid var(--accent);
}

/* ════════════════════════════════════════════
   SECTION: CHALLENGES & FUTURE
════════════════════════════════════════════ */
.future {
  padding:40px 0;
  background:var(--white);
}
.future-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px;
}
.future-box h3{
  margin-bottom: 12px;
}

.future-col h3 {
  font-size:28px; font-weight:700;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--ink); margin-bottom:28px;
  padding-bottom:20px; border-bottom:2px solid var(--forest);
}
.challenge-list { display:flex; flex-direction:column; gap:16px; }
.challenge-item {
  display:flex; gap:16px; align-items:flex-start;
  padding:16px; background:var(--paper);
  border-left:3px solid var(--rule);
  transition:border-color 0.2s;
}
.challenge-item:hover { border-left-color:var(--accent); }
.ci-icon { font-size:30px; flex-shrink:0; margin-top:2px; }
.ci-text h4 {
  font-size:14px; font-weight:700;
  letter-spacing:0.01em; text-transform:uppercase;
  color:var(--ink); margin-bottom:4px;
}
.ci-text p {
  font-size:15px; font-weight:400;
  line-height:1.7; color:var(--text-muted);
}

.future-item {
  display:flex; gap:16px; align-items:flex-start;
  padding:16px; background:var(--paper);
  border-left:3px solid var(--forest);
  transition:border-color 0.2s;
  margin-bottom:16px;
}
.future-item:hover { border-left-color:var(--accent); }

/* ==========================================
   FOOD PRINTER PRODUCTS SECTION
========================================== */

.food-machines{
    padding:40px 0;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
}

.food-machines-head{
    margin-bottom:35px;
}

.food-machines-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
}

.food-machine-card{
    background:var(--white);
    border:1px solid var(--rule);
    padding:48px 40px;
    transition:all .25s ease;
}

.food-machine-card:hover{
    transform:translateY(-6px);
    border-color:var(--accent);
    box-shadow:0 18px 35px rgba(0,0,0,.05);
}

.fm-level{
    font-family:'Barlow Condensed', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:26px;
}

.food-machine-card h3{
    font-size:39px;
    margin-bottom:20px;
    color:var(--ink);
}

.fm-desc{
    font-size:15px;
    line-height:1.9;
    font-weight:400;
    color:var(--text-muted);
    margin-bottom:28px;
    max-width:520px;
}

.fm-features{
    list-style:none;
    padding:0;
    margin:0 0 36px 0;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.fm-features li{
    font-size:15px;
    color:var(--text-body);
    position:relative;
    padding-left:18px;
}

.fm-features li::before{
    content:'•';
    position:absolute;
    left:0;
    color:var(--accent);
}

.fm-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

/* ==========================================
   FOOD SAFETY MINIMAL UNIQUE STYLE
========================================== */

.food-safety-minimal{
    padding:40px 0;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
}

.fsm-head{
    text-align:center;
    margin-bottom:72px;
}

.fsm-list{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top: -40px;
}

.fsm-row{
    background:var(--white);
    border:1px solid var(--rule);
    padding:26px 34px;
    display:grid;
    grid-template-columns:90px 1fr;
    align-items:center;
    gap:24px;
    transition:all .25s ease;
    border-radius: 20px;
}

.fsm-row:hover{
    border-color:var(--accent);
    transform:translateX(8px);
}

.fsm-num{
    font-family:'Barlow Condensed', sans-serif;
    font-size:42px;
    font-weight:700;
    line-height:1;
    color:var(--accent);
}

.fsm-row h3{
    font-size:15px;
    color:var(--ink);
    line-height:1.3;
    font-family: 'Barlow', sans-serif;
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:1100px){

.fsm-row{
    grid-template-columns:70px 1fr;
}

}

@media(max-width:640px){

.food-safety-minimal{
    padding:88px 0;
}

.fsm-row{
    padding:22px 20px;
    grid-template-columns:52px 1fr;
    gap:14px;
}

.fsm-num{
    font-size:28px;
}

.fsm-row h3{
    font-size:18px;
}

}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width:1100px) {
  .section-inner { padding:0 40px; }
  .hero { grid-template-columns:1fr; }
  .hero-right { padding:48px 40px; }
  .hero-left { padding:22px 40px 48px; border-right:none; border-bottom:1px solid var(--rule); }
  .scroll-hint { left:40px; }
  .what-is-grid,
  .tech-header,
  .ind-header,
  .future-layout { grid-template-columns:1fr; gap:40px; }
  .tech-grid { grid-template-columns:repeat(2,1fr); }
  .ind-grid { grid-template-columns:repeat(2,1fr); }
  .benefits-grid { grid-template-columns:1fr; }
  .hero h1{
    font-size: clamp(34px, 8vw, 39px);
  }
}
@media (max-width:768px){

.tech-header{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.tech-header h2{
  white-space:normal !important;
  line-height:1.15;
}

.tech-header p{
  max-width:100% !important;
}

}
@media (max-width:640px) {
  
  .section-inner { padding:0 24px; }
  .tech-grid,
  .ind-grid { grid-template-columns:1fr; }
  
  
}
@media (max-width:1100px){

.food-machines-grid{
    grid-template-columns:1fr;
}

}

@media (max-width:640px){

.food-machine-card{
    padding:36px 26px;
}

.food-machine-card h3{
    font-size:34px;
}

.fm-actions{
    flex-direction:column;
}

.fm-actions .btn{
    width:100%;
    text-align:center;
}

}

@media(max-width:640px){

.fsm-list{
    grid-template-columns:1fr;
}

}

@media (max-width:768px){

body{
    overflow-x:hidden;
}

h2{
    line-height:1.1;
}

.key-fact,
.stat-brick,
.benefit-card,
.ind-card,
.food-machine-card{
    padding-left:20px;
    padding-right:20px;
}

.mat-item{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.mat-desc{
    text-align:left;
    max-width:100%;
}
.fsm-list{
  display: grid;
}
.fsm-list{
  grid-template-columns: repeat(1, 1fr);
}

}



@media (max-width:768px){

.hero{
    display:flex;
    flex-direction:column;
}

.hero-left{
    display:contents;
}

.hero-meta{
    order:1;
        padding:0 24px;
}

.hero h1{
    order:2;
        padding:0 24px;
}

.hero-sub{
    order:3;
        padding:0 24px; 
}

.hero-right{
    order:4;
    padding:20px 24px;
}
.hero-right img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:12px;
}

.hero-desc{
    order:5;
    padding:0 24px;
}

.hero-actions{
    order:6;
    padding:0 24px 30px;
}



}


/* =========================
   GALLERY WRAPPER (SIDE SPACE)
========================= */
.gallery-wrapper {
  position: relative;
  padding: 0 60px;
  /* desktop spacing */
}

/* =========================
   TRACK (SCROLL AREA)
========================= */
.gallery-track {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 10px 0;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

/* =========================
   ROW
========================= */
.gallery-row {
  display: flex;
  gap: 24px;
}

/* =========================
   IMAGES (DESKTOP)
========================= */
.gallery-row img {
  width: 320px;
  height: 360px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s;
}

.gallery-row img:hover {
  transform: scale(1.05);
}

.gallery-row {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
  will-change: transform;
}
/* =========================
   BUTTONS
========================= */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background:white;
  color: #152515;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-weight: 500;

}

.gallery-btn.prev {
  left: 10px;
}

.gallery-btn.next {
  right: 10px;
}

.gallery-btn:hover {
  background: peru;
}

.gallery-btn {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* =========================
   TABLET (≤ 992px)
========================= */
@media (max-width: 992px) {

  .gallery-wrapper {
    padding: 0 40px;
  }

  .gallery-row img {
    width: 260px;
    height: 300px;
  }

  .gallery-btn {
    width: 38px;
    height: 38px;
  }
}


/* =========================
   SMALL MOBILE (≤ 480px)
========================= */
@media (max-width: 480px) {

  .gallery-wrapper {
    padding: 0 16px;
  }

  .gallery-row img {
    width: 180px;
    height: 240px;
  }

  /* cleaner UI */
  .gallery-btn {
    display: flex;
  }
}

.feat-card {
  min-height: 220px;
}

.gallery-track {
  align-items: stretch;
  /* instead of center */
}

.gallery-row img {
  height: 300px;
}

.gallery-track {
  scroll-snap-type: x mandatory;
}

.gallery-row img {
  scroll-snap-align: start;
}



@media (max-width: 480px) {

  .gallery-row img {
    height: 100%;
  }

  .gallery-btn.prev {
    left: 8px;
  }

  .gallery-btn.next {
    right: 8px;
  }
}

@media (max-width: 768px) {

  .gallery-wrapper {
    padding: 0 16px;
  }

  .gallery-track {
    overflow: hidden;
    position: relative;
  }

  .gallery-row {
    display: flex;
    gap: 0;
    transition: transform 0.4s ease;
  }

  .gallery-row img {
    width: 100%;
    height: max-content;
    object-fit: cover;
    flex-shrink: 0;
  }

  .gallery-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
    background: rgba(4, 78, 14, 0.9);
    color: white;
  }

  .gallery-btn.prev {
    left: 10px;
  }

  .gallery-btn.next {
    right: 10px;
  }
}


.faq{
padding:40px 0;
background:#ffffff;
}

.faq-container{
max-width:1200px;
margin:auto;
padding:0 40px;
}

.faq-layout{
display:grid;
grid-template-columns:1fr 1.3fr;
gap:80px;
}

/* left */

.sec-label{
font-size :0.95rem;
letter-spacing:.2em;
color:#c07840;
margin-bottom:15px;
}
.sec-label:hover{
    color: #2e1503;
}

.sec-title{
font-size:56px;
line-height:1.1;
color:#173a27;
margin-bottom:25px;
font-family:'Playfair Display', serif;

}

.sec-title em{
color:#c07840;
}

.faq-aside p{
font-size:16px;
line-height:1.7;
color:#6c5a49;
max-width:380px;
}

/* faq items */

.faq-item{
border-bottom:1px solid #e3d9cf;
padding:22px 0;
}

.faq-q{
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
cursor:pointer;
color:#173a27;
font-size: 0.95rem;
}
.faq-q:hover{
color: #c07840;
}

.faq-q-icon{
width:32px;
height:32px;
border:1px solid #d7c8b8;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

.faq-q-icon svg{
width:12px;
stroke:#c07840;
stroke-width:1.5;
}

.faq-a{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
font-size:14px;
line-height:1.7;
color:#6c5a49;
padding-right:40px;
font-weight: 400;
}

/* active */

.faq-item.active .faq-a{
max-height:300px;
margin-top:15px;
}

/* responsive */

@media(max-width:900px){

.faq-layout{
grid-template-columns:1fr;
gap:60px;
}

.sec-title{
font-size:38px;
}

}

/* ==========================================
   FINAL RESPONSIVE MASTER FIX
   Desktop / Laptop / Tablet / Mobile
========================================== */

/* ---------- Large Laptop ---------- */
@media (max-width: 1400px){

.section-inner{
    max-width:1280px;
    padding:0 48px;
}

.hero-left{
    padding:70px 40px 60px 48px;
}

.hero-right{
    padding:60px 40px;
}

}

/* ---------- Laptop / Tablet ---------- */
@media (max-width: 1100px){

.section-inner{
    padding:0 32px;
}

.hero{
    grid-template-columns:1fr;
    min-height:auto;
}

.hero-left{
    padding:110px 32px 26px;
    border-bottom:none;
}

.hero-right{
    padding:10px 32px 40px;
}

.hero-right img{
    width:100%;
    max-width:640px;
    margin:0 auto;
}

.what-is-grid,
.tech-header,
.ind-header,
.future-layout,
.faq-layout{
    grid-template-columns:1fr;
    gap:40px;
}

.tech-grid,
.ind-grid{
    grid-template-columns:repeat(2,1fr);
}

.food-machines-grid,
.benefits-grid{
    grid-template-columns:1fr;
}

.sticky-label{
    position:static;
}

}

/* ---------- Tablet ---------- */
@media (max-width: 900px){

h1{
    font-size:clamp(34px,8vw,54px);
}

h2{
    font-size:clamp(28px,6vw,42px);
    line-height:1.08;
}

.hero-actions{
    gap:12px;
}

.fsm-list{
    grid-template-columns:1fr;
}

.tech-grid,
.ind-grid{
    grid-template-columns:1fr;
}

.key-fact{
    gap:14px;
}

.kf-num{
    width:38px;
    font-size:22px;
}

}

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

body{
    overflow-x:hidden;
}

.section-inner{
    padding:0 20px;
}

/* HERO exact order */
.hero{
    display:flex;
    flex-direction:column;
    padding-top:82px;
}

.hero-left{
    display:contents;
}

.hero-meta{order:1; padding:0 20px;}
.hero h1{order:2; padding:0 20px;}
.hero-sub{order:3; padding:0 20px; margin-bottom:14px;}
.hero-right{order:4; padding:10px 20px 18px;}
.hero-desc{order:5; padding:0 20px;}
.hero-actions{order:6; padding:0 20px 24px;}

.hero-right img{
    width:100%;
    border-radius:14px;
}

.hero-ghost{
    display:none;
}

.hero-actions{
    flex-direction:column;
}

.hero-actions .btn{
    width:100%;
    text-align:center;
}

/* Common cards */
.key-fact,
.stat-brick,
.benefit-card,
.ind-card,
.food-machine-card,
.fsm-row{
    padding:20px;
}



/* Timeline */
.timeline::before{
    left:10px;
}

.tl-item{
    grid-template-columns:22px 1fr;
    gap:16px;
    padding:0 0 28px;
}

.tl-dot{
    width:14px;
    height:14px;
}

/* Compliance */
.fsm-row{
    grid-template-columns:30px 1fr;
    gap:12px;
    border-radius:14px;
}

.fsm-num{
    font-size:22px;
}

.fsm-row h3{
    font-size:15px;
}

/* Footer titles */
.sec-title{
    font-size:34px;
}

}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px){

.section-inner{
    padding:0 16px;
}

.hero h1{
    font-size:35px;
}

h2{
    font-size:26px;
}

.hero-sub,
.hero-desc,
.body-copy,
p.lead{
    font-size:14px;
}

.btn{
    padding:13px 18px;
    font-size:12px;
}

.food-machine-card h3{
    font-size:28px;
}

.kf-text h4,
.tc-title,
.bc-content h3{
    font-size:18px;
}

}