/* =========================================================
   SHOWSHANK™ — STYLE.CSS FINAL ULTRA CLEAN PREMIUM
   Gotowy plik do podmiany: /assets/css/style.css
   ========================================================= */

:root {
    --bg: #090909;
    --panel: rgba(255, 255, 255, 0.052);
    --text: #f6f6f6;
    --text-soft: #bebebe;
    --text-muted: #8f8f8f;
    --accent: #ff7a00;
    --accent-strong: #ff8c1a;
    --accent-soft: #ffb066;
    --border: rgba(255, 255, 255, 0.10);
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.28);
    --shadow-medium: 0 22px 70px rgba(0, 0, 0, 0.40);
    --shadow-glow: 0 0 34px rgba(255, 122, 0, 0.14);
    --container: 1240px;
    --radius: 22px;
    --transition: 0.28s ease;
    --blur: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 122, 0, 0.10), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(255, 122, 0, 0.075), transparent 30%),
        linear-gradient(rgba(6, 6, 6, 0.90), rgba(6, 6, 6, 0.975)),
        url('/assets/img/bg-tech.png') center/cover no-repeat fixed;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 18%), rgba(255, 122, 0, 0.105), transparent 22%),
        linear-gradient(120deg, transparent 0%, rgba(255, 122, 0, 0.025) 36%, transparent 58%);
    opacity: 0.85;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { border: 0; background: transparent; cursor: pointer; }

.page-shell { position: relative; min-height: 100vh; isolation: isolate; }
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.section-spacing { position: relative; padding: 108px 0; }
.section-spacing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 1180px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), rgba(255,122,0,.22), rgba(255,255,255,.07), transparent);
}

.bg-overlay, .bg-orb, .bg-grid, .bg-lines { pointer-events: none; }
.bg-overlay { position: fixed; inset: 0; z-index: -5; background: radial-gradient(circle at 50% 100%, rgba(255,122,0,.04), transparent 42%), linear-gradient(180deg, rgba(5,5,5,.1), rgba(5,5,5,.45)); }
.bg-orb { position: fixed; z-index: -4; border-radius: 50%; filter: blur(74px); opacity: .55; }
.orb-1 { width: 360px; height: 360px; left: -90px; top: 60px; background: radial-gradient(circle, rgba(255,122,0,.24), transparent 70%); animation: floatOrb 12s ease-in-out infinite; }
.orb-2 { width: 440px; height: 440px; right: -130px; top: 430px; background: radial-gradient(circle, rgba(255,122,0,.14), transparent 72%); animation: floatOrb 15s ease-in-out infinite reverse; }
.bg-grid { position: fixed; inset: 0; z-index: -3; opacity: .055; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black 44%, transparent 100%); -webkit-mask-image: radial-gradient(circle at center, black 44%, transparent 100%); }
.bg-lines { position: fixed; inset: 0; z-index: -2; background: linear-gradient(120deg, transparent 0%, rgba(255,122,0,.03) 38%, transparent 62%), linear-gradient(300deg, transparent 0%, rgba(255,255,255,.018) 42%, transparent 64%); mix-blend-mode: screen; }

.glass-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.074), rgba(255,255,255,.032)), rgba(255,255,255,.012);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.052), var(--shadow-soft);
    transform-style: preserve-3d;
}
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,122,0,.18), rgba(255,255,255,.02));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .55;
}
.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 0%), rgba(255,122,0,.13), transparent 38%), linear-gradient(135deg, transparent, rgba(255,255,255,.034), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}
.glass-card:hover::after { opacity: 1; }

.section-heading { max-width: 850px; margin: 0 auto 54px; text-align: center; }
.section-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; color: var(--accent-strong); font-size: .8rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; text-shadow: 0 0 24px rgba(255,122,0,.24); }
.section-kicker::before, .section-kicker::after { content: ''; width: 38px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,122,0,.12), var(--accent)); box-shadow: 0 0 14px rgba(255,122,0,.35); animation: kickerLineGlow 3s ease-in-out infinite; }
.section-kicker::after { background: linear-gradient(90deg, var(--accent), rgba(255,122,0,.12)); }
.section-heading h2, .about-copy h2, .cta-copy h2, .contact-preview-copy h2, .service-flow-copy h2 { text-shadow: 0 18px 55px rgba(0,0,0,.44); }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.06; letter-spacing: -.035em; }
.section-heading p { max-width: 760px; margin: 20px auto 0; color: var(--text-soft); font-size: 1.03rem; line-height: 1.75; }

