:root {
      --bg: #fffdf8;
      --surface: #f5f1e9;
      --fg: #191816;
      --muted: #6f6c65;
      --border: rgba(25,24,22,.14);
      --accent: #9f2721;
      --accent-deep: #741b17;
      --olive: #596047;
      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
      --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
      --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
      --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body {
      background:
        radial-gradient(60% 80% at 50% 0%, color-mix(in oklch, var(--accent) 6%, var(--bg)) 0%, var(--bg) 60%);
      color: var(--fg);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }
    .wrap { max-width: 880px; margin: 0 auto; padding: 64px 24px 48px; }
    header { text-align: center; }
    .mark {
      display: block;
      width: 56px; height: 56px;
      margin: 0 auto;
    }
    .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .eyebrow {
      margin: 20px auto 0;
      text-align: center;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted);
    }
    h1 {
      margin: 10px 0 8px;
      font-family: var(--font-display);
      font-size: 34px; font-weight: 700;
      letter-spacing: -0.04em; line-height: 1.1;
    }
    header p { margin: 0 auto; max-width: 52ch; color: var(--muted); font-size: 15px; }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 44px;
    }
    .grid.single {
      grid-template-columns: minmax(0, 440px);
      justify-content: center;
    }
    .card[hidden] { display: none; }
    .detect {
      margin: 26px auto 0;
      max-width: 52ch;
      text-align: center;
      font-size: 12px;
      color: var(--muted);
    }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      text-align: center;
    }
    .phone-ico {
      width: 52px; height: 52px;
      margin: 0 auto;
      border-radius: 12px;
      display: grid; place-items: center;
      background: var(--fg-soft);
      color: var(--fg);
    }
    .phone-ico svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
    .card h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700;
      letter-spacing: -0.03em;
    }
    .card .plat { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
    .card ul { margin: 0; padding: 0; list-style: none; }
    .card li { position: relative; padding: 5px 0; font-size: 14px; color: var(--fg); }
    .card li::before {
      content: ''; display: inline-block; vertical-align: middle;
      width: 8px; height: 8px; border-radius: 50%;
      margin-right: 8px;
      background: var(--olive);
    }
    .card .go {
      margin-top: auto;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px;
      border-radius: 8px;
      background: var(--accent);
      color: #fff;
      text-decoration: none;
      font-size: 15px; font-weight: 600;
    }
    .card .go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    .card .go:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

    .foot {
      margin-top: 40px;
      text-align: center;
      font-size: 12px;
      color: var(--muted);
    }
    .foot b { color: var(--fg); font-weight: 600; }

    @media (max-width: 640px) {
      .grid { grid-template-columns: 1fr; }
      .wrap { padding: 40px 20px 32px; }
    }