* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --bg: #f4f1ea;
      --surface: #ffffff;
      --surface-soft: #f4efe6;
      --surface-muted: #fbf8f2;
      --surface-tint: #f2ede3;
      --line: #e7dfd2;
      --line-strong: #cdbfa9;
      --text: #171717;
      --muted: #5f5a52;
      --primary: #171717;
      --accent: #175cd3;
      --accent-soft: #d7e6ff;
      --radius: 22px;
      --shadow: 0 18px 40px rgba(23, 23, 23, 0.06);
      --max: 1180px;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 84% 6%, rgba(23, 92, 211, 0.08), transparent 18%),
        linear-gradient(180deg, #f7f4ee 0%, #f3eee6 52%, #efe7db 100%);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      background-attachment: fixed;
    }
    a { color: inherit; text-decoration: none; }
    .container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
    body { overflow-x: hidden; }
    .nav { position: sticky; top: 0; z-index: 30; background: rgba(250,247,241,0.9); backdrop-filter: blur(14px) saturate(120%); border-bottom: 1px solid rgba(205,191,169,0.55); box-shadow: 0 10px 24px rgba(23,23,23,0.05); }
    .nav-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .brand { display: flex; align-items: center; gap: 15px; color: var(--text); }
    .brand-mark { position: relative; width: 48px; height: 48px; border-radius: 17px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; background: linear-gradient(155deg, #020617 0%, #0f172a 34%, #1d4ed8 74%, #93c5fd 118%); color: white; box-shadow: 0 16px 34px rgba(15,23,42,0.2), 0 10px 24px rgba(37,99,235,0.18); overflow: hidden; isolation: isolate; flex: 0 0 auto; }
    .brand-mark::before { content: ""; position: absolute; inset: 1px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.22); }
    .brand-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 42%); mix-blend-mode: screen; }
    .brand-mark-grid { position: absolute; top: 9px; left: 9px; display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; z-index: 1; }
    .brand-mark-grid span { width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,0.95); box-shadow: 11px 11px 0 -2px rgba(255,255,255,0.28); }
    .brand-mark-label { position: relative; z-index: 1; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1; text-shadow: 0 1px 8px rgba(15,23,42,0.28); }
    .brand-wordmark { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
    .brand-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.045em; }
    .brand-tag { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #1d4ed8; opacity: 0.72; }
    .nav-links { display: flex; list-style: none; gap: 8px; color: var(--muted); font-size: 0.85rem; align-items: center; }
    .nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; white-space: nowrap; }
    .nav-links a:hover { background: rgba(255,255,255,0.94); border-color: rgba(205,191,169,0.9); color: var(--text); box-shadow: 0 8px 18px rgba(23,23,23,0.05); }
    .nav-pill-link { gap: 8px; }
    .nav-pill-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 999px; background: rgba(47,95,208,0.12); border: 1px solid rgba(47,95,208,0.18); color: var(--accent-alt); font-size: 0.74rem; font-weight: 700; line-height: 1; }
    .lang-switcher { position: relative; display: block; width: 100%; min-width: 0; }
    .lang-switcher summary { list-style: none; cursor: pointer; width: auto; min-width: 120px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--muted); text-align: center; }
    .lang-switcher summary::-webkit-details-marker { display: none; }
    .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
    .lang-menu a { display: block; padding: 8px 10px; border-radius: 10px; }
    .lang-menu a:hover { background: var(--surface-muted); }
    .hero { position: relative; padding: 56px 0 62px; scroll-margin-top: 120px; }
    .hero::before { content: ""; position: absolute; inset: 12px auto auto 54%; width: min(620px, 82vw); height: 260px; transform: translateX(-28%); background: radial-gradient(circle, rgba(23,92,211,0.1) 0%, rgba(23,92,211,0.04) 36%, transparent 72%); pointer-events: none; filter: blur(10px); }
    .hero-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(340px, 450px); gap: 30px; align-items: stretch; }
    .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid rgba(205,191,169,0.75); color: var(--muted); font-size: 0.77rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; box-shadow: none; }
    .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
    h1 { font-size: clamp(2.6rem, 4.9vw, 4.35rem); line-height: 0.93; letter-spacing: -0.065em; margin-bottom: 18px; max-width: 10.8ch; text-wrap: balance; }
    .hero-copy { color: var(--muted); font-size: 1.03rem; max-width: 54ch; margin-bottom: 24px; }
    .hero-points { display: flex; flex-wrap: wrap; gap: 10px; }
    .hero-point { padding: 0; border-radius: 0; background: transparent; border: 0; color: var(--muted); font-size: 0.89rem; box-shadow: none; }
    .generator-card, .preview-card, .info-card, .faq-card { background: rgba(255,255,255,0.94); border: 1px solid rgba(205,191,169,0.75); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
    .generator-card { position: relative; overflow: hidden; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,247,241,0.92)); box-shadow: 0 24px 56px rgba(23,23,23,0.06), 0 10px 24px rgba(23,23,23,0.04); }
    .generator-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,92,211,0.04), transparent 22%); pointer-events: none; }
    .preview-card { position: relative; display: flex; flex-direction: column; height: 100%; transform: none; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,242,234,0.94)); box-shadow: 0 22px 48px rgba(23,23,23,0.05), 0 10px 24px rgba(23,23,23,0.03); }
    .generator-card, .preview-card { padding: 28px; }
    .preview-card { margin-top: 0; }
    .generator-card h2, .preview-card h2, .section h2 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 12px; }
    .sub { color: var(--muted); margin-bottom: 18px; }
    .type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
    .type-btn { border: 1px solid var(--line); background: rgba(248,250,252,0.92); border-radius: 16px; padding: 12px 10px; font: inherit; font-weight: 600; cursor: pointer; transition: 0.2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); }
    .type-btn.active { background: var(--accent-soft); border-color: #93c5fd; color: var(--accent); }
    .type-btn-accent { background:#dbeafe; border-color:#93c5fd; color:#2563eb; }
    .mode-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
    .mode-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 999px; background: rgba(255,255,255,0.84); border: 1px solid rgba(191,219,254,0.8); color: var(--muted); font-size: 0.84rem; box-shadow: 0 10px 22px rgba(37,99,235,0.05); }
    .mode-chip strong { color: var(--text); }
    .branch-presets { margin: 0 0 18px; padding: 16px; border-radius: 18px; border: 1px solid rgba(205,191,169,0.78); background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,247,241,0.92)); }
    .branch-presets strong { display: block; margin-bottom: 6px; color: var(--text); }
    .branch-presets p { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
    .branch-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .branch-preset-btn { border: 1px solid var(--line); background: rgba(255,255,255,0.9); border-radius: 16px; padding: 12px; font: inherit; font-weight: 700; text-align: left; cursor: pointer; box-shadow: 0 10px 20px rgba(37,99,235,0.04); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
    .branch-preset-btn span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; font-weight: 500; }
    .branch-preset-btn:hover { transform: translateY(-1px); border-color: #93c5fd; box-shadow: 0 14px 24px rgba(37,99,235,0.08); }
    .trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
    .trust-card { padding: 15px 16px; border-radius: 16px; border: 1px solid rgba(205,191,169,0.78); background: rgba(255,255,255,0.78); box-shadow: none; }
    .trust-card strong { display: block; font-size: 0.92rem; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--text); }
    .trust-card span { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
    .fields, .advanced-grid { display: grid; gap: 12px; }
    .field { display: grid; gap: 8px; }
    .advanced-grid > .field { align-self: start; }
    .field label { font-size: 0.92rem; font-weight: 600; }
    .field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px; font: inherit; background: white; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
    .field input:focus, .field textarea:focus, .field select:focus, .type-btn:focus, .btn:focus { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
    .field textarea { min-height: 110px; resize: vertical; }
    .field small { color: var(--muted); font-size: 0.82rem; }
    .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .field-span-2 { grid-column: span 2; }
    .advanced-toggle { margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-muted); }
    .advanced-toggle summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--text); }
    .advanced-toggle summary::-webkit-details-marker { display: none; }
    .advanced-toggle summary::after { content: "+"; float: right; color: var(--muted); font-size: 1.1rem; }
    .advanced-toggle[open] summary::after { content: "−"; }
    .advanced { margin: 0; padding: 0 18px 18px; border-top: 1px solid var(--line); }
    .advanced-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 12px; }
    .section-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .section-label span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
    .section-label small { color: var(--muted); font-size: 0.82rem; }
    .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
    .btn-primary { background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 72%, #60a5fa 100%); color: white; box-shadow: 0 16px 32px rgba(37,99,235,0.24); }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 20px 36px rgba(37,99,235,0.28); }
    .btn-secondary { background: rgba(255,255,255,0.86); border-color: rgba(191,219,254,0.8); color: var(--text); box-shadow: 0 12px 24px rgba(37,99,235,0.06); }
    .btn-secondary:hover { transform: translateY(-1px); background: white; border-color: rgba(147,197,253,0.9); }
    .btn:disabled { cursor: not-allowed; opacity: 0.45; }
    .cta-note { margin-top: 12px; color: var(--muted); font-size: 0.88rem; }
    .helper-card, .status-card, .export-card, .batch-list { margin-top: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(191,219,254,0.9); background: rgba(248,250,252,0.92); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; }
    .helper-card strong, .status-card strong, .export-card strong { color: var(--text); }
    .helper-card p, .status-card p, .export-card p { color: var(--muted); font-size: 0.92rem; }
    .helper-card { background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%); }
    .helper-list { display: grid; gap: 8px; margin-top: 12px; }
    .helper-list span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.88rem; }
    .helper-list b { color: var(--text); }
    .status-card.ok { background: #ecfdf5; border-color: #bbf7d0; }
    .status-card.warn { background: #fff7ed; border-color: #fed7aa; }
    .status-card.info { background: #eff6ff; border-color: #bfdbfe; }
    .status-line { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
    .preview-card { text-align: center; }
    #qrPreview { width: 260px; height: 260px; margin: 18px auto 20px; display: grid; place-items: center; background: #fff; border-radius: 24px; border: 1px solid var(--line); }
    #qrcode img, #qrcode canvas, #qrcode svg { max-width: 220px; max-height: 220px; }
    .qr-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
    .qr-logo { position: absolute; min-width: 52px; height: 52px; padding: 0 12px; border-radius: 16px; background: white; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: -0.05em; color: var(--text); box-shadow: 0 8px 20px rgba(15,23,42,0.08); }
    .preview-meta { padding: 14px; border-radius: 18px; background: #f8fafc; color: var(--muted); font-size: 0.92rem; word-break: break-word; text-align: left; }
    .preview-meta strong { display: block; color: var(--text); margin-bottom: 6px; }
    .preview-meta code { display: block; font-family: inherit; white-space: pre-wrap; word-break: break-word; }
    .preview-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; justify-content: center; }
    .stat-pill { padding: 10px 12px; border-radius: 16px; background: var(--surface-tint); border: 1px solid #dbeafe; font-size: 0.84rem; color: var(--muted); }
    .stat-pill strong { display: block; color: var(--text); font-size: 0.94rem; }
    .export-groups { display: grid; gap: 12px; margin-top: 18px; text-align: left; }
    .export-card { background: white; }
    .export-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
    .export-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
    .export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .export-checklist { display: grid; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 0.88rem; }
    .export-checklist span { display: inline-flex; align-items: center; gap: 8px; }
    .export-checklist strong { color: var(--text); }
    .export-progress { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: white; border: 1px dashed #cbd5e1; color: var(--muted); font-size: 0.88rem; }
    .export-progress strong { display: block; color: var(--text); margin-bottom: 4px; }
    .preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }
    .preset-btn { border:1px solid var(--line); background:#f8fafc; border-radius:16px; padding:12px 10px; font:inherit; font-weight:600; cursor:pointer; text-align:left; }
    .preset-btn.active { background:var(--accent-soft); border-color:#93c5fd; color:var(--accent); }
    .preset-btn small { display:block; margin-top:4px; color:var(--muted); font-weight:500; }
    .quality-card { margin-top:16px; padding:16px; border-radius:18px; border:1px solid var(--line); background:#fff; }
    .quality-card h3 { margin:0 0 6px; font-size:1rem; }
    .quality-card p { margin:0 0 12px; color:var(--muted); font-size:0.9rem; }
    .quality-list { display:grid; gap:8px; }
    .quality-row { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:14px; background:#f8fafc; border:1px solid var(--line); font-size:0.88rem; }
    .quality-row strong { color:var(--text); }
    .quality-state { font-weight:700; }
    .quality-good { color:#15803d; }
    .quality-warn { color:#b45309; }
    .quality-bad { color:#b91c1c; }
    .quality-tip { margin-top:12px; color:var(--muted); font-size:0.84rem; }
    .warning-box { display:none; margin-top:12px; padding:12px 14px; border-radius:16px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:0.88rem; }
    .warning-box strong { display:block; margin-bottom:6px; color:#7c2d12; }
    .print-card { margin-top:12px; padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%); text-align:left; }
    .print-card strong { display:block; margin-bottom:6px; }
    .print-card p { color:var(--muted); font-size:0.88rem; margin-bottom:12px; }
    .stats-promo-card { margin-top: 16px; border-color: rgba(47,95,208,0.24); background: linear-gradient(180deg, rgba(235,242,255,0.96) 0%, rgba(248,251,255,0.98) 100%); box-shadow: 0 18px 36px rgba(47,95,208,0.08); }
    .stats-promo-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(47,95,208,0.12); color: var(--accent-alt); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
    .stats-promo-card strong { font-size: 1rem; margin-bottom: 8px; color: var(--accent-alt); }
    .stats-promo-card input[readonly] { background: rgba(255,255,255,0.96); border-color: rgba(47,95,208,0.18); }
    .stats-promo-card .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.45; }
    .print-klartext { padding:12px; border-radius:14px; background:white; border:1px dashed #cbd5e1; color:var(--text); font-size:0.86rem; word-break:break-word; }
    .batch-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
    .batch-step { padding: 12px; border-radius: 16px; background: var(--surface-muted); border: 1px solid var(--line); text-align: left; }
    .batch-step b { display: block; margin-bottom: 4px; }
    .batch-step span { color: var(--muted); font-size: 0.84rem; }
    .batch-presets { margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%); }
    .batch-presets strong { display: block; margin-bottom: 6px; }
    .batch-presets p { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
    .preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .batch-template-btn { width: 100%; text-align: left; border: 1px solid var(--line); background: white; border-radius: 16px; padding: 12px; font: inherit; cursor: pointer; transition: 0.18s ease; }
    .batch-template-btn:hover { border-color: #93c5fd; background: #f8fbff; }
    .batch-template-btn b { display: block; margin-bottom: 4px; color: var(--text); }
    .batch-template-btn span { display: block; color: var(--muted); font-size: 0.84rem; }
    .batch-preset-note { margin-top: 10px; color: var(--muted); font-size: 0.82rem; }
    .batch-list { display: none; text-align: left; max-height: 280px; overflow: auto; }
    .batch-item { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
    .batch-item:last-child { border-bottom: 0; padding-bottom: 0; }
    .batch-item span { color: var(--muted); font-size: 0.88rem; word-break: break-word; }
    .batch-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .batch-chip { padding: 8px 12px; border-radius: 999px; background: white; border: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; }
    .batch-inline-qr { margin-top: 8px; padding: 12px; width: fit-content; border-radius: 16px; background: white; border: 1px solid var(--line); }
    .batch-export-inline { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 16px; }
    .section { position: relative; padding: 82px 0; scroll-margin-top: 120px; content-visibility: auto; contain-intrinsic-size: 1px 900px; }
    .section::before { content: ""; position: absolute; inset: 28px 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(191,219,254,0.9), transparent); }
    .section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
    .section-head .kicker { display: inline-block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
    .section-head h2 { font-size: clamp(2rem, 3vw, 2.65rem); letter-spacing: -0.05em; margin-bottom: 12px; text-wrap: balance; }
    .section-head p { color: var(--muted); font-size: 1rem; max-width: 60ch; margin: 0 auto; }
    .info-grid, .faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .info-card, .faq-card { position: relative; padding: 24px; overflow: hidden; }
    .info-card { display: flex; flex-direction: column; height: 100%; }
    .info-card::before, .faq-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px; background: linear-gradient(90deg, #175cd3, rgba(23,92,211,0.12)); pointer-events: none; }
    .info-card h3, .faq-card h3 { font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 10px; }
    .info-card p, .faq-card p { color: var(--muted); }
    .info-card p:last-of-type { margin-top: auto; padding-top: 14px; }
    .info-card p a { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; padding: 0; border-radius: 0; background: transparent; border: 0; color: #175cd3; font-weight: 800; text-decoration: none; }
    .info-card p a::after { content: '›'; font-size: 1.1rem; line-height: 1; }
    .info-card p a:hover { background: #dbeafe; }
    @media (hover: hover) {
      .generator-card:hover, .preview-card:hover, .info-card:hover, .faq-card:hover, .helper-card:hover, .export-card:hover, .batch-list:hover {
        transform: translateY(-3px);
        border-color: rgba(23, 92, 211, 0.24);
        box-shadow: 0 22px 48px rgba(23, 23, 23, 0.08);
        background: rgba(255,255,255,0.98);
      }
    }
    .footer { position: relative; padding: 36px 0 48px; color: var(--muted); text-align: center; font-size: 0.92rem; }
    .footer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1120px, calc(100% - 32px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(191,219,254,0.95), transparent); }
    .footer .container { padding-top: 12px; }
    @media (max-width: 980px) {
      .hero-wrap, .info-grid, .faq-grid, .trust-strip, .branch-preset-grid { grid-template-columns: 1fr; }
      .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .batch-steps { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .nav { position: relative; top: auto; }
      .nav-inner { min-height: auto; padding: 14px 0; align-items: flex-start; flex-direction: column; }
      .nav-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
      .nav-links li { display: contents; }
      .nav-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: white; text-align: center; }
      .row-2, .row-3, .type-grid, .preset-grid { grid-template-columns: 1fr; }
      .hero { padding: 32px 0 42px; scroll-margin-top: 180px; }
      .section { scroll-margin-top: 180px; }
      h1 { max-width: 100%; }
      #qrcode { width: 100%; }
      #qrcode img, #qrcode canvas, #qrcode svg { max-width: min(220px, 100%); height: auto; }
      .generator-card, .preview-card, .info-card, .faq-card { border-radius: 20px; }
      .generator-card, .preview-card { padding: 22px; }
      .actions { flex-direction: column; }
      .actions .btn { width: 100%; }
      .hero-point, .mode-chip, .batch-chip, .export-badge, .pill { width: 100%; justify-content: center; text-align: center; }
    }

    @media (max-width: 420px) {
      .nav-links { grid-template-columns: 1fr; }
    }

    /* Editorial homepage override */
    :root {
      --bg: #f6f7fb;
      --surface: rgba(255, 255, 255, 0.9);
      --surface-soft: #eef2ff;
      --surface-muted: #f8faff;
      --surface-tint: #eef3ff;
      --line: rgba(99, 112, 139, 0.18);
      --line-strong: rgba(49, 78, 150, 0.22);
      --text: #101828;
      --muted: #5b6475;
      --primary: #101828;
      --accent: #2f5fd0;
      --accent-soft: rgba(47, 95, 208, 0.1);
      --accent-alt: #17337a;
      --shadow: 0 28px 70px rgba(17, 24, 39, 0.08);
      --max: 1240px;
      --radius: 28px;
    }

    body {
      background: #f7f5f0;
      color: var(--text);
    }

    .nav {
      background: #ffffff;
      border-bottom: 1px solid #e5e1d8;
      box-shadow: none;
      backdrop-filter: none;
    }

    .brand-tag { color: var(--accent); opacity: 0.78; }
    .nav-links a:hover {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(99, 112, 139, 0.16);
      color: var(--text);
      box-shadow: 0 10px 22px rgba(17, 24, 39, 0.06);
    }

    .lang-switcher summary,
    .lang-menu {
      background: rgba(255, 255, 255, 0.96);
    }

    .hero {
      padding: 92px 0 44px;
      overflow: clip;
    }

    .hero::before {
      inset: 24px auto auto 56%;
      width: min(720px, 90vw);
      height: 420px;
      transform: translateX(-12%);
      background: radial-gradient(circle, rgba(47, 95, 208, 0.1) 0%, rgba(47, 95, 208, 0.04) 34%, transparent 74%);
      filter: blur(14px);
    }

    .hero-wrap {
      grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
      gap: 48px;
      align-items: center;
      min-height: 72vh;
    }

    .brand-mark {
      align-items: center;
      justify-content: center;
      padding: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .brand-mark::before,
    .brand-mark::after {
      display: none;
    }

    .brand-mark img {
      display: block;
      width: 48px;
      height: 48px;
      border-radius: 14px;
    }

    .brand-mark-label {
      display: none;
    }

    .hero-text { max-width: 620px; }

    .pill {
      background: rgba(255, 255, 255, 0.82);
      border-color: rgba(99, 112, 139, 0.14);
      color: var(--muted);
      letter-spacing: 0.12em;
      box-shadow: 0 12px 22px rgba(17, 24, 39, 0.04);
    }

    .pill-dot {
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(47, 95, 208, 0.08);
    }

    h1 {
      font-size: clamp(3.25rem, 7vw, 6.4rem);
      line-height: 0.9;
      letter-spacing: -0.075em;
      margin-bottom: 22px;
      max-width: 8.3ch;
    }

    .hero-copy {
      font-size: 1.06rem;
      max-width: 46ch;
      margin-bottom: 0;
      color: var(--muted);
    }

    .hero-copy strong { color: var(--accent-alt); font-weight: 700; }
    .hero-points { gap: 12px; margin-top: 18px; margin-bottom: 0; }
    .hero-point { font-size: 0.93rem; color: var(--muted); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .hero-note { margin-top: 18px; max-width: 34ch; font-size: 0.92rem; color: var(--muted); }

    .cinema-visual {
      position: relative;
      min-height: 560px;
      display: grid;
      place-items: center;
    }

    .cinema-visual::before {
      content: "";
      position: absolute;
      inset: 14% 12%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(47,95,208,0.1) 0%, rgba(47,95,208,0.03) 42%, transparent 74%);
      filter: blur(16px);
    }

    .cinema-frame {
      position: relative;
      width: min(100%, 470px);
      aspect-ratio: 1 / 1.08;
      border-radius: 38px;
      padding: 32px;
      border: 1px solid rgba(99, 112, 139, 0.14);
      background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(243,246,255,0.9));
      box-shadow: 0 38px 90px rgba(17, 24, 39, 0.1);
      overflow: hidden;
    }

    .cinema-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.75), transparent 24%, transparent 74%, rgba(47,95,208,0.08));
      pointer-events: none;
    }

    .cinema-caption {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 24px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #6b7280;
    }

    .cinema-caption b {
      color: var(--accent-alt);
      font-size: 0.88rem;
      letter-spacing: 0.08em;
    }

    .cinema-code {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 28px;
      border: 1px solid rgba(99,112,139,0.12);
      background:
        radial-gradient(circle at 50% 12%, rgba(47,95,208,0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 10px;
      padding: 24px;
      align-content: center;
    }

    .cinema-code span {
      display: block;
      border-radius: 9px;
      background: rgba(22, 38, 74, 0.1);
      opacity: 0.28;
      transform: scale(0.76);
      animation: qrPulse 7s ease-in-out infinite;
    }

    .cinema-code span.active {
      background: linear-gradient(180deg, #17337a 0%, #3b68dd 100%);
      opacity: 1;
      box-shadow: 0 8px 18px rgba(47,95,208,0.18);
    }

    .cinema-code span:nth-child(3n) { animation-delay: 0.4s; }
    .cinema-code span:nth-child(4n) { animation-delay: 1s; }
    .cinema-code span:nth-child(5n) { animation-delay: 1.6s; }

    .cinema-core {
      position: absolute;
      inset: 50%;
      width: 104px;
      height: 104px;
      transform: translate(-50%, -50%);
      border-radius: 28px;
      border: 1px solid rgba(47,95,208,0.16);
      background: radial-gradient(circle at 30% 30%, #ffffff 0%, #dae6ff 44%, #edf2ff 100%);
      box-shadow: 0 20px 34px rgba(47,95,208,0.12);
    }

    .cinema-core::before,
    .cinema-core::after {
      content: "";
      position: absolute;
    }

    .cinema-core::before {
      inset: 18px;
      border-radius: 18px;
      border: 1px solid rgba(47,95,208,0.14);
    }

    .cinema-core::after {
      inset: 34px;
      border-radius: 12px;
      background: linear-gradient(180deg, #17337a 0%, #315fcf 100%);
    }

    @keyframes qrPulse {
      0%, 100% { opacity: 0.22; transform: scale(0.76); }
      50% { opacity: 0.9; transform: scale(1); }
    }

    .studio-section {
      padding-top: 44px;
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }

    .studio-shell { display: grid; gap: 0; }

    .studio-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
      gap: 24px;
      align-items: start;
    }

    .generator-card,
    .preview-card,
    .info-card,
    .faq-card {
      background: #ffffff;
      border-color: #e5e1d8;
      box-shadow: none;
    }

    .generator-card {
      background: #ffffff;
      box-shadow: none;
    }

    .generator-card::before {
      display: none;
    }

    .preview-card {
      background: #ffffff;
      box-shadow: none;
      text-align: left;
    }

    .preview-card h2,
    .generator-card h2,
    .section h2,
    .section h3 {
      color: var(--text);
    }

    .type-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px;
    }

    .type-btn {
      flex: 0 0 auto;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.84);
      color: var(--muted);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
      width: auto;
      min-width: 112px;
    }

    .type-btn.active {
      background: var(--accent-soft);
      border-color: rgba(47,95,208,0.22);
      color: var(--accent-alt);
    }

    .type-btn-accent {
      background: rgba(47,95,208,0.08);
      border-color: rgba(47,95,208,0.18);
      color: var(--accent-alt);
    }

    .field input,
    .field textarea,
    .field select,
    .lang-switcher summary {
      background: rgba(255,255,255,0.94);
      color: var(--text);
      border-color: rgba(99,112,139,0.14);
    }

    .field small,
    .sub,
    .cta-note,
    .preview-meta,
    .preview-card p,
    .section-head p,
    .info-card p,
    .faq-card p,
    .generator-card p,
    .generator-card small,
    .batch-step span,
    .export-badge,
    .stat-pill,
    .hero-point {
      color: var(--muted);
    }

    .btn-primary {
      background: linear-gradient(135deg, #183a8f 0%, #2f5fd0 100%);
      color: #ffffff;
      box-shadow: 0 16px 28px rgba(47,95,208,0.2);
    }

    .btn-secondary {
      background: rgba(255,255,255,0.82);
      border-color: rgba(99,112,139,0.16);
      color: var(--text);
      box-shadow: none;
    }

    .helper-card,
    .status-card,
    .export-card,
    .batch-list,
    .quality-card,
    .print-card,
    .preview-meta,
    .preview-stats .stat-pill,
    .batch-step,
    .branch-presets,
    .mode-chip,
    .trust-card {
      background: rgba(248, 250, 255, 0.92);
      border-color: rgba(99,112,139,0.14);
      color: var(--muted);
    }

    #qrPreview {
      background: rgba(255,255,255,0.98);
      border-color: rgba(99,112,139,0.14);
      box-shadow: inset 0 0 0 1px rgba(99,112,139,0.08);
    }

    .section {
      padding: 112px 0;
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }

    .section::before {
      background: linear-gradient(90deg, transparent, rgba(47,95,208,0.18), transparent);
    }

    .section-head {
      text-align: left;
      max-width: 700px;
      margin: 0 0 46px;
    }

    .section-head .kicker {
      color: var(--accent);
      letter-spacing: 0.18em;
    }

    .cinema-stream {
      display: grid;
      gap: 56px;
    }

    .social-proof {
      padding: 72px 0 56px;
      scroll-margin-top: 120px;
    }

    .social-proof__inner {
      width: min(var(--max), calc(100% - 32px));
      margin: 0 auto;
      padding: 34px;
      border-radius: 30px;
      border: 1px solid rgba(99,112,139,0.12);
      background: rgba(255,255,255,0.82);
      box-shadow: 0 20px 42px rgba(17,24,39,0.06);
    }

    .social-proof__eyebrow {
      margin: 0 0 12px;
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .social-proof h2 {
      margin-bottom: 12px;
      font-size: clamp(2rem, 3vw, 2.65rem);
      letter-spacing: -0.05em;
      text-wrap: balance;
    }

    .social-proof__intro {
      max-width: 62ch;
      margin: 0 0 28px;
      color: var(--muted);
      font-size: 1rem;
    }

    .social-proof__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .social-proof__item {
      padding: 22px 20px;
      border-radius: 22px;
      border: 1px solid rgba(99,112,139,0.1);
      background: rgba(248,250,255,0.92);
    }

    .social-proof__item--trustpilot {
      text-decoration: none;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .social-proof__item--trustpilot:hover {
      transform: translateY(-1px);
      border-color: rgba(0, 182, 122, 0.28);
      background: rgba(240, 253, 248, 0.96);
      box-shadow: 0 16px 30px rgba(0, 182, 122, 0.08);
    }

    .social-proof__item strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text);
      font-size: 1rem;
      letter-spacing: -0.02em;
    }

    .social-proof__item span {
      display: block;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.55;
    }

    .social-proof__stars {
      margin-bottom: 8px;
      color: #00b67a !important;
      font-size: 1rem !important;
      letter-spacing: 0.1em;
      font-weight: 800;
      line-height: 1;
    }

    .business-cta {
      padding: 0 0 72px;
      scroll-margin-top: 120px;
    }

    .business-cta__inner {
      width: min(var(--max), calc(100% - 32px));
      margin: 0 auto;
      padding: 32px 34px;
      border-radius: 30px;
      border: 1px solid rgba(47,95,208,0.14);
      background: linear-gradient(135deg, rgba(248,250,255,0.98) 0%, rgba(239,244,255,0.96) 100%);
      box-shadow: 0 18px 40px rgba(17,24,39,0.05);
    }

    .business-cta__eyebrow {
      margin: 0 0 12px;
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .business-cta h2 {
      margin-bottom: 12px;
      font-size: clamp(1.9rem, 3vw, 2.5rem);
      letter-spacing: -0.05em;
      text-wrap: balance;
    }

    .business-cta__text {
      max-width: 64ch;
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 1rem;
    }

    .business-cta__note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .usecases {
      padding-top: 80px;
      padding-bottom: 56px;
    }

    .usecases .section-head {
      margin-bottom: 26px;
      max-width: 920px;
    }

    .usecases .section-head h2 {
      margin-bottom: 8px;
      text-wrap: balance;
      word-break: keep-all;
      overflow-wrap: normal;
      hyphens: none;
    }

    .usecases .section-head p {
      margin-left: 0;
      padding-left: 0;
    }

    .usecases-stream {
      display: grid;
      gap: 0;
    }

    .usecases-row {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
      gap: 40px;
      align-items: center;
      padding: 28px 0;
      border-top: 1px solid rgba(99,112,139,0.1);
    }

    .usecases-row:first-child {
      border-top: 0;
      padding-top: 10px;
    }

    .usecases-row.reverse {
      grid-template-columns: minmax(320px, 0.98fr) minmax(0, 1.02fr);
    }

    .usecases-copy h3 {
      font-size: clamp(2rem, 3.6vw, 2.9rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
      margin-bottom: 10px;
      max-width: 20ch;
      word-break: keep-all;
      overflow-wrap: normal;
      hyphens: none;
    }

    .usecases-copy {
      min-height: 248px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .usecases-copy p {
      max-width: 56ch;
      color: var(--muted);
      font-size: 1rem;
    }

    .usecases-card {
      min-height: 248px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-radius: 24px;
      border: 1px solid rgba(99,112,139,0.12);
      background: rgba(255,255,255,0.78);
      box-shadow: 0 20px 42px rgba(17,24,39,0.06);
    }

    .usecases-card-stack {
      display: grid;
      gap: 16px;
    }

    .usecases-card-stack .usecases-card {
      min-height: 0;
    }

    .usecases-card strong {
      display: block;
      margin-bottom: 12px;
      color: var(--accent-alt);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.78rem;
    }

    .usecases-links {
      display: grid;
      gap: 12px;
    }

    .usecases-links a {
      display: block;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(99,112,139,0.1);
      background: rgba(247,249,255,0.9);
      color: var(--accent-alt);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .usecases-links a span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .usecases-links a:hover {
      transform: translateY(-2px);
      border-color: rgba(47,95,208,0.2);
      background: rgba(238,243,255,0.96);
    }

    .insights,
    .site-overview {
      padding-top: 72px;
      padding-bottom: 56px;
    }

    .insights .section-head,
    .site-overview .section-head {
      margin-bottom: 24px;
      max-width: 920px;
    }

    .insights .section-head h2,
    .site-overview .section-head h2,
    .insights .cinema-copy h3,
    .site-overview h3 {
      text-wrap: balance;
      word-break: keep-all;
      overflow-wrap: normal;
      hyphens: none;
    }

    .insights .section-head p,
    .site-overview .section-head p {
      margin-left: 0;
      padding-left: 0;
    }

    .insights .cinema-stream {
      display: grid;
      gap: 0;
    }

    .insights .cinema-row,
    .insights .cinema-row.reverse {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 3rem;
      align-items: center;
      padding: 28px 0;
      border-top: 1px solid rgba(99,112,139,0.1);
    }

    .insights .cinema-row:first-child {
      border-top: 0;
      padding-top: 8px;
    }

    .insights .cinema-copy h3 {
      max-width: 18ch;
      margin-bottom: 10px;
    }

    .insights .cinema-copy {
      min-height: 248px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .insights .cinema-aside {
      min-height: 248px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .site-overview {
      padding-top: 0;
      padding-bottom: 0;
    }

    .site-overview::before {
      inset: 0 0 auto;
      background: linear-gradient(90deg, transparent, rgba(99,112,139,0.22), transparent);
    }

    .site-overview .container {
      padding-top: 18px;
      padding-bottom: 8px;
    }

    .site-overview-toggle {
      border: 0;
    }

    .site-overview-toggle summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      list-style: none;
      color: var(--muted);
      opacity: 0.58;
      font-size: 0.8rem;
      line-height: 1.4;
      user-select: none;
    }

    .site-overview-toggle summary::-webkit-details-marker {
      display: none;
    }

    .site-overview-toggle summary::after {
      content: "▾";
      font-size: 0.72rem;
      opacity: 0.75;
      transition: transform 0.18s ease;
    }

    .site-overview-toggle[open] summary::after {
      transform: rotate(180deg);
    }

    .site-overview-toggle[open] .site-overview-map {
      margin-top: 14px;
    }

    .site-overview-map {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px 22px;
    }

    .site-overview-group h3 {
      margin-bottom: 10px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0.4;
    }

    .site-overview-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 5px;
    }

    .site-overview-links li {
      margin: 0;
      padding: 0;
    }

    .site-overview-links a {
      display: inline-block;
      font-size: 0.8rem;
      line-height: 1.45;
      color: var(--muted);
      opacity: 0.5;
      text-decoration: none;
      transition: opacity 0.18s ease, color 0.18s ease;
    }

    .site-overview-links a:hover {
      opacity: 0.82;
      color: var(--text);
    }

    .cinema-row {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
      gap: 30px;
      align-items: start;
    }

    .cinema-row.reverse {
      grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    }

    .cinema-copy { padding: 0; }

    .cinema-copy h3 {
      font-size: clamp(2rem, 4vw, 3.1rem);
      line-height: 0.95;
      letter-spacing: -0.06em;
      margin-bottom: 14px;
      max-width: 11ch;
    }

    .cinema-copy p {
      max-width: 54ch;
      font-size: 1rem;
      color: var(--muted);
    }

    .cinema-copy p + p { margin-top: 14px; }

    .cinema-aside,
    .cinema-quote,
    .faq-card {
      padding: 24px;
      border-radius: 24px;
      border: 1px solid rgba(99,112,139,0.12);
      background: rgba(255,255,255,0.78);
      box-shadow: 0 20px 42px rgba(17,24,39,0.06);
    }

    .cinema-aside strong,
    .cinema-quote strong {
      display: block;
      margin-bottom: 10px;
      color: var(--accent-alt);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.78rem;
    }

    .link-stack {
      display: grid;
      gap: 12px;
    }

    .link-stack a {
      display: block;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(99,112,139,0.1);
      background: rgba(247,249,255,0.9);
      color: var(--accent-alt);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .link-stack a span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .link-stack a:hover {
      transform: translateY(-2px);
      border-color: rgba(47,95,208,0.2);
      background: rgba(238,243,255,0.96);
    }

    .faq-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .footer {
      padding: 34px 0 48px;
      border-top: 1px solid rgba(99,112,139,0.1);
      color: var(--muted);
      background: rgba(248, 250, 255, 0.84);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr 1fr 0.8fr;
      gap: 28px;
      align-items: start;
      padding-top: 12px;
    }

    .footer-column {
      display: grid;
      gap: 12px;
    }

    .footer-column--languages {
      justify-items: end;
    }

    .footer-heading {
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text);
      font-weight: 700;
    }

    .footer-copy,
    .footer-meta {
      margin: 0;
      line-height: 1.7;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .footer-links a,
    .footer-meta a {
      color: var(--text);
      text-decoration: none;
    }

    .footer-links a:hover,
    .footer-meta a:hover {
      color: var(--accent);
    }

    .footer-links--languages {
      grid-template-columns: repeat(4, minmax(0, max-content));
      justify-content: end;
      gap: 10px 14px;
    }

    .reveal {
      opacity: 1;
      transform: none;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 1024px) {
      .studio-grid,
      .cinema-row,
      .cinema-row.reverse {
        grid-template-columns: 1fr;
      }

      .usecases-row,
      .usecases-row.reverse {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .insights .cinema-row,
      .insights .cinema-row.reverse {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .social-proof__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-column--brand {
        grid-column: 1 / -1;
      }

      .footer-column--languages {
        justify-items: start;
      }

      .footer-links--languages {
        justify-content: start;
      }

      .cinema-visual {
        min-height: 460px;
      }

    }

    @media (max-width: 920px) {
      h1 { max-width: 9.5ch; }
      .cinema-frame { padding: 22px; border-radius: 28px; }
      .cinema-caption {
        left: 22px;
        right: 22px;
        bottom: 20px;
        flex-direction: column;
        gap: 8px;
      }
      .faq-grid { grid-template-columns: 1fr; }
      .section-head { text-align: left; }
    }

    @media (max-width: 640px) {
      .social-proof {
        padding: 52px 0 42px;
        scroll-margin-top: 180px;
      }

      .social-proof__inner {
        width: min(var(--max), calc(100% - 24px));
        padding: 24px 18px;
        border-radius: 24px;
      }

      .social-proof__intro {
        margin-bottom: 20px;
      }

      .social-proof__grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .footer-column--languages {
        justify-items: start;
      }

      .footer-links--languages {
        grid-template-columns: repeat(4, minmax(0, max-content));
      }

      .social-proof__item {
        padding: 18px 16px;
        border-radius: 18px;
      }

      .usecases {
        padding-top: 64px;
        padding-bottom: 40px;
      }

      .usecases .section-head {
        margin-bottom: 20px;
      }

      .usecases-row {
        gap: 16px;
        padding: 20px 0;
      }

      .usecases-row > .usecases-copy {
        order: 1;
      }

      .usecases-row > .usecases-card {
        order: 2;
      }

      .usecases-row > .usecases-card-stack {
        order: 2;
      }

      .usecases-copy h3 {
        max-width: none;
      }

      .usecases-copy {
        min-height: 0;
      }

      .usecases-card {
        min-height: 0;
        padding: 22px 18px;
      }

      .insights {
        padding-top: 56px;
        padding-bottom: 40px;
      }

      .insights .section-head {
        margin-bottom: 18px;
      }

      .insights .cinema-row {
        padding: 20px 0;
      }

      .insights .cinema-row > .cinema-copy {
        order: 1;
      }

      .insights .cinema-row > .cinema-aside {
        order: 2;
      }

      .insights .cinema-copy h3 {
        max-width: none;
      }

      .insights .cinema-copy {
        min-height: 0;
      }

      .insights .cinema-aside {
        min-height: 0;
      }

      .site-overview .container {
        padding-top: 16px;
        padding-bottom: 4px;
      }

      .site-overview-toggle[open] .site-overview-map {
        margin-top: 12px;
      }

      .site-overview-map {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px 16px;
      }

      .site-overview-group h3 {
        margin-bottom: 8px;
      }

      .site-overview-links {
        gap: 4px;
      }

      .site-overview-links a {
        font-size: 0.78rem;
      }

      .business-cta {
        padding: 0 0 52px;
        scroll-margin-top: 180px;
      }

      .business-cta__inner {
        width: min(var(--max), calc(100% - 24px));
        padding: 24px 18px;
        border-radius: 24px;
      }

      .business-cta .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        padding: 14px 18px;
      }
    }