@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&display=swap');

@font-face {
  font-family: 'SwiftSync Ethnocentric';
  src: url('/assets/fonts/ethnocentric-light-1783241139.otf?v=20260803-mobilewordmark7') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #050815;
  --surface: #0a1023;
  --surface-2: #0d1630;
  --line: rgba(145, 169, 224, .15);
  --muted: #99a4bd;
  --text: #f4f7ff;
  --cyan: #23d7f4;
  --violet: #9c5cff;
  --green: #51e8bc;
  --max: 1210px;
  --font-body: 1rem;
  --font-meta: .875rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(39, 82, 180, .16), transparent 32rem), var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-body);
  line-height: 1.55;
}
html[lang="vi"] body,
body[data-lang="vn"] {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}
html[lang="vi"] .hero-phone-screen,
html[lang="vi"] .farm-tablet,
html[lang="vi"] .breeding-tablet,
body[data-lang="vn"] .hero-phone-screen,
body[data-lang="vn"] .farm-tablet,
body[data-lang="vn"] .breeding-tablet {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cyan); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
select { color-scheme: dark; }
select option, select optgroup { background: #081123; color: #edf6ff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.shell { width: min(calc(100% - 56px), var(--max)); margin: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mono { margin: 0; color: var(--muted); font: 700 var(--font-meta)/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 78px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 21, .82);
  backdrop-filter: blur(20px);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 34px; height: 78px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(35, 215, 244, .28)); }
