/* ==========================================================================
   AgroDealer — main stylesheet. Tokens live in style.css (:root + @font-face).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--kali);
	background: var(--haze);
}

h1, h2, h3 { font-family: var(--font-display); color: var(--kali); margin: 0 0 .5em; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* Indic display headroom: 8% smaller, more line-height for matras. */
html[lang^="gu"] h1, html[lang^="hi"] h1, html[lang^="mr"] h1,
html[lang^="ta"] h1, html[lang^="pa"] h1, html[lang^="te"] h1, html[lang^="kn"] h1 {
	font-size: calc(var(--fs-hero) * .92);
	line-height: 1.25;
}
html[lang^="gu"] h2, html[lang^="hi"] h2, html[lang^="mr"] h2,
html[lang^="ta"] h2, html[lang^="pa"] h2, html[lang^="te"] h2, html[lang^="kn"] h2 {
	font-size: calc(var(--fs-h2) * .92);
	line-height: 1.25;
}

/* Per-language body/display font stacks. */
body.agrodealer-lang-gu { --font-display: 'Baloo Bhai 2', 'Fraunces', serif; --font-body: 'Mukta Vaani', 'Hanken Grotesk', sans-serif; }
body.agrodealer-lang-hi, body.agrodealer-lang-mr { --font-display: 'Baloo 2', 'Fraunces', serif; --font-body: 'Mukta', 'Hanken Grotesk', sans-serif; }
body.agrodealer-lang-ta { --font-body: 'Mukta Malar', 'Hanken Grotesk', sans-serif; }
body.agrodealer-lang-pa { --font-body: 'Mukta Mahee', 'Hanken Grotesk', sans-serif; }
body.agrodealer-lang-te { --font-body: 'Hind Guntur', 'Hanken Grotesk', sans-serif; }
body.agrodealer-lang-kn { --font-body: 'Hind Mysuru', 'Hanken Grotesk', sans-serif; }

/* Focus rings — never removed without a replacement. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--neem);
	outline-offset: 2px;
}

.ad-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp); }

.ad-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 .75em;
}

.ad-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--neem); color: var(--paper);
	padding: 12px 18px; z-index: 1000; border-radius: 0 0 var(--r-sm) 0;
}
.ad-skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.ad-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 26px;
	border-radius: var(--r-sm);
	font-weight: 600; font-size: 1rem;
	border: none; cursor: pointer;
	text-decoration: none;
	transition: transform var(--dur) var(--ease), background .2s var(--ease);
}
.ad-btn .ad-icon--arrow { transition: transform .2s var(--ease); color: var(--sack); }
.ad-btn:hover .ad-icon--arrow { transform: translateX(4px); }
.ad-btn--primary { background: var(--wheat); color: var(--kali); }
.ad-btn--primary:hover { transform: translateY(-2px); }
.ad-btn--full { width: 100%; }

/* ================================================================
   HERO
   ================================================================ */
/*
 * .hero is the taller scroll runway (180svh); .hero__pin is the
 * viewport-height box that sticks to the top of the screen while you
 * scroll through that runway. Without the extra runway, the whole section
 * scrolls off-screen within one viewport height, leaving the parallax
 * differential no room to actually become visible before it's gone.
 */
.hero {
	position: relative;
	height: 180svh;
	min-height: 960px;
}
.hero__pin {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 640px;
	overflow: hidden;
	background: var(--kali);
	isolation: isolate;
}

.hero__scene { position: absolute; inset: 0; }
.hero__layer {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	will-change: transform;
}
.hero__sun-glow { animation: ad-sun-breathe 14s ease-in-out infinite; transform-origin: 1152px 234px; }
@keyframes ad-sun-breathe { 0%, 100% { r: 280; } 50% { r: 300; } }

.cloud--1 { animation: ad-cloud-drift 90s linear infinite; }
.cloud--2 { animation: ad-cloud-drift 140s linear infinite; }
.cloud--3 { animation: ad-cloud-drift 210s linear infinite; }
@keyframes ad-cloud-drift { from { transform: translateX(-40px); } to { transform: translateX(1640px); } }

