/* ============================================================
   SUNIDHI AGROTECH PVT LTD — "SAT Modern" Design System v1.0
   Brand: Red #FE0000 · Yellow #FED500 · Ink #0B0B0D
   Type:  Space Grotesk (display) · Inter (body)
   ============================================================ */

:root{
  --ink:#0B0B0D;
  --ink-2:#141416;
  --ink-3:#1D1D21;
  --paper:#FFFFFF;
  --paper-2:#F6F6F7;
  --line:#E8E8EA;
  --line-dark:rgba(255,255,255,.09);
  --red:#E60000;
  --red-bright:#FE0000;
  --red-deep:#B50000;
  --yellow:#FED500;
  --text:#17171A;
  --muted:#5D5D66;
  --muted-dark:#9C9CA6;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --shadow-1:0 6px 24px rgba(11,11,13,.07);
  --shadow-2:0 24px 60px -18px rgba(11,11,13,.22);
  --shadow-red:0 18px 44px -14px rgba(230,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--text)}
::selection{background:var(--yellow);color:var(--ink)}

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:inherit}
.d1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-.03em;line-height:1.18}
.d2{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.025em;line-height:1.18}
.d3{font-size:clamp(22px,2.4vw,28px)}
.lead{font-size:clamp(16px,1.4vw,18.5px);color:var(--muted);line-height:1.7}
.sec-dark .lead,.hero .lead{color:var(--muted-dark)}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 24px}

/* ---------- Kicker / eyebrow ---------- */
.kick{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.kick::before{content:"";width:11px;height:11px;background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%);flex:none}
.sec-dark .kick{color:var(--red-bright)}

