/*
 * Marcin: light version of the marketing pages (landing, blog, SEO landings, /instrukcje), in the palette of the app's light theme
 * (theme-light-2.css): grey page with a soft glow, white cards, ink text, near-black primary buttons, dark cyan (#0e7490) as the
 * only accent (links, labels, highlighted words). Loaded right after landing.css; landing.css itself stays the dark version.
 * Most of landing.css reads its colours from the :root tokens, so the tokens below do the bulk; the rest overrides rules
 * with colours written in place.
 */
:root {
    --bg:          #f4f4f5;
    --bg-card:     #ffffff;
    --bg-card-alt: #fafafa;
    --border:      #e5e5e5;
    --border-mid:  #d4d4d8;
    --cyan:        #0e7490;
    --cyan-light:  #0891b2;
    --cyan-dim:    rgba(14,116,144,.14);
    --cyan-glow:   rgba(23,23,23,.16);
    --text-primary:   #171717;
    --text-secondary: #525252;
    --text-muted:     #8a8a8a;
    --red:    #b91c1c;
    --amber:  #d97706;
    --green:  #047857;
    --blue:   #0369a1;
    --purple: #6d28d9;
    --ink:    #171717;
    --gloss-black: linear-gradient(to bottom, #3a3a3a, #1f1f1f 55%, #141414);
    --gloss-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.25);
}