/* ===== HEADER — naprawiony przycisk i więcej miejsca ===== */
.site-header { position: sticky; top: 0; z-index: 1000; padding: 16px 0 0; transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition); }
.site-header.is-scrolled { background: rgba(5,5,5,.58); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.top-pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin-bottom: 12px; max-height: 90px; transition: opacity var(--transition), transform var(--transition), max-height var(--transition), padding var(--transition), margin var(--transition); }
.site-header.is-scrolled .top-pills { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.top-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.042); color: #ededed; font-size: .86rem; font-weight: 650; }
.header-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 104px; padding: 14px 18px; border-color: rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(10,10,10,.56); box-shadow: 0 20px 50px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05); transform-origin: top center; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.site-header.is-scrolled .header-bar { transform: scale(.965); border-color: rgba(255,122,0,.18); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,122,0,.035)), rgba(8,8,8,.76); }
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand--logo-only { flex-shrink: 0; }
.brand-rect { width: 292px; height: 88px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,122,0,.24); border-radius: 24px; background: linear-gradient(135deg, rgba(255,122,0,.15), rgba(255,122,0,.04)), rgba(255,255,255,.018); box-shadow: 0 0 0 1px rgba(255,122,0,.08), 0 0 30px rgba(255,122,0,.14), inset 0 0 22px rgba(255,255,255,.03); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.brand-rect:hover { transform: translateY(-2px) scale(1.012); border-color: rgba(255,122,0,.42); box-shadow: 0 0 0 1px rgba(255,122,0,.15), 0 0 42px rgba(255,122,0,.24), inset 0 0 28px rgba(255,255,255,.05); }
.brand-logo-full { max-width: 238px; max-height: 58px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255,122,0,.24)); }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.main-nav a { position: relative; padding: 10px 10px; border-radius: 12px; color: var(--text-soft); font-size: .9rem; font-weight: 650; white-space: nowrap; transition: color var(--transition), background var(--transition), transform var(--transition); }
.main-nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transition: transform var(--transition); }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.045); transform: translateY(-1px); }
.main-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; height: 100%; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: 17px; font-weight: 850; letter-spacing: .005em; line-height: 1.1; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #111; background: linear-gradient(135deg, var(--accent), #ff9a3c); box-shadow: 0 12px 28px rgba(255,122,0,.26), 0 0 24px rgba(255,122,0,.16); }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.34), transparent 36%, transparent 70%, rgba(255,255,255,.18)); pointer-events: none; }
.btn-primary:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 18px 40px rgba(255,122,0,.34), 0 0 34px rgba(255,122,0,.22); }
.btn-secondary { color: var(--text); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.btn-secondary:hover { border-color: rgba(255,122,0,.3); background: rgba(255,122,0,.08); box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 22px rgba(255,122,0,.08); }
.btn-full { width: 100%; }
.nav-toggle { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.04); transition: border-color var(--transition), background var(--transition), transform var(--transition); }
.nav-toggle:hover { border-color: rgba(255,122,0,.38); background: rgba(255,122,0,.08); transform: translateY(-1px); }
.nav-toggle span { width: 22px; height: 2px; border-radius: 999px; background: #fff; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav { display: none; margin-top: 14px; padding: 18px; flex-direction: column; gap: 10px; }
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: 12px 14px; border-radius: 14px; color: var(--text-soft); transition: background var(--transition), color var(--transition); }
.mobile-nav a:hover { background: rgba(255,255,255,.045); color: #fff; }

/* ===== HERO ===== */
.hero-section { position: relative; padding: 82px 0 88px; }
.hero-section--premium::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background: linear-gradient(115deg, transparent 0%, rgba(255,122,0,.08) 34%, transparent 52%), linear-gradient(245deg, transparent 0%, rgba(255,255,255,.04) 42%, transparent 60%); animation: heroEnergySweep 9s ease-in-out infinite; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero-copy { position: relative; }
.hero-copy::before { content: ''; position: absolute; top: -28px; left: -30px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.16), transparent 68%); filter: blur(8px); pointer-events: none; animation: premiumPulse 4.8s ease-in-out infinite; }
.hero-title { max-width: 820px; margin: 0; font-size: clamp(3rem, 5.4vw, 5.9rem); font-weight: 950; line-height: .92; letter-spacing: -.058em; text-wrap: balance; color: transparent; background: linear-gradient(180deg, #fff 0%, #fff4e7 48%, #d8d8d8 100%); -webkit-background-clip: text; background-clip: text; }
.hero-title span { display: block; max-width: 780px; margin-top: 20px; color: var(--text-soft); background: none; -webkit-background-clip: initial; background-clip: initial; font-size: clamp(1.12rem, 2vw, 1.82rem); font-weight: 650; line-height: 1.24; letter-spacing: -.022em; }
.hero-text { max-width: 720px; margin: 30px 0 0; color: var(--text-soft); font-size: 1.08rem; line-height: 1.8; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-badge { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.045); color: #ededed; font-size: .92rem; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.stat-card { min-height: 122px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition), filter var(--transition); }
.stat-card:hover { transform: translateY(-4px); border-color: rgba(255,122,0,.28); box-shadow: var(--shadow-soft), var(--shadow-glow); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,122,0,.05)), rgba(255,255,255,.02); filter: saturate(1.08); }
.stat-card strong { display: block; margin-bottom: 10px; color: var(--accent-strong); font-size: 1.52rem; font-weight: 950; line-height: 1.1; }
.stat-card span { color: var(--text-soft); font-size: .95rem; }
.hero-media-frame { position: relative; min-height: 720px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 34px; box-shadow: var(--shadow-medium), 0 0 90px rgba(255,122,0,.1); }
.hero-photo { width: 100%; height: 100%; min-height: 720px; object-fit: cover; transform: scale(1.02); filter: contrast(1.04) saturate(1.06); }
.hero-media-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,8,8,.14) 0%, rgba(8,8,8,.02) 24%, rgba(8,8,8,.62) 100%), radial-gradient(circle at 82% 20%, rgba(255,122,0,.2), transparent 28%); }
.hero-media-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; padding: 11px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(10,10,10,.46); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #f2f2f2; box-shadow: 0 10px 24px rgba(0,0,0,.24); font-size: .9rem; }
.hero-media-chip--top { top: 22px; left: 22px; font-weight: 850; letter-spacing: .04em; }
.hero-media-chip--bottom { right: 22px; bottom: 22px; color: #dedede; font-size: .86rem; }
.hero-media-panel { position: absolute; z-index: 2; left: 22px; bottom: 22px; max-width: 340px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(9,9,9,.48); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 34px rgba(0,0,0,.24); }
.hero-media-panel span { display: inline-flex; margin-bottom: 10px; color: var(--accent-soft); font-size: .78rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.hero-media-panel strong { display: block; color: #fff; font-size: 1.05rem; line-height: 1.35; }
.hero-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; padding: 22px 26px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,122,0,.03)), rgba(255,255,255,.015); }
.hero-strip-item { position: relative; padding-left: 18px; }
.hero-strip-item::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, var(--accent), rgba(255,122,0,.12)); box-shadow: 0 0 18px rgba(255,122,0,.34); }
.hero-strip-item strong { display: block; margin-bottom: 8px; font-size: 1rem; line-height: 1.25; }
.hero-strip-item span { display: block; color: var(--text-soft); font-size: .94rem; line-height: 1.5; }

