/* Semantic palette and typography derived from the repository's DESIGN.md. */
:root {
  color-scheme: light dark;
  --surface-base: #f6f4ef;
  --surface-raised: #fff;
  --surface-sunken: #ece9e2;
  --hairline: #e4e0d7;
  --ink-primary: #16181b;
  --ink-secondary: #565b62;
  --accent: #b91c1c;
  --accent-deep: #7f1010;
  --on-accent: #fff;
  --display: Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--surface-base); color: var(--ink-primary); font: 1rem/1.6 var(--body); }
a { color: inherit; text-underline-offset: .25em; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
figure, h1, h2, h3, p { margin: 0; }
.wrap { width: min(100% - 4rem, 72rem); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; left: 1rem; top: 1rem; padding: .75rem 1rem; background: var(--surface-raised); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { min-height: 6.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; min-height: 44px; }
.brand img { border-radius: 10px; }
.brand span { font: 1.9rem/1 var(--display); }
nav { display: flex; gap: 2rem; }
nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: 550; }
nav a:hover { color: var(--accent); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; padding-block: 2.5rem 4.5rem; }
.hero-copy { min-width: 0; padding-bottom: 1rem; }
.development-status { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-secondary); margin-bottom: 1.75rem; }
.status-mark { width: .6rem; height: .6rem; border: 2px solid var(--accent); border-radius: 50%; }
h1, h2 { font-family: var(--display); font-weight: 400; }
h1 { font-size: 4.8rem; line-height: 1.08; max-width: 11ch; overflow-wrap: anywhere; }
.hero-description { color: var(--ink-secondary); font-size: 1.15rem; max-width: 40ch; margin-block: 1.6rem 2rem; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; border-radius: 12px; padding: .8rem 1.35rem; text-decoration: none; font-weight: 650; }
.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 8px #00000014; }
.primary:hover { background: var(--accent-deep); }
.availability { font-size: .875rem; color: var(--ink-secondary); margin-top: 1rem; }
.hero-note { display: flex; align-items: center; gap: .9rem; margin-top: 3rem; color: var(--ink-secondary); font-size: .9rem; }
.hero-note svg { color: var(--accent); }
.app-preview { min-width: 0; }
.preview-stage { position: relative; display: grid; align-items: center; isolation: isolate; }
.preview-stage::before { content: ""; position: absolute; inset: 13% 0 14%; background: var(--accent); border-radius: 24px; z-index: -2; }
.stage-word { position: absolute; right: .5rem; bottom: 7rem; writing-mode: vertical-rl; font: 5.3rem/1 var(--display); color: var(--on-accent); opacity: .22; z-index: -1; }
.phone-deck { appearance: none; display: block; width: 100%; border: 0; padding: 0; color: var(--ink-primary); background: transparent; font: inherit; text-align: center; cursor: pointer; touch-action: manipulation; border-radius: 24px; }
.phone-deck:disabled { cursor: default; }
.phone-deck:focus-visible { outline-offset: 2px; border-radius: 24px; }
.phone-fan { display: grid; grid-template: "phones" 1fr / minmax(0, 1fr); place-items: center; min-height: 35rem; padding-block: 3rem; }
.phone-frame { display: block; grid-area: phones; width: min(15rem, 37%); padding: 5px; border: 1px solid #45484e; border-radius: 30px; background: #16181b; box-shadow: 0 12px 28px #16181b38, 0 3px 8px #16181b26; transform-origin: 50% 85%; transition: transform 560ms cubic-bezier(.22, .8, .25, 1), box-shadow 480ms ease; }
.phone-frame img { width: 100%; border-radius: 24px; }
.phone-frame--outer-left { z-index: 1; transform: translate(-10%, 1.4rem) rotate(-15deg) scale(.9); }
.phone-frame--outer-right { z-index: 2; transform: translate(10%, 1.25rem) rotate(16deg) scale(.9); }
.phone-frame--middle-left { z-index: 3; transform: translate(-8%, .85rem) rotate(-10deg) scale(.94); }
.phone-frame--middle-right { z-index: 4; transform: translate(8%, .7rem) rotate(11deg) scale(.94); }
.phone-frame--catalog { z-index: 5; transform: translate(-5%, .35rem) rotate(-5deg) scale(.97); }
.phone-frame--detail { z-index: 6; transform: translate(6%, .2rem) rotate(6deg) scale(.97); }
.phone-frame--decks { z-index: 7; transform: rotate(-2deg); }
.phone-deck[aria-expanded="true"] .phone-frame--outer-left { transform: translate(-30%, 1.5rem) rotate(-33deg) scale(.75); }
.phone-deck[aria-expanded="true"] .phone-frame--outer-right { transform: translate(30%, 1.5rem) rotate(33deg) scale(.75); }
.phone-deck[aria-expanded="true"] .phone-frame--middle-left { transform: translate(-27%, 1rem) rotate(-24deg) scale(.84); }
.phone-deck[aria-expanded="true"] .phone-frame--middle-right { transform: translate(27%, 1rem) rotate(24deg) scale(.84); }
.phone-deck[aria-expanded="true"] .phone-frame--catalog { transform: translate(-20%, .5rem) rotate(-14deg) scale(.93); }
.phone-deck[aria-expanded="true"] .phone-frame--detail { transform: translate(20%, .5rem) rotate(14deg) scale(.93); }
.phone-deck[aria-expanded="true"] .phone-frame--decks { transform: translateY(-1rem); box-shadow: 0 18px 36px #16181b40, 0 4px 10px #16181b26; }
.phone-deck-hint { display: grid; place-items: center; min-height: 44px; margin-top: -.5rem; color: var(--ink-secondary); font-size: .8125rem; }
.phone-deck-hint > span { grid-area: 1 / 1; }
.phone-deck-hint--open { visibility: hidden; }
.phone-deck[aria-expanded="true"] .phone-deck-hint--open { visibility: visible; }
.phone-deck[aria-expanded="true"] .phone-deck-hint--closed, .phone-deck:disabled .phone-deck-hint { visibility: hidden; }
.hover-instruction { display: none; }
.preview-fallback { text-align: center; font-size: .875rem; }
@media (hover: hover) and (pointer: fine) { .hover-instruction { display: inline; } .touch-instruction { display: none; } }
figcaption { text-align: center; color: var(--ink-secondary); font-size: .8125rem; max-width: 35ch; margin: .5rem auto 0; }
.features { padding-block: 3.5rem 4.5rem; border-top: 1px solid var(--hairline); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
h2 { font-size: 2.75rem; line-height: 1.1; }
.section-heading > p { max-width: 34ch; color: var(--ink-secondary); }
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.feature-list article { max-width: 35ch; }
.feature-list svg { color: var(--accent); margin-bottom: 1rem; }
h3 { font-size: 1.1rem; line-height: 1.4; font-weight: 650; margin-bottom: .6rem; }
.feature-list p { color: var(--ink-secondary); }
.screenshots { border-top: 1px solid var(--hairline); padding-block: 3.5rem 4.5rem; }
.screenshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.screen-example { min-width: 0; }
.screenshot-link { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.5rem 1.5rem 1.25rem; background: var(--surface-sunken); border-radius: 24px; text-decoration: none; }
.screenshot-link img { width: min(100%, 18rem); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: 0 8px 24px #0000001f; }
.screenshot-zoom { min-height: 44px; display: inline-flex; align-items: center; gap: .7rem; color: var(--ink-primary); font-size: .9rem; font-weight: 600; }
.screenshot-link:hover .screenshot-zoom { text-decoration: underline; text-underline-offset: .25em; }
.screen-example figcaption { max-width: 42ch; margin: 1.5rem 0 0; text-align: left; font-size: 1rem; }
.screen-example h3 { color: var(--ink-primary); }
.screenshots-note { color: var(--ink-secondary); font-size: .875rem; margin-top: 2rem; max-width: 75ch; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 2.5rem; border-radius: 24px; background: var(--surface-raised); border: 1px solid var(--hairline); }
.contact-label { color: var(--accent); margin-bottom: .5rem; font-weight: 650; font-size: .9rem; }
.contact h2 { font-size: 2.2rem; }
.contact p:last-child { color: var(--ink-secondary); max-width: 48ch; margin-top: .8rem; }
.contact-button { border: 1px solid var(--hairline); flex-shrink: 0; gap: .8rem; }
.contact-button:hover { background: var(--surface-sunken); }
.site-footer { padding-block: 3rem 2rem; }
.footer-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .9rem; margin-bottom: 1rem; }
.footer-heading span { font-weight: 650; }
.footer-heading a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer > p { color: var(--ink-secondary); font-size: .8125rem; max-width: 95ch; }
@media (prefers-color-scheme: dark) {
  :root { --surface-base: #0b0c0e; --surface-raised: #17191d; --surface-sunken: #101215; --hairline: #ffffff1a; --ink-primary: #f0ede6; --ink-secondary: #a9aeb5; --accent: #ce2a2a; }
  .contact-label { color: var(--ink-primary); }
  nav a:hover { color: var(--ink-primary); text-decoration: underline; }
}
@media (max-width: 1020px) {
  .hero { gap: 2rem; }
  h1 { font-size: 3.7rem; }
  .contact { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .feature-list { gap: 1.75rem; }
}
@media (max-width: 720px) {
  .wrap { width: calc(100% - 2.5rem); }
  .site-header { min-height: 5.5rem; gap: 1rem; }
  .brand span { font-size: 1.65rem; }
  .brand img { width: 36px; height: 36px; }
  nav { gap: 1.15rem; font-size: .9rem; }
  .hero { grid-template-columns: 1fr; padding-block: 2rem 2.5rem; gap: 1.5rem; }
  h1 { font-size: 3.7rem; }
  .hero-copy { padding: 0; }
  .development-status { margin-bottom: 1.25rem; font-size: .8125rem; }
  .hero-description { font-size: 1.05rem; max-width: 44ch; }
  .hero-note { margin-top: 2rem; }
  .phone-fan { min-height: 27rem; padding-block: 3rem 2rem; }
  .phone-frame { width: 37%; padding: 3px; border-radius: 22px; }
  .phone-frame img { border-radius: 18px; }
  .stage-word { right: .5rem; bottom: 5rem; font-size: 3.5rem; }
  .features { padding-block: 2.5rem; }
  .section-heading { display: block; margin-bottom: 2.5rem; }
  h2 { font-size: 2.4rem; }
  .section-heading p { margin-top: 1.25rem; max-width: 44ch; }
  .feature-list { grid-template-columns: 1fr; gap: 2.25rem; }
  .feature-list article { max-width: 48ch; }
  .feature-list svg { margin-bottom: .75rem; }
  .screenshots { padding-block: 2.5rem; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .screenshot-link { padding: 1.5rem 1rem .5rem; }
  .screen-example figcaption { margin-top: 1.25rem; }
  .contact { padding: 1.5rem; }
  .contact h2 { font-size: 2rem; }
  .contact-button { width: 100%; padding-inline: .65rem; font-size: .925rem; overflow-wrap: anywhere; }
  .footer-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .site-footer { padding-top: 2rem; }
}
@media (max-width: 370px) {
  .brand span { font-size: 1.4rem; }
  .brand { gap: .4rem; }
  nav { gap: .75rem; }
  h1 { font-size: 3.15rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .phone-frame { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .stage-word { opacity: 1; } }