body {
    background:
        radial-gradient(1200px 800px at 85% -10%, #ffffff, transparent),
        radial-gradient(900px 700px at -10% 25%, rgba(0,0,0,.05), transparent),
        #f1f1f3;
    color: var(--text-primary);
}
::selection { background: var(--ink); color: #fff; }

/* primary buttons: near-black like the app's main button */
.btn-primary, .btn-primary-sm, .pricing-btn--primary, .contact-submit, .nav-logo-icon {
    background: var(--gloss-black);
    color: #fff;
    box-shadow: var(--gloss-shadow);
}
.btn-primary:hover, .btn-primary-sm:hover, .pricing-btn--primary:hover { opacity: 1; background: #262626; box-shadow: 0 10px 24px rgba(23,23,23,.18); }
.btn-outline { background: #fff; color: var(--text-primary); border-color: var(--border-mid); }
.btn-outline:hover { border-color: #a1a1aa; }

/* nav */
.nav--scrolled { background: rgba(255,255,255,.86); }
.nav-mobile { background: rgba(255,255,255,.98); }
.nav-logo span { color: #737373; }
.nav-logo img, .footer .nav-logo img { filter: brightness(0); opacity: .9; } /* white shield -> ink */
.nav-burger span { background: var(--text-primary); }

/* hero and section backdrops: grey instead of cyan glows */
.hero-orb--1, .cta-orb--1 { background: radial-gradient(circle, rgba(255,255,255,.9) 0%, transparent 65%) !important; }
.hero-orb--2, .cta-orb--2 { background: radial-gradient(circle, rgba(0,0,0,.05) 0%, transparent 65%) !important; }
.hero-orb--3 { background: radial-gradient(circle, rgba(0,0,0,.03) 0%, transparent 65%) !important; }
.hero-grid {
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) !important;
}
.hero-badge { background: #fff; border-color: var(--border); color: var(--text-secondary); }
.preview-window, .hero-preview { box-shadow: 0 24px 60px rgba(23,23,23,.14), 0 0 0 1px var(--border); }

/* cards with a cyan wash in the dark version */
.feature-card--large { background: linear-gradient(135deg, rgba(14,116,144,.05) 0%, var(--bg-card) 60%); border-color: var(--border); }
.pricing-card--featured { border-color: var(--ink); background: var(--bg-card); box-shadow: 0 18px 50px rgba(23,23,23,.12); }
.pricing-card--featured .pricing-plan-name { color: var(--ink); }
.pricing-toggle-btn--active { background: var(--ink); color: #fff; }
.pricing-toggle-save { background: rgba(14,116,144,.1); }
.pricing-toggle-btn--active .pricing-toggle-save { background: rgba(255,255,255,.18); color: #fff; }
.pricing-cap-inner strong { color: var(--ink); }
.vehicles-list li strong { color: var(--text-primary); }

/* cookie banner as in the app's light theme */
.rk-cookie-banner { background: #fff; border-color: var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(23,23,23,.12), 0 2px 6px rgba(23,23,23,.06); }
.rk-cookie-text strong { color: var(--ink); }
.rk-cookie-text p { color: #737373; }
.rk-cookie-text a { color: var(--ink); text-decoration: underline; text-decoration-color: #a1a1aa; text-underline-offset: 2px; }
.rk-cookie-btn:hover { opacity: 1; transform: none; }
.rk-cookie-btn--secondary { background: #f5f5f5; border: 1px solid var(--border); color: #646464; }
.rk-cookie-btn--secondary:hover { background: #ebebeb; color: var(--ink); }
.rk-cookie-btn--primary { background: var(--ink); border: 1px solid var(--ink); color: #fff; }
.rk-cookie-btn--primary:hover { background: #262626; }
.rk-cookie-fab { background: #fff; border-color: var(--border); color: #737373; }
.rk-cookie-fab:hover { color: var(--ink); border-color: #a1a1aa; }

/* instruction film window: light frame bar, near-black play button */
.rk-film { background: #fff; border-color: var(--border); box-shadow: 0 30px 80px rgba(23,23,23,.14), 0 10px 26px rgba(23,23,23,.08); }
.rk-film-pasek { background: #f4f4f5; border-bottom-color: var(--border); }
.rk-play { background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(23,23,23,.18)); }
.rk-play-kolo { background: var(--gloss-black); color: #fff; box-shadow: 0 0 0 10px rgba(23,23,23,.12), 0 18px 44px rgba(23,23,23,.3); }
.rk-play:hover .rk-play-kolo, .rk-play:focus-visible .rk-play-kolo { box-shadow: 0 0 0 14px rgba(23,23,23,.14), 0 22px 54px rgba(23,23,23,.34); }
.rk-play-napis { background: rgba(23,23,23,.82); }
.rk-pelny > .rk-pelny-etykieta svg, .rk-pelny-strzalka { color: var(--cyan); }
.instr-krok-nr { background: var(--ink); color: #fff; }
.instr-uwagi li::before { border-color: var(--cyan); color: var(--cyan); }
.instr-krok-zrzut { border-color: var(--border); box-shadow: 0 8px 24px rgba(23,23,23,.06); }
.rk-site-theme { background: #fff; border-color: var(--border); color: #737373; box-shadow: 0 2px 8px rgba(23,23,23,.06); }
.rk-site-theme:hover { color: var(--ink); border-color: #a1a1aa; }
.rk-cookie-fab { box-shadow: 0 2px 8px rgba(23,23,23,.06); }

/* Marcin: dark text on a light page reads thinner than light text on navy, so the light version uses one weight step more
   for headings, titles and the menu (the dark version keeps landing.css as it is) */
h1, h2, h4, .problem-text h2, .pillar-hero h1 { font-weight: 400; }
h3 { font-weight: 600; }
.prose h2, .post-header h1, .related-posts-head h2, .mini-cta h3, .prose h3 { font-weight: 500; }
.hero-subtitle, .pillar-hero .hero-subtitle { font-weight: 400; }
.pricing-amount { font-weight: 300; }
.nav-links a, .nav-mobile a, .nav-cta .btn-ghost { font-weight: 500; }
.nav-logo span { font-weight: 400; }
.nav-logo strong { font-weight: 700; }
.instr-karta-tekst strong, .instr-krok h3, .blog-card h2, .instr-wstep h2, .instr-uwagi h2, .instr-powiazane h2 { font-weight: 500; }
.footer-col h4 { font-weight: 600; }