* { box-sizing: border-box; }
html { scroll-padding-top: 32px; }
body { margin: 0; }
:root { --illustrated-surface: rgb(58 51 44 / 40%); --illustrated-shadow: 0 1px 4px rgb(0 0 0 / 25%); --illustrated-button: #f5e6d4; --illustrated-ink: #30251d; --header-control-height: 48px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }

.wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 30; background: var(--color-neutral-00); padding: 16px; }
.skip-link:focus { top: 16px; }
.site-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 650; letter-spacing: -.025em; flex-shrink: 0; }
.brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 0; }
.header-controls { display: flex; align-items: center; gap: 12px; }
.desktop-nav { display: flex; align-items: stretch; height: var(--header-control-height); gap: 2px; padding: 5px; font-size: 16px; font-weight: 500; }
.desktop-nav, .language-switch { background: var(--illustrated-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; text-shadow: var(--illustrated-shadow); }
.desktop-nav a { display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 14px; }
.language-switch { display: flex; align-items: stretch; height: var(--header-control-height); padding: 5px; gap: 2px; font-size: 13px; font-weight: 600; }
.language-switch a { display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 11px; border-radius: 999px; }
.language-switch a[aria-current] { background: var(--illustrated-button); color: var(--illustrated-ink); text-shadow: none; }
.compact-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--header-control-height); border: 1px solid transparent; border-radius: 999px; padding: 0 20px; background: var(--illustrated-button); color: var(--illustrated-ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1; text-align: center; flex-shrink: 0; }
.icon-button { display: inline-grid; place-items: center; width: var(--header-control-height); padding: 0; line-height: 0; }
.compact-button svg, .wind-toggle svg { display: block; flex-shrink: 0; }
.header-download svg { width: 18px; height: 18px; }

