/* Webscale — automatizace.webscale.cz
   Statický web objednávek Ecomail automatizací. Tokeny převzaté 1:1 z Webscale
   design systému (colors / typography / spacing / effects); komponenty podle
   prototypu z Claude Design (LandingPage, OrderForm, PaymentCard, ClientPage). */

:root {
  --ink: #1A1A1A; --ink-soft: #1C1B1F; --white: #FFFFFF;
  --gray-600: #808080; --gray-300: #D9D9D9; --gray-200: #E5E5E5; --gray-100: #F2F2F2; --gray-50: #F5F5F5;
  --cyan: #00E5FF; --cyan-100: #BFF8FF; --magenta: #FF009D; --magenta-100: #FFBFE6;
  --magenta-05: rgba(255,0,157,0.05); --purple: #9747FF; --green: #00BB3E; --green-dark: #067a2b;
  --magenta-dark: #80004f; --text-2: #4D4D4D; --muted-dark: #B3B3B3;
  --gradient-brand: linear-gradient(220deg, #FF009D 0%, #00E5FF 80%);
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-text: "Roboto", system-ui, -apple-system, sans-serif;
  --focus-ring: rgba(0,229,255,0.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 8px 24px -8px rgba(0,0,0,0.10);
  --ease: cubic-bezier(.4,0,.2,1);
  --container: 1200px; --pad-x: clamp(20px, 4vw, 48px); --pad-y: clamp(64px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-text); color: var(--ink); background: #fff; line-height: 1.5; font-size: 16px; }
a { color: var(--ink); }
a:hover { color: var(--magenta); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
.dark { background: var(--ink); color: #fff; }
.dark a { color: #fff; }
.soft { background: var(--gray-50); }
.pinkwash { background: var(--magenta-05); }

/* Typografie */
.h1, .h2 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.h1 { font-size: clamp(30px, 4.5vw, 64px); }
.h2 { font-size: clamp(32px, 4.4vw, 56px); }
.h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dark .lead { color: var(--gray-300); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--cyan); }
.dark .eyebrow { color: var(--muted-dark); }
.grad-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stack { display: flex; flex-direction: column; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-48 { gap: 48px; }

/* Tlačítka */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform var(--ease) .14s, filter var(--ease) .14s, background var(--ease) .14s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); color: inherit; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-gradient { background: var(--gradient-brand); color: #fff; }
.btn-gradient:hover { color: #fff; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(128,128,128,0.12); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; white-space: normal; }
.btn-link { background: none; border: none; padding: 0; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: underline; cursor: pointer; min-height: 40px; }

/* Badge / chip */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-green { background: rgba(0,187,62,0.14); color: var(--green-dark); }
.badge-magenta { background: var(--magenta-100); color: var(--magenta-dark); }
.badge-cyan { background: var(--cyan-100); color: var(--ink); }
.badge-ink { background: var(--ink); color: #fff; }
.badge-neutral { background: rgba(255,255,255,0.12); color: #fff; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gray-300); font-size: 13px; font-weight: 700; }

/* Formulářové prvky */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > .label, .label { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.input { height: 48px; width: 100%; border: 1px solid var(--gray-300); border-radius: 12px; padding: 0 16px; font-family: var(--font-text); font-size: 16px; color: var(--ink); background: #fff; outline: none; }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--magenta); }
.input.ok { border-color: var(--green); }
.input.from-ares { background: var(--gray-50); }
.input.mono { font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
.input.num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.error { font-size: 13px; color: var(--magenta-dark); }
.hint { font-size: 13px; line-height: 1.45; color: var(--gray-600); }
.status-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.status-line.ok { color: var(--green-dark); } .status-line.info { color: var(--ink); } .status-line.muted { color: var(--gray-600); }
.seg { display: inline-flex; gap: 4px; background: var(--gray-50); border-radius: 999px; padding: 4px; }
.seg button { min-width: 48px; min-height: 36px; padding: 0 12px; border: none; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.seg.lg button { min-width: 88px; min-height: 44px; font-size: 15px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 16px; font-size: 14px; line-height: 1.45; }
.alert svg { flex: none; margin-top: 1px; }
.alert-magenta { background: var(--magenta-100); color: var(--magenta-dark); }
.alert-magenta a { color: inherit; }
.alert-green { background: rgba(0,187,62,0.12); color: var(--green-dark); }
.alert-gray { background: var(--gray-50); color: var(--ink); }
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: wsspin .8s linear infinite; vertical-align: middle; flex: none; }
@keyframes wsspin { to { transform: rotate(360deg); } }

/* Karty */
.card { background: #fff; border: 1px solid var(--gray-300); border-radius: 24px; box-shadow: var(--shadow-sm); }
.card-16 { border-radius: 16px; }
.num-circle { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* Hlavička */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-100); }
.site-header .container { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header nav { display: flex; gap: 4px; }
.site-header nav a { padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); }
.site-header nav a:hover { background: var(--gray-50); }
.logo img { height: 22px; width: auto; }
@media (max-width: 820px) { .site-header nav { display: none; } }

/* Hero */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero-perks { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted-dark); }
.hero-perks span { display: inline-flex; align-items: center; gap: 8px; }
.hero-perks span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.flow { background: #242424; border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; align-items: center; }
.flow-head { align-self: stretch; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); }
.flow-trigger { width: 100%; max-width: 340px; display: flex; align-items: center; gap: 12px; background: var(--cyan); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; }
.flow-line { width: 2px; height: 20px; background: rgba(255,255,255,0.2); }
.flow-wait { font-size: 13px; color: var(--muted-dark); border: 1px dashed rgba(255,255,255,0.25); border-radius: 999px; padding: 6px 14px; }
.flow-mail { width: 100%; max-width: 340px; background: var(--ink); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.flow-mail .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-dark); }
.flow-mail .subj { font-size: 15px; font-weight: 700; }
.flow-check { font-size: 13px; font-weight: 700; border: 1px solid var(--purple); border-radius: 999px; padding: 6px 14px; }
.flow-split { width: 100%; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.flow-split > div { display: flex; flex-direction: column; gap: 6px; background: var(--ink); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.35; }
.flow-split b { font-size: 12px; }
.flow-foot { align-self: stretch; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.flow-foot .big { font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -0.02em; line-height: 1; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.bars span { width: 10px; border-radius: 3px; background: rgba(255,255,255,0.18); }
.bars span:last-child { background: var(--cyan); }

/* Benefity */
.benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.benefit { background: #fff; border: 1px solid var(--gray-300); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.benefit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.benefit .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cyan-100); display: grid; place-items: center; }
.benefit p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* Strategie */
.split-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.strat-scale { display: flex; flex-direction: column; gap: 8px; }
.strat-scale .bar { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #FF009D, #9747FF, #00E5FF); }
.strat-scale .ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); }
.strat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.strat-card { background: #fff; border: 1px solid var(--gray-300); border-radius: 24px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 24px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.strat-card.active { border: 2px solid var(--c); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.strat-card .head { display: flex; align-items: center; gap: 16px; }
.strat-card .ico { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--c); display: grid; place-items: center; }
.strat-card .pos { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); }
.strat-card h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.strat-card .claim { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; }
.strat-card .facts { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--gray-100); padding-top: 20px; }
.strat-card .facts > div { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.strat-card .facts .k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); }
.strat-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.strat-card li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.strat-card li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
.strat-card .foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.strat-card .trade { background: var(--t); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; font-weight: 500; }
.strat-card .pick { min-height: 48px; border-radius: 12px; border: 1px solid var(--ink); background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.strat-card.active .pick { background: var(--ink); color: #fff; }

/* Kroky */
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.steps li { display: flex; flex-direction: column; gap: 16px; }
.steps .top { display: flex; align-items: center; gap: 12px; }
.steps .n { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; background: var(--cyan-100); color: var(--ink); }
.steps li.ws .n { background: var(--ink); color: #fff; }
.steps .line { flex: 1; height: 2px; background: var(--gray-300); }
.steps li:last-child .line { opacity: 0; }
.steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.steps .badge { align-self: flex-start; }
@media (max-width: 820px) {
  .steps { display: flex; flex-direction: column; gap: 0; }
  .steps li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; }
  .steps .top { flex-direction: column; align-items: center; height: 100%; }
  .steps .line { width: 2px; height: auto; min-height: 24px; flex: 1; }
  .steps .body { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 32px; }
}

/* Case study */
.cs { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 48px); }
.cs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cs-logo { width: 168px; height: 56px; border: 1px dashed rgba(255,255,255,0.35); border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.stat .l { font-size: 16px; font-weight: 700; }
.stat .s { font-size: 13px; color: var(--muted-dark); }
.stat.center { text-align: center; align-items: center; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: stretch; }
.cs figure { margin: 0; background: #242424; border-radius: 24px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.cs figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.cs figcaption .t { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.cs .legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted-dark); }
.cs .legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs figure p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted-dark); }
.cs blockquote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(4px, 2vw, 24px) 0; }
.cs blockquote p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.cs blockquote footer { display: flex; align-items: center; gap: 14px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; }

/* Důvěra */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.logos div { height: 72px; border-radius: 12px; background: var(--gray-50); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--gray-600); }

/* Cena */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.price-card { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gradient-brand) border-box; border-radius: 24px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
.price-card .amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.price-card .amount b { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.price-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.price-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.price-card li svg { flex: none; margin-top: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* FAQ */
.faq-grid { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 80px); align-items: flex-start; }
.faq-grid > .intro { flex: 1 1 300px; }
.faq { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--gray-300); }
.faq details { border-bottom: 1px solid var(--gray-300); }
.faq summary { list-style: none; min-height: 64px; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-weight: 700; font-size: 18px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--magenta); }
.faq summary .pm { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--gray-50); color: var(--ink); display: grid; place-items: center; transition: background .2s; }
.faq details[open] summary .pm { background: var(--ink); color: #fff; }
.faq details[open] .pm .v { display: none; }
.faq details p { margin: 0; padding: 0 56px 24px 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }

/* Objednávka */
.order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: start; }
.after { background: #fff; border: 1px solid var(--gray-300); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.after .k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); }
.after div { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.after div span:last-child { padding-top: 3px; }
.form { background: #fff; border: 1px solid var(--gray-300); border-radius: 24px; padding: clamp(20px, 5vw, 40px); display: flex; flex-direction: column; gap: 24px; box-shadow: var(--shadow-sm); }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* Slider strategie */
.slider-wrap { padding: 0 18px; }
.slider { position: relative; height: 48px; cursor: pointer; touch-action: none; border-radius: 999px; }
.slider .track { position: absolute; left: 0; right: 0; top: 20px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #FF009D, #9747FF, #00E5FF); opacity: .4; }
.slider .stop { position: absolute; top: 18px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--c); }
.slider .thumb { position: absolute; top: 6px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: #fff; border: 3px solid var(--c); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: left .2s var(--ease), border-color .2s; }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.levels button { min-height: 48px; padding: 6px 12px; border: none; border-radius: 12px; background: transparent; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.levels button:nth-child(1) { justify-content: flex-start; } .levels button:nth-child(2) { justify-content: center; } .levels button:nth-child(3) { justify-content: flex-end; }
.levels button:not([aria-pressed="true"]):hover { background: var(--gray-50); }
@supports (background: color-mix(in srgb, red 50%, transparent)) { .levels button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--t) 45%, transparent); } }
.levels button[aria-pressed="true"] { background: var(--t); font-weight: 700; border-radius: 12px 12px 0 0; position: relative; z-index: 1; }
.levels button:focus-visible { box-shadow: inset 0 0 0 3px var(--focus-ring); }
.level-desc { margin-top: -12px; }
.levels .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.level-desc { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 16px; transition: background .2s; font-size: 14px; line-height: 1.5; }
.level-desc .ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }

/* Platební karta */
.pay { background: #fff; border: 1px solid var(--gray-300); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-sm); }
.pay .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px clamp(20px, 5vw, 32px); border-bottom: 1px solid var(--gray-100); }
.pay .body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 5vw, 48px); padding: clamp(20px, 5vw, 32px); align-items: start; }
.pay .amount { display: flex; flex-direction: column; gap: 6px; }
.pay .amount b { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.pay .amount span { font-size: 14px; color: var(--gray-600); }
.pay .rows { display: flex; flex-direction: column; margin-top: 20px; }
.pay .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--gray-100); }
.pay .row .kv { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay .row .k { font-size: 13px; color: var(--gray-600); }
.pay .row .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copy { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--gray-300); border-radius: 10px; background: #fff; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.copy:hover { border-color: var(--ink); }
.copy.done { background: rgba(0,187,62,0.12); }
.pay .qr { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pay .qr img { width: 100%; max-width: 300px; aspect-ratio: 1; border: 1px solid var(--gray-300); border-radius: 16px; padding: 12px; background: #fff; }
.pay .qr b { font-size: 14px; }
.pay .qr small { font-size: 13px; color: var(--gray-600); }
.pay .foot { background: var(--gray-50); padding: 20px clamp(20px, 5vw, 32px); display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.45; }
.pay .foot .mail { display: flex; gap: 12px; align-items: flex-start; }
.pay .next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; border-top: 1px solid var(--gray-300); padding-top: 16px; font-size: 14px; }
.pay .next div { display: flex; gap: 12px; align-items: flex-start; }
.placeholder-note { font-size: 12px; font-weight: 700; color: var(--magenta); }

/* Patička */
.site-footer { background: var(--ink); color: #fff; padding: clamp(48px, 6vw, 80px) 0 32px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; }
.site-footer .col { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
.site-footer .muted { color: var(--muted-dark); }
.site-footer a { color: #fff; }
.site-footer a.muted { color: var(--muted-dark); }
.site-footer .k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); }
.site-footer .ecomail { align-self: flex-start; background: #fff; color: #1A1A1A; border-radius: 10px; padding: 10px 14px; font-weight: 800; font-family: var(--font-display); text-decoration: none; }
.site-footer .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 14px; color: var(--muted-dark); }
.site-footer .bottom div { display: flex; flex-wrap: wrap; gap: 24px; }

/* Klientská stránka */
.client body, body.client { background: var(--gray-50); }
.client-header { background: #fff; border-bottom: 1px solid var(--gray-100); }
.client-header .wrap, .client-main, .client-footer .wrap { max-width: 760px; margin: 0 auto; padding-left: clamp(20px, 4vw, 32px); padding-right: clamp(20px, 4vw, 32px); }
.client-header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.client-header .who { font-size: 14px; color: var(--gray-600); text-align: right; }
.client-main { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; gap: 32px; min-height: 60vh; }
.client-main .h1 { font-size: clamp(32px, 6vw, 48px); }
.panel { background: #fff; border: 1px solid var(--gray-300); border-radius: 24px; padding: clamp(20px, 5vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.panel .ph { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.panel .ph .t { display: flex; align-items: center; gap: 12px; }
.panel .ph h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.panel .ph .n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.summary { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 32px; }
.summary > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--gray-100); }
.summary dt { font-size: 13px; color: var(--gray-600); }
.summary dd { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; display: flex; align-items: center; gap: 10px; }
.summary .sico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.strat-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.strat-opts button { min-height: 48px; border-radius: 12px; border: 1px solid var(--gray-300); background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; }
.strat-opts button[aria-checked="true"] { border: 2px solid var(--c); background: var(--t); }
.strat-opts .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.contact-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--gray-300); border-radius: 16px; padding: 20px 24px; font-size: 15px; }
.contact-box a { font-weight: 700; }
.key-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.key-wrap .in { flex: 1 1 260px; position: relative; }
.key-wrap .in .input { padding-right: 96px; }
.key-wrap .toggle { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; border: none; border-radius: 8px; background: var(--gray-50); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; background: var(--gray-50); border-radius: 16px; padding: 16px; }
.help ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.help .shot { min-height: 140px; border-radius: 12px; background: var(--gray-300); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-2); text-align: center; padding: 12px; overflow: hidden; }
.help .shot img { width: 100%; height: auto; border-radius: 8px; }
.help .shot a { display: block; }
.help .zoom { font-size: 12px; color: var(--gray-600); text-align: center; margin-top: 6px; }
.help { grid-template-columns: 1fr; }
.eml-how { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-brand); display: grid; place-items: center; }
.timeline > div { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.timeline .col { display: flex; flex-direction: column; align-items: center; }
.timeline .n { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-50); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.timeline > div:first-of-type .n { background: var(--ink); color: #fff; }
.timeline .ln { flex: 1; width: 2px; min-height: 16px; background: var(--gray-300); }
.timeline > div:last-of-type .ln { opacity: 0; }
.timeline .body { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 24px; }
.timeline .when { font-size: 13px; font-weight: 700; color: var(--gray-600); }
.timeline .body b { font-size: 17px; }
.timeline .body span:last-child { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.client-footer { background: var(--ink); color: var(--muted-dark); }
.client-footer .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.client-footer a { color: #fff; }
.client-footer img { height: 16px; }

/* Technická analýza (klientská stránka, stav hotovo) */
.drop { border: 2px dashed var(--gray-300); border-radius: 12px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--purple); background: var(--gray-50); }
.drop b { display: block; font-size: 14px; margin-bottom: 4px; }
.drop small { font-size: 12px; color: var(--gray-600); }
.mode { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; }
.mode button { padding: 7px 16px; font-size: 13px; font-weight: 700; border: none; background: transparent; color: var(--gray-600); cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.textarea { width: 100%; min-height: 200px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--gray-300); border-radius: 8px; padding: 12px 14px; resize: vertical; color: var(--ink); background: #fff; line-height: 1.6; }
.textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring); }