:root {
  --bg: #f6f2ea;
  --bg2: #eee8dd;
  --panel: rgba(255, 253, 248, .82);
  --line: rgba(35, 29, 24, .13);
  --text: #1b1916;
  --muted: #756f67;
  --purple: #b53a2c;
  --pink: #d05838;
  --cyan: #287c78;
  --green: #318061;
  --orange: #c66d2d;
  --serif-title: "Noto Serif SC", "Songti SC", STSong, serif;
}

body { background: var(--bg); color: var(--text); }
.noise { opacity: .022; mix-blend-mode: multiply; }
.aurora { height: 980px; filter: none; opacity: 1; }
.aurora i { filter: blur(110px); opacity: .11; }
.aurora i:nth-child(1) { background: #b83b2d; left: -260px; top: 160px; }
.aurora i:nth-child(2) { background: #d8a47d; right: -220px; top: 100px; }
.aurora i:nth-child(3) { background: #dfc9ae; opacity: .25; }

.nav-wrap.scrolled { background: rgba(246, 242, 234, .84); border-color: var(--line); }
.nav { max-width: 1180px; }
.brand { gap: 0; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark strong { font-family: var(--serif-title); font-size: 22px; letter-spacing: .08em; }
.wordmark small { margin-top: 6px; color: #8d3127; font: 500 8px/1 var(--mono); letter-spacing: .34em; }
.nav-links { color: #5e5851; }
.nav-github { background: rgba(255,255,255,.42); }

.hero { max-width: 1280px; min-height: 920px; padding-top: 148px; grid-template-columns: .76fr 1.24fr; gap: 44px; }
.hero h1, .manifesto h2, .section-head h2, .arch-copy h2, .start h2, .compat h2 {
  font-family: var(--serif-title);
  font-weight: 900;
}
.hero h1 { font-size: clamp(58px, 5.5vw, 82px); line-height: 1.08; letter-spacing: -.07em; }
.hero h1 em { background: none; color: #b33529; }
.hero-lead { color: #69635c; }
.version-pill { color: #8f2e24; background: rgba(181,58,44,.06); border-color: rgba(181,58,44,.22); font-family: var(--mono); letter-spacing: .08em; }
.version-pill span { background: #b53a2c; box-shadow: 0 0 12px rgba(181,58,44,.45); }
.button.primary { background: #b6382b; box-shadow: 0 12px 32px rgba(134,40,31,.22); }
.button.primary:hover { box-shadow: 0 16px 38px rgba(134,40,31,.3); }
.button.ghost { background: rgba(255,255,255,.4); }
.hero-proof { color: #777068; }
.hero-proof i { color: #27755c; }

.hero-visual { height: 675px; perspective: none; }
.hero-product { position: absolute; width: 790px; max-width: 66vw; margin: 0; right: -82px; top: 20px; transform: rotate(1.8deg); filter: drop-shadow(0 42px 44px rgba(54,40,27,.22)); }
.hero-product:before { content: ""; position: absolute; inset: 8% 5% 0; background: #d6c6b2; border-radius: 40%; filter: blur(70px); z-index: -1; opacity: .65; }
.hero-product img { width: 100%; display: block; }
.hero-product figcaption { position: absolute; right: 7%; bottom: 2%; padding: 8px 12px; border-radius: 999px; color: #f4efe7; background: rgba(21,19,17,.82); backdrop-filter: blur(14px); font: 9px var(--mono); transform: rotate(-1.8deg); }
.hero-product figcaption i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #45c78c; box-shadow: 0 0 9px #45c78c; }
.hero-code-peek { position: absolute; left: -28px; bottom: 36px; width: 450px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; background: #171714; color: #e7e2d8; box-shadow: 0 24px 60px rgba(43,32,25,.28); transform: rotate(-1deg); }
.hero-code-peek > div { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.09); color: #8f8b83; font: 9px var(--mono); }
.hero-code-peek > div i { width: 7px; height: 7px; border-radius: 50%; background: #c9483a; }
.hero-code-peek > div i:nth-child(2) { background: #d99d37; }
.hero-code-peek > div i:nth-child(3) { background: #4aa978; }
.hero-code-peek > div span { margin-left: 7px; }
.hero-code-peek code { display: block; padding: 17px 19px 19px; font: 10px/1.9 var(--mono); }
.hero-code-peek b { color: #ef7b71; font-weight: 500; }
.hero-code-peek em { color: #7bc9c1; font-style: normal; }

.eyebrow { color: #a33227; }
.manifesto h2 span, .start h2 span { background: none; color: #b33529; }
.manifesto > p:not(.eyebrow), .section-head > p, .arch-copy > p:not(.eyebrow), .compat p:not(.eyebrow), .start-inner > p:not(.eyebrow) { color: #756e66; }
.stat-line { border-color: var(--line); }
.stat-line div { border-color: var(--line); }
.stat-line span { color: #817970; }

.bento-card { background: rgba(255,253,248,.72); border-color: var(--line); box-shadow: 0 20px 55px rgba(64,47,33,.045); }
.bento-card p { color: #756e66; }
.purple-card:after { background: #b53a2c; opacity: .07; }
.card-icon { color: #a43227; background: rgba(181,58,44,.08); border-color: rgba(181,58,44,.14); }
.cyan-icon { color: #287c78; background: rgba(40,124,120,.08); }
.pink-icon { color: #b64e68; background: rgba(182,78,104,.08); }
.green-icon { color: #318061; background: rgba(49,128,97,.08); }
.orange-icon { color: #b4652e; background: rgba(180,101,46,.08); }
.event-flow code { background: #f0e9de; border-color: var(--line); color: #655d55; }
.event-flow code.hot { color: #9d3027; border-color: rgba(181,58,44,.25); box-shadow: none; }
.toggle-demo { background: #f1ebe1; }
.demo-toggle { background: #b53a2c; }
.card-real-shot { position: absolute; width: 590px; right: -45px; top: 12px; margin: 0; transform: rotate(2deg); filter: drop-shadow(0 24px 28px rgba(63,45,32,.2)); }
.card-real-shot img { width: 100%; display: block; }
.card-real-shot figcaption, .menu-real-shot figcaption { position: absolute; right: 10%; bottom: 5%; color: #f3eee6; background: rgba(25,23,20,.8); border-radius: 999px; padding: 6px 10px; font: 8px var(--mono); }
.menu-real-shot { height: 270px; margin: 0; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #e8e1d7; }
.menu-real-shot img { height: 330px; width: auto; filter: drop-shadow(0 18px 20px rgba(44,35,28,.22)); }

.code-stage { background: #151512; box-shadow: 0 35px 75px rgba(65,45,31,.18); }
.code-tabs, .code-body, .code-meta { border-color: rgba(255,255,255,.1); }
.code-result.real-result { position: relative; display: grid; place-items: center; padding: 0; background: #e7e2da; }
.real-result img { width: 115%; height: 100%; object-fit: cover; object-position: left top; }
.real-result figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; color: #f7f3ed; background: rgba(20,19,17,.78); border-radius: 999px; font: 8px var(--mono); }
.real-result figcaption i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #46c88d; }

.shot-frame { background: #e7dfd3; border-color: var(--line); box-shadow: 0 26px 55px rgba(68,49,34,.13); }
.shot-frame.dark { background: #dfd6ca; }
.shot figcaption span, .shot figcaption code { color: #7d756d; }
.arch-diagram { background: rgba(255,253,248,.6); }
.arch-node { background: rgba(255,255,255,.64); }
.arch-node > i { color: #a33328; background: rgba(181,58,44,.08); }
.arch-node.protocol > i { color: #287c78; background: rgba(40,124,120,.08); }
.arch-node.swift > i { color: #c05c38; background: rgba(192,92,56,.08); }
.arch-node span { color: #776f67; }
.connector span { background: var(--bg); color: #8a827a; }
.connector i { background: linear-gradient(#b53a2c,#287c78); }
.compat { background: rgba(255,252,246,.62); border-color: rgba(181,58,44,.18); }
.compat-glow { background: #b53a2c; opacity: .08; }
.shield { background: #b53a2c; }
.start-inner { color: #f6f0e8; background: radial-gradient(circle at 50% 15%,rgba(197,76,55,.32),transparent 42%),#1b1916; }
.start-inner > p:not(.eyebrow) { color: #aaa198; }
.start-inner .eyebrow { color: #e37a68; }
.install { max-width: 430px; background: #100f0d; }
.install code { color: #e7dfd4; font-size: 12px; }
footer { border-color: var(--line); }
.footer-brand small { color: #7b746c; }
.footer-links { color: #686159; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-product { right: 50%; transform: translateX(50%) rotate(1deg); max-width: 88vw; }
  .hero-code-peek { left: 10%; }
}

@media (max-width: 760px) {
  .hero { display: block; min-height: auto; }
  .hero h1 { font-size: 52px; }
  .hero-visual { width: 100%; height: 440px; margin-top: 34px; overflow: visible; }
  .hero-product { width: 650px; max-width: none; right: auto; left: -110px; top: 20px; transform: rotate(1deg); }
  .hero-product figcaption { display: none; }
  .hero-code-peek { width: calc(100vw - 38px); left: 0; bottom: -25px; }
  .hero-code-peek code { font-size: 8px; }
  .bento-card.large { min-height: 470px; }
  .card-real-shot { width: 520px; right: -170px; top: 170px; }
  .menu-real-shot { margin-top: 15px; }
  .oop-stack { right: 8px; }
}