:root {
  --deep: #16392a;
  --green: #168f5b;
  --leaf: #43bb76;
  --water: #168aa6;
  --sky: #dff5f8;
  --gold: #c99b33;
  --cream: #fbfcf6;
  --paper: rgba(255,255,255,.88);
  --muted: #617569;
  --line: #dbe9df;
  --soft: #eef8f2;
  --shadow: 0 22px 70px rgba(18, 66, 42, .13);
  --radius: 24px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--deep);
  background:
    radial-gradient(circle at 12% 3%, rgba(126,217,228,.34), transparent 28rem),
    radial-gradient(circle at 88% 10%, rgba(67,187,118,.22), transparent 30rem),
    linear-gradient(130deg, #f8fff9 0%, #fbfcf6 48%, #eef8fb 100%);
  line-height: 1.5;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

.access-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 4rem);
}

.access-panel {
  width: min(780px, 100%);
  padding: clamp(1.4rem, 4vw, 3.5rem);
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow);
}

.access-logo { width: min(360px, 86vw); margin-bottom: 1.1rem; }
.access-panel .access-logo {
  width: min(620px, 100%);
  padding: .6rem;
  border-radius: 16px;
  background: #fbfcf8;
  border: 1px solid var(--line);
}
.access-panel h1 { margin: .45rem 0; font-size: clamp(2.6rem, 8vw, 5.8rem); line-height: .92; }
.access-panel p { color: var(--muted); font-weight: 650; font-size: 1.08rem; max-width: 58ch; }
.access-login-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.1rem 0 0;
}
.access-login-form label {
  display: grid;
  gap: .35rem;
  color: var(--deep);
  font-weight: 850;
}
.access-login-form input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .7rem .8rem;
  background: #fff;
  color: var(--deep);
}
.portal-access-message:empty { display: none; }
.portal-access-message .production-access-card {
  margin-top: 1rem;
  padding: .85rem;
  border: 1px solid rgba(22,138,166,.18);
  border-radius: 16px;
  background: var(--sky);
}
.portal-access-message .production-access-card p { margin: .35rem 0 0; }
.access-actions, .hero-actions, .action-row, .button-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.portal-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.portal-shell .topbar {
  display: none;
}

.brand img { width: clamp(210px, 24vw, 300px); }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.nav a, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .58rem .86rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  color: var(--deep);
  text-decoration: none;
  font-weight: 800;
  font-size: .86rem;
  cursor: pointer;
}
.button.primary, .primary {
  background: var(--deep);
  border-color: var(--deep);
  color: white;
}
.button.small { min-height: 36px; padding: .42rem .7rem; }

.demo-banner {
  background: linear-gradient(90deg, #123524, #1c8757);
  color: #fff9e8;
  text-align: center;
  padding: .56rem 1rem;
  font-weight: 850;
  font-size: .92rem;
}

main { width: min(1560px, calc(100% - 1.25rem)); margin: .75rem auto 4rem; }

.hub-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}

.hub-sidebar {
  position: sticky;
  top: .75rem;
  height: calc(100vh - 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(18,66,42,.08);
}

.hub-brand img {
  width: 155px;
}

.brand-lockup {
  display: grid;
  gap: .3rem;
  padding: .55rem;
  border-radius: 14px;
  background: #fbfcf8;
  border: 1px solid var(--line);
  color: var(--deep);
  text-decoration: none;
}

.brand-lockup .brand-symbio {
  width: 100%;
  max-height: 70px;
  object-fit: contain;
}

.brand-lockup span {
  color: var(--deep);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

.brand-lockup small {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  text-align: center;
}

.brand-lockup .brand-balponics {
  width: 100%;
  max-height: 52px;
  object-fit: contain;
  border-top: 1px solid var(--line);
  padding-top: .3rem;
}

.hub-sidebar nav {
  display: grid;
  gap: .22rem;
}

.hub-sidebar nav a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  color: #244535;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 850;
}

.hub-sidebar nav a.active,
.hub-sidebar nav a:hover {
  background: #e8f7ec;
  color: #0f7049;
}

.nav-complete {
  margin-left: auto;
  color: #0f7049;
  font-weight: 950;
  font-size: .82rem;
}

.sidebar-progress {
  display: grid;
  gap: .35rem;
  padding: 0 .15rem;
}

.sidebar-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: #e3eee6;
  overflow: hidden;
}

.sidebar-progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: #0f7049;
  border-radius: 999px;
  transition: width .25s ease;
}

.sidebar-progress span {
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
}

.hub-sidebar .icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.hub-sidebar .icon svg {
  width: 16px;
  height: 16px;
}

.sidebar-help {
  margin-top: auto;
  display: grid;
  gap: .45rem;
  padding: .75rem;
  border-radius: 14px;
  background: #e8f7ef;
  color: var(--deep);
}

