:root {
  --ink: #191919;
  --muted: #777;
  --paper: #fff;
  --soft: #f7f7f7;
  --line: #ebebeb;
  --green: #07c160;
  --green-dark: #06ae56;
  --peach: #f7f7f7;
  --lavender: #f7f7f7;
  --mint: #f7f7f7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header { width: min(1180px, calc(100% - 48px)); height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { display: inline-flex; gap: 3px; align-items: end; width: 23px; height: 20px; padding: 3px; background: var(--green); border-radius: 6px; }
.brand-mark i { display: block; width: 4px; background: #fff; border-radius: 3px; }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 10px; }
nav { display: flex; align-items: center; gap: 30px; color: #555; font-size: 14px; }.language-toggle { min-width: 35px; padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; font: inherit; font-weight: 700; }
nav a:hover, footer a:hover, .text-link:hover { color: var(--green); }

.hero { width: min(1180px, calc(100% - 48px)); min-height: 570px; margin: 0 auto; padding: 145px 0 95px; text-align: center; }
.eyebrow { color: var(--green); margin: 0 0 16px; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; font-size: clamp(48px, 6.2vw, 82px); line-height: 1.14; letter-spacing: -.065em; font-weight: 650; margin: 0 auto 26px; text-wrap: balance; }
.hero-copy { width: min(390px, 100%); color: var(--muted); font-size: 17px; margin: 0 auto 30px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-width: 138px; min-height: 46px; padding: 0 23px; border-radius: 4px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; transition: background .2s ease, transform .2s ease; }.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.apps-section { background: var(--soft); padding: 105px max(24px, calc((100% - 1180px) / 2)); }
.section-heading { margin-bottom: 50px; }.section-heading h2, .principles h2 { font-size: clamp(33px, 4.2vw, 54px); line-height: 1.23; letter-spacing: -.055em; margin-bottom: 0; font-weight: 650; text-wrap: balance; }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app-card { min-height: 390px; padding: 25px; border: 1px solid #ebebeb; border-radius: 8px; background: #fff; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease; }.app-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(0,0,0,.08); }.app-card--peach, .app-card--lavender, .app-card--mint { background: #fff; }
.app-card-topline { display: flex; justify-content: flex-end; font-size: 12px; color: #999; }.app-icon, .dialog-icon { width: 88px; height: 88px; margin: auto; display: grid; place-items: center; overflow: hidden; border-radius: 21px; background: var(--green); color: #fff; font-size: 44px; font-weight: 700; letter-spacing: -.08em; box-shadow: inset 0 1px rgba(255,255,255,.25); }.app-icon img, .dialog-icon img { width: 100%; height: 100%; object-fit: cover; }.app-card:nth-child(2) .app-icon { background: #242424; }.app-card:nth-child(3) .app-icon { background: #8fd3b0; }.app-card-body h3 { margin-bottom: 5px; font-size: 28px; letter-spacing: -.045em; line-height: 1.2; }.app-card-body p { margin-bottom: 22px; color: #777; font-size: 15px; line-height: 1.6; }.app-action { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 14px; border: 0; border-radius: 3px; background: var(--green); color: #fff; cursor: pointer; font-size: 14px; font-weight: 600; }.app-action:disabled { background: #e5e5e5; color: #999; cursor: default; }.app-action:not(:disabled):hover { background: var(--green-dark); }

.principles { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0; display: grid; grid-template-columns: 1fr .77fr; gap: 85px; }.principles-copy { align-self: end; }.principles-copy p { color: var(--muted); font-size: 18px; margin-bottom: 28px; }
footer { width: min(1180px, calc(100% - 48px)); min-height: 95px; margin: 0 auto; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; } footer div { display: flex; flex-wrap: wrap; gap: 8px 24px; }

dialog { width: min(430px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 34px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 25px 100px rgba(0,0,0,.25); }.close-button { position: absolute; right: 17px; top: 12px; border: 0; background: transparent; cursor: pointer; font-size: 31px; line-height: 1; color: var(--muted); }.dialog-icon { width: 70px; height: 70px; border-radius: 17px; margin: 0 0 24px; font-size: 35px; }.dialog-icon.app-card--peach { background: var(--green); }.dialog-icon.app-card--lavender { background: #242424; }.dialog-icon.app-card--mint { background: #8fd3b0; } dialog h2 { font-size: 34px; margin-bottom: 8px; letter-spacing: -.055em; line-height: 1.2; } dialog p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }.download-list { display: grid; gap: 10px; margin: 25px 0 0; }.download-link { display: grid; grid-template-columns: 95px 1fr auto; align-items: center; gap: 9px; padding: 14px; border-radius: 4px; background: var(--soft); font-size: 14px; font-weight: 600; }.download-link:hover { color: var(--green); }.download-link span { color: var(--muted); font-size: 12px; }.download-link b { font-size: 17px; }.download-qr { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border-radius: 4px; background: var(--soft); }.download-qr-copy { display: grid; align-content: center; gap: 6px; }.download-qr-copy span, .download-qr-copy small { color: var(--muted); font-size: 12px; }.download-qr-copy strong { font-size: 15px; }.download-qr img { width: 128px; height: 128px; padding: 5px; border-radius: 6px; background: #fff; object-fit: contain; }dialog::backdrop { background: rgba(20,23,21,.38); backdrop-filter: blur(3px); }

@media (max-width: 1050px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .site-header, .hero, .principles, footer { width: min(100% - 36px, 600px); }.site-header { height: 70px; } .brand { font-size: 13px; } nav { gap: 13px; font-size: 13px; } nav a:nth-child(2) { display: none; }.language-toggle { min-width: 27px; }.hero { min-height: 535px; padding: 112px 0 78px; }.hero-copy { font-size: 16px; }.apps-section { padding: 74px 18px; }.section-heading { margin-bottom: 32px; }.app-grid { grid-template-columns: 1fr; gap: 14px; }.app-card { min-height: 315px; border-radius: 6px; }.app-icon { margin: 32px auto; }.principles { grid-template-columns: 1fr; gap: 28px; padding: 78px 0; }.principles-copy p { font-size: 16px; } footer { min-height: 128px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; } footer div { gap: 8px 18px; }.download-qr { gap: 12px; }.download-qr img { width: 112px; height: 112px; } }