:root {
  --bg: #1b2221;
  --bg-deep: #121817;
  --surface: #27302e;
  --surface-2: #303936;
  --paper: #f0eee5;
  --ink: #f3efe5;
  --muted: #b9c0b8;
  --line: rgba(239, 239, 225, 0.13);
  --terrain: #777b65;
  --terrain-dark: #565d50;
  --cyan: #66d2d5;
  --cyan-deep: #2f8f96;
  --orange: #f2a24b;
  --orange-deep: #bf6f2a;
  --radius: 28px;
  --max: 1180px;
  --shadow: 0 30px 90px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 2%, rgba(102,210,213,.08), transparent 31rem),
    radial-gradient(circle at 92% 20%, rgba(242,162,75,.07), transparent 30rem),
    linear-gradient(180deg, #202826 0%, var(--bg) 35%, var(--bg-deep) 100%);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.55;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; padding:.7rem 1rem; background:var(--paper); color:var(--bg); }
.skip-link:focus { left:1rem; top:1rem; }

.site-header {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand, .footer-brand { display:flex; align-items:center; gap:.72rem; }
.brand { text-decoration:none; font-weight:900; letter-spacing:.17em; }
.brand-mark {
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background: linear-gradient(145deg, var(--cyan), var(--cyan-deep));
  color:#13201f; font-weight:950; letter-spacing:0;
  box-shadow: inset -5px -5px 0 rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.2);
}
.brand-mark.small { width:30px; height:30px; border-radius:9px; }
nav { display:flex; gap:1.3rem; }
nav a { color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:750; }
nav a:hover, nav a:focus-visible { color:var(--paper); }

main { overflow:hidden; }
.hero { width:min(calc(100% - 2rem), 1320px); margin:1rem auto 7rem; }
.hero-art-wrap {
  position:relative; min-height:700px; overflow:hidden; border-radius:34px;
  border:1px solid rgba(255,255,255,.10); background:#202826; box-shadow:var(--shadow);
}
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,16,15,.90) 0%, rgba(11,16,15,.72) 34%, rgba(11,16,15,.18) 64%, rgba(11,16,15,.06) 100%),
    linear-gradient(0deg, rgba(8,12,12,.4), transparent 45%);
}
.hero-copy { position:absolute; z-index:2; left:clamp(1.5rem,5vw,5rem); top:50%; transform:translateY(-50%); width:min(560px, calc(100% - 3rem)); }
.eyebrow, .section-kicker { margin:0 0 1rem; color:var(--cyan); font-size:.72rem; font-weight:950; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,p { text-wrap:pretty; }
h1 { margin:0; font-size:clamp(4rem,9.5vw,8.4rem); line-height:.82; letter-spacing:-.068em; font-weight:950; }
.hero-lede { margin:1.8rem 0 0; max-width:520px; color:#d4d8d1; font-size:clamp(1.05rem,1.8vw,1.32rem); }
.hero-actions { margin-top:2rem; display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.25rem; border-radius:999px; text-decoration:none; font-weight:900; }
.button.primary { background:var(--paper); color:#1b2523; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.button.primary:hover { transform:translateY(-1px); }
.status-pill { display:inline-flex; align-items:center; gap:.55rem; color:#d2d6cf; font-size:.88rem; font-weight:750; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(242,162,75,.14); }

.world-intro, .story-panels, .mood-section, .development, .closing, footer { width:min(calc(100% - 2rem), var(--max)); margin-inline:auto; }
.world-intro { max-width:900px; text-align:center; margin-bottom:4.5rem; }
h2 { margin:0; font-size:clamp(2.5rem,6vw,5.5rem); line-height:.95; letter-spacing:-.055em; }
.big-copy { margin:1.6rem auto 0; max-width:820px; color:var(--muted); font-size:clamp(1.12rem,2vw,1.45rem); }

.story-panels { display:grid; gap:1.2rem; margin-bottom:7rem; }
.story-panel {
  position:relative; min-height:430px; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(145deg, #2b3432, #222a28); padding:clamp(1.6rem,4vw,3.2rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); align-items:center; gap:2rem;
}
.story-number { position:absolute; top:1.2rem; right:1.5rem; color:rgba(243,239,229,.09); font-size:clamp(4rem,10vw,8rem); font-weight:950; line-height:1; }
.story-copy { max-width:600px; position:relative; z-index:2; }
.story-copy h3 { margin:0; font-size:clamp(2.3rem,5vw,4.7rem); line-height:.98; letter-spacing:-.05em; }
.story-copy p:last-child { color:var(--muted); font-size:1.06rem; }
.produce-panel { background:linear-gradient(145deg, #263332, #1f2827); }
.grow-panel { background:linear-gradient(145deg, #313329, #23281f); }

.mini-world { position:relative; min-height:300px; transform:rotateX(58deg) rotateZ(-33deg); transform-style:preserve-3d; }
.tile { position:absolute; width:170px; height:170px; border-radius:18px; background:linear-gradient(145deg,#85886f,#646b5c); border:1px solid rgba(255,255,255,.08); box-shadow:18px 22px 0 rgba(0,0,0,.14); }
.t1{left:22px;top:36px}.t2{left:143px;top:91px}.t3{left:52px;top:167px}
.mini-building { position:absolute; width:72px; height:58px; border-radius:10px; background:linear-gradient(145deg,#f0eee5,#aeb9b5); box-shadow:8px 10px 0 rgba(0,0,0,.18); transform:translateZ(22px); }
.mini-building::after { content:""; position:absolute; top:8px; right:8px; width:13px; height:13px; border-radius:4px; background:var(--cyan); }
.mb1{left:118px;top:100px}.mb2{left:205px;top:154px;width:60px;height:48px}.mb2::after{background:var(--orange)}
.mini-tree { position:absolute; width:38px; height:38px; border-radius:50%; background:#3d5a48; box-shadow:5px 7px 0 rgba(0,0,0,.16); transform:translateZ(18px); }
.mt1{left:62px;top:90px}.mt2{left:95px;top:203px}

.bot-line { position:relative; height:240px; display:flex; align-items:center; justify-content:center; }
.route-line { position:absolute; width:78%; height:8px; border-radius:10px; background:linear-gradient(90deg,rgba(102,210,213,.14),var(--cyan),rgba(102,210,213,.14)); }
.bot-icon { position:absolute; width:72px; height:46px; border-radius:18px; background:#e7e9e2; border:4px solid #879792; box-shadow:7px 9px 0 rgba(0,0,0,.2); }
.bot-icon::before,.bot-icon::after { content:""; position:absolute; bottom:-11px; width:16px; height:12px; border-radius:5px; background:#313b39; }
.bot-icon::before{left:8px}.bot-icon::after{right:8px}.bot-icon.b1{left:24%;top:84px}.bot-icon.b2{right:24%;top:132px}.bot-icon.b1:after{background:#313b39}.bot-icon.b1{box-shadow:7px 9px 0 rgba(0,0,0,.2), inset 0 0 0 8px rgba(102,210,213,.08)}.bot-icon.b2{box-shadow:7px 9px 0 rgba(0,0,0,.2), inset 0 0 0 8px rgba(242,162,75,.08)}
.cargo { position:absolute; width:34px; height:34px; border-radius:8px; background:var(--orange); transform:rotate(45deg); box-shadow:5px 5px 0 rgba(0,0,0,.18); }.c1{left:8%}.c2{right:8%;background:var(--cyan)}

.growth-rings { position:relative; width:290px; height:290px; margin:auto; display:grid; place-items:center; }
.growth-rings span { position:absolute; border:2px solid rgba(102,210,213,.34); border-radius:50%; }.growth-rings span:nth-child(1){width:96px;height:96px}.growth-rings span:nth-child(2){width:184px;height:184px;opacity:.7}.growth-rings span:nth-child(3){width:274px;height:274px;opacity:.35}.growth-rings i{width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,#f0eee5,#aeb9b5);box-shadow:7px 9px 0 rgba(0,0,0,.2);position:relative}.growth-rings i::after{content:"";position:absolute;right:9px;top:9px;width:14px;height:14px;border-radius:5px;background:var(--orange)}

.mood-section { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:7rem; align-items:stretch; }
.mood-copy { padding:clamp(2rem,5vw,4rem); border:1px solid var(--line); border-radius:var(--radius); background:#222a28; }
.mood-copy p:last-child { color:var(--muted); font-size:1.08rem; }
.mood-card { position:relative; min-height:460px; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(180deg,#263331 0%,#3e463d 58%,#676b58 58%,#4f574b 100%); }
.horizon { position:absolute; left:-10%; right:-10%; top:52%; height:12%; border-radius:50%; background:#4e594d; opacity:.65; }
.mood-machine { position:absolute; border-radius:14px; background:linear-gradient(145deg,#f0eee5,#9ca9a5); box-shadow:10px 12px 0 rgba(0,0,0,.18); }
.machine-one{width:155px;height:120px;left:18%;bottom:20%}.machine-two{width:105px;height:86px;right:17%;bottom:28%}.machine-one::after,.machine-two::after{content:"";position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:6px;background:var(--cyan)}.machine-two::after{background:var(--orange)}
.mood-bot{position:absolute;width:65px;height:40px;left:49%;bottom:14%;border-radius:16px;background:#e8e9e2;border:3px solid #81918c;box-shadow:6px 7px 0 rgba(0,0,0,.2)}
.mood-glow{position:absolute;border-radius:50%;filter:blur(28px);opacity:.3}.mood-glow.cyan{width:160px;height:160px;background:var(--cyan);right:-40px;top:20px}.mood-glow.orange{width:130px;height:130px;background:var(--orange);left:-25px;bottom:-25px}

.development { display:grid; grid-template-columns:1fr 1fr; gap:4rem; padding:clamp(2rem,5vw,4rem) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:7rem; }
.development-copy { color:var(--muted); font-size:1.04rem; }
.closing { position:relative; overflow:hidden; min-height:360px; margin-bottom:4rem; padding:clamp(2rem,6vw,5rem); border-radius:34px; background:linear-gradient(135deg,#2d3835,#1e2826); border:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.closing::after { content:""; position:absolute; width:340px; height:340px; right:-100px; top:-130px; border-radius:50%; border:2px solid rgba(102,210,213,.18); box-shadow:0 0 0 56px rgba(102,210,213,.04),0 0 0 112px rgba(242,162,75,.025); }
.closing-copy { position:relative; z-index:2; max-width:780px; }.closing-copy p:last-child{color:var(--muted);font-size:1.08rem}.coming-soon{position:relative;z-index:2;padding:.8rem 1rem;border-radius:999px;background:rgba(242,162,75,.12);border:1px solid rgba(242,162,75,.25);color:#f5bf7b;font-size:.75rem;font-weight:900;letter-spacing:.15em;white-space:nowrap}

footer { display:grid; grid-template-columns:1fr auto auto; gap:2rem; align-items:center; padding:2rem 0 3rem; color:#8f9991; font-size:.88rem; }
.footer-links{display:flex;gap:1.1rem}.footer-links a{text-decoration:none}.footer-links a:hover{color:var(--paper)}footer p{margin:0}

.simple-page { width:min(calc(100% - 2rem), 820px); margin:0 auto; padding:5rem 0; }
.simple-page .back { display:inline-block; margin-bottom:4rem; color:var(--muted); text-decoration:none; font-weight:800; }
.simple-page h1 { font-size:clamp(3rem,8vw,6rem); line-height:.9; margin-bottom:4rem; }
.simple-page section { padding:2rem 0; border-top:1px solid var(--line); }
.simple-page section h2 { font-size:clamp(1.8rem,4vw,3rem); }
.simple-page section p { color:var(--muted); }

@media (max-width: 900px) {
  nav { display:none; }
  .hero-art-wrap { min-height:660px; }
  .hero-shade { background:linear-gradient(0deg,rgba(9,14,13,.94) 0%,rgba(9,14,13,.60) 52%,rgba(9,14,13,.06) 100%); }
  .hero-copy { top:auto; bottom:2.2rem; left:1.6rem; transform:none; width:calc(100% - 3.2rem); }
  h1 { font-size:clamp(4rem,17vw,7rem); }
  .story-panel { grid-template-columns:1fr; min-height:540px; }
  .mini-world,.bot-line,.growth-rings { margin-top:1rem; }
  .mood-section,.development { grid-template-columns:1fr; gap:1rem; }
  .development { gap:2rem; }
  footer { grid-template-columns:1fr; gap:1rem; }
}

@media (max-width: 560px) {
  .site-header { min-height:70px; }
  .hero { width:calc(100% - 1rem); margin-top:.25rem; }
  .hero-art-wrap { min-height:620px; border-radius:24px; }
  .hero-art { object-position:60% center; }
  .hero-copy { left:1.25rem; bottom:1.4rem; width:calc(100% - 2.5rem); }
  .hero-lede { font-size:1rem; }
  .story-panel,.mood-copy,.closing { padding:1.35rem; border-radius:22px; }
  .story-panel { min-height:500px; }
  .story-copy h3 { font-size:2.45rem; }
  .mini-world { transform:scale(.82) rotateX(58deg) rotateZ(-33deg); transform-origin:center; }
  .coming-soon { align-self:flex-start; }
  .closing { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}