/* ===================================================== 
VARIANT-NATURAL.CSS
CALM / WARM / EDITORIAL
===================================================== */


/* =====================================================
TOKENS
===================================================== */

:root{

--hero-offset: 20px;
--header-height:84px;

--bg-main:#ffffff;
--bg-soft:#f7f8fa;
--bg-card:#ffffff;

--text-main:#14161a;
--text-soft:#5c6370;

--accent-soft:#1f3a5f;
--accent-line:#e9edf2;

}




/* =====================================================
GLOBAL
===================================================== */

body{

background:var(--bg-main);
color:var(--text-main);

font-size:1.08rem;
line-height:1.9;
letter-spacing:.01em;

-webkit-font-smoothing:antialiased;

padding-top:var(--header-height);

}

body::before{

content:"";
position:fixed;
inset:0;

background:
radial-gradient(circle at 25% 30%, rgba(31,58,95,0.03), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(31,58,95,0.03), transparent 50%);

pointer-events:none;
z-index:-1;

}


/* =====================================================
TYPOGRAFIA
===================================================== */

h1,h2{

font-family:'Playfair Display', serif;
color:#111318;

}

h1{

font-size:clamp(3rem,4vw,3.6rem);
font-weight:500;
letter-spacing:-.035em;
line-height:1.08;

}

h2{

font-size:2.2rem;
font-weight:500;
letter-spacing:-.01em;
margin-bottom:70px;

}

h3{

font-weight:500;
margin-bottom:16px;
color:#2b2f36;

}

p{

color:var(--text-soft);

}


/* =====================================================
HEADER
===================================================== */

.header{

position:fixed;
top:0;
left:0;

width:100%;
height:var(--header-height);

display:flex;
align-items:center;

background:#ffffff;

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

z-index:1000;

transition:.35s ease;

backdrop-filter:blur(6px);

}

.header.scrolled{

height:72px;
box-shadow:0 6px 30px rgba(0,0,0,.05);

}

.logo{

font-family:'Playfair Display', serif;
font-weight:500;
font-size:1.05rem;
letter-spacing:.02em;

}


/* =====================================================
NAVIGATION
===================================================== */

.nav{

display:flex;
gap:30px;

font-size:.88rem;

letter-spacing:.08em;
text-transform:uppercase;

}

.nav a{

text-decoration:none;
color:#2b2f36;
position:relative;

}

.nav a::after{

content:"";

position:absolute;
bottom:-6px;
left:0;

width:0;
height:1px;

background:#1f3a5f;

transition:.3s ease;

}

.nav a:hover::after{

width:100%;

}

html{
scroll-behavior:smooth;
}


/* =====================================================
HERO – FINAL STABLE VERSION
===================================================== */

.hero-split{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

}

.hero-split {
    margin-top: var(--hero-offset);
}

.hero-split-inner {

    width: 100%;
    max-width: 1200px;

    margin: auto;

    padding: 40px 24px;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 100px;

    align-items: center;

}


/* =====================================================
HERO – PREMIUM CENTERED
===================================================== */

.hero-split {

    min-height: calc(100vh - var(--header-height));

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

}

.hero-split-inner {

    width: 100%;
    max-width: 1180px;

    margin: auto;

    padding: 40px 24px;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 120px;

    align-items: center;

}


/* HERO TEXT */

.hero-split-content {

    max-width: 540px;

    display: flex;
    flex-direction: column;

    gap: 28px;

}

.hero-split-content h1 {

    font-size: clamp(3.2rem, 4vw, 3.8rem);

    max-width: 12ch;

    line-height: 1.04;

    letter-spacing: -.045em;

}

.hero-split-content p {

    max-width: 44ch;

    font-size: 1.18rem;

    line-height: 1.9;

}


/* HERO IMAGE */

.hero-image-wrapper{

display:flex;
justify-content:flex-end;
position:relative;

}

.hero-image-wrapper::before{

content:"";

position:absolute;

width:380px;
height:380px;

background:#f1efe9;

border-radius:50%;

top:50%;
right:40px;

transform:translateY(-50%);

z-index:-1;

}

.hero-image {

    width: 100%;
    max-width: 520px;

    border-radius: 24px;

    box-shadow:

        0 60px 140px rgba(0,0,0,.08),
        0 20px 40px rgba(0,0,0,.05);

}


