@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap');

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

:root{
  --c-black:#0e0f0c;
  --c-green:#9fe870;
  --c-green-dark:#163300;
  --c-green-mint:#e2f6d5;
  --c-green-pastel:#cdffad;
  --c-gray:#868685;
  --c-warm-dark:#454745;
  --c-surface:#e8ebe6;
  --c-white:#ffffff;
  --c-border:rgba(14,15,12,0.12);
  --ff-body:'Inter',Helvetica,Arial,sans-serif;
  --fw-regular:400;
  --fw-semi:600;
  --fw-black:900;
  --r-pill:9999px;
  --r-card:30px;
  --r-large:40px;
  --r-small:16px;
}

html{scroll-behavior:smooth;font-feature-settings:"calt"}
body{font-family:var(--ff-body);font-weight:var(--fw-semi);color:var(--c-black);background:var(--c-white);line-height:1.44;letter-spacing:-0.108px;font-size:18px}

a{color:var(--c-green-dark);text-decoration:none}
a:hover{text-decoration:underline}

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

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* HEADER */
.site-header{background:var(--c-white);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.site-logo{font-weight:var(--fw-black);font-size:1.38rem;color:var(--c-black);letter-spacing:-0.396px;line-height:1.25}
.site-logo span{color:var(--c-green-dark)}

/* NAV */
.main-nav ul{list-style:none;display:flex;gap:8px;align-items:center}
.main-nav a{font-weight:var(--fw-semi);font-size:0.94rem;color:var(--c-black);padding:8px 12px;border-radius:var(--r-pill);transition:background 0.15s}
.main-nav a:hover{background:rgba(211,242,192,0.4);text-decoration:none}
.btn-nav{background:var(--c-green);color:var(--c-green-dark) !important;padding:8px 20px !important;border-radius:var(--r-pill);font-weight:var(--fw-semi);transition:transform 0.15s}
.btn-nav:hover{transform:scale(1.05);background:var(--c-green) !important}
.btn-nav:active{transform:scale(0.95)}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--c-black);border-radius:2px;transition:0.2s}

/* HERO */
.hero{padding:80px 0 64px;background:var(--c-white)}
.hero-label{font-size:0.88rem;font-weight:var(--fw-semi);color:var(--c-gray);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-weight:var(--fw-black);font-size:clamp(2.5rem,6vw,5rem);line-height:0.9;color:var(--c-black);letter-spacing:-2px;margin-bottom:24px;max-width:820px}
.hero-desc{font-size:1.13rem;font-weight:var(--fw-regular);color:var(--c-warm-dark);max-width:580px;margin-bottom:36px;line-height:1.55}
.hero-img{border-radius:var(--r-large);overflow:hidden;max-height:480px;object-fit:cover;width:100%}

/* GRID ARTICLES */
.section{padding:64px 0}
.section-title{font-weight:var(--fw-black);font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:0.9;letter-spacing:-1.5px;color:var(--c-black);margin-bottom:8px}
.section-sub{font-size:1rem;color:var(--c-gray);margin-bottom:40px;font-weight:var(--fw-regular)}

.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article-card{border:1px solid var(--c-border);border-radius:var(--r-card);overflow:hidden;transition:transform 0.15s,box-shadow 0.15s;background:var(--c-white)}
.article-card:hover{transform:translateY(-4px)}
.article-card img{width:100%;height:200px;object-fit:cover}
.card-body{padding:24px}
.card-tag{font-size:0.75rem;font-weight:var(--fw-semi);color:var(--c-green-dark);background:var(--c-green-mint);padding:4px 10px;border-radius:var(--r-pill);display:inline-block;margin-bottom:12px;letter-spacing:0.3px}
.card-title{font-size:1.13rem;font-weight:var(--fw-semi);color:var(--c-black);margin-bottom:10px;line-height:1.3;letter-spacing:-0.3px}
.card-excerpt{font-size:0.88rem;color:var(--c-warm-dark);font-weight:var(--fw-regular);line-height:1.5}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:0.88rem;font-weight:var(--fw-semi);color:var(--c-green-dark)}
.card-link::after{content:'→'}

/* INFO SECTION */
.info-section{background:var(--c-surface);padding:64px 0;border-radius:0}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.info-card{background:var(--c-white);border-radius:var(--r-card);padding:32px;border:1px solid var(--c-border)}
.info-card-num{font-size:2.5rem;font-weight:var(--fw-black);color:var(--c-green);line-height:1;margin-bottom:12px}
.info-card h3{font-size:1.13rem;font-weight:var(--fw-semi);margin-bottom:8px;color:var(--c-black)}
.info-card p{font-size:0.88rem;color:var(--c-warm-dark);font-weight:var(--fw-regular);line-height:1.6}