.sidebar-help span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.hub-main {
  min-width: 0;
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  scroll-behavior: smooth;
  padding-right: .15rem;
}

.app-pages {
  display: block;
}

.portal-page {
  display: none;
  animation: pageIn .22s ease-out;
}

.portal-page.active {
  display: block;
}

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

.page-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 1rem;
  padding: clamp(1rem, 2.4vw, 2rem);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(231,248,240,.88));
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(18,66,42,.08);
}

.page-title h2 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 4.6vw, 5.2rem);
}

.page-title p {
  max-width: 76ch;
  color: var(--muted);
  font-size: 1.03rem;
  font-weight: 700;
}
section {
  margin: 1rem 0;
  padding: clamp(1rem, 2.4vw, 2.3rem);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 16px 48px rgba(19, 70, 43, .08);
}

.hero {
  min-height: min(760px, calc(100vh - 8rem));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: stretch;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255,255,255,.92), rgba(241,250,244,.86)),
    var(--paper);
}
.premium-hero {
  border-radius: 32px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.96), rgba(240,250,244,.9) 46%, rgba(226,246,250,.86)),
    var(--paper);
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.hero h1 { margin: 0; font-size: clamp(2.75rem, 6vw, 6.9rem); line-height: .92; letter-spacing: 0; max-width: 11ch; }
.hero p { max-width: 68ch; color: var(--muted); font-weight: 650; font-size: 1.08rem; }
.hero-visual {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(22,143,91,.1), rgba(22,138,166,.16)),
    #f8fff9;
  border: 1px solid var(--line);
}

.photo-hero {
  isolation: isolate;
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 22px 54px rgba(18,66,42,.14);
}

.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,50,34,.42), rgba(11,50,34,.08) 42%, rgba(255,255,255,.08)),
    linear-gradient(0deg, rgba(7,41,29,.38), transparent 54%);
}

.photo-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
}
.field-map {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.5), transparent),
    repeating-linear-gradient(102deg, rgba(22,143,91,.18) 0 16px, rgba(22,138,166,.1) 16px 32px);
}
.greenhouse-card, .water-card, .solar-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: .35rem;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 18px 42px rgba(20,74,48,.14);
  font-weight: 850;
}
.greenhouse-card { left: 8%; top: 12%; width: 46%; }
.water-card { right: 8%; top: 35%; width: 38%; }
.solar-card { left: 18%; bottom: 12%; width: 48%; }
.hero-compass {
  position: absolute;
  z-index: 2;
  right: 8%;
  top: 8%;
  width: 42%;
  display: grid;
  gap: .35rem;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 18px 42px rgba(20,74,48,.14);
  font-weight: 850;
}

.eyebrow, .pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .45rem;
  padding: .42rem .68rem;
  border-radius: 999px;
  color: #116a49;
  background: #eaf7ef;
  border: 1px solid #d4eadc;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
.section-head h2, h2 { margin: .2rem 0; font-size: clamp(1.75rem, 3vw, 3.35rem); line-height: 1; }
.section-head p { max-width: 74ch; color: var(--muted); font-weight: 650; }

.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.snapshot-band {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(237,250,243,.82));
}

.card {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
}

.compact-section {
  padding: clamp(1rem, 2vw, 1.6rem);
}

.tool-card {
  display: grid;
  gap: 1rem;
  align-content: start;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(240,250,244,.86));
}

.tool-page-section {
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(232,248,239,.78)),
    var(--paper);
}

.story-section,
.technology-section {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(231,248,240,.82)),
    var(--paper);
}

.brand-credibility {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  background: #fbfcf8;
}

.brand-card {
  display: grid;
  grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .8rem;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--line);
}

.brand-card img {
  width: 100%;
  max-height: 115px;
  object-fit: contain;
}

.brand-card strong {
  display: block;
  font-size: 1.2rem;
  margin-bottom: .25rem;
}

.brand-card span {
  color: var(--muted);
  font-weight: 700;
}

.brand-plus {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--green);
  font-size: 1.6rem;
  font-weight: 950;
}

