*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --clr-bg:#f4f1ec;
  --clr-dark:#1a1a1a;
  --clr-accent:#2d6a4f;
  --clr-accent-light:#52b788;
  --clr-warm:#e8ddd3;
  --clr-card:#ffffff;
  --clr-text:#333;
  --clr-muted:#6b7280;
  --font-heading:'Playfair Display',serif;
  --font-body:'DM Sans',sans-serif;
  --font-alt:'Space Grotesk',sans-serif;
  --font-serif:'Libre Baskerville',serif;
  --max-w:1200px;
  --radius:12px;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--clr-bg);color:var(--clr-text);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}

.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(244,241,236,0.95);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,0.06);transition:background .3s}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--clr-dark)}
.logo span{color:var(--clr-accent)}
.desktop-nav{display:flex;gap:28px}
.desktop-nav a{font-family:var(--font-alt);font-size:.92rem;font-weight:500;color:var(--clr-muted);transition:color .2s;position:relative}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--clr-accent)}
.desktop-nav a.active::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:2px;background:var(--clr-accent);border-radius:2px}
.burger-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger-btn span{width:24px;height:2px;background:var(--clr-dark);border-radius:2px;transition:transform .3s}

.mobile-menu{position:fixed;top:0;right:-100%;width:300px;height:100vh;background:var(--clr-dark);z-index:200;transition:right .35s ease;padding:80px 32px 32px}
.mobile-menu.open{right:0}
.mobile-menu nav{display:flex;flex-direction:column;gap:20px}
.mobile-menu nav a{color:#fff;font-family:var(--font-alt);font-size:1.1rem;font-weight:500;transition:color .2s}
.mobile-menu nav a:hover{color:var(--clr-accent-light)}
.close-menu{position:absolute;top:20px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer}

.hero{position:relative;height:520px;background:url('https://upload.wikimedia.org/wikipedia/commons/a/a9/Healthy_morning_routine_with_workout%2C_snack%2C_and_refreshing_drink_at_home.jpg') center/cover no-repeat;margin-top:72px;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,26,0.55) 0%,rgba(26,26,26,0.75) 100%)}
.hero-content{position:relative;z-index:2;max-width:720px;padding:0 24px}
.hero-content h1{font-family:var(--font-heading);font-size:2.8rem;font-weight:700;color:#fff;line-height:1.2;margin-bottom:20px}
.hero-sub{font-family:var(--font-serif);font-size:1.1rem;color:rgba(255,255,255,0.85);line-height:1.6}

.intro-section{padding:80px 0}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.intro-text h2{font-family:var(--font-heading);font-size:2rem;color:var(--clr-dark);margin-bottom:20px}
.intro-text p{margin-bottom:16px;color:var(--clr-text)}
.intro-image{border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.intro-image img{width:100%;height:400px;object-fit:cover}

.articles-section{padding:60px 0 80px;background:var(--clr-warm)}
.section-heading{font-family:var(--font-heading);font-size:2rem;text-align:center;margin-bottom:48px;color:var(--clr-dark)}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.article-card{background:var(--clr-card);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,0.1)}
.card-image{height:220px;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.article-card:hover .card-image img{transform:scale(1.05)}
.card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.card-tag{display:inline-block;font-family:var(--font-alt);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--clr-accent);background:rgba(45,106,79,0.1);padding:4px 12px;border-radius:20px;margin-bottom:12px;width:fit-content}
.card-body h3{font-family:var(--font-heading);font-size:1.25rem;color:var(--clr-dark);margin-bottom:10px;line-height:1.3}
.card-body p{font-size:.92rem;color:var(--clr-muted);flex:1}
.card-date{font-size:.8rem;color:var(--clr-muted);margin-top:14px;font-family:var(--font-alt)}

.tips-section{padding:80px 0}
.tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.tip-block{background:var(--clr-card);border-radius:var(--radius);padding:32px;border-left:4px solid var(--clr-accent)}
.tip-block h3{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:12px;color:var(--clr-dark)}
.tip-block p{font-size:.92rem;color:var(--clr-muted)}

.cta-banner{padding:0 0 80px}
.banner-inner{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;background:var(--clr-dark)}
.banner-inner img{width:100%;height:100%;object-fit:cover;min-height:280px}
.banner-text{padding:48px;display:flex;flex-direction:column;justify-content:center}
.banner-text h2{font-family:var(--font-heading);font-size:1.8rem;color:#fff;margin-bottom:16px}
.banner-text p{color:rgba(255,255,255,0.75);font-size:.95rem}

.site-footer{background:var(--clr-dark);color:rgba(255,255,255,0.7);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-col h4{font-family:var(--font-heading);color:#fff;margin-bottom:16px;font-size:1.1rem}
.footer-col p{font-size:.88rem;line-height:1.6}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{font-size:.88rem;transition:color .2s}
.footer-col ul li a:hover{color:var(--clr-accent-light)}
.footer-col a{color:rgba(255,255,255,0.7);transition:color .2s}
.footer-col a:hover{color:var(--clr-accent-light)}
.footer-bottom{text-align:center;padding:24px 0;font-size:.82rem}
.footer-bottom a{color:rgba(255,255,255,0.5);transition:color .2s}
.footer-bottom a:hover{color:#fff}

.cookie-banner{position:fixed;bottom:0;left:0;width:100%;background:rgba(26,26,26,0.96);backdrop-filter:blur(10px);z-index:300;padding:20px 0}
.cookie-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cookie-inner p{color:rgba(255,255,255,0.8);font-size:.88rem;flex:1}
.cookie-inner a{color:var(--clr-accent-light);text-decoration:underline}
.cookie-buttons{display:flex;gap:12px;flex-shrink:0}
.btn-accept,.btn-reject{padding:10px 24px;border:none;border-radius:8px;font-family:var(--font-alt);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s}
.btn-accept{background:var(--clr-accent);color:#fff}
.btn-accept:hover{background:var(--clr-accent-light)}
.btn-reject{background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.2)}
.btn-reject:hover{color:#fff;border-color:#fff}

.page-content{margin-top:72px;padding:60px 0 80px}
.page-content h1{font-family:var(--font-heading);font-size:2.2rem;color:var(--clr-dark);margin-bottom:24px}
.page-content h2{font-family:var(--font-heading);font-size:1.5rem;color:var(--clr-dark);margin:32px 0 12px}
.page-content h3{font-family:var(--font-heading);font-size:1.2rem;color:var(--clr-dark);margin:24px 0 10px}
.page-content p{margin-bottom:16px}
.page-content ul,.page-content ol{margin:0 0 16px 20px}
.page-content li{margin-bottom:8px}
.page-content a{color:var(--clr-accent);text-decoration:underline}

.article-hero{position:relative;height:400px;margin-top:72px;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.article-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,26,26,0.8) 0%,rgba(26,26,26,0.2) 100%)}
.article-hero-content{position:relative;z-index:2;padding:40px;max-width:var(--max-w);margin:0 auto;width:100%}
.article-hero-content h1{font-family:var(--font-heading);font-size:2.4rem;color:#fff;margin-bottom:8px;line-height:1.2}
.article-meta{display:flex;gap:16px;font-size:.85rem;color:rgba(255,255,255,0.7);font-family:var(--font-alt)}
.article-body{max-width:780px;margin:0 auto;padding:48px 24px 80px}
.article-body h2{font-family:var(--font-heading);font-size:1.6rem;color:var(--clr-dark);margin:40px 0 16px}
.article-body h3{font-family:var(--font-heading);font-size:1.25rem;color:var(--clr-dark);margin:28px 0 12px}
.article-body p{margin-bottom:16px;font-size:1rem}
.article-body ul,.article-body ol{margin:0 0 16px 20px}
.article-body li{margin-bottom:8px}
.article-body img{border-radius:var(--radius);margin:24px 0;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.article-body a{color:var(--clr-accent);text-decoration:underline}
.article-body blockquote{border-left:4px solid var(--clr-accent);margin:24px 0;padding:16px 24px;background:rgba(45,106,79,0.05);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--clr-muted)}

.related-articles{background:var(--clr-warm);padding:60px 0}
.related-articles h2{font-family:var(--font-heading);text-align:center;margin-bottom:36px;font-size:1.6rem;color:var(--clr-dark)}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.related-card{display:flex;gap:16px;background:var(--clr-card);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.05);transition:transform .3s}
.related-card:hover{transform:translateY(-4px)}
.related-card img{width:180px;height:140px;object-fit:cover;flex-shrink:0}
.related-card-body{padding:16px;display:flex;flex-direction:column;justify-content:center}
.related-card-body h3{font-family:var(--font-heading);font-size:1.05rem;color:var(--clr-dark);margin-bottom:6px}
.related-card-body p{font-size:.85rem;color:var(--clr-muted)}

.contact-form{max-width:560px}
.contact-form .form-group{margin-bottom:20px}
.contact-form label{display:block;font-family:var(--font-alt);font-weight:500;margin-bottom:6px;font-size:.9rem}
.contact-form input,.contact-form textarea{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:8px;font-family:var(--font-body);font-size:.95rem;transition:border-color .2s;background:var(--clr-card)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--clr-accent)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form button{padding:12px 32px;background:var(--clr-accent);color:#fff;border:none;border-radius:8px;font-family:var(--font-alt);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s}
.contact-form button:hover{background:var(--clr-accent-light)}

@media(max-width:900px){
  .desktop-nav{display:none}
  .burger-btn{display:flex}
  .intro-grid{grid-template-columns:1fr}
  .articles-grid{grid-template-columns:1fr}
  .tips-grid{grid-template-columns:1fr}
  .banner-inner{grid-template-columns:1fr}
  .banner-inner img{height:240px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-content h1{font-size:2rem}
  .cookie-inner{flex-direction:column;text-align:center}
  .related-grid{grid-template-columns:1fr}
  .related-card img{width:120px;height:100px}
}
@media(max-width:600px){
  .hero{height:400px}
  .hero-content h1{font-size:1.6rem}
  .footer-grid{grid-template-columns:1fr}
  .article-hero-content h1{font-size:1.8rem}
  .article-hero{height:320px}
}