/* =====================================================
MOBILE HERO
===================================================== */

@media (max-width:1000px) {

    .hero-split {

        min-height: calc(100vh - var(--header-height));

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

        padding: 40px 24px;

        margin-top: 0;

    }

    .hero-split-inner {

        grid-template-columns: 1fr;

        gap: 120px;

        padding: 0;

    }

    .hero-split-content {

        order: 1;

        text-align: center;

        align-items: center;

        max-width: 520px;

        margin: auto;

    }

    .hero-split-content h1 {
        max-width: 100%;
    }

    .hero-split-content p {

        max-width: 32ch;

        font-size: 1.05rem;

        margin-left: auto;
        margin-right: auto;

    }

    .hero-image-wrapper {

        order: 2;

        display: flex;

        justify-content: center;

        margin-top: 40px;

    }

    .hero-image {

width: 100%;
max-width: 460px;

border-radius: 24px;

box-shadow:
0 40px 100px rgba(0,0,0,.10),
0 12px 30px rgba(0,0,0,.06);

}

}

/* =====================================================
SEKCJE
===================================================== */

.section{

padding:140px 0;

}

.section-xl{

padding:200px 0;

}

.section,
.section-xl,
.statement-section,
.contact-premium{

max-width:1200px;
margin-left:auto;
margin-right:auto;

}


/* EDITORIAL DIVIDER */

.section + .section,
.section + .section-xl,
.section-xl + .section,
.section-xl + .section-xl{

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

}


/* =====================================================
OBSZARY PRACY
===================================================== */

.areas-grid{

margin-top:90px;

display:grid;
gap:70px;

}

.area-item{

display:grid;

grid-template-columns:120px 1fr;

gap:60px;

padding:70px 0;

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

}

.area-number{

font-size:2.2rem;

font-weight:300;

color:rgba(31,58,95,.15);

}


/* =====================================================
KARTY
===================================================== */

.grid-3-premium{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:48px;

}

.premium-card{

background:var(--bg-card);

border-radius:16px;

padding:80px 70px;

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

box-shadow:

0 30px 80px rgba(0,0,0,.05);

transition:.3s ease;

}

.premium-card:hover{

transform:translateY(-4px);

box-shadow:

0 40px 100px rgba(0,0,0,.06);

}

.premium-card h3{
margin-bottom:18px;
}

.premium-card p{
line-height:1.8;
}


/* =====================================================
STATEMENT
===================================================== */

.statement-section{

padding:220px 0;

background:var(--bg-soft);

text-align:center;

}

.statement-text{

font-size:clamp(2.4rem,3vw,3rem);

line-height:1.45;

max-width:700px;
margin:auto;

color:#111318;

}


/* =====================================================
CENNIK
===================================================== */

#cennik{

padding:200px 0;

}

#cennik .premium-card{

text-align:center;

}

#cennik .premium-card:nth-child(2){

border:2px solid #1f3a5f;

}


/* =====================================================
KONTAKT
===================================================== */

.contact-premium-inner{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:120px;

}

.contact-card{

background:var(--bg-card);

border-radius:18px;

padding:60px;

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

box-shadow:0 30px 80px rgba(0,0,0,.05);

}

.contact-cta-box{

background:#1f3a5f;

color:#ffffff;

border-radius:26px;

padding:70px;

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

/* PREMIUM CTA LIFT */

transform:translateY(-40px);

box-shadow:
0 40px 120px rgba(0,0,0,.15),
0 20px 40px rgba(0,0,0,.08);

}

.contact-cta-box h3{

font-family:'Playfair Display', serif;
font-size:2rem;

color:#ffffff;

}
.contact-cta-box p{

color:rgba(255,255,255,0.85);

}


/* =====================================================
BUTTON
===================================================== */

.btn-primary{

background:#1f3a5f;

color:#ffffff;

padding:16px 34px;

border-radius:40px;

font-weight:500;

letter-spacing:.02em;

transition:.25s ease;

}

.contact-cta-box .btn-primary{

background:#ffffff;
color:#1f3a5f;

}

.btn-primary:hover{

background:#162c49;

transform:translateY(-2px);

}

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

.footer-premium{

margin-top:140px;
padding:80px 0;

background:#ffffff;

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

}

.footer-grid{

display:grid;

grid-template-columns:1fr auto auto auto;

align-items:center;

gap:40px;

}

