/* ============================================================
   Agri Port — landing page styles
   ============================================================ */

.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;
}

/* ---------- Hero ---------- */
.hero {
  background:
    linear-gradient(90deg, rgba(13, 42, 31, 0.94) 0%, rgba(13, 42, 31, 0.78) 36%, rgba(13, 42, 31, 0.18) 74%, rgba(13, 42, 31, 0.38) 100%),
    linear-gradient(0deg, rgba(13, 42, 31, 0.55) 0%, rgba(13, 42, 31, 0) 30%),
    url("images/optimized/hero-2035-autonomous-agri-port.webp") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero .wrap {
  padding-top: 110px; padding-bottom: 110px;
}
.hero-copy { max-width: 600px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em;
  color: #ffd694; background: rgba(232, 161, 61, 0.14);
  border: 1px solid rgba(232, 161, 61, 0.4);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 {
  font-size: 42px; line-height: 1.35; letter-spacing: 0.01em;
  margin-bottom: 18px; font-weight: 800;
}
.hero h1 .accent { color: #ffc46b; }
.hero .hero-lede {
  font-size: 15.5px; color: rgba(255, 255, 255, 0.82);
  max-width: 480px; margin-bottom: 30px; line-height: 1.9;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 36px; margin-top: 44px; flex-wrap: wrap;
}
.hero-stat .hs-v { font-size: 24px; font-weight: 800; color: #ffc46b; }
.hero-stat .hs-v small { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 600; }
.hero-stat .hs-l { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }

/* cinema strip (full-width section visual) */
.cinema {
  position: relative; margin-top: 28px;
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cinema img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.cinema figcaption {
  position: absolute; left: 14px; bottom: 14px;
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: rgba(10, 24, 18, 0.72); backdrop-filter: blur(4px);
  padding: 5px 13px; border-radius: 999px;
}

/* step card photos */
.step-photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 12px; margin-bottom: 14px; display: block;
}

/* ---------- Problem section ---------- */
.viz-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px; margin-top: 28px;
}
@media (max-width: 940px) { .viz-grid { grid-template-columns: 1fr; } }

/* flow compare (in/out bars) */
.flow-compare { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.flow-item .fc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-bottom: 5px;
}
.flow-item .fc-head strong { font-size: 15px; }
.fc-bar { height: 18px; border-radius: 4px 6px 6px 4px; }
.fc-bar.out { background: #c3c2b7; width: 100%; }
.fc-bar.in { background: #008300; width: 23.5%; }
.flow-note { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* stacked single bar (荒廃農地) */
.landbar { margin-top: 16px; }
.landbar-track { display: flex; gap: 2px; height: 34px; border-radius: 8px; overflow: hidden; }
.landbar-seg { display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; }
.landbar-seg.ok { background: #008300; flex: 0 0 36.6%; }
.landbar-seg.hard { background: #a5a49d; flex: 1; color: #26251f; }
.landbar-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.landbar-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.landbar-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* supply-chain flow comparison */
.flow-compare-wrap { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.flowline {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-radius: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.flowline.old { background: #f1f0e9; border: 1px solid var(--hairline); }
.flowline.new { background: var(--green-50); border: 1.5px solid var(--green-300); }
.fl-label { flex: 0 0 92px; font-size: 12.5px; font-weight: 800; }
.flowline.old .fl-label { color: var(--muted); }
.flowline.new .fl-label { color: var(--green-700); }
.fl-node {
  flex: none; text-align: center;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.flowline.old .fl-node { color: var(--ink-2); box-shadow: none; }
.fl-node.strong { border-color: var(--green-300); box-shadow: var(--shadow); }
.fl-node small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.fl-arrow { color: var(--baseline); font-weight: 700; flex: none; }
.fl-out {
  flex: none; margin-left: auto; text-align: right;
  font-size: 14px; font-weight: 800; line-height: 1.4; padding-left: 14px;
}
.fl-out small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.fl-out.bad { color: var(--critical); }
.fl-out.good { color: var(--good-text); }

.chain-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 28px; }

/* essence cards */
.essence-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 28px;
}
.essence-card { padding: 26px 24px; }
.essence-card .ec-num {
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--amber-deep); margin-bottom: 10px;
}
.essence-card h3 { font-size: 18px; margin-bottom: 10px; }
.essence-card p { font-size: 13.5px; color: var(--ink-2); }
.essence-card p strong { color: var(--ink); }
.essence-conclusion {
  margin-top: 24px; padding: 26px 30px;
  background: var(--green-950); color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius); font-size: 15px; line-height: 2;
}
.essence-conclusion strong { color: #ffc46b; font-size: 17px; }

/* ---------- Solution ---------- */
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 28px;
}
.step-card { padding: 20px 20px 24px; position: relative; }
.step-card h3 { font-size: 17px; margin-bottom: 8px; }
.step-card h3 small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; margin-left: 8px; }
.step-card p { font-size: 13px; color: var(--ink-2); }

.stack-band {
  margin-top: 28px; padding: 26px 30px;
  border-radius: var(--radius);
  background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.stack-band h3 { font-size: 16px; margin-bottom: 4px; }
.stack-band .sb-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.stack-rule {
  margin-top: 18px; padding: 14px 18px; font-size: 13px; line-height: 1.9;
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: 12px; color: var(--ink-2);
}
.stack-rule strong { color: var(--ink); }
.stack-item { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; }
.stack-item .sk-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--green-50); border: 1px solid var(--green-100);
  display: grid; place-items: center; font-size: 18px;
}
.stack-item strong { display: block; font-size: 13.5px; }
.stack-item span { color: var(--ink-2); }
.stack-item .sk-ref { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------- Scheme diagram ---------- */
.scheme-wrap { margin-top: 28px; overflow-x: auto; }
.scheme {
  min-width: 760px;
  display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr;
  gap: 0; align-items: stretch;
}
.scheme-node {
  background: #fff; border: 1.5px solid var(--green-100);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow); font-size: 12.5px;
  display: flex; flex-direction: column; gap: 8px;
}
.scheme-node h4 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.scheme-node.center { border-color: var(--green-700); border-width: 2px; }
.scheme-node ul { padding-left: 1.2em; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.scheme-arrows {
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: 0 14px; font-size: 11px; font-weight: 700; text-align: center;
}
.scheme-arrows .ar { color: var(--green-700); }
.scheme-arrows .ar.back { color: var(--amber-deep); }
.scheme-arrows .ar .arrow-line { font-size: 16px; letter-spacing: -1px; }
.scheme-foot { margin-top: 14px; font-size: 12px; color: var(--muted); }

/* two-track table */
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
@media (max-width: 800px) { .track-grid { grid-template-columns: 1fr; } }
.track-card { padding: 24px; }
.track-card .tk-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 12px; border-radius: 999px; margin-bottom: 12px;
}
.track-a .tk-tag { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); }
.track-b .tk-tag { background: #fdf3e2; color: var(--amber-deep); border: 1px solid #f5e2bf; }
.track-card h3 { font-size: 17px; margin-bottom: 8px; }
.track-card ul { padding-left: 1.25em; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.track-card .tk-law {
  margin-top: 14px; font-size: 11.5px; color: var(--ink-2);
  background: var(--page); border-radius: 10px; padding: 10px 14px; line-height: 1.8;
}

.revenue-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 24px; }
.rev-item {
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px; font-size: 12px; color: var(--ink-2);
  box-shadow: var(--shadow);
}
.rev-item strong { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; }

/* ---------- Evidence / why now ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-top: 28px; }
.why-card { padding: 24px; font-size: 13px; }
.why-card h3 { font-size: 15.5px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.why-card p { color: var(--ink-2); }
.why-card .wc-src { font-size: 11px; color: var(--muted); margin-top: 10px; }
.why-card .wc-src a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Roadmap ---------- */
.roadmap { margin-top: 36px; position: relative; padding-left: 26px; }
.roadmap::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--green-100); border-radius: 2px;
}
.rm-item { position: relative; padding-bottom: 34px; }
.rm-item::before {
  content: ""; position: absolute; left: -25px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green-600); border: 3px solid var(--green-100);
}
.rm-item.future::before { background: var(--amber); }
.rm-year { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--green-600); }
.rm-item.future .rm-year { color: var(--amber-deep); }
.rm-item h3 { font-size: 17px; margin: 4px 0 6px; }
.rm-item p { font-size: 13.5px; color: var(--ink-2); max-width: 640px; }
.rm-kpi {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700;
  background: var(--green-50); color: var(--green-700);
  border: 1px solid var(--green-100); border-radius: 999px; padding: 3px 12px;
}

/* ---------- Physical AI architecture ---------- */
.layer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; margin-top: 28px;
}
.layer-card { padding: 22px 24px; }
.layer-card .lc-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--green-600); margin-bottom: 6px;
}
.layer-card h3 { font-size: 16px; margin-bottom: 8px; }
.layer-card p { font-size: 13px; color: var(--ink-2); }
.layer-card p strong { color: var(--ink); }
.layer-card .wc-src { font-size: 11px; color: var(--muted); margin-top: 10px; }