/* ===== CARDS / CONTENT SECTIONS ===== */
.services-grid, .trust-grid, .faq-grid, .testimonials-grid, .sales-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-card, .trust-card, .faq-card, .testimonial-card, .portfolio-showcase-card, .service-flow-card, .sales-card, .advantage-card, .process-card, .contact-point { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), filter var(--transition); }
.service-card:hover, .trust-card:hover, .faq-card:hover, .testimonial-card:hover, .portfolio-showcase-card:hover, .service-flow-card:hover, .sales-card:hover, .advantage-card:hover, .process-card:hover, .contact-point:hover { transform: translateY(-8px); border-color: rgba(255,122,0,.28); box-shadow: var(--shadow-medium), var(--shadow-glow); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,122,0,.05)), rgba(255,255,255,.02); filter: saturate(1.08); }
.service-card:hover h3, .portfolio-showcase-card:hover h3, .home-realization-card:hover h3, .advantage-card:hover h3, .process-card:hover h3, .faq-card:hover h3 { color: #fff4e8; text-shadow: 0 0 22px rgba(255,122,0,.16); }
.service-card { min-height: 100%; padding: 0 0 30px; overflow: hidden; display: flex; flex-direction: column; }
.service-media { position: relative; height: 250px; overflow: hidden; border-radius: 22px 22px 0 0; margin-bottom: 22px; }
.service-photo { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.06); transition: transform .45s ease, filter .45s ease; }
.service-card:hover .service-photo, .portfolio-showcase-card:hover .portfolio-showcase-photo { transform: scale(1.06); filter: contrast(1.08) saturate(1.14) brightness(1.04); }
.service-media-shadow { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,9,.02) 0%, rgba(9,9,9,.62) 100%); }
.service-media-badge { position: absolute; top: 16px; left: 16px; min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(10,10,10,.54); color: #fff; font-weight: 950; letter-spacing: .08em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.service-topline, .service-card h3, .service-card p, .service-list, .service-action { padding-left: 28px; padding-right: 28px; }
.service-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.service-number { color: var(--accent-strong); font-size: .82rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.service-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(255,122,0,.18); border-radius: 16px; background: radial-gradient(circle at center, rgba(255,122,0,.16), rgba(255,122,0,.03) 60%); box-shadow: 0 0 24px rgba(255,122,0,.08); font-size: 1.45rem; }
.service-card h3, .trust-card h3, .faq-card h3, .testimonial-card h3, .portfolio-showcase-content h3, .service-flow-card h3, .sales-card h3 { margin: 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.service-card p, .trust-card p, .faq-card p, .portfolio-showcase-content p, .service-flow-card p, .sales-card p { margin: 18px 0 0; color: var(--text-soft); line-height: 1.75; }
.service-list { margin: 22px 0 0; list-style: none; display: grid; gap: 12px; }
.service-list li { position: relative; padding-left: 22px; color: #ddd; }
.service-list li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, var(--accent), #ffb066); box-shadow: 0 0 14px rgba(255,122,0,.34); transform: translateY(-50%); }
.service-action { margin-top: auto; padding-top: 26px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-strong); font-weight: 800; transition: gap var(--transition), color var(--transition), transform var(--transition); }
.text-link::after { content: '→'; transition: transform var(--transition); }
.text-link:hover { gap: 14px; color: #ffb066; transform: translateX(2px); }

.service-flow-box { padding: 38px; border-color: rgba(255,122,0,.16); background: radial-gradient(circle at 16% 88%, rgba(255,122,0,.11), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,122,0,.06)), rgba(255,255,255,.02); }
.service-flow-copy { max-width: 860px; margin-bottom: 28px; }
.service-flow-copy h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; }
.service-flow-copy p { margin: 18px 0 0; color: var(--text-soft); font-size: 1.03rem; line-height: 1.8; }
.service-flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-flow-card, .sales-card, .trust-card, .faq-card, .testimonial-card { padding: 24px; }
.service-flow-action { margin-top: 34px; display: flex; justify-content: center; }

/* ===== DELIVERY ===== */
.delivery-section { position: relative; }
.delivery-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch; }
.delivery-info, .delivery-map-card { position: relative; overflow: hidden; padding: 28px; }
.delivery-info::before, .delivery-map-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,122,0,.14), transparent 35%), radial-gradient(circle at bottom left, rgba(255,255,255,.045), transparent 34%); pointer-events: none; }
.delivery-info > *, .delivery-map-card > * { position: relative; z-index: 1; }
.delivery-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 9px 12px; border: 1px solid rgba(255,122,0,.24); border-radius: 999px; background: rgba(255,122,0,.12); color: #fff; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.delivery-info h3 { margin: 0 0 14px; font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.08; letter-spacing: -.045em; }
.delivery-info p { margin: 0; color: rgba(255,255,255,.74); line-height: 1.78; }
.delivery-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.delivery-point { padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; background: rgba(255,255,255,.045); }
.delivery-point strong { display: block; color: #fff; font-size: 1.55rem; line-height: 1; letter-spacing: -.04em; }
.delivery-point span { display: block; margin-top: 8px; color: rgba(255,255,255,.64); font-size: .9rem; line-height: 1.45; }
.delivery-note { margin-top: 20px; padding: 18px; border: 1px solid rgba(255,122,0,.22); border-radius: 22px; background: rgba(255,122,0,.08); }
.delivery-note strong { display: block; margin-bottom: 8px; color: #fff; }
.delivery-note p { margin: 0; }
.delivery-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.delivery-map-card { min-height: 100%; }
.delivery-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.delivery-map-head span { color: rgba(255,255,255,.58); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.delivery-map-head strong { color: #fff; font-size: 1.2rem; }
.delivery-map-wrap { position: relative; min-height: 440px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: rgba(0,0,0,.18); }
.delivery-map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.delivery-map-wrap--real::after { display: none; }

/* ===== PORTFOLIO / REALIZACJE HOME ===== */
.portfolio-showcase { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.portfolio-showcase-card { min-height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.portfolio-showcase-card--large { grid-row: span 2; }
.portfolio-showcase-media { position: relative; height: 280px; overflow: hidden; }
.portfolio-showcase-card--large .portfolio-showcase-media { height: 360px; }
.portfolio-showcase-photo { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.06); transition: transform .45s ease, filter .45s ease; }
.portfolio-showcase-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,9,.06) 0%, rgba(9,9,9,.62) 100%), radial-gradient(circle at 82% 20%, rgba(255,122,0,.12), transparent 28%); }
.portfolio-showcase-content { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.portfolio-type { display: inline-flex; margin-bottom: 16px; color: var(--accent-strong); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 24px; flex-wrap: wrap; }
.portfolio-tag { display: inline-flex; padding: 10px 14px; border-radius: 999px; color: #111; background: linear-gradient(135deg, var(--accent), #ffb066); box-shadow: 0 10px 22px rgba(255,122,0,.18); font-size: .82rem; font-weight: 800; }
.home-realizations-section { position: relative; }
.home-realizations-section::after { content: ''; position: absolute; left: 50%; top: 12%; z-index: -1; width: min(760px, 86vw); height: min(760px, 86vw); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.075), transparent 70%); pointer-events: none; }
.home-realizations-grid { display: grid; grid-template-columns: 1.08fr .92fr .92fr; gap: 24px; align-items: stretch; }
.home-realization-card { position: relative; min-height: 100%; overflow: hidden; display: flex; flex-direction: column; border-color: rgba(255,122,0,.12); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition), filter var(--transition); }
.home-realization-card::after { content: ''; position: absolute; right: -95px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.15), transparent 70%); pointer-events: none; opacity: .7; transition: opacity var(--transition), transform var(--transition); }
.home-realization-card:hover { transform: translateY(-9px) scale(1.01); border-color: rgba(255,122,0,.3); box-shadow: var(--shadow-medium), 0 0 42px rgba(255,122,0,.13); background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,122,0,.055)), rgba(255,255,255,.02); filter: saturate(1.08); }
.home-realization-card:hover::after { opacity: 1; transform: scale(1.08); }
.home-realization-media { position: relative; height: 292px; overflow: hidden; border-radius: 22px 22px 0 0; background: rgba(0,0,0,.25); }
.home-realization-card:first-child .home-realization-media { height: 330px; }
.home-realization-media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.08); transition: transform .58s ease, filter .58s ease; }
.home-realization-card:hover .home-realization-media img { transform: scale(1.07); filter: contrast(1.1) saturate(1.18) brightness(1.03); }
.home-realization-media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 18% 18%, rgba(255,122,0,.14), transparent 28%), linear-gradient(180deg, rgba(8,8,8,.02) 0%, rgba(8,8,8,.26) 45%, rgba(8,8,8,.78) 100%); pointer-events: none; }
.home-realization-media span { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,122,0,.28); border-radius: 999px; background: rgba(10,10,10,.56); color: #fff4e8; font-size: .74rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 12px rgba(255,122,0,.11), 0 10px 24px rgba(0,0,0,.28); }
.home-realization-content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.home-realization-content h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.08; letter-spacing: -.04em; }
.home-realization-content p { margin: 0; color: var(--text-soft); line-height: 1.75; }
.home-realization-content ul { display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.home-realization-content li { position: relative; padding-left: 24px; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.55; }
.home-realization-content li::before { content: ''; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle, #ffb066, #ff7a00); box-shadow: 0 0 14px rgba(255,122,0,.46); }
.home-realization-content .text-link { margin-top: auto; padding-top: 8px; }
.home-realizations-action { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ===== ABOUT / PROCESS / CTA / CONTACT / PRICING ===== */
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 32px; align-items: start; }
.about-copy { padding-right: 18px; }
.about-copy h2, .cta-copy h2, .contact-preview-copy h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; }
.about-copy p, .cta-copy p, .contact-preview-copy p { margin: 20px 0 0; color: var(--text-soft); line-height: 1.8; }
.advantages-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.advantage-card, .process-card, .contact-point { padding: 24px; }
.advantage-card { min-height: 180px; }
.advantage-card h3, .process-card h3 { margin: 0 0 14px; font-size: 1.2rem; letter-spacing: -.02em; }
.advantage-card p, .process-card p { margin: 0; color: var(--text-soft); line-height: 1.7; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.process-card { min-height: 230px; }
.process-step { display: inline-flex; margin-bottom: 18px; color: var(--accent-strong); font-size: .82rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.cta-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 42px; border-color: rgba(255,122,0,.16); border-radius: 30px; background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,122,0,.07)), rgba(255,255,255,.02); box-shadow: var(--shadow-medium), 0 0 55px rgba(255,122,0,.08); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.contact-preview-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: stretch; }
.contact-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.contact-point strong { display: block; margin-bottom: 8px; font-size: 1rem; }
.contact-point span { color: var(--text-soft); font-size: .96rem; line-height: 1.6; }
.contact-preview-card { padding: 32px; display: flex; flex-direction: column; justify-content: center; border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,122,0,.05)), rgba(255,255,255,.015); box-shadow: var(--shadow-medium), 0 0 50px rgba(255,122,0,.08); }
.contact-preview-kicker { display: inline-flex; margin-bottom: 14px; color: var(--accent-soft); font-size: .8rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.contact-preview-card h3 { margin: 0; font-size: 1.8rem; line-height: 1.1; letter-spacing: -.03em; }
.contact-preview-card p { margin: 18px 0 22px; color: var(--text-soft); line-height: 1.75; }
.contact-preview-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.contact-preview-list span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); color: #ededed; font-size: .88rem; font-weight: 650; }
.home-pricing-section { position: relative; }
.home-pricing-section::after { content: ''; position: absolute; left: 50%; top: 18%; z-index: -1; width: min(620px, 80vw); height: min(620px, 80vw); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.08), transparent 70%); pointer-events: none; }
.home-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-pricing-card { position: relative; min-height: 250px; overflow: hidden; display: flex; flex-direction: column; padding: 28px; border-color: rgba(255,122,0,.12); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), filter var(--transition); }
.home-pricing-card::after { content: ''; position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,0,.14), transparent 70%); pointer-events: none; }
.home-pricing-card:hover { transform: translateY(-8px) scale(1.012); border-color: rgba(255,122,0,.28); box-shadow: var(--shadow-medium), var(--shadow-glow); background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,122,0,.055)), rgba(255,255,255,.02); filter: saturate(1.08); }
.home-pricing-card span { display: inline-flex; align-items: center; width: fit-content; min-height: 40px; padding: 0 17px; border: 1px solid rgba(255,122,0,.34); border-radius: 999px; color: #ffb36a; background: radial-gradient(circle at 14% 50%, rgba(255,122,0,.18), transparent 34%), rgba(255,122,0,.12); box-shadow: inset 0 0 14px rgba(255,122,0,.16), 0 0 12px rgba(255,122,0,.12); font-size: .78rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.home-pricing-card strong { display: block; margin-top: 28px; color: #fff; font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 950; line-height: .98; letter-spacing: -.055em; text-shadow: 0 0 24px rgba(255,122,0,.18), 0 12px 34px rgba(0,0,0,.4); }
.home-pricing-card p { margin: 20px 0 0; color: var(--text-soft); font-weight: 600; line-height: 1.75; }
.home-pricing-action { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ===== FOOTER ===== */
.site-footer { padding: 0 0 28px; }
.footer-bar { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px; }
.footer-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255,122,0,.08) 45%, transparent 62%); transform: translateX(-130%); animation: footerSweep 9s ease-in-out infinite; }
.footer-brand { display: inline-flex; align-items: center; gap: 14px; }
.footer-logo { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255,122,0,.2)); flex-shrink: 0; }
.footer-brand strong { display: block; font-size: 1rem; }
.footer-brand span { display: block; color: var(--text-muted); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.footer-links a { padding: 10px 12px; border-radius: 12px; color: var(--text-soft); transition: background var(--transition), color var(--transition); }
.footer-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.footer-copy { color: var(--text-muted); font-size: .9rem; text-align: right; }

.reveal { opacity: 0; transform: translateY(32px) scale(.985); transition: opacity .8s ease, transform .8s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.tilt-card { transform-style: preserve-3d; will-change: transform; }
.tilt-card > * { transform: translateZ(0); }
::selection { background: rgba(255,122,0,.26); color: #fff; }

@keyframes floatOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-20px,0) scale(1.04); } }
@keyframes heroEnergySweep { 0%,45% { transform: translateX(-6%) skewX(-8deg); opacity: .18; } 100% { transform: translateX(6%) skewX(-8deg); opacity: .34; } }
@keyframes premiumPulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes kickerLineGlow { 0%,100% { opacity: .62; box-shadow: 0 0 10px rgba(255,122,0,.22); } 50% { opacity: 1; box-shadow: 0 0 18px rgba(255,122,0,.46); } }
@keyframes footerSweep { 0%,55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1240px) {
    .brand-rect { width: 260px; }
    .brand-logo-full { max-width: 212px; }
    .main-nav { gap: 3px; }
    .main-nav a { padding-left: 8px; padding-right: 8px; font-size: .86rem; }
    .header-actions .btn { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 1120px) {
    .main-nav, .header-actions { display: none; }
    .nav-toggle { display: inline-flex; }
    .header-bar { grid-template-columns: auto auto; justify-content: space-between; }
}
@media (max-width: 1180px) {
    .hero-grid, .about-grid, .contact-preview-grid, .portfolio-showcase, .service-flow-grid, .sales-grid, .delivery-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; }
    .hero-media-frame, .hero-photo { min-height: 560px; }
    .hero-strip { grid-template-columns: 1fr; }
    .portfolio-showcase-card--large { grid-row: auto; }
    .services-grid, .trust-grid, .faq-grid, .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta-box, .footer-bar, .realization-grid, .realizations-cta-box, .realizations-stats-grid { grid-template-columns: 1fr; }
    .cta-actions, .realizations-cta-actions { justify-content: flex-start; }
    .footer-links, .footer-copy { justify-content: flex-start; text-align: left; }
    .home-realizations-grid { grid-template-columns: 1fr; }
    .home-realization-media, .home-realization-card:first-child .home-realization-media { height: 320px; }
    .delivery-map-wrap { min-height: 400px; }
}
@media (max-width: 960px) {
    .site-header { padding-top: 14px; }
    .site-header.is-scrolled .header-bar { transform: scale(.98); }
    .hero-section { padding-top: 48px; padding-bottom: 60px; }
    .hero-grid { gap: 34px; }
    .hero-title { font-size: clamp(2.3rem, 8vw, 4rem); }
    .hero-stats, .advantages-grid, .contact-points, .trust-grid, .faq-grid, .testimonials-grid, .services-grid, .process-grid { grid-template-columns: 1fr; }
    .section-spacing { padding: 88px 0; }
    .header-bar { min-height: 88px; }
    .brand-rect { width: 250px; height: 78px; border-radius: 22px; }
    .brand-logo-full { max-width: 202px; max-height: 50px; }
    .hero-media-frame, .hero-photo { min-height: 460px; }
    .portfolio-showcase-media, .portfolio-showcase-card--large .portfolio-showcase-media { height: 260px; }
    .service-flow-box { padding: 26px; }
}
@media (max-width: 760px) {
    .realizations-hero-box, .realizations-cta-box, .status-hero-box { padding: 26px 20px; }
    .realization-body { padding: 22px 18px; }
    .realization-list, .realization-gallery, .home-pricing-grid { grid-template-columns: 1fr; }
    .status-form { flex-direction: column; }
    .status-form button { width: 100%; }
    .home-pricing-card { min-height: auto; }
    .home-pricing-action, .home-realizations-action { flex-direction: column; align-items: stretch; }
    .delivery-info, .delivery-map-card { padding: 22px 18px; }
    .delivery-points { grid-template-columns: 1fr; }
    .delivery-actions .btn { width: 100%; }
    .delivery-map-head { display: grid; }
    .delivery-map-wrap { min-height: 360px; }
}
@media (max-width: 640px) {
    body::before { display: none; }
    .container { width: min(calc(100% - 22px), var(--container)); }
    .top-pills { padding: 10px 12px; }
    .header-bar { padding: 12px 14px; border-radius: 18px; }
    .mobile-nav { padding: 14px; border-radius: 18px; }
    .section-kicker { gap: 8px; font-size: .74rem; letter-spacing: .14em; }
    .section-kicker::before, .section-kicker::after { width: 24px; }
    .hero-title span { margin-top: 14px; font-size: 1rem; }
    .hero-text, .section-heading p, .about-copy p, .cta-copy p, .contact-preview-copy p, .service-flow-copy p { font-size: .98rem; }
    .hero-media-frame, .hero-photo { min-height: 360px; }
    .hero-media-chip--top { top: 14px; left: 14px; }
    .hero-media-chip--bottom { right: 14px; bottom: 14px; max-width: calc(100% - 28px); }
    .hero-media-panel { left: 14px; right: 14px; bottom: 64px; max-width: none; padding: 16px; }
    .brand-rect { width: 215px; height: 68px; border-radius: 18px; }
    .brand-logo-full { max-width: 168px; max-height: 42px; }
    .service-media { height: 220px; }
    .service-topline, .service-card h3, .service-card p, .service-list, .service-action { padding-left: 22px; padding-right: 22px; }
    .service-card, .advantage-card, .process-card, .contact-preview-card { padding-bottom: 22px; }
    .trust-card, .faq-card, .testimonial-card, .portfolio-showcase-content, .service-flow-card, .sales-card { padding: 22px; }
    .cta-box { padding: 24px; border-radius: 24px; }
    .footer-bar { padding: 18px; }
    .footer-logo { width: 52px; height: 52px; }
    .btn { width: 100%; }
    .hero-actions, .cta-actions, .portfolio-showcase-footer { flex-direction: column; align-items: stretch; }
    .hero-actions .btn, .cta-actions .btn { width: 100%; }
    .hero-badges, .hero-strip, .contact-preview-list { gap: 10px; }
    .section-spacing { padding: 72px 0; }
    .home-realization-media, .home-realization-card:first-child .home-realization-media { height: 250px; }
    .home-realization-content { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .tilt-card { transform: none !important; }
}


/* =========================================================
   SHOWSHANK™ — REAL PATCH 2026-05
   Poprawka na Twoim pełnym style.css:
   - porządkuje kafle usług / szybkie skróty,
   - usuwa tanią strzałkę z narożnika,
   - poprawia sekcję "Mobilny serwis w praktyce",
   - nie rusza reszty layoutu.
   ========================================================= */

/* Lepszy offset dla sticky header przy klikaniu w kotwice */
html {
    scroll-padding-top: 138px;
}

/* Karty usług / szybkie kafle — clean premium */
.services-grid .service-card {
    position: relative;
    min-height: 100%;
    padding-bottom: 92px;
    border-radius: 28px;
    overflow: hidden;
}

.services-grid .service-card:not(:has(.service-media)) {
    padding: 28px 28px 92px;
    background:
        radial-gradient(circle at 88% 10%, rgba(255,122,0,.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.028)),
        rgba(255,255,255,.014);
}

.services-grid .service-card:not(:has(.service-media)) .service-topline,
.services-grid .service-card:not(:has(.service-media)) h3,
.services-grid .service-card:not(:has(.service-media)) p,
.services-grid .service-card:not(:has(.service-media)) .service-action {
    padding-left: 0;
    padding-right: 0;
}

.services-grid .service-card::after {
    content: none !important;
}

.services-grid .service-card .service-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,122,0,.22), transparent 62%),
        rgba(255,122,0,.065);
    border-color: rgba(255,122,0,.24);
    box-shadow: inset 0 0 22px rgba(255,122,0,.055), 0 0 28px rgba(255,122,0,.06);
}

