/* =====================================================================
   MOTYW iSTUDIO — ujednolicenie istudioskup.pl z istudiowaw.pl
   Ładować PO styles.css (index) / PO wbudowanym <style> (wycena).
   Kolory i typografia 1:1 z istudiowaw.pl (Poppins, fiolet #874CFF→#5810EA,
   granat #1A1240, żółty akcent #FFD84D).
   ===================================================================== */

:root {
    --p1: #874CFF;
    --p2: #5810EA;
    --p3: #3A1AB8;
    --navy: #1A1240;
    --navy-2: #2B2750;
    --yellow: #FFD84D;
    --yellow-dark: #F5C518;
    --grad: linear-gradient(90deg, #874CFF 0%, #5810EA 100%);
    --grad-135: linear-gradient(135deg, #874CFF 0%, #5810EA 100%);

    /* nadpisanie zmiennych ze styles.css / wycena.html */
    --blue: #5810EA;
    --blue-dark: #4A0FD0;
    --blue-light: #F1EBFF;
    --blue-glow: rgba(88,16,234,0.16);
    --brand-purple: #5810EA;
    --brand-purple-soft: #874CFF;
    --brand-purple-light: #F1EBFF;
    --bg-secondary: #F7FAFC;
    --bg-alt: #F6F9FF;
    --text-primary: #1A1240;
    --text-secondary: #4A5568;
    --border: #E7E2F6;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-md: 0 6px 20px rgba(26,18,64,0.06);
    --shadow-lg: 0 14px 36px rgba(88,16,234,0.12);
    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body { font-family: var(--font); }

/* ===== TEKST GRADIENT (jak "ISTUDIO" na istudiowaw) ===== */
.text-gradient,
.grad,
.section-title .text-blue,
.cta-title .text-blue {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--p2);
    font-weight: 900;
}

/* ===== PRZYCISKI ===== */
.btn {
    font-family: var(--font);
    border-radius: 8px;
    letter-spacing: .01em;
}
.btn-large {
    text-transform: uppercase;
    font-size: .95rem;
    letter-spacing: .03em;
    padding: 16px 30px;
}
.btn-primary {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 8px 22px rgba(88,16,234,.28);
}
.btn-primary:hover {
    background: linear-gradient(90deg, #7A3DF5 0%, #4A0FD0 100%);
    box-shadow: 0 10px 28px rgba(88,16,234,.38);
}
.btn-outline {
    background: #fff;
    color: var(--navy);
    border: 2px solid var(--p1);
}
.btn-outline:hover {
    border-color: var(--p2);
    color: var(--p2);
}
.btn-yellow {
    background: var(--yellow);
    color: var(--navy);
    box-shadow: 0 8px 22px rgba(245,197,24,.35);
}
.btn-yellow:hover {
    background: var(--yellow-dark);
    color: var(--navy);
    transform: translateY(-2px);
}
.btn-white {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 8px 22px rgba(26,18,64,.18);
}
.btn-white:hover { transform: translateY(-2px); color: var(--p2); }

/* ===== PASEK NAD NAGŁÓWKIEM ===== */
.topbar {
    background: linear-gradient(90deg, #5810EA 0%, #3A1AB8 100%);
    color: rgba(255,255,255,.92);
    font-size: .78rem;
    font-weight: 500;
}
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.topbar-group { display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.topbar-item strong { font-weight: 700; color: #fff; }
.topbar-stars { color: var(--yellow); letter-spacing: 1px; font-size: .72rem; }
.topbar a:hover { color: #fff; }
.topbar .tb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.25);
}

/* ===== NAGŁÓWEK ===== */
#header {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(26,18,64,.06);
}
.header-container { height: 76px; }
.logo-lockup { height: 40px; }
.logo-tag {
    background: var(--yellow);
    color: var(--navy);
    font-weight: 800;
    font-size: .66rem;
    letter-spacing: .12em;
    padding: 4px 8px;
    border-radius: 6px;
}
.nav-link { color: var(--navy); font-weight: 500; }
.nav-link:hover, .nav-link.active { color: var(--p2); }
.nav-link.active::after { background: var(--grad); }
.phone-link { color: var(--navy); font-weight: 600; }
.phone-link:hover { color: var(--p2); }
.btn-header {
    background: var(--yellow);
    color: var(--navy);
    box-shadow: 0 6px 18px rgba(245,197,24,.35);
    padding: 11px 20px;
    font-weight: 600;
}
.btn-header:hover { background: var(--yellow-dark); color: var(--navy); }
.hamburger span { background: var(--navy); }

/* ===== HERO (fiolet jak na istudiowaw) ===== */
.hero-section {
    padding: 176px 0 96px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 28%, rgba(170,120,255,.55) 0%, rgba(170,120,255,0) 42%),
        radial-gradient(circle at 85% 85%, rgba(40,10,150,.55) 0%, rgba(40,10,150,0) 45%),
        linear-gradient(135deg, #7B3BFF 0%, #5810EA 50%, #3A12B5 100%);
    position: relative;
}
.hero-title {
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 3.1rem;
    line-height: 1.12;
    letter-spacing: -.01em;
}
.hero-hl {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    padding: 4px 18px 6px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 10px 30px rgba(26,18,64,.35);
}
.hero-subtitle { color: rgba(255,255,255,.88); }
.hero-checks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 32px;
}
.hero-checks li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.92);
    font-size: 1rem;
}
.hero-checks li strong { color: #fff; font-weight: 700; }
.hero-checks li::before {
    content: '';
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
    border: 1px solid rgba(255,255,255,.35);
}
.hero-badge { color: rgba(255,255,255,.85); }
.hero-image img {
    max-width: 440px;
    filter: drop-shadow(0 30px 50px rgba(20,5,80,.45));
}

/* ===== SEKCJE ===== */
.section-alt { background: var(--bg-secondary); }
.section-title,
.cta-title {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: -.005em;
    color: var(--navy);
}
.section-title { font-size: 2.45rem; }
.section-subtitle { color: var(--text-secondary); }
.section-badge {
    background: none;
    padding: 0;
    color: var(--p2);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    font-weight: 700;
    border-radius: 0;
}

/* ===== KARTY ===== */
.card,
.card-device,
.testimonial-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(26,18,64,.03);
}
.card-device:hover { background: #fff; }
.card:hover, .testimonial-card:hover { box-shadow: var(--shadow-lg); border-color: #D9CCFB; }
.card-icon { color: var(--p2); }
.card-icon-circle,
.stat-icon {
    background: var(--grad-135);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(88,16,234,.25);
}
.card:hover .card-icon-circle { background: var(--grad-135); transform: scale(1.06); }
.card-title { color: var(--navy); font-weight: 700; }

/* ===== BANER "KUPUJEMY WSZYSTKO" ===== */
.info-banner {
    background: linear-gradient(120deg, #1A1240 0%, #3A1AB8 60%, #5810EA 100%);
    border: none;
    color: #fff;
    border-radius: var(--radius-lg);
}
.info-banner-title { color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.info-banner-items { color: rgba(255,255,255,.85); }
.info-banner-items strong { color: var(--yellow); }

/* ===== KROKI ===== */
.step-number {
    background: var(--grad-135);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(88,16,234,.3);
}
.step-connector { background: linear-gradient(90deg, #D9CCFB, #EEE8FD); }
.step-icon { color: var(--p2); }
.step-title { color: var(--navy); }

/* ===== CTA ===== */
.section-cta { background: var(--bg-alt); }

/* ===== FOOTER (granat → niebieski jak na istudiowaw) ===== */
.footer {
    background:
        radial-gradient(circle at 90% 10%, rgba(88,16,234,.35) 0%, rgba(88,16,234,0) 45%),
        linear-gradient(120deg, #1A1240 0%, #22207A 55%, #1F4AA8 100%);
    border-top: none;
    color: rgba(255,255,255,.8);
}
.footer .logo-lockup { height: 40px; }
.footer-desc { color: rgba(255,255,255,.72); }
.footer-heading {
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    font-weight: 600;
}
.footer-link { color: rgba(255,255,255,.85); }
.footer-link:hover { color: var(--yellow); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom p { color: rgba(255,255,255,.55); }
.footer .social-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
}
.footer .social-btn:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

/* ===== MENU MOBILNE ===== */
.mobile-overlay .btn { background: var(--yellow); color: var(--navy); box-shadow: none; }

/* ===== WYCENA.HTML ===== */
.page-hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(135,76,255,.14) 0%, rgba(135,76,255,0) 45%),
        var(--bg-primary);
}
.page-title { color: var(--navy); text-transform: uppercase; font-weight: 400; }
.page-title .text-gradient { font-weight: 900; }
.progress-fill, .progress-bar-fill { background: var(--grad) !important; }

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 1024px) {
    .hero-title { font-size: 2.5rem; }
    .section-title { font-size: 2rem; }
}
@media (max-width: 900px) {
    .topbar .tb-hide-md { display: none; }
}
@media (max-width: 768px) {
    .topbar { display: none; }
    .header-container { height: 72px; }
    .logo-lockup { height: 34px; }
    .hero-section { padding: 112px 0 64px; }
    .hero-title { font-size: 2rem; }
    .hero-hl { padding: 3px 12px 5px; }
    .hero-checks { width: fit-content; margin-left: auto; margin-right: auto; align-items: flex-start; }
    .hero-checks li { text-align: left; font-size: .95rem; }
    .btn-header { padding: 9px 14px; font-size: .82rem; }
    .section-title { font-size: 1.75rem; }
}
@media (max-width: 430px) {
    .header-actions .btn-header { display: none; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 1.65rem; }
    .section-title { font-size: 1.5rem; }
    .hero-buttons .btn { width: 100%; }
}

/* ===== SEKCJA "KIEDY SPRZEDAĆ" ===== */
.kiedy-section { background: linear-gradient(180deg, #F3EDFF 0%, #FFFFFF 100%); }
.ms-point-ico { background: var(--grad-135); color: #fff; border-radius: 10px; }
.ms-lbl-now .ms-val { background: var(--grad); }
.ms-val { color: var(--p2); }
.ms-tag { background: #FFF4C7; color: #7A5A00; }

/* ===== STOPKA wycena.html ===== */
.footer .footer-logo { height: 32px; }
.footer .footer-copy { color: rgba(255,255,255,.65); }
.footer .footer-links a { color: rgba(255,255,255,.85); }
.footer .footer-links a:hover { color: var(--yellow); }

/* ===== KARTY "CO KUPUJEMY" JAKO LINKI ===== */
a.card-device { display: block; color: inherit; text-decoration: none; }
a.card-device:hover .card-title { color: var(--p2); }


/* ===== NAGŁÓWEK — średnie ekrany (769–1199 px), 29.09.2026 ===== */
.logo, .nav-link, .phone-link, .btn-header { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1199px) {
    .header-actions .phone-link { display: none; }
    .nav-links { gap: 24px; }
}
@media (max-width: 1023px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .header-actions { margin-left: auto; margin-right: 14px; }
}
@media (min-width: 769px) and (max-width: 1023px) {
    .mobile-overlay { top: 113px; }
}