/* ============================================================

   ZwinnaStrona — "Sprint Board" Design System

   Zwinna = agile. The whole site reads as the studio's own

   kanban board: tickets, columns, statuses, sprint reports.

   ============================================================ */



/* ── Design Tokens ─────────────────────────────────────────── */

:root {

    --paper:        #F1F1EC;

    --paper-deep:   #E8E7DF;

    --card:         #FFFFFF;

    --ink:          #14161B;

    --ink-soft:     #565A63;

    --ink-faint:    #8A8D95;

    --line:         #D9D6CB;

    --line-strong:  #C6C2B4;



    --blue:         #2A46E8;

    --blue-soft:    #E7EAFC;

    --amber:        #E68A1C;

    --amber-soft:   #FBEBD5;

    --green:        #1E8A5F;

    --green-soft:   #DFF1E9;

    --red:          #C0392B;



    --font-display: 'Archivo', sans-serif;

    --font-body:    'Manrope', sans-serif;

    --font-mono:    'IBM Plex Mono', monospace;



    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

    --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);



    --shadow-card: 0 1px 2px rgba(20, 22, 27, 0.04), 0 8px 24px rgba(20, 22, 27, 0.06);

    --shadow-card-hover: 0 4px 10px rgba(20, 22, 27, 0.06), 0 20px 36px rgba(20, 22, 27, 0.1);

    --shadow-pop: 0 24px 60px rgba(20, 22, 27, 0.16);

}



*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {

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

    background: var(--paper); color: var(--ink); overflow-x: hidden;

    line-height: 1.6; font-size: 16px;

}

::selection { background: var(--blue); color: #fff; }



::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: var(--paper); }

::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: var(--blue); }



a { color: inherit; }



/* ── Board surface / rulers (signature texture) ───────────── */

.board-surface {

    position: fixed; inset: 0; z-index: -2; background: var(--paper);

    background-image:

        linear-gradient(var(--paper-deep) 1px, transparent 1px),

        linear-gradient(90deg, var(--paper-deep) 1px, transparent 1px);

    background-size: 56px 56px;

    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);

    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);

}

.ruler { position: fixed; z-index: -1; pointer-events: none; opacity: 0.5; }

.ruler-top {

    top: 0; left: 0; right: 0; height: 26px;

    background-image: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 56px);

    background-position: 0 24px;

}

.ruler-left {

    top: 0; bottom: 0; left: 0; width: 26px;

    background-image: repeating-linear-gradient(0deg, var(--line-strong) 0 1px, transparent 1px 56px);

    background-position: 24px 0;

}

@media (max-width: 768px) { .ruler { display: none; } }



/* ── Shared bits ───────────────────────────────────────────── */

.ticket-id {

    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;

    color: var(--ink-faint); letter-spacing: 0.02em;

}

.tag {

    font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;

    padding: 3px 9px; border-radius: 5px; letter-spacing: 0.02em; text-transform: uppercase;

}

.tag-shop     { background: var(--blue-soft);  color: var(--blue); }

.tag-site     { background: var(--green-soft); color: var(--green); }

.tag-app      { background: var(--amber-soft); color: var(--amber); }

.tag-redesign { background: #F3E3F7; color: #8E3EA1; }

.tag-design   { background: #F3E3F7; color: #8E3EA1; }

.tag-seo      { background: var(--blue-soft);  color: var(--blue); }

.tag-support  { background: var(--amber-soft); color: var(--amber); }



.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.status-open { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); animation: pulseDot 2.4s ease-in-out infinite; }

@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }



/* ── Navigation ────────────────────────────────────────────── */

nav {

    position: fixed; top: 0; width: 100%; padding: 20px 5%;

    display: flex; justify-content: space-between; align-items: center;

    z-index: 1000; transition: all 0.4s var(--ease-out-expo);

    border-bottom: 1px solid transparent;

}

nav.scrolled {

    background: rgba(241, 241, 236, 0.85); backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px); padding: 13px 5%;

    border-bottom-color: var(--line);

}

.logo {

    font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;

    color: var(--ink); text-decoration: none; display: flex; align-items: center;

    gap: 2px; letter-spacing: -0.01em;

}

.logo-tag { font-family: var(--font-mono); color: var(--blue); font-weight: 600; margin-right: 6px; font-size: 1rem; }

.logo span { color: var(--blue); }



.nav-links { display: flex; gap: 30px; list-style: none; }

.nav-links a {

    color: var(--ink-soft); text-decoration: none; font-weight: 600;

    font-size: 0.86rem; position: relative; padding: 6px 0;

    transition: color 0.3s var(--ease-out-quart); display: inline-flex; align-items: baseline; gap: 6px;

}

.nav-index { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); font-weight: 500; }

.nav-links a::after {

    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;

    background: var(--blue); transition: width 0.35s var(--ease-out-expo);

}

.nav-links a:hover { color: var(--ink); }

.nav-links a:hover::after { width: 100%; }



.nav-cta {

    background: var(--ink); color: var(--paper); padding: 11px 22px;

    border-radius: 8px; text-decoration: none; font-weight: 700;

    font-family: var(--font-mono); font-size: 0.8rem; transition: all 0.3s var(--ease-out-back);

    border: 1px solid var(--ink); cursor: pointer;

}

.nav-cta:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(42, 70, 232, 0.25); }



.mobile-menu-btn {

    display: none; background: none; border: none; color: var(--ink);

    font-size: 1.4rem; cursor: pointer; padding: 6px;

}



/* ── Hero ──────────────────────────────────────────────────── */

.hero { padding: 150px 5% 90px; position: relative; }

