/* v2 · "05:30": the field before dawn, when the system irrigates. Water lines, leaf green, data in mono. */
:root {
  --bg: #070a09; --bg2: #0e1412; --ink: #eef1e8; --mute: #a3ada5; --line: rgba(238, 241, 232, .14);
  --water: #39b6e6; --leaf: #b6e35f; --dawn: #ffb45e; --wet: #7fb2ff;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gut: clamp(1rem, 4vw, 3.5rem);
  --dash-man: #6b756e; --dash-sys: #39b6e6; --dash-ring: #0e1412; --dash-band: #b6e35f; --bad: #ff8a6b;
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #2b3531 var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
::selection { background: var(--leaf); color: var(--bg); }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: .98; text-wrap: balance; margin: 0; }
svg { flex: none; }
a, button, label { touch-action: manipulation; }

/* nav */
.chips-nav { position: absolute; inset: 0 0 auto; z-index: 10; padding: max(1rem, env(safe-area-inset-top)) var(--gut) 0; }
.chips-nav nav { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font: 800 1.05rem var(--display); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.brand svg { width: 28px; height: 28px; }
#menu { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
#menu a { display: inline-block; padding: .5rem 0; font-size: .95rem; color: var(--mute); text-decoration: none; transition: color 160ms ease; }
#menu a[aria-current] { color: var(--ink); }
.nav-login { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; text-decoration: none; transition: border-color 160ms ease; }
.menu-btn { display: none; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 700 .95rem var(--body); cursor: pointer; user-select: none; transition: transform 160ms var(--ease-out); }
.menu-btn:active, .btn:active, .nav-login:active { transform: scale(0.97); }
.menu-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.menu-btn .x, .chips-nav.open .menu-btn .bars { display: none; }
.chips-nav.open .menu-btn .x { display: inline; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  #menu { display: none; position: absolute; top: calc(100% + .5rem); left: var(--gut); right: var(--gut); flex-direction: column; gap: 0; padding: .5rem 1.25rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
  .chips-nav.open #menu { display: flex; animation: menu-in 200ms var(--ease-out); }
  #menu a { display: block; padding: .8rem 0; font-size: 1.1rem; color: var(--ink); }
  #menu li + li { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) { .chips-nav .brand { font-size: 0; gap: 0; } .nav-login { display: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1.5rem; border-radius: 999px; background: var(--leaf); color: var(--bg); font-weight: 700; text-decoration: none; user-select: none; transition: transform 160ms var(--ease-out), background 160ms ease; }
.link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; transition: text-decoration-color 160ms ease; }
.btn svg, .link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  #menu a:hover { color: var(--ink); }
  .nav-login:hover { border-color: var(--ink); }
  .btn:hover { background: #c8ef7c; }
  .link:hover { text-decoration-color: var(--leaf); }
}

/* hero */
.hero, .page-head, .login { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: end; gap: 2.5rem; padding: 8rem var(--gut) clamp(2rem, 5vw, 4rem); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(29, 79, 156, .35), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, rgba(182, 227, 95, .12), transparent 60%), var(--bg); }
[data-lines] canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1.2s ease; }
[data-lines].is-live canvas { opacity: .85; }
/* scrim: keeps headline and lead legible wherever a bright line crosses them */
.hero::before, .page-head::before, .login::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 10, 9, .78), rgba(7, 10, 9, .35) 55%, transparent 80%); }
@media (max-width: 860px) { .hero::before, .page-head::before { background: linear-gradient(to top, rgba(7, 10, 9, .9) 45%, rgba(7, 10, 9, .4) 75%, transparent); } }
.hero::after, .page-head::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; z-index: -1; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero h1 { font-size: clamp(2.7rem, 7.2vw, 6rem); max-width: 13ch; }
.lead { max-width: 52ch; margin: 1.5rem 0 2rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #cdd5cd; }
.w { display: inline-block; animation: rise 620ms var(--ease-out) both; animation-delay: calc(var(--i) * 35ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } }

.telemetry { padding: 1.1rem 1.25rem .6rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(7, 10, 9, .72); backdrop-filter: blur(10px); font-family: var(--mono); font-size: .85rem; animation: fade-in 500ms 500ms var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }
.tel-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--ink); }
.tel-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(182, 227, 95, .18); animation: pulse 2s ease-in-out infinite; }
.tel-h span { margin-left: auto; color: var(--mute); }
@keyframes pulse { 50% { opacity: .35; } }
#zones { list-style: none; margin: 0; padding: 0; }
#zones li { display: grid; grid-template-columns: 1.6rem 1fr auto 5.6rem; align-items: baseline; gap: .1rem .6rem; padding: .6rem 0 .7rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
#zones b { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--mute); border-radius: 4px; font-size: .75rem; }
#zones .crop { font-family: var(--body); }
#zones .kpa { text-align: right; }
#zones .st { justify-self: end; color: var(--leaf); }
#zones li.irr .st { color: var(--water); }
.track { grid-column: 2 / -1; position: relative; height: 4px; margin-top: .45rem; border-radius: 2px; background: linear-gradient(90deg, var(--wet), #3a4540 45%, var(--dawn)); opacity: .9; }
.track .band { position: absolute; inset: -3px auto; border: 1px solid var(--leaf); border-radius: 3px; }
.track .mark { position: absolute; top: -5px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); transition: left 900ms linear; }
#zones li.irr .mark { background: var(--water); box-shadow: 0 0 0 3px rgba(57, 182, 230, .25); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-content: end; padding-top: 7rem; }
  .telemetry { max-width: 460px; }
}