/* Wheat stalks: one JS-written --wind value drives every stalk in pure CSS. */
.hero__crop-mid, .hero__crop-fore { color: var(--leaf); }
.stalk {
	transform: translate(calc(var(--sx) * 1px), calc(var(--sy) * 1px)) scale(var(--sscale));
	color: inherit;
}
.stalk__stem, .stalk__awn { transform-origin: 50% 100%; }
.stalk__ear { transform-origin: 50% 100%; }
.stalk {
	--gust: 0;
}
.stalk > * {
	transform: rotate(calc(var(--wind, 0) * var(--speed) * 2.4deg + var(--phase) * .6deg + var(--srot) * 1deg + var(--gust) * 1.8deg))
	           translateX(calc(var(--gust) * 2px));
	transform-origin: 50% 100%;
}
.hero__crop-fore .stalk > * { --amp: 1.6; }
.hero__crop-fore .stalk { filter: blur(.4px); }
.hero__crop-fore .stalk:nth-of-type(-n+8) { filter: blur(1.2px); }

.hero__dust { position: absolute; inset: 0; pointer-events: none; }
.mote {
	position: absolute; width: 4px; height: 4px; border-radius: 50%;
	background: var(--paper); opacity: .2;
	animation: ad-dust-rise linear infinite;
}
.mote--1 { left: 62%; bottom: 18%; animation-duration: 22s; }
.mote--2 { left: 68%; bottom: 12%; animation-duration: 26s; animation-delay: -6s; }
.mote--3 { left: 58%; bottom: 22%; animation-duration: 30s; animation-delay: -14s; }
.mote--4 { left: 72%; bottom: 15%; animation-duration: 24s; animation-delay: -3s; }
@keyframes ad-dust-rise { from { transform: translateY(0); opacity: .2; } to { transform: translateY(-220px); opacity: 0; } }

/* Farmer */
.farmer__khes { animation: ad-khes-wave 3.4s ease-in-out infinite alternate; }
@keyframes ad-khes-wave { from { transform: rotate(-6deg); } to { transform: rotate(9deg); } }
.farmer__torso { animation: ad-breathe 7s ease-in-out infinite; }
@keyframes ad-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.farmer__dhoti { transform-origin: 50% 100%; transform: skewX(calc(var(--wind, 0) * 1.5deg)); }

/* Car */
.car__sweep { animation: ad-sweep 11s linear infinite; }
@keyframes ad-sweep { 0% { transform: translateX(-20px); } 30%, 100% { transform: translateX(70px); } }

/* Scrim + text */
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(16,31,23,.55), transparent 60%);
	pointer-events: none;
}
.hero__text {
	position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vw, 4.5rem);
	max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp);
}
.hero__eyebrow { color: var(--wheat); }
.hero__h1 {
	color: var(--paper);
	font-size: var(--fs-hero);
	line-height: .96;
	letter-spacing: -.02em;
	font-weight: 600;
	font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 1;
	max-width: 16ch;
}
.hero__lead { color: var(--haze); opacity: .8; font-size: var(--fs-lead); max-width: 42ch; }
.hero__ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 1.5rem; }
.hero__link { position: relative; font-weight: 600; color: var(--paper); text-decoration: none; }
.hero__link::after {
	content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
	background: var(--paper); transition: right var(--dur) var(--ease);
}
.hero__link:hover::after, .hero__link:focus-visible::after { right: 0; }

.hero__scroll-cue {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	width: 1px; height: 40px; background: rgba(250,251,247,.3);
	overflow: hidden;
}
.hero__scroll-cue span {
	display: block; width: 1px; height: 6px; background: var(--wheat);
	animation: ad-scroll-cue 2.4s ease-in-out infinite;
}
@keyframes ad-scroll-cue { 0% { transform: translateY(-6px); } 100% { transform: translateY(46px); } }

