:root {
      --bg-top: #1B2130;
      --bg-bottom: #0E1117;
      --text: #F1F4FA;
      --muted: #A6AEC0;
      --card: #161B26;
      --card-border: rgba(255, 255, 255, 0.08);
      --accent: #6D7BFF;
      --accent-2: #9A7BFF;
    }

    * { box-sizing: border-box; }

    html { background-color: var(--bg-bottom); }

    html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    body {
      font-family: "Inter", system-ui, "Segoe UI", sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, var(--bg-top) 0%, #141926 45%, var(--bg-bottom) 100%);
      background-attachment: fixed;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .wrap {
      width: 100%;
      max-width: 920px;
      margin: 0 auto;
      padding: 0 20px;
    }

    a { color: inherit; }

    /* ---------- HERO ---------- */
    .hero {
      text-align: center;
      padding: 72px 0 40px;
    }

    .breath {
      width: 168px;
      height: 168px;
      margin: 0 auto 40px;
      border-radius: 50%;
      background: radial-gradient(circle at 42% 38%,
        #ffffff 0%,
        #C9D5FF 26%,
        #7F9BFF 58%,
        #5570F4 100%);
      box-shadow:
        0 0 60px rgba(109, 123, 255, 0.45),
        0 0 120px rgba(122, 130, 255, 0.25),
        inset 0 -8px 24px rgba(40, 60, 160, 0.35);
      animation: breathe 4s ease-in-out infinite;
    }

    @keyframes breathe {
      0%, 100% { transform: scale(0.9); }
      50%      { transform: scale(1.05); }
    }

    @media (prefers-reduced-motion: reduce) {
      .breath { animation: none; }
    }

    h1 {
      font-size: clamp(2.6rem, 9vw, 4.2rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 14px;
      line-height: 1.05;
    }

    .subtitle {
      font-size: clamp(1.05rem, 3.4vw, 1.3rem);
      color: var(--muted);
      max-width: 540px;
      margin: 0 auto 34px;
    }

    .subtitle b {
      color: var(--text);
      font-weight: 600;
    }

    /* ---------- CTA ---------- */
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 17px 38px;
      font-size: 1.1rem;
      font-weight: 600;
      color: #fff;
      text-decoration: none;
      border-radius: 30px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow:
        0 10px 30px rgba(109, 123, 255, 0.45),
        0 2px 8px rgba(90, 100, 240, 0.4);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .cta:hover {
      transform: translateY(-2px);
      box-shadow:
        0 16px 40px rgba(109, 123, 255, 0.55),
        0 3px 10px rgba(90, 100, 240, 0.5);
    }

    .cta:active { transform: translateY(0); }

    .cta svg { flex: none; }

    .cta-note {
      margin-top: 16px;
      font-size: 0.9rem;
      color: var(--muted);
    }

    /* ---------- SECTIONS ---------- */
    section { padding: 34px 0; }

    h2 {
      font-size: clamp(1.5rem, 5vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.01em;
      margin: 0 0 8px;
      text-align: center;
    }

    .section-lead {
      text-align: center;
      color: var(--muted);
      max-width: 520px;
      margin: 0 auto 34px;
    }

    /* ---------- HOW IT WORKS ---------- */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .step {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 22px;
      padding: 28px 24px;
    }

    .step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      font-weight: 700;
      font-size: 1.15rem;
      color: #fff;
      background: linear-gradient(135deg, rgba(109, 123, 255, 0.9), rgba(154, 123, 255, 0.9));
      margin-bottom: 16px;
    }

    .step h3 {
      font-size: 1.12rem;
      font-weight: 600;
      margin: 0 0 6px;
    }

    .step p {
      margin: 0;
      color: var(--muted);
      font-size: 0.97rem;
    }

    /* ---------- INSTALL ---------- */
    .install-card {
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: 22px;
      padding: 12px 30px;
    }

    .install-list {
      list-style: none;
      counter-reset: install;
      margin: 0;
      padding: 0;
    }

    .install-list li {
      counter-increment: install;
      position: relative;
      padding: 20px 0 20px 56px;
      border-bottom: 1px solid var(--card-border);
    }

    .install-list li:last-child { border-bottom: none; }

    .install-list li::before {
      content: counter(install);
      position: absolute;
      left: 0;
      top: 18px;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--accent-2);
      background: rgba(122, 130, 255, 0.12);
      border: 1px solid rgba(122, 130, 255, 0.28);
    }

    .install-list strong {
      display: block;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .install-list span {
      color: var(--muted);
      font-size: 0.95rem;
    }

    /* ---------- NOTE ---------- */
    .note {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(109, 123, 255, 0.07);
      border: 1px solid rgba(109, 123, 255, 0.18);
      border-radius: 20px;
      padding: 20px 24px;
      color: var(--muted);
      font-size: 0.96rem;
      margin-top: 26px;
    }

    .note b { color: var(--text); font-weight: 600; }
    .note .dot {
      flex: none;
      width: 10px;
      height: 10px;
      margin-top: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 12px rgba(109, 123, 255, 0.6);
    }

    /* ---------- FOOTER ---------- */
    footer {
      text-align: center;
      padding: 46px 0 60px;
      color: var(--muted);
      font-size: 0.92rem;
    }

    footer a.gh {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      text-decoration: none;
      padding: 10px 20px;
      border: 1px solid var(--card-border);
      border-radius: 24px;
      transition: border-color 0.18s ease, background 0.18s ease;
    }

    footer a.gh:hover {
      border-color: rgba(122, 130, 255, 0.4);
      background: rgba(122, 130, 255, 0.08);
    }

    footer .made {
      margin-top: 18px;
      font-size: 0.85rem;
      opacity: 0.7;
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 680px) {
      .steps { grid-template-columns: 1fr; }
      .hero { padding: 54px 0 30px; }
      .breath { width: 140px; height: 140px; margin-bottom: 32px; }
      .install-card { padding: 6px 20px; }
      .cta { width: 100%; justify-content: center; }
    }

    /* Language switch and installation help */
    .topbar { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; }
    .wordmark { font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }
    .language-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--card-border); border-radius: 30px; background: var(--card); }
    .language-switch button { min-width: 48px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 24px; background: transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
    .language-switch button[aria-pressed="true"] { color: var(--text); background: #353e67; }
    :focus-visible { outline: 3px solid #B8C0FF; outline-offset: 4px; }
    .hero { padding-top: 42px; }
    .hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
    .hero-links a { padding: 10px 0; text-underline-offset: 4px; }
    .section-lead { max-width: 640px; }
    .install-list span b { color: var(--text); font-weight: 500; }
    .install-list a, .detail-body a, .note a { text-underline-offset: 3px; }
    details { background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; margin: 12px 0; }
    summary { cursor: pointer; padding: 20px 24px; font-weight: 600; }
    summary::marker { color: #ACB4FF; }
    details[open] summary { border-bottom: 1px solid var(--card-border); }
    .detail-body { padding: 4px 24px 16px; color: var(--muted); }
    .detail-body b { color: var(--text); font-weight: 500; }
    .detail-body li { padding: 6px 0; }
    .detail-body ol { padding-left: 24px; }
    .note h3 { color: var(--text); margin: 0 0 8px; }
    .note p { margin: 0; }
    [id] { scroll-margin-top: 20px; }
    @media (max-width: 680px) {
      .hero { padding-top: 36px; }
      .cta { padding: 17px 20px; }
      .detail-body { padding: 4px 20px 12px; }
      summary { padding: 18px 20px; }
      .note { padding: 20px; }
    }