.hero-inner {

    max-width: 1280px; margin: 0 auto; display: grid;

    grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start;

}

.hero-right {

    display: flex; flex-direction: column; gap: 16px;

}

.hero-copy { max-width: 540px; }

.ticket-badge {

    display: inline-flex; align-items: center; gap: 10px;

    background: var(--card); border: 1px solid var(--line);

    padding: 9px 18px; border-radius: 50px; font-size: 0.82rem;

    font-weight: 600; color: var(--ink-soft); margin-bottom: 28px;

    box-shadow: var(--shadow-card);

}

.ticket-badge strong { color: var(--ink); font-family: var(--font-mono); }



.hero h1 {

    font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem);

    font-weight: 800; line-height: 1.08; margin-bottom: 24px; letter-spacing: -0.02em;

}

.hero h1 .hl { color: var(--blue); }

.hero p { font-size: 1.05rem; color: var(--ink-soft); max-width: 480px; margin-bottom: 36px; line-height: 1.75; }



.hero-actions { display: flex; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; }

.btn-primary {

    background: var(--blue); color: #fff; padding: 15px 28px;

    border-radius: 10px; text-decoration: none; font-weight: 700;

    font-size: 0.95rem; transition: all 0.3s var(--ease-out-back); border: none;

    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;

    box-shadow: 0 4px 14px rgba(42, 70, 232, 0.28);

}

.btn-primary span { transition: transform 0.3s var(--ease-out-back); }

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(42, 70, 232, 0.35); }

.btn-primary:hover span { transform: translateX(3px); }



.btn-secondary {

    background: var(--card); color: var(--ink); padding: 15px 28px;

    border-radius: 10px; text-decoration: none; font-weight: 700;

    font-size: 0.95rem; transition: all 0.3s var(--ease-out-back);

    border: 1px solid var(--line); cursor: pointer;

}

.btn-secondary:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }



.hero-team { display: flex; align-items: center; gap: 10px; }

.hero-team p { font-size: 0.84rem; color: var(--ink-faint); margin: 0; }

.mini-avatar {

    width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper);

    display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);

    font-size: 0.68rem; font-weight: 700; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line);

}

.mini-avatar + .mini-avatar { margin-left: -14px; }



/* Hero board */

.hero-board {

    background: var(--card); border-radius: 18px; border: 1px solid var(--line);

    padding: 20px; box-shadow: var(--shadow-pop);

}

.board-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding: 0 4px; }

.board-title { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }

.board-sub { font-size: 0.72rem; color: var(--ink-faint); }

.board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.board-col { background: var(--paper); border-radius: 12px; padding: 10px; }

.board-col-head {

    display: flex; justify-content: space-between; align-items: center;

    font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); padding: 4px 6px 10px;

}

.board-col-head i { font-style: normal; font-family: var(--font-mono); color: var(--ink-faint); }

.ticket {

    background: var(--card); border-radius: 10px; padding: 12px; margin-bottom: 10px;

    border: 1px solid var(--line); box-shadow: var(--shadow-card);

    opacity: 0; transform: translateY(14px);

    animation: ticketIn 0.6s var(--ease-out-back) forwards;

}

.ticket:last-child { margin-bottom: 0; }

.ticket-1 { animation-delay: 0.15s; } .ticket-2 { animation-delay: 0.28s; }

.ticket-3 { animation-delay: 0.41s; } .ticket-4 { animation-delay: 0.54s; }

.ticket-5 { animation-delay: 0.67s; } .ticket-6 { animation-delay: 0.80s; }

@keyframes ticketIn { to { opacity: 1; transform: translateY(0); } }

.ticket-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.ticket p { font-size: 0.78rem; color: var(--ink); line-height: 1.4; font-weight: 500; }

.ticket-progress { height: 4px; background: var(--paper-deep); border-radius: 2px; margin-top: 10px; overflow: hidden; }

.ticket-progress span { display: block; height: 100%; background: var(--amber); border-radius: 2px; }

.ticket.done { opacity: 0.9; }

.ticket-done { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--green); font-weight: 700; }



/* ── Hero Reports (replaces board) ───────────────────────── */

.hero-reports {

    background: var(--card); border-radius: 18px; border: 1px solid var(--line);

    padding: 20px; box-shadow: var(--shadow-pop);

    perspective: 1000px;

}

.reports-grid {

    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;

}

.report-card {
    background: var(--paper); border-radius: 14px; 
    padding: 24px 12px; /* Zmniejszyłem boczny padding z 16px na 12px, aby dać tekstowi więcej miejsca */
    border: 1px solid var(--line); transition: all 0.4s var(--ease-out-expo);
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
    transform-style: preserve-3d;
    animation: floatCard 4s ease-in-out infinite;
    min-width: 0;
}

.report-card::before {

    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

    transition: left 0.6s ease;

}

.report-card:hover::before { left: 100%; }

.report-card:nth-child(1) { animation-delay: 0s; animation-duration: 7s; }

.report-card:nth-child(2) { animation-delay: 1.2s; animation-duration: 8s; }

.report-card:nth-child(3) { animation-delay: 2.4s; animation-duration: 6.5s; }

.report-card:nth-child(4) { animation-delay: 3.6s; animation-duration: 7.5s; }



@keyframes floatCard {

    0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }

    25% { transform: translateY(-6px) rotateX(1.5deg) rotateY(-1deg); }

    50% { transform: translateY(-3px) rotateX(-1deg) rotateY(1.5deg); }

    75% { transform: translateY(-8px) rotateX(1deg) rotateY(-0.5deg); }

}