.site-header--hero { position: absolute; inset: 0 0 auto; z-index: 3; color: #fff; }
.site-header--hero .brand { text-shadow: var(--illustrated-shadow); }
.site-header--hero .desktop-nav a { border-radius: 999px; transition: background .2s; }
.hero { position: relative; display: grid; align-items: end; min-height: clamp(720px, 100svh, 960px); margin-bottom: 112px; color: #fff; background: #2e4a34; overflow: clip; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.wind-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art.wind-ready > img { opacity: 0; }
.wind-toggle { position: absolute; right: 28px; bottom: 28px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; line-height: 0; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; background: var(--illustrated-surface); color: #fff; backdrop-filter: blur(12px); cursor: pointer; }
.wind-toggle[hidden] { display: none; }
.wind-toggle svg { width: 18px; height: 18px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(12 31 21 / 72%) 0%, rgb(12 31 21 / 38%) 34%, rgb(12 31 21 / 5%) 68%), linear-gradient(180deg, rgb(10 28 25 / 36%) 0%, transparent 26%, transparent 62%, rgb(10 28 16 / 32%) 100%); pointer-events: none; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-block: 220px 96px; }
h1, h2 { font-family: var(--font-sans); font-weight: 600; line-height: 1.125; letter-spacing: -.025em; text-wrap: balance; }
h1 { max-inline-size: 20ch; font-size: clamp(40px, calc(40px + 32 * ((100vw - 640px) / 504)), 72px); line-height: 1.0625; }
.hero h1 { max-width: 640px; font-size: clamp(42px, 4.4vw, 68px); line-height: 1.08; text-wrap: pretty; }
.hero-description { max-width: 490px; margin-top: 24px; font-size: 20px; line-height: 1.5; color: rgb(255 255 255 / 88%); text-wrap: pretty; }
h2 { font-size: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; width: auto; }
.hero-actions .button { min-height: 60px; min-width: 156px; padding: 12px 32px; border-radius: 999px; font-size: 20px; font-weight: 500; line-height: 1; text-align: center; display: flex; justify-content: center; align-items: center; transition: background .2s; }
.hero-actions .hero-download { color: var(--illustrated-ink); background: var(--illustrated-button); border: 1px solid var(--illustrated-button); }
.hero-actions .hero-open { color: #fff; background: var(--illustrated-surface); border: 1px solid rgb(255 255 255 / 45%); backdrop-filter: blur(16px); text-shadow: var(--illustrated-shadow); }
a:focus-visible, button:focus-visible { outline: 3px solid #dcaf64; outline-offset: 5px; }

.collage { position: relative; aspect-ratio: 1 / 1.1; isolation: isolate; }
/* A 26.5% step with 40% cards leaves approximately 34% overlap. */
.screen-tile { position: absolute; display: block; width: 40%; aspect-ratio: var(--screen-aspect, 780 / 1688); overflow: hidden; border-radius: clamp(12px, 2vw, 24px); background: #fff; box-shadow: 0 16px 40px -20px rgb(0 0 0 / 28%), 0 0 0 1px rgb(0 0 0 / 5%); translate: var(--hover-x, 0px) var(--hover-y, 0px); rotate: var(--hover-rotate, 0deg); transition: translate .65s cubic-bezier(.22,1,.36,1), rotate .65s cubic-bezier(.22,1,.36,1); }
.screen-tile img { width: 100%; height: auto; }
.screen-tile.screen-without-nav { aspect-ratio: 780 / 1560; }
.collage-3 .tile-1 { left: 3%; top: 8%; transform: rotate(-7deg); z-index: 1; }
.collage-3 .tile-2 { left: 29.5%; top: 16%; transform: rotate(-1deg); z-index: 3; }
.collage-3 .tile-3 { left: 56%; top: 5%; transform: rotate(7deg); z-index: 2; }
/* Four cards use the same one-third overlap, with a staggered top edge. */
.collage-4 { aspect-ratio: 1 / 1.05; }
.collage-4 .screen-tile { width: 33%; }
.collage-4 .tile-1 { left: 0%; top: 12%; transform: rotate(-7deg); z-index: 1; }
.collage-4 .tile-2 { left: 22%; top: 3%; transform: rotate(-3deg); z-index: 2; }
.collage-4 .tile-3 { left: 44%; top: 20%; transform: rotate(2deg); z-index: 4; }
.collage-4 .tile-4 { left: 66%; top: 9%; transform: rotate(7deg); z-index: 3; }

.features { display: grid; gap: 112px; padding-bottom: 112px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.feature.image-first .collage { grid-row: 1; grid-column: 1; }
.feature.image-first .feature-copy { grid-row: 1; grid-column: 2; }
.feature-copy { max-width: 520px; }
.feature-copy .home-hub-section-description { font-size: clamp(1.25rem, calc(1.25rem + .75 * ((100vw - 40rem) / 31.5)), 2rem); line-height: 1.375; margin-top: 20px; }

.about { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 48px; margin-bottom: 64px; }
.about h2 { margin-inline: 40px; max-inline-size: 20ch; font-size: clamp(40px, calc(40px + 32 * ((100vw - 640px) / 504)), 72px); line-height: 1.0625; text-align: center; }
.about-image { aspect-ratio: 16 / 9; width: 100%; margin-top: 16px; border-radius: var(--radius-xl); overflow: hidden; }
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 16px); border-radius: 0; overflow: visible; }
.about-mosaic-tile { min-width: 0; min-height: 0; overflow: hidden; border-radius: clamp(12px, 2.2vw, 28px); background: #dedede; }
.about-mosaic-tile-1 { grid-area: 1 / 1 / 5 / 6; background: #d4d4d4; }
.about-mosaic-tile-2 { grid-area: 1 / 6 / 3 / 9; background: #ebebeb; }
.about-mosaic-tile-3 { grid-area: 1 / 9 / 4 / 13; background: #dedede; }
.about-mosaic-tile-4 { grid-area: 5 / 1 / 7 / 3; background: #e5e5e5; }
.about-mosaic-tile-5 { grid-area: 5 / 3 / 7 / 6; background: #dedede; }
.about-mosaic-tile-6 { grid-area: 3 / 6 / 7 / 9; background: #d8d8d8; }
.about-mosaic-tile-7 { grid-area: 4 / 9 / 7 / 13; background: #e8e8e8; }
.about-text { margin: 24px clamp(16px, calc(16px + 16 * ((100vw - 640px) / 504)), 32px) 0; font-size: clamp(16px, calc(16px + 2 * ((100vw - 640px) / 504)), 18px); columns: calc(40ch - 32px); column-gap: 32px; line-height: 1.75; }
.about-text p { margin-bottom: 1em; }
.community { width: 100%; text-align: center; margin-top: 32px; }
.community h3 { max-width: 760px; font-size: 28px; line-height: 1.35; font-weight: 600; margin: 0 auto 28px; letter-spacing: -.025em; text-wrap: balance; }
.social-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.social-icon { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; }
.social-icon svg { width: 100%; height: 100%; fill: currentColor; }
.social-telegram .social-icon { color: #2089bf; }
.social-instagram .social-icon { color: #b73974; }
.social-threads .social-icon { color: #101010; }
.social-youtube .social-icon { color: #c62828; }
.is-coming-soon { cursor: default; opacity: 1; }

.support { display: flex; flex-direction: column; align-items: center; gap: clamp(120px, 12vw, 160px); padding: 80px 32px 48px; margin-bottom: 64px; border-radius: var(--radius-xl); color: var(--color-neutral-00); text-align: center; background-image: linear-gradient(to bottom, rgb(15 16 11 / 65%) 0%, rgb(15 16 11 / 42%) 35%, rgb(15 16 11 / 16%) 60%, rgb(16 13 9 / 65%) 100%), url('/assets/chrust-hero-oak.jpg'); background-position: center; background-size: cover; }
.support-copy { position: relative; isolation: isolate; max-width: 720px; }
.support-copy::before { content: ""; position: absolute; inset: -28px -40px -36px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgb(12 24 17 / 48%) 0%, rgb(12 24 17 / 30%) 50%, transparent 75%); filter: blur(12px); pointer-events: none; }
.support h2 { font-size: clamp(36px, 5vw, 72px); }
.support p { margin-top: 16px; font-size: clamp(18px, 2.2vw, 32px); line-height: 1.35; }
.support-copy { text-shadow: var(--illustrated-shadow); }
.store-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: center; width: 100%; margin-inline: auto; gap: 12px; }
.store-button { display: grid; place-items: center; }
.store-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.store-icon svg { width: 100%; height: 100%; fill: currentColor; }
.store-webApp { white-space: nowrap; }
.download-standalone { min-height: max(760px, 100svh); margin: 0; border-radius: 0; justify-content: center; padding: 180px 48px 80px; gap: 64px; }
.download-standalone h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.0625; max-width: 880px; }
.download-standalone .support-copy { max-width: 880px; }
.back-link { font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }

.site-footer { background: var(--color-neutral-80); color: var(--color-neutral-40); }
.site-footer .brand { color: var(--color-neutral-00); }
.footer-top { padding-block: 64px 40px; }
.footer-mission { max-width: 450px; font-size: 18px; line-height: 1.5; margin-top: 24px; }
.footer-bottom { border-top: 1px solid var(--color-neutral-60); padding-block: 32px; font-size: 12px; }

@media (hover: hover) and (pointer: fine) {
  .site-header--hero .desktop-nav a:hover { background: rgb(255 255 255 / 12%); }
  .compact-button:not(:disabled):hover { background: #fff3e4; }
  .hero-actions .hero-download:hover, .header-download:hover { background: #fff3e4; }
  .hero-actions .hero-open:hover { background: rgb(58 51 44 / 60%); }
}

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 56px); }
  .hero h1 { max-width: 510px; }
  .hero-description { max-width: 420px; }
  .hero-copy { padding-bottom: 72px; }
  .hero { margin-bottom: 80px; }
  .header-controls { gap: 8px; }
  .desktop-nav { font-size: 14px; }
  .desktop-nav a { padding: 0 10px; }
  .header-download { width: var(--header-control-height); padding: 0; }
  .header-download span { display: none; }
  .feature { gap: 32px; }
  .features { gap: 80px; padding-bottom: 80px; }
  h2 { font-size: 32px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { padding-block: 16px; min-height: 140px; align-items: flex-start; gap: 12px; }
  .brand { font-size: 20px; }
  .brand img { width: 48px; height: 48px; }
  .header-controls { margin-left: auto; padding-top: 2px; }
  .desktop-nav { position: absolute; top: 78px; left: 0; right: 0; justify-content: center; gap: 4px; font-size: 14px; }
  .desktop-nav a { padding: 0 12px; }
  .language-switch a { padding: 0 8px; }
  .header-download { width: var(--header-control-height); padding: 0; }
  h2 { font-size: 30px; }
  .hero-actions { margin-top: 24px; }
  .hero { min-height: 820px; min-height: max(820px, 100svh); margin-bottom: 64px; }
  .hero-art img { object-position: 74% top; }
  .hero::before { background: linear-gradient(180deg, rgb(10 28 25 / 38%) 0%, transparent 22%, rgb(12 31 21 / 5%) 38%, rgb(12 31 21 / 78%) 68%, rgb(12 31 21 / 94%) 100%); }
  .hero-copy { padding-block: 450px 48px; }
  .hero h1 { max-width: 520px; font-size: clamp(38px, 7vw, 50px); line-height: 1.08; }
  .hero-description { max-width: 450px; margin-top: 20px; font-size: 18px; line-height: 1.45; }
  .hero-actions { gap: 12px; width: 100%; }
  .hero-actions .button { padding: 12px 24px; font-size: 18px; min-height: 56px; min-width: 132px; }
  .wind-toggle { right: 16px; bottom: 12px; width: 30px; height: 30px; }
  .wind-toggle svg { width: 14px; height: 14px; }
  .feature { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .feature-copy { max-width: none; }
  .feature-copy .home-hub-section-description { margin-top: 16px; }
  .features { gap: 64px; padding-bottom: 64px; }
  .support { padding: 48px 24px 32px; }
  .community h3 { font-size: 24px; }
  .download-standalone { padding: 190px 20px 56px; gap: 44px; min-height: max(820px, 100svh); }
  .download-standalone .support-copy::before { inset-inline: -20px; }
  .footer-top { padding-block: 40px 32px; }
  .footer-mission { font-size: 16px; }
  .footer-bottom { padding-block: 24px; }
}

@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  .hero-actions .button { font-size: 17px; }
  .desktop-nav a { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen-tile { transition: none; translate: none; rotate: none; }
}