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

:root {
    --c-ink:        #181d26;
    --c-body:       #333840;
    --c-muted:      #41454d;
    --c-canvas:     #ffffff;
    --c-soft:       #f8fafc;
    --c-strong:     #e0e2e6;
    --c-dark:       #181d26;
    --c-coral:      #aa2d00;
    --c-forest:     #0a2e0e;
    --c-cream:      #f5e9d4;
    --c-hairline:   #dddddd;
    --c-link:       #1b61c9;
    --c-primary-active: #0d1218;

    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  12px;

    --sp-xs:  8px;
    --sp-sm:  12px;
    --sp-md:  16px;
    --sp-lg:  24px;
    --sp-xl:  32px;
    --sp-xxl: 48px;
    --sp-sec: 96px;

    --max-w: 1280px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--c-body); background: var(--c-canvas); line-height: 1.5; }

a { color: var(--c-link); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

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

.rsg-container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-xxl); }

/* ── NAV ── */
.rsg-nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--c-canvas);
    border-bottom: 1px solid var(--c-hairline);
    height: 64px;
}
.rsg-nav__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--sp-xxl);
    height: 100%;
    display: flex; align-items: center; gap: var(--sp-lg);
}
.rsg-nav__logo {
    display: flex; align-items: center; gap: var(--sp-xs);
    font-size: 17px; font-weight: 500; color: var(--c-ink);
    text-decoration: none; flex-shrink: 0;
}
.rsg-nav__logo-mark { font-size: 10px; color: var(--c-coral); }
.rsg-nav__links {
    display: flex; list-style: none; gap: var(--sp-lg);
    margin-left: auto;
}
.rsg-nav__link { font-size: 14px; color: var(--c-body); }
.rsg-nav__link--active { color: var(--c-ink); font-weight: 500; }
.rsg-nav__burger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; margin-left: auto; padding: 4px;
}
.rsg-nav__burger span { display: block; width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }

/* ── HERO ── */
.rsg-hero {
    padding-block: var(--sp-sec);
    background: var(--c-canvas);
}
.rsg-hero__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--sp-xxl);
}
.rsg-hero__eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-md); }
.rsg-hero h1 {
    font-size: 40px; font-weight: 400; line-height: 1.2;
    color: var(--c-ink); max-width: 680px; margin-bottom: var(--sp-lg);
}
.rsg-hero__sub { font-size: 18px; color: var(--c-muted); max-width: 560px; line-height: 1.5; margin-bottom: var(--sp-xxl); }
.rsg-hero__img {
    margin-top: var(--sp-xxl);
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16/7;
}
.rsg-hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* ── BUTTONS ── */
.btn-primary {
    display: inline-flex; align-items: center;
    background: var(--c-ink); color: #fff;
    font-size: 16px; font-weight: 500; line-height: 1.4;
    padding: 16px 24px; border-radius: var(--r-lg);
    border: none; cursor: pointer; text-decoration: none;
    transition: background .15s;
}
.btn-primary:active, .btn-primary:focus-visible { background: var(--c-primary-active); }
.btn-secondary {
    display: inline-flex; align-items: center;
    background: var(--c-canvas); color: var(--c-ink);
    font-size: 16px; font-weight: 500; line-height: 1.4;
    padding: 16px 24px; border-radius: var(--r-lg);
    border: 1px solid var(--c-hairline); cursor: pointer; text-decoration: none;
    transition: border-color .15s;
}
.btn-secondary:active { border-color: var(--c-body); }

/* ── SECTION BAND ── */
.rsg-band { padding-block: var(--sp-sec); }
.rsg-band--soft { background: var(--c-soft); }
.rsg-band--cream { background: var(--c-cream); }
.rsg-band--dark { background: var(--c-dark); color: #fff; border-radius: var(--r-lg); margin-inline: var(--sp-xxl); }
.rsg-band--coral { background: var(--c-coral); color: #fff; border-radius: var(--r-lg); margin-inline: var(--sp-xxl); }
.rsg-band--strong { background: var(--c-strong); }

.rsg-band__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--sp-xxl);
}
.rsg-band--dark .rsg-band__inner,
.rsg-band--coral .rsg-band__inner { padding-inline: var(--sp-xxl); }