.brand-powered {
  grid-column: 1 / -1;
  padding: .8rem 1rem;
  border-radius: 14px;
  color: white;
  background: linear-gradient(90deg, #0f3d2e, #168f5b);
  text-align: center;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story-grid,
.technology-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
  margin-bottom: 1.25rem;
}

.story-copy {
  display: grid;
  align-content: center;
  gap: .85rem;
}

.story-copy h2 {
  max-width: 13ch;
  font-size: clamp(2rem, 4vw, 4.4rem);
}

.story-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.story-proof {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(18,66,42,.12);
}

.story-proof img,
.technology-layout > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proof-callout {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(18,66,42,.12);
  font-weight: 850;
}

.proof-callout span {
  color: var(--muted);
  font-weight: 700;
}

.benefit-grid {
  align-items: stretch;
}

.benefit-card {
  min-height: 240px;
  display: grid;
  gap: .65rem;
  align-content: start;
  background: linear-gradient(145deg, #fff, #edf9f2);
}

.risk-card {
  border-color: #ead8a8;
  background: linear-gradient(145deg, #fff, #fff9e8);
}

.document-card {
  display: grid;
  align-content: start;
  gap: .65rem;
  background: linear-gradient(145deg, #fff, #eef8fb);
}

.benefit-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

details {
  margin-top: .35rem;
  color: var(--muted);
  font-weight: 700;
}

summary {
  cursor: pointer;
  color: #0f7049;
  font-weight: 950;
}

.technology-layout > img {
  min-height: 520px;
  border-radius: 22px;
  border: 1px solid var(--line);
}

.technology-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.technology-grid article {
  display: grid;
  gap: .5rem;
  align-content: start;
  min-height: 150px;
  padding: .85rem;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
}

.technology-grid span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.pitch-panel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border-radius: 22px;
  background: linear-gradient(135deg, #113a29, #168f5b);
  color: white;
  box-shadow: 0 18px 46px rgba(18,66,42,.16);
}

.pitch-panel > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .85rem;
  align-items: center;
}

.pitch-panel .icon {
  grid-row: span 2;
  color: #0f7049;
  background: white;
}

.pitch-panel h3,
.pitch-panel p {
  margin: 0;
}

.pitch-panel p {
  max-width: 82ch;
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

.pitch-panel .button {
  background: white;
  color: var(--deep);
  border-color: white;
  flex: 0 0 auto;
}

.graphic-card {
  min-height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  overflow: hidden;
}

.graphic-card img {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  padding: .45rem;
  border-radius: 14px;
  background: #f7fffa;
  border: 1px solid var(--line);
}

.page-photo-band {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: .75rem;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #edf9f1);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(18,66,42,.07);
}

.page-photo-band img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
}

.page-photo-band h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.4rem, 2.2vw, 2.15rem);
}

.page-photo-band p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.with-photo {
  overflow: hidden;
  padding: 0;
}

.with-photo img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.with-photo > div {
  display: grid;
  gap: .75rem;
  padding: 1rem;
}

.ecosystem-section,
.gallery-section {
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(233,249,241,.78)),
    var(--paper);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}

.ecosystem-card {
  min-height: 176px;
  display: grid;
  align-content: start;
  gap: .55rem;
  padding: .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(18,66,42,.06);
}

.ecosystem-card h3,
.visual-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.12;
}

.ecosystem-card p,
.visual-card p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.visual-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(18,66,42,.08);
}

.visual-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #e8f7ef;
}

.visual-card > div {
  display: grid;
  gap: .65rem;
  padding: 1rem;
}
.dashboard-grid .kpi {
  min-height: 172px;
}
.kpi {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,249,244,.86));
}
.kpi strong { font-size: clamp(1.7rem, 2.55vw, 2.7rem); line-height: 1.05; overflow-wrap: anywhere; }
.kpi span, .muted { color: var(--muted); font-weight: 650; }
.balponics-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin: 28px 0 0;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(10, 86, 49, .12);
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
.balponics-links a {
  color: var(--green);
  text-decoration: none;
}
.balponics-links a:hover {
  text-decoration: underline;
}
.icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--green);
  background: #e9f8ef;
  opacity: 1;
}
.icon svg { width: 24px; height: 24px; }

.asset-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ecosystem-card .asset-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #e8f7ef;
}

.ecosystem-card .asset-icon img {
  width: 34px;
  height: 34px;
}

.contribution-card,
.scenario-card,
.ownership-option {
  display: grid;
  align-content: start;
  gap: .75rem;
}

.ownership-options {
  margin-top: 1rem;
}

.qualification-grid .card,
.scenario-card {
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,248,243,.82));
}

.scenario-thumb {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #e8f7ef;
}

.pathway {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.pathway article,
.wizard-step {
  position: relative;
  display: grid;
  gap: .55rem;
  min-height: 180px;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--line);
}

.pathway article > span,
.wizard-step > span {
  color: var(--gold);
  font-weight: 950;
  letter-spacing: .06em;
}

.wizard-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.wizard-step {
  min-height: 170px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,248,239,.74));
}

.guided-tool {
  align-items: stretch;
}

.tool-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  align-items: start;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
label { display: grid; gap: .35rem; color: var(--muted); font-size: .84rem; font-weight: 850; }
.field-label {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
}

.field-label small {
  flex: 0 0 auto;
  padding: .16rem .42rem;
  border-radius: 999px;
  background: #e9f8ef;
  color: #0f7049;
  font-size: .72rem;
  font-weight: 950;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  color: var(--deep);
  padding: .72rem .78rem;
  font-size: 16px;
  line-height: 1.35;
}
textarea { min-height: 112px; resize: vertical; }

