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

:root { --ink:#15352c; --deep:#102c25; --green:#b5e331; --leaf:#74bd2d; --paper:#f4f6ed; --muted:#66776d; --line:#d7ded1; --white:#fff; --radius:22px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Manrope',sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-shell { overflow:hidden; }
.site-header { align-items:center; display:flex; justify-content:space-between; margin:auto; max-width:1320px; padding:24px 36px; }
.brand img { height:48px; width:auto; }
.site-nav { align-items:center; display:flex; gap:30px; font-size:13px; font-weight:700; }
.site-nav a { transition:color .2s ease; }
.site-nav a:hover { color:var(--leaf); }
.nav-cta { border:1px solid var(--ink); border-radius:30px; padding:11px 16px; }
.nav-cta span { color:var(--leaf); font-size:18px; margin-left:6px; }
.menu-toggle { display:none; }
.section-pad { margin:auto; max-width:1320px; padding:110px 36px; }
.hero { align-items:center; display:grid; gap:80px; grid-template-columns:1.02fr .98fr; min-height:650px; padding-top:80px; }
.eyebrow { align-items:center; color:var(--leaf); display:flex; font-family:'DM Mono',monospace; font-size:11px; gap:10px; letter-spacing:.12em; margin:0 0 24px; text-transform:uppercase; }
.eyebrow-dot { background:var(--leaf); border-radius:100%; box-shadow:0 0 0 5px rgba(116,189,45,.16); height:7px; width:7px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.055em; line-height:1.05; }
h1 { font-size:clamp(54px,7vw,94px); max-width:730px; margin-bottom:28px; }
h2 { font-size:clamp(42px,5vw,70px); margin-bottom:24px; }
h3 { font-size:22px; margin-bottom:11px; }
em { color:var(--leaf); font-style:normal; }
.hero-lede { color:var(--muted); font-size:18px; max-width:510px; }
.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:24px; margin:38px 0 46px; }
.button { align-items:center; border-radius:30px; display:inline-flex; font-size:13px; font-weight:800; gap:18px; padding:16px 21px; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--ink); color:var(--white); }
.button-primary:hover { background:var(--deep); }
.button span { color:var(--green); font-size:20px; line-height:0; }
.text-link { border-bottom:1px solid var(--line); font-size:13px; font-weight:800; padding-bottom:7px; }
.text-link span { color:var(--leaf); font-size:18px; margin-left:7px; }
.hero-signal { align-items:center; color:var(--muted); display:flex; font-family:'DM Mono',monospace; font-size:11px; gap:13px; letter-spacing:.08em; text-transform:uppercase; }
.hero-signal i { color:var(--leaf); font-size:18px; font-style:normal; }
.hero-visual { position:relative; }
.visual-glow { background:var(--green); border-radius:50%; filter:blur(50px); height:280px; opacity:.3; position:absolute; right:12%; top:5%; width:280px; }
.visual-frame { background:#e2e8db; border-radius:160px 28px 28px 28px; box-shadow:0 30px 70px rgba(21,53,44,.14); overflow:hidden; position:relative; transform:rotate(2deg); }
.visual-frame img,.visual-frame object { display:block; height:520px; object-fit:cover; width:100%; }
.visual-label { align-items:center; background:rgba(16,44,37,.9); bottom:19px; color:var(--white); display:flex; font-family:'DM Mono',monospace; font-size:10px; gap:9px; left:19px; padding:10px 13px; position:absolute; text-transform:uppercase; }
.pulse { background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(181,227,49,.2); height:7px; width:7px; }
.floating-note { align-items:center; background:var(--white); box-shadow:0 14px 30px rgba(21,53,44,.14); display:flex; gap:10px; padding:12px 16px; position:absolute; }
.floating-note strong { color:var(--leaf); font-family:'DM Mono',monospace; font-size:12px; }
.floating-note span { font-size:11px; font-weight:700; line-height:1.2; }
.note-top { right:-20px; top:13%; }.note-bottom { bottom:10%; left:-25px; }
.proof-strip { border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); margin:auto; max-width:1248px; }
.proof-strip div { border-right:1px solid var(--line); padding:27px 22px; }.proof-strip div:last-child { border:0; }.proof-strip strong,.proof-strip span { display:block; }.proof-strip strong { font-size:15px; }.proof-strip span { color:var(--muted); font-size:11px; margin-top:5px; }
.section-intro { max-width:720px; }.section-intro h2 { max-width:670px; }.problem-grid { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-top:60px; }.problem-card { border-top:1px solid var(--ink); padding:22px 5px; }.card-index,.eco-number { color:var(--leaf); font-family:'DM Mono',monospace; font-size:11px; }.problem-card p { color:var(--muted); font-size:14px; max-width:320px; }
.dark-panel { background:var(--deep); color:var(--white); max-width:none; padding-left:max(36px,calc((100vw - 1248px)/2)); padding-right:max(36px,calc((100vw - 1248px)/2)); }.eyebrow-light { color:var(--green); }.platform-heading { display:grid; grid-template-columns:1fr .8fr; gap:80px; }.platform-heading h2 { max-width:570px; }.platform-heading > p:last-child { align-self:end; color:#a9b9ae; font-size:16px; max-width:400px; }.flow-grid { border-left:1px solid #385047; display:grid; grid-template-columns:repeat(5,1fr); margin-top:78px; }.flow-step { border-right:1px solid #385047; min-height:265px; padding:0 25px; }.flow-step > span { color:var(--green); font-family:'DM Mono',monospace; font-size:11px; }.flow-icon { color:var(--green); font-size:36px; margin:40px 0 24px; }.flow-step h3 { font-size:20px; }.flow-step p { color:#9daf9f; font-size:13px; max-width:175px; }
.split-intro { display:flex; gap:100px; justify-content:space-between; max-width:none; }.split-intro > p { color:var(--muted); max-width:330px; padding-top:40px; }.ecosystem-grid { display:grid; gap:16px; grid-template-columns:1fr 1fr; margin-top:65px; }.eco-card { background:var(--white); border:1px solid transparent; min-height:250px; padding:28px; position:relative; transition:border-color .2s ease,transform .2s ease; }.eco-card:hover { border-color:var(--leaf); transform:translateY(-3px); }.eco-card-large { background:var(--ink); color:var(--white); }.eco-card-wide { background:#e7efcf; grid-column:span 2; min-height:180px; }.eco-card > div:nth-child(2) { max-width:300px; padding-top:43px; }.eco-kicker { color:var(--leaf); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; margin-bottom:12px; text-transform:uppercase; }.eco-card p:not(.eco-kicker) { color:var(--muted); font-size:13px; }.eco-card-large p:not(.eco-kicker) { color:#aabaae; }.eco-mark { bottom:28px; color:var(--leaf); font-size:45px; position:absolute; right:30px; }
.prototype { align-items:center; display:grid; gap:90px; grid-template-columns:1fr 1fr; }.prototype-image { background:var(--white); border-radius:22px; overflow:hidden; }.prototype-image img { filter:saturate(.8); height:450px; object-fit:cover; width:100%; }.prototype-copy > p:not(.eyebrow) { color:var(--muted); font-size:16px; max-width:500px; }.check-list { list-style:none; margin:36px 0; padding:0; }.check-list li { align-items:center; border-top:1px solid var(--line); display:flex; gap:14px; padding:15px 0; }.check-list li:last-child { border-bottom:1px solid var(--line); }.check-list li > span { align-items:center; background:var(--green); border-radius:50%; color:var(--ink); display:flex; font-size:13px; height:23px; justify-content:center; width:23px; }.check-list strong,.check-list small { display:block; }.check-list strong { font-size:13px; }.check-list small { color:var(--muted); font-size:11px; margin-top:2px; }.loop-label { color:var(--ink)!important; font-family:'DM Mono',monospace; font-size:11px!important; letter-spacing:.08em; text-transform:uppercase; }.loop-label span { color:var(--leaf); font-size:18px; margin:0 7px; }
.vision { align-items:center; background:var(--ink); color:var(--white); display:grid; gap:100px; grid-template-columns:1fr 1fr; max-width:none; padding-left:max(36px,calc((100vw - 1248px)/2)); padding-right:max(36px,calc((100vw - 1248px)/2)); }.vision-copy h2 { max-width:620px; }.vision-copy > p:last-child { color:#aabaae; max-width:490px; }.roadmap { border-left:1px solid #456056; display:flex; flex-direction:column; gap:34px; padding:20px 0 20px 38px; position:relative; }.roadmap-line { background:var(--green); height:37%; left:-1px; position:absolute; top:0; width:2px; }.roadmap-item { display:grid; gap:4px; padding-left:23px; position:relative; }.roadmap-item:before { background:#51695e; border:4px solid var(--ink); border-radius:50%; content:''; height:8px; left:-45px; position:absolute; top:3px; width:8px; }.roadmap-item.active:before { background:var(--green); }.roadmap-item span { color:var(--green); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }.roadmap-item strong { font-size:20px; }.roadmap-item small { color:#8fa397; font-size:12px; }
.contact { padding-bottom:70px; padding-top:90px; }.contact-card { align-items:center; background:var(--leaf); display:flex; justify-content:space-between; padding:55px 65px; }.contact-card h2 { color:var(--ink); margin-bottom:0; }.button-light { background:var(--ink); color:var(--white); }.button-light span { color:var(--green); }.site-footer { align-items:center; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; margin:auto; max-width:1248px; padding:25px 0 35px; }.footer-brand img { height:39px; width:auto; }.site-footer p,.site-footer > span { color:var(--muted); font-size:11px; margin:0; }.site-footer > span { justify-self:end; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }.reveal-delay { transition-delay:.12s; }
@media (max-width:900px) { .site-header { padding:20px 22px; }.brand img { height:39px; }.menu-toggle { background:none; border:1px solid var(--ink); border-radius:20px; color:var(--ink); display:block; font:700 12px 'Manrope',sans-serif; padding:8px 14px; }.site-nav { background:var(--paper); box-shadow:0 15px 30px rgba(21,53,44,.12); display:none; flex-direction:column; gap:22px; padding:25px; position:absolute; right:22px; top:75px; z-index:3; }.site-nav.is-open { display:flex; }.hero,.prototype,.vision { gap:55px; grid-template-columns:1fr; }.hero { min-height:auto; padding-top:70px; }.hero-visual { margin:0 auto; max-width:590px; width:100%; }.platform-heading { gap:30px; grid-template-columns:1fr; }.flow-grid { grid-template-columns:repeat(3,1fr); }.flow-step:nth-child(n+4) { border-top:1px solid #385047; padding-top:25px; }.vision { gap:50px; }.site-footer { grid-template-columns:1fr 1fr; margin:0 36px; }.site-footer p { justify-self:end; }.site-footer > span { grid-column:span 2; justify-self:start; margin-top:20px; } }
@media (max-width:600px) { .section-pad { padding:75px 22px; }.site-header { padding:17px 22px; }.hero h1 { font-size:52px; }.hero-lede { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; margin:30px 0 37px; }.visual-frame { border-radius:90px 18px 18px 18px; }.visual-frame img { height:330px; }.floating-note { display:none; }.proof-strip { grid-template-columns:1fr 1fr; margin:0 22px; }.proof-strip div { border-bottom:1px solid var(--line); }.proof-strip div:nth-child(2) { border-right:0; }.proof-strip div:nth-child(3),.proof-strip div:nth-child(4) { border-bottom:0; }.problem-grid,.ecosystem-grid { grid-template-columns:1fr; margin-top:40px; }.eco-card-wide { grid-column:auto; }.split-intro { display:block; }.split-intro > p { padding-top:0; }.flow-grid { grid-template-columns:1fr 1fr; margin-top:48px; }.flow-step { min-height:225px; padding:0 16px; }.flow-step:nth-child(3) { border-top:1px solid #385047; padding-top:25px; }.flow-icon { margin:30px 0 17px; }.prototype-image img { height:290px; }.prototype { gap:45px; }.vision { padding-left:22px; padding-right:22px; }.contact { padding-top:55px; }.contact-card { align-items:flex-start; flex-direction:column; gap:30px; padding:32px 24px; }.contact-card h2 { font-size:40px; }.site-footer { margin:0 22px; }.site-footer p { display:none; }.site-footer > span { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.button,.eco-card { transition:none; } }

@media (max-width:600px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Icon system */
.flow-icon { color:var(--green); font-size:0; height:40px; width:40px; }
.flow-icon svg,.eco-mark svg { fill:none; height:100%; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:100%; }
.eco-mark { font-size:0; height:48px; width:48px; }
.eco-mark svg { stroke-width:1.6; }
.visual-frame img,.visual-frame object,.prototype-image img,.prototype-image object { background:#fff; object-fit:contain; }
.prototype-image object { display:block; height:450px; width:100%; }
@media (max-width:600px) { .prototype-image object { height:290px; } }

/* Frontend design pass: field-data editorial system */
:root {
  --ink: #122b25;
  --deep: #071c18;
  --green: #d7f35b;
  --leaf: #8fca3d;
  --paper: #f3f5ed;
  --muted: #60736a;
  --line: #d4ddd0;
  --white: #fff;
  --shadow: 0 24px 70px rgba(16, 49, 39, .12);
  --shadow-small: 0 12px 28px rgba(16, 49, 39, .09);
  --radius: 28px;
}
body {
  background:
    radial-gradient(circle at 82% 5%, rgba(215,243,91,.19), transparent 25rem),
    radial-gradient(circle at 6% 42%, rgba(143,202,61,.10), transparent 24rem),
    var(--paper);
}
body::before {
  background-image: linear-gradient(rgba(18,43,37,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(18,43,37,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}
.site-header {
  backdrop-filter: blur(18px);
  background: rgba(243,245,237,.78);
  border: 1px solid rgba(18,43,37,.08);
  border-radius: 999px;
  box-shadow: 0 10px 35px rgba(18,43,37,.06);
  margin-top: 18px;
  padding: 13px 16px 13px 22px;
  position: relative;
  z-index: 5;
}
.brand { align-items: center; display: flex; flex: 0 0 auto; }
.brand img { height: 58px; width: auto; }
.network-tag { align-items: center; background: var(--ink); border: 1px solid rgba(215,243,91,.35); border-radius: 999px; color: var(--green); display: inline-flex; font-family: 'DM Mono',monospace; font-size: 9px; gap: 8px; letter-spacing: .1em; margin-left: 18px; padding: 10px 13px; text-transform: uppercase; white-space: nowrap; }
.network-tag b { color: #a9b9ae; font-size: 12px; font-weight: 400; }
.site-nav { gap: 24px; }
.site-nav a { color: #3f554c; }
.nav-cta { background: var(--ink); border-color: var(--ink); color: var(--white); padding: 12px 18px; }
.nav-cta:hover { color: var(--green)!important; }
.hero { gap: 66px; min-height: 720px; padding-bottom: 92px; padding-top: 82px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { font-size: 10px; font-weight: 500; }
.hero .eyebrow { background: rgba(215,243,91,.25); border: 1px solid rgba(143,202,61,.35); border-radius: 999px; display: inline-flex; padding: 9px 13px; }
.hero h1 { font-size: clamp(56px, 7.3vw, 101px); font-weight: 800; letter-spacing: -.075em; line-height: .96; max-width: 680px; }
.hero h1 em { background: linear-gradient(110deg, #77b52f, #d1ed50 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { color: #53685e; font-size: 17px; line-height: 1.7; }
.hero-actions { margin: 34px 0 42px; }
.button { box-shadow: 0 10px 24px rgba(18,43,37,.12); }
.button-primary { background: var(--ink); border: 1px solid var(--ink); }
.hero-signal { background: rgba(255,255,255,.65); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-small); display: inline-flex; padding: 12px 16px; }
.hero-visual { filter: drop-shadow(0 24px 36px rgba(18,43,37,.12)); }
.visual-glow { background: #c9ef4c; filter: blur(70px); opacity: .42; right: 6%; top: 1%; }
.visual-frame { background: #fff; border: 10px solid rgba(255,255,255,.72); border-radius: 34px; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.visual-frame::after { border: 1px solid rgba(18,43,37,.14); border-radius: 25px; content: ''; inset: 0; pointer-events: none; position: absolute; }
.visual-frame img { height: 540px; object-fit: contain; }
.visual-label { border-radius: 999px; bottom: 15px; left: 15px; }
.floating-note { border: 1px solid rgba(18,43,37,.08); border-radius: 16px; box-shadow: var(--shadow-small); }
.note-top { right: -35px; top: 9%; }
.note-bottom { bottom: 8%; left: -38px; }
.proof-strip { background: rgba(255,255,255,.45); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-small); overflow: hidden; }
.proof-strip div { padding: 24px 22px; }
.proof-strip strong { font-size: 14px; }
.section-pad { padding-bottom: 124px; padding-top: 124px; }
.section-intro h2, .split-intro h2 { font-weight: 800; }
.problem-grid { gap: 18px; }
.problem-card { background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-small); min-height: 230px; padding: 28px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.problem-card:hover { border-color: var(--leaf); box-shadow: var(--shadow); transform: translateY(-6px); }
.problem-card h3 { margin-top: 38px; }
.opportunity-icon { align-items: center; background: rgba(143,202,61,.14); border: 1px solid rgba(143,202,61,.32); border-radius: 15px; color: var(--leaf); display: flex; height: 52px; justify-content: center; margin-top: 20px; width: 52px; }.opportunity-icon svg { fill: none; height: 29px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 29px; }
.dark-panel { background: linear-gradient(135deg, #09241d 0%, #102f27 55%, #0b211c 100%); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(0,0,0,.12); }
.dark-panel::before { background: radial-gradient(circle at 85% 15%, rgba(215,243,91,.16), transparent 22rem); content: ''; inset: 0; pointer-events: none; position: absolute; }
.dark-panel { position: relative; }
.platform-heading, .flow-grid { position: relative; z-index: 1; }
.flow-grid { border-left-color: rgba(215,243,91,.26); }
.flow-step { border-right-color: rgba(215,243,91,.18); }
.flow-icon { background: rgba(215,243,91,.08); border: 1px solid rgba(215,243,91,.25); border-radius: 14px; padding: 9px; }
.eco-card { border-radius: 22px; box-shadow: var(--shadow-small); overflow: hidden; }
.eco-card::after { background: linear-gradient(135deg, transparent 45%, rgba(143,202,61,.12)); content: ''; inset: 0; pointer-events: none; position: absolute; }
.eco-card-large { box-shadow: 0 24px 60px rgba(18,43,37,.22); }
.eco-mark { background: rgba(143,202,61,.12); border-radius: 50%; padding: 9px; }
.prototype-image { border: 10px solid rgba(255,255,255,.78); box-shadow: var(--shadow); }
.prototype-image img { filter: none; height: 470px; }
.vision { background: linear-gradient(135deg, #122f27, #071c18); }
.roadmap { background: rgba(255,255,255,.04); border-radius: 20px; padding: 32px 0 32px 38px; }
.contact-card { border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.contact-card::after { border: 1px solid rgba(18,43,37,.18); border-radius: 20px; content: ''; inset: 10px; pointer-events: none; position: absolute; }
.contact-card > * { position: relative; z-index: 1; }
.site-footer { border-top-color: rgba(18,43,37,.12); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #71a92d; outline-offset: 4px; }
.contact-card-form { align-items: stretch; display: grid; gap: 52px; grid-template-columns: .8fr 1.2fr; }
.contact-intro { max-width: 390px; }
.contact-intro > p:not(.eyebrow) { color: rgba(18,43,37,.76); font-size: 14px; line-height: 1.65; margin: 22px 0 28px; }
.contact-details { border-top: 1px solid rgba(18,43,37,.24); display: grid; gap: 8px; padding-top: 16px; }
.contact-details span, .contact-details a { color: rgba(18,43,37,.72); font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.contact-details a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.contact-form { background: rgba(255,255,255,.68); border: 1px solid rgba(18,43,37,.16); border-radius: 20px; padding: 24px; }
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.form-grid label { display: grid; gap: 8px; }
.form-grid label > span { color: var(--ink); font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.form-grid label b { color: #657f2b; }
.form-grid input, .form-grid select, .form-grid textarea { background: rgba(255,255,255,.88); border: 1px solid rgba(18,43,37,.2); border-radius: 10px; color: var(--ink); font: 14px 'Manrope',sans-serif; padding: 13px 14px; width: 100%; }
.form-grid textarea { min-height: 132px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(143,202,61,.2); outline: 0; }
.form-full { grid-column: 1 / -1; }
.form-trap { height: 0; left: -9999px; opacity: 0; overflow: hidden; position: absolute; width: 0; }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.form-actions .button { border: 0; cursor: pointer; }
.form-actions button:disabled { cursor: wait; opacity: .65; }
.form-status { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; max-width: 330px; }
.form-status.is-success { color: #39721f; }.form-status.is-error { color: #a43b32; }.form-status.is-sending { color: var(--ink); }
@media (max-width:900px) {
  .contact-card-form { gap: 30px; grid-template-columns: 1fr; }
  .contact-intro { max-width: 560px; }
  .site-header { border-radius: 22px; margin: 12px 16px 0; }
  .brand img { height: 52px; }
  .network-tag { display: none; }
  .site-nav { border: 1px solid var(--line); border-radius: 18px; }
  .hero { padding-top: 62px; }
  .note-top { right: -10px; }
  .note-bottom { left: -10px; }
}
@media (max-width:600px) {
  .site-header { margin-left: 10px; margin-right: 10px; min-width: 0; }
  .menu-toggle { display: block; margin-left: auto; }
  .hero,.hero-copy,.hero-visual { min-width: 0; width: 100%; }
  .hero-copy { max-width: calc(100vw - 44px); }
  .hero h1 { font-size: 47px; max-width: 310px !important; overflow-wrap: anywhere; width: 310px !important; }
  .hero-lede { max-width: 340px !important; width: 100%; }
  .hero .eyebrow { font-size: 9px; }
  .visual-frame { border-width: 6px; }
  .visual-frame img { height: 390px; }
  .prototype-image { border-width: 6px; }
  .prototype-image img { height: 360px; }
  .proof-strip { border-radius: 14px; }
}

/* Future roadmap, storefront preview, and team */
.section-lede { color: var(--muted); font-size: 16px; max-width: 600px; }
.suriname { background: #f8f9f2; }
.suriname-grid { display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); margin-top: 52px; }
.suriname-card { background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-small); min-height: 220px; padding: 26px; }
.suriname-card h3 { margin-top: 42px; }
.suriname-card p { color: var(--muted); font-size: 14px; max-width: 300px; }
.field-story { background: var(--deep); color: var(--white); }.field-story .split-intro > p { color: #a9b9ae; }.video-shell { background: #102f27; border: 1px solid rgba(215,243,91,.25); border-radius: 26px; box-shadow: var(--shadow); margin-top: 50px; min-height: 390px; overflow: hidden; position: relative; }.video-shell iframe { border: 0; display: block; height: 100%; min-height: 390px; width: 100%; }.video-placeholder { align-items: center; background: radial-gradient(circle at 75% 20%, rgba(215,243,91,.25), transparent 18rem), linear-gradient(135deg, #153d31, #09231d); display: flex; flex-direction: column; justify-content: center; min-height: 390px; padding: 40px; position: relative; text-align: center; }.video-placeholder .eyebrow { color: var(--green); margin-bottom: 10px; }.video-placeholder h3 { color: var(--white); font-size: 32px; margin: 8px 0 10px; }.video-placeholder p:not(.eyebrow) { color: #a9b9ae; font-size: 14px; max-width: 430px; }.video-play { align-items: center; background: var(--green); border-radius: 50%; color: var(--ink); display: flex; font-size: 20px; height: 66px; justify-content: center; margin-bottom: 22px; padding-left: 4px; width: 66px; }.video-format { bottom: 22px; color: #7f9b8a; font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .1em; position: absolute; text-transform: uppercase; }
.video-shell.video-vertical { align-items: center; display: flex; justify-content: center; min-height: 620px; }.video-shell.video-vertical iframe { aspect-ratio: 9 / 16; height: 590px; min-height: 0; width: min(100%, 332px); }
.video-thumb-link { align-items: center; display: flex; height: 100%; justify-content: center; min-height: 390px; overflow: hidden; position: relative; width: 100%; }.video-thumb-link img { display: block; height: 100%; object-fit: cover; width: 100%; }.video-thumb-link::after { background: linear-gradient(180deg, transparent 45%, rgba(7,28,24,.75)); content: ''; inset: 0; position: absolute; }.video-thumb-cta { background: var(--green); border-radius: 999px; bottom: 25px; color: var(--ink); font-size: 13px; font-weight: 800; padding: 13px 18px; position: absolute; z-index: 1; }.video-thumb-cta b { font-size: 18px; margin-left: 7px; }.video-vertical .video-thumb-link { min-height: 620px; width: min(100%, 350px); }.video-vertical .video-thumb-link img { object-fit: cover; }
.video-modal-open { overflow: hidden; }.video-modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 20; }.video-modal-backdrop { background: rgba(4,18,15,.86); inset: 0; position: absolute; }.video-modal-content { background: var(--deep); border: 1px solid rgba(215,243,91,.35); border-radius: 22px; box-shadow: 0 30px 100px rgba(0,0,0,.4); max-width: 940px; padding: 12px; position: relative; width: min(100%, 940px); z-index: 1; }.video-modal-content iframe { aspect-ratio: 16 / 9; border: 0; display: block; width: 100%; }.video-modal-vertical .video-modal-content { max-width: 390px; }.video-modal-vertical .video-modal-content iframe { aspect-ratio: 9 / 16; max-height: 78vh; }.video-modal-close { background: var(--green); border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; font-size: 22px; height: 34px; line-height: 1; position: absolute; right: -12px; top: -12px; width: 34px; z-index: 2; }.video-modal-content > a { color: var(--green); display: block; font-size: 12px; font-weight: 700; padding: 12px 4px 2px; text-align: center; }
.future { background: rgba(255,255,255,.34); border-top: 1px solid rgba(18,43,37,.06); }
.future-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 52px; }
.farmbot-card,.shop-preview { border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-small); min-height: 500px; overflow: hidden; position: relative; }
.farmbot-card { background: var(--deep); color: var(--white); padding: 28px; }
.future-card-top { align-items: center; display: flex; justify-content: space-between; position: relative; z-index: 1; }
.status-pill { align-items: center; background: rgba(215,243,91,.14); border: 1px solid rgba(215,243,91,.35); border-radius: 999px; color: var(--green); display: inline-flex; font-family: 'DM Mono',monospace; font-size: 10px; gap: 8px; letter-spacing: .08em; padding: 8px 11px; text-transform: uppercase; }
.status-pill i { background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgba(215,243,91,.12); height: 6px; width: 6px; }
.farmbot-card .card-index { color: var(--green); }
.farmbot-visual { background: radial-gradient(circle at 70% 20%, rgba(215,243,91,.22), transparent 20%), linear-gradient(160deg, #173e32, #0b241e); border: 1px solid rgba(215,243,91,.18); border-radius: 20px; height: 230px; margin: 28px 0 25px; overflow: hidden; position: relative; }
.bot-sun { background: var(--green); border-radius: 50%; box-shadow: 0 0 60px rgba(215,243,91,.75); height: 70px; opacity: .8; position: absolute; right: 38px; top: 28px; width: 70px; }
.bot-track { background: repeating-linear-gradient(90deg, rgba(215,243,91,.38) 0 14px, transparent 14px 28px); bottom: 33px; height: 2px; left: 0; position: absolute; transform: rotate(-8deg); width: 100%; }
.track-two { bottom: 62px; opacity: .35; transform: rotate(8deg); }
.bot-body { background: #d7e3d0; border: 4px solid #8baa81; border-radius: 16px 16px 10px 10px; bottom: 66px; box-shadow: 0 16px 25px rgba(0,0,0,.28); height: 72px; left: 50%; position: absolute; transform: translateX(-50%); width: 132px; }
.bot-body::before { background: #0d3027; border-radius: 8px; content: ''; height: 25px; left: 24px; position: absolute; top: 15px; width: 78px; }
.bot-body b,.bot-body i,.bot-body em { background: var(--leaf); border-radius: 50%; height: 8px; position: absolute; top: 23px; width: 8px; z-index: 1; }.bot-body b { left: 35px; }.bot-body i { left: 62px; }.bot-body em { left: 89px; }
.bot-wheel { background: #091a16; border: 4px solid #8baa81; border-radius: 50%; bottom: 42px; height: 33px; position: absolute; width: 33px; }.wheel-one { left: calc(50% - 62px); }.wheel-two { right: calc(50% - 62px); }
.farmbot-card h3 { color: var(--green); }.farmbot-card > p:not(.eco-kicker) { color: #a9b9ae; font-size: 14px; max-width: 430px; }.future-caption { bottom: 28px; color: #7f9b8a; font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .1em; position: absolute; text-transform: uppercase; }
.shop-preview { background: var(--white); color: var(--ink); display: grid; grid-template-rows: 220px 1fr; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }.shop-preview:hover { box-shadow: var(--shadow); transform: translateY(-6px); }.shop-preview-art { background: #dfe6dc url('assets/farmwiz-shop-preview.png') center / cover no-repeat; overflow: hidden; position: relative; }.shop-preview-art > * { display: none; }
.shop-preview-copy { padding: 25px 28px 28px; }.status-dark { background: var(--ink); border-color: var(--ink); color: var(--green); }.shop-preview h3 { font-size: 28px; margin-bottom: 10px; }.shop-preview-copy > p:not(.eco-kicker) { color: var(--muted); font-size: 14px; max-width: 390px; }.shop-link { color: var(--ink); font-size: 13px; font-weight: 800; }.shop-link b { color: var(--leaf); font-size: 18px; margin-left: 5px; }
.startup-tag { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 6px 16px; grid-template-columns: auto auto 1fr; margin-top: 34px; padding: 18px 0; }.startup-tag span { background: var(--green); border-radius: 999px; color: var(--ink); font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .12em; padding: 9px 12px; }.startup-tag b { font-size: 13px; }.startup-tag small { color: var(--muted); justify-self: end; }
.team { background: #eaf0e3; }.team-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 50px; }.team-card { align-items: center; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-small); display: flex; gap: 24px; min-height: 235px; padding: 28px; }.team-card h3 { margin-bottom: 8px; }.team-card > div:last-child p:last-child { color: var(--muted); font-size: 13px; max-width: 300px; }.team-role { color: var(--leaf); font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase; }.team-avatar { align-items: center; border: 9px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 15px 25px rgba(18,43,37,.16); color: var(--white); display: flex; flex: 0 0 128px; font-size: 30px; font-weight: 800; height: 128px; justify-content: center; letter-spacing: -.08em; position: relative; }.avatar-julie { background: radial-gradient(circle at 30% 20%, #f2d2aa, #c87550 38%, #4b3a36 40%, #192c28 75%); }.avatar-theo { background: radial-gradient(circle at 65% 18%, #f0c99f, #a86c50 38%, #302b31 40%, #122d28 75%); }.team-avatar i { background: var(--green); border: 4px solid var(--white); border-radius: 50%; bottom: 3px; height: 16px; position: absolute; right: 4px; width: 16px; }
.team-avatar img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
@media (max-width:900px) { .future-grid,.team-grid { grid-template-columns: 1fr; }.shop-preview { min-height: 470px; } }
@media (max-width:1100px) { .suriname-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:900px) { .suriname-grid { grid-template-columns: 1fr; } }
@media (max-width:600px) { .startup-tag { align-items: start; grid-template-columns: 1fr 1fr; }.startup-tag small { grid-column: span 2; justify-self: start; }.team-card { align-items: flex-start; flex-direction: column; }.team-avatar { flex-basis: 100px; height: 100px; width: 100px; }.shop-preview-art { height: 190px; }.box-three { display: none; } }

/* Technology roadmap */
.roadmap-section { background: #edf2e7; border-top: 1px solid rgba(21,53,44,.08); max-width: none; padding-left: max(36px,calc((100vw - 1248px)/2)); padding-right: max(36px,calc((100vw - 1248px)/2)); }
.roadmap-intro { max-width: 800px; }
.roadmap-intro .section-lede { margin-bottom: 0; }
.roadmap-stages { align-items: stretch; display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; margin-top: 58px; }
.roadmap-stage { background: var(--white); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; min-height: 455px; padding: 28px; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.roadmap-stage:hover { box-shadow: 0 18px 35px rgba(21,53,44,.1); transform: translateY(-4px); }
.roadmap-stage-current { border-color: var(--leaf); box-shadow: inset 0 4px 0 var(--leaf); }
.roadmap-stage-next { box-shadow: inset 0 4px 0 #d8b24c; }
.roadmap-stage-future { box-shadow: inset 0 4px 0 #789a8a; }
.stage-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 45px; }
.stage-number { color: var(--leaf); font-family: 'DM Mono',monospace; font-size: 13px; }
.stage-status { border-radius: 999px; font-family: 'DM Mono',monospace; font-size: 9px; letter-spacing: .08em; padding: 8px 10px; text-transform: uppercase; }
.stage-status-current { background: rgba(116,189,45,.15); color: #4a8621; }.stage-status-next { background: rgba(216,178,76,.18); color: #8a6b1d; }.stage-status-future { background: rgba(120,154,138,.15); color: #527263; }
.stage-kicker { color: var(--leaf); font-family: 'DM Mono',monospace; font-size: 10px; letter-spacing: .1em; margin-bottom: 10px; text-transform: uppercase; }
.roadmap-stage h3 { font-size: 31px; margin-bottom: 13px; }
.stage-summary { color: var(--muted); font-size: 14px; margin-bottom: 22px; max-width: 310px; }
.stage-list { border-top: 1px solid var(--line); list-style: none; margin: auto 0 0; padding: 12px 0 0; }
.stage-list li { color: var(--ink); font-size: 12px; line-height: 1.45; padding: 7px 0 7px 18px; position: relative; }
.stage-list li::before { color: var(--leaf); content: '↳'; font-family: 'DM Mono',monospace; left: 0; position: absolute; }
.stage-arrow { align-items: center; color: var(--leaf); display: flex; font-family: 'DM Mono',monospace; font-size: 28px; justify-content: center; }
.technology-vision { align-items: center; background: var(--deep); color: var(--white); display: grid; gap: 55px; grid-template-columns: 1fr 1fr; margin-top: 18px; padding: 38px 42px; }
.technology-vision .eyebrow { margin-bottom: 15px; }.technology-vision h3 { font-size: 26px; margin: 0; max-width: 490px; }.technology-vision > p { color: #a9b9ae; font-size: 14px; margin: 0; max-width: 475px; }
.architecture-card { background: var(--ink); border: 1px solid #385047; color: var(--white); margin-top: 18px; padding: 38px 42px 42px; }
.architecture-heading { align-items: end; display: flex; gap: 40px; justify-content: space-between; }.architecture-heading .eyebrow { margin: 0; }.architecture-heading h3 { font-size: 25px; margin: 0; max-width: 500px; }
.architecture-flow { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 44px; position: relative; }
.architecture-node { border-left: 1px solid #385047; display: flex; flex-direction: column; min-height: 135px; padding: 0 16px; position: relative; }.architecture-node:first-child { border-left: 0; }.architecture-node:not(:last-of-type)::after { color: var(--green); content: '→'; font-family: 'DM Mono',monospace; font-size: 20px; position: absolute; right: -8px; top: 45px; z-index: 1; }.architecture-node > span { color: var(--green); font-family: 'DM Mono',monospace; font-size: 10px; }.architecture-node strong { font-size: 17px; margin: 24px 0 8px; }.architecture-node small { color: #a9b9ae; font-size: 11px; line-height: 1.45; }.architecture-node-highlight { background: rgba(181,227,49,.08); border-color: rgba(181,227,49,.35); margin: -12px 0; padding-top: 12px; }.architecture-connector { display: none; }.architecture-feedback { align-items: center; border-top: 1px dashed rgba(181,227,49,.55); color: var(--green); display: flex; gap: 12px; grid-column: 1 / -1; margin: 25px 7% 0; padding-top: 18px; }.architecture-feedback span { font-size: 30px; }.architecture-feedback strong { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }.architecture-feedback small { color: #a9b9ae; font-size: 11px; }
@media (max-width:1100px) { .roadmap-stages { grid-template-columns: 1fr; gap: 14px; }.stage-arrow { min-height: 28px; transform: rotate(0deg); }.roadmap-stage { min-height: auto; }.stage-list { margin-top: 12px; }.architecture-flow { grid-template-columns: repeat(3,1fr); row-gap: 28px; }.architecture-node::after { display: none; }.architecture-node:nth-of-type(5) { border-left: 0; }.architecture-feedback { grid-column: 1 / -1; margin-left: 0; margin-right: 0; } }
@media (max-width:900px) { .technology-vision { gap: 24px; grid-template-columns: 1fr; }.architecture-heading { align-items: start; flex-direction: column; gap: 14px; }.architecture-flow { grid-template-columns: repeat(2,1fr); }.architecture-node:nth-of-type(3),.architecture-node:nth-of-type(5) { border-left: 0; } }
@media (max-width:600px) { .roadmap-section { padding-left: 22px; padding-right: 22px; }.roadmap-stages { margin-top: 40px; }.roadmap-stage { padding: 22px; }.stage-top { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 32px; }.roadmap-stage h3 { font-size: 28px; }.technology-vision,.architecture-card { padding: 28px 22px; }.technology-vision h3 { font-size: 23px; }.architecture-flow { grid-template-columns: 1fr; margin-top: 32px; }.architecture-node,.architecture-node-highlight { border-left: 0; border-top: 1px solid #385047; margin: 0; min-height: auto; padding: 18px 0; }.architecture-node:first-child { border-top: 0; }.architecture-node-highlight { background: rgba(181,227,49,.08); padding-left: 14px; padding-right: 14px; }.architecture-feedback { align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.architecture-feedback small { flex-basis: 100%; padding-left: 43px; } }
@media (prefers-reduced-motion:reduce) { .roadmap-stage { transition: none; } }