/* ── SECTION TITLES ── */
.rsg-section-label { font-size: 13px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-sm); }
.rsg-section-title { font-size: 32px; font-weight: 400; line-height: 1.2; color: var(--c-ink); margin-bottom: var(--sp-md); }
.rsg-section-title--on-dark { color: #fff; }
.rsg-section-body { font-size: 14px; line-height: 1.6; color: var(--c-body); max-width: 640px; }
.rsg-section-body--on-dark { color: rgba(255,255,255,.75); }

/* ── ARTICLE CARDS ── */
.rsg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); margin-top: var(--sp-xl); }
.rsg-card {
    background: var(--c-canvas); border-radius: var(--r-md);
    border: 1px solid var(--c-hairline);
    overflow: hidden; display: flex; flex-direction: column;
}
.rsg-card__img { aspect-ratio: 16/9; overflow: hidden; }
.rsg-card__img img { width: 100%; height: 100%; object-fit: cover; }
.rsg-card__body { padding: var(--sp-md); flex: 1; display: flex; flex-direction: column; }
.rsg-card__tag { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--c-muted); margin-bottom: var(--sp-xs); }
.rsg-card__title { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--c-ink); margin-bottom: var(--sp-xs); }
.rsg-card__excerpt { font-size: 14px; color: var(--c-body); line-height: 1.6; flex: 1; }
.rsg-card__meta { font-size: 13px; color: var(--c-muted); margin-top: var(--sp-md); }
.rsg-card__link { text-decoration: none; color: inherit; }
.rsg-card__link:focus-visible .rsg-card { outline: 2px solid var(--c-link); }

/* ── FEATURE GRID ── */
.rsg-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: center; margin-top: var(--sp-xl); }
.rsg-feature-grid__img { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; }
.rsg-feature-grid__img img { width: 100%; height: 100%; object-fit: cover; }
.rsg-feature-grid__text h2 { font-size: 32px; font-weight: 400; line-height: 1.2; color: var(--c-ink); margin-bottom: var(--sp-md); }
.rsg-feature-grid__text p { font-size: 14px; line-height: 1.7; color: var(--c-body); margin-bottom: var(--sp-lg); }
.rsg-feature-grid--reverse { direction: rtl; }
.rsg-feature-grid--reverse > * { direction: ltr; }

/* ── STATS ── */
.rsg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); margin-top: var(--sp-xl); }
.rsg-stat { padding: var(--sp-xl); background: var(--c-canvas); border-radius: var(--r-md); border: 1px solid var(--c-hairline); text-align: center; }
.rsg-stat__num { font-size: 40px; font-weight: 400; color: var(--c-ink); }
.rsg-stat__label { font-size: 14px; color: var(--c-muted); margin-top: var(--sp-xs); }

/* ── CONTACT FORM ── */
.rsg-form { max-width: 560px; margin-top: var(--sp-xl); }
.rsg-form__row { margin-bottom: var(--sp-md); }
.rsg-form label { display: block; font-size: 14px; font-weight: 500; color: var(--c-ink); margin-bottom: var(--sp-xs); }
.rsg-form input, .rsg-form textarea {
    width: 100%; height: 44px;
    background: var(--c-canvas); color: var(--c-ink);
    font-size: 14px; font-family: var(--font);
    padding: 12px 16px; border-radius: var(--r-sm);
    border: 1px solid var(--c-hairline);
    transition: border-color .15s;
}
.rsg-form input:focus, .rsg-form textarea:focus {
    outline: none; border-color: #458fff;
}
.rsg-form textarea { height: 120px; resize: vertical; }