.brand span {
  color: #f4f8ff;
  font-family: 'SwiftSync Ethnocentric', sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  font-kerning: normal;
  font-synthesis: none;
  line-height: 1.18;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.language-control { display: flex; align-items: center; gap: 7px; min-width: 104px; min-height: 48px; padding: 4px 7px 4px 5px; border: 1px solid rgba(145, 169, 224, .48); border-radius: 13px; background: rgba(10, 16, 35, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 8px 24px rgba(0, 0, 0, .2); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.language-control:hover { border-color: rgba(101, 223, 241, .78); background: rgba(13, 22, 48, .96); }
.language-control:focus-within { border-color: rgba(101, 223, 241, .9); box-shadow: 0 0 0 3px rgba(35, 215, 244, .12), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.language-flag-frame { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid rgba(145, 169, 224, .32); border-radius: 8px; background: rgba(4, 9, 23, .78); }
.language-control img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.language-divider { width: 1px; height: 24px; flex: 0 0 1px; background: rgba(145, 169, 224, .42); }
.language-select-wrap { position: relative; display: flex; min-width: 0; align-items: center; }
.language-select-wrap::after { width: 6px; height: 6px; margin: -4px 1px 0 7px; border-right: 1px solid #dce5f8; border-bottom: 1px solid #dce5f8; content: ''; transform: rotate(45deg); pointer-events: none; }
.language-control select { width: 41px; height: 38px; padding: 0; border: 0; outline: 0; appearance: none; background: transparent; color: #f1f6ff; cursor: pointer; font-size: 1rem; font-weight: 800; letter-spacing: .04em; }
.header-auth-button {
  --auth-border-angle: 0deg;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(142, 177, 235, .42);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(18, 31, 62, .7), rgba(7, 13, 30, .58));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 8px 24px rgba(0, 0, 0, .2);
  color: #eaf2ff;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(16px) saturate(135%);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.header-auth-button[hidden] { display: none; }
.header-auth-button::before { position: absolute; inset: -6px 0; content: ''; }
.header-auth-button::after { position: absolute; z-index: -1; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--auth-border-angle), rgba(255, 255, 255, .95), #65dff1 22%, #3c76ff 45%, #9c5cff 68%, rgba(255, 255, 255, .82) 84%, #65dff1); content: ''; opacity: .78; pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: auth-border-spin 3.2s linear infinite; transition: opacity .2s ease, filter .2s ease; }
.header-auth-button:hover, .header-auth-button:focus-visible { transform: translateY(-1px); border-color: transparent; color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 10px 28px rgba(67, 111, 255, .24), 0 0 18px rgba(101, 223, 241, .12); }
.header-auth-button:hover::after, .header-auth-button:focus-visible::after { opacity: 1; filter: brightness(1.18); }
.header-auth-button:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 3px; }
.header-login { background: linear-gradient(145deg, rgba(18, 31, 62, .64), rgba(7, 13, 30, .5)); }
.header-join {
  border-color: rgba(95, 154, 255, .62);
  background: linear-gradient(135deg, rgba(35, 215, 244, .16), rgba(116, 93, 255, .2));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 8px 24px rgba(57, 101, 231, .2);
}
.header-account-menu { position: relative; }
.header-account-toggle { max-width: 142px; gap: 6px; }
.header-account-toggle [data-account-label] { overflow: hidden; text-overflow: ellipsis; }
.header-account-popover { position: absolute; top: calc(100% + 9px); right: 0; z-index: 25; display: grid; width: 172px; gap: 3px; padding: 6px; border: 1px solid rgba(126, 171, 234, .34); border-radius: 12px; background: rgba(7, 14, 31, .96); box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .07); backdrop-filter: blur(18px); }
.header-account-popover[hidden] { display: none; }
.header-account-popover a, .header-account-popover button { display: flex; width: 100%; min-height: 38px; align-items: center; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #e7efff; cursor: pointer; font-size: .8125rem; font-weight: 700; text-align: left; }
.header-account-popover a:hover, .header-account-popover a:focus-visible, .header-account-popover button:hover, .header-account-popover button:focus-visible { background: rgba(67, 122, 255, .15); color: #fff; outline: 0; }
.header-account-popover [data-auth-sign-out] { color: #ffbdc5; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid transparent; border-radius: 99px; font-size: 1rem; font-weight: 700; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-1px); color: inherit; }
.button-primary { background: linear-gradient(100deg, #1fcde8, #6b62ff 65%, #9c5cff); color: #fff; box-shadow: 0 12px 38px rgba(55, 112, 255, .25); }
.button-primary:hover { color: #fff; }
.button-ghost { border-color: rgba(139, 172, 237, .28); background: rgba(11, 18, 39, .7); color: #dce6fb; }

.hero { min-height: calc(100vh - 78px); padding: 120px 0 68px; background: radial-gradient(circle at 72% 35%, rgba(69, 91, 255, .2), rgba(35, 215, 244, .06) 25%, transparent 51%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5vw; }
.hero-copy-wrap { position: relative; z-index: 1; }
.eyebrow { margin-bottom: 20px; color: #65dff1; }
.hero h1 { max-width: 790px; margin: 0 0 30px; color: #f4f8ff; font-size: clamp(3.25rem, 6.1vw, 5.625rem); font-weight: 400; line-height: .97; letter-spacing: -.055em; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand span { background: linear-gradient(100deg, #fff 0%, #e8fdff 24%, #22d3ee 58%, #8b5cf6 100%); }
  .hero h1 { background: linear-gradient(105deg, #fff 20%, #b8d6ff 58%, #a677ff); }
  .brand span,
  .hero h1 {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.hero-copy { max-width: 690px; margin: 0; color: #aab5cc; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.75; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-phones { position: relative; z-index: 1; display: grid; width: 100%; max-width: 620px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; justify-self: end; gap: clamp(12px, 1.4vw, 20px); padding: 8px; }
.hero-phone { position: relative; aspect-ratio: .59; min-width: 0; padding: clamp(12px, 1vw, 15px) clamp(7px, .8vw, 11px) clamp(7px, .8vw, 11px); border: 1px solid rgba(93, 127, 171, .48); border-radius: clamp(19px, 2vw, 28px); background: #111821; box-shadow: 0 24px 64px rgba(0, 0, 0, .52), inset 0 0 0 2px rgba(4, 8, 13, .9), inset 0 1px rgba(255, 255, 255, .06); }
.hero-phone-speaker { position: absolute; top: 5px; left: 50%; width: 16%; height: 3px; border-radius: 999px; background: #30363e; transform: translateX(-50%); }
.hero-phone-screen { height: 100%; overflow: hidden; border: 1px solid rgba(57, 66, 78, .72); border-radius: clamp(13px, 1.45vw, 21px); background: #020405; color: #eef3f8; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: clamp(.42rem, .58vw, .62rem); }
.phone-app-header { display: flex; height: 100%; align-items: center; justify-content: space-between; padding: 0 4%; border-bottom: 1px solid rgba(61, 69, 78, .4); }
.phone-app-header strong { font-size: 1.12em; letter-spacing: .045em; }
.phone-app-header span { padding: .42em .72em; border-radius: 999px; background: rgba(13, 72, 112, .58); color: #6fc3f6; font-size: .92em; font-weight: 800; }
.phone-audio-screen { display: grid; grid-template-rows: 10% 52% minmax(0, 1fr); }
.phone-audio-meters { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 2% 4%; }
.phone-meter { display: grid; align-content: center; gap: .42em; border-bottom: 1px solid rgba(65, 72, 81, .3); }
.phone-meter div { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.phone-meter div span { padding: .28em .58em; border-radius: 999px; background: rgba(18, 77, 120, .58); color: #68baf0; font-size: .9em; font-weight: 800; }
.phone-meter > i { position: relative; display: block; height: .55em; overflow: visible; border-radius: 999px; background: #171b1e; }
.phone-meter > i::after { position: absolute; inset: 0 auto 0 0; width: var(--meter-level); border-radius: inherit; background: #347dec; content: ''; transform-origin: left; animation: phone-meter 2.8s ease-in-out infinite alternate; }
.phone-meter-warm > i::after { background: linear-gradient(90deg, #46bf76, #ff793a); }
.phone-meter-noise > i::after { background: linear-gradient(90deg, #327fe9, #d96029); }
.phone-meter-phase > i::after { background: linear-gradient(90deg, #ff7739, #e59b30 58%, #39c878); }
.phone-meter-phase b { position: absolute; top: -.45em; left: 74%; z-index: 2; width: 2px; height: 1.45em; border-radius: 999px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .85); }
.phone-frequency { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; padding: 1.6% 4% 3%; }
.phone-frequency-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: .55em; }
.phone-frequency-title span { color: #9ba1a8; }
.phone-spectrum-plot { display: flex; min-height: 0; align-items: end; gap: 2%; padding: 4% 3% 0; border: 1px solid rgba(69, 76, 85, .38); background: linear-gradient(rgba(65, 76, 89, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(65, 76, 89, .17) 1px, transparent 1px); background-size: 25% 25%; }
.phone-spectrum-plot i { flex: 1 1 0; height: var(--phone-bar-height); border-radius: 2px 2px 0 0; background: linear-gradient(#44ba6e, #2679e6); transform-origin: bottom; animation: phone-spectrum var(--phone-bar-speed) ease-in-out var(--phone-bar-delay) infinite alternate; }
.phone-frequency-scale { display: flex; justify-content: space-between; padding-top: .55em; color: #8d949c; }
.phone-ai-screen { display: grid; grid-template-rows: 12% 7% minmax(0, 1fr) 10%; }
.phone-ai-header { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 4%; border-bottom: 1px solid rgba(61, 69, 78, .36); }
.phone-ai-header div { display: flex; min-width: 0; flex-direction: column; }
.phone-ai-header div span { margin-top: .18em; color: #a5aab1; }
.phone-ai-header b { display: flex; flex: 0 0 auto; align-items: center; gap: .42em; font-size: .9em; }
.phone-ai-header i, .phone-assistant-message i { display: inline-block; width: .58em; height: .58em; border-radius: 50%; background: #39c96c; box-shadow: 0 0 8px rgba(57, 201, 108, .75); animation: phone-ready 1.9s ease-in-out infinite alternate; }
.phone-ai-notice { display: flex; align-items: center; padding: 0 4%; border-bottom: 1px solid rgba(110, 51, 25, .46); background: rgba(60, 24, 9, .3); color: #e06a2e; }
.phone-ai-chat { min-height: 0; overflow: hidden; padding: 4%; }
.phone-ai-label { display: block; margin-bottom: 3%; color: #8f969e; }
.phone-user-message { width: 80%; margin-left: auto; padding: 5%; border-radius: 1.2em 1.2em .28em 1.2em; background: #7cbcf2; color: #08223a; font-size: 1.05em; line-height: 1.45; animation: phone-user-bubble 5.4s ease-in-out infinite; }
.phone-assistant-message { width: 86%; margin-top: 3%; padding: 4%; border-radius: .45em 1.2em 1.2em 1.2em; background: #191b1d; animation: phone-ai-bubble 5.4s ease-in-out infinite; }
.phone-assistant-message strong { display: flex; align-items: center; gap: .5em; margin-bottom: 3%; font-size: .9em; }
.phone-assistant-message p { margin: 0; color: #f2f3f4; font-weight: 650; line-height: 1.38; }
.phone-ai-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3%; padding: 3%; border-top: 1px solid rgba(61, 69, 78, .34); }
.phone-ai-compose span { overflow: hidden; padding: .58em .72em; border-radius: .55em; background: #3a3a3c; color: #9b9b9e; text-overflow: ellipsis; white-space: nowrap; }
.phone-ai-compose button { width: 2.15em; height: 2.15em; min-height: 0; padding: 0; border: 0; border-radius: .65em; background: #f0f1f2; color: #14171a; font-size: 1.2em; pointer-events: none; }
@keyframes phone-meter { from { transform: scaleX(.64); opacity: .72; } to { transform: scaleX(1); opacity: 1; } }
@keyframes phone-spectrum { from { transform: scaleY(.42); opacity: .62; } to { transform: scaleY(1); opacity: 1; } }
@keyframes phone-ready { from { opacity: .55; transform: scale(.82); } to { opacity: 1; transform: scale(1.08); } }
@keyframes phone-user-bubble { 0%, 10% { opacity: .5; transform: translateY(5px); } 20%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes phone-ai-bubble { 0%, 27% { opacity: 0; transform: translateY(7px); } 39%, 100% { opacity: 1; transform: translateY(0); } }

.signal-stage { position: relative; z-index: 1; height: 410px; padding: 30px; overflow: hidden; border: 1px solid rgba(75, 137, 255, .3); border-radius: 28px; background: linear-gradient(155deg, rgba(16, 29, 64, .88), rgba(6, 11, 27, .96)); box-shadow: 0 34px 90px rgba(0, 0, 0, .45), 0 0 60px rgba(36, 112, 255, .08), inset 0 1px rgba(255, 255, 255, .06); }
.signal-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(51, 110, 180, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 110, 180, .07) 1px, transparent 1px); background-size: 34px 34px; }
.signal-meta, .signal-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; color: #8fa2cc; font: 700 var(--font-meta) ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.signal-meta span:first-child { color: #b8c8e8; }
.signal-bars { position: relative; z-index: 2; display: flex; height: 244px; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 10px; padding-top: 18px; border-bottom: 1px solid rgba(45, 210, 244, .28); }
.signal-bars i { --eq-height: 50%; --eq-speed: 1.4s; --eq-delay: 0s; flex: 1 1 0; min-width: 2px; max-width: 8px; height: var(--eq-height); transform-origin: 50% 100%; border-radius: 5px 5px 2px 2px; background: linear-gradient(#9c5cff 0%, #297cff 46%, #18d1eb 100%); box-shadow: 0 0 11px rgba(35, 215, 244, .34); animation: eq-rise var(--eq-speed) ease-in-out var(--eq-delay) infinite alternate; }
.signal-bars i:nth-child(3n) { filter: brightness(.82); }
.signal-bars i:nth-child(5n) { filter: brightness(1.12); }
.frequency-scale { position: relative; z-index: 2; display: flex; justify-content: space-between; margin-top: 10px; color: #53617e; font: 700 var(--font-meta) ui-monospace, SFMono-Regular, Consolas, monospace; }
.signal-footer { margin-top: 15px; }
.signal-footer span { color: #75ddea; }
.signal-footer strong { color: var(--green); }
@keyframes eq-rise { 0% { opacity: .62; transform: scaleY(.28); } 45% { opacity: 1; transform: scaleY(1); } 72% { opacity: .78; transform: scaleY(.52); } 100% { opacity: .94; transform: scaleY(.82); } }

.stats { display: grid; width: min(calc(100% - 56px), var(--max)); grid-template-columns: repeat(4, 1fr); margin: 0 auto; }
.stat { padding: 26px 14px; border-right: 1px solid var(--line); color: #64718f; text-align: center; font: 700 var(--font-meta) ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.stat:last-child { border-right: 0; }
.section-spacer { height: 120px; }
.section { padding: 0; scroll-margin-top: 96px; }
.section-head { max-width: 760px; margin-bottom: 58px; }
.section h2 { margin: 12px 0 18px; font-size: clamp(2.3rem, 4.6vw, 4.05rem); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.section-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.section-head-dashboard { display: grid; max-width: none; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); align-items: start; gap: clamp(42px, 6vw, 84px); }
.feature-section-divider { height: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid rgba(100, 133, 196, .18); }
.section-head-copy { min-width: 0; align-self: start; padding-top: clamp(24px, 2.5vw, 36px); }
.section-head-dashboard .farm-tablet { align-self: start; margin-top: clamp(30px, 3vw, 48px); }
.farm-tablet { width: 100%; max-width: 680px; justify-self: end; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.farm-tablet-shell { position: relative; aspect-ratio: 1.3; padding: clamp(9px, 1.1vw, 14px); border: 1px solid rgba(102, 139, 187, .42); border-radius: clamp(18px, 2vw, 27px); background: #111722; box-shadow: 0 24px 70px rgba(0, 0, 0, .52), inset 0 0 0 2px rgba(5, 9, 16, .9), inset 0 1px rgba(255, 255, 255, .06); }
.farm-tablet-camera { position: absolute; top: 5px; left: 50%; width: 30px; height: 3px; border-radius: 999px; background: #303640; transform: translateX(-50%); }
.farm-tablet-screen { display: grid; height: 100%; grid-template-rows: 12% 24% minmax(0, 1fr) 14%; overflow: hidden; border: 1px solid rgba(60, 71, 88, .75); border-radius: clamp(11px, 1.25vw, 18px); background: #050709; color: #f2f5f8; font-size: clamp(.48rem, .75vw, .72rem); }
.farm-tablet-header { display: flex; min-height: 12%; align-items: center; justify-content: space-between; padding: 0 3.2%; border-bottom: 1px solid rgba(70, 79, 92, .42); background: #070a0d; }
.farm-tablet-header strong { font-size: 1.08em; letter-spacing: .08em; }
.farm-tablet-header span { padding: .42em .72em; border-radius: 999px; background: rgba(15, 77, 122, .52); color: #6dbcf2; font-size: .9em; font-weight: 800; }
.farm-tablet-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6%; padding: 2.2% 2.4% 1.8%; }
.farm-tablet-metrics div { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 7% 8%; border: 1px solid rgba(76, 84, 95, .42); border-radius: 1.1em; background: #0b0d0f; }
.farm-tablet-metrics span, .farm-tablet-updates span { color: #858b94; }
.farm-tablet-metrics strong { margin: .16em 0 .08em; font-size: 1.65em; line-height: 1; }
.farm-tablet-metrics small { color: #e7ebef; font-size: .84em; }
.farm-tablet-data { display: grid; min-height: 0; grid-template-columns: 1.8fr .92fr; gap: 2.6%; padding: 0 2.4% 1.4%; }
.farm-tablet-trend { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.farm-tablet-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2%; }
.farm-tablet-label span { color: #8c8f94; }
.farm-tablet-trend canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.farm-tablet-levels { display: grid; align-content: space-between; padding-top: 1.8em; }
.farm-tablet-levels div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .45em; }
.farm-tablet-levels i { position: relative; height: .42em; grid-column: 1 / -1; overflow: hidden; border-radius: 999px; background: #181b1e; }
.farm-tablet-levels i::after { position: absolute; inset: 0 auto 0 0; width: var(--level); border-radius: inherit; background: #45b85c; content: ''; transform-origin: left; animation: farm-level 3.4s ease-in-out infinite alternate; }
.farm-tablet-updates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2%; padding: 1.7% 2.4% 2.2%; border-top: 1px solid rgba(58, 65, 75, .32); }
.farm-tablet-updates div { position: relative; display: flex; min-width: 0; flex-direction: column; padding-left: 1.1em; }
.farm-tablet-updates div::before { position: absolute; top: .38em; left: 0; width: .42em; height: .42em; border-radius: 50%; background: #37b65b; box-shadow: 0 0 8px rgba(55, 182, 91, .72); content: ''; }
.farm-tablet-updates strong, .farm-tablet-updates span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes farm-level { from { transform: scaleX(.35); opacity: .58; } to { transform: scaleX(1); opacity: 1; } }
.breeding-tablet { width: min(100%, 540px); margin-top: 30px; padding: 9px; border: 1px solid rgba(76, 126, 192, .7); border-radius: 28px; background: linear-gradient(145deg, #1d2735, #0a0e13); box-shadow: 0 20px 54px rgba(0, 0, 0, .46), inset 0 0 0 2px rgba(255, 255, 255, .025); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.breeding-tablet-screen { position: relative; display: grid; min-height: 266px; overflow: hidden; border: 1px solid rgba(46, 62, 77, .9); border-radius: 19px; background-color: #050907; background-image: linear-gradient(rgba(53, 82, 91, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 82, 91, .13) 1px, transparent 1px); background-size: 18px 18px; color: #e7ebea; font-size: 10px; line-height: 1.15; }
.breeding-tablet-header, .breeding-tablet-bar, .breeding-stage, .breeding-footer { display: flex; align-items: center; justify-content: space-between; padding-inline: 18px; background: rgba(5, 8, 9, .86); border-bottom: 1px solid rgba(53, 70, 77, .72); }
.breeding-tablet-header { height: 31px; font-size: 9px; letter-spacing: .08em; }.breeding-tablet-header span { display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; }.breeding-tablet-header span i { width: 6px; height: 6px; border-radius: 50%; background: #38d47c; box-shadow: 0 0 8px #38d47c; animation: breeding-pulse 2s ease-in-out infinite; }
.breeding-tablet-bar { height: 27px; color: #8b9396; font-size: 9px; font-weight: 700; }.breeding-tablet-bar strong { color: #dfe3e2; }
.breeding-stage { min-height: 70px; padding-block: 11px; background: rgba(5, 11, 9, .58); }.breeding-stage div { display: grid; gap: 6px; padding-left: 9px; border-left: 2px solid #2262a8; }.breeding-stage strong { font-size: 12px; }.breeding-stage span { color: #899398; }.breeding-stage b, .breeding-footer b { padding: 6px 9px; border-radius: 999px; background: #103d66; color: #72bbef; font-size: 9px; }
.breeding-timeline { display: flex; align-items: center; justify-content: space-around; height: 18px; margin: 0 28px; border-bottom: 1px solid rgba(67, 138, 194, .58); }.breeding-timeline i { width: 5px; height: 5px; border-radius: 50%; background: #287ec7; box-shadow: 0 0 6px #287ec7; animation: breeding-dot 6s ease-in-out infinite; }.breeding-timeline i:nth-child(2){animation-delay:1s}.breeding-timeline i:nth-child(3){animation-delay:2s}.breeding-timeline i:nth-child(4){animation-delay:3s}.breeding-timeline i:nth-child(5){animation-delay:4s}.breeding-timeline i:nth-child(6){animation-delay:5s}
.breeding-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; padding: 8px 12px 12px; }.breeding-step { display: grid; place-items: center; gap: 5px; min-width: 0; padding: 8px 3px; border: 1px solid var(--cycle, #3f72bd); border-radius: 10px; color: #e1e5e5; background: color-mix(in srgb, var(--cycle, #3f72bd) 13%, #090b0b); box-shadow: inset 0 0 18px color-mix(in srgb, var(--cycle, #3f72bd) 12%, transparent); font-weight: 700; text-align: center; }.breeding-step > i, .breeding-footer > i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--cycle, #3f72bd) 22%, #101317); color: var(--cycle, #3f72bd); font-size: 16px; font-style: normal; }.breeding-step > i { animation: breeding-icon 6s ease-in-out infinite; }.breeding-step:nth-child(2) > i { animation-delay: 1s; }.breeding-step:nth-child(3) > i { animation-delay: 2s; }.breeding-step:nth-child(4) > i { animation-delay: 3s; }.breeding-step:nth-child(5) > i { animation-delay: 4s; }.breeding-step:nth-child(6) > i { animation-delay: 5s; }.breeding-step span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }.breeding-step.nest { --cycle:#2877d3; }.breeding-step.egg { --cycle:#48c35d; }.breeding-step.incubation { --cycle:#e26735; }.breeding-step.chicks { --cycle:#cca42e; }.breeding-step.fledging { --cycle:#8954e7; animation: breeding-active 4.8s ease-in-out infinite; }.breeding-step.harvest { --cycle:#b85b48; }
.breeding-footer { min-height: 47px; gap: 10px; border-top: 1px solid rgba(81, 160, 87, .32); border-bottom: 0; background: rgba(8, 20, 12, .78); }.breeding-footer > i { --cycle:#8954e7; flex: 0 0 auto; }.breeding-footer div { display: grid; flex: 1; gap: 3px; min-width: 0; }.breeding-footer strong { font-size: 11px; }.breeding-footer span { overflow: hidden; color: #8d9890; text-overflow: ellipsis; white-space: nowrap; }.breeding-footer b { flex: 0 0 auto; background: #10476a; }
@keyframes breeding-pulse { 50% { opacity: .35; transform: scale(.72); } } @keyframes breeding-dot { 0%, 16%, 100% { transform: scale(1); background: #287ec7; } 8% { transform: scale(1.8); background: #50d376; } } @keyframes breeding-icon { 0%, 16%, 100% { box-shadow: inset 0 0 0 rgba(80, 211, 118, 0); transform: scale(1); } 8% { box-shadow: 0 0 14px color-mix(in srgb, var(--cycle) 75%, transparent), inset 0 0 11px color-mix(in srgb, var(--cycle) 48%, transparent); transform: scale(1.12); } } @keyframes breeding-active { 0%, 55%, 100% { box-shadow: inset 0 0 18px rgba(137,84,231,.13); } 70% { box-shadow: inset 0 0 25px rgba(137,84,231,.48), 0 0 16px rgba(137,84,231,.36); } }
.dark-band { padding: 110px 0; border: 1px solid var(--line); border-right: 0; border-left: 0; background: linear-gradient(180deg, rgba(10, 16, 35, .4), rgba(5, 8, 21, .75)); }
.split { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 64px; }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.check { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(155deg, rgba(13, 22, 48, .72), rgba(6, 11, 26, .86)); }
.check strong { display: block; margin-bottom: 6px; }
.check span { color: #929eb8; font-size: 1rem; line-height: 1.7; }
.modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.module { position: relative; display: flex; min-height: 340px; flex-direction: column; overflow: hidden; padding: 28px 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(155deg, rgba(13, 22, 48, .72), rgba(6, 11, 26, .86)); scroll-margin-top: 104px; transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease; }
.module::before { position: absolute; z-index: 2; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--module-border-angle), transparent 0 9%, rgba(255, 255, 255, .96) 16%, #65dff1 27%, #3c76ff 43%, #9c5cff 59%, rgba(255, 255, 255, .72) 72%, transparent 84% 100%); content: ''; opacity: 0; pointer-events: none; transition: opacity .28s ease; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: module-border-spin 3.6s linear infinite; }
.module::after { content: ''; position: absolute; top: -55px; right: -55px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(77, 108, 255, .14), transparent 70%); pointer-events: none; }
.module > * { position: relative; z-index: 1; }
.module.is-scroll-visible { border-color: rgba(83, 126, 234, .36); box-shadow: 0 18px 46px rgba(2, 7, 22, .26), 0 0 24px rgba(69, 92, 255, .08); }
.module.is-scroll-visible::before { opacity: .62; }
.module:hover, .module:focus-within { border-color: transparent; box-shadow: 0 22px 58px rgba(2, 7, 22, .42), 0 0 30px rgba(67, 111, 255, .16), 0 0 18px rgba(156, 92, 255, .1); transform: translateY(-3px); }
.module:hover::before, .module:focus-within::before { opacity: 1; }
.module:target { border-color: rgba(35, 215, 244, .55); box-shadow: 0 0 0 3px rgba(35, 215, 244, .08); }
.module-icon { width: 46px; height: 46px; margin-bottom: 24px; padding: 10px; border: 1px solid rgba(78, 174, 241, .2); border-radius: 13px; background: linear-gradient(135deg, rgba(35, 215, 244, .11), rgba(156, 92, 255, .13)); object-fit: contain; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease; }
.module:hover .module-icon, .module:focus-within .module-icon { border-color: rgba(173, 238, 255, .82); background: linear-gradient(135deg, rgba(35, 215, 244, .25), rgba(156, 92, 255, .3)); box-shadow: inset 0 0 12px rgba(255, 255, 255, .1), 0 0 18px rgba(35, 215, 244, .42), 0 0 30px rgba(156, 92, 255, .28); filter: brightness(1.5) saturate(1.35) drop-shadow(0 0 5px rgba(255, 255, 255, .5)); transform: translateY(-1px) scale(1.06); }
.module h3 { margin: 0 0 10px; font-size: 1.12rem; letter-spacing: -.03em; }
.module p { margin: 0; color: #929eb8; font-size: 1rem; line-height: 1.75; }
.module-foot { margin-top: auto; padding-top: 22px; color: #75ddea; font: 700 var(--font-meta) ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }

.waitlist-panel, #contact .shell { padding: 64px; border: 1px solid rgba(80, 141, 255, .26); border-radius: 32px; background: radial-gradient(circle at 80% 20%, rgba(132, 85, 255, .22), transparent 36%), linear-gradient(120deg, #0b1838, #0a0d20); }
.waitlist-action { display: flex; align-items: flex-start; flex-direction: column; gap: 18px; }
.waitlist-form { display: grid; width: min(100%, 520px); gap: 10px; }
.waitlist-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.waitlist-form .field input { min-height: 40px; }
.waitlist-form .button { justify-self: start; min-height: 42px; padding: 0 18px; font-size: .875rem; }
.waitlist-form .form-note { margin: 0; }
.waitlist-action p { max-width: 470px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
#contact { padding: 0 0 110px; border: 0; background: transparent; }
#contact .shell { padding: clamp(28px, 4vw, 48px); background: linear-gradient(145deg, rgba(11, 21, 46, .72), rgba(5, 9, 23, .9)); }
.contact-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(26px, 3.6vw, 44px); }
.contact-copy h2 { margin-bottom: 14px; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.06; }
.contact-copy { display: flex; flex-direction: column; align-items: flex-start; }
.contact-submit { margin-top: auto; }
.contact-copy p { max-width: 420px; margin: 0 0 14px; color: var(--muted); font-size: 1rem; line-height: 1.62; }
.contact-copy a { color: var(--cyan); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 16px; border: 1px solid rgba(125, 155, 218, .2); border-radius: 18px; background: rgba(5, 9, 22, .72); }
.field { display: grid; gap: 4px; }
.field.full, .consent.full { grid-column: 1 / -1; }
.field label { color: #aebbd4; font-size: .8125rem; font-weight: 700; line-height: 1.25; letter-spacing: .025em; }
.field input, .field select, .field textarea { width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid rgba(130, 157, 216, .24); border-radius: 10px; background: #090f21; color: #edf4ff; font-size: .875rem; line-height: 1.35; }
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: #3ccfe9; box-shadow: 0 0 0 3px rgba(35, 215, 244, .08); }
.consent { display: flex; align-items: flex-start; gap: 8px; color: #aebbd4; font-size: .8125rem; line-height: 1.38; }
.consent input { width: 15px; height: 15px; flex: 0 0 15px; margin: 1px 0 0; accent-color: var(--cyan); }
.form-note { min-height: 1.3em; grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.waitlist-form .form-note { font-size: .72rem; line-height: 1.35; }
.puzzle-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.puzzle-gate__backdrop { position: absolute; inset: 0; background: rgba(1, 5, 15, .78); backdrop-filter: blur(9px); }
.puzzle-gate__dialog { position: relative; width: min(100%, 480px); padding: clamp(24px, 5vw, 34px); border: 1px solid rgba(82, 187, 255, .42); border-radius: 18px; background: linear-gradient(145deg, rgba(11, 25, 53, .98), rgba(4, 9, 24, .98)); box-shadow: 0 24px 80px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .05); }
.puzzle-gate__dialog h2 { margin: 6px 0 8px; font-size: clamp(1.45rem, 5vw, 2rem); line-height: 1.08; }
.puzzle-gate__copy, .puzzle-gate__instruction { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.puzzle-gate__instruction { min-height: 2.8em; margin-top: 14px; color: #9eeefa; }
.puzzle-gate__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 1px solid rgba(122, 166, 221, .35); border-radius: 9px; background: rgba(8, 18, 40, .8); color: #e9f4ff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.puzzle-gate__board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.puzzle-gate__signals, .puzzle-gate__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.puzzle-tile, .puzzle-slot { min-height: 68px; border: 1px solid rgba(92, 147, 218, .42); border-radius: 13px; background: rgba(7, 16, 37, .86); color: #9feeff; font-size: 1.7rem; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.puzzle-slot { border-style: dashed; color: rgba(157, 203, 255, .52); }
.puzzle-tile:hover, .puzzle-tile.is-selected { border-color: #42ddf7; background: rgba(30, 107, 164, .25); transform: translateY(-2px); }
.puzzle-tile.is-matched, .puzzle-slot.is-matched { border-color: #6fe7b4; background: rgba(52, 171, 125, .18); color: #b7ffd9; cursor: default; }
.puzzle-slot.is-mismatch { border-color: #ff9ba6; background: rgba(200, 61, 77, .18); }
.puzzle-gate__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.puzzle-gate__actions .button { min-height: 40px; }
.puzzle-gate__confirm:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 420px) { .puzzle-gate { padding: 12px; } .puzzle-gate__dialog { padding: 22px 18px; } .puzzle-gate__board { grid-template-columns: 1fr; } .puzzle-gate__actions { flex-direction: column-reverse; } .puzzle-gate__actions .button { width: 100%; } }
.form-note.is-success { color: #73ecc7; }
.form-note.is-error { color: #ff9fa8; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.form .button { justify-self: start; padding: 0 18px; font-size: .875rem; }
.form .button:disabled { opacity: .62; cursor: wait; transform: none; }

@property --module-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --auth-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes module-border-spin { to { --module-border-angle: 360deg; } }
@keyframes auth-border-spin { to { --auth-border-angle: 360deg; } }

.site-footer { padding: 55px 0 30px; border-top: 1px solid var(--line); background: #040712; color: var(--muted); }
.footer-top { display: grid; grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)); gap: 38px; padding-top: 20px; }
.footer-brand p { max-width: 310px; font-size: 1rem; }
.footer-language { width: max-content; margin-top: 20px; }
.footer-col h3 { margin: 0 0 16px; color: #dce6fb; font: 700 1rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer-col a { display: flex; min-height: 48px; align-items: center; margin: 0; padding: .5rem 0; color: #8793ad; font-size: 1rem; }
.footer-col a:hover { color: #fff; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.socials img { width: 15px; height: 15px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(145, 169, 224, .09); color: #657089; font-size: var(--font-meta); }
.notice { position: fixed; right: 20px; bottom: 20px; z-index: 30; padding: 13px 17px; border: 1px solid var(--line); border-radius: 9px; background: #11141d; color: var(--text); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.notice.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1.5fr repeat(2, 1fr); }
  .footer-brand { grid-row: span 2; }
}

@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 90px; }
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; }
  .hero-phones { max-width: 620px; justify-self: center; }
  .section-head-dashboard { grid-template-columns: 1fr; }
  .section-head-copy { align-self: auto; padding-top: 0; }
  .section-head-dashboard .farm-tablet { justify-self: center; margin-top: 0; }
  .signal-stage { height: 330px; }
  .signal-bars { height: 165px; }
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .waitlist-panel, #contact .shell { padding: 45px; }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 40px), var(--max)); }
  .site-header, .nav { height: 68px; }
  .nav { gap: 8px; }
  .brand { gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 1rem; }
  .nav-actions { gap: 6px; }
  .language-control { min-width: 96px; min-height: 48px; gap: 5px; padding: 3px 5px 3px 4px; }
  .language-flag-frame { width: 27px; height: 27px; flex-basis: 27px; border-radius: 7px; }
  .language-control img { width: 18px; height: 12px; }
  .language-divider { height: 21px; }
  .language-select-wrap::after { margin-left: 5px; }
  .language-control select { width: 35px; height: 38px; font-size: 1rem; }
  .hero { padding: 78px 0 40px; }
  .hero h1 { font-size: clamp(2.7rem, 12.5vw, 3.05rem); line-height: 1.02; }
  .hero-copy { font-size: 1rem; }
  .hero-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-buttons .button { padding: 0 14px; }
  .hero-phones { gap: 8px; padding: 0; }
  .hero-phone { padding: 8px 5px 5px; border-radius: 18px; }
  .hero-phone-speaker { top: 3px; height: 2px; }
  .hero-phone-screen { border-radius: 12px; font-size: clamp(.34rem, 1.55vw, .48rem); }
  .signal-stage { height: 260px; padding: 20px; }
  .signal-meta { gap: 8px; font-size: var(--font-meta); }
  .signal-bars { height: 150px; gap: 3px; padding-top: 12px; }
  .frequency-scale { font-size: var(--font-meta); }
  .signal-footer { margin-top: 12px; font-size: var(--font-meta); }
  .stats { width: min(calc(100% - 40px), var(--max)); grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .section-spacer { height: 78px; }
  .section h2 { font-size: 2.4rem; }
  .section-head-dashboard { gap: 28px; }
  .feature-section-divider { height: 2.5rem; margin-bottom: 2.5rem; }
  .farm-tablet-shell { padding: 7px; border-radius: 17px; }
  .farm-tablet-camera { top: 3px; width: 22px; height: 2px; }
  .farm-tablet-screen { border-radius: 11px; font-size: clamp(.4rem, 1.75vw, .52rem); }
  .checklist, .modules { grid-template-columns: 1fr; }
  .module { min-height: 290px; }
  .waitlist-panel, #contact .shell { width: calc(100% - 40px); padding: 34px 24px; border-radius: 28px; }
  .form { grid-template-columns: 1fr; padding: 20px; }
  .field.full, .consent.full, .form-note { grid-column: auto; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .footer-brand { grid-area: auto / 1 / auto / -1; }
  .footer-bottom { flex-wrap: wrap; }
  .footer-bottom span:first-child { width: 100%; }
}

/* Homepage OAuth modal: compact on desktop, full-width and touch-friendly on phones. */
.home-auth-modal[hidden] { display: none; }
.home-auth-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 24px; }
.home-auth-modal-open { overflow: hidden; }
.home-auth-modal__backdrop { position: absolute; inset: 0; background: rgba(1, 4, 12, .78); backdrop-filter: blur(13px); }
.home-auth-modal__dialog { position: relative; display: grid; grid-template-columns: minmax(210px, .82fr) minmax(310px, 1.18fr); width: min(760px, 100%); overflow: hidden; border: 1px solid rgba(74, 126, 190, .48); border-radius: 22px; background: linear-gradient(135deg, rgba(10, 20, 43, .98), rgba(3, 8, 21, .99)); box-shadow: 0 28px 88px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .06); color: #edf5ff; }
.home-auth-modal__close { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(141, 188, 242, .28); border-radius: 10px; background: rgba(4, 11, 28, .72); color: #d9e8fb; font: 400 1.35rem/1 Arial, sans-serif; cursor: pointer; }
.home-auth-modal__close:hover, .home-auth-modal__close:focus-visible { border-color: #2cd8f5; color: #fff; outline: none; }
.home-auth-modal__story { position: relative; display: flex; min-height: 390px; flex-direction: column; padding: 34px 28px; overflow: hidden; border-right: 1px solid rgba(90, 132, 188, .28); background: radial-gradient(circle at 10% 100%, rgba(76, 69, 192, .2), transparent 40%), linear-gradient(155deg, rgba(7, 16, 36, .96), rgba(4, 9, 22, .76)); }
.home-auth-modal__story::after { position: absolute; right: -88px; bottom: -115px; width: 265px; height: 265px; border: 1px solid rgba(37, 211, 244, .38); border-radius: 50%; box-shadow: 0 0 0 45px rgba(70, 77, 184, .075), 0 0 0 92px rgba(70, 77, 184, .045); content: ""; }
.home-auth-modal__eyebrow { display: block; color: #35dbf7; font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.home-auth-modal__brand { display: flex; gap: 3px; margin-top: 24px; font-family: 'SwiftSync Ethnocentric', sans-serif; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: .06em; line-height: 1; }
.home-auth-modal__brand span { background: linear-gradient(100deg, #ffffff 0%, #e8fdff 22%, #22d3ee 50%, #567bff 73%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.home-auth-modal__story > p { max-width: 190px; margin: 14px 0 0; color: #a9bbd4; font-size: .85rem; line-height: 1.55; }
.home-auth-modal__story ul { display: grid; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.home-auth-modal__story li { position: relative; z-index: 1; width: min(100%, 210px); padding: 9px 11px; border: 1px solid rgba(75, 126, 186, .36); border-radius: 9px; background: rgba(3, 10, 25, .64); color: #dbe8fa; font-size: .74rem; }
.home-auth-modal__panel { display: flex; min-height: 390px; flex-direction: column; justify-content: center; padding: 42px 34px 32px; background: linear-gradient(160deg, rgba(13, 29, 58, .66), rgba(4, 9, 21, .96)); }
.home-auth-modal__panel h2 { margin: 12px 0 7px; color: #f2f7ff; font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -.04em; line-height: 1.08; }
.home-auth-modal__description { max-width: 340px; margin: 0 0 18px; color: #aabbd4; font-size: .87rem; line-height: 1.55; }
.home-auth-modal__providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.home-auth-modal__provider { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; font: 800 .78rem/1.1 Arial, Helvetica, sans-serif; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.home-auth-modal__provider:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.home-auth-modal__provider:focus-visible { outline: 2px solid #46dff8; outline-offset: 2px; }
.home-auth-modal__provider:disabled { cursor: wait; opacity: .68; }
.home-auth-modal__provider--google { background: #f6f8fc; color: #182033; box-shadow: 0 8px 22px rgba(255, 255, 255, .08); }
.home-auth-modal__provider--facebook { border-color: rgba(115, 174, 255, .6); background: linear-gradient(135deg, #1f79ee, #1261d6); color: #fff; box-shadow: 0 8px 22px rgba(24, 106, 233, .28); }
.home-auth-modal__provider-mark { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; font: 800 1rem/1 Arial, sans-serif; }
.home-auth-modal__provider--google .home-auth-modal__provider-mark { color: #4285f4; background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); -webkit-background-clip: text; background-clip: text; }
.home-auth-modal__provider--facebook .home-auth-modal__provider-mark { background: #fff; color: #1877f2; }
.home-auth-modal__switch, .home-auth-modal__terms, .home-auth-modal__trust, .home-auth-modal__status { margin: 13px 0 0; color: #9cafca; font-size: .77rem; line-height: 1.5; }
.home-auth-modal__switch button { padding: 0; border: 0; background: transparent; color: #39dcf7; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.home-auth-modal__terms { color: #8fa1bd; }
.home-auth-modal__trust { display: flex; gap: 7px; align-items: flex-start; color: #8fa3bf; }
.home-auth-modal__trust::first-letter { color: #2de0f6; }
.home-auth-modal__status { min-height: 1.2em; color: #55e2b1; }
.home-auth-modal__status.is-error { color: #ff9da8; }
.home-auth-modal__registration { display: grid; gap: 10px; margin: 0 0 16px; }
.home-auth-modal__registration[hidden], .home-auth-modal__providers[hidden], .home-auth-modal__switch[hidden] { display: none; }
.home-auth-modal__complete { width: 100%; min-height: 44px; margin-top: 2px; }
.home-auth-modal__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.home-auth-modal__fields label { display: grid; gap: 5px; color: #aebed6; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.home-auth-modal__fields input, .home-auth-modal__fields select { width: 100%; min-height: 37px; border: 1px solid rgba(104, 147, 204, .36); border-radius: 8px; background: rgba(3, 10, 25, .72); color: #edf5ff; padding: 7px 9px; font: 400 .8rem/1 Arial, Helvetica, sans-serif; }
.home-auth-modal__fields input:focus, .home-auth-modal__fields select:focus { border-color: #37dcf6; outline: 2px solid rgba(55, 220, 246, .16); outline-offset: 1px; }
.home-auth-modal__field-wide { grid-column: 1 / -1; }
.home-auth-modal__consent { display: flex; gap: 8px; align-items: flex-start; color: #a8b8d0; font-size: .72rem; line-height: 1.4; }
.home-auth-modal__consent input { appearance: none; position: relative; width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; border: 1px solid rgba(74, 208, 244, .72); border-radius: 5px; background: rgba(3, 11, 27, .9); cursor: pointer; }
.home-auth-modal__consent input:checked { border-color: #5be9fb; background: linear-gradient(135deg, #16badc, #6673f3); box-shadow: 0 0 12px rgba(53, 216, 248, .28); }
.home-auth-modal__consent input:checked::after { position: absolute; top: -1px; left: 3px; color: #fff; content: "✓"; font: 800 .72rem/1 Arial, sans-serif; }
.home-auth-modal__consent input:focus-visible { outline: 2px solid #5be9fb; outline-offset: 2px; }
.home-auth-modal__consent a { color: #3edcf7; font-weight: 800; }
.home-auth-modal.is-sign-up .home-auth-modal__panel { justify-content: flex-start; }

@media (max-width: 700px) {
  .home-auth-modal__providers { grid-template-columns: 1fr; }
  .home-auth-modal { align-items: end; }
  .home-auth-modal__dialog { grid-template-columns: 1fr; max-height: calc(100dvh - 24px); overflow: auto; }
  .home-auth-modal__story { display: block; min-height: 0; padding: 22px 24px 18px; border-right: 0; border-bottom: 1px solid rgba(90, 132, 188, .28); }
  .home-auth-modal__story ul { display: none; }
  .home-auth-modal__story::after { display: none; }
  .home-auth-modal__panel { min-height: 0; padding: 25px 24px; }
}

@media (max-width: 640px) {
  .brand span { font-family: 'SwiftSync Ethnocentric', sans-serif !important; font-weight: 400 !important; font-style: normal !important; }
  .home-auth-modal { align-items: end; padding: 12px; }
  .home-auth-modal__dialog { grid-template-columns: 1fr; width: min(100%, 460px); max-height: calc(100dvh - 24px); overflow: auto; border-radius: 18px; }
  .home-auth-modal__story { display: block; min-height: 0; padding: 25px 24px 20px; border-right: 0; border-bottom: 1px solid rgba(90, 132, 188, .28); }
  .home-auth-modal__story::after { right: -54px; bottom: -130px; width: 210px; height: 210px; }
  .home-auth-modal__brand { margin-top: 14px; font-size: 1.36rem; }
  .home-auth-modal__story > p { margin-top: 9px; }
  .home-auth-modal__story ul { display: none; }
  .home-auth-modal__panel { min-height: 0; padding: 25px 24px 24px; }
  .home-auth-modal__providers { grid-template-columns: 1fr; }
  .home-auth-modal__provider { min-height: 48px; }
}

@media (max-width: 420px) {
  .shell { width: min(calc(100% - 24px), var(--max)); }
  .nav-actions { gap: 4px; }
  .language-control { min-width: 86px; min-height: 48px; gap: 4px; padding: 3px 4px; }
  .language-flag-frame { width: 24px; height: 24px; flex-basis: 24px; border-radius: 6px; }
  .language-control img { width: 16px; height: 11px; }
  .language-divider { height: 18px; }
  .language-select-wrap::after { width: 5px; height: 5px; margin-left: 3px; }
  .language-control select { width: 31px; height: 38px; padding: 0; font-size: 1rem; }
  .hero-buttons { grid-template-columns: 1fr; }
  .signal-stage { height: 248px; padding: 17px; }
  .signal-bars { gap: 2px; }
  .waitlist-panel, #contact .shell { width: calc(100% - 24px); padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .signal-bars i { animation: none; }
  .phone-meter > i::after, .phone-spectrum-plot i, .phone-ai-header i, .phone-assistant-message i, .phone-user-message, .phone-assistant-message { animation: none; }
  .farm-tablet-levels i::after, .breeding-tablet-header span i, .breeding-timeline i, .breeding-step, .breeding-step > i { animation: none; }
  .module::before { animation: none; }
  .header-auth-button::after { animation: none; }
  .module:hover, .module:focus-within { transform: none; }
  .module:hover .module-icon, .module:focus-within .module-icon { transform: none; }
  .button, .notice { transition: none; }
}

@media (max-width: 640px) {
  .site-header {
    height: 68px;
  }
  .nav {
    align-content: center;
    flex-wrap: nowrap;
    height: 68px;
    justify-content: space-between;
    min-height: 68px;
    padding: 7px 0;
  }
  .brand {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
  }
  .brand img { width: 32px; height: 32px; }
  .brand span { background: linear-gradient(100deg, #f4f8ff 2%, #23d7f4 50%, #8b6cf7 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-family: 'SwiftSync Ethnocentric', sans-serif !important; font-size: .78rem; font-weight: 400; letter-spacing: .07em; }
  .nav-actions { width: auto; min-width: 0; flex: 0 0 auto; justify-content: flex-end; gap: 5px; margin-left: auto; }
  .header-auth-button { min-height: 34px; padding: 0 9px; font-size: .75rem; }
  .header-account-toggle { max-width: 116px; }
  .header-auth-button::before { inset: -7px 0; }
}

@media (max-width: 420px) {
  .nav { gap: 5px; }
  .brand { gap: 4px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-size: .75rem; letter-spacing: .035em; }
  .nav-actions { gap: 4px; }
  .header-auth-button { min-height: 32px; padding: 0 7px; font-size: clamp(.625rem, 2.8vw, .6875rem); }
  .header-account-toggle { max-width: 104px; }
  .header-auth-button::before { inset: -8px 0; }
}

/* Compact display scale: body copy and forms remain at the readable 1rem baseline. */
.hero { min-height: auto; padding: 64px 0 44px; }
.hero h1 { margin-bottom: 18px; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; }
.hero-copy { font-size: 1rem; line-height: 1.65; }
.hero-buttons { margin-top: 22px; }
.signal-stage { height: 330px; padding: 22px; border-radius: 22px; }
.signal-bars { height: 200px; }
.section-spacer { height: 56px; }
.section-head { margin-bottom: 28px; }
.section h2 { margin: 8px 0 12px; font-size: clamp(1.65rem, 3vw, 2.5rem); }
.section-lead { line-height: 1.6; }
.dark-band { padding: 62px 0; }
.split { gap: 32px; }
.check { padding: 18px; border-radius: 16px; }
.module { min-height: 228px; padding: 16px; border-radius: 16px; }
.module-icon { width: 40px; height: 40px; margin-bottom: 14px; padding: 8px; border-radius: 11px; }
.module h3 { margin-bottom: 7px; font-size: 1rem; }
.module p { font-size: .875rem; line-height: 1.5; }
.module-foot { padding-top: 12px; }
.waitlist-panel, #contact .shell { padding: 36px; border-radius: 21px; }
.waitlist-fields { gap: 8px; }
.waitlist-form { gap: 8px; }
.contact-grid { gap: 28px; }
.form { gap: 7px 9px; padding: 12px; border-radius: 16px; }
.field label { font-size: .75rem; }
.field input, .field select, .field textarea { min-height: 36px; padding: 5px 9px; }
.field textarea { min-height: 64px; }
.consent, .form-note { font-size: .75rem; }
.form > .button { grid-column: 1; justify-self: start; min-height: 40px; padding: 0 16px; font-size: .8125rem; }
.site-footer { padding: 42px 0 24px; }
.footer-top { gap: 20px; padding-top: 12px; }
.footer-brand p { max-width: 280px; font-size: .875rem; line-height: 1.5; }
.footer-language { margin-top: 12px; }
.footer-language { width: 78px; min-width: 78px; min-height: 30px; gap: 3px; padding: 2px 4px 2px 3px; border-radius: 9px; }
.footer-language .language-flag-frame { width: 24px; height: 24px; flex-basis: 24px; border-radius: 6px; }
.footer-language img { width: 16px; height: 11px; }
.footer-language .language-divider { height: 18px; }
.footer-language .language-select-wrap::after { width: 5px; height: 5px; margin-left: 3px; }
.footer-language select { width: 25px; height: 25px; font-size: .75rem; color-scheme: dark; background-color: #081123; color: #edf6ff; }
.footer-language select option { background: #081123; color: #edf6ff; }
.field select, .waitlist-form select { border-color: rgba(104, 147, 204, .42); background-color: #081123; color: #edf6ff; color-scheme: dark; }
.field select:focus, .waitlist-form select:focus { border-color: #37dcf6; box-shadow: 0 0 0 3px rgba(55, 220, 246, .12); outline: 0; }
.footer-col h3 { margin-bottom: 8px; font-size: .875rem; }
.footer-col a { min-height: 0; padding: 0; font-size: .875rem; line-height: 1.35; }
.socials { gap: 10px; margin-top: 14px; }
.socials a { width: 36px; height: 36px; border-color: transparent; background: rgba(255, 255, 255, .08); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.socials a:nth-child(1) { background: #1877f2; box-shadow: 0 0 16px rgba(24, 119, 242, .28); }
.socials a:nth-child(2) { background: rgba(255, 255, 255, .1); box-shadow: none; }
.socials a:nth-child(3) { background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4); box-shadow: 0 0 16px rgba(221, 42, 123, .24); }
.socials a:nth-child(4) { background: #ff0000; box-shadow: 0 0 16px rgba(255, 0, 0, .24); }
.socials a:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.12); }
.socials img { width: 19px; height: 19px; }
.footer-bottom { gap: 12px; margin-top: 22px; padding-top: 14px; }
.form .field input, .form .field select, .form .field textarea { color: #aeb7c7; font-size: .875rem; }
.form .field input::placeholder, .form .field textarea::placeholder { color: #78849a; opacity: 1; }

@media (max-width: 640px) {
  .hero { padding: 42px 0 28px; }
  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.3rem); }
  .signal-stage { height: 264px; padding: 16px; }
  .signal-bars { height: 142px; }
  .section-spacer { height: 38px; }
  .section h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .dark-band { padding: 44px 0; }
  .module { min-height: 0; padding: 15px 14px; }
  .module-icon { width: 38px; height: 38px; margin-bottom: 12px; padding: 7px; }
  .waitlist-panel, #contact .shell { padding: 25px 18px; }
  .waitlist-fields { grid-template-columns: 1fr; }
  .waitlist-form .field input { min-height: 46px; font-size: 1rem; }
  .field input, .field select, .field textarea { min-height: 42px; font-size: 1rem; }
  .field textarea { min-height: 72px; }
}