:root{
    --bg:#fafaf8;
    --bg-card:#fff;
    --bg-footer:#2d3436;
    --bg-hero:linear-gradient(135deg,#eef5ee,#f8f7f4 50%,#fef9f4);
    --accent:#5a8a6e;
    --accent-hover:#4a7a5e;
    --accent-light:#e8f2ec;
    --accent-muted:#d1e5d8;
    --text:#2d3436;
    --text-secondary:#556058;
    --text-muted:#8a9690;
    --border:#e8ebe8;
    --border-light:#f0f2f0;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --font-sans:system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-serif:Georgia,'Times New Roman',serif;
    --size-xs:13px;
    --size-sm:15px;
    --size-md:17px;
    --size-lg:22px;
    --size-xl:28px
}

*,*::before,*::after{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    font-family:var(--font-sans);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

.layout{min-height:100vh;display:flex;flex-direction:column}

/* Header */
.header{
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,.92)
}

.header__inner{
    max-width:1100px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px
}

.header__brand{display:flex;align-items:center;gap:12px}

.header__logo{display:inline-flex;align-items:center;text-decoration:none}
.header__logo img{height:34px;width:auto}

.header__titles{display:flex;flex-direction:column;gap:2px}

.header__name{
    font-size:16px;
    font-weight:700;
    color:var(--text);
    text-decoration:none;
    letter-spacing:.3px;
    line-height:1.2
}

.header__name:hover{color:var(--accent)}

.header__tagline{
    font-size:11px;
    color:var(--text-muted);
    letter-spacing:.5px;
    text-transform:uppercase;
    line-height:1.3;
    display:none
}

@media(min-width:640px){
    .header__tagline{display:block}
}

/* Burger */
.header__burger{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px;
    height:40px;
    padding:8px;
    border:none;
    background:none;
    cursor:pointer;
    border-radius:var(--radius-sm)
}

.header__burger:hover{background:rgba(90,138,110,.07)}

.header__burger-line{
    display:block;
    width:22px;
    height:2px;
    background:var(--text);
    border-radius:1px;
    transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease
}

.header__burger--open .header__burger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header__burger--open .header__burger-line:nth-child(2){opacity:0}
.header__burger--open .header__burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Header nav (desktop) */
.header__link{
    position:relative;
    padding:8px 18px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    color:var(--text-secondary);
    transition:color .15s ease
}

.header__link::after{
    content:"";
    position:absolute;
    bottom:2px;
    left:50%;
    width:0;
    height:2px;
    background:var(--accent);
    border-radius:1px;
    transition:width .3s cubic-bezier(.4,0,.2,1),left .3s cubic-bezier(.4,0,.2,1)
}

.header__link:hover{color:var(--accent)}
.header__link:hover::after{width:60%;left:20%}
.header__link--active{color:var(--accent)}
.header__link--active::after{width:60%;left:20%}

/* Mobile nav */
.mobile-nav{
    position:fixed;
    top:0;
    right:-300px;
    width:280px;
    height:100vh;
    background:var(--bg-card);
    z-index:200;
    padding:80px 24px 32px;
    box-shadow:-4px 0 24px rgba(0,0,0,.1);
    transition:right .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto
}

.mobile-nav--open{right:0}

.mobile-nav__link{
    display:block;
    padding:14px 16px;
    font-size:var(--size-md);
    font-weight:500;
    color:var(--text-secondary);
    text-decoration:none;
    border-radius:var(--radius-sm)
}

.mobile-nav__link:hover,
.mobile-nav__link--active{color:var(--accent);background:rgba(90,138,110,.07)}

.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.3);
    z-index:190;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease;
    backdrop-filter:blur(2px)
}

.mobile-overlay--open{opacity:1;visibility:visible}

/* Main */
.main{flex:1}

.main__grid{
    max-width:1100px;
    margin:0 auto;
    padding:24px 24px 64px;
    display:grid;
    grid-template-columns:1fr 300px;
    gap:40px;
    align-items:start
}

.content{min-width:0;display:flex;flex-direction:column;gap:24px}

/* Breadcrumbs */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--size-xs);color:var(--text-muted)}

