:root{
  --night:#0A1E18;
  --forest:#0E2820;
  --moss:#14362B;
  --tile:#1D4A3B;
  --line:#2C5445;
  --cream:#F4EEDF;
  --muted:#B9CBBE;
  --faint:#8FA99A;
  --leaf:#A8E6B5;
  --display:'Outfit',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--forest);color:var(--cream);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--cream)}
a:hover{color:var(--leaf)}
a:focus-visible,button:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--forest);padding:12px 18px;border-radius:999px;font-weight:600;z-index:10}
.skip:focus{left:16px}

/* header */
.site-header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:32px 0}
.wordmark{font-family:var(--display);font-size:26px;letter-spacing:-0.01em;text-decoration:none;display:inline-flex;align-items:baseline;gap:8px;min-height:44px;color:var(--cream)}
.wordmark b{font-weight:600}
.wordmark span{font-weight:300}
.nav{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.nav a{text-decoration:none;font-weight:500;font-size:16px;display:inline-flex;align-items:center;min-height:44px}
.nav a.cta{background:var(--cream);color:var(--forest);font-weight:600;border-radius:999px;padding:0 24px}
.nav a.cta:hover{background:var(--leaf);color:var(--forest)}

/* buttons */
.btn{display:inline-flex;align-items:center;min-height:56px;padding:0 34px;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;border:1.5px solid var(--cream)}
.btn.solid{background:var(--cream);color:var(--forest)}
.btn.solid:hover{background:var(--leaf);border-color:var(--leaf);color:var(--forest)}
.btn.ghost{color:var(--cream)}
.btn.ghost:hover{border-color:var(--leaf);color:var(--leaf)}
.btn.dark{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.btn.dark:hover{background:var(--moss);color:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* hero */
.hero{padding:96px 0 120px;display:flex;flex-direction:column;gap:40px}
.eyebrow{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:0.28em;text-transform:uppercase;color:var(--leaf)}
.hero h1{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(56px,10vw,136px);line-height:0.95;letter-spacing:-0.035em;max-width:1000px}
.hero h1 span{font-weight:300}
.hero p.lead{margin:0;font-size:22px;color:var(--muted);max-width:560px}

/* apps list */
.band{background:var(--moss);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section{padding:96px 0}
.section-head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:56px}
h2.display{margin:0;font-family:var(--display);font-weight:600;font-size:56px;letter-spacing:-0.03em;line-height:1.05}
.app-row{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;padding:32px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--cream)}
.app-row:last-child{border-bottom:1px solid var(--line)}
.app-row:hover .app-name{color:var(--leaf)}
.app-num{flex:0 0 48px;font-family:var(--display);font-weight:300;font-size:20px;color:var(--faint)}
.app-icon{flex:0 0 96px;height:96px;border-radius:26px;background:var(--tile);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.app-text{flex:1 1 280px;min-width:0}
.app-name{margin:0;font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-0.02em}
.app-text p{margin:6px 0 0;font-size:18px;color:var(--muted)}
.tag{flex:0 0 auto;border:1px solid var(--faint);color:var(--muted);border-radius:999px;padding:6px 16px;font-weight:500;font-size:14px}
.tag.live{border-color:var(--leaf);color:var(--leaf)}

/* studio */
.studio{padding:120px 0;display:flex;flex-wrap:wrap;gap:40px 80px;align-items:flex-start}
.studio h2{flex:1 1 380px;margin:0;font-family:var(--display);font-weight:300;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-0.03em}
.studio h2 b{font-weight:600}
.studio p{flex:1 1 380px;margin:0;padding-top:12px;font-size:21px;line-height:1.6;color:var(--muted)}

/* contact block */
.contact{background:var(--cream);color:var(--forest)}
.contact .wrap{padding-top:96px;padding-bottom:96px;display:flex;flex-wrap:wrap;gap:32px 64px;align-items:center;justify-content:space-between}
.contact h2{margin:0 0 14px;font-family:var(--display);font-weight:600;font-size:56px;letter-spacing:-0.03em;line-height:1}
.contact p{margin:0;font-size:20px;color:#274A3D}
.contact a{color:var(--forest)}

/* footer */
.site-footer{background:var(--night)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding-top:36px;padding-bottom:36px}
.site-footer .wordmark{font-size:20px;min-height:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.site-footer nav a{font-size:15px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-footer nav a:hover{color:var(--leaf)}
.site-footer small{font-size:15px;color:#A5B8AB}

/* inner pages */
.page-head{padding:72px 0 40px}
.page-head h1{margin:0 0 16px;font-family:var(--display);font-weight:600;font-size:clamp(44px,7vw,88px);letter-spacing:-0.035em;line-height:1}
.page-head p{margin:0;font-size:21px;color:var(--muted);max-width:640px}
.prose{padding:24px 0 120px;max-width:760px}
.prose h2{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-0.02em;margin:48px 0 12px}
.prose p,.prose li{font-size:18px;color:var(--muted)}
.prose ul{padding-left:22px}
.placeholder{background:var(--moss);border:1px dashed var(--faint);border-radius:6px;padding:1px 6px;color:var(--cream)}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-weight:500}
.back:hover{color:var(--leaf)}

/* app page */
.app-hero{padding:48px 0 96px;display:flex;flex-wrap:wrap;gap:48px 64px;align-items:center}
.app-hero .copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.app-hero h1{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(52px,8vw,104px);line-height:0.96;letter-spacing:-0.035em}
.app-hero p.lead{margin:0;font-size:22px;color:var(--muted);max-width:520px}
.app-hero .big-icon{flex:0 0 auto;width:260px;height:260px;border-radius:64px;background:var(--tile);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.features{display:flex;flex-wrap:wrap;gap:24px}
.feature{flex:1 1 280px;background:var(--forest);border:1px solid var(--line);border-radius:24px;padding:32px}
.feature h3{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-0.02em}
.feature p{margin:0;font-size:17px;color:var(--muted)}
.btn[aria-disabled="true"]{opacity:0.6;cursor:not-allowed}