.services-grid .service-card .service-number--icon,
.services-grid .service-card .service-number {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,122,0,.20), transparent 64%),
        rgba(255,122,0,.07);
    border: 1px solid rgba(255,122,0,.23);
    box-shadow: inset 0 0 22px rgba(255,122,0,.05), 0 0 28px rgba(255,122,0,.06);
    font-size: 1.18rem;
    letter-spacing: 0;
    text-transform: none;
}

.services-grid .service-card h3 {
    margin-top: 4px;
    max-width: calc(100% - 56px);
}

.services-grid .service-card p {
    max-width: 95%;
}

.services-grid .service-action {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 0;
    padding-top: 0;
}

.services-grid .service-action::after {
    content: '→';
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ff8c1a;
    background: rgba(255,122,0,.10);
    border: 1px solid rgba(255,122,0,.30);
    box-shadow: inset 0 0 18px rgba(255,122,0,.06);
    font-size: 1.05rem;
    font-weight: 950;
    transition: transform var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.services-grid .service-card:hover .service-action::after {
    transform: translateX(5px);
    color: #111;
    background: linear-gradient(135deg, var(--accent), #ffb066);
    border-color: rgba(255,122,0,.55);
    box-shadow: 0 0 26px rgba(255,122,0,.28);
}

.services-grid .service-action .text-link::after {
    content: none;
}

.services-grid .service-action .text-link {
    min-width: 0;
    line-height: 1.25;
}

/* Sekcja mobilnego serwisu — reset poprzednich eksperymentów */
.mobile-practice-section {
    position: relative;
}

.mobile-practice-shell,
.mobile-practice-copy,
.mobile-practice-visual {
    position: relative;
}

.mobile-practice-shell {
    overflow: hidden;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 20%, rgba(255,122,0,.13), transparent 34%),
        radial-gradient(circle at 12% 76%, rgba(255,122,0,.08), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.032)),
        rgba(255,255,255,.012);
    box-shadow: var(--shadow-medium), 0 0 46px rgba(255,122,0,.07);
}