.breadcrumbs__link{color:var(--text-muted);text-decoration:none;transition:color .15s ease}
.breadcrumbs__link:hover{color:var(--accent)}
.breadcrumbs__sep{color:var(--border)}
.breadcrumbs__current{color:var(--text-secondary);font-weight:500}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:88px}

.sidebar__block{
    position:relative;
    background:var(--bg-card);
    border-radius:var(--radius-md);
    padding:24px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
    border:1px solid var(--border-light);
    overflow:hidden
}

.sidebar__block::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:3px;
    height:100%;
    background:linear-gradient(180deg,var(--accent),var(--accent-muted));
    border-radius:var(--radius-md) 0 0 var(--radius-md);
    opacity:0;
    transition:opacity .25s ease
}

.sidebar__block:hover::before{opacity:1}

.sidebar__title{
    margin:0 0 14px;
    font-size:var(--size-xs);
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent)
}

.sidebar__nav{display:flex;flex-direction:column;gap:2px}

.sidebar__link{
    position:relative;
    display:block;
    font-size:var(--size-sm);
    padding:10px 14px 10px 20px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    color:var(--text-secondary);
    transition:color .15s ease,background .15s ease,padding-left .15s ease
}

.sidebar__link::before{
    content:"";
    position:absolute;
    left:8px;
    top:50%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--accent-muted);
    transform:translateY(-50%) scale(.6);
    transition:transform .15s ease,background .15s ease
}

.sidebar__link:hover{color:var(--accent);background:rgba(90,138,110,.05);padding-left:24px}
.sidebar__link:hover::before{transform:translateY(-50%) scale(1);background:var(--accent)}

.sidebar__text{margin:0;font-size:var(--size-xs);line-height:1.7;color:var(--text-secondary)}

/* Sidebar contacts */
.sidebar__contacts{display:flex;flex-direction:column;gap:12px}

.sidebar__contact-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:var(--size-xs);
    color:var(--text-secondary);
    line-height:1.5
}

.sidebar__contact-icon{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:var(--accent);opacity:.7}
.sidebar__contact-label{font-weight:600;color:var(--text);display:block;font-size:var(--size-xs);margin-bottom:2px}
.sidebar__contact-value{color:var(--text-secondary)}
.sidebar__contact-value a{color:var(--accent);text-decoration:none}
.sidebar__contact-value a:hover{color:var(--accent-hover)}

/* Page intro */
.page-intro{
    background:var(--bg-hero);
    border-radius:var(--radius-lg);
    padding:40px 36px;
    border:1px solid var(--border-light);
    animation:fade-down .35s ease-out both
}

.page-intro__title{
    margin:0 0 12px;
    font-size:var(--size-xl);
    font-weight:700;
    color:var(--text);
    letter-spacing:-.5px;
    line-height:1.3
}

.page-intro__text{margin:0;font-size:var(--size-sm);line-height:1.7;color:var(--text-secondary);max-width:600px}

/* Cards */
.cards{display:flex;flex-direction:column;gap:16px}

.card{
    background:var(--bg-card);
    border-radius:var(--radius-md);
    padding:0 30px 28px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
    border:1px solid var(--border-light);
    overflow:hidden;
    animation:card-stagger .4s ease-out both
}

.card:hover{box-shadow:0 2px 10px rgba(0,0,0,.055),0 1px 3px rgba(0,0,0,.04);border-color:var(--border)}

.cards .card:nth-child(1){animation-delay:.05s}
.cards .card:nth-child(2){animation-delay:.1s}
.cards .card:nth-child(3){animation-delay:.15s}
.cards .card:nth-child(4){animation-delay:.2s}
.cards .card:nth-child(5){animation-delay:.25s}
.cards .card:nth-child(6){animation-delay:.3s}
.cards .card:nth-child(7){animation-delay:.35s}
.cards .card:nth-child(8){animation-delay:.4s}
.cards .card:nth-child(9){animation-delay:.45s}
.cards .card:nth-child(10){animation-delay:.5s}