.result-panel {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(232,248,239,.9), rgba(226,246,250,.75));
  border: 1px solid #cfe8db;
}
.feasibility-summary {
  grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
  align-items: center;
  margin-bottom: 1rem;
}
.cockpit-section {
  background:
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(232,248,239,.76)),
    var(--paper);
}

.cockpit-summary {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 18px 50px rgba(18,66,42,.08);
}

.cockpit-metrics {
  margin-bottom: 1rem;
}

.metric-card {
  display: grid;
  gap: .55rem;
  align-content: start;
}

.metric-card strong {
  font-size: clamp(1.55rem, 2.4vw, 2.45rem);
  line-height: 1;
}
.big-number { font-size: clamp(2.05rem, 3.6vw, 3.85rem); line-height: .95; font-weight: 950; }
.score-meter, .ownership-bar, .readiness-bar {
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3ece7;
  border: 1px solid #d2e3d9;
}
.score-meter span, .readiness-bar span {
  display: block;
  height: 100%;
  width: var(--value, 50%);
  background: linear-gradient(90deg, var(--water), var(--leaf));
}
.ownership-bar { display: flex; height: 28px; }
.ownership-bar span { display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 900; white-space: nowrap; }
.partner-share { background: var(--green); width: var(--partner); }
.symbio-share { background: var(--water); width: var(--symbio); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: .42rem .62rem;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid var(--line);
  color: var(--deep);
  font-weight: 850;
  font-size: .82rem;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem;
}
.timeline article { position: relative; padding: 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.timeline span { color: var(--gold); font-weight: 950; }

.qa-item summary {
  cursor: pointer;
  font-weight: 900;
  padding: .9rem 0;
}
.qa-item + .qa-item { border-top: 1px solid var(--line); }
.rating-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0; }
.rating-row button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .38rem .62rem; cursor: pointer; font-weight: 850; }

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  max-width: 360px;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: #123524;
  color: white;
  box-shadow: var(--shadow);
}

.disclaimer {
  background: #fff9e8;
  border-color: #ead8a8;
}

@media (max-width: 1080px) {
  .hub-layout { grid-template-columns: 1fr; }
  .hub-sidebar {
    position: relative;
    top: auto;
    height: auto;
  }
  .hub-sidebar nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hub-main {
    max-height: none;
    overflow: visible;
  }
  .page-title,
  .page-photo-band,
  .story-grid,
  .technology-layout,
  .brand-credibility {
    grid-template-columns: 1fr;
  }
  .brand-plus {
    justify-self: center;
  }
  .technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pitch-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-title h2 {
    max-width: none;
  }
  .hero, .tool-grid { grid-template-columns: 1fr; }
  .grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecosystem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pathway { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feasibility-summary { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  input[type="number"],
  input[type="text"],
  select {
    font-size: 17px;
  }
}

@media (max-width: 720px) {
  main { width: min(100% - 1rem, 1500px); }
  .topbar { align-items: flex-start; flex-direction: column; }
  .nav { justify-content: flex-start; }
  .grid.two, .grid.three, .grid.four, .grid.five, .grid.six, .form-grid, .timeline { grid-template-columns: 1fr; }
  .access-login-form { grid-template-columns: 1fr; }
  .ecosystem-grid, .photo-gallery { grid-template-columns: 1fr; }
  .technology-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
  .hero-visual { min-height: 420px; }
  .greenhouse-card, .water-card, .solar-card, .hero-compass { position: relative; inset: auto; width: auto; margin: 1rem; }
  .field-map { opacity: .55; }
  .pathway, .wizard-rail { grid-template-columns: 1fr; }
  .hub-sidebar nav { grid-template-columns: 1fr; }
  .page-title {
    padding: 1rem;
  }
  .brand-card {
    grid-template-columns: 1fr;
  }
  .page-title h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }
}
.production-access-status {
  margin: 12px auto;
  width: min(1180px, calc(100% - 24px));
  padding: 12px 14px;
  border: 1px solid rgba(15, 107, 58, 0.2);
  border-radius: 8px;
  background: #fffdf0;
  color: #123026;
}

.production-access-status p {
  margin: 4px 0 0;
}

.production-login-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
  align-items: end;
}

.production-login-form label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.production-login-form input {
  border: 1px solid rgba(15, 107, 58, 0.2);
  border-radius: 8px;
  padding: 0.7rem;
  font: inherit;
}

.production-access-actions {
  margin-top: 10px;
}

.production-access-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 107, 58, 0.25);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  color: #123026;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.production-access-button.primary {
  background: #0f6b3a;
  color: #fff;
}