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

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#faf6f8;
color:#2b2230;
line-height:1.7;
font-size:16px;
}

a{
color:inherit;
text-decoration:none;
}

img{
max-width:100%;
height:auto;
display:block;
}

.container{
width:100%;
max-width:1180px;
margin:0 auto;
padding:0 16px;
}

header{
padding:18px 0 10px;
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
flex-wrap:wrap;
}

.logo{
display:flex;
align-items:center;
line-height:1;
flex-shrink:0;
}

.logo span{
color:#e75480;
}

.logo img{
display:block;
height:78px;
width:auto;
}

.search-wrap{
display:flex;
align-items:center;
gap:8px;
flex:1;
min-width:280px;
max-width:560px;
background:#fff;
border:1px solid #f0d6de;
border-radius:999px;
padding:6px;
box-shadow:0 2px 10px rgba(143,68,102,0.04);
}

.search-wrap input{
flex:1;
border:none;
outline:none;
background:transparent;
padding:10px 14px;
font-size:15px;
color:#2b2230;
min-width:0;
}

.search-wrap input::placeholder{
color:#9f8d97;
}

.search-wrap button{
border:none;
background:#cc4f7f;
color:#fff;
font-weight:700;
font-size:15px;
padding:12px 18px;
border-radius:999px;
cursor:pointer;
white-space:nowrap;
transition:background .2s ease;
}

.search-wrap button:hover{
background:#b94371;
}

.hero{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:18px;
margin-bottom:22px;
}

.hero-card,
.card{
background:#fff;
border:1px solid #f0d6de;
border-radius:26px;
padding:28px;
box-shadow:0 3px 18px rgba(143,68,102,0.04);
}

.hero-card h1,
.card h1{
font-size:40px;
line-height:1.2;
color:#8f4466;
margin-bottom:14px;
}

.hero-card h2,
.card h2{
font-size:28px;
line-height:1.25;
color:#8f4466;
margin-bottom:16px;
}

.card h3{
font-size:18px;
line-height:1.35;
color:#8f4466;
margin-bottom:10px;
margin-top:12px;
}

.hero-card p,
.card p,
.card li,
.card td,
.card th,
footer a,
footer p{
font-size:16px;
}

.hero-card p + p,
.card p + p{
margin-top:12px;
}

.badge{
display:inline-block;
padding:8px 14px;
background:#fff0f6;
border:1px solid #f1c9d7;
border-radius:999px;
color:#b24673;
font-size:13px;
font-weight:700;
margin-bottom:14px;
}

.hero-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:20px;
}

.btn-main,
.btn-secondary,
.back{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:999px;
font-weight:700;
font-size:15px;
transition:all .2s ease;
}

.btn-main{
background:#cc4f7f;
color:#fff;
}

.btn-main:hover{
background:#b94371;
}

.btn-secondary{
background:#fff;
color:#8f4466;
border:1px solid #efcfdb;
}

.btn-secondary:hover{
background:#fff6fa;
}

.back{
background:#fff;
border:1px solid #efcfdb;
color:#8f4466;
margin:18px 0;
}

.back:hover{
background:#fff5f9;
}

.hero-list{
padding-left:18px;
}

.hero-list li{
margin-bottom:8px;
}

.hero-note{
margin-top:18px;
}

.card{
margin-bottom:18px;
}

.ad-card{
padding-top:18px;
padding-bottom:18px;
}

.ads-label{
font-size:12px;
color:#a18a95;
margin-bottom:10px;
}

.grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
margin-top:18px;
}

.grid-2{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
margin-top:18px;
}

