:root { --ink:#0d1311; --surface:#182019; --surface-2:#20291f; --line:#364035; --text:#f4f0e4; --muted:#b9b79e; --teal:#64c8bf; --teal-deep:#244b47; --amber:#e77a2d; --serif:Georgia, 'Times New Roman', serif; --sans:Inter, Aptos, Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.55; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 52rem 32rem at 84% -14%, rgba(100,200,191,.11), transparent 72%), radial-gradient(ellipse 40rem 26rem at 8% 38%, rgba(100,200,191,.06), transparent 74%); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip-link { position:absolute; top:12px; left:-9999px; z-index:100; padding:10px 14px; color:var(--text); background:var(--ink); border:1px solid var(--line); }
.skip-link:focus, .skip-link:focus-visible { left:16px; }
.nav-toggle { display:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0; color:var(--text); background:transparent; border:1px solid var(--line); cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display:block; width:18px; height:2px; background:currentColor; }
.nav-toggle span { position:relative; }
.nav-toggle span::before, .nav-toggle span::after { position:absolute; left:0; content:""; }
.nav-toggle span::before { top:-6px; }
.nav-toggle span::after { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }
.reading-progress { position:fixed; z-index:10; inset:0 0 auto; height:3px; background:rgba(255,255,255,.08); }
.reading-progress span { display:block; width:0; height:100%; background:var(--amber); }
.site-header { position:sticky; top:0; z-index:9; display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:1440px; margin:auto; padding:16px clamp(22px,5vw,74px); background:rgba(13,19,17,.9); border-bottom:1px solid rgba(255,255,255,.07); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:760; letter-spacing:-.04em; font-size:20px; }
.brand-logo { width:38px; height:38px; border-radius:11px; box-shadow:0 7px 18px rgba(100,200,191,.18); }
nav { display:flex; align-items:center; gap:clamp(14px,2.5vw,34px); color:var(--muted); font-size:14px; }
nav a:hover, .text-link:hover { color:var(--teal); }
.nav-cta { color:var(--text); border:1px solid var(--line); padding:9px 14px; }
.language-picker { display:flex; overflow:hidden; border:1px solid var(--line); }
.language-option { padding:8px 10px; color:var(--muted); border:0; border-left:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; font-weight:750; letter-spacing:.04em; }
.language-option:first-child { border-left:0; }
.language-option:hover { color:var(--text); background:var(--surface); }
.language-option.is-active { color:#17130e; background:var(--amber); }
.site-link { padding:8px 10px; color:var(--muted); border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; font-weight:750; letter-spacing:.04em; white-space:nowrap; }
.site-link:hover { color:var(--text); background:var(--surface); }
.section-shell { width:min(1280px, calc(100% - 44px)); margin-inline:auto; }
.hero { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:clamp(40px,7vw,112px); padding-block:clamp(38px,5vw,72px) clamp(86px,11vw,156px); }
.eyebrow { margin:0 0 16px; color:var(--teal); font-size:11px; line-height:1.2; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.06em; line-height:.97; }
h1,h2 { font-family:var(--serif); font-weight:400; }
h1 { max-width:650px; margin-bottom:28px; font-size:clamp(57px,7.3vw,106px); }
h1 em,h2 em { color:var(--teal); font-style:italic; }
.hero-text { max-width:510px; color:var(--muted); font-size:clamp(18px,1.7vw,22px); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:34px; }
.hero-donation { min-height:48px; }
.hero-donation .bmc-btn { height:48px; min-width:0; padding-inline:18px; border-radius:0; }
.hero-donation .bmc-btn svg { height:27px!important; }
.hero-donation-note { max-width:510px; margin:16px 0 -38px; padding:10px 13px; color:var(--text); border-left:2px solid var(--amber); background:rgba(231,122,45,.08); font-size:13px; line-height:1.45; }
.button { display:inline-block; padding:14px 20px; font-size:14px; font-weight:750; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-3px); }
.button-primary { color:#17130e; background:var(--amber); }
.text-link { border-bottom:1px solid currentColor; color:var(--muted); font-size:14px; }
.hero-facts { display:flex; gap:38px; margin:62px 0 0; color:var(--muted); font-size:13px; }
.hero-facts div { border-left:1px solid var(--line); padding-left:13px; }
.hero-facts dt { color:var(--teal); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.hero-facts dd { margin:3px 0 0; }
.image-frame { position:relative; isolation:isolate; margin:0; padding:6px; overflow:visible; color:inherit; background:rgba(28,36,32,.92); border:1px solid rgba(100,200,191,.25); border-radius:14px; box-shadow:0 12px 22px -13px rgba(0,0,0,.9), 0 28px 46px -30px rgba(0,0,0,.76); }
.image-frame::before { position:absolute; z-index:2; inset:0; content:""; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.image-frame::after { position:absolute; z-index:-1; right:10%; bottom:-20px; left:10%; height:28px; content:""; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.58), rgba(9,18,16,.26) 42%, transparent 72%); filter:blur(10px); opacity:.72; transition:opacity .28s ease, transform .28s ease; }
.screenshot-crop { position:relative; z-index:1; display:block; aspect-ratio:1.29; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:9px; box-shadow:0 9px 20px rgba(0,0,0,.2); }
.screenshot-crop > img { display:block; width:122%; max-width:none; height:auto; margin-left:-22%; }
.screenshot:hover::after { opacity:.92; transform:scaleX(1.04); }
.screenshot:focus-visible { outline:2px solid var(--teal); outline-offset:6px; }
.screenshot.image-frame { padding:6px; }
.screenshot.hero-visual { padding:58px 7px 7px; }
.visual-brand { position:absolute; z-index:2; top:12px; left:14px; display:flex; align-items:center; gap:9px; color:var(--text); text-align:left; }
.visual-brand > img { width:37px; height:37px; border:0; border-radius:11px; box-shadow:0 5px 15px rgba(100,200,191,.16); }
.visual-brand strong,.visual-brand small { display:block; line-height:1.15; }
.visual-brand strong { font-size:12px; letter-spacing:-.02em; }
.visual-brand small { margin-top:3px; color:var(--muted); font-size:10px; letter-spacing:.04em; }
.hero-caption { position:relative; z-index:1; display:flex; align-items:center; gap:9px; padding:11px 5px 2px; color:var(--muted); font-size:13px; }
.hero-caption::before { width:6px; height:6px; content:""; border-radius:50%; background:var(--teal); box-shadow:0 0 10px rgba(100,200,191,.65); }
.manifesto { display:grid; grid-template-columns:.35fr 1.15fr .65fr; gap:36px; align-items:start; padding-block:105px; border-top:1px solid var(--line); }
.manifesto .eyebrow { padding-top:12px; }
.manifesto h2 { margin:0; font-size:clamp(38px,5vw,72px); }
.manifesto > p:last-child { margin:11px 0 0; color:var(--muted); }
.tools { padding-block:100px; background:var(--surface); border-block:1px solid var(--line); }
.section-intro { padding-bottom:72px; }
.section-intro h2,.journey h2,.closing h2 { margin:0; font-size:clamp(44px,6vw,82px); }
.feature { display:grid; grid-template-columns:74px minmax(260px,.7fr) minmax(380px,1.3fr); gap:clamp(24px,4vw,64px); align-items:center; padding-block:82px; border-top:1px solid var(--line); }
.feature-number { align-self:start; color:var(--amber); font:italic 27px var(--serif); }
.feature-content { max-width:420px; }
.feature h3 { margin-bottom:20px; font-family:var(--serif); font-size:clamp(34px,3.6vw,55px); font-weight:400; }
.feature-content p:last-child { margin:0; color:var(--muted); }
.scale-support { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(38px,7vw,104px); padding-block:clamp(76px,9vw,122px); border-top:1px solid var(--line); }
.scale-support-intro h3 { margin:0 0 20px; font-family:var(--serif); font-size:clamp(38px,4vw,62px); font-weight:400; }
.scale-support-intro h3 em { color:var(--teal); font-style:italic; }
.scale-support-intro > p:last-of-type { max-width:460px; margin-bottom:30px; color:var(--muted); font-size:17px; }
.scale-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:0; }
.scale-stats div { min-width:0; padding:14px 10px 12px; border-top:1px solid var(--amber); background:rgba(231,122,45,.06); }
.scale-stats dt { color:var(--amber); font:italic 30px var(--serif); }
.scale-stats dd { margin:2px 0 0; color:var(--muted); font-size:11px; line-height:1.35; }
.scale-groups { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.scale-groups article { min-height:126px; padding:19px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.scale-groups h4 { margin:0 0 10px; color:var(--teal); font-size:12px; line-height:1.2; letter-spacing:.02em; }
.scale-groups p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.screenshot { width:100%; cursor:zoom-in; padding:0; color:inherit; text-align:left; transition:transform .28s; }
.screenshot:hover { transform:translateY(-8px); }
.feature-reverse { grid-template-columns:74px minmax(380px,1.3fr) minmax(260px,.7fr); }
.circle-feature { grid-template-columns:74px .72fr 1.28fr; }
.sequence-feature { grid-template-columns:74px .8fr 1.2fr; }
.journey { padding-block:130px; }
.journey ol { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; margin:74px 0 0; padding:0; list-style:none; }
.journey li { border-top:1px solid var(--line); padding-top:17px; }
.journey li span { color:var(--amber); font:italic 23px var(--serif); }
.journey strong { display:block; margin:30px 0 11px; font-size:20px; letter-spacing:-.04em; }
.journey p { margin:0; color:var(--muted); font-size:14px; }
.support { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,8vw,112px); align-items:center; padding-block:clamp(80px,11vw,140px); border-top:1px solid var(--line); }
.support-intro h2 { margin:0 0 24px; font-family:var(--serif); font-size:clamp(44px,5.8vw,78px); font-weight:400; }
.support-intro > p { max-width:590px; margin-bottom:30px; color:var(--muted); font-size:18px; }
.donation-card { padding:clamp(28px,4vw,48px); background:var(--surface); border:1px solid var(--line); box-shadow:16px 16px 0 rgba(231,122,45,.08); }
.donation-card h3 { margin-bottom:16px; font-family:var(--serif); font-size:clamp(31px,3.5vw,46px); font-weight:400; }
.donation-card > p:not(.eyebrow) { margin-bottom:26px; color:var(--muted); }
.coffee-button-holder { min-height:44px; }
.coffee-button-holder .bmc-btn-container { display:inline-block; }
.bmc-fallback { display:inline-block; padding:9px 14px; font-size:14px; font-weight:750; color:#ffffff; background:#FF5F5F; border:1px solid #000000; transition:transform .2s; }
.bmc-fallback::before { content:"☕ "; }
.bmc-fallback:hover { transform:translateY(-3px); }
.hero-donation .bmc-fallback { height:48px; display:inline-flex; align-items:center; }
.download-note { margin:2px 0 0; color:var(--muted); font-size:12px; }
.hero-actions .download-note { flex-basis:100%; margin-top:6px; }
.closing { padding:clamp(80px,12vw,160px) max(24px,8vw); background:#243229; border:1px solid var(--line); text-align:center; }
.closing .eyebrow { color:var(--amber); }
.closing h2 { max-width:850px; margin:0 auto 28px; }
.closing > p { max-width:500px; margin:0 auto 34px; color:var(--muted); font-size:18px; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:32px clamp(22px,5vw,74px); color:var(--muted); font-size:12px; }
.lightbox { width:min(1280px,94vw); padding:0; color:var(--text); border:1px solid var(--line); background:var(--surface); box-shadow:0 20px 80px #000; }
.lightbox::backdrop { background:rgba(0,0,0,.84); }
.lightbox img { display:block; max-width:100%; max-height:80vh; margin:auto; }
.lightbox p { margin:0; padding:14px 20px 18px; color:var(--muted); }
.lightbox-close { position:absolute; top:12px; right:12px; padding:8px 12px; color:var(--text); border:1px solid var(--line); background:var(--ink); cursor:pointer; }
.reveal { transition:opacity .72s ease, transform .72s ease; }
html.js .reveal { opacity:0; transform:translateY(24px); }
html.js .reveal.is-visible { opacity:1; transform:none; }
@media (max-width:1100px) {
  .site-header { padding-inline:clamp(22px,3vw,40px); }
  nav { gap:18px; }
  .hero { grid-template-columns:1fr; gap:46px; max-width:900px; }
  .hero-visual { max-width:820px; }
  .manifesto { grid-template-columns:.32fr 1fr; }
  .manifesto > p:last-child { grid-column:2; max-width:520px; }
  .feature { grid-template-columns:56px minmax(230px,.75fr) minmax(320px,1.15fr); gap:28px; }
  .feature-reverse { grid-template-columns:56px minmax(320px,1.15fr) minmax(230px,.75fr); }
  .scale-support { gap:48px; }
  .support { gap:48px; }
}
@media (max-width:960px) {
  .nav-toggle { display:inline-flex; }
  nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:14px clamp(22px,3vw,40px) 20px; background:rgba(13,19,17,.98); border-bottom:1px solid var(--line); }
  nav.nav-open { display:flex; }
  nav a { padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
  nav a:last-child { border-bottom:0; }
  .nav-cta { margin-top:6px; text-align:center; border:1px solid var(--line); padding:10px 14px; }
  .feature, .feature-reverse, .circle-feature, .sequence-feature { grid-template-columns:52px minmax(0,1fr); gap:22px; }
  .feature .feature-content, .feature .screenshot { grid-column:2; }
  .feature .screenshot { width:100%; }
  .feature-reverse .screenshot { grid-row:2; }
  .scale-support { grid-template-columns:1fr; }
  .scale-support-intro > p:last-of-type { max-width:650px; }
  .support { grid-template-columns:1fr; }
}
@media (max-width:800px) { .site-header { padding-block:15px; gap:10px; } .language-option { padding:7px 8px; } .hero,.manifesto,.feature,.feature-reverse,.circle-feature,.sequence-feature { grid-template-columns:1fr; } .hero { gap:40px; padding-top:65px; } .hero-copy { order:0; } .hero-visual { order:1; } .manifesto { padding-block:78px; gap:18px; } .feature { gap:26px; padding-block:56px; } .feature-number { margin-bottom:-12px; } .feature-reverse .screenshot { order:3; } .scale-groups { grid-template-columns:1fr; } .scale-groups article { min-height:0; } .journey { padding-block:86px; } .journey ol { grid-template-columns:1fr; gap:32px; margin-top:48px; } .site-footer { flex-direction:column; } }
@media (max-width:800px) { .feature .feature-content, .feature .screenshot { grid-column:auto; } .feature-reverse .screenshot { grid-row:auto; } }
@media (max-width:560px) {
  .site-header { padding-inline:16px; }
  .brand { gap:7px; font-size:17px; }
  .language-option { padding:7px 7px; font-size:11px; }
  .section-shell { width:min(100% - 32px, 1280px); }
  .hero { padding-top:40px; padding-bottom:78px; gap:30px; }
  .hero-facts { gap:18px; margin-top:42px; }
  .hero-donation-note { margin-bottom:-18px; }
  .hero-facts div { padding-left:9px; }
  .feature { padding-block:46px; }
  .feature-number { font-size:23px; }
  .feature h3 { font-size:35px; }
  .screenshot:hover { transform:none; }
  .closing { padding-inline:22px; }
  .site-footer { padding-inline:16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } html.js .reveal { opacity:1; transform:none; } }