.mobile-practice-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: .16;
    mask-image: radial-gradient(circle at center, black 0 48%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at center, black 0 48%, transparent 78%);
}

.mobile-practice-shell > * {
    position: relative;
    z-index: 2;
}

.mobile-practice-head {
    max-width: 840px;
    margin-bottom: 28px;
}

.mobile-practice-head h2,
.mobile-practice-copy h2 {
    margin: 0;
    font-size: clamp(2.05rem, 4.7vw, 4.15rem);
    line-height: .99;
    letter-spacing: -.06em;
    text-wrap: balance;
}

.mobile-practice-head p,
.mobile-practice-copy p {
    max-width: 730px;
    margin: 16px 0 0;
    color: var(--text-soft);
    font-size: 1.02rem;
    line-height: 1.72;
}

.mobile-practice-layout,
.mobile-practice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 28px;
    align-items: center;
}

.mobile-practice-steps {
    display: grid;
    gap: 14px;
    margin-top: 0;
}

.practice-step-card,
.mobile-practice-steps article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 18px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024)),
        rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.practice-step-card:hover,
.mobile-practice-steps article:hover {
    transform: translateY(-4px);
    border-color: rgba(255,122,0,.25);
    background:
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,122,0,.045)),
        rgba(255,255,255,.014);
    box-shadow: 0 20px 54px rgba(0,0,0,.22), 0 0 26px rgba(255,122,0,.08);
}