.tile{
display:block;
background:#fff9fc;
border:1px solid #f0d6de;
border-radius:20px;
padding:18px;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tile:hover{
transform:translateY(-2px);
border-color:#e8bfd0;
box-shadow:0 8px 20px rgba(143,68,102,0.06);
}

.tile strong{
display:block;
font-size:18px;
line-height:1.35;
color:#8f4466;
margin-bottom:8px;
}

.tile span{
display:block;
font-size:15px;
color:#403642;
line-height:1.65;
}

.info-list{
display:flex;
flex-direction:column;
gap:14px;
margin-top:14px;
}

.info-item{
background:#fffafc;
border:1px solid #f0d6de;
border-radius:18px;
padding:18px;
}

.info-item h3{
margin:0 0 8px 0;
font-size:18px;
line-height:1.35;
color:#8f4466;
}

.info-item p{
margin:0;
}

.info-boxes{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
margin-top:18px;
}

.info-box{
background:#fffafc;
border:1px solid #f0d6de;
border-radius:20px;
padding:18px;
}

.info-box strong{
display:block;
font-size:18px;
color:#8f4466;
margin-bottom:8px;
}

.article-list{
display:block !important;
margin-top:18px !important;
}

.article{
all:unset;
}

.article-stack{
display:flex;
flex-direction:column;
gap:14px;
margin-top:18px;
}

.article-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.article-simple{
background:#fff;
border:1px solid #ecd6df;
border-radius:16px;
padding:18px;
}

.article-simple h3{
font-size:18px;
line-height:1.35;
color:#8f4466;
margin:0 0 10px 0;
}

.article-simple p{
font-size:15px;
line-height:1.7;
color:#403642;
margin:0 0 12px 0;
}

.article-simple a{
display:inline-block;
font-size:15px;
font-weight:700;
color:#c44f7c;
text-decoration:none;
}

.article-simple a:hover{
text-decoration:underline;
}

.article-clean{
display:flex;
flex-direction:column;
gap:14px;
}

.article-clean .article-simple{
background:#fff;
border:1px solid #eee;
border-radius:14px;
padding:16px;
}

.list-links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}

.list-links a{
display:inline-flex;
align-items:center;
padding:10px 14px;
border:1px solid #f0d6de;
border-radius:999px;
background:#fff9fc;
font-size:14px;
color:#8f4466;
transition:all .2s ease;
}

.list-links a:hover{
background:#fff1f7;
border-color:#e7bfd0;
}

.notice{
background:#fff6fa;
border:1px solid #efcfdb;
border-radius:18px;
padding:16px;
font-size:15px;
color:#5a4752;
}

.result{
margin-top:18px;
padding:16px;
background:#fff6fa;
border:1px solid #efcfdb;
border-radius:18px;
}

.hidden{
display:none;
}

.form-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
margin-top:16px;
margin-bottom:16px;
}

label{
display:block;
font-size:14px;
font-weight:700;
color:#8f4466;
margin-bottom:6px;
}

input,
select,
textarea{
width:100%;
padding:12px 14px;
border:1px solid #e9d3dc;
border-radius:14px;
font-size:15px;
background:#fff;
color:#2b2230;
outline:none;
}

input:focus,
select:focus,
textarea:focus{
border-color:#d67aa0;
box-shadow:0 0 0 3px rgba(214,122,160,0.12);
}

button{
border:none;
background:#cc4f7f;
color:#fff;
font-weight:700;
font-size:15px;
padding:12px 18px;
border-radius:999px;
cursor:pointer;
transition:background .2s ease;
}

button:hover{
background:#b94371;
}

.table-wrap{
overflow-x:auto;
margin-top:18px;
}

table{
width:100%;
border-collapse:collapse;
background:#fff;
border:1px solid #efd8e1;
border-radius:16px;
overflow:hidden;
}

th,
td{
padding:12px 14px;
text-align:left;
border-bottom:1px solid #f3e3ea;
}

th{
background:#fff6fa;
color:#8f4466;
font-weight:700;
}

tr:last-child td{
border-bottom:none;
}

.timeline{
display:grid;
gap:12px;
margin-top:18px;
}

