@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

:root {
    --primary-color: #2b140c;
    --secondary-color: #ffb757;
    --dark-blue: #2a0e07;
    --red-accent: #ef6f1c;
    --light-bg: #fff1dc;
    --card-bg: #fffaf3;
    --warning-bg: #ffe1b8;
    --max-width: 840px;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    background:
        radial-gradient(circle at top, rgba(255, 213, 150, 0.35), transparent 30%),
        linear-gradient(180deg, #fff7ee 0%, var(--light-bg) 45%, #ffd8a1 100%);
    color: #2b140c;
}

.header {
    background: linear-gradient(135deg, rgba(40, 13, 7, 0.96), rgba(108, 30, 15, 0.92) 56%, rgba(207, 109, 31, 0.86));
    border-bottom: 1px solid rgba(255, 194, 118, 0.2);
    box-shadow: 0 16px 30px rgba(70, 24, 8, 0.18);
}

.logo img {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.logo a,
.app-hero h1,
.content-section h2,
.content-section h3,
.section-title,
.internal-seo-links h2,
.notice-box h3 {
    font-family: "Fraunces", Georgia, serif;
}

.nav-links a {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 204, 142, 0.12);
}

.nav-links a.active,
.nav-links a:hover,
.footer-links a:hover {
    color: #32150c;
    background: linear-gradient(135deg, #ffd390 0%, #ff9b2c 100%);
}

.telegram-join-banner {
    background: transparent;
    padding: 1rem 0 0;
}

.telegram-join-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 249, 239, 0.98), rgba(255, 235, 202, 0.96));
    border: 1px solid rgba(255, 186, 101, 0.2);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px rgba(82, 31, 11, 0.12);
}

.telegram-join-left {
    color: #2b140c;
}

.telegram-join-icon,
.telegram-join-btn .telegram-join-icon {
    background: linear-gradient(135deg, #ffb54a 0%, #ef6f1c 100%);
}

.telegram-join-btn,
.download-cta,
.download-btn {
    background: linear-gradient(135deg, #ffb54a 0%, #ef6f1c 100%);
    color: #32150c;
    box-shadow: 0 14px 30px rgba(239, 111, 28, 0.18);
}

.telegram-join-btn:hover,
.download-cta:hover,
.download-btn:hover {
    background: linear-gradient(135deg, #ffd48f 0%, #d85a11 100%);
}

.app-banner,
.app-hero,
.content-section,
.internal-links-card,
.app-item,
.notice-box,
.subscribe {
    border-radius: 1.5rem;
    border: 1px solid rgba(164, 65, 22, 0.12);
    box-shadow: 0 22px 45px rgba(71, 23, 8, 0.12);
}

.app-hero,
.content-section,
.notice-box,
.internal-links-card,
.app-item {
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 244, 228, 0.96) 100%);
}

.app-hero img.app-icon {
    border: 6px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 36px rgba(67, 23, 8, 0.18);
}

.app-left {
    background: linear-gradient(180deg, #fff1da 0%, #ffe2ba 100%);
    border-right: 0;
    border-radius: 1rem;
}

.app-rank,
.section-title::after {
    background: linear-gradient(135deg, #ffb757 0%, #ef6f1c 100%);
}

.app-meta,
.content-section p,
.content-section li,
.internal-seo-links p,
.notice-box p,
.region-warning {
    color: #5f4334;
}

.content-section a,
.notice-box a,
.internal-seo-links a {
    color: #7d3d10;
}

.internal-seo-links a {
    background: #fff1dc;
    border: 1px solid rgba(255, 175, 85, 0.2);
}

.internal-seo-links a:hover {
    background: #ffd393;
    color: #34150c;
}

.region-warning {
    background: linear-gradient(135deg, #fff1da 0%, #ffd4a0 100%);
    border: 1px solid rgba(255, 175, 85, 0.2);
    box-shadow: 0 14px 28px rgba(118, 46, 14, 0.08);
}

.footer-notices {
    background: transparent;
}

.footer {
    background: linear-gradient(135deg, #2a0e07, #5e1d0f 55%, #a84b18);
    border-top: 1px solid rgba(255, 183, 87, 0.14);
}

.footer-links a {
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 194, 118, 0.12);
}

.footer-links-small {
    color: rgba(255, 240, 220, 0.72);
}