/* ============================================================================
   TERNEOS - shared site stylesheet
   Palette pulled 1:1 from the platform's ui/ui_kit.gd UIKit constants, plus
   the three resource colors (water/crop/energy) used for the ambient
   background. Visual language: liquid glass - translucent floating surfaces,
   soft blur, subtle motion, minimal noise.
   ============================================================================ */

:root {
  --ink: #14190f;          /* page background */
  --ink-2: #0e120a;        /* deepest background (hero gradient edge) */
  --panel: #1d221b;        /* raised panels / cards */
  --card: #262c22;         /* card fallback (non-glass contexts) */
  --card-hover: #2f3629;

  --accent: #51c271;       /* primary green */
  --accent-hover: #61d982;
  --accent-pressed: #3c9554;

  --gold: #f3c861;
  --danger: #e35c4f;

  --water: #4da6f0;
  --crop: #73cc5c;
  --energy: #fab234;

  --text: #f3f1e4;
  --text-dim: #b4bba7;
  --text-faint: #99a18e;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(102, 158, 115, 0.55);

  /* liquid-glass surface tokens, reused by the nav, footer and cards */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  --glass-blur: blur(22px) saturate(160%);

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1120px;

  --nav-h: 56px;
  --nav-gap: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: calc(var(--nav-h) + var(--nav-gap) * 2);
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .brand-word {
  font-family: "Fredoka", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 0.5em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------ ambient background --- */

.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--ink);
}

.bg-fx span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
  will-change: transform;
}

/* Each blob represents one of the platform's three core resources, drifting
   on its own timeline through several waypoints (not a simple back-and-forth)
   so the motion reads as ambient and unpredictable rather than mechanical.
   Purely CSS-driven - nothing here reacts to the cursor. */
.bg-fx .b-water {
  width: 46vw; height: 46vw;
  left: -8vw; top: -14vw;
  background: var(--water);
  animation: driftA 46s ease-in-out infinite;
}
.bg-fx .b-crop {
  width: 38vw; height: 38vw;
  right: -6vw; bottom: -10vw;
  background: var(--crop);
  animation: driftB 54s ease-in-out infinite;
}
.bg-fx .b-energy {
  width: 30vw; height: 30vw;
  left: 32vw; top: 38vh;
  background: var(--energy);
  opacity: 0.15;
  animation: driftC 38s ease-in-out infinite;
}

@keyframes driftA {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(6vw, 4vw) scale(1.08); }
  60%  { transform: translate(2vw, 9vw) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes driftB {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(-5vw, -6vw) scale(1.05); }
  70%  { transform: translate(-9vw, 1vw) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes driftC {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(4vw, -5vw) scale(1.12); }
  75%  { transform: translate(-3vw, 3vw) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-fx span { animation: none !important; }
}

/* ---------------------------------------------------------------- nav --- */
/* Always a floating glass pill, detached from the viewport edge - never
   docks or changes on scroll. */

.site-nav {
  position: fixed;
  top: var(--nav-gap);
  left: 0;
  right: 0;
  z-index: 50;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 22px;
  margin: 0 auto;
  max-width: calc(var(--maxw) - 160px);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
}

.logo img { width: 30px; height: 30px; border-radius: 8px; }

.logo .brand-word {
  color: var(--accent);
  font-size: 19px;
  letter-spacing: 0.04em;
  margin: 0;
}

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}

.nav-links a {
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--text); }
.nav-links a.current { color: var(--accent); }

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after { position: absolute; top: 5px; }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 8px 18px 0;
  padding: 10px;
  border-radius: 18px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--text-dim);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
}
.mobile-menu a:hover, .mobile-menu a.current { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, color 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Toned down from a solid accent fill - a soft tinted glass pill reads as
   premium without shouting. Green is a quiet accent (text + hairline
   border) rather than a solid block. */
.btn-primary {
  background: rgba(81, 194, 113, 0.10);
  color: var(--accent);
  border-color: rgba(81, 194, 113, 0.35);
  backdrop-filter: blur(10px);
}
.btn-primary:hover {
  background: rgba(81, 194, 113, 0.18);
  border-color: var(--accent);
  color: var(--accent-hover);
  box-shadow: 0 10px 24px rgba(81, 194, 113, 0.14);
}

.btn-secondary {
  background: var(--glass-bg);
  color: var(--text);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }

/* Google Play badge */
.play-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background 0.2s ease;
}
.play-badge:hover { transform: translateY(-2px); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.09); }
.play-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.play-badge .play-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.play-badge .play-text small { font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-faint); text-transform: uppercase; }
.play-badge .play-text strong { font-size: 16.5px; color: var(--text); font-family: "Inter", sans-serif; font-weight: 600; }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 110px;
  scroll-margin-top: calc(var(--nav-h) + var(--nav-gap) * 2);
}