.matrix-wrap { margin-top: 28px; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--hairline); box-shadow: var(--shadow); }
.matrix { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.matrix th, .matrix td { padding: 12px 14px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; line-height: 1.7; }
.matrix thead th { background: var(--green-950); color: #fff; font-size: 13px; white-space: nowrap; }
.matrix tbody th { background: var(--green-50); color: var(--green-800); font-size: 12px; white-space: nowrap; width: 92px; }
.matrix td small { display: block; color: var(--muted); font-size: 11px; }
.matrix .m-foot td { background: #fdf6e8; font-weight: 600; }
.matrix-note { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* ---------- Planetary ---------- */
.planetary {
  background:
    radial-gradient(900px 460px at 82% 0%, rgba(232, 161, 61, 0.14), transparent 60%),
    linear-gradient(180deg, #0d2a1f 0%, #123a2b 100%);
  color: #fff;
}
.planetary h2 { color: #fff; }
.planetary .lede { color: rgba(255, 255, 255, 0.78); }
.planetary .kicker { background: rgba(232, 161, 61, 0.14); border-color: rgba(232, 161, 61, 0.4); color: #ffd694; }
.planetary .stat-tile { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.13); box-shadow: none; }
.planetary .stat-label { color: rgba(255, 255, 255, 0.62); }
.planetary .stat-value { color: #ffc46b; }
.planetary .stat-delta { color: rgba(255, 255, 255, 0.85); }
.planetary .stat-note { color: rgba(255, 255, 255, 0.45); }

.aging-band {
  margin-top: 28px; padding: 24px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius);
}
.aging-band h3 { font-size: 15px; margin-bottom: 4px; }
.aging-band .ab-sub { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-bottom: 16px; }
.aging-group { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); margin: 14px 0 8px; }
.aging-row { display: grid; grid-template-columns: 150px 1fr 74px; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.aging-row .ar-bar { height: 12px; border-radius: 4px 6px 6px 4px; background: rgba(140, 199, 170, 0.4); }
.aging-row.jp .ar-bar { background: var(--amber); }
.aging-row.jp { font-weight: 700; }
.aging-row .ar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.aging-note { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-top: 12px; }

.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 28px; }
.pillar-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--radius);
  padding: 24px;
}
.pillar-card h3 { font-size: 16px; margin-bottom: 10px; color: #ffd694; }
.pillar-card p { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, 0.82); }
.pillar-card p strong { color: #fff; }
.pillar-card .wc-src { font-size: 10.5px; color: rgba(255, 255, 255, 0.42); margin-top: 12px; }

.mars-band {
  margin-top: 28px; padding: 28px 32px;
  border-left: 4px solid var(--amber);
  background: rgba(0, 0, 0, 0.22); border-radius: 0 var(--radius) var(--radius) 0;
}
.mars-band .mb-quote { font-size: 20px; font-weight: 800; line-height: 1.7; color: #ffc46b; margin-bottom: 10px; }
.mars-band p { font-size: 13.5px; color: rgba(255, 255, 255, 0.78); line-height: 1.9; max-width: 760px; }
.planetary .viz-source { color: rgba(255, 255, 255, 0.4); margin-top: 28px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(150deg, rgba(13, 42, 31, 0.9) 0%, rgba(16, 52, 39, 0.68) 55%, rgba(13, 42, 31, 0.82) 100%),
    url("images/optimized/section-2035-regenerated-farmland-port.webp") center 62% / cover no-repeat;
  color: #fff; text-align: center;
  padding: 96px 24px; border-radius: 24px; margin: 0 24px 88px;
}
.cta-band p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.cta-band h2 { font-size: 28px; margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.75); margin-bottom: 26px; font-size: 14.5px; }

@media (max-width: 900px) {
  .hero { background-position: 58% center, center, 58% center; }
  .hero .wrap { padding-top: 72px; padding-bottom: 80px; }
  .hero h1 { font-size: 32px; }
  .cinema img { aspect-ratio: 16 / 10; }
}