/* ===========================
   Medyczne Opole
   style.css
=========================== */

:root{

--primary:#1b6ca8;
--primary-dark:#14517f;
--secondary:#28b487;
--dark:#1f2937;
--gray:#6b7280;
--light:#f5f7fb;
--white:#ffffff;
--border:#e5e7eb;
--shadow:0 15px 40px rgba(0,0,0,.08);
--radius:18px;
--transition:.3s ease;

}

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

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:#fff;
color:var(--dark);
line-height:1.7;
font-size:16px;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1280px,92%);
margin:auto;

}

.section{

padding:110px 0;

}

.section-light{

background:var(--light);

}

.section-label{

display:inline-block;
padding:8px 18px;
background:#eaf5ff;
color:var(--primary);
border-radius:999px;
font-size:.85rem;
font-weight:700;
margin-bottom:18px;

}

.section h2{

font-size:clamp(2rem,4vw,3rem);
line-height:1.2;
margin-bottom:20px;
font-weight:800;

}

.section-intro{

max-width:760px;
margin-bottom:60px;
color:var(--gray);
font-size:1.05rem;

}

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

.header{

position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(0,0,0,.05);

}

.header .container{

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

}

.logo{

display:flex;
align-items:center;
flex-shrink:0;

}

.logo img{

height:42px;
width:auto;
display:block;
transition:var(--transition);

}

.logo:hover img{

transform:scale(1.03);

}

.menu{

display:flex;
gap:34px;

}

.menu a{

font-weight:600;
transition:var(--transition);
position:relative;

}

.menu a:hover{

color:var(--primary);

}

.menu a::after{

content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:var(--primary);
transition:.3s;

}

.menu a:hover::after{

width:100%;

}

/* ===========================
BUTTONS
=========================== */

.button{

display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 30px;
background:var(--primary);
color:#fff;
border-radius:999px;
font-weight:700;
transition:.3s;
box-shadow:0 10px 25px rgba(27,108,168,.25);

}

.button:hover{

transform:translateY(-3px);
background:var(--primary-dark);

}

.button-outline{

background:#fff;
border:2px solid var(--primary);
color:var(--primary);
box-shadow:none;

}

.button-outline:hover{

background:var(--primary);
color:#fff;

}

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

.hero{

padding:120px 0 90px;

}

.hero-grid{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:70px;
align-items:center;

}

.badge{

display:inline-block;
padding:10px 18px;
border-radius:999px;
background:#eaf5ff;
color:var(--primary);
font-size:.9rem;
font-weight:700;
margin-bottom:24px;

}

.hero h1{

font-size:clamp(2.6rem,5vw,4.4rem);
line-height:1.1;
font-weight:800;
margin-bottom:28px;

}

.hero p{

font-size:1.15rem;
color:var(--gray);
margin-bottom:36px;

}

.hero-buttons{

display:flex;
gap:18px;
flex-wrap:wrap;

}

.hero-card{

background:#fff;
border-radius:var(--radius);
padding:42px;
box-shadow:var(--shadow);

}

.stat{

padding:24px 0;
border-bottom:1px solid var(--border);

}

.stat:last-child{

border:none;

}

.stat h2{

font-size:2.5rem;
color:var(--primary);
margin-bottom:6px;

}

.stat p{

color:var(--gray);

}

/* ===========================
STEPS
=========================== */

.steps{

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

}

.step{

background:#fff;
padding:40px;
border-radius:var(--radius);
box-shadow:var(--shadow);
transition:.35s;

}

.step:hover{

transform:translateY(-10px);

}

.number{

width:64px;
height:64px;
border-radius:50%;
background:var(--primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
font-weight:800;
margin-bottom:28px;

}

.step h3{

font-size:1.4rem;
margin-bottom:16px;

}

.step p{

color:var(--gray);

}

/* ===========================
FEATURES
=========================== */

.features{

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

}

.feature-card{

background:#fff;
padding:36px;
border-radius:var(--radius);
box-shadow:var(--shadow);
transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-icon{

font-size:2rem;
margin-bottom:22px;

}

.feature-card h3{

margin-bottom:16px;
font-size:1.4rem;

}

.feature-card p{

color:var(--gray);

}
/* ===========================
PARTNERZY
=========================== */

.narrow{

max-width:850px;
margin:auto;
text-align:center;

}

.partner-box{

margin-top:50px;
background:linear-gradient(135deg,#1b6ca8,#28b487);
padding:60px;
border-radius:var(--radius);
color:#fff;
box-shadow:0 25px 60px rgba(27,108,168,.22);

}

.partner-box h3{

font-size:2rem;
margin-bottom:22px;

}

.partner-box p{

font-size:1.08rem;
max-width:620px;
margin:0 auto 35px;
opacity:.95;

}

.partner-box .button{

background:#fff;
color:var(--primary);
box-shadow:none;

}

.partner-box .button:hover{

background:#f4f4f4;
transform:translateY(-3px);

}

/* ===========================
ABOUT
=========================== */

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:flex-start;

}

.about-grid p{

margin-bottom:24px;
font-size:1.05rem;
color:var(--gray);

}

/* ===========================
CONTACT
=========================== */

.contact{

text-align:center;

}

.contact-grid{

margin-top:60px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.contact-card{

background:#fff;
padding:35px;
border-radius:var(--radius);
box-shadow:var(--shadow);
transition:.35s;

}

.contact-card:hover{

transform:translateY(-8px);

}

.contact-card h3{

margin-bottom:18px;
font-size:1.3rem;

}

.contact-card p{

color:var(--gray);

}

.contact-card a{

color:var(--primary);
font-weight:600;

}

.contact-card a:hover{

text-decoration:underline;

}

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

.footer{

background:#1f2937;
color:#fff;
padding-top:80px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:60px;
padding-bottom:60px;

}

.footer h3{

font-size:1.7rem;
margin-bottom:20px;

}

.footer h4{

margin-bottom:18px;
font-size:1.1rem;

}

.footer p{

opacity:.8;
line-height:1.8;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul a{

opacity:.85;
transition:.3s;

}

.footer ul a:hover{

opacity:1;
padding-left:6px;

}

.copyright{

border-top:1px solid rgba(255,255,255,.08);
padding:28px 0;
text-align:center;
font-size:.95rem;
opacity:.7;

}

/* ===========================
ANIMACJE
=========================== */

.hero-content,
.hero-card,
.step,
.feature-card,
.partner-box,
.contact-card{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eef2f7;

}

::-webkit-scrollbar-thumb{

background:var(--primary);
border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}

/* ===========================
RESPONSYWNOŚĆ
=========================== */

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;
gap:50px;

}

.about-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;
gap:40px;

}

}

@media(max-width:900px){

.menu{

display:none;

}

.steps{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.header .button{

display:none;

}

.hero{

padding:90px 0 70px;

}

.section{

padding:80px 0;

}

}

@media(max-width:600px){

.hero h1{

font-size:2.3rem;

}

.hero-card{

padding:28px;

}

.step{

padding:30px;

}

.feature-card{

padding:28px;

}

.partner-box{

padding:40px 25px;

}

.contact-card{

padding:28px;

}

.button{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.logo img{

height:36px;

}

}