.hero-inner {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  animation: riseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero .wordmark {
  font-size: clamp(48px, 9vw, 84px);
  letter-spacing: 0.03em;
  color: var(--accent);
  /* Layered soft shadows instead of -webkit-text-stroke: a stroke traces the
     glyph OUTLINE, and on a rounded font like Fredoka that pinches oddly at
     tight joints (the R's leg was the visible casualty). Shadows sit behind
     the fill instead, so every letterform stays clean at any size. */
  text-shadow:
    0 1px 0 rgba(13, 41, 23, 0.9),
    0 -1px 0 rgba(13, 41, 23, 0.9),
    1px 0 0 rgba(13, 41, 23, 0.9),
    -1px 0 0 rgba(13, 41, 23, 0.9),
    0 4px 20px rgba(0, 0, 0, 0.45);
  margin-bottom: 6px;
}

.hero .rule {
  width: 160px;
  height: 2px;
  background: rgba(81, 194, 113, 0.55);
  margin: 10px auto 14px;
}

.hero .tagline {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.hero p.lede {
  font-size: 18px;
  color: var(--text-dim);
  margin-bottom: 36px;
}

.hero .cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ sections -- */

section.block {
  padding: 88px 0;
  scroll-margin-top: calc(var(--nav-h) + var(--nav-gap) * 2 + 12px);
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(28px, 4vw, 38px); }
.section-head p { color: var(--text-dim); font-size: 16px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(16px);
}

.feature-card.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), var(--glass-highlight);
}

.feature-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(81, 194, 113, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-card .icon img { width: 24px; height: 24px; object-fit: contain; }

.feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.feature-card p { color: var(--text-dim); font-size: 14.5px; margin: 0; }

.feature-card.more ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: 14px;
}
.feature-card.more li { margin-bottom: 6px; }

/* --------------------------------------------------------------- footer -- */
/* Also a floating glass card, inset from the page edges - never a flush
   full-width bar. */

.site-footer {
  margin: 32px auto 28px;
  max-width: calc(var(--maxw) - 40px);
  padding: 40px 36px 26px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}

.site-footer .brand { display: flex; align-items: center; gap: 10px; }
.site-footer .brand img { width: 26px; height: 26px; border-radius: 6px; }
.site-footer .brand span { font-family: "Fredoka", sans-serif; color: var(--accent); font-size: 17px; }

.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); font-size: 14px; }
.footer-links a:hover { color: var(--text); }

.site-footer .fine-print {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  color: var(--text-faint);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------- legal doc pages --- */

.legal-hero {
  padding: 60px 0 40px;
  scroll-margin-top: calc(var(--nav-h) + var(--nav-gap) * 2);
}
.legal-hero .container { max-width: 820px; }
.legal-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.legal-hero h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 10px; }
.legal-hero .meta { color: var(--text-faint); font-size: 14px; }

.legal-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.legal-body h2 {
  font-size: 21px;
  margin-top: 44px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.legal-body h2:first-of-type { border-top: none; margin-top: 0; }

.legal-body h3 { font-size: 16.5px; color: var(--text); margin-top: 22px; }

.legal-body p, .legal-body li { color: var(--text-dim); font-size: 15.5px; }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }

.legal-body strong { color: var(--text); }

.callout {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14.5px;
  color: var(--text-dim);
}

.callout.gold { border-left-color: var(--gold); }
.callout.gold strong { color: var(--gold); }

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 28px;
  font-size: 14.5px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: top;
}
.data-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: 600;
}

.back-to-top {
  display: inline-block;
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-faint);
}

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-inner { max-width: calc(100% - 32px); }
}

@media (max-width: 640px) {
  section.block { padding: 64px 0; }
  .hero { padding: 56px 0 76px; }
  .site-footer { margin: 24px 12px 20px; padding: 32px 22px 20px; }
  .site-footer .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .site-footer .footer-links { justify-content: center; }
  .site-footer .fine-print { flex-direction: column; align-items: center; text-align: center; }
  .data-table { font-size: 13px; }
  .bg-fx .b-water, .bg-fx .b-crop, .bg-fx .b-energy { filter: blur(46px); }
}

/* Learn More + the Play badge stay side-by-side down to very narrow phones
   thanks to .cta-row's own flex-wrap; only truly tiny viewports wrap, and
   when they do, neither button stretches full-width - they stay compact and
   centered so the Play badge (and the icon+label inside it) still reads as
   one centered unit rather than a stretched bar. */
@media (max-width: 340px) {
  .hero .cta-row .btn, .hero .cta-row .play-badge { width: auto; }
}