/* truths */
.truths { padding: clamp(4rem, 10vw, 8rem) var(--gut) 0; }
.truths .row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; padding: clamp(1.75rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); }
.truths h2 { font-size: clamp(2rem, 5.4vw, 4.6rem); }
.truths p { margin: 0; max-width: 42ch; color: var(--mute); font-size: 1.1rem; }
@media (max-width: 760px) { .truths .row { grid-template-columns: 1fr; } }

/* motor */
.motor { margin: clamp(4rem, 10vw, 8rem) var(--gut) 0; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: 24px; background: var(--bg2); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 4rem; scroll-margin-top: 1rem; }
.motor-head h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.motor-head p { color: var(--mute); max-width: 40ch; margin: 1.25rem 0 0; }
.engine { display: grid; gap: 1.25rem; min-width: 0; }
.engine-crops { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; margin: 0; padding: 0; }
.engine-crops legend { width: 100%; margin-bottom: .6rem; color: var(--mute); font-size: .9rem; }
.engine-crops label { position: relative; }
.engine-crops input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.engine-crops span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line); border-radius: 999px; user-select: none; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.engine-crops input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.engine-crops input:focus-visible + span { outline: 2px solid var(--leaf); outline-offset: 3px; }
.engine-range { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; color: var(--mute); font-size: .9rem; }
.engine-range output { font: 500 1.1rem var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.engine-range.big output { font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.03em; line-height: 1; }
.engine-range input { width: 100%; margin: .6rem 0 0; accent-color: var(--leaf); height: 32px; cursor: pointer; }
.gauge { position: relative; height: 56px; border-radius: 12px; overflow: hidden; background: linear-gradient(90deg, var(--wet) 0%, #26413f 34%, #2b332c 50%, #4a3a26 75%, var(--dawn) 100%); }
.gauge .band { position: absolute; inset: 0 auto 0 0; width: 100px; transform-origin: 0 0; background: rgba(182, 227, 95, .22); border-inline: 2px solid var(--leaf); transition: transform 300ms var(--ease-out); }
.gauge .needle { position: absolute; inset: -4px auto -4px 0; width: 3px; margin-left: -1.5px; background: var(--ink); box-shadow: 0 0 0 4px rgba(7, 10, 9, .35); }
.gauge-ticks { position: relative; height: 1.2rem; font: .78rem var(--mono); color: var(--mute); }
.gauge-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gauge-ticks span:first-child { transform: none; }
.gauge-ticks span:last-child { transform: translateX(-100%); }
@media (max-width: 520px) { .gauge-ticks span:nth-child(2), .gauge-ticks span:nth-child(4) { display: none; } }
.decision { padding-top: 1.25rem; border-top: 1px solid var(--line); min-height: 9.5rem; }
.status { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; font: 800 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--display); letter-spacing: -0.02em; }
.status i { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--leaf); }
.status[data-s="agua"] i { background: var(--water); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.status[data-s="seco"] i { background: var(--dawn); border-radius: 2px; }
.status[data-s="falha"] i { background: transparent; border: 2px solid var(--wet); }
#e-why { margin: 0; color: var(--mute); max-width: 60ch; }
@media (max-width: 900px) { .motor { grid-template-columns: 1fr; } }

/* harvest */
.harvest { padding: clamp(4rem, 10vw, 8rem) var(--gut) 0; }
.harvest h2 { font-size: clamp(2rem, 5vw, 4.4rem); max-width: 22ch; }
.harvest h2 em { font-style: normal; color: var(--water); }
.harvest-sub { max-width: 60ch; margin: 1.25rem 0 3rem; color: var(--mute); font-size: 1.1rem; }
.liters { margin: 0 0 2rem; }
.liters figcaption { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1rem; font-size: .9rem; color: var(--mute); }
.liters .k::before { content: ""; display: inline-block; width: 14px; height: 8px; margin-right: .45rem; border-radius: 2px; vertical-align: middle; }
.k.manual::before { background: #59625c; } .k.system::before { background: var(--water); }
.liters .unit { margin-left: auto; font-family: var(--mono); }
.liters dl { margin: 0; }
.liters dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--line); }
.liters dt { font-weight: 700; }
.liters dd { margin: 0; display: grid; gap: 4px; }
.bar { display: block; width: var(--v); min-width: 4.5rem; padding: .3rem .6rem; border-radius: 0 4px 4px 0; font: .82rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.bar.manual { background: #59625c; color: var(--ink); }
.bar.system { background: var(--water); color: var(--bg); }
@media (max-width: 520px) { .liters dl > div { grid-template-columns: 1fr; gap: .5rem; } }

/* cta + footer */
.cta { margin: clamp(5rem, 12vw, 9rem) var(--gut) 0; padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.cta h2 { font-size: clamp(2.4rem, 7vw, 6rem); max-width: 12ch; }
footer { margin-top: 3rem; padding: 3rem var(--gut) max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--mute); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.foot-grid .brand { color: var(--ink); }
.foot-grid p { margin: .75rem 0 0; max-width: 36ch; }
.foot-h { color: var(--ink); font-weight: 700; margin: 0 0 .5rem !important; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li a { display: inline-block; padding: .3rem 0; text-decoration: none; }
footer .soon { opacity: .7; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
footer small { font-family: var(--mono); }
.ver { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.ver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { footer li a[href]:hover { color: var(--ink); } }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w, .telemetry { animation: none; }
  .tel-h i { animation: none; }
  .track .mark, .gauge .band { transition: none; }
}

/* ---- inner pages ---- */
.page-head { min-height: 78svh; grid-template-columns: 1fr; }
.page-head h1 { font-size: clamp(2.5rem, 6.2vw, 5.6rem); max-width: 16ch; }
.page-head .lead { margin-bottom: 0; }
main > section:not(.hero, .page-head, .login, .motor, .cta) { padding: clamp(4rem, 10vw, 8rem) var(--gut) 0; }
main > section > h2, .split h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); max-width: 22ch; }
main > section > h2 { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: end; }
.split.top { align-items: start; }
.big-p { margin: 0; max-width: 50ch; font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: #cdd5cd; }
.side-p { color: var(--mute); max-width: 44ch; margin: 1rem 0 0; }
.rows { margin: 0; }
.rows > div { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.rows dt { font: 700 1.2rem/1.3 var(--display); letter-spacing: -0.01em; }
.rows dd { margin: .4rem 0 0; color: var(--mute); max-width: 60ch; }
.rows.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
@media (max-width: 900px) { .split, .rows.two { grid-template-columns: minmax(0, 1fr); } }

.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.person { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 20px; background: var(--bg2); }
.person h3 { margin: 0; font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--display); letter-spacing: -0.03em; }
.person header p { margin: .5rem 0 0; color: var(--mute); }
.person header b { color: var(--ink); }
.person blockquote { margin: 1.75rem 0; font: 700 clamp(1.2rem, 1.8vw, 1.5rem)/1.3 var(--display); color: var(--leaf); text-wrap: balance; }
.person dl { margin: 0; }
.person dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.person dt { color: var(--mute); font-size: .9rem; }
.person dd { margin: 0; }
@media (max-width: 860px) { .people-grid { grid-template-columns: 1fr; } }

.pairs ol { list-style: none; margin: 0; padding: 0; }
.pairs li { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.2fr); align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.pairs span { font: 700 clamp(1.3rem, 2.2vw, 1.9rem)/1.15 var(--display); letter-spacing: -0.02em; }
.pairs svg { width: 32px; height: 32px; fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pairs p { margin: 0; color: var(--mute); }
@media (max-width: 760px) { .pairs li { grid-template-columns: 1fr; gap: .6rem; } .pairs svg { transform: rotate(90deg); width: 24px; height: 24px; } }

.photo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; }
.photo-band img { width: 100%; height: 100%; min-height: 360px; max-height: 560px; object-fit: cover; border-radius: 20px; filter: saturate(.85) brightness(.85); }
.photo-band h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.photo-band p { color: var(--mute); max-width: 46ch; margin: 1.25rem 0 2rem; }
@media (max-width: 760px) { .photo-band { grid-template-columns: 1fr; } .photo-band img { min-height: 260px; } }

.crop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.crop-grid .crop { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: var(--bg2); }
.crop img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.8); }
.crop-in { position: absolute; inset: auto 0 0; padding: 4rem 1.25rem 1.25rem; background: linear-gradient(transparent, rgba(7, 10, 9, .94) 45%); }
.crop h3 { margin: 0; font: 800 1.7rem/1 var(--display); letter-spacing: -0.03em; }
.crop p { margin: .4rem 0 0; color: var(--mute); }
.crop p b { font: 500 .95rem var(--mono); color: var(--ink); }
.crop .track { display: block; margin-top: .9rem; }
.scale-note { display: flex; justify-content: space-between; margin: .75rem 0 0; font: .8rem var(--mono); color: var(--mute); }
@media (max-width: 900px) { .crop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .crop-grid { grid-template-columns: 1fr; } .crop-grid .crop { aspect-ratio: 4 / 3; } }

.drawing { margin: 0 0 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 20px; background: var(--bg2); overflow-x: auto; }
.drawing svg { display: block; width: 100%; min-width: 760px; height: auto; }
.drawing text { font-family: var(--body); fill: var(--ink); }
.drawing .t-2 { fill: var(--mute); }
.flowing { stroke-dasharray: 6 6; animation: flow 900ms linear infinite; }
@keyframes flow { to { stroke-dashoffset: -12; } }

.figures .row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--line); }
.fig { margin: 0; font: 800 clamp(3rem, 8vw, 6rem)/.9 var(--display); letter-spacing: -0.04em; color: var(--water); font-variant-numeric: tabular-nums; }
.fig span { color: var(--mute); font-size: .45em; letter-spacing: 0; }
.figures .row p:last-child { margin: 0; max-width: 42ch; color: var(--mute); font-size: 1.1rem; }
@media (max-width: 760px) { .figures .row { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--mute); font-size: .85rem; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td.yes { color: var(--leaf); } td.no { color: var(--mute); }
.us { background: rgba(182, 227, 95, .08); } th.us { color: var(--leaf); }
.compare table { min-width: 720px; }
.harvest .table-wrap { margin-top: 2rem; } .harvest .table-wrap table { min-width: 620px; }

.cta p { color: var(--mute); max-width: 48ch; margin: 1rem 0 0; }

/* forms (contato, painel) */
.form { display: grid; gap: 1rem; }
.form h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .5rem; }
.form label { display: grid; gap: .4rem; color: var(--mute); font-size: .9rem; }
.form input, .form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #0b100e; color: var(--ink); font: 16px/1.5 var(--body); caret-color: var(--leaf); transition: border-color 160ms ease; }
.form input:focus, .form textarea:focus { border-color: var(--leaf); }
.form ::placeholder { color: #7d877f; }
.form .btn { justify-self: start; border: 0; font: 700 1rem var(--body); cursor: pointer; }
.form-note { min-height: 1.5em; margin: 0; color: var(--mute); }
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn .ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.soon { opacity: .6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .btn.ghost[href]:hover { background: rgba(238, 241, 232, .06); border-color: var(--ink); } }

.login { min-height: 100svh; grid-template-columns: 1fr; place-items: center; padding-top: 7rem; }
.login-card { width: min(100%, 460px); padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--line); border-radius: 24px; background: rgba(7, 10, 9, .84); backdrop-filter: blur(12px); }
.login-card h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.login-card .side-p { margin: 0 0 .5rem; }
.login-card form { display: grid; gap: 1rem; }
.login-page footer { margin-top: 0; }
.wip { display: inline-flex; align-items: center; gap: .5rem; margin: .25rem 0 0; color: var(--dawn); font: .85rem var(--mono); }
.wip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* dashboard */
.dash { padding: 6.5rem var(--gut) 0; }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin: 1rem 0 2rem; }
.dash h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sim-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; color: var(--mute); }
.sim-btn { min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 700 .9rem var(--body); cursor: pointer; user-select: none; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
.sim-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sim-btn:hover { border-color: var(--ink); } }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile { display: grid; align-content: start; gap: .4rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); }
.tile header { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.tile header b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--mute); border-radius: 5px; font: .8rem var(--mono); }
.tile .num { display: block; margin: .25rem 0 0; font: 800 clamp(2.4rem, 4vw, 3.2rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile .num small { font: 500 1rem var(--mono); color: var(--mute); letter-spacing: 0; }
.tile p:not(.num) { margin: 0; }
.state-ok { color: var(--leaf); } .state-wet { color: var(--water); } .state-warn { color: var(--dawn); } .state-bad { color: var(--bad); }
.src { color: var(--mute); font: .8rem var(--mono); }
.tile .sim-btn { justify-self: start; margin-top: .5rem; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.chart { margin: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); min-width: 0; }
.chart h2 { font-size: 1.35rem; letter-spacing: -0.02em; }
.chart figcaption p { margin: .5rem 0 1rem; color: var(--mute); font-size: .95rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); } .chart .axis { stroke: #5b665f; }
.chart .ax { fill: var(--mute); font: 11px var(--mono); }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .75rem; color: var(--mute); font-size: .9rem; }
.legend i { display: inline-block; width: 14px; height: 8px; margin-right: .45rem; border-radius: 2px; vertical-align: middle; }
.lg-man { background: var(--dash-man); } .lg-sys { background: var(--dash-sys); }
.chart details { margin-top: 1rem; color: var(--mute); }
.chart summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.chart details table { font-size: .9rem; color: var(--ink); }
.events { margin-top: 3rem; }
.events h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { display: grid; grid-template-columns: 7.5rem 10px minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.event-list .mono { color: var(--mute); font-size: .85rem; }
.event-list div { color: var(--mute); } .event-list b { color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); }
.dot.wet { background: var(--water); } .dot.warn { background: var(--dawn); } .dot.bad { background: var(--bad); }
@media (max-width: 1000px) { .tiles { grid-template-columns: 1fr 1fr; } .charts { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } .event-list li { grid-template-columns: 10px minmax(0, 1fr); } .event-list .mono { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .flowing { animation: none; } }