@font-face { font-family: 'Oswald'; font-weight: 400; font-display: swap; src: url('assets/oswald-400.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 600; font-display: swap; src: url('assets/oswald-600.woff2') format('woff2'); }

:root {
  --red: #e8234a;
  --red-light: #ff5270;
  --red-dark: #b3122f;
  --yellow: #ffc400;
  --ink: #2a0a12;
  --paper: #fff7f8;
  --card: #ffffff;
  --muted: #6b4a52;
  --line: rgba(255, 255, 255, 0.14);
  --heading: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.5; }

h1, h2, h3 { font-family: var(--heading); font-weight: 600; line-height: 1.1; margin: 0; }

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px 72px;
  text-align: center;
  color: #ffffff;
  background: radial-gradient(circle at 32% 22%, var(--red-light), var(--red) 45%, var(--red-dark));
}

.hero::before,
.hero::after { content: ''; position: absolute; pointer-events: none; border: 3px solid var(--line); }

.hero::before { inset: 28px; border-radius: 10px; background: linear-gradient(var(--line), var(--line)) center / 3px 100% no-repeat; }

.hero::after { left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; }

.hero > * { position: relative; z-index: 1; }

.languages { align-self: flex-end; display: flex; gap: 14px; margin: 14px 28px 0 0; font-size: 0.9rem; }

.languages a { color: #ffffff; opacity: 0.75; text-decoration: none; }

.languages a[aria-current='page'] { opacity: 1; font-weight: 700; border-bottom: 2px solid var(--yellow); }

.logo { width: 200px; height: 200px; margin-top: 12px; border-radius: 44px; box-shadow: 0 18px 40px rgba(60, 0, 15, 0.35); }

h1 { font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 4px 0 rgba(120, 0, 30, 0.45); }

h1 span { color: var(--yellow); }

.tagline { margin: 0; font-family: var(--heading); font-size: clamp(1.2rem, 3.4vw, 1.7rem); letter-spacing: 0.06em; }

.lead { max-width: 34rem; margin: 4px 0 16px; opacity: 0.92; }

.button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  background: var(--red);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(179, 18, 47, 0.3); }

.button-light { color: var(--red-dark); background: var(--yellow); }

.button-outline { color: var(--red-dark); background: transparent; border: 2px solid var(--red); }

.section { max-width: 1040px; margin: 0 auto; padding: 56px 16px 8px; text-align: center; }

.section h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); text-transform: uppercase; letter-spacing: 0.03em; color: var(--red-dark); }

.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; text-align: left; }

.app { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--card); box-shadow: 0 6px 24px rgba(120, 0, 30, 0.1); }

.app img { width: 96px; height: 96px; border-radius: 22px; }

.app-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; }

.app-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }

.app h3 { font-size: 1.6rem; }

.app p { flex: 1; margin: 0 0 8px; color: var(--muted); }

.more { margin: 28px 0 0; }

.more a { color: var(--red-dark); font-weight: 700; text-decoration: none; }

.more a:hover { text-decoration: underline; }

.follow { padding-bottom: 64px; }

.follow p { margin: 12px 0 24px; color: var(--muted); }

.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 28px 16px; font-size: 0.9rem; color: #ffffff; background: var(--red-dark); }

.footer a { color: #ffffff; }

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

.doc-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px 24px; color: #ffffff; background: linear-gradient(90deg, var(--red), var(--red-dark)); }

.doc-header .languages { align-self: center; margin: 0; }

.doc-brand { font-family: var(--heading); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #ffffff; }

.doc-brand span { color: var(--yellow); }

.doc { max-width: 780px; margin: 0 auto; padding: 32px 16px 64px; }

.doc h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); letter-spacing: 0.02em; text-transform: none; text-shadow: none; color: var(--ink); }

.doc h2 { margin: 48px 0 8px; padding-top: 24px; border-top: 3px solid var(--red); font-size: 1.8rem; color: var(--red-dark); }

.doc h3 { margin: 32px 0 8px; font-size: 1.25rem; }

.doc h4 { margin: 24px 0 8px; font-family: var(--body); font-size: 1rem; font-weight: 700; }

.doc p, .doc li { overflow-wrap: anywhere; }

.doc a { color: var(--red-dark); }

.doc section + section { margin-top: 72px; }

.doc-title { display: flex; align-items: center; gap: 16px; }

.doc-title img { width: 72px; height: 72px; border-radius: 16px; }

.doc-jump { margin: 24px 0 0; font-weight: 700; }

.date { color: var(--muted); }

.table-wrap { overflow-x: auto; margin: 16px 0; }

.doc table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; }

.doc th, .doc td { padding: 10px; border: 1px solid #f0d5da; text-align: left; vertical-align: top; }

.doc th { color: #ffffff; background: var(--red-dark); }

.doc-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }

.doc-list li { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--card); box-shadow: 0 6px 24px rgba(120, 0, 30, 0.1); font-weight: 700; }

.doc-list img { width: 56px; height: 56px; border-radius: 12px; }