/* Motyw "ciemny": nowoczesny, technologiczny – ciemne tło, limonkowy akcent, czcionka Space Grotesk */

:root {
  --bg: #0b0d12;
  --bg2: #10131a;
  --card: #141821;
  --ink: #eef0f5;
  --muted: #9aa1b2;
  --line: #242a37;
  --accent: #b6f36a;
  --accent-ink: #b6f36a;
  --accent-soft: rgba(182, 243, 106, 0.1);
  --dark: #10131a;
  --dark2: #1a1f2a;
  --on-dark: #eef0f5;
  --on-dark-muted: rgba(238, 240, 245, 0.68);
  --dark-line: rgba(255, 255, 255, 0.09);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --violet: #8b6cff;
}
body {
  font-family: Inter, system-ui, sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}
h1, h2, h3, .logo, .price b, .plan-price, .steps li::before { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.03em; }
.eyebrow, .tags li, .plan-tag, .browser-url, .crumbs ol { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; }
.eyebrow::before { border-radius: 2px; box-shadow: 0 0 12px var(--accent); }
.on-dark .eyebrow, .foot b { color: var(--accent); }
.lead, .head p, .card p, .steps p, .prose p, .prose li { color: var(--muted); }
.hl { background: none; color: var(--accent); text-shadow: 0 0 32px rgba(182, 243, 106, 0.35); }

/* buttons: dark text on lime */
.btn { color: #0b0d12; box-shadow: 0 0 0 0 rgba(182, 243, 106, 0), 0 10px 30px -12px rgba(182, 243, 106, 0.6); }
.btn:hover { box-shadow: 0 0 0 4px rgba(182, 243, 106, 0.18), 0 14px 34px -12px rgba(182, 243, 106, 0.7); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.btn-dark { background: var(--ink); color: #0b0d12; }
.checks svg, .promo-ico, .plan-tag, .faq details[open] summary::after { color: #0b0d12; }

/* nav */
.nav { background: rgba(11, 13, 18, 0.75); }
.nav-links a:hover, .nav-links a[aria-current="page"], .menu-btn { background: var(--card); }
.logo svg rect { fill: var(--accent); }
@media (max-width: 1100px) { .nav-links { background: var(--card); } }

/* hero glow and mockup */
.hero::before, .page-hero::before { background: radial-gradient(circle, rgba(139, 108, 255, 0.28), transparent 65%); }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; left: -240px; bottom: -280px; background: radial-gradient(circle, rgba(182, 243, 106, 0.12), transparent 65%); pointer-events: none; }
.browser { background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.browser-bar { background: #1a1f2a; border-bottom-color: var(--line); }
.browser-url { background: #0f1218; color: var(--muted); }
.browser-url b { color: var(--accent); }
.screen, .phone-screen { background: #0f1218; }
.sk-nav span, .sk-text span:nth-child(3), .sk-text span:nth-child(4), .phone-screen span, .sk-cards span::after { background: #2a3040; }
.sk-nav span:first-child, .sk-text span, .phone-screen span:nth-child(-n+3) { background: var(--ink); }
.sk-text span:nth-child(3), .sk-text span:nth-child(4) { background: #2a3040; }
.sk-text span:nth-child(5), .phone-screen span:nth-child(7) { background: var(--accent); }
.sk-img, .phone-screen span:nth-child(6) { background: linear-gradient(135deg, var(--violet) 0%, #4f46e5 50%, var(--accent) 140%); }
.sk-cards span { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.cursor path { fill: var(--accent); stroke: #0b0d12; }
.phone { background: #2a3040; }
.badge { background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.badge svg { color: var(--accent); }

/* surfaces */
.strip { background: var(--bg2); border-color: var(--line); }
.section-alt { background: var(--bg2); }
.on-dark { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card, .steps li, .plan, .box, .related a, .faq details, .contact-item { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
a.card:hover, .related a:hover { box-shadow: 0 0 0 1px var(--accent), 0 20px 50px -24px rgba(182, 243, 106, 0.35); }
.plan.featured, .box.dark { background: linear-gradient(160deg, #1d2230, #141821); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.faq summary::after { background: var(--bg2); }
.cta { background: linear-gradient(135deg, #1b1830, #11141b 60%); box-shadow: 0 0 0 1px var(--line); }
.cta::before { background: radial-gradient(circle, rgba(139, 108, 255, 0.5), transparent 65%); }
.promo { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(182, 243, 106, 0.35); }
.promo-text { color: var(--muted); }
.tags li, .section .tags li, .section-alt .tags li { background: var(--accent-soft); color: var(--accent); }
.case-shot { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
footer { background: #07080b; border-top: 1px solid var(--line); }

/* form */
.form { background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.field input, .field select, .field textarea { background: #0f1218; border-color: var(--line); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(182, 243, 106, 0.15); }
.alert { background: rgba(255, 99, 99, 0.12); color: #ffb4b4; }
.consent a, .prose a { color: var(--accent); }
.logo-name b { font-weight: inherit; color: var(--accent); }
.foot .logo-name b { display: inline; margin: 0; font-size: inherit; letter-spacing: inherit; text-transform: none; }