.report-card:hover { 

    transform: translateY(-8px) scale(1.03) rotateX(2deg) !important; 

    box-shadow: 0 20px 40px rgba(20, 22, 27, 0.12); 

    border-color: var(--blue); 

    background: var(--card);

    animation-play-state: paused;

    z-index: 10;

}

.report-label {

    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;

    color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase;

}

.report-number {

    font-family: var(--font-display); font-size: 2.4rem; font-weight: 800;

    color: var(--ink); line-height: 1.05; margin: 8px 0 6px; letter-spacing: -0.02em;

    transition: all 0.3s var(--ease-out-back);

}

.report-card:hover .report-number {

    color: var(--blue); transform: scale(1.08);

}

.report-desc {
    color: var(--ink-soft); 
    font-size: 0.78rem; 
    font-weight: 500; 
    line-height: 1.45; /* Ujednolicony i lekko powiększony dla czytelności */
    transition: color 0.3s ease;
    white-space: normal; /* Pozwala na zawijanie tekstu do nowej linii */
    overflow-wrap: break-word; 
    word-break: break-word; /* Agresywniejsze łamanie, jeśli wyraz jest szerszy niż kafelek */
    display: block; 
}

.report-card:hover .report-desc { color: var(--ink); }



/* Glow effect on hover */

.report-card::after {

    content: ''; position: absolute; inset: -1px; border-radius: 14px;

    background: linear-gradient(135deg, var(--blue-soft), transparent 60%);

    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1;

}

.report-card:hover::after { opacity: 1; }



/* Corner accent */

.report-card .corner-accent {

    position: absolute; top: 0; right: 0; width: 40px; height: 40px;

    background: linear-gradient(135deg, var(--blue-soft) 50%, transparent 50%);

    opacity: 0; transition: opacity 0.3s ease; border-radius: 0 14px 0 0;

}

.report-card:hover .corner-accent { opacity: 1; }



@media (max-width: 1024px) {

    .reports-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .report-number { font-size: 2.4rem; }

    .report-card { animation: floatCard 8s ease-in-out infinite; }

}

@media (max-width: 768px) {

    .reports-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .report-card { padding: 20px 14px; animation: floatCard 9s ease-in-out infinite; }

    .report-number { font-size: 2rem; }

    .report-desc { font-size: 0.8rem; }

}



/* ── Hero Pricing (mini card) ────────────────────────────── */

.hero-pricing {

    /* margin handled by hero-right gap */

}

.pricing-mini-card {

    background: var(--card); border-radius: 14px; padding: 22px 24px;

    border: 1px solid var(--line); box-shadow: var(--shadow-card);

    transition: all 0.4s var(--ease-out-expo);

}

.pricing-mini-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-card-hover);

    border-color: var(--line-strong);

}

.pricing-mini-head {

    display: flex; justify-content: space-between; align-items: center;

    margin-bottom: 14px; padding-bottom: 14px;

    border-bottom: 1px dashed var(--line-strong);

}

.pricing-mini-price {

    font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;

    color: var(--blue); white-space: nowrap;

}

.pricing-mini-card h4 {

    font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;

    margin-bottom: 4px; letter-spacing: -0.01em;

}

.pricing-mini-card > p {

    color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 16px; line-height: 1.5;

}

.pricing-mini-features {

    list-style: none; margin-bottom: 18px;

    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;

}

.pricing-mini-features li {

    display: flex; align-items: center; gap: 8px;

    color: var(--ink-soft); font-size: 0.78rem; font-weight: 500;

}

.pricing-mini-features li::before {

    content: '✓'; color: var(--green); font-weight: 700; font-size: 0.72rem;

}

.pricing-mini-btn {

    width: 100%; padding: 13px; border-radius: 10px; border: none;

    background: var(--ink); color: var(--paper); font-weight: 700;

    font-size: 0.9rem; cursor: pointer; transition: all 0.3s var(--ease-out-back);

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

}

.pricing-mini-btn:hover {

    background: var(--blue); transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(42, 70, 232, 0.25);

}



@media (max-width: 768px) {

    .pricing-mini-features { grid-template-columns: 1fr; }

    .pricing-mini-price { font-size: 1.3rem; }

    .pricing-mini-card { padding: 18px 16px; }

}



/* ── Sections ──────────────────────────────────────────────── */

section { padding: 100px 5%; position: relative; }

.section-header { max-width: 640px; margin: 0 auto 56px; }

.section-tag {

    display: inline-block; font-family: var(--font-mono); color: var(--blue);

    font-size: 0.74rem; font-weight: 700; margin-bottom: 16px;

    letter-spacing: 0.06em; text-transform: uppercase;

}

.section-header h2 {

    font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem);

    font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; line-height: 1.15;

}

.hl-inline { color: var(--blue); }

.section-header p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }



/* ── Services (ticket cards) ──────────────────────────────── */
#uslugi { background: var(--paper-deep); }

.services-grid {

    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 18px; max-width: 1200px; margin: 0 auto;

}

.service-card {

    background: var(--card); border-radius: 16px; padding: 30px 26px;

    border: 1px solid var(--line); transition: all 0.4s var(--ease-out-expo);

}

.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); }

.service-card h3 { font-family: var(--font-display); font-size: 1.12rem; margin: 4px 0 10px; font-weight: 700; letter-spacing: -0.01em; }

.service-card > p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; margin-bottom: 18px; }

.service-features { list-style: none; }

.service-features li {

    display: flex; align-items: center; gap: 10px; color: var(--ink-soft);

    font-size: 0.85rem; padding: 7px 0; border-top: 1px solid var(--paper-deep);

}