/* Entrance (JS adds .is-in on load; CSS handles the stagger via delay vars) */
.hero__scene { opacity: 0; transition: opacity .8s var(--ease); }
.hero.is-loaded .hero__scene { opacity: 1; }
.hero__eyebrow, .hero__h1, .hero__lead, .hero__ctas {
	opacity: 0; transform: translateY(16px);
	transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero.is-loaded .hero__eyebrow { transition-delay: .8s; opacity: 1; transform: none; }
.hero.is-loaded .hero__h1      { transition-delay: .89s; opacity: 1; transform: none; }
.hero.is-loaded .hero__lead    { transition-delay: .98s; opacity: 1; transform: none; }
.hero.is-loaded .hero__ctas    { transition-delay: 1.07s; opacity: 1; transform: none; }

/* Mobile recomposition — reposition, not scale (§3.6) */
@media (max-width: 820px) {
	.hero__hills, .hero__field-far, .hero__field-mid { transform: translateY(-8%) scaleY(1.08); transform-origin: top; }
	.car { transform: translate(290px, 770px) scale(.62); }
	.farmer { transform: translate(990px, 800px) scale(1.3); }
	.hero__crop-mid .stalk:nth-of-type(n+41) { display: none; }
	.hero__crop-fore .stalk:nth-of-type(n+19) { display: none; }
	.hero__crop-fore .stalk { filter: none !important; }
	.cloud--3 { display: none; }
	.hero__dust { display: none; }
	.hero__h1 { font-size: clamp(2.75rem, 9vw, 3.5rem); }
	.hero__scrim { background: linear-gradient(to top, rgba(16,31,23,.65), transparent 65%); }
}

.ad-lowpower .hero__crop-mid .stalk:nth-of-type(even),
.ad-lowpower .hero__crop-fore .stalk:nth-of-type(even) { display: none; }

@media (prefers-reduced-motion: reduce) {
	.hero__scene, .hero__eyebrow, .hero__h1, .hero__lead, .hero__ctas { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hero__sun-glow, .cloud--1, .cloud--2, .cloud--3, .farmer__khes, .farmer__torso, .car__sweep, .hero__scroll-cue span, .mote {
		animation: none !important;
	}
	.stalk > * { transform: none !important; }
	.hero__layer { transform: none !important; }
}

/* ================================================================
   FEATURES
   ================================================================ */
.features { background: var(--haze); padding: var(--section-y) 0; }
.section__head { max-width: 640px; margin: 0 auto 3rem; text-align: left; }
.section__head h2 { font-size: var(--fs-h2); line-height: 1.05; }
.section__lead { color: var(--muted); font-size: var(--fs-lead); }

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp);
}
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 28px;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-card:hover, .feature-card:focus-within { transform: translateY(-4px); border-color: var(--leaf); }
.feature-card__icon { color: var(--neem); margin-bottom: 16px; }
.feature-card__icon .ad-icon path { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease); }
.feature-card:hover .ad-icon path, .feature-card:focus-within .ad-icon path { stroke-dashoffset: 0; animation: ad-draw .5s var(--ease); }
@keyframes ad-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.feature-card h3 { font-size: 1.15rem; margin-bottom: .4em; }
.feature-card p { color: var(--muted); margin: 0; font-size: .96rem; }

.ad-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ad-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ad-reveal { opacity: 1; transform: none; transition: none; } }

/* ================================================================
   PRICING
   ================================================================ */