/* ARTICLE PAGE */
.article-header{padding:56px 0 40px;border-bottom:1px solid var(--c-border)}
.article-header h1{font-weight:var(--fw-black);font-size:clamp(2rem,4vw,3.5rem);line-height:0.92;letter-spacing:-2px;max-width:860px;margin-bottom:20px}
.article-meta{font-size:0.88rem;color:var(--c-gray);font-weight:var(--fw-regular)}
.article-meta span{margin-right:16px}
.article-body{padding:48px 0;max-width:760px}
.article-body h2{font-weight:var(--fw-black);font-size:clamp(1.5rem,3vw,2.2rem);line-height:0.92;letter-spacing:-1px;margin:40px 0 16px;color:var(--c-black)}
.article-body h3{font-weight:var(--fw-semi);font-size:1.25rem;margin:28px 0 12px;color:var(--c-black)}
.article-body p{margin-bottom:20px;font-weight:var(--fw-regular);color:var(--c-warm-dark);line-height:1.7}
.article-body ul,.article-body ol{margin:0 0 20px 24px;color:var(--c-warm-dark);font-weight:var(--fw-regular);line-height:1.7}
.article-body li{margin-bottom:6px}
.article-body img{border-radius:var(--r-card);margin:32px 0;width:100%;max-height:400px;object-fit:cover}
.article-body a{color:var(--c-green-dark);text-decoration:underline}

.article-aside{padding:48px 0}

/* RELATED ARTICLES */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}

/* PAGE */
.page-header{padding:56px 0 32px;border-bottom:1px solid var(--c-border)}
.page-header h1{font-weight:var(--fw-black);font-size:clamp(2rem,4vw,3rem);line-height:0.92;letter-spacing:-1.5px}
.page-body{padding:48px 0;max-width:760px}
.page-body h2{font-weight:var(--fw-semi);font-size:1.38rem;margin:32px 0 12px}
.page-body p,.page-body li{font-weight:var(--fw-regular);color:var(--c-warm-dark);line-height:1.7;margin-bottom:14px}
.page-body ul,.page-body ol{margin:0 0 16px 24px}

/* CONTACT FORM */
.contact-form{max-width:520px;margin-top:32px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:var(--fw-semi);font-size:0.88rem;margin-bottom:6px;color:var(--c-black)}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--c-border);border-radius:10px;font-family:var(--ff-body);font-size:1rem;color:var(--c-black);background:var(--c-white);outline:none;transition:border-color 0.15s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--c-green-dark);box-shadow:rgb(134,134,133) 0px 0px 0px 1px inset}
.form-group textarea{resize:vertical;min-height:120px}
.btn-primary{background:var(--c-green);color:var(--c-green-dark);padding:12px 28px;border:none;border-radius:var(--r-pill);font-family:var(--ff-body);font-weight:var(--fw-semi);font-size:1rem;cursor:pointer;transition:transform 0.15s;letter-spacing:-0.108px}
.btn-primary:hover{transform:scale(1.05)}
.btn-primary:active{transform:scale(0.95)}

/* FOOTER */
.site-footer{background:var(--c-black);color:rgba(255,255,255,0.7);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand{font-weight:var(--fw-black);font-size:1.13rem;color:var(--c-white);margin-bottom:12px;letter-spacing:-0.3px}
.footer-brand span{color:var(--c-green)}
.footer-desc{font-size:0.88rem;line-height:1.6;font-weight:var(--fw-regular)}
.footer-col h4{font-weight:var(--fw-semi);font-size:0.88rem;color:var(--c-white);margin-bottom:14px;letter-spacing:0.3px;text-transform:uppercase}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:8px}
.footer-col a{font-size:0.88rem;color:rgba(255,255,255,0.6);font-weight:var(--fw-regular);transition:color 0.15s}
.footer-col a:hover{color:var(--c-green);text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:0.81rem;color:rgba(255,255,255,0.4);font-weight:var(--fw-regular)}

/* COOKIE BANNER */
.cookie-banner{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:760px;background:var(--c-black);color:var(--c-white);padding:20px 24px;border-radius:var(--r-card);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:999;border:1px solid rgba(159,232,112,0.3)}
.cookie-banner p{font-size:0.88rem;font-weight:var(--fw-regular);line-height:1.5;color:rgba(255,255,255,0.8)}
.cookie-banner p a{color:var(--c-green);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.btn-accept{background:var(--c-green);color:var(--c-green-dark);padding:9px 20px;border:none;border-radius:var(--r-pill);font-family:var(--ff-body);font-weight:var(--fw-semi);font-size:0.88rem;cursor:pointer;transition:transform 0.15s;white-space:nowrap}
.btn-accept:hover{transform:scale(1.05)}
.btn-reject{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);padding:9px 20px;border:1px solid rgba(255,255,255,0.2);border-radius:var(--r-pill);font-family:var(--ff-body);font-weight:var(--fw-semi);font-size:0.88rem;cursor:pointer;transition:transform 0.15s;white-space:nowrap}
.btn-reject:hover{transform:scale(1.05)}

/* BREADCRUMB */
.breadcrumb{padding:16px 0;font-size:0.81rem;color:var(--c-gray);font-weight:var(--fw-regular)}
.breadcrumb a{color:var(--c-gray)}
.breadcrumb a:hover{color:var(--c-green-dark);text-decoration:none}
.breadcrumb span{margin:0 6px}

/* DISCLAIMER */
.disclaimer{background:var(--c-green-mint);border-radius:var(--r-small);padding:16px 20px;margin:32px 0;font-size:0.88rem;color:var(--c-green-dark);font-weight:var(--fw-regular);line-height:1.6;border-left:3px solid var(--c-green)}

/* RESPONSIVE */
@media(max-width:992px){
  .articles-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:576px){
  .articles-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cookie-banner{flex-direction:column;align-items:flex-start}
  .header-inner{position:relative}
  .nav-toggle{display:flex}
  .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--c-white);border-bottom:1px solid var(--c-border);padding:16px}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:4px}
  .hero h1{letter-spacing:-1px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}