.service-features li:first-child { border-top: none; }

.service-features li::before { content: '—'; color: var(--ink-faint); font-family: var(--font-mono); }



/* ── Process (kanban swimlane, order = real sequence) ────── */

.process-section { background: var(--paper); }

.process-track {

    display: flex; max-width: 1100px; margin: 0 auto; gap: 0;

    border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: var(--card);

}

.process-step { flex: 1; padding: 32px 24px; position: relative; }

.process-step:not(:last-child) { border-right: 1px dashed var(--line-strong); }

.step-col-label { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }

.step-number { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--blue); margin-bottom: 12px; }

.process-step h4 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 8px; font-weight: 700; }

.process-step p { color: var(--ink-soft); font-size: 0.87rem; line-height: 1.65; }



/* ── Portfolio (closed tickets) ───────────────────────────── */
#portfolio { background: var(--paper-deep); }
.portfolio-grid {

    display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));

    gap: 22px; max-width: 1200px; margin: 0 auto;

}

.portfolio-item {

    position: relative; border-radius: 16px; overflow: hidden;

    aspect-ratio: 16/10.5; border: 1px solid var(--line); background: var(--card);

    transition: all 0.4s var(--ease-out-expo);

}

.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out-expo), filter 0.4s ease; display: block; background: var(--paper-deep); }

.portfolio-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.portfolio-item:hover img { transform: scale(1.05); filter: brightness(0.75); }

.portfolio-stamp {

    position: absolute; top: 14px; right: 14px; background: var(--card); color: var(--green);

    font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; padding: 5px 10px;

    border-radius: 6px; border: 1px solid var(--green-soft);

}

.portfolio-overlay {

    position: absolute; inset: 0;

    background: linear-gradient(to top, rgba(20,22,27,0.92) 0%, rgba(20,22,27,0.35) 55%, transparent 100%);

    display: flex; flex-direction: column; justify-content: flex-end;

    padding: 24px; opacity: 0; transition: opacity 0.4s var(--ease-out-expo);

}

.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.portfolio-tag {

    display: inline-block; background: rgba(255,255,255,0.14); color: #fff; font-family: var(--font-mono);

    padding: 4px 12px; border-radius: 50px; font-size: 0.65rem; font-weight: 600;

    margin-bottom: 10px; width: fit-content; letter-spacing: 0.03em; text-transform: uppercase;

}

.portfolio-overlay h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px; font-weight: 700; color: #fff; }

.portfolio-overlay p { color: rgba(255,255,255,0.75); font-size: 0.85rem; }



/* ── Pricing (single estimate ticket) ─────────────────────── */

.estimate-wrap { max-width: 720px; margin: 0 auto; }

.estimate-card {

    background: var(--card); border-radius: 18px; padding: 40px;

    border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);

}

.estimate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }

.estimate-head h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 8px 0 6px; }

.estimate-head p { color: var(--ink-soft); font-size: 0.9rem; }

.estimate-price { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--blue); white-space: nowrap; }

.pricing-features { list-style: none; margin-bottom: 24px; }

.pricing-features li {

    display: flex; align-items: center; gap: 12px; padding: 11px 0;

    border-bottom: 1px solid var(--paper-deep); color: var(--ink-soft); font-size: 0.92rem;

}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features li.included::before { content: '✓'; color: var(--green); font-weight: 700; width: 18px; }

.estimate-note { color: var(--ink-faint); font-size: 0.85rem; line-height: 1.6; margin-bottom: 24px; }

.pricing-btn {

    width: 100%; padding: 15px; border-radius: 10px; border: none;

    background: var(--blue); color: #fff; font-weight: 700; font-size: 0.95rem;

    cursor: pointer; transition: all 0.3s var(--ease-out-back); font-family: var(--font-body);

}

.pricing-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42, 70, 232, 0.3); }



/* ── Team ──────────────────────────────────────────────────── */

.team-section { background: var(--paper-deep); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }

.team-card { padding: 36px 30px; background: var(--card); border-radius: 18px; border: 1px solid var(--line); transition: all 0.4s var(--ease-out-expo); }

.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }

.team-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.team-avatar {

    width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--paper);

    display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);

    font-weight: 700; font-size: 1rem;

}

.team-card h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 4px; font-weight: 700; }

.team-role { color: var(--blue); font-weight: 600; font-size: 0.84rem; margin-bottom: 16px; }

.team-desc { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; }

.team-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.team-skill {

    background: var(--paper); color: var(--ink-soft); padding: 5px 13px;

    border-radius: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;

    border: 1px solid var(--line);

}



/* ── Testimonials ──────────────────────────────────────────── */

.testimonials-section { background: var(--paper); }

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }

.testimonial-card { background: var(--card); border-radius: 16px; padding: 32px; border: 1px solid var(--line); transition: all 0.4s var(--ease-out-expo); }

.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.testimonial-approved {

    display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;

    color: var(--green); background: var(--green-soft); padding: 4px 10px; border-radius: 6px; margin-bottom: 18px;

}

.testimonial-text { color: var(--ink); font-size: 0.92rem; line-height: 1.75; margin-bottom: 22px; }

.testimonial-author { display: flex; align-items: center; gap: 12px; }

.testimonial-avatar {

    width: 38px; height: 38px; border-radius: 50%; background: var(--paper-deep); color: var(--ink);

    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; flex-shrink: 0;

}

.testimonial-author-info h4 { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; }



/* ── Contact ───────────────────────────────────────────────── */

