:root{
  --bg:#101513;
  --fg:#e9f1ee;
  --muted:#b7c4bf;
  --card:#141d19;
  --link:#7ad7a7;
  --accent:#22c55e;
  --border:#24332c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 700px at 20% 0%, rgba(34,197,94,.14), transparent 60%), radial-gradient(900px 600px at 85% 10%, rgba(122,215,167,.08), transparent 55%), var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
section[id]{scroll-margin-top:10px}
header{position:relative;isolation:isolate;padding:26px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(16,21,19,.10))}
header::before{content:"";position:absolute;inset:0;z-index:-2;background:url("hero.jpg") center/cover no-repeat;filter:saturate(1.18) contrast(1.12) brightness(.98);opacity:.82}
header::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,21,19,.58),rgba(16,21,19,.18) 55%,rgba(16,21,19,.78));backdrop-filter:blur(1.2px)}
@keyframes heroDrift{0%{background-position:50% 45%}100%{background-position:50% 55%}}
header::before{animation:heroDrift 14s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){header::before{animation:none}}

.wrap{max-width:980px;margin:0 auto}
.top{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.logoInline{width:104px;height:104px;object-fit:contain;opacity:.96;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
@media (max-width:520px){header{padding:18px 14px}.top{grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start}.lang{justify-self:end;grid-column:2}.logoInline{width:72px;height:72px}}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  header::after{backdrop-filter:none}
}
.brand{display:flex;flex-direction:column;gap:4px}
.brand h1{margin:0;font-size:22px;letter-spacing:.2px}
.brand p{margin:0;color:var(--muted)}
nav{display:flex;gap:12px;flex-wrap:wrap}
nav a{padding:8px 10px;border:1px solid transparent;border-radius:10px}
nav a:hover{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
main{padding:28px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.card h2{margin:0 0 8px 0;font-size:16px}
.card p{margin:0;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.4fr .6fr;gap:16px;align-items:start}
@media (max-width:800px){.hero{grid-template-columns:1fr}}
.kpi{display:flex;flex-direction:column;gap:10px}
.kpi .big{font-size:28px;font-weight:700;color:var(--accent)}
.small{font-size:13px;color:var(--muted)}
footer{padding:22px 20px;border-top:1px solid var(--border);color:var(--muted)}

/* Back to top */
.backTop{position:fixed;right:18px;bottom:18px;z-index:50;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(18,26,36,.92);backdrop-filter:blur(6px);color:var(--fg);text-decoration:none;font-size:13px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .18s ease, transform .18s ease}
.backTop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.lang{display:flex;gap:6px;align-items:center}
.lang button{cursor:pointer;border:1px solid var(--border);background:rgba(20,29,25,.70);color:var(--fg);padding:6px 10px;border-radius:10px}
.lang button.active{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.12)}
.notice{border-left:3px solid rgba(34,197,94,.70);padding:10px 12px;background:rgba(34,197,94,.10);border-radius:12px;color:var(--muted)}
.map{height:420px;border-radius:14px;border:1px solid var(--border);overflow:hidden}

/* Timeline slider (CSS scroll-snap; no dependencies) */
.tWrap{margin-top:12px}
.tControls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tBtn{cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--fg);padding:8px 12px;border-radius:12px;font-size:18px;line-height:1}
.tBtn:disabled{opacity:.4;cursor:default}
.tDots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex:1}
.tDot{width:10px;height:10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer}
.tDot.active{background:rgba(52,211,153,.6);border-color:rgba(52,211,153,.7)}

.tTrack{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px 2px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.tTrack::-webkit-scrollbar{height:10px}
.tTrack::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:999px}

.tCard{flex:0 0 min(520px,85vw);scroll-snap-align:start;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.tMedia{background:rgba(255,255,255,.03);aspect-ratio:16/10;overflow:hidden}
.tMedia img{width:100%;height:100%;object-fit:cover;display:block}
.tBody{padding:14px 14px 16px 14px}
.tDate{font-size:12px;color:var(--muted);margin-bottom:6px}
.tTitle{margin:0 0 8px 0;font-size:16px}
.tText{margin:0;color:var(--muted)}

/* Method steps */
.mSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.mStep{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.mStep img{width:100%;height:140px;object-fit:cover;display:block;background:rgba(255,255,255,.03)}
.mStep .mBody{padding:12px 12px 14px 12px}
.mStep h3{margin:0 0 6px 0;font-size:15px}
.mStep p{margin:0;color:var(--muted);font-size:13px}
.mStep ol,.mStep ul{margin:8px 0 0 18px;color:var(--muted);font-size:13px}

/* Method accordion */
.mSteps{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.mStep.accordion{border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .3s}
.mStep.accordion:hover{box-shadow:0 2px 12px rgba(52,211,153,.1)}
.mHeader{display:flex;gap:14px;align-items:center;padding:14px;cursor:pointer;user-select:none}
.mHeader img{width:140px;height:95px;object-fit:cover;border-radius:10px;flex-shrink:0}
.mHeaderText{flex:1}
.mHeaderText h3{margin:0;font-size:16px;color:var(--fg)}
.mNum{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--accent);color:#000;border-radius:50%;font-weight:700;font-size:14px;margin-right:8px}
.mSummary{font-size:13px;color:var(--muted);margin:6px 0 0}
.mToggle{font-size:24px;color:var(--accent);font-weight:700;flex-shrink:0;transition:transform .3s;width:30px;text-align:center}
.mStep.accordion.open .mToggle{transform:rotate(45deg)}
.mDetail{max-height:0;overflow:hidden;transition:max-height .4s ease}
.mStep.accordion.open .mDetail{max-height:800px}
.mDetailInner{padding:0 14px 14px;border-top:1px solid var(--border)}
.mDetailInner p{font-size:14px;color:var(--fg);margin:12px 0 0}
.mDetailInner ul{margin:10px 0;padding-left:20px}
.mDetailInner li{font-size:13px;color:var(--muted);margin:6px 0}
.mDetailInner li strong{color:var(--fg)}
.mFact{background:rgba(52,211,153,.06);border-left:3px solid var(--accent);padding:10px 14px;border-radius:0 10px 10px 0;font-size:13px;color:var(--muted);margin-top:12px}
@media(max-width:520px){.mHeader{flex-direction:column;align-items:flex-start}.mHeader img{width:100%;height:auto;max-height:200px}}

/* Seeds list */
.seeds-list{list-style:none;padding:0;margin:12px 0 0}
.seed-item{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px}
.seed-item img{width:120px;height:90px;object-fit:cover;border-radius:10px;flex-shrink:0}
.seed-item strong{display:block;margin-bottom:4px;color:var(--accent)}
.seed-item p{font-size:13px;color:var(--muted);margin:4px 0 0}
@media(max-width:520px){.seed-item{flex-direction:column}.seed-item img{width:100%;height:auto;max-height:200px}}

/* Partners logo grid */
.pGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.pCard{display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:14px}
.pLogo{height:46px;max-width:100%;object-fit:contain}
.pName{font-size:13px;color:var(--fg);margin:0}
.pRole{font-size:12px;color:var(--muted);margin:0}
.pCard a{display:inline-flex;align-items:center}