/* Yellow marker highlight for headings */
.hl{background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-position:0 100%;background-size:100% .085em;padding:0 .05em .075em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .85s cubic-bezier(.65,0,.35,1) .25s}
.rv:not(.in) .hl{background-size:0 .085em}
.d1 .hl{background-size:100% .09em;padding-bottom:.075em}
.rv:not(.in) .d1 .hl{background-size:0 .09em}
.hl-red{color:var(--red)}
.sec-dark .hl,.hero .hl{color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--disp);letter-spacing:.01em;padding:17px 30px;border-radius:999px;transition:.28s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn svg{flex:none;transition:transform .28s}
.btn:hover svg{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff;box-shadow:var(--shadow-red)}
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:#ffe23d;transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px)}
.btn-line{border:1.5px solid var(--line);color:var(--text);background:transparent}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-line-w{border:1.5px solid rgba(255,255,255,.28);color:#fff;background:transparent}
.btn-line-w:hover{border-color:#fff;background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn-wa{background:#1EBE57;color:#fff}
.btn-wa:hover{background:#17a04a;transform:translateY(-2px)}

/* ---------- Chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--disp);padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted);background:#fff}
.tag{display:inline-block;font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:7px;background:var(--yellow);color:var(--ink)}
.tag-red{background:var(--red);color:#fff}
.tag-dark{background:var(--ink);color:#fff}

/* ============================================================
   HEADER — floating glass bar
   ============================================================ */
.hd{position:fixed;top:0;left:0;right:0;z-index:200;padding:14px 16px;transition:.3s}
.hd-in{max-width:1400px;margin:0 auto;padding:10px 14px 10px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(11,11,13,.07);border-radius:999px;box-shadow:0 8px 32px rgba(11,11,13,.08)}
.hd-logo img{height:34px;width:auto}
.hd-nav{display:flex;align-items:center;gap:4px}
.hd-nav a{font:600 14.5px/1 var(--disp);color:var(--text);padding:11px 15px;border-radius:999px;transition:.2s}
.hd-nav a:hover{background:rgba(11,11,13,.05);color:var(--red)}
.hd-nav a.on{background:var(--ink);color:#fff}
.hd-cta{display:flex;align-items:center;gap:14px}
.hd-tel{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--disp);color:var(--ink);white-space:nowrap}
.hd-tel svg{color:var(--red)}
.hd-tel:hover{color:var(--red)}
.hd .btn{padding:13px 22px;font-size:14px}
.hd-burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center}

/* Mobile nav overlay */
.mnav{position:fixed;inset:0;z-index:300;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:26px;transform:translateY(-102%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.mnav.open{transform:translateY(0)}
.mnav-top{display:flex;align-items:center;justify-content:space-between}
.mnav-top img{height:32px;width:auto}
.mnav-x{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.mnav-links{margin:auto 0;display:flex;flex-direction:column;gap:4px}
.mnav-links a{font:700 clamp(28px,7vw,40px)/1.3 var(--disp);letter-spacing:-.02em;color:#fff;padding:6px 0;display:flex;align-items:center;gap:14px}
.mnav-links a span{font:600 13px/1 var(--disp);color:var(--red-bright)}
.mnav-links a:active{color:var(--yellow)}
.mnav-foot{display:flex;gap:12px;flex-wrap:wrap}
.mnav-foot .btn{flex:1}

/* ============================================================
   HERO (home) + PAGE HERO (subpages)
   ============================================================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.hero-tri{position:absolute;top:0;right:0;width:min(300px,32vw);aspect-ratio:1;background:var(--yellow);clip-path:polygon(100% 0,0 0,100% 100%);z-index:2}
.hero-tri::before{content:"";position:absolute;top:0;right:100%;width:46%;height:46%;background:var(--red-bright);clip-path:polygon(100% 0,0 0,100% 100%);opacity:.9}

.page-hero{position:relative;background:var(--ink);color:#fff;padding:170px 0 74px;overflow:hidden}
.crumb{display:flex;align-items:center;gap:10px;font:600 12.5px/1 var(--disp);letter-spacing:.06em;color:var(--muted-dark);margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:var(--muted-dark);transition:.2s}
.crumb a:hover{color:var(--yellow)}
.crumb span{color:var(--yellow)}

/* ---------- Marquee band ---------- */
.marq{background:var(--yellow);color:var(--ink);overflow:hidden;padding:15px 0;position:relative;z-index:5}
.marq.tilt{transform:rotate(-1.1deg) scale(1.02);margin:-8px -10px}
.marq-track{display:flex;gap:0;width:max-content;animation:satMarq 36s linear infinite}
.marq-track span{font:700 15px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;padding:0 26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap}
.marq-track span::after{content:"✦";font-size:13px}
@keyframes satMarq{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.sec{padding:104px 0;position:relative}
.sec-gray{background:var(--paper-2)}
.sec-dark{background:var(--ink);color:#fff}
.sec-dark .chip{background:transparent;border-color:var(--line-dark);color:var(--muted-dark)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px}
.sec-head>div:first-child{max-width:680px}
.sec-head .kick{margin-bottom:16px}
.sec-head p{margin-top:16px}
.sec-num{font:700 15px/1 var(--disp);color:var(--muted);letter-spacing:.1em;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.sec-num b{color:var(--red);font-size:22px}

/* ============================================================
   MACHINE CARDS
   ============================================================ */
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.m-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.m-card:hover{transform:translateY(-7px);border-color:var(--red);box-shadow:var(--shadow-2)}
.m-card-img{position:relative;background:var(--yellow);aspect-ratio:4/3;overflow:hidden}
.m-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.3,0,.2,1)}
.m-card:hover .m-card-img img{transform:scale(1.05)}
.m-card-tag{position:absolute;top:14px;left:14px;z-index:2}
.m-card-model{position:absolute;top:14px;right:14px;z-index:2;font:700 11px/1 var(--disp);letter-spacing:.1em;background:rgba(11,11,13,.82);color:#fff;padding:7px 11px;border-radius:7px;backdrop-filter:blur(6px)}
.m-card-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.m-card-body h3{font-size:21px}
.m-card-body p{font-size:14.5px;color:var(--muted);line-height:1.6}
.m-specs{display:flex;flex-wrap:wrap;gap:8px}
.m-specs span{font:600 12px/1 var(--disp);padding:7px 11px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);color:var(--muted)}
.m-link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font:700 14.5px/1 var(--disp);color:var(--red)}
.m-link svg{transition:transform .25s}
.m-card:hover .m-link svg{transform:translateX(5px)}
.m-card.feat{grid-column:span 2;flex-direction:row}
.m-card.feat .m-card-img{aspect-ratio:auto;flex:1.1}
.m-card.feat .m-card-body{flex:1;justify-content:center;gap:14px}
.m-card.feat .m-card-body h3{font-size:26px}

/* ============================================================
   BENTO (why-us, dark)
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bento-tile{position:relative;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:var(--ink-2);padding:30px;overflow:hidden;transition:.3s;display:flex;flex-direction:column;gap:12px;min-height:230px}
.bento-tile:hover{border-color:rgba(254,0,0,.5);transform:translateY(-4px)}
.bento-tile h3{font-size:19px;color:#fff}
.bento-tile p{font-size:14px;color:var(--muted-dark);line-height:1.65}
.bento-ico{width:48px;height:48px;border-radius:14px;background:rgba(254,0,0,.13);color:var(--red-bright);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.bento-tile.span2{grid-column:span 2}
.bento-tile.img-tile{padding:0;min-height:300px;justify-content:flex-end}
.bento-tile.img-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:.5s}
.bento-tile.img-tile:hover img{opacity:.78;transform:scale(1.03)}
.bento-tile.img-tile .bento-cap{position:relative;z-index:2;padding:28px;background:linear-gradient(transparent,rgba(11,11,13,.92) 55%)}
.bento-stat{font:700 clamp(40px,4vw,54px)/1 var(--disp);letter-spacing:-.03em;color:#fff}
.bento-stat i{font-style:normal;color:var(--yellow)}
.bento-stat-l{font:600 13px/1.4 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}

/* ---------- Stats row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:28px 10px;text-align:center;border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff}
.sec-dark .stat,.hero .stat{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.stat b{display:block;font:700 clamp(34px,3.6vw,46px)/1 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.sec-dark .stat b,.hero .stat b{color:#fff}
.stat b i{font-style:normal;color:var(--red)}
.stat span{display:block;margin-top:8px;font:600 12.5px/1.4 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   GALLERY STRIP (factory)
   ============================================================ */
.gal{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px 22px;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal figure{flex:0 0 min(430px,78vw);scroll-snap-align:center;border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:16/11;background:var(--ink-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;font:600 13.5px/1.3 var(--disp);color:#fff;background:linear-gradient(transparent,rgba(11,11,13,.85))}

/* ---------- Crops marquee chips ---------- */
.crops-band{overflow:hidden;display:flex;flex-direction:column;gap:14px}
.crops-row{display:flex;gap:14px;width:max-content;animation:satMarq 60s linear infinite}
.crops-row.rev{animation-direction:reverse}
.crop-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font:600 14px/1 var(--disp);white-space:nowrap}
.sec-dark .crop-chip{background:var(--ink-2);border-color:var(--line-dark);color:#fff}
.crop-chip img{width:34px;height:34px;border-radius:50%;background:transparent}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:28px 24px 24px;transition:.3s}
.step:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:var(--shadow-1)}
.step b{position:absolute;top:18px;right:20px;font:700 42px/1 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px var(--line);transition:.3s}
.step:hover b{-webkit-text-stroke:1.6px var(--yellow)}
.step h3{font-size:17.5px;margin-bottom:8px;padding-right:56px}
.step p{font-size:14px;color:var(--muted)}

/* ============================================================
   BLOG CARDS + ARTICLE
   ============================================================ */
.b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.b-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.32s;display:flex;flex-direction:column}
.b-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--red)}
.b-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.b-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.b-card:hover .b-card-img img{transform:scale(1.06)}
.b-card-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.b-meta{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b-meta .tag{font-size:10.5px}
.b-card-body h3{font-size:19px;line-height:1.35}
.b-card-body p{font-size:14.5px;color:var(--muted)}
.article{max-width:780px;margin:0 auto}
.article>*+*{margin-top:22px}
.article h2{font-size:clamp(24px,2.6vw,32px);margin-top:48px}
.article h3{font-size:21px;margin-top:36px}
.article p,.article li{font-size:16.5px;line-height:1.8;color:#2A2A30}
.article ul,.article ol{padding-left:4px;display:flex;flex-direction:column;gap:10px}
.article ul li{padding-left:26px;position:relative}
.article ul li::before{content:"";position:absolute;left:2px;top:11px;width:10px;height:10px;background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%)}
.article ol{counter-reset:n}
.article ol li{counter-increment:n;padding-left:38px;position:relative}
.article ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:2px;font:700 14px/1.6 var(--disp);color:var(--red)}
.article strong{color:var(--ink)}
.article a{color:var(--red);font-weight:600;border-bottom:1.5px solid rgba(230,0,0,.3)}
.article a:hover{border-color:var(--red)}
.article blockquote{border-left:4px solid var(--yellow);background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 24px;font-size:16.5px}
.article img{border-radius:var(--r-md)}
.article table{width:100%;border-collapse:collapse;font-size:15px}
.article th,.article td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.article th{background:var(--ink);color:#fff;font-family:var(--disp);font-weight:600}
.article tr:nth-child(even) td{background:var(--paper-2)}

/* ============================================================
   SPEC TABLE + PRODUCT PAGE PARTS
   ============================================================ */
.spec-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--r-md)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.spec-table th{background:var(--ink);color:#fff;font:600 13px/1.4 var(--disp);letter-spacing:.06em;text-transform:uppercase;padding:15px 18px;text-align:left}
.spec-table td{padding:13px 18px;border-top:1px solid var(--line)}
.spec-table td:first-child{font-weight:600;color:var(--ink);width:38%}
.spec-table tr:nth-child(even) td{background:var(--paper-2)}
.spec-hi{color:var(--red);font-weight:700}

.p-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.p-hero-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--yellow)}
.p-hero-img img{width:100%}
.p-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.p-kpi{border:1px solid var(--line-dark);background:rgba(255,255,255,.04);border-radius:var(--r-sm);padding:16px 14px}
.p-kpi b{display:block;font:700 22px/1.1 var(--disp);color:#fff}
.p-kpi b i{font-style:normal;color:var(--yellow);font-size:14px}
.p-kpi span{font:600 11.5px/1.4 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark)}

/* Feature list (product pages) */
.feat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feat-item{display:flex;gap:16px;padding:22px;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.25s}
.feat-item:hover{border-color:var(--red);box-shadow:var(--shadow-1)}
.feat-item .bento-ico{margin:0;flex:none;background:rgba(230,0,0,.08);color:var(--red)}
.feat-item h3{font-size:16.5px;margin-bottom:5px}
.feat-item p{font-size:14px;color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;transition:.25s}
.faq-item[open]{border-color:var(--red)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 24px;font:600 16.5px/1.4 var(--disp);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font:400 26px/1 var(--disp);color:var(--red);transition:.25s;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item div{padding:0 24px 22px;font-size:15px;color:var(--muted);line-height:1.75}

/* ============================================================
   FORMS (WhatsApp enquiry)
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{display:flex;flex-direction:column;gap:8px}
.f-field.full{grid-column:1/-1}
.f-field label{font:600 13px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{padding:15px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;outline:none;transition:.2s;width:100%}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(230,0,0,.08)}
.f-note{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{position:relative;background:linear-gradient(120deg,var(--red-bright),var(--red-deep) 78%);color:#fff;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:0;right:0;width:150px;aspect-ratio:1;background:var(--yellow);clip-path:polygon(100% 0,0 0,100% 100%)}
.cta-band::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.cta-in{position:relative;z-index:2;padding:84px 24px;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.cta-in h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.03em}
.cta-in .lead{color:rgba(255,255,255,.85);margin-top:14px}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-tel{font:700 clamp(24px,2.6vw,34px)/1 var(--disp);letter-spacing:-.01em;color:#fff;display:inline-flex;align-items:center;gap:12px}
.cta-tel:hover{color:var(--yellow)}
.cta-actions-row{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.ft-main{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:84px 24px 40px;display:grid;grid-template-columns:1.35fr .8fr .8fr 1fr;gap:44px}
.ft-brand img{height:44px;width:auto;margin-bottom:20px}
.ft-brand p{font-size:14.5px;color:var(--muted-dark);line-height:1.7;max-width:330px}
.ft-contact{margin-top:22px;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--muted-dark)}
.ft-contact a{color:#fff;font-weight:600}
.ft-contact a:hover{color:var(--yellow)}
.ft-contact li{display:flex;gap:11px;align-items:flex-start}
.ft-contact svg{flex:none;margin-top:3px;color:var(--red-bright)}
.ft h4{font:600 13px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:22px}
.ft-links{display:flex;flex-direction:column;gap:12px}
.ft-links a{font-size:14.5px;color:#D8D8DE;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.ft-links a:hover{color:var(--yellow);transform:translateX(3px)}
.ft-social{display:flex;gap:10px;margin-top:20px}
.ft-social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s}
.ft-social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.ft-mark{position:relative;z-index:1;text-align:center;font:700 clamp(52px,9.6vw,148px)/1 var(--disp);letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);user-select:none;margin:26px 0 -20px}
.ft-bot{position:relative;z-index:2;border-top:1px solid var(--line-dark);padding:24px;display:flex;align-items:center;justify-content:center;gap:8px 26px;flex-wrap:wrap;font-size:13px;color:var(--muted-dark);text-align:center}
.ft-bot b{color:#fff;font-weight:600}
.ft-badge{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.ft-badge::before{content:"";width:9px;height:9px;background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%)}

/* ---------- Floating action buttons ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;gap:12px}
.fab a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 28px rgba(11,11,13,.3);transition:.25s;position:relative}
.fab a:hover{transform:translateY(-4px) scale(1.05)}
.fab-wa{background:#1EBE57}
.fab-wa::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1EBE57;animation:satPulse 2s ease-out infinite;z-index:-1}
.fab-tel{background:var(--red)}
@keyframes satPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,0,.2,1),transform .8s cubic-bezier(.2,0,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.marq-track,.crops-row{animation:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1120px){
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .hd-tel span{display:none}
  .m-grid{grid-template-columns:repeat(2,1fr)}
  .m-card.feat{grid-column:span 2}
  .bento{grid-template-columns:repeat(2,1fr)}
  .ft-main{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:860px){
  .sec{padding:76px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  .p-hero-grid{grid-template-columns:1fr;gap:36px}
  .cta-in{grid-template-columns:1fr;padding:64px 24px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .b-grid{grid-template-columns:1fr 1fr}
  .feat-list{grid-template-columns:1fr}
  .hd .btn{display:none}
}
@media(max-width:640px){
  .m-grid{grid-template-columns:1fr}
  .m-card.feat{grid-column:span 1;flex-direction:column}
  .m-card.feat .m-card-img{aspect-ratio:4/3}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .b-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento-tile.span2{grid-column:span 1}
  .form-grid{grid-template-columns:1fr}
  .ft-main{grid-template-columns:1fr;gap:36px;padding-top:64px}
  .p-kpis{grid-template-columns:repeat(3,1fr);gap:10px}
  .hd-tel{display:none}
  .page-hero{padding:140px 0 56px}
}

/* ============================================================
   BRAND MOTION — the SAT corner mark, put to work   (v1.1)
   The yellow triangle from the logo is the one shape the whole
   site animates: scroll rail, kickers, hero, cards, chips.
   ============================================================ */

/* ---------- Scroll progress rail ---------- */
.sat-prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,var(--red) 0,var(--red-bright) 42%,var(--yellow) 100%)}

/* ---------- Reusable mark ---------- */
.mark{display:inline-block;width:.72em;height:.72em;background:var(--yellow);
  clip-path:polygon(0 0,100% 0,100% 100%);flex:none}

/* ---------- Kicker mark: springs in with its block, spins on hover ---------- */
.kick::before{transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.rv:not(.in) .kick::before{transform:scale(.25) rotate(-135deg)}
.kick:hover::before{animation:satMarkSpin .7s cubic-bezier(.4,0,.2,1)}
@keyframes satMarkSpin{50%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg)}}

/* ---------- Hero corner mark unfolds on load ---------- */
.hero-tri{animation:satTriIn 1.05s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes satTriIn{from{clip-path:polygon(100% 0,100% 0,100% 0)}
                    to{clip-path:polygon(100% 0,0 0,100% 100%)}}

@keyframes satDrift{0%,100%{transform:translate3d(0,0,0) rotate(0)}
  33%{transform:translate3d(14px,-22px,0) rotate(120deg)}
  66%{transform:translate3d(-11px,-9px,0) rotate(240deg)}}

/* ---------- Floating mark field ----------
   The logo triangle, scattered through the dark sections. Every mark
   gets its own size, tint, path and tempo from JS, so nothing marches
   in step and each page load is arranged differently.              */
.sat-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.sat-mark{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  background:var(--c);opacity:var(--o);clip-path:polygon(0 0,100% 0,100% 100%);
  will-change:transform;
  animation:satWander var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes satWander{
  0%  {transform:translate3d(0,0,0) rotate(var(--r0))}
  25% {transform:translate3d(var(--x1),var(--y1),0) rotate(var(--r1))}
  50% {transform:translate3d(var(--x2),var(--y2),0) rotate(var(--r2))}
  75% {transform:translate3d(var(--x3),var(--y3),0) rotate(var(--r3))}
  100%{transform:translate3d(var(--x4),var(--y4),0) rotate(var(--r4))}
}

/* ---------- Machine card: the mark cuts the corner on hover ---------- */
.m-card::after{content:"";position:absolute;top:0;right:0;width:0;height:0;z-index:5;
  pointer-events:none;background:var(--yellow);clip-path:polygon(100% 0,0 0,100% 100%);
  transition:width .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1)}
.m-card:hover::after{width:46px;height:46px}

/* ---------- Crop chips lift, discs spin ---------- */
.crop-chip{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.crop-chip:hover{transform:translateY(-3px);border-color:var(--yellow)}
.crop-chip img,.crops-strip .chip img{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.crop-chip:hover img,.crops-strip .chip:hover img{transform:scale(1.14) rotate(-8deg)}
.crops-strip .chip{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.crops-strip .chip:hover{transform:translateY(-3px);border-color:var(--yellow)}

@media(prefers-reduced-motion:reduce){
  .sat-prog{display:none}
  .hl{transition:none}
  .hero-tri,.kick:hover::before{animation:none}
  .sat-field{display:none}
  .rv:not(.in) .kick::before{transform:none}
}

/* ============================================================
   HERO MACHINE CAROUSEL — the range, one at a time   (v1.2)
   ============================================================ */
.hcar{position:relative}
.hcar-stage{position:relative;width:100%;aspect-ratio:850/478}

.hcar-slide{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;z-index:1;
  transform:translate3d(70px,0,0) scale(.92) rotate(1.8deg);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .95s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .95s}
.hcar-slide.is-on{opacity:1;visibility:visible;transform:none;z-index:3;transition-delay:0s,0s,0s}
.hcar-slide.is-out{opacity:0;visibility:visible;z-index:2;
  transform:translate3d(-58px,0,0) scale(.94) rotate(-1.3deg)}
.hcar-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}

/* oversized model code ghosted behind the machine */
.hcar-ghost{position:absolute;left:50%;top:1%;z-index:1;pointer-events:none;white-space:nowrap;
  transform:translateX(-50%);
  font:700 clamp(84px,12.5vw,186px)/1 var(--disp);letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.085);
  transition:opacity .45s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.hcar-ghost.is-swap{opacity:0;transform:translateX(-50%) translateY(-14px)}

.hcar-name{position:absolute;z-index:5;top:2px;right:0;text-align:right;max-width:230px;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hcar-name:hover .hcar-title{color:var(--yellow)}
.hcar-model{display:block;font:700 12px/1 var(--disp);letter-spacing:.2em;color:var(--red-bright)}
.hcar-title{display:block;margin-top:8px;font:600 15.5px/1.3 var(--disp);color:#fff;transition:color .25s}

.hcar-badge{position:absolute;z-index:5;bottom:6%;left:0;display:flex;align-items:center;gap:12px;
  background:rgba(20,20,22,.86);backdrop-filter:blur(10px);border:1px solid var(--line-dark);
  border-radius:16px;padding:14px 18px;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hcar-badge b{display:inline-flex;align-items:baseline;gap:5px;font:700 26px/1 var(--disp);color:var(--yellow)}
.hcar-badge b i{font:700 14px/1 var(--disp);font-style:normal}
.hcar-badge .hcar-lab{font:600 11.5px/1.4 var(--disp);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-dark)}
.hcar-name.is-swap,.hcar-badge.is-swap{opacity:0;transform:translateY(10px)}

/* timer segments — the active one fills over the dwell */
.hcar-dots{position:absolute;z-index:5;right:0;bottom:-18px;display:flex;gap:8px}
.hcar-dot{position:relative;width:34px;height:4px;padding:0;border:0;border-radius:99px;
  background:rgba(255,255,255,.16);overflow:hidden;cursor:pointer;transition:width .3s}
.hcar-dot i{position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red-bright),var(--yellow))}
.hcar-dot.is-done i{transform:scaleX(1)}
.hcar-dot.is-on{width:46px}
.hcar-dot.is-on i{animation:hcarFill var(--dwell,4600ms) linear forwards}
.hcar-dot:hover{background:rgba(255,255,255,.3)}
@keyframes hcarFill{to{transform:scaleX(1)}}

@media(max-width:1120px){
  .hcar-name{position:static;text-align:left;max-width:none;margin-bottom:14px}
  .hcar-dots{bottom:-14px;right:auto;left:0}
}
@media(max-width:620px){
  .hcar-badge{padding:11px 14px;gap:9px}
  .hcar-badge b{font-size:21px}
  .hcar-ghost{font-size:clamp(64px,20vw,110px)}
}
@media(prefers-reduced-motion:reduce){
  .hcar-slide{transition:opacity .2s linear;transform:none}
  .hcar-slide.is-out{transform:none}
  .hcar-ghost,.hcar-name,.hcar-badge{transition:none}
  .hcar-dot.is-on i{animation:none;transform:scaleX(1)}
}


/* ===== SERVICE REGIONS ===== */
.ft-reg-sep{max-width:1240px;margin:0 auto 34px;width:calc(100% - 48px);border-top:1px solid var(--line-dark)}
.ft-regions{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 24px 40px}
.ft-reg-block + .ft-reg-block{margin-top:26px}
.ft-reg-links{display:flex;flex-wrap:wrap;gap:11px 22px}
.ft-reg-links a{font-size:14px;color:#D8D8DE;transition:color .2s}
.ft-reg-links a:hover{color:var(--yellow)}
.ft-reg-links a[aria-current="page"]{color:var(--yellow);font-weight:600}

/* ===== NEARBY REGIONS (location pages) ===== */
.near-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px}
.near-card{display:block;padding:21px 22px;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.near-card:hover{transform:translateY(-3px);border-color:var(--yellow)}
.near-card .nc-k{display:block;margin-bottom:9px;font:600 11.5px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.near-card .nc-n{display:block;font:700 19px/1.2 var(--disp);color:var(--ink)}
.near-card .nc-a{display:inline-block;margin-top:11px;font-size:13.5px;font-weight:600;color:var(--red)}
@media(max-width:640px){
  .ft-regions{padding-bottom:30px}
  .ft-reg-links{gap:10px 18px}
  .near-grid{grid-template-columns:1fr 1fr;gap:11px}
  .near-card{padding:16px}
  .near-card .nc-n{font-size:16px}
  .near-card .nc-a{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .near-card{transition:none}
  .near-card:hover{transform:none}
}

/* ===== ARTICLE BYLINE ===== */
.post-by{display:flex;align-items:center;gap:14px;margin-top:26px}
.post-by>img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--yellow)}
.post-by a{font:600 15px/1.2 var(--disp);color:#fff;display:block}
.post-by a:hover{color:var(--yellow)}
.post-by span{display:block;margin-top:3px;font-size:13px;color:var(--muted-dark)}

/* ===== DATASHEET DOWNLOAD ===== */
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:24px;padding:20px 24px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper-2)}
.ds-txt b{display:block;font:700 16px/1.3 var(--disp);color:var(--ink)}
.ds-txt span{display:block;margin-top:5px;font-size:14px;color:var(--muted)}
.ds-row .btn{flex:none}
.ds-row .btn em{font-style:normal;opacity:.6;font-weight:500;margin-left:2px}
@media(max-width:600px){.ds-row{padding:16px 18px}.ds-row .btn{width:100%;justify-content:center}}

/* ===== VISIBLE PRICE RANGE ===== */
.sat-price-range{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== AUTHOR PROFILE LINK ===== */
.au-li{display:inline-flex;align-items:center;gap:9px;font:600 14.5px/1 var(--disp);color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:3px;transition:color .2s}
.au-li:hover{color:var(--red)}

/* ===== VIDEO FACADE ===== */
.vid{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);aspect-ratio:16/9;cursor:pointer}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.3,0,.2,1),opacity .3s}
.vid:hover img{transform:scale(1.03);opacity:.88}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border:0;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.28s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.vid-play svg{margin-left:4px}
.vid:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-play:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.vid-cap{position:absolute;left:18px;bottom:16px;font:600 13px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(11,11,13,.72);padding:9px 14px;border-radius:999px;backdrop-filter:blur(6px)}
@media(max-width:600px){.vid-play{width:64px;height:64px}.vid-play svg{width:26px;height:26px}.vid-cap{display:none}}
@media(prefers-reduced-motion:reduce){.vid img,.vid-play{transition:none}.vid:hover img{transform:none}}

/* ===== SEO/UX fixes — 30 Aug 2026 ===== */
/* Tap target. Was 44x44, under the 48x48 minimum. Only the burger was
   undersized; .mnav-x was already 46 and is raised to match. */
.hd-burger{width:48px;height:48px}
.mnav-x{width:48px;height:48px}

/* FAQ answers are continuous prose, not tabular data - 16px reads better.
   .spec-table and .article table stay at 15px on purpose: they already
   carry min-width:560px and enlarging them worsens horizontal scroll. */
.faq-item div{font-size:16px}

/* The fixed WhatsApp/call buttons sit bottom-right and, at narrow widths,
   landed on top of the third .p-kpi card in the hero - "<0.5%  Crop loss"
   was unreadable in the first viewport. Measured: collides at 360/375/390,
   clear at 412/414, so the breakpoint is 400px. Two columns puts the third
   card on row 2 in the LEFT column, structurally away from a bottom-right
   FAB rather than coincidentally clear of it. */
@media(max-width:400px){.p-kpis{grid-template-columns:repeat(2,1fr);padding-right:56px}}

/* ============================================================
   STAFF LOGIN  —  SAT Agrotrack workspace, hosted at /app/
   Three entry points, one look: a pill in the header bar, a row in the
   mobile overlay, a plain link in the footer's Company column.
   Deliberately quieter than "Get a Quote": this is for staff, and the
   red pill has to stay the one thing a visiting farmer reaches for.
   ============================================================ */
.hd-login{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--disp);color:var(--ink);padding:11.5px 19px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.72);white-space:nowrap;transition:.28s cubic-bezier(.4,0,.2,1)}
.hd-login svg{flex:none;color:var(--muted);transition:color .28s}
.hd-login:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px)}
.hd-login:hover svg{color:var(--red)}
.hd-login:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.mnav-login{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:16px;border:1px solid var(--line-dark);background:rgba(255,255,255,.05);color:#fff;transition:background .25s}
.mnav-login:active{background:rgba(255,255,255,.1)}
.mnav-login-ico{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(254,0,0,.15);color:var(--red-bright);display:flex;align-items:center;justify-content:center}
.mnav-login-txt{flex:1;display:flex;flex-direction:column;gap:5px;font:700 16px/1 var(--disp)}
.mnav-login-txt em{font:500 12.5px/1 var(--disp);font-style:normal;color:var(--muted-dark);letter-spacing:.03em}
.mnav-login-arw{flex:none;color:var(--muted-dark)}

/* Below 860px the header drops every button (see the breakpoint above), so
   the mobile overlay's row is the way in on a phone. */
@media(max-width:860px){.hd-login{display:none}}