.contact-container { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: 40px; 

    max-width: 1100px; 

    margin: 0 auto; 

    align-items: start; 

}



.contact-info h3 { 

    font-family: var(--font-display); 

    font-size: 1.9rem; 

    margin-bottom: 16px; 

    font-weight: 800; 

    letter-spacing: -0.02em; 

}



.contact-info > p { 

    color: var(--ink-soft); 

    margin-bottom: 36px; 

    line-height: 1.8; 

    font-size: 0.98rem; 

}



.contact-item { 

    display: flex; 

    align-items: flex-start; 

    gap: 16px; 

    margin-bottom: 22px; 

    padding: 12px; 

    border-radius: 12px; 

    transition: all 0.3s var(--ease-out-expo); 

}

.contact-item:hover { background: var(--card); }



.contact-icon {

    width: 44px; 

    height: 44px; 

    background: var(--card); 

    border-radius: 10px;

    display: flex; 

    align-items: center; 

    justify-content: center; 

    font-size: 1.05rem;

    color: var(--blue); 

    flex-shrink: 0; 

    border: 1px solid var(--line);

}



.contact-item h4 { font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 4px; font-weight: 700; }

.contact-item p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }



/* ── Formularz (Poprawione proporcje) ─────────────────────── */

.contact-form { 

    background: var(--card); 

    padding: 20px 28px; /* Zwięźle w pionie (20px), ale z oddechem na boki (28px) */

    border-radius: 18px; 

    border: 1px solid var(--line); 

    box-shadow: var(--shadow-card); 

}



.form-ticket-head { 

    display: flex; 

    align-items: center; 

    gap: 8px; 

    margin-bottom: 14px; 

    padding-bottom: 10px; 

    border-bottom: 1px dashed var(--line-strong); 

}



/* Ujednolicone marginesy pionowe (14px) */

.form-group { margin-bottom: 14px; }

.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.83rem; color: var(--ink-soft); }

.form-group:focus-within label { color: var(--blue); }



.form-group input, 

.form-group textarea, 

.form-group select {

    width: 100%; 

    padding: 9px 14px; /* Usunięto dubel paddingu */

    background: var(--paper);

    border: 1.5px solid var(--line); 

    border-radius: 10px; 

    color: var(--ink);

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

    font-size: 0.94rem; 

    line-height: 1.4;

    transition: all 0.3s var(--ease-out-expo);

    cursor: pointer; 

    appearance: none; 

    -webkit-appearance: none; 

    outline: none;

}



.form-group input::placeholder, .form-group textarea::placeholder { color: var(--ink-faint); }



.form-group select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232A46E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat: no-repeat; 

    background-position: right 14px center; 

    background-size: 16px; 

    padding-right: 42px;

}



.form-group input:hover, .form-group textarea:hover, .form-group select:hover { border-color: var(--line-strong); }

.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }



.form-group textarea { min-height: 115px; resize: vertical; line-height: 1.5; }



.form-row { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: 14px; 

}



.submit-btn {

    width: 100%; 

    padding: 12px 16px; 

    background: var(--ink); 

    color: var(--paper); 

    border: none;

    border-radius: 10px; 

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

    font-size: 0.97rem; 

    font-weight: 700;

    cursor: pointer; 

    transition: all 0.3s var(--ease-out-back); 

    display: inline-flex;

    align-items: center; 

    justify-content: center; 

    gap: 8px;

    margin-top: 4px;

}



.submit-btn:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42, 70, 232, 0.3); }

.submit-btn:disabled { opacity: 0.75; cursor: not-allowed; transform: none; }

.submit-btn.submit-ok { background: var(--green); }

.submit-btn.submit-err { background: var(--red); }



/* RWD – Zabezpieczenie dla smartfonów */

@media (max-width: 768px) {

    .contact-container { grid-template-columns: 1fr; gap: 32px; }

    .form-row { grid-template-columns: 1fr; }

    .contact-form { padding: 20px 16px; }

}



/* ── FAQ ───────────────────────────────────────────────────── */
.faq-wrap { background: var(--paper-deep); }
.faq-container { max-width: 780px; margin: 0 auto; }

.faq-item { background: var(--card); border-radius: 14px; margin-bottom: 12px; border: 1px solid var(--line); overflow: hidden; transition: all 0.3s var(--ease-out-expo); }

.faq-item:hover { border-color: var(--line-strong); }

.faq-item.active { border-color: var(--blue); box-shadow: 0 8px 24px rgba(42, 70, 232, 0.08); }

.faq-question {

    padding: 22px 26px; display: flex; justify-content: space-between; align-items: center;

    cursor: pointer; font-weight: 700; font-size: 0.98rem; gap: 16px;

}

.faq-question:hover { color: var(--blue); }

.faq-icon {

    width: 26px; height: 26px; min-width: 26px; border-radius: 50%;

    background: var(--paper); display: flex; align-items: center; justify-content: center;

    font-size: 1rem; transition: all 0.3s var(--ease-out-back); color: var(--ink-soft); flex-shrink: 0;

}

.faq-item.active .faq-icon { transform: rotate(45deg); background: var(--blue); color: #fff; }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out-expo), padding 0.4s var(--ease-out-expo); }

.faq-item.active .faq-answer { max-height: 400px; padding: 0 26px 24px; }

.faq-answer p { color: var(--ink-soft); line-height: 1.8; font-size: 0.92rem; }



/* ── Footer ────────────────────────────────────────────────── */

footer { background: var(--ink); color: var(--paper); padding: 64px 5% 28px; }

.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto 44px; }

footer .logo { color: var(--paper); }