.practice-step-card span,
.mobile-practice-steps article span {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,122,0,.12);
    border: 1px solid rgba(255,122,0,.30);
    color: #ffb36b;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .06em;
    box-shadow: 0 0 24px rgba(255,122,0,.08);
}

.practice-step-card strong,
.mobile-practice-steps article strong {
    display: block;
    color: #fff;
    font-size: 1.08rem;
    letter-spacing: -.025em;
}

.practice-step-card p,
.mobile-practice-steps article p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.66);
    line-height: 1.58;
    font-size: .96rem;
}

.mobile-practice-visual {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: 0;
    overflow: visible;
    background: transparent;
    min-height: initial;
}

.status-device,
.mobile-practice-phone {
    width: min(330px, 100%);
    padding: 12px;
    border-radius: 42px;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 30px 82px rgba(0,0,0,.44), 0 0 54px rgba(255,122,0,.10);
    transform: rotate(-1deg);
}

.status-device-notch,
.phone-top {
    width: 86px;
    height: 21px;
    margin: 0 auto 10px;
    border-radius: 0 0 18px 18px;
    background: rgba(0,0,0,.50);
}

.status-device-screen,
.phone-screen {
    min-height: 420px;
    padding: 22px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(255,122,0,.17), transparent 42%),
        linear-gradient(180deg, rgba(8,12,18,.98), rgba(5,8,12,.98));
    border: 1px solid rgba(255,255,255,.08);
}

