:root {
  --ink: #071d17;
  --green: #20d978;
  --lime: #b6ff56;
  --paper: #f4f2e9;
  --line: rgba(7, 29, 23, 0.14);
  --muted: #597068;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--lime); color: var(--ink); }

.nav { position: absolute; z-index: 20; inset: 0 0 auto; height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; color: #f9fff9; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.brand-mark { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--green); font-size: 10px; }
.nav-links { display: flex; gap: 34px; color: rgba(255,255,255,.72); font-size: 13px; }
.nav-links a:hover, .nav-links a:focus-visible { color: #fff; }

.hero { min-height: 900px; padding: 180px 5vw 100px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr); align-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 76% 48%, rgba(35,214,119,.16), transparent 30%), linear-gradient(140deg, #04140f 0%, #08231a 56%, #0d3224 100%); }
.hero-copy { max-width: 720px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 23px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 800; color: #36896b; }
.eyebrow > span { width: 22px; height: 1px; background: currentColor; }
.hero .eyebrow { color: #62e49f; }
.author-link { width: fit-content; margin: -5px 0 28px; display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.58); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; transition: color .2s, transform .2s; }
.author-link:hover, .author-link:focus-visible { color: var(--lime); transform: translateY(-1px); }
.author-link b { color: #fff; font-weight: 800; }
.x-badge { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(182,255,86,.5); border-radius: 50%; color: var(--lime); font: 800 10px ui-sans-serif, sans-serif; }
.hero h1 { margin: 0; max-width: 780px; font-size: clamp(54px, 6.2vw, 96px); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.hero h1 em { color: var(--lime); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.lede { max-width: 620px; margin: 34px 0 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.7; color: rgba(255,255,255,.68); }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 42px; flex-wrap: wrap; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; padding: 0 23px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; font-weight: 800; transition: transform .2s, background .2s; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button.primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.button.secondary { border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.78); }
.github-button { min-width: 180px; background: var(--lime); color: var(--ink); border-color: var(--lime); box-shadow: 0 0 0 1px rgba(182,255,86,.18), 0 12px 34px rgba(182,255,86,.12); letter-spacing: .12em; }
.github-button:hover, .github-button:focus-visible { background: #c8ff7d; box-shadow: 0 0 0 1px rgba(182,255,86,.3), 0 16px 42px rgba(182,255,86,.2); }
.github-mark { font: 800 13px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.12em; }
.trust-row { display: flex; gap: 25px; padding: 0; margin: 42px 0 0; list-style: none; flex-wrap: wrap; color: rgba(255,255,255,.48); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.trust-row li::before { content: "·"; margin-right: 8px; color: var(--green); }

.device-stage { min-height: 650px; position: relative; display: grid; place-items: center; }
.course-orbit { position: absolute; width: 580px; height: 580px; border: 1px solid rgba(111,255,171,.15); border-radius: 50%; }
.orbit-one::after, .orbit-two::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 20px var(--green); }
.orbit-one::after { top: 70px; right: 88px; }
.orbit-two { width: 460px; height: 460px; opacity: .7; }
.orbit-two::after { bottom: 50px; left: 96px; }
.phone { position: absolute; width: 280px; height: 565px; border: 8px solid #121613; border-radius: 48px; background: #070907; box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 1px #525b55; transform: rotate(-5deg) translate(-65px, -15px); overflow: hidden; }
.phone-island { position: absolute; z-index: 3; top: 9px; left: 50%; width: 86px; height: 23px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.phone-screen { position: absolute; inset: 8px; padding: 32px 13px 16px; border-radius: 34px; background: radial-gradient(circle at 80% 10%, rgba(54,231,130,.2), transparent 25%), #060b08; overflow: hidden; }
.app-bar { height: 30px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: white; }
.status-dot { width: 18px; height: 18px; border-radius: 50%; background: #184e36; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.hero-card { height: 188px; margin-top: 8px; padding: 19px; display: flex; flex-direction: column; border-radius: 26px; background: linear-gradient(145deg,#125b39,#0e3b29); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.hero-card small { color: #b8f4cf; font-size: 6px; letter-spacing: .12em; }
.hero-card strong { margin-top: 16px; font-size: 25px; line-height: 1.02; letter-spacing: -.04em; }
.hero-card span { margin-top: auto; font-size: 8px; color: rgba(255,255,255,.5); }
.status-panel { padding: 15px; margin-top: 11px; border-radius: 20px; background: #141917; border: 1px solid rgba(255,255,255,.1); }
.status-panel p { margin: 0 0 8px; font-size: 7px; font-weight: 800; color: #b3bbb6; }
.status-panel div { display: grid; grid-template-columns: 22px 1fr 6px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.07); }
.status-panel b { font-size: 8px; }
.status-panel i { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
.mini-icon { color: var(--green); font-size: 10px; }
.course-panel { margin-top: 11px; padding: 14px; display: flex; align-items: center; gap: 11px; border-radius: 18px; background: rgba(255,255,255,.07); }
.course-panel > span { color: var(--green); }
.course-panel b, .course-panel small { display: block; font-size: 8px; }
.course-panel small { margin-top: 4px; color: rgba(255,255,255,.44); }
.watch { position: absolute; z-index: 4; width: 217px; height: 254px; border: 8px solid #a8aca4; border-radius: 58px; background: #050706; box-shadow: 0 35px 65px rgba(0,0,0,.55), inset 0 0 0 2px #333a35; transform: translate(120px, 145px) rotate(6deg); }
.watch-crown { position: absolute; right: -17px; top: 61px; width: 11px; height: 37px; border-radius: 0 9px 9px 0; background: #9ea19b; }
.watch-screen { position: absolute; inset: 8px; display: flex; flex-direction: column; align-items: center; padding: 17px 12px; border-radius: 43px; background: radial-gradient(circle at 50% 0%, rgba(45,226,126,.25), transparent 42%), #050806; text-align: center; }
.watch-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #159c56; color: #caff7d; font-size: 18px; box-shadow: 0 0 25px rgba(40,255,134,.3); }
.watch-screen b { margin-top: 10px; font-size: 18px; line-height: 1; }
.watch-screen small { margin-top: 8px; max-width: 160px; font-size: 7px; line-height: 1.35; color: rgba(255,255,255,.58); }
.watch-action { width: 145px; margin-top: 11px; padding: 7px; border-radius: 15px; background: #e9eee9; color: #102219; font-size: 8px; font-weight: 800; }
.watch-alt { margin-top: 7px; font-size: 6px; color: rgba(255,255,255,.48); }
.signal-chip { position: absolute; top: 72px; right: 8px; padding: 11px 14px; border: 1px solid rgba(109,255,171,.3); color: #74efa8; background: rgba(6,24,17,.75); font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }

.flow-section { padding: 140px 5vw; }
.section-heading { max-width: 770px; }
.section-heading h2, .privacy-card h2, .source-section h2 { margin: 0; font-size: clamp(45px, 5vw, 78px); line-height: 1; letter-spacing: -.05em; font-weight: 600; }
.section-heading > p:last-child { max-width: 610px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.flow-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.flow-grid article { min-height: 480px; padding: 26px; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step { color: #789087; font: 11px ui-monospace, monospace; }
.step-visual { height: 230px; margin: 26px 0 30px; position: relative; display: grid; place-items: center; overflow: hidden; background: #e8e9df; }
.step-visual.pin i { position: absolute; width: 180px; height: 180px; border: 1px solid #a8c4b7; border-radius: 50%; }
.step-visual.pin i:nth-child(2) { width: 120px; height: 120px; }
.step-visual.pin i:nth-child(3) { width: 14px; height: 14px; background: var(--green); border: 4px solid #083021; box-shadow: 0 0 0 10px rgba(32,217,120,.16); }
.step-visual.pulse i { position: absolute; width: 140px; height: 140px; border: 1px solid #a8c4b7; border-radius: 50%; }
.step-visual.pulse i:nth-child(2) { width: 190px; height: 190px; opacity: .6; }
.step-visual.pulse b { z-index: 2; width: 72px; height: 82px; display: grid; place-items: center; border: 5px solid #b8bbb4; border-radius: 22px; background: #07110c; color: var(--lime); font-size: 25px; }
.step-visual.choices { align-content: center; gap: 8px; padding: 35px; }
.step-visual.choices b, .step-visual.choices span { width: 100%; padding: 11px; text-align: center; border: 1px solid #bfc7c1; border-radius: 4px; font-size: 11px; }
.step-visual.choices b { background: var(--ink); color: white; border-color: var(--ink); }
.flow-grid h3 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.flow-grid article > p { margin: 13px 0 0; color: var(--muted); line-height: 1.65; font-size: 14px; }

.boundary-section { padding: 130px 5vw; background: var(--ink); color: white; }
.eyebrow.light { color: var(--green); }
.boundary-copy { max-width: 880px; }
.boundary-copy h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(42px, 5vw, 72px); line-height: 1.05; font-weight: 400; letter-spacing: -.035em; }
.boundary-copy > p:last-child { max-width: 750px; margin: 28px 0 0; color: rgba(255,255,255,.59); font-size: 17px; line-height: 1.75; }
.boundary-flow { margin-top: 80px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 22px; }
.boundary-flow > div { min-height: 210px; padding: 28px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); }
.boundary-flow small { color: var(--green); font: 9px ui-monospace, monospace; letter-spacing: .14em; }
.boundary-flow b { margin-top: 30px; font-size: 25px; }
.boundary-flow span { margin-top: auto; display: inline-flex; width: fit-content; padding: 9px 13px; border-radius: 3px; background: #f2f6f1; color: var(--ink); font-size: 10px; font-weight: 800; }
.boundary-flow > i { color: var(--green); font-style: normal; }
.boundary-flow .play { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); }
.boundary-flow .human { border-color: rgba(182,255,86,.55); }

.privacy-section { padding: 140px 5vw; display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: start; }
.privacy-card { position: sticky; top: 50px; }
.privacy-card > p:last-child { max-width: 560px; color: var(--muted); line-height: 1.7; font-size: 16px; }
.lock { width: 72px; height: 66px; margin-bottom: 38px; position: relative; border: 2px solid var(--ink); border-radius: 8px; }
.lock::before { content: ""; position: absolute; left: 16px; top: -33px; width: 35px; height: 43px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; }
.lock span { position: absolute; left: 31px; top: 24px; width: 7px; height: 15px; border-radius: 5px; background: var(--green); }
.privacy-list > div { padding: 34px 0; display: grid; grid-template-columns: 40px 170px 1fr; align-items: start; gap: 15px; border-top: 1px solid var(--line); }
.privacy-list > div:last-child { border-bottom: 1px solid var(--line); }
.privacy-list span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #d9f6e5; color: #0a8b4a; font-weight: 900; }
.privacy-list b { font-size: 16px; }
.privacy-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.source-section { padding: 120px 5vw; display: grid; grid-template-columns: 1fr .75fr; gap: 8vw; border-top: 1px solid var(--line); background: #e7e8dc; }
.source-copy > p { margin: 37px 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.source-copy .button { color: var(--ink); }
.status-section { padding: 110px 5vw; }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.status-grid > div { min-height: 160px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.status-grid b { font-size: 14px; }
.status-grid p { color: var(--muted); line-height: 1.5; font-size: 13px; }
footer { padding: 45px 5vw; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; color: rgba(255,255,255,.68); background: #03110c; font-size: 11px; }
footer p { text-align: center; }
footer .creator { text-align: right; }
footer .creator:hover, footer .creator:focus-visible { color: white; }

@media (max-width: 1000px) {
  .hero { min-height: 1250px; grid-template-columns: 1fr; align-content: start; }
  .device-stage { min-height: 650px; margin-top: 55px; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-grid article { min-height: auto; display: grid; grid-template-columns: 50px 250px 1fr; gap: 20px; align-items: center; }
  .step-visual { margin: 0; }
  .flow-grid article > p { grid-column: 3; }
  .boundary-flow { grid-template-columns: 1fr; }
  .boundary-flow > i { transform: rotate(90deg); justify-self: center; }
  .privacy-section, .source-section { grid-template-columns: 1fr; }
  .privacy-card { position: static; }
  .status-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  .nav { height: 72px; }
  .nav-links { display: none; }
  .hero { min-height: 1160px; padding-top: 125px; }
  .hero h1 { font-size: 49px; }
  .device-stage { transform: scale(.78); transform-origin: top center; margin-bottom: -120px; }
  .phone { transform: rotate(-5deg) translate(-45px, -15px); }
  .watch { transform: translate(102px, 145px) rotate(6deg); }
  .signal-chip { right: -40px; }
  .author-link { margin-bottom: 25px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .button { width: 100%; min-width: 0; gap: 12px; }
  .flow-section, .boundary-section, .privacy-section, .source-section, .status-section { padding: 90px 6vw; }
  .flow-grid article { display: block; }
  .step-visual { margin: 25px 0; }
  .flow-grid article > p { grid-column: auto; }
  .privacy-list > div { grid-template-columns: 35px 1fr; }
  .privacy-list p { grid-column: 2; }
  .status-grid { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer p, footer .creator { text-align: center; }
}

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