footer .logo span { color: #9DB0FF; }

.footer-brand p { color: rgba(241,241,236,0.55); margin-top: 14px; line-height: 1.8; font-size: 0.9rem; }

.footer-links h4 { font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 18px; font-weight: 700; }

.footer-links ul { list-style: none; }

.footer-links li { margin-bottom: 10px; }

.footer-links a { color: rgba(241,241,236,0.55); text-decoration: none; font-size: 0.88rem; transition: color 0.3s ease; }

.footer-links a:hover { color: #9DB0FF; }

.footer-bottom { text-align: center; padding-top: 24px; border-top: 1px solid rgba(241,241,236,0.1); color: rgba(241,241,236,0.4); font-size: 0.82rem; }



/* ── Scroll animation ──────────────────────────────────────── */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out-expo),
                transform 0.7s var(--ease-out-expo);
    will-change: opacity, transform;
}

.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* ── Cennik: kaskada kart zamiast jednego bloku ── */
.estimate-wrap:not(.visible) .estimate-card {
    opacity: 0;
    transform: translateY(28px);
}
.estimate-wrap.visible .estimate-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo);
    will-change: opacity, transform;
}
.estimate-wrap.visible .estimate-card:nth-child(1) { transition-delay: 0.05s; }
.estimate-wrap.visible .estimate-card:nth-child(2) { transition-delay: 0.18s; }
.estimate-wrap.visible .estimate-card:nth-child(3) { transition-delay: 0.31s; }
/* Po wejściu opóźnienie kasowane, żeby hover reagował natychmiast */
.estimate-card:hover { transition-delay: 0s !important; }

.services-grid .animate-on-scroll:nth-child(1) { transition-delay: 0s; }

.services-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.06s; }

.services-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.12s; }

.services-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.18s; }

.services-grid .animate-on-scroll:nth-child(5) { transition-delay: 0.24s; }

.services-grid .animate-on-scroll:nth-child(6) { transition-delay: 0.30s; }

.portfolio-grid .animate-on-scroll:nth-child(1) { transition-delay: 0s; }

.portfolio-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }

.portfolio-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }

.portfolio-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }

.portfolio-grid .animate-on-scroll:nth-child(5) { transition-delay: 0.32s; }

.portfolio-grid .animate-on-scroll:nth-child(6) { transition-delay: 0.40s; }

.testimonials-grid .animate-on-scroll:nth-child(1) { transition-delay: 0s; }

.testimonials-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }

.testimonials-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }



/* ── Responsive ────────────────────────────────────────────── */

.nav-cta-mobile-wrap { display: none; }



@media (max-width: 1024px) {

    .hero-inner { grid-template-columns: 1fr; }

    .hero-right { max-width: 560px; margin: 0 auto; width: 100%; }

    .hero-board { max-width: 560px; }

    .contact-container { grid-template-columns: 1fr; }

    .footer-content { grid-template-columns: 1fr 1fr; }

    .process-track { flex-direction: column; }

    .process-step:not(:last-child) { border-right: none; border-bottom: 1px dashed var(--line-strong); }

}



@media (max-width: 768px) {

    nav { padding: 14px 5%; }

    .nav-links {

        display: none; position: absolute; top: 100%; left: 0; right: 0;

        background: var(--paper); backdrop-filter: blur(16px);

        flex-direction: column; padding: 20px 5%; gap: 0;

        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);

        box-shadow: var(--shadow-pop);

    }

    .nav-links.active { display: flex; }

    .nav-links li { width: 100%; }

    .nav-links a { display: flex; padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--paper-deep); }

    .nav-links a::after { display: none; }

    .nav-links .nav-cta-mobile {

        display: block; margin-top: 14px; text-align: center;

        background: var(--blue); color: #fff; padding: 14px; border-radius: 10px;

        font-weight: 700; text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem;

    }

    .mobile-menu-btn { display: block; }

    .nav-cta { display: none; }

    .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 40px 5%; }

    .board-columns { grid-template-columns: 1fr; }

    .hero { padding: 110px 5% 50px; }

    section { padding: 64px 5%; }

    .form-row { grid-template-columns: 1fr; }

    .footer-content { grid-template-columns: 1fr; gap: 32px; }

    .hero-actions { flex-direction: column; }

    .contact-form { padding: 16px 34px 24px; }

    .estimate-card { padding: 28px 22px; }

    .estimate-head { flex-direction: column; }

}





/* ============================================================

   ZwinnaStrona — Polityka Prywatności

   ============================================================ */



/* ── Policy Hero ───────────────────────────────────────────── */

.policy-hero {

    padding: 150px 5% 60px;

    position: relative;

}

.policy-hero-inner {

    max-width: 1280px; margin: 0 auto;

    max-width: 640px;

}

.policy-hero .ticket-badge {

    display: inline-flex; align-items: center; gap: 10px;

    background: var(--card); border: 1px solid var(--line);

    padding: 9px 18px; border-radius: 50px; font-size: 0.82rem;

    font-weight: 600; color: var(--ink-soft); margin-bottom: 28px;

    box-shadow: var(--shadow-card);

}

.policy-hero h1 {

    font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem);

    font-weight: 800; line-height: 1.08; margin-bottom: 24px; letter-spacing: -0.02em;

}

.policy-hero h1 .hl { color: var(--blue); }

.policy-hero p {

    font-size: 1.05rem; color: var(--ink-soft); max-width: 480px; line-height: 1.75;

}



/* ── Policy Content Layout ─────────────────────────────────── */

.policy-content {

    padding: 40px 5% 100px;

}