.status-device-brand,
.phone-kicker {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    color: #ffb36b;
    background: rgba(255,122,0,.12);
    border: 1px solid rgba(255,122,0,.24);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.status-device-screen h3,
.phone-screen h3 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: 1.55rem;
    letter-spacing: -.045em;
}

.status-main-pill,
.phone-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,122,0,.13);
    border: 1px solid rgba(255,122,0,.28);
}

.status-main-pill i,
.phone-status span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ff7a00;
    box-shadow: 0 0 20px rgba(255,122,0,.70);
    animation: statusPulse 1.8s ease-in-out infinite;
}

.status-main-pill strong,
.phone-status strong {
    color: #fff;
    font-size: .98rem;
}

.status-timeline,
.phone-route {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.status-timeline-item,
.route-point {
    position: relative;
    padding: 15px 15px 15px 46px;
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
}

.status-timeline-item::before,
.route-point::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 20px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

.status-timeline-item.is-done::before,
.status-timeline-item.is-active::before,
.route-point.is-done::before,
.route-point.is-active::before {
    background: #ff7a00;
    box-shadow: 0 0 18px rgba(255,122,0,.55);
}

.status-timeline-item.is-active,
.route-point.is-active {
    border-color: rgba(255,122,0,.28);
    background: rgba(255,122,0,.08);
}

.status-timeline-item b,
.route-point b {
    display: block;
    color: #fff;
    font-size: .96rem;
}

.status-timeline-item small,
.route-point small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.58);
    line-height: 1.45;
}

.practice-benefit-row,
.mobile-practice-benefits {
    width: min(430px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: static;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
}

.practice-benefit-row div,
.mobile-practice-benefits div {
    padding: 16px;
    text-align: left;
    border-radius: 22px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.075);
}

.practice-benefit-row strong,
.mobile-practice-benefits strong {
    display: block;
    color: #fff;
    font-size: .98rem;
    letter-spacing: -.02em;
}

.practice-benefit-row span,
.practice-benefit-row small,
.mobile-practice-benefits span,
.mobile-practice-benefits small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.60);
    font-size: .88rem;
    line-height: 1.45;
}

.mobile-practice-map {
    display: none !important;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(.88); opacity: .72; }
    50% { transform: scale(1.18); opacity: 1; }
}

@media (max-width: 1040px) {
    .mobile-practice-layout,
    .mobile-practice-grid {
        grid-template-columns: 1fr;
    }

    .mobile-practice-visual {
        margin-top: 10px;
    }
}