.timeline-box{
background:#fffafc;
border:1px solid #f0d6de;
border-radius:18px;
padding:16px;
}

.calendar-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
gap:10px;
margin-top:14px;
}

.cal-day{
padding:12px;
border-radius:16px;
border:1px solid #edd6df;
background:#fff;
font-size:14px;
text-align:center;
}

.cal-day small{
display:block;
margin-top:5px;
font-size:12px;
color:#8f7a84;
}

.phase-neutral{
background:#fff;
}

.phase-okres{
background:#ffe7ef;
border-color:#f2b8cb;
}

.phase-plodne{
background:#fff3d9;
border-color:#edd59a;
}

.phase-owulacja{
background:#e8f7ea;
border-color:#a9d9b0;
}

.legend{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:14px;
font-size:14px;
color:#5a4752;
}

.legend span{
display:flex;
align-items:center;
gap:6px;
}

.dot{
display:inline-block;
width:14px;
height:14px;
border-radius:50%;
}

.dot-okres{
background:#ffd1e0;
border:1px solid #f2b8cb;
}

.dot-plodne{
background:#ffe7a9;
border:1px solid #e8cf84;
}

.dot-owulacja{
background:#cfeecf;
border:1px solid #9fd0a6;
}

.simple-points{
display:flex;
flex-direction:column;
gap:18px;
margin-top:18px;
}

.simple-point{
padding:0;
border:none;
background:transparent;
border-radius:0;
}

.simple-point h3{
margin:0 0 8px;
font-size:1.2rem;
color:#9a4466;
}

.simple-point p{
margin:0;
}

.search-box{
display:flex;
align-items:center;
gap:10px;
width:100%;
max-width:620px;
margin:0;
}

.search-box input{
flex:1;
min-width:0;
padding:14px 16px;
border-radius:14px;
border:1px solid #e5c8d5;
font-size:16px;
}

.search-box button{
padding:14px 20px;
border:none;
border-radius:14px;
background:#c94f7c;
color:#fff;
font-weight:700;
cursor:pointer;
white-space:nowrap;
}

footer{
margin-top:22px;
padding:32px 0 18px;
background:#fff;
border-top:1px solid #f0d6de;
}

.footer-grid{
max-width:1180px;
margin:0 auto;
padding:0 16px;
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:24px;
}

footer h3{
font-size:17px;
color:#8f4466;
margin-bottom:12px;
}

footer a{
display:block;
margin-bottom:8px;
color:#5c4a55;
}

footer a:hover{
color:#b24673;
}

.copy{
padding-top:20px;
font-size:14px;
color:#8f7a84;
}

@media (max-width: 1024px){
.hero{
grid-template-columns:1fr;
}

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

.info-boxes{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 768px){
body{
font-size:15px;
}

.container{
padding:0 12px;
}

.topbar{
display:flex;
flex-direction:column;
align-items:stretch;
gap:14px;
}

.logo img{
height:58px;
}

.hero-card,
.card{
padding:20px;
border-radius:22px;
}

.hero-card h1,
.card h1{
font-size:30px;
}

.hero-card h2,
.card h2{
font-size:22px;
}

.grid,
.grid-2,
.article-list{
grid-template-columns:1fr;
}

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

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

.btn-main,
.btn-secondary,
.back,
button{
width:100%;
}

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

.list-links{
gap:8px;
}

.list-links a{
width:100%;
justify-content:flex-start;
}

.search-box{
flex-direction:column;
max-width:none;
width:100%;
}

.search-box input,
.search-box button{
width:100%;
}

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

.article-simple{
padding:16px;
}

.article-simple h3{
font-size:17px;
}
}

@media (max-width: 480px){
.logo img{
height:50px;
}

.hero-card h1,
.card h1{
font-size:26px;
}

.hero-card h2,
.card h2{
font-size:20px;
}

.tile strong,
.article h3,
.info-item h3,
.info-box strong{
font-size:17px;
}
}