.policy-container {

    max-width: 1200px; margin: 0 auto;

    display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start;

}



/* ── Table of Contents (Sticky Sidebar) ────────────────────── */

.policy-toc {

    position: sticky; top: 100px;

}

.toc-card {

    background: var(--card); border-radius: 16px; padding: 28px 24px;

    border: 1px solid var(--line); box-shadow: var(--shadow-card);

}

.toc-card .ticket-id {

    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;

    color: var(--ink-faint); letter-spacing: 0.02em; display: block; margin-bottom: 16px;

}

.toc-card h3 {

    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;

    margin-bottom: 18px; letter-spacing: -0.01em;

}

.toc-card ul {

    list-style: none;

}

.toc-card li {

    margin-bottom: 4px;

}

.toc-card a {

    display: block; padding: 8px 12px; border-radius: 8px;

    color: var(--ink-soft); text-decoration: none; font-size: 0.85rem;

    font-weight: 500; transition: all 0.25s var(--ease-out-expo);

    border-left: 2px solid transparent;

}

.toc-card a:hover {

    background: var(--paper); color: var(--ink); border-left-color: var(--blue);

    padding-left: 16px;

}



/* ── Policy Body ───────────────────────────────────────────── */

.policy-body {

    display: flex; flex-direction: column; gap: 48px;

}

.policy-section {

    background: var(--card); border-radius: 18px; padding: 40px;

    border: 1px solid var(--line); box-shadow: var(--shadow-card);

    transition: all 0.4s var(--ease-out-expo);

}

.policy-section:hover {

    box-shadow: var(--shadow-card-hover); border-color: var(--line-strong);

}

.policy-section .section-tag {

    display: inline-block; font-family: var(--font-mono); color: var(--blue);

    font-size: 0.74rem; font-weight: 700; margin-bottom: 16px;

    letter-spacing: 0.06em; text-transform: uppercase;

}

.policy-section h2 {

    font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem);

    font-weight: 800; margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.15;

}

.policy-section ol {

    list-style: none; counter-reset: policy-item;

}

.policy-section ol > li {

    position: relative; padding-left: 36px; margin-bottom: 16px;

    color: var(--ink-soft); font-size: 0.95rem; line-height: 1.75;

    counter-increment: policy-item;

}

.policy-section ol > li::before {

    content: counter(policy-item) '.';

    position: absolute; left: 0; top: 0;

    font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem;

    color: var(--blue); width: 28px; text-align: right;

}

.policy-section ol ol {

    margin-top: 10px; margin-left: 0;

}

.policy-section ol ol > li {

    padding-left: 28px; margin-bottom: 8px;

}

.policy-section ol ol > li::before {

    content: counter(policy-item) '.' counter(list-item) '.';

    font-size: 0.72rem; color: var(--ink-faint);

}

.policy-section ul {

    list-style: none; margin-top: 10px;

}

.policy-section ul > li {

    position: relative; padding-left: 24px; margin-bottom: 8px;

    color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65;

}

.policy-section ul > li::before {

    content: '—'; position: absolute; left: 0;

    font-family: var(--font-mono); color: var(--ink-faint); font-size: 0.8rem;

}

.policy-section a {

    color: var(--blue); text-decoration: none; font-weight: 600;

    border-bottom: 1px solid transparent; transition: border-color 0.3s ease;

}

.policy-section a:hover {

    border-bottom-color: var(--blue);

}

.policy-section b {

    color: var(--ink); font-weight: 700;

}



/* Browser links grid */

.browser-links {

    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;

    margin-top: 12px !important;

}

.browser-links li {

    padding-left: 0 !important; margin-bottom: 4px !important;

}

.browser-links li::before { display: none !important; }

.browser-links a {

    display: block; padding: 8px 14px; background: var(--paper);

    border-radius: 8px; border: 1px solid var(--line); text-align: center;

    font-size: 0.82rem !important; font-weight: 600;

    transition: all 0.3s var(--ease-out-expo);

}

.browser-links a:hover {

    background: var(--blue-soft); border-color: var(--blue); color: var(--blue);

    transform: translateY(-2px);

}

.browser-subtitle {

    font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint);

    text-transform: uppercase; letter-spacing: 0.06em; margin-top: 16px;

    font-weight: 600;

}



/* ── Policy Footer Note ──────────────────────────────────── */

.policy-footer-note {

    background: var(--paper-deep); border-radius: 14px; padding: 28px 32px;

    border: 1px solid var(--line); display: flex; align-items: flex-start; gap: 16px;

}

.policy-footer-note .ticket-id {

    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;

    color: var(--ink-faint); letter-spacing: 0.02em; flex-shrink: 0;

    background: var(--card); padding: 6px 12px; border-radius: 6px;

    border: 1px solid var(--line);

}

.policy-footer-note p {

    color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; margin: 0;

}

.policy-footer-note a {

    color: var(--blue); text-decoration: none; font-weight: 600;

}



/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {

    .policy-container { grid-template-columns: 1fr; }

    .policy-toc { position: static; margin-bottom: 32px; }

    .toc-card { padding: 20px; }

    .toc-card ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }

    .browser-links { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 768px) {

    .policy-hero { padding: 110px 5% 40px; }

    .policy-section { padding: 28px 22px; }

    .toc-card ul { grid-template-columns: 1fr; }

    .browser-links { grid-template-columns: 1fr; }

    .policy-footer-note { flex-direction: column; gap: 12px; }

}



/* ============================================

   COOKIE BANNER (Style ZwinnaStrona)

   ============================================ */

