/* =========================================================
   AGROMILL MACHINERY — Premium Industrial Edition
   Bootstrap 5.3 + Fraunces / Instrument Sans
   - Glass / Brass / Forest palette
   - Grain texture, soft shadows, motion system
   ========================================================= */

:root{
  /* Color */
  --ag-green-950:#0b2417;
  --ag-green-900:#112d1d;
  --ag-green-800:#143522;
  --ag-green-700:#14532d;
  --ag-green-600:#166534;
  --ag-green-500:#1d7a43;
  --ag-brass:#d88a2a;
  --ag-brass-600:#c57216;
  --ag-amber:#da8b2d;
  --ag-cream:#fbf8f1;
  --ag-cream-2:#f5f0e6;
  --ag-stone:#ede6d8;
  --ag-ink:#16211b;
  --ag-muted:#5a665f;
  --ag-line:#e2d9c7;
  --ag-white:#fff;

  /* Radius / Shadow */
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:30px;
  --shadow-sm: 0 6px 22px rgba(18, 36, 26, .08);
  --shadow-md: 0 18px 46px rgba(18, 36, 26, .10);
  --shadow-lg: 0 30px 80px rgba(13, 32, 22, .14);
  --shadow-glow: 0 0 44px rgba(216,138,42,.16);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --t-fast: .18s;
  --t-mid: .45s;
  --t-slow: .75s;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Instrument Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ag-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display-font{
  font-family:'Fraunces', Georgia, serif;
  letter-spacing:-.016em;
}
a{ text-underline-offset:3px; }
img{ max-width:100%; }

/* ---------- Grain / texture overlay ---------- */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none;
  z-index:9998; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- Scroll progress ---------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--ag-brass), #f0c27a);
  z-index:2000;
  box-shadow:0 0 10px rgba(216,138,42,.35);
  transition: width .08s linear;
}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(180deg, #0e2e1c, #112f1f);
  color:#cfe4d3;
  font-size:.81rem;
  padding:.52rem 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar a{ color:#e7f4e8; text-decoration:none; }
.topbar a:hover{ color:#fff; }

/* ---------- Navbar ---------- */
.navbar-ag{
  background: rgba(255,252,247,.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom:1px solid #e6ddd0;
  padding:.82rem 0;
  transition: box-shadow .25s, background .25s;
}
.navbar-ag.scrolled{
  box-shadow: 0 14px 40px rgba(14,33,22,.07);
  background: rgba(255,252,247,.95);
}
.brand-mark{
  width:46px; height:46px; border-radius:13px;
  background: radial-gradient(110% 110% at 30% 25%, #2a8a52 0%, #134d2a 65%, #0e3520 100%);
  display:flex; align-items:center; justify-content:center;
  color:#ffe7bf; font-weight:800;
  font-family:'Fraunces',serif; font-size:1.18rem;
  box-shadow: 0 8px 22px rgba(16,71,37,.24), inset 0 1px 0 rgba(255,255,255,.22);
  position:relative;
}
.brand-mark::after{
  content:''; position:absolute; right:8px; top:9px; width:5px; height:5px;
  background:#f1b25b; border-radius:50%;
  box-shadow:0 0 10px rgba(241,178,91,.8);
}
.brand-name{ font-family:'Fraunces',serif; font-weight:800; font-size:1.28rem; color:#16261c; line-height:1.1; }
.brand-sub{ font-size:.70rem; color:#6a766e; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.navbar-nav .nav-link{
  color:#33413a !important;
  font-weight:600; font-size:.93rem;
  padding:.52rem .98rem !important;
  position:relative;
}
.navbar-nav .nav-link::after{
  content:''; position:absolute; left:.95rem; right:.95rem; bottom:.28rem; height:2px;
  background:var(--ag-brass); transform:scaleX(0); transform-origin:left;
  transition: transform .28s var(--ease-out); border-radius:2px;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ transform:scaleX(1); }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color:#133b24 !important; }

/* ---------- Buttons ---------- */
.btn-ag-primary{
  background: linear-gradient(180deg, #1c7a47, #15643a 60%, #12542f);
  color:#fff;
  border-radius:100px;
  padding:.7rem 1.28rem;
  font-weight:750;
  font-size:.92rem;
  border:none;
  box-shadow: 0 10px 24px rgba(19,93,51,.22), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-ag-primary::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease-out);
}
.btn-ag-primary:hover{ filter:brightness(1.04); color:#fff; transform:translateY(-1px); box-shadow: 0 16px 34px rgba(19,93,51,.27);}
.btn-ag-primary:hover::before{ transform:translateX(120%); }

.btn-ag-outline{
  border:1.6px solid #c9d2c7;
  background:#fff;
  color:#24322a;
  border-radius:100px;
  padding:.68rem 1.24rem;
  font-weight:700; font-size:.92rem;
  transition: all .18s var(--ease-out);
}
.btn-ag-outline:hover{ border-color:#1a6a3c; color:#14532d; background:#f7fbf7; transform:translateY(-1px);}

.btn-light-ag{
  background:linear-gradient(180deg, #ffe5bd, #ffd08a);
  color:#2a1b09;
  font-weight:800;
  border-radius:100px;
  padding:.78rem 1.35rem;
  border:none;
  box-shadow: 0 10px 24px rgba(160,102,22, .18);
  transition: transform .18s var(--ease-out), filter .18s;
}
.btn-light-ag:hover{ transform:translateY(-1px); filter:brightness(1.02); color:#221608; }

.magnet-btn{ will-change: transform; transition: transform .12s linear; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 70% -10%, #fff7ea 0%, transparent 60%),
    linear-gradient(180deg, #fcf9f2 0%, #f3ece0 100%);
  padding: 86px 0 78px;
  position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(28,76,48,.035) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(#000 60%, transparent);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff;
  border:1px solid #e5d9c3;
  border-radius:100px;
  padding:.44rem .9rem;
  font-size:.78rem;
  font-weight:800; color:#304338;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.hero h1{
  font-size: clamp(2.3rem, 5.3vw, 4.35rem);
  line-height:.96;
  font-weight:800;
  color:#13241a;
  margin-top:1.05rem;
}
.hero h1 em{ font-style:normal; color:#17703f; position:relative;}
.hero h1 em::after{
  content:''; position:absolute; left:0; right:0; bottom:.08em; height:.28em;
  background: linear-gradient(90deg, rgba(216,138,42,.28), rgba(216,138,42,.04));
  z-index:-1; border-radius:6px;
}
.hero-lead{ color:#4b5c52; font-size:1.13rem; max-width:540px; margin-top:1rem; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:1.35rem; margin-top:1.75rem; color:#4f5f55; font-size:.92rem; font-weight:700;}
.hero-badges i{ color:var(--ag-brass); margin-right:.35rem;}

.hero-visual{ position:relative; }
.hero-main-img{
  border-radius:26px;
  width:100%; height:500px; object-fit:cover;
  box-shadow: var(--shadow-lg);
  background:#e8e0d0;
  transform: perspective(1000px) rotateY(-2.2deg) rotateX(1.2deg);
  transition: transform .7s var(--ease-out);
}
.hero-visual:hover .hero-main-img{ transform: perspective(1000px) rotateY(-0.6deg) rotateX(.4deg) scale(1.011); }

.hero-stat-card{
  position:absolute; left:-22px; bottom:30px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px) saturate(1.15);
  border-radius:18px; padding:16px 18px;
  box-shadow: 0 22px 54px rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.85);
  min-width:220px;
  animation: floatY 5.5s ease-in-out infinite;
}
.hero-stat-card strong{ font-family:'Fraunces',serif; font-size:1.8rem; color:#15241b;}

.hero-floating-tag{
  position:absolute; right:-8px; top:36px;
  background:#fff; border-radius:14px; padding:12px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  font-weight:800; font-size:.86rem; color:#254136;
  border:1px solid #ece3d3;
  animation: floatY 6.2s ease-in-out infinite reverse;
}
.hero-floating-tag .dot{ width:8px; height:8px; background:#2ac061; border-radius:50%; display:inline-block; margin-right:6px; box-shadow:0 0 0 4px rgba(42,192,97,.15);}

/* floating grain dots */
.hero-grains span{
  position:absolute; width:6px; height:10px; border-radius:4px; background:#e2b778;
  opacity:.7;
  animation: drift 8s ease-in-out infinite;
}
@keyframes drift { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-12px)} }
@keyframes floatY { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-7px)} }

/* ---------- Trust strip ---------- */
.trust-strip{
  background:#fff;
  border-top:1px solid #ece2d3;
  border-bottom:1px solid #ece2d3;
  padding:28px 0;
}
.trust-item strong{ font-family:'Fraunces',serif; font-size:1.95rem; color:#1b2d22;}
.trust-item span{ color:#65736b; font-size:.84rem; font-weight:700;}

/* ---------- Sections ---------- */
.section{ padding:96px 0; position:relative;}
.section-cream{ background: linear-gradient(180deg, #fcf9f3 0%, #f4eee2 100%);}
.page-header{
  background:
    radial-gradient(900px 320px at 75% -50%, #fff1d6 0%, transparent 65%),
    linear-gradient(180deg, #fcf9f2 0%, #f3e9d8 100%);
  padding: 78px 0 50px;
  border-bottom:1px solid #e6d9c3;
}
.eyebrow{ color:var(--ag-brass-600); font-weight:800; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem;}
.section-title{ font-weight:800; font-size: clamp(1.75rem, 3.3vw, 2.85rem); color:#17241c; margin-top:.45rem;}
.muted{ color:var(--ag-muted); }

/* ---------- Product card (premium) ---------- */
.product-card{
  background:#fff;
  border:1px solid #e4dcca;
  border-radius:22px;
  overflow:hidden;
  height:100%;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
  box-shadow: 0 8px 30px rgba(18,33,24,.045);
  position:relative;
}
.product-card::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(600px 200px at 50% -10%, rgba(255,243,216,.65), transparent 60%);
  opacity:0; transition: opacity .35s;
  pointer-events:none;
}
.product-card:hover{
  transform: translateY(-7px) scale(1.012);
  box-shadow: var(--shadow-md);
  border-color:#d5c8b3;
}
.product-card:hover::after{ opacity:1; }

.product-thumb{
  height:232px;
  background: linear-gradient(180deg, #f6f1e6, #efe7d8);
  position:relative; overflow:hidden;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .65s var(--ease-out);}
.product-card:hover .product-thumb img{ transform: scale(1.045); }
.product-badge{
  position:absolute; top:13px; left:13px;
  background:#fff;
  border-radius:100px;
  padding:.36rem .72rem;
  font-size:.72rem; font-weight:800; color:#27362c;
  box-shadow: 0 10px 22px rgba(0,0,0,.1);
  border:1px solid #efe5cf;
}
.sheen::before{
  content:''; position:absolute; top:-60%; left:-40%;
  width:45%; height:220%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.48) 50%, transparent 70%);
  transform: rotate(18deg);
  transition: transform .7s var(--ease-out);
}
.product-card:hover .sheen::before{ transform: translateX(380%) rotate(18deg); }

.product-body{ padding:19px 18px 20px; }
.product-body h3{ font-size:1.22rem; font-weight:800; margin-bottom:.35rem; color:#1a2820;}
.product-body p{ color:#5b6960; font-size:.94rem; margin-bottom:.9rem;}
.spec-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.spec-pills span{
  background:#f4f1e7; border:1px solid #e5dccb;
  border-radius:100px; padding:.30rem .62rem; font-size:.73rem; font-weight:750; color:#3c4941;
}
.link-arrow{ color:#166534; font-weight:800; text-decoration:none; font-size:.93rem;}
.link-arrow:hover{ color:#0f3f22; }

/* ---------- Feature / Why cards ---------- */
.why-card{
  background: linear-gradient(180deg, #ffffff, #fdfbf6);
  border:1px solid #e5dccc;
  border-radius:20px;
  padding:26px 24px;
  height:100%;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.why-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm);}
.why-icon{
  width:50px; height:50px; border-radius:13px;
  background: linear-gradient(180deg, #eef7ef, #dceadf);
  color:#18603a;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---------- Quality block ---------- */
.quality-wrap{
  background:#fff;
  border:1px solid #e1d6c2;
  border-radius:28px;
  padding:26px;
  box-shadow: var(--shadow-md);
}
.quality-img{ border-radius:20px; width:100%; height:420px; object-fit:cover; background:#ece5d6; }
.check-list{ list-style:none; padding:0; margin:0;}
.check-list li{ display:flex; gap:.7rem; margin-bottom:.85rem; color:#3b4d41; font-weight:600;}
.check-list li i{ color:#1d9d56; font-size:1.15rem; margin-top:2px; }

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff; border:1px solid #e4d9c6;
  border-radius:20px; padding:26px; height:100%;
  box-shadow: var(--shadow-sm);
}
.stars{ color:#f59e0b; letter-spacing:1px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(900px 320px at 20% -60%, rgba(255,214,140,.16), transparent 60%),
    linear-gradient(105deg, #184d2f 0%, #143d26 100%);
  color:#e7f5ea;
  border-radius:30px;
  padding:46px 46px;
  position:relative; overflow:hidden;
  box-shadow: 0 28px 70px rgba(10, 36, 22, .22);
}
.cta-band h3{ color:#fff; font-weight:800; font-size: clamp(1.5rem, 2.4vw, 2.18rem); }

/* ---------- Contact ---------- */
.contact-card{
  background:#fff; border:1px solid #e1d5c2;
  border-radius:24px; padding:28px;
  box-shadow: var(--shadow-md);
}
.form-control, .form-select{
  border-radius:12px;
  border:1.6px solid #d8cfbc;
  padding:.76rem .98rem;
  background:#fdfcfa;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.form-control:focus, .form-select:focus{
  border-color:#2d7e51;
  box-shadow: 0 0 0 .22rem rgba(22,101,52,.12);
  background:#fff;
}
.contact-info-box{
  background: linear-gradient(180deg, #faf5e9, #f4ecd9);
  border:1px solid #e4d8c2;
  border-radius:20px; padding:24px;
}
.contact-info-box .ci{ display:flex; gap:12px; margin-bottom:16px; color:#2f3d35;}
.contact-info-box .ci i{
  width:42px; height:42px; border-radius:12px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  color:#19673a; flex:0 0 42px;
  border:1px solid #e0d2b9;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

/* ---------- Footer ---------- */
footer{
  background: radial-gradient(900px 400px at 70% -20%, rgba(255,199,106,.055), transparent 60%), #12241a;
  color:#b9c9be;
  padding-top:68px;
}
footer h6{ color:#eaf5ee; font-weight:800; font-size:.95rem; margin-bottom:12px;}
footer a{ color:#b9c9be; text-decoration:none;}
footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.09); padding:18px 0; color:#8fa398; font-size:.85rem; }

/* ---------- Reveal / motion system ---------- */
.reveal{
  opacity:0; transform: translateY(22px) scale(.995);
  filter: blur(3px);
  transition: opacity .68s var(--ease-out), transform .68s var(--ease-out), filter .68s var(--ease-out);
}
.reveal.in{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }

/* Tilt card */
.tilt-card{ transform-style:preserve-3d; will-change: transform; }
.tilt-card .tilt-inner{ transform: translateZ(22px); }

/* ---------- Utilities ---------- */
.badge-soft{
  background:#f1efe6; border:1px solid #e2dccf; color:#3e4a42;
  border-radius:100px; padding:.34rem .72rem; font-weight:750; font-size:.78rem;
}
.page-subnav{ background:#fff; border-bottom:1px solid #e9e2d4; font-size:.9rem; font-weight:700; }
.page-subnav a{ color:#54635a; text-decoration:none; margin-right:1.35rem;}
.page-subnav a:hover{ color:#144d2a;}

.soft-divider{
  height:1px; background:linear-gradient(90deg, transparent, #dccfb9, transparent);
  margin: 42px 0;
}

/* Marquee */
.marquee{
  overflow:hidden; white-space:nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee-track{
  display:inline-block; animation: marquee 32s linear infinite;
  padding-block:.4rem;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee { from{ transform:translateX(0)} to{ transform:translateX(-50%)} }
.marquee-item{ display:inline-block; margin:0 2.2rem; color:#5b6c60; font-weight:700; font-size:.92rem;}
.marquee-item i{ color:#d88a2a; margin-right:.45rem;}

/* Stat counter */
.stat-number{ font-family:'Fraunces',serif; font-variant-numeric:tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .hero-main-img{ height:420px;}
  .hero-stat-card{ left:12px;}
  .hero-floating-tag{ right:8px; top:16px;}
  .section{ padding:72px 0;}
  .quality-img{ height:340px;}
}
@media (max-width: 575px){
  .hero{ padding-top:46px;}
  .hero-main-img{ height:330px;}
  .cta-band{ padding:28px 22px;}
  .page-header{ padding:50px 0 34px;}
}

/* ---------- Modal polish ---------- */
.modal-content{ border-radius:22px; border:none; box-shadow: var(--shadow-lg); }
.modal-header{ border-bottom:1px solid #ebe4d6; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .reveal{ opacity:1; transform:none; filter:none;}
}
</style>