.card__image{
    height:160px;
    margin:0 -30px 20px;
    background:linear-gradient(135deg,#e8f2ec,#d4e8dc 40%,#c2ddd2);
    display:flex;
    align-items:center;
    justify-content:center
}

.card__image-icon{width:56px;height:56px;color:var(--accent)}

.card__image-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.card__title{
    margin:0 0 10px;
    font-size:var(--size-lg);
    line-height:1.4;
    color:var(--text);
    font-weight:600
}

.card__title-link{text-decoration:none;color:inherit}
.card__title-link:hover .card__title{color:var(--accent)}

.card__meta{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--size-xs);color:var(--text-muted);margin-bottom:12px}
.card__meta-item{display:inline-flex;align-items:center;gap:4px}
.card__excerpt{margin:0 0 18px;font-size:var(--size-sm);line-height:1.75;color:var(--text-secondary)}

.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}

.card__tag{
    display:inline-block;
    padding:4px 12px;
    font-size:var(--size-xs);
    font-weight:500;
    color:var(--accent);
    background:var(--accent-light);
    border-radius:999px;
    text-decoration:none;
    transition:background .15s ease,color .15s ease
}

.card__tag:hover{background:var(--accent-muted);color:var(--accent-hover)}
.card__tag--active{background:var(--accent);color:#fff}

.card__read-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:var(--size-sm);
    font-weight:500;
    text-decoration:none;
    color:var(--accent)
}

.card__read-more::after{content:"\2192"}
.card__read-more:hover{color:var(--accent-hover)}
.card__read-more:hover::after{display:inline-block;transform:translateX(4px)}

.cards__empty{
    margin:0;
    font-size:var(--size-sm);
    color:var(--text-muted);
    text-align:center;
    padding:48px 24px;
    background:var(--bg-card);
    border-radius:var(--radius-md);
    border:1px dashed var(--border)
}

/* Tags block */
.tags-block{
    margin-top:8px;
    background:var(--bg-card);
    border-radius:var(--radius-md);
    padding:28px 30px;
    border:1px solid var(--border-light)
}

.tags-block__title{
    margin:0 0 16px;
    font-size:var(--size-xs);
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--accent)
}

.tags-block__list{display:flex;flex-wrap:wrap;gap:8px}

.tags-block__item{
    display:inline-block;
    padding:8px 16px;
    font-size:var(--size-xs);
    font-weight:500;
    color:var(--text-secondary);
    background:var(--bg);
    border:1px solid var(--border-light);
    border-radius:999px;
    text-decoration:none;
    transition:color .15s ease,background .15s ease,border-color .15s ease
}

.tags-block__item:hover{color:var(--accent);background:var(--accent-light);border-color:var(--accent-muted)}

/* Article */
.article{
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    padding:0 48px 44px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
    border:1px solid var(--border-light);
    animation:article-enter .4s ease-out both;
    overflow:hidden
}

.article__image{
    height:280px;
    margin:0 -48px 32px;
    background:linear-gradient(135deg,#e8f2ec,#d4e8dc 40%,#c2ddd2);
    display:flex;
    align-items:center;
    justify-content:center
}

.article__image-icon{width:80px;height:80px;color:var(--accent);animation:icon-float 4s ease-in-out infinite}

.article__image-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.article__header{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}

.article__title{
    margin:0 0 16px;
    font-size:var(--size-xl);
    line-height:1.3;
    color:var(--text);
    font-weight:700;
    letter-spacing:-.3px
}

.article__meta{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--size-sm);color:var(--text-muted)}
.article__meta-item{display:inline-flex;align-items:center}

.article__body{font-family:var(--font-serif);font-size:var(--size-md);line-height:1.9;color:var(--text)}
.article__body p{margin:0 0 24px}
.article__body p:last-child{margin-bottom:0}
.article__body h2{font-family:var(--font-sans);font-size:var(--size-lg);font-weight:700;margin:36px 0 16px;color:var(--text)}
.article__body h3{font-family:var(--font-sans);font-size:var(--size-md);font-weight:600;margin:28px 0 12px;color:var(--text)}
.article__body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.article__body a:hover{color:var(--accent-hover)}

.article__body blockquote{
    margin:24px 0;
    padding:20px 24px;
    border-left:3px solid var(--accent-muted);
    background:var(--accent-light);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    font-style:italic;
    color:var(--text-secondary)
}

.article__body ul,.article__body ol{margin:0 0 24px;padding-left:24px}
.article__body li{margin-bottom:8px}
.article__body img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:16px 0}

.article__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-light)}
.article__source{display:flex;justify-content:flex-end;align-items:center;gap:.4em;margin-top:24px;padding-top:20px}

