/* ============================================================
   CARDS — mřížkové bloky: služby, postup, standardy, dopis.
   Každý blok si nese i vlastní grid, protože ten 1px předěl
   mezi buňkami dělá pozadí mřížky — grid a vzhled nejdou oddělit.
   ============================================================ */

/* ---- služby ---- */
.services{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
@media (max-width: 780px){ .services{ grid-template-columns:1fr } }
.svc{
  background:linear-gradient(180deg, rgba(15,18,20,.4), var(--bg));
  padding: clamp(22px, 2.8vw, 36px);
  display:flex; flex-direction:column; gap:10px;
  transition: background .35s var(--ease);
  position:relative; min-height: 200px;
}
.svc::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0; transition:opacity .35s var(--ease) }
.svc:hover{ background:linear-gradient(180deg, var(--panel), rgba(15,18,20,.6)) }
.svc:hover::after{ opacity:.6 }
.svc .num{ font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:.22em }
.svc h3{ margin:8px 0 4px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing:-.018em; font-weight:500; color:var(--ink-2) }
.svc p{ margin:0; color:var(--ink-dim); font-size:15.5px; line-height:1.6; max-width:46ch }
.svc .for{ margin-top:auto; padding-top:18px; font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.svc .for b{ color:var(--ink); font-weight:500 }
.svc .glyph{ position:absolute; top:24px; right:24px; width:36px; height:36px; border:1px solid var(--line-2); border-radius:8px; display:grid; place-items:center; color:var(--ink-dim); font-family:"JetBrains Mono", monospace; font-size:14px; background:linear-gradient(180deg, rgba(20,23,26,.5), transparent); transition: color .25s, border-color .25s, transform .35s var(--ease) }
.svc:hover .glyph{ color:var(--accent); border-color:var(--accent-dim); transform:rotate(-90deg) }
.svc .svc-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-family:"JetBrains Mono", monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); transition: gap .3s var(--ease) }
.svc .svc-cta:hover{ gap:12px }

/* ---- postup ---- */
.process{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%) }
@media (max-width:980px){ .process{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:540px){ .process{ grid-template-columns: 1fr } }
.step{ padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 28px); border-right:1px solid var(--line); position:relative; min-height: 200px; display:flex; flex-direction:column; background:transparent; transition: background .35s var(--ease) }
.step:hover{ background:rgba(20,23,26,.4) }
.process > .step:last-child{ border-right:0 }
@media (max-width:980px){ .step:nth-child(2){ border-right:0 } .step:nth-child(1), .step:nth-child(2){ border-bottom:1px solid var(--line) } }
@media (max-width:540px){ .step{ border-right:0; border-bottom:1px solid var(--line) } .process > .step:last-child{ border-bottom:0 } }
.step .n{ font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.22em; color:var(--muted); margin-bottom: 22px; display:flex; justify-content:space-between; align-items:center }
.step .n .d{ width:7px; height:7px; border-radius:50%; background:var(--line-2); transition: background .25s, box-shadow .25s }
.step.live .n .d{ background:var(--accent); box-shadow:0 0 12px var(--accent) }
.step:hover .n .d{ background:var(--accent); box-shadow:0 0 10px var(--accent) }
.step h4{ margin:0 0 12px; font-size: 22px; font-weight:500; letter-spacing:-.015em; color:var(--ink-2) }
.step p{ margin:0 0 14px; color:var(--ink-dim); font-size:14.5px; line-height:1.55 }
.step .when{ margin-top:auto; font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }

/* ---- osobní dopis ---- */
.note-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding: clamp(22px, 2.4vw, 32px);
  background: radial-gradient(80% 60% at 0% 0%, rgba(182,255,60,.05), transparent 60%), linear-gradient(180deg, var(--panel) 0%, transparent 100%);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.note-card .tagline{ font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:16px }
.note-card .q{ font-size: clamp(18px, 1.8vw, 22px); line-height:1.55; letter-spacing:-.01em; color:var(--ink); margin:0 0 20px; font-weight:400 }
.note-card .q b{ color:var(--ink-2); font-weight:500 }
.note-card .sig{ display:flex; align-items:center; gap:14px; padding-top:22px; border-top:1px solid var(--line); margin-top:auto }
.note-card .sig .av{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg, #1a1d20, #0a0c0e); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--accent); font-family:"JetBrains Mono", monospace; font-size:14px }
.note-card .sig .n{ font-weight:500; color:var(--ink-2); font-size:15px }
.note-card .sig .r{ font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:.12em; margin-top:2px }

/* ---- standardy ---- */
.standards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden }
.standard{ background:linear-gradient(180deg, var(--panel), var(--bg)); padding: clamp(18px, 2vw, 24px); display:flex; flex-direction:column; gap:6px; min-height: 120px; justify-content:center; transition: background .35s var(--ease) }
.standard:hover{ background:linear-gradient(180deg, var(--panel-2), var(--panel)) }
.standard .v{ font-family:"JetBrains Mono", monospace; font-size: clamp(26px, 3.2vw, 38px); font-weight:500; color:var(--ink-2); letter-spacing:-.028em }
.standard .v em{ color:var(--accent); font-style:normal; text-shadow:0 0 24px rgba(182,255,60,.3) }
.standard .k{ font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.standard .x{ font-size:13.5px; color:var(--ink-dim); margin-top:6px; line-height:1.5 }