.pricing {
	position: relative;
	background: var(--kali);
	padding: var(--section-y) 0;
	overflow: hidden;
}
.pricing__furrows {
	position: absolute; inset: -20% -20%;
	background-image: repeating-linear-gradient(8deg, color-mix(in srgb, var(--neem) 6%, transparent) 0 1px, transparent 1px 34px);
	pointer-events: none;
}
.pricing-card {
	position: relative;
	background: var(--paper);
	max-width: 460px;
	margin: 0 auto;
	border-radius: var(--r-md);
	box-shadow: var(--shadow);
	padding: 40px 36px;
	text-align: left;
}
.pricing-card__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.pricing-card__price { display: flex; align-items: baseline; gap: .4em; margin: 0; position: relative; padding-bottom: .3em; width: fit-content; }
.pricing-card__amount {
	font-family: var(--font-display); font-weight: 600; font-size: calc(var(--fs-hero) * .8);
	border-bottom: 3px solid var(--wheat); line-height: 1;
}
.pricing-card__per { font-family: var(--font-body); font-size: var(--fs-body); color: var(--muted); }
.pricing-card__line { color: var(--muted); margin: 1rem 0 1.5rem; }
.pricing-card__ticks { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .65rem; }
.pricing-card__ticks li { display: flex; align-items: center; gap: .6em; }
.pricing-card__ticks .ad-icon { color: var(--leaf); flex-shrink: 0; }
.pricing-card__renewal { text-align: center; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--muted); margin: 1rem 0 0; }

/* ================================================================
   CONTACT
   ================================================================ */
.contact { background: var(--haze); padding: var(--section-y) 0; }
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__direct { margin-top: 2rem; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.contact__direct-label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.contact__phone, .contact__whatsapp {
	display: inline-flex; align-items: center; gap: .6em;
	text-decoration: none; font-weight: 600; color: var(--kali);
}
.contact__phone .ad-icon, .contact__whatsapp .ad-icon { color: var(--neem); width: 22px; height: 22px; }

.contact__form-wrap { position: relative; }
.ad-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ad-field { display: flex; flex-direction: column; gap: .4rem; }
.ad-field--full { grid-column: 1 / -1; }
.ad-form__error, .ad-form__submit { grid-column: 1 / -1; }
.ad-field label { font-size: .88rem; font-weight: 600; color: var(--kali); }
.ad-field input, .ad-field select, .ad-field textarea {
	height: 48px; font-size: 16px; font-family: inherit;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
	padding: 0 14px; color: var(--kali);
}
.ad-field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.ad-field input:focus, .ad-field select:focus, .ad-field textarea:focus {
	outline: none; border-color: var(--neem);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sack) 25%, transparent);
}
.ad-form__honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.ad-form__error { color: var(--sack); font-size: .9rem; font-weight: 600; margin: 0; }

.ad-form__submit { position: relative; margin-top: .3rem; }
.ad-form__loader { display: none; gap: 4px; }
.ad-form__loader i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ad-loader 1s ease-in-out infinite; }
.ad-form__loader i:nth-child(2) { animation-delay: .15s; }
.ad-form__loader i:nth-child(3) { animation-delay: .3s; }
@keyframes ad-loader { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.is-submitting .ad-form__submit-label { display: none; }
.is-submitting .ad-form__loader { display: inline-flex; }

.ad-form__success {
	text-align: center; padding: 3rem 1rem;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ad-form__success-icon { width: 56px; height: 56px; margin: 0 auto 1rem; }
.ad-form__success-icon path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ad-draw-check .42s var(--ease) forwards; }
@keyframes ad-draw-check { to { stroke-dashoffset: 0; } }
.ad-form__success-title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: .25em; }
.ad-form__success-body { color: var(--muted); margin: 0; }

/* ================================================================
   HEADER / FOOTER / 404
   ================================================================ */
.ad-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--haze) 85%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.ad-header__inner { max-width: var(--maxw); margin: 0 auto; padding: 1rem var(--sp); display: flex; align-items: center; justify-content: space-between; }
.ad-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; text-decoration: none; color: var(--kali); }
.ad-brand .ad-icon--logo { width: 30px; height: 30px; color: var(--neem); }
.ad-footer__inner .ad-icon--logo { width: 22px; height: 22px; color: var(--wheat); vertical-align: -5px; margin-right: 8px; }
.ad-lang-switch { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--neem); }

.ad-footer { background: var(--kali); color: color-mix(in srgb, var(--paper) 70%, transparent); }
.ad-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--sp); display: flex; justify-content: space-between; font-size: .9rem; }

.ad-404 { min-height: 60svh; display: flex; align-items: center; }
.ad-404__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--sp); text-align: center; }