/* Public landing page. Light by default, dark when the device asks for it or the visitor picks it (html[data-theme]). */
:root {
    --bg: #f6f8f5; --paper: #ffffff; --ink: #12241d; --muted: #52655c; --line: #dde6e0;
    --brand: #1a5c96; --leaf: #1f7a3d; --btn: #17693a; --btn-ink: #ffffff; --tint: #e7f2ea;
    --shadow: 0 30px 60px -32px rgb(18 50 36 / 35%), 0 2px 6px rgb(18 50 36 / 6%);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg: #050807; --paper: #0e1512; --ink: #f2f7f4; --muted: #a3b4ab; --line: #1f2c26;
    --brand: #ffffff; --leaf: #4fbf73; --btn: #2f9e57; --btn-ink: #04130b; --tint: #10231a;
    --shadow: 0 30px 70px -30px rgb(0 0 0 / 90%), 0 0 0 1px rgb(255 255 255 / 6%);
    color-scheme: dark;
} }
:root[data-theme="dark"] {
    --bg: #050807; --paper: #0e1512; --ink: #f2f7f4; --muted: #a3b4ab; --line: #1f2c26;
    --brand: #ffffff; --leaf: #4fbf73; --btn: #2f9e57; --btn-ink: #04130b; --tint: #10231a;
    --shadow: 0 30px 70px -30px rgb(0 0 0 / 90%), 0 0 0 1px rgb(255 255 255 / 6%);
    color-scheme: dark;
}
/* one image per theme */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-light { display: none; } :root:not([data-theme="light"]) .only-dark { display: revert; } }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: revert; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.02em; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.eyebrow { font: 700 .75rem/1 Montserrat, Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); margin-bottom: 1rem; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.logo img { height: 2.4rem; width: auto; }
.tools { display: flex; align-items: center; gap: .6rem; }
.pdd-locale { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.pdd-locale a { min-width: 2.1rem; padding: .25rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-align: center; text-decoration: none; color: var(--muted); }
.pdd-locale a.is-active { background: var(--tint); color: var(--leaf); }
.theme { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.theme svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1.15rem; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: .9rem; text-decoration: none; transition: filter .15s, transform .08s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .8rem 1.7rem; font-size: 1rem; }
:is(a, button):focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

/* hero */
.hero { display: grid; gap: 3rem; padding-block: clamp(3rem, 8vw, 6rem) 2rem; }
.hero-text { max-width: 46rem; }
.hero h1 { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4rem); font-weight: 800; color: var(--brand); }
.lead { margin-top: 1.4rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--muted); max-width: 40rem; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.link:hover { border-color: var(--leaf); }
.frame { margin: 0; border-radius: 1rem; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line); }
.hero-shot { aspect-ratio: 16 / 8.2; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* purpose */
.purpose { padding-block: clamp(3.5rem, 8vw, 6rem); }
.purpose h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 700; max-width: 44rem; }
.goals { list-style: none; counter-reset: g; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 3rem 0 0; padding: 0; }
.goals li { counter-increment: g; padding-top: 1.25rem; border-top: 2px solid var(--line); }
.goals li::before { content: counter(g, decimal-leading-zero); font: 700 .8rem Montserrat, sans-serif; color: var(--leaf); letter-spacing: .08em; }
.goals h3 { margin-top: .6rem; font-size: 1.2rem; font-weight: 700; }
.goals p { margin-top: .5rem; color: var(--muted); font-size: 1rem; }

/* features */
.features { padding-bottom: clamp(3rem, 7vw, 5rem); }
.feature { display: grid; gap: 2rem; align-items: center; padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.feature h2, .band h2, .closing h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); font-weight: 700; }
.feature p, .band p, .closing p { margin-top: .9rem; color: var(--muted); max-width: 30rem; }
.crop-agents { aspect-ratio: 16 / 10; }
.crop-agents img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; }
@media (min-width: 56rem) {
    .feature { grid-template-columns: 5fr 7fr; gap: 4rem; }
    .feature.flip > div { order: 2; }
}
.band { margin-top: 1rem; padding: clamp(1.75rem, 4vw, 3rem); border-radius: 1.25rem; background: var(--tint); }
.band p { max-width: 44rem; }

/* closing + footer */
.closing { text-align: center; padding-block: clamp(3rem, 8vw, 5.5rem); border-top: 1px solid var(--line); }
.closing p { margin-inline: auto; margin-bottom: 1.75rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.75rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }

@media (max-width: 34rem) { .logo img { height: 1.75rem; } .tools .btn { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }