:root {
  --home-background: oklch(0.99 0.005 320);
  --home-surface: oklch(1 0 0);
  --home-ink: oklch(0.29 0.075 310);
  --home-muted: oklch(0.43 0.035 310);
  --home-accent: oklch(0.54 0.23 295);
  --home-rose: oklch(0.56 0.21 355);
  --home-border: oklch(0.9 0.025 310);
  --home-soft: oklch(0.97 0.015 310);
  --home-on-accent: oklch(1 0 0);
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
.header-content { flex-wrap: wrap; gap: 12px; }
.header-content nav { display: flex; order: 3; flex-basis: 100%; gap: 20px; overflow-x: auto; align-items: center; padding: 4px 0; }
.header-content nav a { margin-left: 0; flex-shrink: 0; font-size: 14px; }
.header-content .language-selector { margin-left: auto; }
.hero { background: var(--home-background); color: var(--home-ink); padding: 40px 24px 28px; }
.hero-content { max-width: 980px; }
.hero-brand { display: block; color: var(--home-accent); font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.hero h1 { max-width: 850px; margin: 0 auto 16px; font-size: 40px; line-height: 1.18; letter-spacing: 0; text-wrap: balance; }
.hero p { max-width: 720px; margin: 0 auto 22px; color: var(--home-muted); font-size: 17px; opacity: 1; }
.hero .btn-primary { background: var(--home-accent); color: var(--home-on-accent); }
.hero .btn-secondary { background: var(--home-surface); color: var(--home-accent); border: 1px solid var(--home-border); }
.hero .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.hero-art { margin: 28px auto 0; max-width: 780px; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 8px; }
.hero-art figcaption { margin-top: 8px; color: var(--home-muted); font-size: 12px; }
.journey-media { background: var(--home-background); padding: 30px 24px 34px; }
.journey-media-inner { max-width: 780px; margin: 0 auto; display: grid; gap: 22px; }
.journey-media video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--home-soft); }
.journey-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.journey-media .hero-art { margin-top: 0; }
.features { background: var(--home-surface); }
.features .container { max-width: 1120px; }
.features .section-title { color: var(--home-ink); margin-bottom: 12px; }
.features-intro { max-width: 660px; margin: 0 auto 36px; text-align: center; color: var(--home-muted); }
.features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card { background: var(--home-soft); border: 1px solid var(--home-border); padding: 24px; border-radius: 8px; }
.feature-card h3 { color: var(--home-ink); font-size: 19px; }
.feature-card p { color: var(--home-muted); font-size: 15px; }
.feature-icon { font-size: 26px; color: var(--home-accent); }
.feature-link { display: inline-block; color: var(--home-accent); margin-top: 16px; font-weight: 600; text-underline-offset: 4px; }
.feature-note { max-width: 740px; margin: 28px auto 0; color: var(--home-muted); text-align: center; font-size: 14px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--home-rose); outline-offset: 4px; }
@media (max-width: 768px) {
  .header-content { flex-wrap: wrap; gap: 12px; }
  .logo { font-size: 20px; }
  .hero { padding: 28px 20px 20px; }
  .hero-brand { font-size: 20px; }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 16px; }
  .hero .cta-buttons { gap: 10px; }
  .hero .btn { width: 100%; padding: 12px 18px; }
  .hero-art { margin-top: 22px; }
  .features { padding: 48px 20px; }
  .features .container { padding: 0; }
  .features-grid { grid-template-columns: 1fr; }
  .journey-media { padding: 20px 16px 26px; }
  .journey-media-inner { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .feature-card { transition: none; }
  .btn:hover, .feature-card:hover { transform: none; }
}