/* ── ARTICLE PAGE ── */
.rsg-article { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-xxl); padding-block: var(--sp-sec); display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-xl); align-items: start; }
.rsg-article__main {}
.rsg-article__hero { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/7; margin-bottom: var(--sp-xl); }
.rsg-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.rsg-article__meta { font-size: 13px; color: var(--c-muted); margin-bottom: var(--sp-lg); display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.rsg-article__tag { text-transform: uppercase; font-weight: 500; letter-spacing: .4px; }
.rsg-article h1 { font-size: 40px; font-weight: 400; line-height: 1.2; color: var(--c-ink); margin-bottom: var(--sp-lg); }
.rsg-article h2 { font-size: 24px; font-weight: 400; color: var(--c-ink); margin-top: var(--sp-xl); margin-bottom: var(--sp-md); }
.rsg-article h3 { font-size: 18px; font-weight: 500; color: var(--c-ink); margin-top: var(--sp-lg); margin-bottom: var(--sp-sm); }
.rsg-article p  { font-size: 14px; line-height: 1.8; color: var(--c-body); margin-bottom: var(--sp-md); }
.rsg-article ul, .rsg-article ol { padding-left: var(--sp-xl); margin-bottom: var(--sp-md); }
.rsg-article li { font-size: 14px; line-height: 1.8; color: var(--c-body); }
.rsg-article a { color: var(--c-link); }
.rsg-article__img-mid { border-radius: var(--r-md); overflow: hidden; margin-block: var(--sp-xl); }
.rsg-article__img-mid img { width: 100%; }
.rsg-article__caption { font-size: 13px; color: var(--c-muted); margin-top: var(--sp-xs); }
.rsg-article__sidebar { position: sticky; top: 80px; }
.rsg-sidebar-box { background: var(--c-soft); border-radius: var(--r-md); padding: var(--sp-xl); margin-bottom: var(--sp-lg); }
.rsg-sidebar-box h3 { font-size: 16px; font-weight: 500; color: var(--c-ink); margin-bottom: var(--sp-md); }
.rsg-sidebar-box ul { list-style: none; }
.rsg-sidebar-box li { margin-bottom: var(--sp-xs); }
.rsg-sidebar-box li a { font-size: 14px; color: var(--c-link); line-height: 1.5; }
.rsg-sidebar-divider { font-size: 13px; color: var(--c-muted); border-top: 1px solid var(--c-hairline); padding-top: var(--sp-md); }

/* ── BREADCRUMB ── */
.rsg-breadcrumb { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-xxl); padding-top: var(--sp-xl); }
.rsg-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-xs); font-size: 13px; color: var(--c-muted); }
.rsg-breadcrumb a { color: var(--c-muted); }
.rsg-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: var(--sp-xs); }

/* ── PAGE (ABOUT, PRIVACY, TERMS) ── */
.rsg-page { max-width: 760px; margin-inline: auto; padding-inline: var(--sp-xxl); padding-block: var(--sp-sec); }
.rsg-page h1 { font-size: 40px; font-weight: 400; line-height: 1.2; color: var(--c-ink); margin-bottom: var(--sp-xl); }
.rsg-page h2 { font-size: 24px; font-weight: 400; color: var(--c-ink); margin-top: var(--sp-xl); margin-bottom: var(--sp-md); }
.rsg-page h3 { font-size: 18px; font-weight: 500; color: var(--c-ink); margin-top: var(--sp-lg); margin-bottom: var(--sp-sm); }
.rsg-page p  { font-size: 14px; line-height: 1.8; color: var(--c-body); margin-bottom: var(--sp-md); }
.rsg-page ul { padding-left: var(--sp-xl); margin-bottom: var(--sp-md); }
.rsg-page li { font-size: 14px; line-height: 1.8; color: var(--c-body); }
.rsg-page a  { color: var(--c-link); }
.rsg-page__meta { font-size: 13px; color: var(--c-muted); margin-bottom: var(--sp-xl); }

/* ── FOOTER ── */
.rsg-footer { background: var(--c-canvas); border-top: 1px solid var(--c-hairline); padding-block: var(--sp-sec); }
.rsg-footer__inner {
    max-width: var(--max-w); margin-inline: auto;
    padding-inline: var(--sp-xxl);
    display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-xl);
}
.rsg-footer__logo { font-size: 17px; font-weight: 500; color: var(--c-ink); }
.rsg-footer__tagline { font-size: 14px; color: var(--c-muted); margin-top: var(--sp-xs); margin-bottom: var(--sp-md); }
.rsg-footer__address { font-size: 13px; color: var(--c-muted); line-height: 1.7; }
.rsg-footer__address a { color: var(--c-link); }
.rsg-footer__nav { display: contents; }
.rsg-footer__col h3 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--c-muted); margin-bottom: var(--sp-md); }
.rsg-footer__col ul { list-style: none; }
.rsg-footer__col li { margin-bottom: var(--sp-xs); }
.rsg-footer__col a { font-size: 14px; color: var(--c-muted); }
.rsg-footer__legal {
    max-width: var(--max-w); margin-inline: auto;
    padding-inline: var(--sp-xxl);
    padding-top: var(--sp-xl);
    border-top: 1px solid var(--c-hairline);
    margin-top: var(--sp-xl);
    font-size: 13px; color: var(--c-muted);
    display: flex; flex-direction: column; gap: var(--sp-xs);
}