.cookie-banner {

    position: fixed;

    bottom: 24px;

    right: 24px;

    max-width: 440px;

    background: #0f1012;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    padding: 24px;

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);

    z-index: 99999;

    font-family: 'Manrope', sans-serif;

    color: #f1f1ec;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    animation: cookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes cookieSlideUp {

    from {

        opacity: 0;

        transform: translateY(24px) scale(0.98);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.cookie-content {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.cookie-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 11px;

    letter-spacing: 0.06em;

    color: rgba(241, 241, 236, 0.6);

    text-transform: uppercase;

}



/* Styl kropki zgodny ze statusem na stronie */

.cookie-badge .status-dot {

    width: 7px;

    height: 7px;

    background-color: #22c55e;

    border-radius: 50%;

    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);

    display: inline-block;

}



.cookie-content h4 {

    margin: 0;

    font-size: 17px;

    font-weight: 700;

    color: #ffffff;

    font-family: 'Archivo', sans-serif;

    letter-spacing: -0.02em;

}



.cookie-content p {

    margin: 0;

    font-size: 13px;

    line-height: 1.55;

    color: rgba(241, 241, 236, 0.7);

}



.cookie-content p a {

    color: #4fa3ff;

    text-decoration: underline;

    font-weight: 500;

    transition: opacity 0.2s ease;

}



.cookie-content p a:hover {

    opacity: 0.8;

}



.cookie-actions {

    display: flex;

    gap: 10px;

    margin-top: 6px;

}



/* Przyciski w klimacie ZwinnaStrona */

.cookie-btn {

    padding: 10px 16px;

    font-size: 13px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

    flex: 1;

    text-align: center;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: 'Manrope', sans-serif;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



#btnCookieAccept {

    background: #ffffff;

    color: #0b0b0c;

    border: 1px solid #ffffff;

}



#btnCookieAccept:hover {

    background: #f1f1ec;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);

}



#btnCookieReject {

    background: rgba(255, 255, 255, 0.05);

    color: #f1f1ec;

    border: 1px solid rgba(255, 255, 255, 0.12);

}



#btnCookieReject:hover {

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.25);

    transform: translateY(-2px);

}



@media (max-width: 600px) {

    .cookie-banner {

        bottom: 12px;

        right: 12px;

        left: 12px;

        max-width: none;

        padding: 18px;

    }

    .cookie-actions {

        flex-direction: column;

    }

}
/* CENNIK!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* Nowe style dla cennika w trzech kolumnach */
/* CENNIK */
.estimate-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    align-items: stretch !important;
    max-width: 1300px !important;
    margin: 40px auto !important;
    padding: 0 15px !important;
}

@media (max-width: 768px) {
    .estimate-wrap {
        grid-template-columns: 1fr !important;
        max-width: 450px !important;
    }
}

.estimate-card {
    position: relative;
    background: var(--card);
    border-radius: 18px;
    padding: 25px 22px !important;
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-pop);
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}

/* Animacja hover dla wszystkich kart */
.estimate-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
    z-index: 10;
}

/* Świecące obramowanie przy hover */
.estimate-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 0 0px rgba(42, 70, 232, 0) !important;
    transition: box-shadow 0.3s ease !important;
    z-index: -1 !important;
}

.estimate-card:hover::after {
    box-shadow: 0 0 0 2px rgba(42, 70, 232, 0.8) !important;
}

.estimate-head {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eee !important;
}

.estimate-head h3 {
    font-size: 1.35rem !important;
    margin-bottom: 5px !important;
}

.estimate-head p {
    font-size: 0.85rem !important;
    color: #64748b !important;
}

.estimate-price {
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #2563eb !important;
    margin-top: 10px !important;
}

.pricing-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    flex-grow: 1 !important;
}

.pricing-features li {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-left: 0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--paper-deep, #e2e8f0) !important;
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
}

.pricing-features li::before {
    content: '✓' !important;
    position: static !important;
    flex-shrink: 0 !important;
    color: #10b981 !important;
    font-weight: bold !important;
    margin-top: 1px !important;
}

.pricing-features li > div {
    display: flex;
    flex-direction: column;
}

.pricing-features li strong {
    display: inline-block;
    min-width: 135px;
    color: var(--ink, #1e293b);
}

.support-section {
    background: #f8fafc !important;
    padding: 10px !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    border-left: 3px solid #2563eb !important;
}

.support-section h4 {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
    color: #1e293b !important;
}

.support-section ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.support-section li {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
    color: #64748b !important;
    padding-left: 12px !important;
    position: relative !important;
}

.support-section li::before {
    content: '-' !important;
    position: absolute !important;
    left: 0 !important;
    color: #2563eb !important;
}

.estimate-note {
    font-size: 0.78rem !important;
    color: #64748b !important;
    font-style: italic !important;
    margin-bottom: 12px !important;
}

.pricing-btn {
    width: 100% !important;
    padding: 10px !important;
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: background 0.3s, transform 0.2s !important;
    margin-top: auto !important;
}

.pricing-btn:hover {
    background: #1d4ed8 !important;
    transform: scale(1.03) !important;
}

@media (max-width: 768px) {
    .estimate-card {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
    }
}

.section-header {
    margin-bottom: 30px !important;
}

/* Podniesienie sekcji cennika wyżej (tuż pod menu) */
.page-cennik #cennik {
    padding-top: 100px !important;
}

.page-cennik {
    padding-top: 0 !important;
}

/* ================= NAGŁÓWEK KARTY — cena zawsze po prawej ================= */
.estimate-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

.estimate-head > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.estimate-price {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
    text-align: right !important;
}