/* ============================================
   GROBNET 2.0 - Premium SaaS Homepage CSS
   ============================================ */

:root {
    --dark-bg: #071b2a;
    --dark-secondary: #0d2740;
    --primary: #1db584;
    --primary-light: #2dd4a4;
    --text-light: #f3f4f6;
    --text-muted: #d1d5db;
    --accent: #10b981;
    --border-light: rgba(255, 255, 255, 0.1);
    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.3);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #1f2937;
    background-color: #fff;
    line-height: 1.6;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
    background-color: var(--dark-bg);
    color: var(--text-light);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-light);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-light);
    flex-shrink: 0;
}

.brand-logo {
    display: block;
    width: 40px;
    height: 40px;
    padding: 3px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    flex: 0 0 auto;
}

.brand-logo-footer {
    width: 32px;
    height: 32px;
}

/* Screenshot-aligned homepage composition */
.header { padding: .55rem 0; }
.header-content { gap: 1.35rem; }
.hero { min-height: 430px; padding: 2.1rem 0; }
.hero-bg { z-index: 0; background-position: center 45%; background-size: cover; }
.hero .container { position: relative; z-index: 1; }
.hero-wrapper { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1.5rem; }
.hero-content { gap: .75rem; }
.hero-badge { margin: 0; color: var(--primary-light); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero-title { max-width: 610px; font-size: clamp(2.2rem, 3.5vw, 3rem); line-height: 1.08; }
.hero-subtitle { font-size: 1rem; line-height: 1.4; }
.hero-description { max-width: 580px; font-size: .9rem; line-height: 1.55; }
.hero-search { width: 100%; margin: .35rem 0; }
.search-form { align-items: center; gap: .45rem; padding: .28rem; border-radius: 9px; }
.search-symbol { padding-left: .7rem; color: #607585; font-size: 1.45rem; line-height: 1; }
.search-form input { min-width: 0; padding: .8rem .5rem; }
.btn-search { padding: .8rem 1.35rem; }
.hero-buttons { gap: .65rem; }
.hero-buttons .btn { padding: .75rem 1rem; font-size: .82rem; }
.hero-stats { gap: .75rem; margin-top: .55rem; padding-top: .75rem; border-top: 0; }
.stat-item { flex-direction: row; justify-content: flex-start; gap: .5rem; text-align: left; }
.stat-icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border: 1px solid rgba(39,195,148,.72); border-radius: 50%; color: #5be0b6; font-size: 1rem; }
.stat-text { font-size: .65rem; }
.hero-image img { width: 100%; height: auto; max-height: 360px; object-fit: contain; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.audience-section { padding: 1rem 0 1.25rem; }
.section-header { margin-bottom: 1rem; }
.section-header h2 { margin-bottom: .2rem; font-size: 1.65rem; }
.section-header p { font-size: .82rem; }
.audience-grid { gap: 1rem; }
.audience-card { position: relative; min-height: 220px; height: 220px; border: 1px solid #e5ebef; border-radius: 9px; box-shadow: 0 3px 12px rgba(16,35,52,.06); }
.audience-card-image { position: absolute; inset: 0; width: 100%; height: 100%; background: #eef2f4; }
.audience-card-image::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.97) 44%,rgba(255,255,255,.56) 70%,rgba(255,255,255,.04) 100%); }
.audience-card-image img { object-fit: cover; object-position: center bottom; }
.audience-card-content { position: relative; z-index: 1; gap: .3rem; height: 100%; padding: 1rem 1.1rem; background: linear-gradient(180deg,rgba(255,255,255,.52),transparent 100%); }
.card-icon { justify-content: flex-start; height: 26px; font-size: 1.45rem; color: #079b72; }
.audience-card h3 { font-size: .95rem; }
.audience-card p { max-width: 210px; color: #586c7a; font-size: .72rem; line-height: 1.4; }
.card-link { align-self: flex-start; margin-top: auto; padding: .35rem .65rem; border-radius: 6px; background: #fff; color: #102334; box-shadow: 0 2px 9px rgba(15,35,50,.16); font-size: .67rem; }
.features-section { padding: 1rem 0 1.2rem; background: #f8fafb; }
.features-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.feature-card { flex-direction: row; align-items: center; gap: .8rem; min-height: 72px; padding: .8rem; border-radius: 9px; text-align: left; }
.feature-icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border-radius: 50%; background: #ecf8f4; color: #079b72; font-size: 1.25rem; }
.feature-copy h3 { margin: 0 0 .15rem; font-size: .73rem; line-height: 1.25; }
.feature-copy p { margin: 0; font-size: .64rem; line-height: 1.35; }
.showcase-section { padding: 1.25rem 0; background: #fff; }
.showcase-wrapper { gap: 1.5rem; }
.showcase-content { gap: .55rem; }
.showcase-content h2 { font-size: 2rem; }
.showcase-content p { font-size: .82rem; line-height: 1.5; }
.showcase-checklist { gap: .35rem; }
.showcase-checklist li { font-size: .74rem; }
.showcase-preview img { border: 1px solid #e3eaf0; border-radius: 10px; box-shadow: 0 9px 25px rgba(18,42,58,.12); }
.cta-section { padding: 1.15rem 0; }
.cta-bg { background-image:linear-gradient(90deg,rgba(7,27,42,.96),rgba(7,27,42,.7)),url('/public/assets/images/home/placeholder-hero.png'); background-size:cover; background-position:center 68%; }
.cta-layout { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.cta-content { align-items:flex-start; gap:.25rem; text-align:left; }
.cta-content h2 { font-size:1.45rem; }
.cta-content p { max-width:700px; font-size:.78rem; line-height:1.5; }
.cta-action { display:flex; min-width:195px; align-items:center; flex-direction:column; gap:.35rem; }
.cta-action .btn { padding:.7rem 1rem; font-size:.82rem; }
.cta-action small { color:rgba(255,255,255,.72); font-size:.62rem; }
.footer { padding:1.4rem 0 .8rem; }
.footer-wrapper { gap:1.5rem; margin-bottom:1rem; }
.footer-desc { max-width:300px; font-size:.68rem; line-height:1.5; }
.footer-section h4 { margin-bottom:.45rem; font-size:.72rem; }
.footer-section ul { gap:.25rem; }
.footer-section a { font-size:.68rem; }
.footer-bottom { padding-top:.65rem; font-size:.65rem; }
@media(max-width:1024px){.hero-wrapper{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.hero-title{font-size:2.3rem}.audience-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.features-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.container{padding-left:1.4rem;padding-right:1.4rem}}
@media(max-width:820px){.hero{min-height:0;padding:2.6rem 0}.hero-wrapper{grid-template-columns:1fr}.hero-image{max-width:680px;margin:.5rem auto 0}.hero-image img{max-height:none}.audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-wrapper{grid-template-columns:1fr}.cta-layout{align-items:flex-start;flex-direction:column}.cta-action{align-items:flex-start}.nav-menu{display:none}}
@media(max-width:520px){.header-actions{gap:.6rem}.zaloguj-link{padding-right:.5rem;border:0}.zaloguj-link span{display:none}.btn-demo{padding:.55rem .7rem;font-size:.75rem}.hero-title{font-size:2rem}.hero-buttons{align-items:stretch;flex-direction:column}.hero-stats{grid-template-columns:1fr;gap:.45rem}.audience-grid{grid-template-columns:1fr}.audience-card{height:230px}.features-grid{grid-template-columns:1fr}.footer-wrapper{grid-template-columns:1fr 1fr}.footer-section:first-child{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column}.cta-content h2{font-size:1.25rem}}

/* Keep the navigation over the photographic hero, as in the supplied design. */
@media(min-width:821px){
    .header{position:absolute;top:0;left:0;width:100%;padding:.55rem 0;background:transparent;border-bottom:1px solid rgba(255,255,255,.12)}
    .hero{min-height:690px;padding:6.2rem 0 2.1rem}
    .hero-bg{z-index:0;background-position:center 43%;background-size:cover}
    .hero-wrapper{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:1.5rem}
    .hero-content{gap:.7rem}
    .hero-title{max-width:600px;font-size:clamp(2.35rem,2.65vw,3rem);line-height:1.08}
    .hero-subtitle{border:0;padding:0}
    .hero-image img{max-height:390px}
    .brand-logo{background:transparent;padding:0;border-radius:50%}
}
@media(max-width:820px){.header{position:relative}.hero-bg{z-index:0}.brand-logo{background:transparent;padding:0;border-radius:50%}}
.hero-bg{overflow:hidden;background:none!important}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%}
.hero-bg span{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,42,.96) 0%,rgba(7,27,42,.82) 42%,rgba(7,27,42,.18) 100%)}
@media(min-width:821px){.hero-title{max-width:500px;font-size:clamp(2rem,2.4vw,2.35rem)!important;line-height:1.1}.hero{min-height:620px;padding-top:6.5rem;padding-bottom:1.4rem}}

/* Match the compact card, feature and search sections in the homepage reference. */
@media(min-width:821px){
    .audience-section{padding:1rem 0 1.25rem}
    .audience-section .section-header{margin-bottom:1rem}
    .audience-section .section-header h2,.features-section .section-header h2{font-size:1.65rem;line-height:1.2;margin-bottom:.2rem}
    .audience-section .section-header p,.features-section .section-header p{font-size:.82rem;line-height:1.45}
    .audience-grid{gap:1rem}
    .audience-card{height:220px;min-height:220px;position:relative;border:1px solid #e5ebef;border-radius:9px;box-shadow:0 3px 12px rgba(16,35,52,.06)}
    .audience-card-image{position:absolute;inset:0;width:100%;height:100%;background:#eef2f4}
    .audience-card-image::after{background:linear-gradient(180deg,#fff 0%,#fff 39%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.38) 73%,rgba(255,255,255,0) 100%)}
    .audience-card-content{position:relative;z-index:1;height:100%;padding:1rem 1.1rem;gap:.3rem;align-items:flex-start;background:linear-gradient(180deg,rgba(255,255,255,.72),transparent 100%)}
    .audience-card .card-icon{display:flex;justify-content:flex-start;align-items:center;height:26px;font-size:1.45rem;color:#079b72}
    .audience-card h3{font-size:.95rem;line-height:1.25;text-align:left}
    .audience-card p{max-width:210px;flex:0 1 auto;color:#586c7a;font-size:.72rem;line-height:1.4;text-align:left}
    .audience-card .card-link{align-self:flex-start;margin-top:auto;padding:.35rem .65rem;border-radius:6px;background:#fff;color:#102334;box-shadow:0 2px 9px rgba(15,35,50,.16);font-size:.67rem}
    .features-section{padding:1rem 0 1.2rem;background:#f8fafb}
    .features-section .section-header{margin-bottom:1rem}
    .features-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}
    .features-grid .feature-card{display:flex;flex-direction:row;align-items:center;gap:.8rem;min-height:72px;padding:.8rem;background:#fff;border:1px solid #e5ebef;border-radius:9px;text-align:left}
    .features-grid .feature-icon{display:grid;width:43px;height:43px;flex:0 0 43px;place-items:center;border-radius:50%;background:#ecf8f4;color:#079b72;font-size:1.25rem}
    .features-grid .feature-copy h3{margin:0 0 .15rem;font-size:.73rem;line-height:1.25;text-align:left}
    .features-grid .feature-copy p{margin:0;color:#647487;font-size:.64rem;line-height:1.35;text-align:left}
    .showcase-section{padding:1.25rem 0;background:#fff}
    .showcase-wrapper{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.5rem;align-items:center}
    .showcase-content{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
    .showcase-tag{color:#079b72;font-size:.72rem;font-weight:750;letter-spacing:.1em}
    .showcase-content h2{font-size:2rem;line-height:1.1}
    .showcase-content p{font-size:.82rem;line-height:1.5}
    .showcase-checklist{gap:.35rem}
    .showcase-checklist li{font-size:.74rem;line-height:1.35}
    .showcase-content>.btn{width:auto;align-self:flex-start;margin-top:.25rem;padding:.7rem 1.1rem;font-size:.78rem}
    .showcase-preview img{width:100%;max-height:340px;object-fit:contain;border:1px solid #e3eaf0;border-radius:10px;box-shadow:0 9px 25px rgba(18,42,58,.12)}
    .cta-section{min-height:140px;padding:1.15rem 0}
    .cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:none!important}
    .cta-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%}
    .cta-bg span{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,42,.96),rgba(7,27,42,.72))}
    .cta-layout{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:2rem}
    .cta-content{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;text-align:left}
    .cta-content h2{font-size:1.45rem;line-height:1.2}
    .cta-content p{max-width:700px;font-size:.78rem;line-height:1.5}
    .cta-action{display:flex;min-width:195px;align-items:center;flex-direction:column;gap:.35rem}
    .cta-action .btn{padding:.7rem 1rem;font-size:.82rem}
    .cta-action small{color:rgba(255,255,255,.8);font-size:.62rem}
    .footer{padding:1.4rem 0 .8rem}
    .footer-wrapper{gap:1.5rem;margin-bottom:1rem}
    .footer-desc{max-width:300px;font-size:.68rem;line-height:1.5}
    .footer-section h4{margin-bottom:.45rem;font-size:.72rem}
    .footer-section ul{gap:.25rem}
    .footer-section a{font-size:.68rem}
    .footer-bottom{padding-top:.65rem;font-size:.65rem}
}
@media(max-width:820px){
    .audience-section,.features-section,.showcase-section{padding:2rem 0}
    .audience-section .section-header,.features-section .section-header{margin-bottom:1.25rem}
    .audience-card{position:relative;min-height:220px}
    .audience-card-content{align-items:flex-start}
    .audience-card .card-icon{justify-content:flex-start}
    .features-grid .feature-card{flex-direction:row;align-items:center;text-align:left}
    .showcase-content>.btn{align-self:flex-start;width:auto}
    .cta-section{min-height:0}
    .cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:none!important}
    .cta-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .cta-bg span{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,42,.94),rgba(7,27,42,.78))}
    .cta-layout{position:relative;z-index:1}
}

.logo-text {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
    position: relative;
}

.nav-link:not(.zaloguj-link):hover {
    color: var(--primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

.nav-link:not(.zaloguj-link):hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.zaloguj-link {
    border-right: 1px solid var(--border-light);
    padding-right: 1.5rem;
}

.btn-demo {
    background-color: var(--primary);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
}

.btn-demo:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 181, 132, 0.3);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 4rem 0;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-secondary) 100%);
    z-index: -1;
}

.hero-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: var(--text-light);
    z-index: 10;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 600;
}

.hero-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.hero-search {
    margin: 1.5rem 0;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-dark);
}

.search-form input {
    flex: 1;
    border: none;
    padding: 1rem;
    font-size: 0.95rem;
    color: #1f2937;
}

.search-form input::placeholder {
    color: #9ca3af;
}

.search-form input:focus {
    outline: none;
}

.btn-search {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-search:hover {
    background-color: var(--primary-light);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: 0.95rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 181, 132, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--dark-bg);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
}

.stat-icon {
    font-size: 2rem;
}

.stat-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.hero-image {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-dark);
}

/* ============================================
   SECTION HEADERS
   ============================================ */

.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1f2937;
    letter-spacing: -0.015em;
}

.section-header p {
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================
   AUDIENCE SECTION (Dla kogo)
   ============================================ */

.audience-section {
    padding: 5rem 0;
    background-color: white;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.audience-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.audience-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.audience-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.audience-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.audience-card:hover .audience-card-image img {
    transform: scale(1.05);
}

.audience-card-content {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.card-icon {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary);
}

.audience-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.audience-card p {
    color: #6b7280;
    line-height: 1.6;
    flex: 1;
}

.card-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    align-self: flex-start;
}

.card-link:hover {
    color: var(--primary-light);
}

/* ============================================
   FEATURES SECTION (Kluczowe funkcje)
   ============================================ */

.features-section {
    padding: 5rem 0;
    background-color: #f9fafb;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.feature-card {
    padding: 2rem;
    background-color: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(29, 181, 132, 0.1);
}

.feature-icon {
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--primary);
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.feature-card p {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   SHOWCASE SECTION (Public Search)
   ============================================ */

.showcase-section {
    padding: 5rem 0;
    background-color: white;
}

.showcase-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.showcase-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.showcase-tag {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.showcase-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
}

.showcase-content p {
    font-size: 1.05rem;
    color: #6b7280;
    line-height: 1.8;
}

.showcase-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.showcase-checklist li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: #4b5563;
    font-weight: 500;
}

.checkmark {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.25rem;
}

.showcase-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-preview img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-secondary) 100%);
    z-index: -1;
}

.cta-content {
    text-align: center;
    color: var(--text-light);
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.cta-tag {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    line-height: 1.8;
}

.cta-subtext {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: -0.5rem;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background-color: var(--dark-bg);
    color: var(--text-light);
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--border-light);
}

.footer-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.footer-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid var(--border-light);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.footer-bottom-links a:hover {
    color: var(--primary);
}

.footer-bottom-links span {
    color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1440px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .section-header h2 {
        font-size: 2.25rem;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: 1.5rem;
    }
    
    .hero-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .showcase-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .header-content {
        gap: 1rem;
    }
    
    .nav-menu {
        display: none;
    }
    
    .header-actions {
        gap: 0.75rem;
    }
    
    .zaloguj-link {
        border-right: none;
        padding-right: 0;
        display: none;
    }
    
    .hero {
        min-height: auto;
        padding: 2.5rem 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-description {
        font-size: 0.95rem;
    }
    
    .search-form {
        flex-direction: column;
    }
    
    .search-form input,
    .btn-search {
        width: 100%;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn-lg {
        width: 100%;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
        margin-top: 1rem;
        gap: 1rem;
    }
    
    .audience-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header h2 {
        font-size: 1.75rem;
    }
    
    .section-header p {
        font-size: 1rem;
    }
    
    .showcase-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
    
    .footer-wrapper {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .header-content {
        gap: 0.5rem;
    }
    
    .header-actions {
        gap: 0.5rem;
    }
    
    .btn-demo {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    .hero {
        padding: 1.5rem 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    .hero-buttons .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .hero-stats {
        display: none;
    }
    
    .audience-card-content {
        padding: 1.25rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
    
    .section-header p {
        font-size: 0.95rem;
    }
    
    .feature-card {
        padding: 1.25rem;
    }
    
    .showcase-tag,
    .cta-tag {
        font-size: 0.75rem;
    }
    
    .showcase-content h2,
    .cta-content h2 {
        font-size: 1.5rem;
    }
    
    .showcase-content p,
    .cta-content p {
        font-size: 0.95rem;
    }
    
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-wrapper {
        gap: 1.5rem;
    }
    
    .footer-section h4 {
        font-size: 0.85rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .header,
    .hero-buttons,
    .cta-section,
    .btn-demo {
        display: none;
    }
}

/* Final homepage layout overrides, kept after legacy component rules. */
@media (min-width: 821px) {
  .audience-section { padding: 1rem 0 1.25rem; }
  .audience-section .section-header, .features-section .section-header { margin-bottom: 1rem; }
  .audience-section .section-header h2, .features-section .section-header h2 { margin-bottom: .2rem; font-size: 1.65rem; line-height: 1.2; }
  .audience-section .section-header p, .features-section .section-header p { font-size: .82rem; line-height: 1.45; }
  .audience-grid { gap: 1rem; }
  .audience-card { position: relative; display: block; height: 220px; min-height: 220px; border: 1px solid #e5ebef; border-radius: 9px; box-shadow: 0 3px 12px rgba(16,35,52,.06); }
  .audience-card-image { position: absolute; inset: 0; width: 100%; height: 100%; background: #eef2f4; }
  .audience-card-image::after { background: linear-gradient(180deg,#fff 0%,#fff 39%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.38) 73%,transparent 100%); }
  .audience-card-content { position: relative; z-index: 1; display: flex; height: 100%; padding: 1rem 1.1rem; gap: .3rem; align-items: flex-start; background: linear-gradient(180deg,rgba(255,255,255,.72),transparent); }
  .audience-card .card-icon { display: flex; justify-content: flex-start; align-items: center; height: 26px; font-size: 1.45rem; color: #079b72; }
  .audience-card h3 { font-size: .95rem; line-height: 1.25; text-align: left; }
  .audience-card p { max-width: 210px; flex: 0 1 auto; color: #586c7a; font-size: .72rem; line-height: 1.4; text-align: left; }
  .audience-card .card-link { align-self: flex-start; margin-top: auto; padding: .35rem .65rem; border-radius: 6px; background: #fff; color: #102334; box-shadow: 0 2px 9px rgba(15,35,50,.16); font-size: .67rem; }
  .features-section { padding: 1rem 0 1.2rem; background: #f8fafb; }
  .features-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
  .features-grid .feature-card { display: flex; flex-direction: row; align-items: center; gap: .8rem; min-height: 72px; padding: .8rem; background: #fff; border: 1px solid #e5ebef; border-radius: 9px; text-align: left; }
  .features-grid .feature-icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border-radius: 50%; background: #ecf8f4; color: #079b72; font-size: 1.25rem; }
  .features-grid .feature-copy h3 { margin: 0 0 .15rem; font-size: .73rem; line-height: 1.25; text-align: left; }
  .features-grid .feature-copy p { margin: 0; color: #647487; font-size: .64rem; line-height: 1.35; text-align: left; }
  .showcase-section { padding: 1.25rem 0; background: #fff; }
  .showcase-wrapper { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 1.5rem; align-items: center; }
  .showcase-content { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
  .showcase-tag { color: #079b72; font-size: .72rem; font-weight: 750; letter-spacing: .1em; }
  .showcase-content h2 { font-size: 2rem; line-height: 1.1; }
  .showcase-content p { font-size: .82rem; line-height: 1.5; }
  .showcase-checklist { gap: .35rem; }
  .showcase-checklist li { font-size: .74rem; line-height: 1.35; }
  .showcase-content > .btn { width: auto; align-self: flex-start; margin-top: .25rem; padding: .7rem 1.1rem; font-size: .78rem; }
  .showcase-preview img { width: 100%; max-height: 340px; object-fit: contain; border: 1px solid #e3eaf0; border-radius: 10px; box-shadow: 0 9px 25px rgba(18,42,58,.12); }
  .cta-section { min-height: 140px; padding: 1.15rem 0; }
  .cta-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: none !important; }
  .cta-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
  .cta-bg span { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,27,42,.96),rgba(7,27,42,.72)); }
  .cta-layout { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .cta-content { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; }
  .cta-content h2 { font-size: 1.45rem; line-height: 1.2; }
  .cta-content p { max-width: 700px; font-size: .78rem; line-height: 1.5; }
  .cta-action { display: flex; min-width: 195px; align-items: center; flex-direction: column; gap: .35rem; }
  .cta-action .btn { padding: .7rem 1rem; font-size: .82rem; }
  .cta-action small { color: rgba(255,255,255,.8); font-size: .62rem; }
  .footer { padding: 1.4rem 0 .8rem; }
  .footer-wrapper { gap: 1.5rem; margin-bottom: 1rem; }
  .footer-desc { max-width: 300px; font-size: .68rem; line-height: 1.5; }
  .footer-section h4 { margin-bottom: .45rem; font-size: .72rem; }
  .footer-section ul { gap: .25rem; }
  .footer-section a { font-size: .68rem; }
  .footer-bottom { padding-top: .65rem; font-size: .65rem; }
}
@media (max-width: 820px) {
  .audience-section, .features-section, .showcase-section { padding: 2rem 0; }
  .audience-section .section-header, .features-section .section-header { margin-bottom: 1.25rem; }
  .audience-card { position: relative; min-height: 220px; }
  .audience-card-content { align-items: flex-start; }
  .audience-card .card-icon { justify-content: flex-start; }
  .features-grid .feature-card { flex-direction: row; align-items: center; text-align: left; }
  .showcase-content > .btn { align-self: flex-start; width: auto; }
  .cta-section { min-height: 0; }
  .cta-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: none !important; }
  .cta-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cta-bg span { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,27,42,.94),rgba(7,27,42,.78)); }
  .cta-layout { position: relative; z-index: 1; }
}
@media (min-width: 821px) {
  .showcase-content h2 { max-width: 410px; }
  .brand-logo-footer { width: 40px; height: 40px; }
}

/* Consistent outline trust icons in the homepage hero. */
.hero-stats .stat-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-color: rgba(19, 183, 127, .62);
    background: rgba(19, 183, 127, .08);
    color: #13b77f;
}
.hero-stats .stat-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}