/* ── COOKIE BANNER ── */
.rsg-cookie {
    position: fixed; bottom: var(--sp-lg); left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    background: var(--c-ink); color: #fff;
    border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-xl);
    z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,.25);
    display: none;
}
.rsg-cookie.is-visible { display: block; }
.rsg-cookie__inner { display: flex; gap: var(--sp-lg); align-items: center; flex-wrap: wrap; }
.rsg-cookie p { font-size: 14px; line-height: 1.5; flex: 1; }
.rsg-cookie a { color: #7eaaff; }
.rsg-cookie__actions { display: flex; gap: var(--sp-sm); flex-shrink: 0; }
.rsg-cookie__btn {
    padding: 12px 20px; border-radius: var(--r-sm);
    font-size: 13.12px; font-weight: 600; cursor: pointer; border: none;
}
.rsg-cookie__btn--accept { background: var(--c-link); color: #fff; }
.rsg-cookie__btn--reject { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25); }

/* ── CTA BAND ── */
.rsg-cta-band {
    background: var(--c-strong); border-radius: var(--r-lg);
    padding: var(--sp-xxl); margin-inline: var(--sp-xxl);
    text-align: center; margin-bottom: var(--sp-sec);
}
.rsg-cta-band h2 { font-size: 32px; font-weight: 400; color: var(--c-ink); margin-bottom: var(--sp-md); }
.rsg-cta-band p { font-size: 14px; color: var(--c-body); margin-bottom: var(--sp-xl); max-width: 480px; margin-inline: auto; }

/* ── ARTICLES LISTING ── */
.rsg-articles-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .rsg-cards { grid-template-columns: repeat(2, 1fr); }
    .rsg-stats { grid-template-columns: repeat(2, 1fr); }
    .rsg-feature-grid { grid-template-columns: 1fr; }
    .rsg-feature-grid--reverse { direction: ltr; }
    .rsg-article { grid-template-columns: 1fr; }
    .rsg-article__sidebar { position: static; }
    .rsg-footer__inner { grid-template-columns: 1fr 1fr; }
    .rsg-articles-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    :root { --sp-sec: 64px; }
    .rsg-container { padding-inline: var(--sp-md); }
    .rsg-nav__inner { padding-inline: var(--sp-md); }
    .rsg-nav__links { display: none; flex-direction: column; position: fixed; top: 64px; left: 0; right: 0; background: var(--c-canvas); padding: var(--sp-lg); border-bottom: 1px solid var(--c-hairline); gap: var(--sp-md); z-index: 99; }
    .rsg-nav__links.is-open { display: flex; }
    .rsg-nav__burger { display: flex; }
    .rsg-hero h1 { font-size: 28px; }
    .rsg-hero__sub { font-size: 16px; }
    .rsg-cards { grid-template-columns: 1fr; }
    .rsg-stats { grid-template-columns: 1fr; }
    .rsg-article { padding-inline: var(--sp-md); }
    .rsg-article h1 { font-size: 28px; }
    .rsg-hero__inner { padding-inline: var(--sp-md); }
    .rsg-band__inner { padding-inline: var(--sp-md); }
    .rsg-band--dark, .rsg-band--coral { margin-inline: var(--sp-md); }
    .rsg-cta-band { margin-inline: var(--sp-md); padding: var(--sp-xl) var(--sp-lg); }
    .rsg-footer__inner { grid-template-columns: 1fr; padding-inline: var(--sp-md); }
    .rsg-footer__legal { padding-inline: var(--sp-md); }
    .rsg-breadcrumb { padding-inline: var(--sp-md); }
    .rsg-page { padding-inline: var(--sp-md); }
    .rsg-articles-list { grid-template-columns: 1fr; }
}
