/* Index-spezifisch (Hero/Showcase/Steps/Negative/Pricing/Privacy/About/Final).
     Shell (Nav, Footer, Brand, mm-lang, Burger, :root) liegt in assets/site.css.
     Mobile-first: default = mobile, min-width-Breakpoints für Tablet/Desktop. */

  h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
  h1 { font-size: clamp(34px, 9vw, 68px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; }
  h2 { font-size: clamp(26px, 5.5vw, 44px); line-height: 1.08; letter-spacing: -0.025em; }
  h3 { font-size: 18px; line-height: 1.3; }
  p  { margin: 0; color: var(--ink-soft); text-wrap: pretty; overflow-wrap: break-word; }
  .accent { color: var(--primary); }

  section { padding: 64px 0; }
  @media (min-width: 720px) { section { padding: 96px 0; } }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 22px; border-radius: 999px;
    font-size: 15px; font-weight: 500;
    border: 1px solid transparent;
    transition: transform .12s, background .12s;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-2); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn-ghost:hover { background: rgba(16,42,51,0.04); }

  /* ---------- Hero ---------- */
  .hero { padding-top: 32px; padding-bottom: 48px; }
  .hero-grid { display: grid; gap: 32px; }
  .hero-grid > * { min-width: 0; }
  .hero .mono { display: inline-block; }
  .hero h1 { margin-top: 14px; }
  .hero p.lede {
    font-size: 18px; line-height: 1.5;
    margin-top: 20px; max-width: 38ch;
    color: var(--ink-soft);
  }
  .hero-cta { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
  .hero-meta {
    margin-top: 24px;
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 11px; color: var(--ink-mute);
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
  .hero-art {
    position: relative; aspect-ratio: 1/1;
    border-radius: 24px; overflow: hidden;
    max-width: 380px; margin: 0 auto; width: 100%;
    box-shadow: 0 30px 60px -30px rgba(16,42,51,0.35),
                0 8px 24px -12px rgba(16,42,51,0.18);
  }
  .hero-art img { width: 100%; height: 100%; object-fit: cover; }
  .hero-art .badge {
    position: absolute; bottom: 14px; left: 14px;
    background: rgba(255,253,249,0.94);
    padding: 7px 12px; border-radius: 999px;
    font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em;
    color: var(--ink);
  }
  @media (min-width: 880px) {
    .hero { padding-top: 72px; padding-bottom: 60px; }
    .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 60px; align-items: center; }
    .hero-art { max-width: 480px; }
  }

  /* ---------- Section head ---------- */
  .sec-head { display: grid; gap: 14px; margin-bottom: 36px; }
  .sec-head > * { min-width: 0; }
  .sec-head .lede { font-size: 16px; color: var(--ink-soft); max-width: 52ch; line-height: 1.5; }
  @media (min-width: 880px) {
    .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; margin-bottom: 56px; align-items: end; }
    .sec-head .lede { font-size: 17px; }
  }

  /* ---------- Showcase (3 screenshots) ---------- */
  .showcase { background: var(--ink); color: #f4ece0; }
  .showcase h2 { color: #fff; }
  .showcase p { color: rgba(244,236,224,0.72); }
  .showcase .mono { color: rgba(244,236,224,0.55); }
  .showcase .lede { color: rgba(244,236,224,0.72); }
  .shots { display: grid; gap: 48px; max-width: 340px; margin: 0 auto; }
  .shot { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .shot-frame {
    aspect-ratio: 9/19.5; border-radius: 28px;
    overflow: hidden; background: #000;
    border: 5px solid #1a1a1a;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  }
  .shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .shot-meta { display: flex; flex-direction: column; gap: 4px; }
  .shot-meta .mono { letter-spacing: 0.12em; }
  .shot-meta h3 { color: #fff; font-size: 19px; }
  .shot-meta p { font-size: 14px; }
  @media (min-width: 880px) {
    .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; max-width: 880px; }
    .shot-frame { border-radius: 32px; border-width: 6px; }
  }

  /* ---------- Steps (numbered cards) ---------- */
  .steps { display: grid; gap: 14px; }
  .step {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 26px 24px;
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
  }
  .step-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center;
    font-weight: 600; font-size: 15px;
  }
  .step h3 { font-size: 18px; }
  .step p  { font-size: 14.5px; line-height: 1.5; }
  @media (min-width: 880px) {
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .step { padding: 32px 28px; min-height: 220px; }
  }

  /* ---------- Negative space ---------- */
  .negative { background: var(--surface-2); }
  .neg-list {
    display: grid; gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
  }
  .neg-item {
    background: var(--surface-2); padding: 24px;
    display: flex; flex-direction: column; gap: 10px;
    min-width: 0;
  }
  .neg-item .strike {
    display: flex; align-items: center; gap: 12px;
    font-size: 16px; font-weight: 600; color: var(--ink);
  }
  .neg-item .strike .x { color: var(--secondary); flex-shrink: 0; }
  .neg-item p { font-size: 14px; color: var(--ink-soft); margin-left: 32px; line-height: 1.5; }
  @media (min-width: 720px) {
    .neg-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .neg-item { padding: 28px; }
  }

  /* ---------- Pricing: Plan-Cards + Compare-Card ---------- */
  .price-toggle-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
  .price-toggle {
    display: inline-flex; padding: 4px;
    background: rgba(16,42,51,0.06); border-radius: 12px;
  }
  .price-toggle button {
    all: unset; cursor: pointer;
    padding: 9px 16px; border-radius: 9px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-soft);
    font-family: 'Inter', system-ui, sans-serif;
    transition: all .2s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .price-toggle button.active {
    background: #FFFDF9; color: var(--ink);
    box-shadow: 0 1px 3px rgba(16,42,51,.08);
  }
  .price-toggle .save {
    font-size: 10px; padding: 2px 7px;
    background: var(--secondary); color: #fff;
    border-radius: 4px; font-weight: 700; letter-spacing: 0.04em;
  }

  .pricing-grid { display: grid; gap: 18px; }
  .plan {
    position: relative; background: var(--card);
    border: 1px solid var(--line); border-radius: 20px;
    padding: 28px 22px; display: flex; flex-direction: column;
    min-width: 0;
  }
  .plan-plus { background: var(--primary); color: var(--surface); border-color: var(--primary); }
  .plan-plus .mono { color: rgba(242,230,208,0.72); }
  .plan-plus .plan-note,
  .plan-plus .plan-fine { color: rgba(242,230,208,0.82); }
  .plan-badge {
    position: absolute; top: -12px; left: 22px;
    background: var(--secondary); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
    white-space: nowrap;
  }
  .plan-name {
    font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
    margin: 10px 0 14px; color: inherit;
  }
  .plan-plus .plan-name { color: var(--surface); }
  .plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .plan-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .plan-price-row.hidden { display: none; }
  .plan-price .amount {
    font-size: 40px; font-weight: 700; letter-spacing: -0.025em;
    color: inherit; font-variant-numeric: tabular-nums;
  }
  .plan-plus .plan-price .amount { color: var(--surface); }
  .plan-price .period { font-size: 14px; color: var(--ink-mute); }
  .plan-plus .plan-price .period { color: rgba(242,230,208,0.72); }
  .plan-note {
    font-size: 13px; margin-top: 12px; line-height: 1.5;
    color: var(--ink-soft); min-height: 38px;
  }
  .plan-note.hidden { display: none; }
  .plan-cta { justify-content: center; margin-top: auto; width: 100%; }
  .plan-plus .plan-cta.btn-primary { background: var(--secondary); color: #fff; }
  .plan-plus .plan-cta.btn-primary:hover { background: #dd6c54; }
  .plan-fine {
    font-size: 12px; color: var(--ink-mute);
    text-align: center; margin-top: 12px;
  }
  @media (min-width: 720px) {
    .plan { padding: 32px 26px; }
    .plan-price .amount { font-size: 44px; }
  }
  @media (min-width: 880px) {
    .pricing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  }

  .compare-title {
    font-size: 18px; font-weight: 600;
    margin: 36px 0 14px; letter-spacing: -0.01em;
  }
  .compare-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
  }
  .compare-row {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1fr);
    align-items: center; padding: 13px 14px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px; gap: 10px;
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-row > div:first-child { color: var(--ink); font-weight: 500; min-width: 0; }
  .compare-row > div:nth-child(2),
  .compare-row > div:nth-child(3) { justify-self: start; min-width: 0; }
  .compare-row .yes {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .compare-row .yes svg { width: 12px; height: 12px; }
  .compare-row .no { color: var(--ink-mute); font-size: 18px; }
  .compare-row .num { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .compare-head {
    background: var(--surface-2);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
    padding: 11px 14px;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1fr);
  }
  .compare-head > div { font-weight: 600; color: var(--ink-mute); }
  .compare-section {
    background: var(--surface);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
    padding: 14px 14px 8px;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 500;
  }
  @media (min-width: 720px) {
    .compare-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); padding: 14px 22px; font-size: 14px; }
    .compare-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); padding: 12px 22px; font-size: 11px; }
    .compare-section { padding: 16px 22px 8px; font-size: 11px; }
  }

  .lock-note {
    background: var(--surface-2);
    border-left: 3px solid var(--tertiary);
    border-radius: 6px;
    padding: 14px 16px; margin-top: 24px;
    font-size: 14px; line-height: 1.55; color: var(--ink);
  }

  /* ---------- Privacy ---------- */
  .privacy-grid { display: grid; gap: 28px; }
  .privacy-grid > * { min-width: 0; }
  .privacy-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 6px;
  }
  .privacy-card .row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px; align-items: center;
    padding: 16px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .privacy-card .row:last-child { border-bottom: none; }
  .privacy-card .row .ico {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--surface); color: var(--primary);
    display: grid; place-items: center;
  }
  .privacy-card .row .label { font-size: 14px; color: var(--ink); font-weight: 500; }
  .privacy-card .row .meta {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--ink-mute); letter-spacing: 0.08em;
  }
  .privacy-points { display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; margin: 0; }
  .privacy-points li {
    padding-left: 22px; position: relative;
    font-size: 15px; color: var(--ink-soft); line-height: 1.5;
  }
  .privacy-points li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; border-radius: 2px; background: var(--primary);
  }
  .privacy-points li b { color: var(--ink); font-weight: 600; }
  @media (min-width: 720px) {
    .privacy-card .row { padding: 16px 18px; }
    .privacy-card .row .label { font-size: 14.5px; }
  }
  @media (min-width: 880px) {
    .privacy-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
  }

  /* ---------- About (Petrol-BG) — Struktur-Stub ---------- */
  .about { background: var(--primary); color: #fff; }
  .about h2 { color: #fff; }
  .about p { color: rgba(255,255,255,0.82); }
  .about .mono { color: rgba(255,255,255,0.6); }
  .about-grid { display: grid; gap: 36px; align-items: center; }
  .about-grid > * { min-width: 0; }
  .about-text p { font-size: 16px; line-height: 1.6; margin-top: 16px; max-width: 50ch; }
  .about-meta {
    margin-top: 28px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
    border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px;
  }
  .about-meta .label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    display: block; margin-bottom: 4px;
  }
  .about-meta .val { font-size: 14.5px; color: #fff; }
  .about-art {
    aspect-ratio: 1/1; background: var(--secondary);
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
    max-width: 380px; margin: 0 auto; width: 100%;
  }
  .about-art img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 880px) {
    .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
    .about-text p { font-size: 17px; }
    .about-meta .val { font-size: 15px; }
    .about-art { max-width: 420px; }
  }

  /* ---------- Final CTA ---------- */
  .final { text-align: center; padding: 72px 0 56px; }
  .final h2 {
    max-width: 18ch; margin: 0 auto 16px;
    font-size: clamp(28px, 7.5vw, 52px);
  }
  .final p { max-width: 44ch; margin: 0 auto; font-size: 16px; }
  .final .hero-cta { justify-content: center; margin-top: 28px; }
  .final .mono.note { display: block; margin-top: 26px; }
  @media (min-width: 720px) {
    .final { padding: 96px 0 72px; }
    .final p { font-size: 17px; }
  }

  /* ---------- ≤320 graceful (iPhone SE 1) ---------- */
  @media (max-width: 360px) {
    .plan { padding: 22px 18px; }
    .plan-name { font-size: 20px; }
    .plan-price .amount { font-size: 32px; }
    .compare-row { padding: 11px 10px; font-size: 12px; gap: 8px; }
    .compare-head, .compare-section { padding: 10px 10px 6px; font-size: 10px; }
    .plan-badge { font-size: 10px; padding: 5px 10px; }
    .menu-link { font-size: 19px; padding: 14px 4px; }
  }