@media (max-width: 720px) {
    html {
        scroll-padding-top: 96px;
    }

    .mobile-practice-shell {
        padding: 22px 16px;
        border-radius: 24px;
    }

    .mobile-practice-head h2,
    .mobile-practice-copy h2 {
        font-size: clamp(2rem, 12vw, 3.15rem);
    }

    .practice-step-card,
    .mobile-practice-steps article {
        grid-template-columns: 50px 1fr;
        padding: 15px;
        min-height: auto;
    }

    .practice-step-card span,
    .mobile-practice-steps article span {
        width: 44px;
        height: 44px;
        border-radius: 16px;
    }

    .status-device,
    .mobile-practice-phone {
        width: 100%;
        transform: none;
    }

    .status-device-screen,
    .phone-screen {
        min-height: 390px;
    }

    .practice-benefit-row,
    .mobile-practice-benefits {
        grid-template-columns: 1fr;
    }

    .services-grid .service-card {
        padding-bottom: 90px;
    }

    .services-grid .service-action {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .services-grid .service-action::after {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-main-pill i,
    .phone-status span {
        animation: none !important;
    }
}


/* =========================================================
   SHOWSHANK™ — ETAP 1 / ANIMACJE PREMIUM
   Subtelne micro-interactions:
   - ikony SVG lekko oddychają,
   - karty mają premium hover,
   - CTA ma delikatny sweep/glow,
   - sekcje wchodzą płynniej,
   - bez przesadzonych latających napisów.
   ========================================================= */

/* Delikatne, bardziej premium wejście sekcji */
.reveal {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    filter: blur(5px);
    transition:
        opacity .82s cubic-bezier(.22, 1, .36, 1),
        transform .82s cubic-bezier(.22, 1, .36, 1),
        filter .82s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* CTA — subtelny sweep, nie krzykliwy */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -45%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transform: rotate(18deg) translateX(-160%);
    opacity: .0;
    pointer-events: none;
}

.btn-primary:hover::after {
    opacity: .7;
    animation: premiumButtonSweep 1.05s ease forwards;
}

/* Ikony SVG — lekki oddech i glow */
.ss-icon {
    position: relative;
    isolation: isolate;
    transition:
        transform .32s cubic-bezier(.22, 1, .36, 1),
        border-color .32s ease,
        box-shadow .32s ease,
        background .32s ease;
}

.ss-icon::before {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,122,0,.18), transparent 70%);
    opacity: .45;
    transform: scale(.9);
    transition: opacity .32s ease, transform .32s ease;
}

.service-card:hover .ss-icon,
.practice-step-card:hover .ss-icon,
.mobile-practice-steps article:hover .ss-icon {
    transform: translateY(-2px) scale(1.035);
    border-color: rgba(255,122,0,.36);
    box-shadow:
        inset 0 0 24px rgba(255,122,0,.07),
        0 0 34px rgba(255,122,0,.13);
}

.service-card:hover .ss-icon::before,
.practice-step-card:hover .ss-icon::before,
.mobile-practice-steps article:hover .ss-icon::before {
    opacity: .9;
    transform: scale(1.18);
}

/* Karty usług — płynniejszy, bardziej profesjonalny hover */
.services-grid .service-card {
    will-change: transform;
}

.services-grid .service-card::before {
    transition: opacity .32s ease;
}

.services-grid .service-card:hover {
    transform: translateY(-7px) scale(1.006);
}

.services-grid .service-card:not(:has(.service-media))::before {
    opacity: .72;
}

.services-grid .service-card:not(:has(.service-media)):hover::before {
    opacity: 1;
}

/* Strzałka CTA w karcie — bardziej responsywna */
.services-grid .service-action::after {
    will-change: transform;
}

.services-grid .service-card:hover .service-action::after {
    animation: serviceArrowNudge .82s ease both;
}

/* Karty kroków mobilnego serwisu */
.practice-step-card,
.mobile-practice-steps article {
    will-change: transform;
}

.practice-step-card:hover,
.mobile-practice-steps article:hover {
    transform: translateY(-5px) scale(1.004);
}

/* Telefon/status — delikatne pływanie, tylko desktop */
.status-device,
.mobile-practice-phone {
    animation: deviceFloat 6.8s ease-in-out infinite;
}

.status-main-pill i,
.phone-status span {
    animation: statusPulse 1.8s ease-in-out infinite;
}

/* Hero photo — spokojny premium zoom na hover */
.hero-media-frame {
    overflow: hidden;
}

.hero-media-frame .hero-photo {
    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        filter .9s cubic-bezier(.22, 1, .36, 1);
}

.hero-media-frame:hover .hero-photo {
    transform: scale(1.055);
    filter: contrast(1.08) saturate(1.12) brightness(1.03);
}

/* Hero badges — lekki glow na hover */
.hero-badge {
    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

.hero-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255,122,0,.28);
    background: rgba(255,122,0,.075);
    box-shadow: 0 0 22px rgba(255,122,0,.09);
}

/* Statystyki — bez agresji, lepszy feedback */
.stat-card strong {
    transition: color .28s ease, text-shadow .28s ease;
}

.stat-card:hover strong {
    color: #ffb066;
    text-shadow: 0 0 20px rgba(255,122,0,.20);
}

/* Delivery cards — subtelne podświetlenie */
.delivery-point {
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.delivery-point:hover {
    transform: translateY(-3px);
    border-color: rgba(255,122,0,.24);
    background: rgba(255,122,0,.065);
    box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 20px rgba(255,122,0,.07);
}

/* Nawigacja — drobny premium feedback */
.main-nav a {
    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.main-nav a:hover {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

/* Footer — spokojniejszy sweep */
.footer-bar::after {
    opacity: .72;
}

/* Keyframes */
@keyframes premiumButtonSweep {
    0% {
        transform: rotate(18deg) translateX(-160%);
    }
    100% {
        transform: rotate(18deg) translateX(360%);
    }
}

@keyframes serviceArrowNudge {
    0%, 100% {
        transform: translateX(5px);
    }
    45% {
        transform: translateX(9px);
    }
}

@keyframes deviceFloat {
    0%, 100% {
        transform: rotate(-1deg) translateY(0);
    }
    50% {
        transform: rotate(-1deg) translateY(-8px);
    }
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(.88);
        opacity: .72;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

/* Mobile — mniej animacji, żeby nie było chaosu */
@media (max-width: 720px) {
    .status-device,
    .mobile-practice-phone {
        animation: none;
    }

    .services-grid .service-card:hover,
    .practice-step-card:hover,
    .mobile-practice-steps article:hover,
    .delivery-point:hover {
        transform: none;
    }

    .reveal {
        filter: none;
        transform: translateY(20px);
    }
}

/* Szanujemy reduced motion */
@media (prefers-reduced-motion: reduce) {
    .status-device,
    .mobile-practice-phone,
    .status-main-pill i,
    .phone-status span,
    .btn-primary:hover::after,
    .services-grid .service-card:hover .service-action::after {
        animation: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}