.article__source-label{font-size:12px;color:#888}

.article__source-link{font-size:12px;color:#888;text-decoration:underline}

.article__source-link:hover{color:#666}

.article__tag{
    display:inline-block;
    padding:6px 16px;
    font-size:var(--size-xs);
    font-weight:500;
    color:var(--accent);
    background:var(--accent-light);
    border-radius:999px;
    text-decoration:none;
    transition:background .15s ease,color .15s ease
}

.article__tag:hover{background:var(--accent-muted);color:var(--accent-hover)}

/* Back link */
.article-back{margin-top:24px;text-align:center}

.article-back__link{
    font-size:12px;
    font-weight:500;
    text-decoration:none;
    color:#888!important;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 20px;
    border-radius:var(--radius-sm)
}

.article-back__link::before{content:"\2190"}
.article-back__link:hover{color:var(--accent);background:rgba(90,138,110,.07)}

/* Footer */
.footer{margin-top:auto;background:var(--bg-footer);border-top:1px solid rgba(255,255,255,.06)}

.footer__inner{
    max-width:1100px;
    margin:0 auto;
    padding:48px 24px;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:40px;
    font-size:var(--size-sm);
    color:rgba(255,255,255,.65)
}

.footer__col--brand{max-width:280px}

.footer__logo{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--size-sm);color:#fff;margin-bottom:12px}
.footer__logo span{color:rgba(255,255,255,.45)}

.footer__title{margin:0 0 16px;font-size:var(--size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.footer__text{margin:0 0 12px;line-height:1.75;font-size:var(--size-sm)}
.footer__text--small{font-size:var(--size-xs);line-height:1.6}
.footer__copy{margin:16px 0 0;font-size:var(--size-xs);color:rgba(255,255,255,.35);padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.footer__nav{display:flex;flex-direction:column;gap:8px}
.footer__link{color:rgba(255,255,255,.6);text-decoration:none;font-size:var(--size-sm);padding:2px 0}
.footer__link:hover{color:#fff}

/* Sidebar news */
.sidebar-news{display:flex;flex-direction:column;gap:0}

.sidebar-news__item{
    display:block;
    padding:12px 0;
    text-decoration:none;
    border-bottom:1px solid var(--border-light)
}

.sidebar-news__item:first-child{padding-top:0}
.sidebar-news__item:last-child{border-bottom:none}

.sidebar-news__title{
    margin:0 0 4px;
    font-size:var(--size-sm);
    font-weight:600;
    color:var(--text);
    line-height:1.4
}

.sidebar-news__item:hover .sidebar-news__title{color:var(--accent)}

.sidebar-news__text{
    margin:0;
    font-size:var(--size-xs);
    line-height:1.5;
    color:var(--text-muted)
}

/* Related news */
.related{
    margin-top:32px;
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
    border:1px solid var(--border-light)
}

.related__title{
    margin:0 0 20px;
    font-size:var(--size-lg);
    font-weight:700;
    color:var(--text)
}

/* Carousel */
.carousel{position:relative;padding:0 20px}

.carousel__track-wrap{overflow:hidden;border-radius:var(--radius-md)}

.carousel__track{
    display:flex;
    transition:transform .4s cubic-bezier(.4,0,.2,1)
}

.carousel__slide{
    flex:0 0 33.333%;
    padding:0 8px;
    box-sizing:border-box
}

.carousel__card{
    display:block;
    text-decoration:none;
    background:var(--bg);
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid var(--border-light);
    height:100%;
    transition:box-shadow .25s ease,border-color .25s ease
}

.carousel__card:hover{
    box-shadow:0 2px 10px rgba(0,0,0,.055);
    border-color:var(--border)
}

.carousel__card-img{
    height:120px;
    background:linear-gradient(135deg,#e8f2ec,#d4e8dc 40%,#c2ddd2);
    display:flex;
    align-items:center;
    justify-content:center
}

.carousel__card-icon{width:40px;height:40px;color:var(--accent)}

.carousel__card-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.carousel__card-body{padding:14px 16px}

.carousel__card-title{
    margin:0 0 6px;
    font-size:var(--size-sm);
    font-weight:600;
    color:var(--text);
    line-height:1.4
}

.carousel__card:hover .carousel__card-title{color:var(--accent)}

.carousel__card-text{
    margin:0;
    font-size:var(--size-xs);
    line-height:1.5;
    color:var(--text-muted)
}

.carousel__btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--bg-card);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:background .15s ease,border-color .15s ease
}

.carousel__btn svg{width:16px;height:16px;color:var(--text-secondary)}

.carousel__btn:hover{background:var(--accent-light);border-color:var(--accent-muted)}
.carousel__btn:hover svg{color:var(--accent)}

.carousel__btn--prev{left:-12px}
.carousel__btn--next{right:-12px}

.carousel__btn:disabled{opacity:.35;cursor:default;box-shadow:none}

/* Animations */
@keyframes article-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-stagger{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sidebar-enter{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes fade-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.sidebar__block{animation:sidebar-enter .4s ease-out both}
.sidebar__block:nth-child(1){animation-delay:.1s}
.sidebar__block:nth-child(2){animation-delay:.2s}
.sidebar__block:nth-child(3){animation-delay:.3s}

/* Responsive */
@media(max-width:960px){
    .main__grid{grid-template-columns:1fr;gap:32px}
    .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .sidebar__block{padding:20px}
    .footer__inner{grid-template-columns:1fr 1fr;gap:32px}
}

@media(max-width:768px){
    .header__burger{display:flex}
    .header__nav{display:none}
    .mobile-nav,.mobile-overlay{display:block}
    .sidebar__link{padding:12px 14px 12px 20px}
    .article{padding:0 28px 32px;border-radius:var(--radius-md)}
    .article__image{height:220px;margin:0 -28px 28px}
    .article__title{font-size:24px}
    .article__body h2{font-size:var(--size-md);margin:28px 0 12px}
    .article__body blockquote{padding:16px;margin:20px 0}
    .article__header{margin-bottom:20px;padding-bottom:16px}
    .article__meta{font-size:var(--size-xs)}
    .article__body{font-size:var(--size-sm);line-height:1.8}
    .carousel__slide{flex:0 0 50%}
    .related{padding:24px 20px}
    .carousel__btn--prev{left:4px}
    .carousel__btn--next{right:4px}
    .carousel{padding:0 16px}
}

@media(min-width:769px){
    .header__nav{display:flex;gap:2px;font-size:var(--size-sm);font-weight:500}
    .mobile-nav,.mobile-overlay{display:none}
}

@media(max-width:640px){
    .main__grid{padding:16px 16px 48px}
    .page-intro{padding:28px 24px;border-radius:var(--radius-md)}
    .page-intro__title{font-size:24px}
    .card{padding:0 20px 20px}
    .card__image{height:140px;margin:0 -20px 16px}
    .card__title{font-size:var(--size-md)}
    .carousel__slide{flex:0 0 100%}
    .related{padding:20px 16px;border-radius:var(--radius-md)}
    .related__title{font-size:var(--size-md)}
    .carousel__btn{display:none}
    .carousel{padding:0 12px}
    .tags-block{padding:20px;margin-top:4px}
    .tags-block__item{padding:6px 14px}
}

@media(max-width:560px){
    .sidebar{grid-template-columns:1fr}
    .footer__inner{grid-template-columns:1fr;gap:28px;padding:36px 20px}
}

@media(max-width:480px){
    .article{padding:0 16px 24px}
    .article__image{height:180px;margin:0 -16px 20px}
    .article__image-icon{width:60px;height:60px}
}

@supports(padding:env(safe-area-inset-left)){
    .header__inner{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
    .main__grid{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
    .footer__inner{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
    .mobile-nav{padding-left:max(24px,env(safe-area-inset-left))}
}

/* Homepage */
.hero{
    background:var(--bg-hero);
    border-radius:var(--radius-lg);
    padding:48px 40px;
    margin-bottom:40px;
    border:1px solid var(--border-light);
    text-align:center;
    animation:fade-down .35s ease-out both
}

.hero__title{
    margin:0 0 16px;
    font-size:32px;
    font-weight:700;
    color:var(--text);
    letter-spacing:-.5px;
    line-height:1.3
}

.hero__text{
    margin:0 0 28px;
    font-size:var(--size-sm);
    line-height:1.7;
    color:var(--text-secondary);
    max-width:600px;
    margin-left:auto;
    margin-right:auto
}

.hero__actions{display:flex;justify-content:center;gap:12px}

.hero__btn{
    display:inline-flex;
    align-items:center;
    padding:12px 28px;
    font-size:var(--size-sm);
    font-weight:600;
    border-radius:var(--radius-sm);
    text-decoration:none;
    transition:background .15s ease,color .15s ease,transform .15s ease
}

.hero__btn--primary{background:var(--accent);color:#fff}
.hero__btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}

.hero__btn--secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.hero__btn--secondary:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent-muted)}

@media(max-width:640px){
    .hero{padding:32px 24px;margin-bottom:28px}
    .hero__title{font-size:24px}
    .hero__actions{flex-direction:column;align-items:center}
}

.home-section{margin-bottom:40px}

.home-section__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}

.home-section__title{
    margin:0;
    font-size:var(--size-lg);
    font-weight:700;
    color:var(--text)
}

.home-section__link{
    font-size:var(--size-xs);
    font-weight:500;
    color:var(--accent);
    text-decoration:none;
    transition:color .15s ease
}

.home-section__link:hover{color:var(--accent-hover)}

.home-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

@media(max-width:768px){
    .home-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
    .home-grid{grid-template-columns:1fr}
}

.home-card{
    display:block;
    background:var(--bg-card);
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid var(--border-light);
    text-decoration:none;
    transition:box-shadow .25s ease,border-color .25s ease
}

.home-card:hover{
    box-shadow:0 2px 10px rgba(0,0,0,.055);
    border-color:var(--border)
}

.home-card__image{
    height:160px;
    background:linear-gradient(135deg,#e8f2ec,#d4e8dc 40%,#c2ddd2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}

.home-card__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.home-card__placeholder{width:48px;height:48px;color:var(--accent);opacity:.4}

.home-card__body{padding:16px}

.home-card__cat{
    display:inline-block;
    font-size:11px;
    font-weight:500;
    color:var(--accent);
    background:var(--accent-light);
    padding:3px 10px;
    border-radius:999px;
    margin-bottom:8px
}

.home-card__title{
    margin:0 0 8px;
    font-size:var(--size-sm);
    font-weight:600;
    color:var(--text);
    line-height:1.4
}

.home-card:hover .home-card__title{color:var(--accent)}

.home-card__text{
    margin:0 0 10px;
    font-size:var(--size-xs);
    line-height:1.5;
    color:var(--text-muted)
}

.home-card__date{
    font-size:11px;
    color:var(--text-muted)
}

/* Tag cloud */
.tag-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

.tag-cloud__item{
    display:inline-block;
    padding:8px 18px;
    font-size:var(--size-xs);
    font-weight:500;
    color:var(--text-secondary);
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:999px;
    text-decoration:none;
    transition:color .15s ease,background .15s ease,border-color .15s ease
}

.tag-cloud__item:hover{color:var(--accent);background:var(--accent-light);border-color:var(--accent-muted)}

.home-section--tags{
    background:var(--bg-card);
    border-radius:var(--radius-md);
    padding:24px;
    border:1px solid var(--border-light)
}

.home-section--tags .home-section__title{font-size:var(--size-md)}

/* Pagination */
.pagination{margin-top:24px}

.pagination__list{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0
}

.pagination__item{display:inline-flex}

.pagination__item--dots{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    font-size:var(--size-sm);
    color:var(--text-muted)
}

.pagination__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    font-size:var(--size-sm);
    font-weight:500;
    color:var(--text-secondary);
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    text-decoration:none;
    transition:background .15s ease,color .15s ease,border-color .15s ease
}

.pagination__link:hover{
    background:var(--accent-light);
    color:var(--accent);
    border-color:var(--accent-muted)
}

.pagination__link--active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    font-weight:600;
    cursor:default
}

.pagination__link--prev,
.pagination__link--next{
    padding:0 8px
}

.pagination__link--prev svg,
.pagination__link--next svg{
    display:block
}

@media(max-width:640px){
    .pagination__link{min-width:32px;height:32px;font-size:var(--size-xs);padding:0 8px}
    .pagination__item--dots{width:32px;height:32px;font-size:var(--size-xs)}
}