.footer-brand{

font-family:'Playfair Display', serif;

font-size:1.5rem;

}

.footer-links{

display:flex;

gap:20px;

font-size:.8rem;

letter-spacing:.06em;

text-transform:uppercase;

}

.footer-links a{

text-decoration:none;

color:var(--text-soft);

}

.footer-links a:hover{

opacity:.7;

}

.footer-copy{

font-size:.8rem;

color:var(--text-soft);

}

.footer-credit{

font-size:.75rem;

letter-spacing:.06em;

text-transform:uppercase;

opacity:.5;

}

.footer-credit a{

text-decoration:none;

color:inherit;

}

.footer-credit a:hover{

opacity:.8;

}

.footer-container{

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

}

.footer-separator{
margin:0 6px;
opacity:.6;
}

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

@media(max-width:1000px){

.hero-split-inner,
.grid-3-premium,
.contact-premium-inner{

grid-template-columns:1fr;

}

.area-item{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:20px;

}

:root{

--header-height:80px;

}

}


/* =====================================================
MOBILE MENU
===================================================== */

.menu-toggle{

display:none;

background:none;
border:none;

font-family:'Playfair Display', serif;

font-size:.95rem;

letter-spacing:.08em;

text-transform:uppercase;

cursor:pointer;

position:relative;

z-index:3000;

}

@media(max-width:1000px){

.menu-toggle{
display:block;
z-index:2000;
}

.nav{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:#ffffff;

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

gap:32px;

transform:translateY(-100%);

transition:.4s ease;

z-index:1500;

}

.nav.active{
transform:translateY(0);
}

.nav a{
font-size:1.25rem;
}

}

/* =====================================================
POLITYKA PRYWATNOSCI
===================================================== */

.policy-page{
  padding:120px 0;
}

.policy-page .container{
  max-width:720px;
}

.policy-page h1{
  font-size:42px;
  margin-bottom:60px;
}

.policy-page h2{
  font-size:24px;
  margin-top:52px;
  margin-bottom:14px;
  border-top:1px solid #ececec;
  padding-top:28px;
}

.policy-page p{
  margin-bottom:16px;
  color:#4b5563;
  line-height:1.8;
}

.policy-page ul{
  margin:14px 0 18px;
  padding-left:18px;
}

.policy-page li{
  margin-bottom:6px;
  color:#4b5563;
}

/* =====================================================
PREMIUM IMPROVEMENTS – NATURAL VARIANT
(dodane bez ingerencji w istniejący kod)
===================================================== */




/* SEKCJE – spokojniejszy rytm */

.section-xl{
padding:140px 0;
}


/* STATEMENT – efekt editorial */

.statement-text{
font-size:26px;
line-height:1.55;
max-width:720px;
margin:auto;
text-align:center;
font-family:'Playfair Display',serif;
}


/* CENNIK – mocniejsza cena */

.premium-card h2{
font-size:44px;
font-weight:600;
margin-top:10px;
letter-spacing:-0.02em;
}


/* KARTY – subtelny efekt premium */

.premium-card{
padding:42px;
transition:all .25s ease;
}

.premium-card:hover{
transform:translateY(-4px);
box-shadow:0 20px 40px rgba(120,100,80,.10);
}


/* CONTAINER – bardziej europejska szerokość */

.container{
max-width:1180px;
margin:auto;
padding:0 28px;
}

/* =====================================================
HERO FIRST SCREEN FIX
===================================================== */

@media (min-width:1000px){

.hero-split{

height:calc(100vh - var(--header-height));
min-height:auto;

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

padding:0;

}

.hero-split-inner{

height:100%;

display:grid;
align-items:center;

}

.hero-split-content{

justify-content:center;

}

}
.hero-split-content h1{
max-width:11ch;
}

.hero-split + .section-xl{
margin-top:120px;
border-top:1px solid #e9e4dc;
padding-top:120px;
}

/* =========================
DEMO CTA
========================= */

.site-demo-cta{

margin-top:120px;
padding:100px 0;
background:#f7f8fa;
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
text-align:center;

}

.demo-note{

font-size:14px;
color:#6b7280;
margin-bottom:12px;

}

.demo-cta-inner h3{

font-size:1.6rem;
margin-bottom:26px;

}

.demo-link{

margin-top:20px;
font-size:14px;
color:#6b7280;

}