/* =========================================================
   CITY-BUILDER ONLINE — PHP REDESIGN
   ========================================================= */
:root {
    --yellow: #ffc928;
    --yellow-strong: #ffbd00;
    --yellow-soft: #fff3bd;

    --ink: #151b1f;
    --ink-2: #26343b;
    --ink-3: #344851;

    --text: #1d252a;
    --muted: #6d777c;

    --white: #ffffff;
    --surface: #f6f7f8;
    --line: #e2e7e9;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;

    --shadow: 0 16px 50px rgba(19, 27, 31, 0.10);
    --shadow-soft: 0 8px 24px rgba(19, 27, 31, 0.07);

    --container: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
body {
    margin: 0;
    background: var(--white);
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;

    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
body.menu-open {
    overflow: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}
.center { text-align: center; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, .logo-text strong, .eyebrow {
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    letter-spacing: 0.025em;
}
h1 {
    margin-bottom: 28px;
    font-size: clamp(3.2rem, 6.2vw, 6.8rem);
    line-height: .92;
    font-weight: 900;
    letter-spacing: -0.02em;
}
h1 span { display: block; }
h1 em { color: var(--yellow-strong); font-style: normal; }
h2 {
    margin-bottom: 0;
    font-size: clamp(2rem, 3vw, 3.4rem);
    line-height: 1;
    text-transform: uppercase;
}
.eyebrow {
    margin-bottom: 14px;
    color: var(--yellow-strong);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.dark-eyebrow { color: var(--ink); }

/* HEADER */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}
.header-main {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}


@font-face {
    font-family: "CityBuilderDisplay";
			src:
				url("../../fonts/oswald.woff2") format("woff2"),
				url("../../fonts/oswald.woff") format("woff"),
				url("../../fonts/oswald.ttf") format("truetype"),
				url("../../fonts/oswald.otf") format("opentype");
			font-weight: 900;
			font-style: 900;
		}


.logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo-placeholder { width: 48px; height: 48px; border-radius: 10px; font-size: 10px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text strong { color: var(--ink); font-size: 1.3rem; }
.logo-text span {
    margin-top: 5px;
    color: var(--yellow-strong);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .1em;
}
.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.25vw, 21px);
}
.main-nav > a:not(.button),
.auth-link {
    position: relative;
    padding-block: 30px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}
.main-nav > a:not(.button)::after,
.auth-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 19px;
    height: 3px;
    border-radius: 3px;
    background: var(--yellow);
    transform: scaleX(0);
    transition: transform 180ms ease;
}
.main-nav > a:not(.button):hover::after,
.main-nav > a.active::after,
.auth-link:hover::after,
.auth-link.active::after { transform: scaleX(1); }

.auth-nav { display: flex; align-items: center; gap: 9px; }
.auth-register { min-height: 38px !important; padding: 9px 13px !important; font-size: .76rem !important; }
.nav-shop { padding: 11px 16px !important; font-size: .76rem; }

.language-bar { border-top: 1px solid #f1f1f1; background: #fbfbfb; }
.language-list {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.language-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 2px;
    border-radius: 6px;
    line-height: 1;
    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.language-list a:hover {
    transform: translateY(-2px);
}

.language-flag-image {
    width: 30px;
    height: 20px;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(21,27,31,.12);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(19,27,31,.10);
}

.mobile-menu-button {
    display: none;
    width: 44px; height: 44px;
    padding: 9px; border: 0;
    border-radius: 10px;
    background: var(--ink);
    cursor: pointer;
}
.mobile-menu-button span { display:block; height:2px; margin:5px 0; border-radius:10px; background:white; }

/* BUTTONS */
.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 22px;
    border-radius: 9px;
    border: 0;
    font-size: .86rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .025em;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 20px rgba(255,196,0,.22); }
.button-yellow:hover { background: #ffd451; }
.button-dark { background: var(--ink); color: white; box-shadow: 0 8px 22px rgba(20,28,32,.18); }
.button-dark:hover { background: var(--ink-3); }
.button-outline { border: 1px solid var(--line); background: white; color: var(--ink); box-shadow: none; }

/* PLACEHOLDERS */
.image-placeholder {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #8a9297;
    text-align: center;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    border: 2px dashed #ccd2d5;
    background:
        linear-gradient(135deg,#f8f9fa 25%,#eef1f2 25%,#eef1f2 50%,#f8f9fa 50%,#f8f9fa 75%,#eef1f2 75%);
    background-size: 22px 22px;
}

/* HERO */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,#fff 0%,#fff 35%,#f7f8f9 100%);
}
.hero::before {
    content:"";
    position:absolute;
    left:-170px; bottom:-250px;
    width:560px; height:560px;
    border-radius:50%;
    background:rgba(255,201,40,.13);
}
.hero-grid {
    min-height: 700px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 40px;
    padding-top: 70px;
    padding-bottom: 75px;
}
.hero-copy { position:relative; z-index:2; }
.hero-lead { max-width:560px; margin-bottom:12px; font-size:1.15rem; }
.hero-description { max-width:590px; margin-bottom:30px; color:#4d575c; font-size:1.03rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }
.hero-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.mini-feature { display:flex; align-items:center; gap:10px; }
.mini-icon {
    width:57px; height:57px;
    display:grid; place-items:center;
	border:5px solid #FFFFFF;
	border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
}
.mini-feature strong,.mini-feature span { display:block; line-height:1.2; }
.mini-feature strong { font-size:.83rem; }
.mini-feature span { margin-top:2px; color:var(--muted); font-size:.78rem; }
.hero-visual { position:relative; min-height:560px; }
.hero-city-placeholder { position:absolute; inset:0; border-radius:30px; }
.magazine-floating {
    position:absolute; z-index:3;
    left:5%; bottom:-18px;
    width:clamp(190px,27%,320px);
    transform:rotate(-3deg);
    filter:drop-shadow(0 25px 28px rgba(19,27,31,.28));
}
.cover-placeholder {
    aspect-ratio:.73;
    border-radius:8px;
    border-style:solid;
    background:#dee2e4;
    color:var(--ink);
    font-size:1.15rem;
}

/* GENERIC SECTIONS */
.section { padding:90px 0; }
.section-soft { background:var(--surface); }
.section-heading {
    margin-bottom:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    text-align:center;
}
.heading-line { width:58px; height:1px; background:#cdd4d7; }
.section-heading h2 { position:relative; }
.section-heading h2::after {
    content:"";
    position:absolute;
    left:50%; bottom:-16px;
    width:38px; height:4px;
    border-radius:99px;
    background:var(--yellow);
    transform:translateX(-50%);
}
.section-heading-light { color:white; }
.section-heading-light .heading-line { background:rgba(255,255,255,.25); }
.section-intro { max-width:850px; margin:-25px auto 40px; color:var(--muted); text-align:center; }
.section-link-row { margin-top:34px; text-align:center; }

/* ABOUT HOME */
.about-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; margin-bottom:70px; }
.building-placeholder { min-height:410px; border-radius:26px; }
.about-copy p { margin-bottom:17px; color:#465159; font-size:1.03rem; }
.about-copy p:first-child { color:var(--text); font-size:1.08rem; }
.about-copy .button { margin-top:14px; }
.feature-strip {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border:1px solid var(--line);
    border-radius:20px;
    background:white;
    box-shadow:var(--shadow-soft);
}
.feature-card {display:flex; align-items:center; gap:15px; padding:14px; border-right:1px solid var(--line); }
.feature-card:last-child { border-right:0; }
.feature-icon {
    width: 64px;
    height: 64px;

    min-width: 64px;
    min-height: 64px;

    flex: 0 0 64px;

    display: grid;
    place-items: center;

    color: var(--yellow-strong);
    font-size: 1.8rem;
}
.feature-card h3 { margin-bottom:5px; font-size:.85rem; text-transform:uppercase; }
.feature-card p { margin-bottom:0; color:var(--muted); font-size:.78rem; line-height:1.35; }

/* MAGAZINES HOME */
.magazines-section { padding-top:30px; }
.magazines-panel {
    padding:55px 40px 50px;
    border-radius:var(--radius-md);
    background:radial-gradient(circle at top left,#253840 0,transparent 45%),linear-gradient(135deg,#0f191e,#1d2c33);
    box-shadow:var(--shadow);
}
.magazine-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; margin-bottom:36px; }
.magazine-card { color:white; }
.magazine-cover {
    width:100%;
    aspect-ratio:.72;
    margin-bottom:14px;
    border:1px solid rgba(255,201,40,.7);
    border-radius:9px;
    background:#dadddf;
    color:var(--ink);
    font-size:2rem;
}
.magazine-card h3 { margin-bottom:3px; font-size:.92rem; }
.magazine-card p { margin-bottom:0; color:#b8c0c4; font-size:.78rem; }

/* SOCIAL HOME */
.social-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:14px; }
.social-card {
    min-height:156px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:18px 12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:white;
    box-shadow:0 5px 18px rgba(19,27,31,.045);
    text-align:center;
    transition:transform 160ms ease, box-shadow 160ms ease;
}
.social-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(19,27,31,.10); }
.social-icon,.social-directory-icon {
    display:grid; place-items:center;
    border-radius:50%;
    color:white;
    background:var(--ink);
    font-weight:900;
}
.social-icon { width:48px; height:48px; margin-bottom:13px; }
.social-card strong { font-size:.8rem; line-height:1.2; }
.social-card span { margin-top:5px; color:var(--muted); font-size:.74rem; }
.instagram { background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.facebook { background:#2f6fe6; }
.x { background:#000; }
.youtube { background:#ff2a1a; }
.threads { background:#111; }
.discord { background:#5865f2; }
.telegram { background:#2aa8e0; }

/* COMMUNITY */
.community-section { padding-top:0; }
.community-card {
    min-height:290px;
    overflow:hidden;
    display:grid;
    grid-template-columns:.9fr 1.3fr auto;
    align-items:center;
    gap:30px;
    padding:44px 46px;
    border-radius:20px;
    background:#ffd03e;
    box-shadow:0 16px 40px rgba(255,190,0,.18);
}
.community-copy .eyebrow { color:var(--ink); opacity:.66; }
.community-copy h2 { margin-bottom:16px; }
.community-copy p { max-width:450px; }
.community-placeholder { min-height:220px; border-color:rgba(20,28,32,.18); background:rgba(255,255,255,.28); color:rgba(20,28,32,.6); }
.qr-box { width:150px; padding:14px; border-radius:13px; background:white; box-shadow:var(--shadow-soft); text-align:center; }
.qr-box strong { display:block; margin-bottom:10px; color:var(--ink); font-size:.72rem; line-height:1.25; }
.qr-placeholder { aspect-ratio:1; border-radius:7px; }

/* PAGE HEROES */
.page-hero { overflow:hidden; }
.page-hero-grid {
    min-height:520px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:60px;
    padding-top:70px;
    padding-bottom:70px;
}
.page-hero p:not(.eyebrow) { max-width:680px; font-size:1.08rem; }
.page-hero-dark {
    color:white;
    background:radial-gradient(circle at 75% 25%,#304750 0,transparent 38%),linear-gradient(135deg,#111b20,#20323a);
}
.page-hero-yellow { background:linear-gradient(135deg,#ffd751,#ffbf10); color:var(--ink); }
.page-hero-white { background:linear-gradient(90deg,#fff,#f3f5f6); }
.page-art-placeholder { min-height:360px; border-radius:26px; }
.light-placeholder { background:rgba(255,255,255,.28); border-color:rgba(15,24,28,.18); color:rgba(15,24,28,.65); }

/* CATALOG */
.filter-bar {
    margin-bottom:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.filter-bar > div:first-child { display:flex; flex-direction:column; }
.filter-bar span { color:var(--muted); font-size:.85rem; }
.filter-controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.filter-chip {
    padding:9px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:white;
    color:var(--muted);
    font-weight:800;
    cursor:pointer;
}
.filter-chip.active,.filter-chip:hover { border-color:var(--yellow); background:var(--yellow-soft); color:var(--ink); }

.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.catalog-card {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:22px;
    background:white;
    box-shadow:var(--shadow-soft);
}
.catalog-image-wrap { position:relative; padding:22px; background:#eef1f2; }
.catalog-cover { aspect-ratio:.74; border-radius:12px; font-size:1.3rem; }
.catalog-badge {
    position:absolute; z-index:2; top:14px; right:14px;
    padding:6px 10px;
    border-radius:999px;
    background:var(--yellow);
    color:var(--ink);
    font-size:.72rem;
    font-weight:900;
    text-transform:uppercase;
}
.catalog-content { padding:24px; }
.catalog-number { margin-bottom:8px; color:var(--yellow-strong); font-size:.78rem; font-weight:900; letter-spacing:.09em; }
.catalog-content h2 { margin-bottom:12px; font-size:1.7rem; }
.catalog-content > p:last-of-type { color:var(--muted); }
.catalog-actions { display:flex; gap:10px; margin-top:22px; }
.catalog-actions .button { flex:1; }
.coming-soon-box,.faq-highlight,.split-banner {
    margin-top:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:38px;
    border-radius:20px;
}
.coming-soon-box { background:var(--yellow); }
.coming-soon-box h2,.faq-highlight h2,.split-banner h2 { margin-bottom:12px; }

/* ABOUT PAGE */
.story-grid,.detail-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
}
.story-copy h2,.detail-copy h2 { margin-bottom:24px; }
.story-copy p,.detail-copy p { color:#4d585d; }
.story-placeholder,.detail-placeholder { min-height:430px; border-radius:26px; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card {
    min-height:260px;
    padding:30px;
    border:1px solid var(--line);
    border-radius:18px;
    background:white;
}
.value-number { margin-bottom:35px; color:var(--yellow-strong); font-family: "CityBuilderDisplay",  Impact,sans-serif; font-size:2.4rem; }
.value-card h3 { margin-bottom:10px; font-size:1.05rem; text-transform:uppercase; }
.value-card p { color:var(--muted); font-size:.92rem; }
.split-banner { background:linear-gradient(135deg,#f5f6f6,#fff); border:1px solid var(--line); }
.split-banner-actions,.faq-highlight-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* WHAT PAGE */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step-card {
    position:relative;
    min-height:300px;
    padding:32px;
    border-radius:18px;
    background:white;
    border:1px solid var(--line);
}
.step-number { position:absolute; top:22px; right:22px; color:#dce1e3; font-family: "CityBuilderDisplay",  Impact,sans-serif; font-size:2.8rem; }
.step-icon {
    width:60px; height:60px;
    display:grid; place-items:center;
    margin-bottom:42px;
    border-radius:14px;
    background:var(--yellow);
    font-size:1.6rem;
}
.step-card h3 { margin-bottom:10px; text-transform:uppercase; }
.step-card p { color:var(--muted); }
.check-list { margin:24px 0 0; padding:0; list-style:none; }
.check-list li { position:relative; padding:10px 0 10px 30px; border-bottom:1px solid var(--line); }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--yellow-strong); font-weight:900; }
.faq-highlight { background:var(--ink); color:white; }

/* SOCIAL DIRECTORY */
.social-orbit {
    position:relative;
    width:min(100%,440px);
    aspect-ratio:1;
    justify-self:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
}
.social-orbit::before,.social-orbit::after {
    content:""; position:absolute; border:1px solid rgba(255,255,255,.11); border-radius:50%;
}
.social-orbit::before { inset:13%; }
.social-orbit::after { inset:30%; }
.orbit-center {
    position:absolute; inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    width:120px; height:120px;
    display:grid; place-items:center;
    border-radius:24px;
    background:var(--yellow);
    color:var(--ink);
    text-align:center;
    font-family: "CityBuilderDisplay",  Impact,sans-serif;
    font-size:1.6rem;
    line-height:.9;
}
.orbit-bubble {
    position:absolute;
    width:54px; height:54px;
    display:grid; place-items:center;
    border-radius:50%;
    background:white;
    color:var(--ink);
    font-weight:900;
    box-shadow:var(--shadow);
}
.b1{left:11%;top:17%;}.b2{right:8%;top:25%;}.b3{left:5%;bottom:20%;}.b4{right:16%;bottom:10%;}.b5{left:44%;top:3%;}
.social-directory { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.social-directory-card {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:20px;
    padding:26px;
    border:1px solid var(--line);
    border-radius:18px;
    background:white;
    transition:transform 160ms ease,box-shadow 160ms ease;
}
.social-directory-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.social-directory-icon { width:58px; height:58px; }
.social-platform { color:var(--muted); font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.social-directory-content h2 { margin:4px 0 8px; font-size:1.55rem; }
.social-directory-content p { margin:0; color:var(--muted); }
.social-arrow { font-size:1.8rem; }

/* AUTH */
.auth-page {
    padding:70px 0;
    background:
        radial-gradient(circle at 10% 10%,rgba(255,201,40,.15),transparent 22%),
        linear-gradient(135deg,#f5f7f8,#fff);
}
.auth-layout {
    min-height:720px;
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border-radius:28px;
    background:white;
    box-shadow:var(--shadow);
}
.auth-panel { padding:58px; }
.auth-info-panel {
    position:relative;
    overflow:hidden;
    color:white;
    background:radial-gradient(circle at 20% 20%,#334a54,transparent 35%),linear-gradient(145deg,#0f191e,#253b44);
}
.register-info {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.55) 48%,
            transparent 68%
        ),
        linear-gradient(145deg, #ffd64b, #ffbd00);

    color: var(--ink);
}
.auth-info-panel h1 { font-size:clamp(3.4rem,5.2vw,5.7rem); }
.auth-info-panel p:not(.eyebrow) { max-width:520px; color:#d4dde1; }
.register-info p:not(.eyebrow) { color:#263238; }
.auth-visual { margin:30px 0; }
.auth-art-placeholder {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 0;
    background: none;
}

.auth-art-placeholder img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.auth-points { display:grid; gap:10px; }
.auth-points div { display:flex; gap:12px; align-items:center; }
.auth-points strong { color:var(--yellow); }
.register-info .auth-points strong { color:var(--ink); }
.auth-form-panel { display:flex; align-items:center; }
.auth-form-wrap { width:min(100%,500px); margin:auto; }
.auth-form-wrap h2 { margin-bottom:10px; font-size:3rem; }
.auth-subtitle { margin-bottom:28px; color:var(--muted); }
.auth-form { display:grid; gap:14px; }
.auth-form label { font-size:.82rem; font-weight:800; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width:100%;
    height:52px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fbfcfc;
    outline:0;
}
.auth-form input:focus { border-color:var(--yellow-strong); box-shadow:0 0 0 3px rgba(255,201,40,.16); }
.label-row { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.label-row a,.auth-switch a,.checkbox-row a { color:#a66f00; font-weight:800; }
.password-field { position:relative; }
.password-field input { padding-right:72px !important; }
.password-toggle {
    position:absolute;
    right:8px; top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:.78rem;
    font-weight:800;
    cursor:pointer;
}
.checkbox-row { display:flex; align-items:flex-start; gap:10px; margin-top:3px; color:var(--muted); }
.checkbox-row input { margin-top:4px; }
.auth-submit { width:100%; }
.auth-divider { position:relative; text-align:center; color:#a0a7ab; }
.auth-divider::before {
    content:""; position:absolute; left:0; right:0; top:50%;
    border-top:1px solid var(--line);
}
.auth-divider span { position:relative; padding:0 12px; background:white; }
.auth-note { margin:22px 0 0; color:#9aa2a6; font-size:.75rem; text-align:center; }
.auth-switch { margin:5px 0 0; color:var(--muted); text-align:center; font-size:.85rem; }
.form-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-two-columns > div { display:grid; gap:8px; }

/* TRUST + FOOTER */
.trust-strip { background:var(--ink-2); color:white; }
.trust-grid { min-height:130px; display:grid; grid-template-columns:repeat(4,1fr); }
.trust-grid article { display:flex; align-items:center; gap:16px; padding:26px; border-right:1px solid rgba(255,255,255,.09); }
.trust-grid article:last-child { border-right:0; }
.trust-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--yellow); font-size:1.8rem; }
.trust-grid h3 { margin-bottom:4px; font-size:.85rem; text-transform:uppercase; }
.trust-grid p { margin:0; color:#c3cdd1; font-size:.78rem; line-height:1.35; }

.site-footer { background:white; }
.footer-grid {
    display:grid;
    grid-template-columns:1.35fr .7fr .7fr .8fr 1.25fr;
    gap:50px;
    padding-top:64px;
    padding-bottom:48px;
}
.footer-logo { margin-bottom:20px; }
.footer-brand p { max-width:320px; color:var(--muted); font-size:.92rem; }
.footer-column h3 { margin-bottom:17px; font-size:.85rem; text-transform:uppercase; }
.footer-column a { display:block; margin-bottom:9px; color:var(--muted); font-size:.86rem; }
.footer-column a:hover { color:var(--ink); }
.newsletter p { color:var(--muted); font-size:.86rem; }
.newsletter-form { display:flex; }
.newsletter-form input {
    min-width:0; flex:1; height:46px; padding:0 14px;
    border:1px solid var(--line); border-radius:8px 0 0 8px; outline:0;
}
.newsletter-form button {
    padding:0 18px;
    border:0;
    border-radius:0 8px 8px 0;
    background:var(--yellow);
    color:var(--ink);
    font-size:.76rem;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
}
.footer-bottom {
    min-height:70px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    border-top:1px solid var(--line);
    color:#899196; font-size:.78rem;
}
.footer-bottom p { margin:0; }
.footer-bottom div { display:flex; gap:24px; }

/* RESPONSIVE */
@media (max-width: 1300px) {
    .main-nav { gap:10px; }
    .main-nav > a:not(.button),.auth-link { font-size:.73rem; }
    .auth-register,.nav-shop { padding-left:10px !important; padding-right:10px !important; }
    .hero-features { grid-template-columns:repeat(2,1fr); }
    .feature-strip { grid-template-columns:repeat(3,1fr); }
    .feature-card { border-bottom:1px solid var(--line); }
    .feature-card:nth-child(3) { border-right:0; }
    .feature-card:nth-child(4),.feature-card:nth-child(5) { border-bottom:0; }
    .magazine-grid { grid-template-columns:repeat(3,1fr); }
    .social-grid { grid-template-columns:repeat(4,1fr); }
    .footer-grid { grid-template-columns:1.2fr repeat(3,.7fr); }
    .newsletter { grid-column:1/-1; }
}

@media (max-width: 1050px) {
    .container { width:min(calc(100% - 32px),var(--container)); }
    .header-main { min-height:70px; }
    .mobile-menu-button { display:block; }

.main-nav {
        position: fixed;
        z-index: 1200;

        top: 70px;
        right: 0;
        bottom: 0;

        width: min(88vw, 410px);
        max-width: 100vw;
        height: calc(100dvh - 70px);

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 24px;

        overflow-x: hidden;
        overflow-y: auto;

        background: var(--ink);

        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;

        contain: layout paint;

        transition:
            transform 220ms ease,
            visibility 0s linear 220ms;
    }

    .menu-open .main-nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;

        transition:
            transform 220ms ease,
            visibility 0s linear 0s;
    }
    .main-nav > a:not(.button),.auth-link {
        padding:15px 4px;
        color:white;
        font-size:1rem;
        border-bottom:1px solid rgba(255,255,255,.08);
    }
    .main-nav > a:not(.button)::after,.auth-link::after { display:none; }
    .auth-nav { flex-direction:column; align-items:stretch; gap:8px; padding:16px 0; }
    .auth-register { width:100%; }
    .nav-shop { margin-top:8px; }

    .hero-grid,.page-hero-grid { grid-template-columns:1fr; }
    .hero-grid { min-height:0; padding-top:55px; }
    .page-hero-grid { min-height:0; padding-top:55px; }
    .hero-visual { min-height:500px; }

    .about-grid,.story-grid,.detail-grid { grid-template-columns:1fr; gap:42px; }
    .about-image { order:2; }.about-copy { order:1; }

    .feature-strip { grid-template-columns:repeat(2,1fr); }
    .feature-card:nth-child(odd) { border-right:1px solid var(--line); }
    .feature-card:nth-child(even) { border-right:0; }
    .feature-card:nth-child(4) { border-bottom:1px solid var(--line); }

    .social-grid { grid-template-columns:repeat(3,1fr); }
    .community-card { grid-template-columns:1fr 1fr; }
    .qr-box { grid-column:1/-1; justify-self:center; }

    .catalog-grid { grid-template-columns:repeat(2,1fr); }
    .values-grid,.steps-grid { grid-template-columns:repeat(2,1fr); }
    .social-directory { grid-template-columns:1fr; }

    .auth-layout { grid-template-columns:1fr; }
    .auth-info-panel { min-height:650px; }
    .auth-form-panel { min-height:650px; }

    .trust-grid { grid-template-columns:repeat(2,1fr); }
    .trust-grid article:nth-child(2) { border-right:0; }
    .trust-grid article:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.09); }

    .footer-grid { grid-template-columns:repeat(2,1fr); }
    .footer-brand,.newsletter { grid-column:1/-1; }
}

@media (max-width: 680px) {
    body { font-size:15px; }
    .container { width:min(calc(100% - 24px),var(--container)); }
    .logo-placeholder { width:40px; height:40px; }
    .logo-text strong { font-size:1rem; }
    .logo-text span { font-size:.66rem; }
    .language-list { justify-content:flex-start; overflow-x:auto; padding-block:4px; }

    h1 { font-size:clamp(3rem,17vw,4.6rem); }
    .hero-actions { flex-direction:column; }
    .hero-actions .button { width:100%; }
    .hero-features { grid-template-columns:repeat(2,1fr); gap:16px 10px; }
    .hero-visual { min-height:340px; }
    .magazine-floating { width:125px; left:12px; bottom:-12px; }

    .section { padding:0px 0 40px 0; }
    .section-heading { gap:12px; margin-bottom:40px; padding-top:35px;}
    .heading-line { width:24px; }

    .page-art-placeholder { min-height:280px; }

    .feature-strip { grid-template-columns:1fr; }
    .feature-card,.feature-card:nth-child(odd),.feature-card:nth-child(even) {
        border-right:0;
        border-bottom:1px solid var(--line);
    }
    .feature-card:last-child { border-bottom:0; }

    .magazines-panel { width:calc(100% - 18px); padding:42px 17px 34px; }
    .magazine-grid { grid-template-columns:repeat(2,1fr); }

    .social-grid { grid-template-columns:repeat(2,1fr); }
    .community-card { grid-template-columns:1fr; padding:34px 24px; }
    .community-copy,.community-image,.qr-box { grid-column:1; }
    .community-placeholder { min-height:180px; }

    .filter-bar { align-items:flex-start; flex-direction:column; }
    .filter-controls { justify-content:flex-start; }
    .catalog-grid { grid-template-columns:1fr; }
    .catalog-actions { flex-direction:column; }

    .values-grid,.steps-grid { grid-template-columns:1fr; }
    .coming-soon-box,.faq-highlight,.split-banner { align-items:flex-start; flex-direction:column; padding:28px; }
    .split-banner-actions,.faq-highlight-actions { width:100%; flex-direction:column; }
    .split-banner-actions .button,.faq-highlight-actions .button { width:100%; }

    .social-orbit { width:300px; max-width:100%; }
    .orbit-center { width:90px; height:90px; font-size:1.2rem; }
    .orbit-bubble { width:44px; height:44px; }

    .auth-page { padding:30px 0; }
    .auth-layout { border-radius:20px; }
    .auth-panel { padding:34px 24px; }
    .auth-info-panel { min-height:560px; }
    .auth-form-panel { min-height:0; }
    .form-two-columns { grid-template-columns:1fr; }

    .trust-grid { grid-template-columns:1fr; }
    .trust-grid article { border-right:0; border-bottom:1px solid rgba(255,255,255,.09); }
    .trust-grid article:last-child { border-bottom:0; }

    .footer-grid { grid-template-columns:1fr 1fr; gap:36px 24px; padding-top:48px; }
    .footer-brand,.newsletter { grid-column:1/-1; }
    .newsletter-form { flex-direction:column; gap:8px; }
    .newsletter-form input,.newsletter-form button { width:100%; border-radius:8px; height:46px; }
    .footer-bottom { padding:22px 0; flex-direction:column; align-items:flex-start; }
}

@media (max-width: 420px) {
    .social-grid,.footer-grid { grid-template-columns:1fr; }
    .footer-brand,.newsletter { grid-column:auto; }
}


/* =========================================================
   DESKTOP PROJECT DROPDOWN
   ========================================================= */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-dropdown-toggle {
    position: relative;
    min-height: 82px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 19px;
    height: 3px;
    border-radius: 3px;
    background: var(--yellow);
    transform: scaleX(0);
    transition: transform 180ms ease;
}

.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after,
.nav-dropdown.active .nav-dropdown-toggle::after {
    transform: scaleX(1);
}

.dropdown-chevron {
    display: inline-block;
    width: 16px;
    height: 16px;

    background-image: url('../../images/toogle_right.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    flex: 0 0 auto;
}

/* Раскрытое меню */
.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown:focus-within .dropdown-chevron,
.nav-dropdown.open .dropdown-chevron {
    background-image: url('../../images/toogle_down.png');
}



.nav-dropdown-menu {
    position: absolute;
    z-index: 1300;
    top: calc(100% - 10px);
    left: 50%;
    width: 560px;
    display: grid;
    grid-template-columns: 190px 1fr;

    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: 0 22px 60px rgba(19, 27, 31, .18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-38%, 8px);
    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-38%, 0);
}

.dropdown-intro {
    padding: 26px 22px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 201, 40, .17), transparent 34%),
        linear-gradient(145deg, #142026, #263940);
    color: white;
}

.dropdown-intro > span {
    display: block;
    margin-bottom: 10px;
    color: var(--yellow);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.dropdown-intro strong {
    display: block;
    margin-bottom: 8px;
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: .025em;
}

.dropdown-intro p {
    margin: 0;
    color: #c1ccd0;
    font-size: .78rem;
    line-height: 1.45;
}

.dropdown-links {
    padding: 10px;
}

.dropdown-links > a {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 11px;
    transition: background 140ms ease, transform 140ms ease;
}

.dropdown-links > a:hover,
.dropdown-links > a.active {
    background: #f5f7f8;
    transform: translateX(2px);
}

.dropdown-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--yellow-soft);
    color: #9a6b00;
    font-weight: 900;
}

.dropdown-links strong,
.dropdown-links small {
    display: block;
}

.dropdown-links strong {
    color: var(--ink);
    font-size: .84rem;
}

.dropdown-links small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .7rem;
}


/* =========================================================
   MAGAZINE DETAIL PAGE
   ========================================================= */

.magazine-detail-hero {
    position: relative;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 20% 35%, rgba(255, 201, 40, .12), transparent 28%),
        radial-gradient(circle at 85% 20%, #304851 0, transparent 36%),
        linear-gradient(135deg, #101a1f, #20333b);
}

.magazine-detail-hero-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.magazine-detail-hero-background img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    opacity: .12;

    filter:
        saturate(.8)
        contrast(.9);
}

.magazine-detail-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 650px;
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    align-items: center;
    gap: 80px;
    padding-top: 72px;
    padding-bottom: 72px;
}

.magazine-cover-stage {
    position: relative;
    width: min(100%, 380px);
    justify-self: center;
}

.magazine-detail-cover {
    width: 100%;
    aspect-ratio: .73;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: #d8dddf;
    color: var(--ink);
    font-size: 1.4rem;
    box-shadow:
        0 28px 60px rgba(0,0,0,.32),
        0 0 0 9px rgba(255,255,255,.025);
    transform: rotate(-2deg);
}

.magazine-number-badge {
    position: absolute;
    right: -18px;
    top: 28px;
    min-width: 82px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--yellow);
    color: var(--ink);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 1.65rem;
    text-align: center;
    box-shadow: 0 14px 25px rgba(0,0,0,.22);
}

.magazine-detail-copy h1 {
    max-width: 950px;
    margin-bottom: 18px;
    font-size: clamp(3.4rem, 6vw, 6.3rem);
}

.magazine-detail-subtitle {
    margin-bottom: 14px;
    color: var(--yellow);
    font-size: 1.2rem;
    font-weight: 800;
}

.magazine-detail-description {
    max-width: 780px;
    margin-bottom: 34px;
    color: #c8d2d6;
    font-size: 1.03rem;
}

.magazine-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.magazine-stat {
    min-height: 94px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
}

.magazine-stat span,
.magazine-stat strong {
    display: block;
}

.magazine-stat span {
    margin-bottom: 7px;
    color: #96a8b0;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.magazine-stat strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.magazine-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button-outline-dark {
    border: 1px solid rgba(255,255,255,.2);
    background: transparent;
    color: white;
}

.button-outline-dark:hover {
    background: rgba(255,255,255,.08);
}

.building-catalog-section {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(180deg, #fff, #f7f8f8) border-box;
}

.building-catalog-heading {
    margin-bottom: 34px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}

.building-catalog-heading h2 {
    margin-bottom: 12px;
}

.building-catalog-heading p:last-child {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--muted);
}

.building-catalog-counter {
    min-width: 120px;
    padding: 20px;
    border-radius: 16px;
    background: var(--ink);
    color: white;
    text-align: center;
}

.building-catalog-counter strong,
.building-catalog-counter span {
    display: block;
}

.building-catalog-counter strong {
    color: var(--yellow);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 2.6rem;
    line-height: 1;
}

.building-catalog-counter span {
    margin-top: 4px;
    color: #b9c4c8;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.building-toolbar {
    position: sticky;
    top: 121px;
    z-index: 20;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 22px rgba(19,27,31,.055);
    backdrop-filter: blur(12px);
}

.building-search {
    min-width: 280px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8f9fa;
}

.building-search span {
    color: #9aa4a8;
    font-size: 1.2rem;
}

.building-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}

.building-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.building-filter {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

.building-filter:hover,
.building-filter.active {
    border-color: var(--yellow);
    background: var(--yellow-soft);
    color: var(--ink);
}

.building-list {
    display: grid;
    gap: 18px;
}

.building-row {
    display: grid;
    grid-template-columns: 250px 1fr;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: white;
    box-shadow: 0 7px 26px rgba(19,27,31,.05);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.building-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(19,27,31,.09);
}

.building-row[hidden] {
    display: none;
}

.building-thumb-wrap {
    position: relative;
    padding: 18px;
    background: #f1f3f4;
}

.building-thumb {
    width: 100%;
    height: 100%;
    min-height: 210px;
    border-radius: 14px;
}

.building-index {
    position: absolute;
    z-index: 2;
    left: 27px;
    top: 27px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--yellow);
    color: var(--ink);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 1rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.building-main {
    padding: 28px 30px;
}

.building-title-line {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 15px;
}

.building-category {
    display: block;
    margin-bottom: 6px;
    color: #a37000;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.building-title-line h3 {
    margin: 0;
    color: var(--ink);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: .02em;
}

.building-sku {
    align-self: start;
    padding: 8px 10px;
    border: 1px solid #dfe4e6;
    border-radius: 8px;
    background: #f7f8f8;
    color: #59646a;
    font-size: .75rem;
    white-space: nowrap;
}

.building-description {
    max-width: 900px;
    margin-bottom: 24px;
    color: var(--muted);
}

.building-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.building-meta-item {
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fbfcfc;
}

.building-meta-item > span {
    display: block;
    margin-bottom: 4px;
    color: #929ca1;
    font-size: .67rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.building-meta-item > strong {
    color: var(--ink);
    font-size: 1rem;
}

.difficulty-line {
    display: flex;
    align-items: center;
    gap: 14px;
}

.difficulty-dots {
    display: flex;
    gap: 5px;
}

.difficulty-dots i {
    width: 9px;
    height: 9px;
    display: block;
    border-radius: 50%;
    background: #dbe0e2;
}

.difficulty-dots i.filled {
    background: var(--yellow-strong);
}

.building-empty-message {
    padding: 70px 20px;
    border: 1px dashed #ccd4d7;
    border-radius: 18px;
    background: #fafbfb;
    text-align: center;
}

.building-empty-message strong,
.building-empty-message span {
    display: block;
}

.building-empty-message strong {
    margin-bottom: 6px;
    font-size: 1.2rem;
}

.building-empty-message span {
    color: var(--muted);
}

.magazine-bottom-cta {
    padding-top: 0;
}

.magazine-purchase-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 38px 42px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.26), transparent 30%),
        linear-gradient(135deg, #ffd652, #ffc21d);
}

.magazine-purchase-panel h2 {
    margin-bottom: 11px;
}

.magazine-purchase-panel p:last-child {
    margin-bottom: 0;
}

.empty-state {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


/* Dropdown + detail responsive */
@media (max-width: 1300px) {
    .nav-dropdown-toggle {
        font-size: .73rem;
    }

    .magazine-detail-hero-grid {
        gap: 48px;
    }

    .magazine-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1050px) {
    .nav-dropdown {
        display: block;
    }

    .nav-dropdown-toggle {
        width: 100%;
        min-height: auto;
        justify-content: space-between;
        padding: 15px 4px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: white;
        font-size: 1rem;
        text-align: left;
    }

    .nav-dropdown-toggle::after {
        display: none;
    }

    .nav-dropdown-menu {
        position: static;
        width: 100%;
        display: none;
        grid-template-columns: 1fr;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .nav-catalog-menu {
        min-width: 0 !important;
        max-width: 100%;
    }

    .nav-dropdown,
    .nav-dropdown-menu,
    .dropdown-links,
    .dropdown-links > a,
    .dropdown-links > a > span:last-child {
        min-width: 0;
        max-width: 100%;
    }

    .dropdown-links strong,
    .dropdown-links small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
        transform: none;
    }

    .dropdown-intro {
        display: none;
    }

    .dropdown-links {
        padding: 8px 0 14px 10px;
    }

    .dropdown-links > a {
        grid-template-columns: 32px 1fr;
        padding: 10px;
    }

    .dropdown-links > a:hover,
    .dropdown-links > a.active {
        background: rgba(255,255,255,.06);
        transform: none;
    }

    .dropdown-icon {
        width: 32px;
        height: 32px;
        background: rgba(255,201,40,.13);
        color: var(--yellow);
    }

    .dropdown-links strong {
        color: white;
    }

    .dropdown-links small {
        color: #94a2a8;
    }

    .magazine-detail-hero-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .magazine-cover-stage {
        width: min(70%, 360px);
    }

    .building-toolbar {
        top: 109px;
        align-items: stretch;
        flex-direction: column;
    }

    .building-search {
        min-width: 0;
    }

    .building-row {
        grid-template-columns: 210px 1fr;
    }

    .building-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .magazine-detail-hero-grid {
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 54px;
    }

    .magazine-cover-stage {
        width: min(78%, 310px);
    }

    .magazine-number-badge {
        right: -10px;
    }

    .magazine-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .magazine-detail-actions {
        flex-direction: column;
    }

    .magazine-detail-actions .button {
        width: 100%;
    }

    .building-catalog-heading {
		margin-top:20px;
        align-items: flex-start;
        flex-direction: column;
    }

    .building-catalog-counter {
        min-width: 105px;
    }

    .building-toolbar {
        position: static;
    }

    .building-filter-group {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }

    .building-filter {
        flex: 0 0 auto;
    }

    .building-row {
        grid-template-columns: 1fr;
    }

    .building-thumb {
        min-height: 240px;
    }

    .building-main {
        padding: 23px 20px;
    }

    .building-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .building-title-line h3 {
        font-size: 1.75rem;
    }

    .building-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .difficulty-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .magazine-purchase-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 24px;
    }

    .magazine-purchase-panel .button {
        width: 100%;
    }
}


/* =========================================================
   DATABASE CATALOG / REAL IMAGE SUPPORT
   ========================================================= */

.language-list a.active {
    transform: translateY(-2px);
    background: var(--yellow-soft);
    box-shadow: 0 0 0 2px var(--yellow);
}

.language-list a.active .language-flag-image {
    border-color: rgba(21,27,31,.22);
}

.database-error-box {
    margin: 20px 0 40px;
    padding: 24px;
    border: 1px solid #e6b3b3;
    border-radius: 14px;
    background: #fff5f5;
    color: #7b2424;
}

.database-error-box strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.database-error-box p {
    margin-bottom: 7px;
}

.catalog-cover-image {
    width: 100%;
    aspect-ratio: .74;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(19,27,31,.12);
}

.catalog-model-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 5px;
    color: var(--muted);
}

.catalog-model-count strong {
    color: var(--ink);
    font-size: 1.1rem;
}

.catalog-model-count span {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.magazine-detail-cover-image {
    width: 100%;
    aspect-ratio: .73;
    border-radius: 14px;
    box-shadow:
        0 28px 60px rgba(0,0,0,.32),
        0 0 0 9px rgba(255,255,255,.025);
    transform: rotate(-2deg);
}

.building-thumb-image {
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
    border-radius: 14px;
}

.empty-state-card {
    margin-top: 28px;
    padding: 46px 24px;
    border: 1px dashed #ccd4d7;
    border-radius: 18px;
    background: #fafbfb;
    text-align: center;
}

.empty-state-card strong {
    display: block;
    margin-bottom: 7px;
    font-size: 1.15rem;
}

.empty-state-card p {
    margin: 0;
    color: var(--muted);
}


/* =========================================================
   BUILDING PHOTO GALLERY + FULLSCREEN LIGHTBOX
   ========================================================= */
   
@media (min-width: 1051px) {
    .building-row {
        grid-template-columns: 400px 1fr;
    }

    .building-thumb-wrap {
        width: 400px;
    }
}
   
.building-photo-button {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;

    display: block;
    padding: 0;
    overflow: hidden;

    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: zoom-in;
}

.building-thumb-image {
    width: 100%;
    height: 100%;
    min-height: 0;

    object-fit: cover;
    border-radius: 14px;
}


.building-photo-button .building-thumb-image {
    transition: transform 180ms ease;
}

.building-photo-button:hover .building-thumb-image {
    transform: scale(1.025);
}

.building-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: -7px 0 23px;
}

.building-gallery-thumb {
    height: 68px;
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #eef1f2;
    cursor: zoom-in;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

.building-gallery-thumb:hover {
    transform: translateY(-2px);
    border-color: var(--yellow-strong);
    box-shadow: 0 7px 18px rgba(19,27,31,.12);
}

.building-gallery-thumb img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.cb-image-lightbox {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.cb-image-lightbox.open {
    display: flex;
}

.cb-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 13, .93);
    backdrop-filter: blur(7px);
}

.cb-image-lightbox-stage {
    position: relative;
    z-index: 2;
    width: min(96vw, 1800px);
    height: min(92vh, 1200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-image-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.cb-image-lightbox-close {
    position: fixed;
    z-index: 4;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0 0 4px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: white;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.cb-image-lightbox-close:hover {
    background: rgba(255,255,255,.16);
}

body.cb-lightbox-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .building-gallery-thumb {
        height: 57px;
        width: auto;
        flex-basis: auto;
    }

    .cb-image-lightbox {
        padding: 12px;
    }

    .cb-image-lightbox-close {
        top: 10px;
        right: 10px;
    }
}


/* =========================================================
   CATALOG DROPDOWN + ALL BUILDINGS PAGE
   ========================================================= */

.nav-catalog-menu {
    min-width: 520px;
}

.buildings-catalog-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 66px;
    background:
        radial-gradient(circle at 82% 22%, rgba(255,201,40,.16), transparent 28%),
        linear-gradient(135deg, var(--ink), var(--ink-2));
    color: var(--white);
}

.buildings-catalog-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -110px;
    bottom: -210px;
    border: 70px solid rgba(255,255,255,.025);
    transform: rotate(24deg);
}

.buildings-catalog-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 56px;
    align-items: end;
}

.buildings-catalog-hero h1 {
    max-width: 880px;
    margin-bottom: 18px;
    font-size: clamp(3.4rem, 6vw, 6.4rem);
}

.buildings-catalog-lead {
    max-width: 790px;
    margin-bottom: 0;
    color: #c4cfd3;
    font-size: 1.02rem;
}

.buildings-catalog-hero-stat {
    padding: 26px 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
}

.buildings-catalog-hero-stat span,
.buildings-catalog-hero-stat small {
    display: block;
    color: #b9c6cb;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.buildings-catalog-hero-stat strong {
    display: block;
    margin: 6px 0 3px;
    color: var(--yellow);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 4.3rem;
    line-height: 1;
}

.buildings-catalog-section {
    padding-top:20px !important;
    background: #f7f8f8;
}

.buildings-filter-panel {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(250px, 1.65fr) repeat(5, minmax(120px, .7fr));
    gap: 10px;
    margin-top: 0px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 18px 46px rgba(19,27,31,.10);
}

.buildings-filter-panel select,
.buildings-filter-search {
    min-height: 45px;
    border: 1px solid #dce2e4;
    border-radius: 10px;
    background: #fff;
}

.buildings-filter-panel select {
    width: 100%;
    padding: 0 34px 0 11px;
    color: var(--text);
    outline: none;
    font-size: .78rem;
}

.buildings-filter-panel select:focus,
.buildings-filter-search:focus-within {
    border-color: var(--yellow-strong);
    box-shadow: 0 0 0 3px rgba(255,201,40,.15);
}

.buildings-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.buildings-filter-search span {
    color: #7b888e;
    font-size: 1.2rem;
}

.buildings-filter-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .8rem;
}

.buildings-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.buildings-filter-actions .button {
    min-height: 42px;
    padding: 10px 16px;
    font-size: .75rem;
}

.button-light {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.buildings-catalog-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 24px 0 18px;
    color: var(--muted);
    font-size: .78rem;
}

.buildings-catalog-summary > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.buildings-catalog-summary strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.buildings-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.building-catalog-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 8px 25px rgba(19,27,31,.055);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.building-catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(19,27,31,.10);
}

.building-catalog-image {
    position: relative;
    min-height: 215px;
    background:
        linear-gradient(135deg, #eef1f2, #f8f9f9);
}

.building-catalog-image-button {
    width: 100%;
    height: 215px;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.building-catalog-image-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.building-catalog-placeholder {
    width: 100%;
    height: 215px;
    border-radius: 0;
}

.building-catalog-category {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(21,27,31,.88);
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    backdrop-filter: blur(8px);
}

.building-catalog-body {
    padding: 16px;
}

.building-catalog-title-row h2 {
    min-height: 42px;
    margin-bottom: 7px;
    color: var(--ink);
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
}

.building-catalog-title-row code {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 6px;
    background: #f1f3f4;
    color: #637077;
    font-size: .64rem;
}

.building-catalog-core-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 15px;
}

.building-catalog-core-meta > span {
    min-width: 0;
    padding: 9px 7px;
    border-radius: 9px;
    background: #f7f8f8;
}

.building-catalog-core-meta small,
.building-catalog-core-meta strong {
    display: block;
}

.building-catalog-core-meta small {
    margin-bottom: 2px;
    color: #879297;
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.building-catalog-core-meta strong {
    overflow: hidden;
    color: var(--ink);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-catalog-magazines {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #eef1f2;
}

.building-catalog-magazines > span {
    color: #7d898e;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.building-catalog-magazines > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.building-catalog-magazines a {
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--yellow-soft);
    color: #604c00;
    font-size: .64rem;
    font-weight: 900;
}

.building-detail-toggle {
    width: 100%;
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
    padding: 0 12px;
    border: 1px solid #dce2e4;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 900;
}


.building-detail-toggle:hover {
    border-color: var(--yellow-strong);
}

.building-detail-toggle i {
    color: var(--yellow-strong);
    font-size: 1rem;
    font-style: normal;
}

.building-card-details {
    margin-top: 12px;
    border-top: 1px solid #eef1f2;
}

.building-card-details-inner {
    padding-top: 14px;
}

.building-card-description {
    margin-bottom: 14px;
    color: #66747a;
    font-size: .75rem;
    line-height: 1.55;
}

.building-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 0;
}

.building-detail-list > div {
    padding: 8px 9px;
    border-radius: 8px;
    background: #f7f8f8;
}

.building-detail-list dt {
    color: #929b9f;
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.building-detail-list dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: .7rem;
    font-weight: 800;
}

.building-card-gallery-label {
    margin: 15px 0 8px;
    color: #7c888e;
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.building-catalog-gallery {
    margin: 0;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 38px;
}

.catalog-page,
.catalog-page-number {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font-size: .74rem;
    font-weight: 900;
}

.catalog-page {
    padding: 0 14px;
}

.catalog-page-numbers {
    display: flex;
    gap: 6px;
}

.catalog-page-number {
    min-width: 40px;
    padding: 0 10px;
}

.catalog-page-number.active {
    border-color: var(--yellow);
    background: var(--yellow);
}

.catalog-page:hover,
.catalog-page-number:hover {
    border-color: var(--yellow-strong);
}

.catalog-page-disabled {
    opacity: .35;
    pointer-events: none;
}

.buildings-catalog-empty {
    padding: 70px 24px;
    border: 1px dashed #ccd4d7;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.buildings-catalog-empty strong {
    display: block;
    margin-bottom: 18px;
    color: var(--ink);
    font-size: 1.15rem;
}

@media (max-width: 1180px) {
    .buildings-filter-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .buildings-filter-search {
        grid-column: span 2;
    }

    .buildings-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .buildings-catalog-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .buildings-catalog-hero-stat {
        max-width: 280px;
    }

    .buildings-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .buildings-catalog-hero {
        padding: 48px 0 55px;
    }

    .buildings-catalog-hero h1 {
        font-size: clamp(2.7rem, 15vw, 4.6rem);
    }

    .buildings-filter-panel {
        grid-template-columns: 1fr;
        margin-top: -22px;
        padding: 12px;
    }

    .buildings-filter-search {
        grid-column: auto;
    }

    .buildings-filter-actions {
        flex-direction: column;
    }

    .buildings-filter-actions .button {
        width: 100%;
    }

    .buildings-catalog-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .buildings-card-grid {
        grid-template-columns: 1fr;
    }

    .building-catalog-image,
    .building-catalog-image-button,
    .building-catalog-placeholder {
        height: 250px;
        min-height: 250px;
    }

    .catalog-pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .catalog-page {

        order: 2;
    }



    .catalog-page-numbers {
        width: 100%;
        order: 1;
        justify-content: center;
        flex-wrap: wrap;
    }
}


/* =========================================================
   EDITABLE MAIN PAGE
   ========================================================= */

.button-brand-icon,
.brand-button img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}

.brand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.button-patreon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #ff424d;
    background: #ff424d;
    color: #fff;
}

.button-patreon:hover {
    background: #e93943;
    border-color: #e93943;
}

.button-small {
    min-height: 38px;
    padding: 8px 11px;
    font-size: .68rem;
}

.home-hero-actions {
    flex-wrap: wrap;
}

.home-hero-image {
    width: 100%;
    max-height: 620px;
    display: block;
    object-fit: contain;
}

.home-floating-cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.home-about-image,
.home-community-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.home-section-intro {
    max-width: 760px;
    margin: -10px auto 30px;
    text-align: center;
}

.home-section-intro-light {
    color: #bac6ca;
}

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

.home-magazine-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.05);
}

.home-magazine-cover-link {
    display: block;
    aspect-ratio: .76;
    overflow: hidden;
    background: #202a30;
}

.home-magazine-cover-link > img,
.home-magazine-cover-link .magazine-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-magazine-card-body {
    padding: 15px;
}

.home-magazine-number {
    display: block;
    margin-bottom: 5px;
    color: var(--yellow);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.home-magazine-card h3 {
    margin-bottom: 7px;
    color: #fff;
    font-family: Inter, Arial, sans-serif;
    font-size: .95rem;
    text-transform: none;
}

.home-magazine-card p {
    min-height: 37px;
    margin-bottom: 14px;
    color: #aab7bc;
    font-size: .72rem;
    line-height: 1.45;
}

.home-magazine-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.home-magazines-footer {
    margin-top: 28px;
}

.home-patreon-section {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,66,77,.11), transparent 33%),
        #f7f8f8;
}

.home-patreon-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
    border: 1px solid #e0e5e7;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(19,27,31,.08);
}

.home-patreon-copy {
    padding: 48px;
}

.home-patreon-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: #ff424d;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.home-patreon-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.home-patreon-copy h2 {
    max-width: 680px;
    margin-bottom: 18px;
}

.home-patreon-copy p {
    max-width: 680px;
    margin-bottom: 24px;
    color: #69777d;
}

.home-patreon-visual {
    min-height: 390px;
    background: #171d21;
}

.home-patreon-visual > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.home-patreon-placeholder {
    height: 100%;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,66,77,.28), transparent 36%),
        #171d21;
    color: #fff;
}

.home-patreon-placeholder img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.home-patreon-placeholder strong {
    font-size: 2rem;
    letter-spacing: .09em;
}

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

.home-social-card {
    min-height: 82px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 5px 18px rgba(19,27,31,.035);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.home-social-card:hover {
    transform: translateY(-2px);
    border-color: #cfd6d9;
    box-shadow: 0 10px 25px rgba(19,27,31,.08);
}

.home-social-icon-wrap {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f5f7f7;
}

.home-social-icon {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

.home-social-copy {
    min-width: 0;
}

.home-social-copy strong,
.home-social-copy span {
    display: block;
}

.home-social-copy strong {
    overflow: hidden;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-social-copy span {
    color: #869196;
    font-size: .64rem;
}

.home-social-flag {
    width: 20px;
    height: 14px;
    margin-right: 5px;
    object-fit: cover;
    vertical-align: -2px;
    border-radius: 2px;
}

.home-social-card > i {
    color: #a0aaae;
    font-size: 1rem;
    font-style: normal;
}

.home-social-etsy {
    border-color: #f4c7a8;
    background: #fffaf7;
}

.home-social-etsy .home-social-icon-wrap {
    background: #fff1e7;
}

@media (max-width: 1000px) {
    .home-magazine-grid,
    .home-social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-patreon-card {
        grid-template-columns: 1fr;
    }

    .home-patreon-visual {
        min-height: 300px;
    }
}

@media (max-width: 680px) {
    .home-hero-actions .button {
        width: 100%;
    }

    .home-magazine-grid,
    .home-social-grid {
        grid-template-columns: 1fr;
    }

    .home-patreon-copy {
        padding: 28px 22px;
    }

    .home-magazine-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   HOME: LATEST MAGAZINES — compact strip like original design
   ========================================================= */

.home-magazines-section {
    padding-top: 34px;
    padding-bottom: 34px;
    background: #f5f6f6;
}

.latest-magazines-box {
    padding: 20px 16px 18px;
    border: 1px solid #243239;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 32%),
        linear-gradient(180deg, #162129 0%, #121b21 100%);
    box-shadow: 0 2px 8px rgba(19,27,31,.12);
}

.latest-magazines-heading {
    margin-bottom: 14px;
}

.latest-magazines-heading h2 {
    font-size: 1.55rem;
    letter-spacing: .01em;
}

.latest-magazines-heading .heading-line {
    max-width: 70px;
}

.latest-magazines-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
	padding-top:15px;
}

.latest-magazine-cover {
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    margin: 0 auto;

    padding: 5px;
    overflow: hidden;

    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);

    box-shadow: 0 3px 10px rgba(0,0,0,.22);
}

.latest-magazine-cover:hover {
    transform: translateY(-3px);
    border-color: var(--yellow);
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.latest-magazine-cover img,
.latest-magazine-placeholder {
    height: 260px;
    width: auto;
    display: block;
}

.latest-magazine-cover img {
    object-fit: contain;
}

.latest-magazine-placeholder {
    display: grid;
    place-items: center;
    background: #26343b;
}

.latest-magazine-placeholder span {
    color: var(--yellow);
    font-size: 1.35rem;
    font-weight: 900;
}

.latest-magazines-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.latest-magazines-button {
    min-width: 220px;
    min-height: 42px;
    gap: 8px;
    border-radius: 5px;
    font-size: .78rem;
}

.latest-magazines-cart {
    font-size: .9rem;
    line-height: 1;
}

@media (max-width: 1180px) {
    .latest-magazines-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .latest-magazines-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .latest-magazines-box {
        padding: 16px 12px;
    }

    .latest-magazines-heading h2 {
        font-size: 1.25rem;
    }

    .latest-magazines-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .latest-magazines-button {
        width: 100%;
        min-width: 0;
    }
}


/* Hero mini-feature PNG icons */
.mini-icon {
    overflow: hidden;
    background: #fff;
}

.mini-icon img {
    width: 45px;
    height: 45px;
    display: block;
    object-fit: contain;
}


/* =========================================================
   HEADER LOGO SIZE FIX
   Keep real logo the same visual size as the old placeholder.
   ========================================================= */

.logo .site-logo {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px;
    flex: 0 0 48px;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

@media (max-width: 680px) {
    .logo .site-logo {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        min-width: 40px;
        flex-basis: 40px;
    }
}


/* =========================================================
   HOME HERO — SECOND TITLE LINE ACCENT
   ========================================================= */

.home-hero h1 > span {
    color: var(--yellow-strong);
}


/* =========================================================
   HOME HERO — FULL BACKGROUND IMAGE
   The admin "Hero / верх главной" image is now the background
   of the entire .hero.home-hero section.
   ========================================================= */

.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 720px;
    background-color: #eef1f2;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Readability gradient over the photo.
   Stronger on the left where the text is located,
   much lighter on the right so the artwork remains visible. */
.home-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.95) 27%,
            rgba(255,255,255,.78) 45%,
            rgba(255,255,255,.28) 68%,
            rgba(255,255,255,.04) 100%
        );
    pointer-events: none;
}

/* Keep the subtle yellow decorative glow, but above the photo
   and below the real content. */
.home-hero::before {
    z-index: -1;
}

.home-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 720px;
    grid-template-columns: minmax(0, 720px) 1fr;
    align-items: center;
    padding-top: 70px;
    padding-bottom: 82px;
}

.home-hero-copy {
    max-width: 720px;
    padding: 28px 0;
}

.home-hero-copy h1 {
    text-shadow: 0 2px 14px rgba(255,255,255,.68);
}

.home-hero-copy .hero-lead,
.home-hero-copy .hero-description {
    max-width: 650px;
}

/* The old right-side .hero-visual is intentionally no longer used. */
.home-hero .hero-visual {
    display: none !important;
}

/* Larger floating magazine, positioned directly inside the Hero. */
.home-magazine-floating {
    left: auto;
    right: clamp(18px, 4vw, 68px);
    bottom: -18px;
    width: clamp(235px, 24vw, 365px);
    transform: rotate(2.2deg);
    filter:
        drop-shadow(0 30px 34px rgba(19,27,31,.34))
        drop-shadow(0 7px 12px rgba(19,27,31,.16));
    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.home-magazine-floating:hover {
    transform: rotate(0deg) translateY(-7px);
    filter:
        drop-shadow(0 38px 40px rgba(19,27,31,.38))
        drop-shadow(0 10px 16px rgba(19,27,31,.18));
}

.home-magazine-floating .home-floating-cover,
.home-magazine-floating .cover-placeholder {
    border-radius: 10px;
}

@media (max-width: 1050px) {
    .home-hero {
        min-height: 760px;
        background-position: 58% center;
    }

    .home-hero-grid {
        min-height: 760px;
        grid-template-columns: minmax(0, 640px) 1fr;
    }

    .home-hero::after {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.98) 0%,
                rgba(255,255,255,.93) 45%,
                rgba(255,255,255,.46) 74%,
                rgba(255,255,255,.12) 100%
            );
    }

    .home-magazine-floating {
        right: 20px;
        width: clamp(205px, 27vw, 300px);
    }
}

@media (max-width: 760px) {
    .home-hero {
        min-height: 0;
        background-position: 62% center;
    }

    .home-hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.98) 0%,
                rgba(255,255,255,.95) 55%,
                rgba(255,255,255,.72) 78%,
                rgba(255,255,255,.25) 100%
            );
    }

    .home-hero-grid {
        min-height: 820px;
        display: block;
        padding-top: 42px;
        padding-bottom: 230px;
    }

    .home-hero-copy {
        max-width: 100%;
        padding: 0;
    }

    .home-magazine-floating {
        right: 18px;
        left: auto;
        bottom: -12px;
        width: 190px;
    }
}

@media (max-width: 480px) {
    .home-hero-grid {
        min-height: 850px;
        padding-bottom: 210px;
    }

    .home-magazine-floating {
        width: 165px;
        right: 12px;
    }
}


/* =========================================================
   MOBILE HERO — reserve space for floating magazine
   so it never overlaps the fourth hobby feature.
   ========================================================= */

@media (max-width: 760px) {
    .home-hero-grid {
        padding-bottom: 300px;
    }

    .home-magazine-floating {
        bottom: 22px;
        right: 18px;
        width: 180px;
    }
}

@media (max-width: 480px) {
    .home-hero-grid {
        padding-bottom: 270px;
    }

    .home-magazine-floating {
        bottom: 18px;
        right: 12px;
        width: 155px;
    }
}

.home-magazine-floating {
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .58);
    box-sizing: border-box;
}

@media (max-width: 760px) {
    .home-hero-grid {
        padding-bottom: 450px;
    }

    .home-magazine-floating {
        left: 50%;
        right: auto;
        bottom: 24px;
        width: min(72vw, 290px);
        transform: translateX(-50%) rotate(1.5deg);
    }

    .home-magazine-floating:hover {

        transform: translateX(-50%) rotate(0deg) translateY(-6px);
    }
}

@media (max-width: 480px) {
    .home-hero-grid {
        padding-bottom: 420px;
    }

    .home-magazine-floating {
        left: 50%;
        right: auto;
        bottom: 20px;
        width: min(78vw, 270px);
        transform: translateX(-50%) rotate(1.5deg);
    }

    .home-magazine-floating:hover {
        transform: translateX(-50%) rotate(0deg) translateY(-5px);
    }
}

/* =========================================================
   HOME: REAL CITY EXPERIENCE
   ========================================================= */

.real-city-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0 105px;
    background:
        radial-gradient(circle at 8% 12%, rgba(255,201,40,.12), transparent 26%),
        linear-gradient(180deg, #f8f9f9 0%, #ffffff 48%, #f5f7f7 100%);
}

.real-city-section::before {
    content: "";
    position: absolute;
    right: -180px;
    top: 130px;
    width: 420px;
    height: 420px;
    border: 80px solid rgba(21,27,31,.025);
    border-radius: 50%;
}

.real-city-heading {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto 58px;
    text-align: center;
}

.real-city-heading .eyebrow {
    margin-bottom: 13px;
}

.real-city-heading h2 {
    max-width: 850px;
    margin: 0 auto 20px;
    font-size: clamp(2.6rem, 4.3vw, 5rem);
    line-height: .96;
}

.real-city-intro {
    max-width: 780px;
    margin: 0 auto;
    color: #637078;
    font-size: 1.02rem;
    line-height: 1.75;
}

.real-city-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 28px;
}

.real-city-card {
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    overflow: hidden;
    border: 1px solid #e0e5e7;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(19,27,31,.075);
}

.real-city-card:nth-child(even) {
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
}

.real-city-card:nth-child(even) .real-city-photo {
    order: 2;
}

.real-city-card:nth-child(even) .real-city-copy {
    order: 1;
}

.real-city-photo {
    min-height: 360px;
    overflow: hidden;
    background: #e9edef;
}

.real-city-photo img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: block;
    object-fit: cover;
    transition: transform 420ms ease;
}

.real-city-card:hover .real-city-photo img {
    transform: scale(1.025);
}

.real-city-photo-placeholder {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background:
        linear-gradient(135deg, rgba(255,201,40,.10), transparent 45%),
        #e7ecee;
    color: #8d989d;
}

.real-city-photo-placeholder span {
    color: #bec6c9;
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 5rem;
    line-height: 1;
}

.real-city-photo-placeholder small {
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .18em;
}

.real-city-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 70px);
}

.real-city-number {
    display: block;
    margin-bottom: 22px;
    color: var(--yellow-strong);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 2.15rem;
    line-height: 1;
}

.real-city-copy h3 {
    max-width: 520px;
    margin: 0 0 18px;
    color: var(--ink);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1.7rem, 2.4vw, 2.65rem);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.real-city-copy p {
    max-width: 570px;
    margin: 0;
    color: #637078;
    font-size: .98rem;
    line-height: 1.7;
}

.real-city-card-final {
    border-color: #263940;
    background:
        radial-gradient(circle at 90% 20%, rgba(255,201,40,.16), transparent 30%),
        linear-gradient(135deg, #151f24, #263940);
    color: #fff;
}

.real-city-card-final .real-city-copy h3 {
    color: #fff;
}

.real-city-card-final .real-city-copy p {
    color: #c3cdd1;
}

.real-city-card-final .real-city-number {
    color: var(--yellow);
}

@media (max-width: 980px) {
    .real-city-section {
        padding: 78px 0 82px;
    }

    .real-city-card,
    .real-city-card:nth-child(even) {
        grid-template-columns: 1fr 1fr;
    }

    .real-city-copy {
        padding: 38px;
    }
}

@media (max-width: 760px) {
    .real-city-section {
        padding: 64px 0 68px;
    }

    .real-city-heading {
        margin-bottom: 38px;
        text-align: left;
    }

    .real-city-heading h2 {
        margin-left: 0;
        margin-right: 0;
        font-size: clamp(2.6rem, 12vw, 4.2rem);
    }

    .real-city-intro {
        margin-left: 0;
        margin-right: 0;
    }

    .real-city-list {
        gap: 18px;
    }

    .real-city-card,
    .real-city-card:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 18px;
    }

    .real-city-card:nth-child(even) .real-city-photo,
    .real-city-card:nth-child(even) .real-city-copy {
        order: initial;
    }

    .real-city-photo,
    .real-city-photo img,
    .real-city-photo-placeholder {
        min-height: 250px;
        height: 250px;
    }

    .real-city-copy {
        padding: 28px 24px 32px;
    }

    .real-city-number {
        margin-bottom: 14px;
        font-size: 1.7rem;
    }

    .real-city-copy h3 {
        margin-bottom: 13px;
        font-size: clamp(1.7rem, 8vw, 2.35rem);
    }

    .real-city-copy p {
        font-size: .94rem;
    }
}

@media (max-width: 480px) {
    .real-city-photo,
    .real-city-photo img,
    .real-city-photo-placeholder {
        min-height: 215px;
        height: 215px;
    }
}


.feature-icon img {
    width: 64px;
    height: 64px;
    display: block;
    object-fit: contain;
}

/* HOME: editable bottom trust strip */
.trust-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}
.trust-icon img {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: contain;
}
@media (max-width: 680px) {
    .trust-icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
    .trust-icon img {
        width: 46px;
        height: 46px;
    }
}


/* =========================================================
   FOOTER — COMPACT REDESIGN
   ========================================================= */

.site-footer {
    background: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.15fr .8fr .9fr .85fr 1.35fr;
    gap: 42px;
    padding-top: 44px;
    padding-bottom: 36px;
    align-items: start;
}

.footer-brand {
    min-width: 0;
}

.footer-site-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    text-decoration: none;
}

.footer-site-logo {
    width: 74px;
    height: 74px;
    display: block;
    flex: 0 0 74px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(20, 30, 36, .12);
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo-text strong {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.footer-logo-text span {
    margin-top: 4px;
    color: #879197;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.footer-brand p {
    max-width: 265px;
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.55;
}

.footer-brand p strong {
    color: #667279;
}

.footer-column h3 {
    margin: 4px 0 16px;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.footer-column a {
    display: block;
    margin-bottom: 10px;
    color: #77838a;
    font-size: .82rem;
    line-height: 1.35;
    transition: color 150ms ease, transform 150ms ease;
}

.footer-column a:hover {
    color: var(--ink);
    transform: translateX(2px);
}

.newsletter p {
    max-width: 360px;
    margin: 0 0 16px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    max-width: 390px;
}

.newsletter-form input {
    min-width: 0;
    flex: 1;
    height: 43px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 8px 0 0 8px;
    outline: 0;
    font-size: .84rem;
}

.newsletter-form input:focus {
    border-color: var(--yellow-strong);
}

.newsletter-form button {
    height: 43px;
    padding: 0 17px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--yellow);
    color: var(--ink);
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.footer-bottom {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    color: #949da2;
    font-size: .72rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom div {
    display: flex;
    gap: 22px;
}

.footer-bottom a {
    color: #949da2;
}

.footer-bottom a:hover {
    color: var(--ink);
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 34px;
    }

    .newsletter {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 22px;
        padding-top: 36px;
        padding-bottom: 30px;




    }

    .footer-brand,
    .newsletter {
        grid-column: 1 / -1;
    }

    .footer-site-logo {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
        border-radius: 12px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

@media (max-width: 460px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .newsletter {
        grid-column: auto;
    }
}


/* =========================================================
   HOME / REAL CITY — PREMIUM EDITORIAL SHOWCASE
   Uses existing DB data:
   - realCity eyebrow/title/intro
   - each item's image_path/title/description
   - sort_order from DB determines numbering/order
   ========================================================= */

.real-city-showcase {
    padding: 92px 0 102px;
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 196, 0, .10), transparent 26%),
        linear-gradient(180deg, #fafafa 0%, #f5f6f6 100%);
}

.real-city-showcase-heading {
    max-width: 900px;
    margin: 0 auto 48px;
    text-align: center;
}

.real-city-showcase-heading h2 {
    max-width: 900px;
    margin: 0 auto 16px;
}

.real-city-showcase-heading .real-city-intro {
    max-width: 760px;
    margin: 0 auto;
}

.real-city-showcase-list {
    display: grid;
    gap: 20px;
}

.real-city-showcase-card {
    position: relative;
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
    overflow: hidden;
    border: 1px solid rgba(22, 32, 38, .08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(21, 27, 31, .08);
}

.real-city-showcase-card.is-reverse {
    grid-template-columns: minmax(420px, .88fr) minmax(0, 1.12fr);
}

.real-city-showcase-card.is-reverse .real-city-showcase-photo {
    order: 2;
}

.real-city-showcase-card.is-reverse .real-city-showcase-copy {
    order: 1;
}

.real-city-showcase-photo {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: #dce2e4;
}

.real-city-showcase-photo img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: block;
    object-fit: cover;
    transition: transform 420ms ease;
}

.real-city-showcase-card:hover .real-city-showcase-photo img {
    transform: scale(1.018);
}

.real-city-showcase-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 183, 0, .22), transparent 32%),
        linear-gradient(180deg, rgba(12, 18, 21, .03), rgba(12, 18, 21, .08));
}

.real-city-showcase-card.is-reverse .real-city-showcase-photo::after {
    background:
        linear-gradient(270deg, rgba(255, 183, 0, .22), transparent 32%),
        linear-gradient(180deg, rgba(12, 18, 21, .03), rgba(12, 18, 21, .08));
}

.real-city-showcase-photo-accent {
    position: absolute;
    z-index: 3;
    top: 0;
    right: -1px;
    width: 72px;
    height: 100%;
    background: linear-gradient(180deg, #ffb300, #ff8d00);
    clip-path: polygon(82% 0, 100% 0, 18% 100%, 0 100%);
    pointer-events: none;
}

.real-city-showcase-card.is-reverse .real-city-showcase-photo-accent {
    left: -1px;
    right: auto;
    clip-path: polygon(0 0, 18% 0, 100% 100%, 82% 100%);
}

.real-city-showcase-copy {
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px 62px 72px;
    overflow: hidden;

    background-color: #fff;
    background-image: url("../../images/right_bl.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
}

.real-city-showcase-card.is-reverse .real-city-showcase-copy {
    background-image: url("../../images/left_bl.jpg");
    background-position: left bottom;
}


.real-city-showcase-copy::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;

	background: linear-gradient(
		90deg,
		rgba(255,255,255,.92) 0%,
		rgba(255,255,255,.68) 25%,
		rgba(255,255,255,.28) 52%,
		rgba(255,255,255,0) 78%
	);
}

.real-city-showcase-card.is-reverse .real-city-showcase-copy::before {
    background: linear-gradient(
        270deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.68) 25%,
        rgba(255,255,255,.28) 52%,
        rgba(255,255,255,0) 78%
    );
}

.real-city-showcase-number {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 10px;
    color: #f39a00;
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(3rem, 4.3vw, 4.9rem);
    line-height: .9;
    letter-spacing: -.02em;
}

.real-city-showcase-copy h3 {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0;
    color: #10212d;
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(2rem, 3.1vw, 3.65rem);
    line-height: .98;
    text-transform: uppercase;
    letter-spacing: .005em;
}

.real-city-showcase-line {
    position: relative;
    z-index: 2;
    display: block;
    width: 56px;
    height: 3px;
    margin: 20px 0 17px;
    background: #ff9f00;
    border-radius: 4px;
}

.real-city-showcase-copy p {
    position: relative;
    z-index: 2;
    max-width: 590px;
    margin: 0;
    color: #54636b;
    font-size: .98rem;
    line-height: 1.65;
}

.real-city-showcase-dots {
    display: none;
}

.real-city-showcase-skyline {
    display: none;
    position: absolute;
    z-index: 1;
    left: 58px;
    right: 58px;
    bottom: 0;
    height: 70px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    opacity: .08;
    pointer-events: none;
}

.real-city-showcase-skyline span {
    display: block;
    flex: 1 1 auto;
    background: #b5a26a;
    border-radius: 2px 2px 0 0;
}

.real-city-showcase-skyline span:nth-child(1) { height: 32px; }
.real-city-showcase-skyline span:nth-child(2) { height: 48px; }
.real-city-showcase-skyline span:nth-child(3) { height: 27px; }
.real-city-showcase-skyline span:nth-child(4) { height: 58px; }
.real-city-showcase-skyline span:nth-child(5) { height: 38px; }
.real-city-showcase-skyline span:nth-child(6) { height: 50px; }
.real-city-showcase-skyline span:nth-child(7) { height: 24px; }
.real-city-showcase-skyline span:nth-child(8) { height: 44px; }
.real-city-showcase-skyline span:nth-child(9) { height: 61px; }
.real-city-showcase-skyline span:nth-child(10) { height: 34px; }

.real-city-showcase-placeholder {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 178, 0, .18), transparent 45%),
        #e8edef;
    color: #98a4aa;
}

.real-city-showcase-placeholder strong {
    color: rgba(255, 159, 0, .45);
    font-family: "CityBuilderDisplay",  Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 5rem;
    line-height: 1;
}

.real-city-showcase-placeholder span {
    margin-top: 6px;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .18em;
}

/* Скрываем фото справа от диагонали */
.real-city-showcase-photo::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: -1px;

    width: 76px;
    height: 100%;

    background: #fff;

    clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        18% 100%
    );

    pointer-events: none;
}

/* Зеркальный вариант, когда фото справа */
.real-city-showcase-card.is-reverse .real-city-showcase-photo::before {
    left: -1px;
    right: auto;

    clip-path: polygon(
        0 0,
        18% 0,
        82% 100%,
        0 100%
    );
}

@media (max-width: 1050px) {
    .real-city-showcase-card,
    .real-city-showcase-card.is-reverse {
        grid-template-columns: 1fr 1fr;
    }

    .real-city-showcase-copy {
        padding: 44px 40px 66px;
    }
}

@media (max-width: 760px) {
    .real-city-showcase {
        padding: 64px 0 22px;
    }

    .real-city-showcase-photo::before,
    .real-city-showcase-card.is-reverse .real-city-showcase-photo::before {
        display: none;
        content: none;
    }

    .real-city-showcase-heading {
        margin-bottom: 34px;
        text-align: left;
    }

    .real-city-showcase-list {
        gap: 16px;
    }

    .real-city-showcase-card,
    .real-city-showcase-card.is-reverse {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 18px;
    }

    .real-city-showcase-card.is-reverse .real-city-showcase-photo,
    .real-city-showcase-card.is-reverse .real-city-showcase-copy {
        order: initial;
    }

    .real-city-showcase-photo,
    .real-city-showcase-photo img,
    .real-city-showcase-placeholder {
        min-height: 360px;
        height: 360px;
    }

    .real-city-showcase-photo-accent,
    .real-city-showcase-card.is-reverse .real-city-showcase-photo-accent {
        top: auto;
        left: 0;
        right: 0;
        bottom: -1px;
        width: 100%;
        height: 34px;
        clip-path: polygon(0 68%, 100% 0, 100% 100%, 0 100%);
    }

    .real-city-showcase-copy {
        min-height: 0;
        padding: 30px 25px 58px;
    }

    .real-city-showcase-number {
        font-size: 3rem;
    }

    .real-city-showcase-copy h3 {
        font-size: clamp(1.9rem, 8.5vw, 2.8rem);
    }

    .real-city-showcase-copy p {
        font-size: .94rem;
    }

    .real-city-showcase-skyline {
        left: 24px;
        right: 24px;
        height: 48px;
    }

    .real-city-showcase-dots {
        width: 110px;
        height: 65px;
    }
}

@media (max-width: 480px) {
    .real-city-showcase-photo,
    .real-city-showcase-photo img,
    .real-city-showcase-placeholder {
        min-height: 220px;
        height: 220px;
    }
}


/* =========================================================
   MOBILE NAV — FINAL OVERFLOW GUARD
   ========================================================= */
@media (max-width: 1050px) {
    .main-nav {
        box-sizing: border-box;
        max-width: 100vw;
    }

    .nav-catalog-menu {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .nav-dropdown,
    .nav-dropdown-menu,
    .dropdown-links,
    .dropdown-links > a {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}


@media (max-width: 680px) {
    .language-list {
        gap: 7px;
    }

    .language-flag-image {
        width: 28px;
        height: 19px;
    }
	
	.hero-lead, .hero-description, .about-copy, .real-city-intro {line-height:1;}
	.real-city-showcase-copy p {line-height:1;}
	
	.about-grid {margin-bottom:10px;}
	
	.feature-card p {line-height:1;}
	.feature-card h3 {font-size:1rem;}
	.about-copy .button {margin:0 auto;}
	
}

/* =========================================================
   MOBILE — CENTER LANGUAGE FLAGS + HOME CTA BUTTONS
   ========================================================= */
@media (max-width: 680px) {


    /* Center "Learn more about the project" button */
    .about-copy .button {
        display: flex;
        width: fit-content;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center Discord button inside community block */
    .community-copy .button {
        display: flex;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Keep button contents centered */
    .about-copy .button,
    .community-copy .button {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================
   MOBILE HEADER — FIXED ON SCROLL + MENU BACKDROP
   ========================================================= */
@media (max-width: 1050px) {

    .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1400;
    }

    body {
        padding-top: 109px;
    }

    .header-main {
        position: relative;
        z-index: 1502;
    }

    .language-bar {
        position: relative;
        z-index: 5;
    }

    .mobile-menu-button {
        position: relative;
        z-index: 1503;
    }

    .main-nav {
        position: fixed !important;

        top: 109px !important;
        right: 0;
        bottom: 0;

        width: min(88vw, 410px);
        max-width: 100vw;
        height: calc(100dvh - 109px) !important;

        z-index: 1501;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 24px;

        overflow-x: hidden;
        overflow-y: auto;

        background: var(--ink);

        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 220ms ease,
            visibility 0s linear 220ms;
    }

    .menu-open .main-nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;

        transition:
            transform 220ms ease,
            visibility 0s linear 0s;
    }

    body.menu-open::after {
        content: "";
        position: fixed;
        z-index: 1350;

        top: 109px;
        left: 0;
        right: 0;
        bottom: 0;

        background: rgba(10, 16, 20, .38);

        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }
}

@media (max-width: 680px) {
    .language-list {
        justify-content: center !important;
        overflow-x: visible;
        flex-wrap: nowrap;
    }
}

/* =========================================================
   HEADER — FIXED DESKTOP + FULLSCREEN MOBILE MENU
   Final override block.
   ========================================================= */

/* Desktop/tablet: keep the whole header fixed at the top */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1800;
}

/* 82px main header + 39px language bar */
body {
    padding-top: 121px;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 1050px) {

    /* 70px main header + 39px language bar */
    body {
        padding-top: 109px;
    }

    .site-header {
        z-index: 1800;
    }

    /*
     * Fullscreen drawer.
     * It now covers logo/header/languages as well.
     */
    .main-nav {
        position: fixed !important;
        z-index: 2000 !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 88px 24px 32px !important;

        overflow-x: hidden;
        overflow-y: auto;

        background: var(--ink);

        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 220ms ease,
            visibility 0s linear 220ms;
    }

    .menu-open .main-nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;

        transition:
            transform 220ms ease,
            visibility 0s linear 0s;
    }

    /*
     * Burger button stays above the fullscreen menu.
     * When menu is open it becomes the close X.
     */
    .mobile-menu-button {
        position: fixed !important;
        z-index: 2100 !important;
        top: 13px;
        right: 16px;

        display: block;
        width: 44px;
        height: 44px;
        margin: 0;

        transition:
            background 160ms ease,
            transform 160ms ease;
    }

    .mobile-menu-button span {
        position: relative;
        display: block;
        width: 100%;
        height: 2px;
        margin: 5px 0;
        background: #fff;
        transform-origin: center;
        transition:
            transform 180ms ease,
            opacity 140ms ease;
    }

    .menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-open .mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /*
     * While fullscreen menu is open there is no need for
     * a separate page backdrop.
     */
    body.menu-open::after {
        display: none !important;
        content: none !important;
    }

    /*
     * Keep normal mobile menu items comfortable in fullscreen.
     */
    .main-nav > a:not(.button),
    .auth-link,
    .nav-dropdown-toggle {
        width: 100%;
    }

    .auth-nav {
        width: 100%;
    }

    .nav-shop {
        align-self: flex-start;
    }

    /*
     * Language bar is allowed to hide on scroll via the existing
     * .site-header.is-scrolled class, but the fullscreen nav
     * always starts at the very top.
     */
    .site-header.is-scrolled .main-nav {
        top: 0 !important;
        height: 100dvh !important;
    }
}

@media (max-width: 680px) {
    .main-nav {
        padding: 84px 18px 28px !important;
    }

    .mobile-menu-button {
        right: 12px;
    }
}

/* Скрытие панели языков при скролле */
.language-bar {
    max-height: 39px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);

    transition:
        max-height 180ms ease,
        opacity 140ms ease,
        transform 180ms ease;
}

.site-header.is-scrolled .language-bar {
    max-height: 0;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* Чтобы после скрытия панели не оставалось пустого места */
body {
    transition: padding-top 180ms ease;
}

body.header-scrolled {
    padding-top: 82px;
}

@media (max-width: 1050px) {
    body.header-scrolled {
        padding-top: 70px;
    }
}


/* =========================================================
   MAGAZINE — BUY MAGAZINE / ETSY / PATREON / MEMBERSHIP
   ========================================================= */

.magazine-buy-block {
    max-width: 650px;
    margin-top: 6px;
}

.magazine-buy-title {
    margin-bottom: 12px;
    color: #fff;
    font-family: "CityBuilderDisplay", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.magazine-purchase-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 12px;
}

.magazine-purchase-actions .magazine-store-button {
    width: 100%;
    min-height: 52px;
}

.magazine-membership-link {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 8px 2px;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    opacity: .9;
    transition: opacity 160ms ease, transform 160ms ease;
}

.magazine-membership-link:hover {
    opacity: 1;
    transform: translateX(3px);
}

.magazine-membership-link img {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    object-fit: contain;
}

.magazine-membership-link strong {
    color: var(--yellow);
    font-size: 1rem;
}

.magazine-back-button {
    margin-top: 18px;
}

@media (max-width: 680px) {
    .magazine-purchase-actions {
        grid-template-columns: 1fr;
    }

    .magazine-purchase-actions .magazine-store-button,
    .magazine-back-button {
        width: 100%;
    }

    .magazine-membership-link {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
    }
}

/* =========================================================
   ALL BUILDINGS — SQUARE PREVIEWS + HERO BACKGROUND + RANGE FILTER
   ========================================================= */

.buildings-catalog-hero {
    position: relative;
    isolation: isolate;
}

.buildings-catalog-hero-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.buildings-catalog-hero-background img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    opacity: .13;
    filter: saturate(.8) contrast(.9);
}

.buildings-catalog-hero-grid {
    position: relative;
    z-index: 2;
}

/* The filter now contains one additional control: floors FROM / TO */
.buildings-filter-panel {
    grid-template-columns: minmax(230px, 1.55fr) repeat(6, minmax(105px, .7fr));
}

/* Building preview is always a true square */
.building-catalog-image {
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
}

.building-catalog-image-button,
.building-catalog-placeholder {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
}

.building-catalog-image-button img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 1180px) {
    .buildings-filter-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .buildings-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 680px) {
    .buildings-filter-panel {
        grid-template-columns: 1fr;
    }

    .buildings-filter-search {
        grid-column: auto;
    }

    .building-catalog-image,
    .building-catalog-image-button,
    .building-catalog-placeholder,
    .building-catalog-image-button img {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1;
    }
}

/* =========================================================
   BUILDING DETAIL PAGE
   ========================================================= */

.building-catalog-image-button {
    text-decoration: none;
}

.building-detail-page-link {
    text-decoration: none;
}

.building-detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 75% 18%, rgba(255,201,40,.15), transparent 28%),
        linear-gradient(135deg, #101a1f, #20333b);
}

.building-detail-hero-bg {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
}

.building-detail-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(16,26,31,.96) 0%, rgba(16,26,31,.82) 48%, rgba(24,39,46,.88) 100%);
}

.building-detail-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
    filter: blur(2px) saturate(.8);
    transform: scale(1.03);
}

.building-detail-hero-grid {
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(42px, 6vw, 90px);
    padding-top: 72px;
    padding-bottom: 72px;
}

.building-detail-main-photo {
    width: min(100%, 560px);
    justify-self: center;
}

.building-detail-photo-button {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(0,0,0,.28);
    cursor: zoom-in;
}

.building-detail-photo-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.building-detail-photo-button > span {
    position: absolute;
    right: 22px;
    bottom: 22px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(21,27,31,.84);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.building-detail-photo-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
}

.building-detail-back {
    display: inline-flex;
    margin-bottom: 22px;
    color: #b9c6cb;
    font-size: .78rem;
    font-weight: 800;
}

.building-detail-back:hover { color: var(--yellow); }

.building-detail-copy h1 {
    max-width: 900px;
    margin-bottom: 18px;
    font-size: clamp(3.2rem, 5.8vw, 6.2rem);
}

.building-detail-sku {
    display: inline-flex;
    margin-bottom: 22px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #d6dfe2;
}

.building-detail-lead {
    max-width: 820px;
    margin-bottom: 28px;
    color: #c5d0d4;
    font-size: 1rem;
    line-height: 1.65;
}

.building-detail-quick-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 26px;
}

.building-detail-quick-specs > div {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}

.building-detail-quick-specs span,
.building-detail-quick-specs strong {
    display: block;
}

.building-detail-quick-specs span {
    margin-bottom: 4px;
    color: #96a8b0;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.building-detail-quick-specs strong {
    color: #fff;
    font-size: .9rem;
}

.building-detail-download-box {
    max-width: 760px;
    padding: 19px;
    border: 1px solid rgba(255,201,40,.32);
    border-radius: 14px;
    background: rgba(255,201,40,.08);
}

.building-detail-download-box > strong {
    display: block;
    margin-bottom: 5px;
    color: var(--yellow);
    font-size: .9rem;
    text-transform: uppercase;
}

.building-detail-download-box > p {
    margin-bottom: 13px;
    color: #c6d0d4;
    font-size: .78rem;
}

.building-detail-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.building-detail-download-actions .button {
    min-height: 42px;
    padding: 10px 14px;
    font-size: .7rem;
}

.building-detail-content-section {
    background: #fff;
}

.building-detail-section-heading {
    margin-bottom: 30px;
}

.building-detail-section-heading h2 {
    margin-bottom: 12px;
}

.building-detail-section-heading p:last-child {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
}

.building-detail-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    gap: 24px;
}

.building-detail-description-card,
.building-detail-spec-card {
    margin: 0;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.building-detail-description-card p {
    margin: 0;
    color: #56646b;
    line-height: 1.75;
}

.building-detail-spec-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.building-detail-spec-card > div {
    padding: 12px;
    border-radius: 10px;
    background: #f7f8f8;
}

.building-detail-spec-card dt {
    color: #8c979c;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.building-detail-spec-card dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-weight: 900;
}

.building-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.building-detail-gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #e9edef;
    box-shadow: 0 8px 24px rgba(19,27,31,.08);
    cursor: zoom-in;
}

.building-detail-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.building-detail-gallery-item:hover img { transform: scale(1.025); }

.building-detail-gallery-item span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(21,27,31,.82);
    color: #fff;
}

.building-detail-magazine-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.building-detail-magazine-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.building-detail-magazine-card:hover {
    transform: translateY(-3px);
    border-color: var(--yellow);
    box-shadow: 0 16px 36px rgba(19,27,31,.10);
}

.building-detail-magazine-cover {
    width: 120px;
    aspect-ratio: .73;
    overflow: hidden;
    border-radius: 10px;
    background: #eef1f2;
}

.building-detail-magazine-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.building-detail-magazine-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.building-detail-magazine-copy > span {
    display: block;
    margin-bottom: 5px;
    color: #aa7900;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.building-detail-magazine-copy > strong {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    line-height: 1.25;
}

.building-detail-magazine-copy p {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.45;
}

.building-detail-magazine-copy em {
    color: #9a6c00;
    font-size: .7rem;
    font-style: normal;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .building-detail-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .building-detail-quick-specs {
        grid-template-columns: repeat(2, 1fr);
    }

    .building-detail-magazine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .building-detail-hero-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        padding-top: 46px;
        padding-bottom: 52px;
    }

    .building-detail-main-photo {
        width: min(100%, 520px);
    }

    .building-detail-copy h1 {
        font-size: clamp(2.8rem, 13vw, 4.5rem);
    }

    .building-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .building-detail-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .building-detail-magazine-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .building-detail-quick-specs,
    .building-detail-spec-card,
    .building-detail-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .building-detail-magazine-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .building-detail-magazine-cover {
        width: 92px;
    }
}

@media (max-width: 480px) {
    .building-detail-section-heading { margin-top:30px;}
}

/* =========================================================
   BUILDING DETAIL — INLINE MAGAZINES + RELATED BUILDINGS
   ========================================================= */
.building-detail-info-grid { align-items: start; }
.building-detail-inline-magazines { min-width: 0; }
.building-detail-inline-magazines-heading { margin-bottom: 16px; }
.building-detail-inline-magazines-heading h2 { font-size: clamp(1.5rem, 2vw, 2.15rem); }
.building-detail-magazine-grid-inline { grid-template-columns: 1fr; }
.building-detail-magazine-grid-inline .building-detail-magazine-card { grid-template-columns: 105px minmax(0, 1fr); }
.building-detail-magazine-grid-inline .building-detail-magazine-cover { width: 105px; }
.building-detail-inline-empty { padding: 30px 18px; }

.building-related-section {
    background: radial-gradient(circle at 10% 10%, rgba(255,201,40,.08), transparent 24%), #f6f7f8;
}
.building-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.building-related-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}
.building-related-card:hover {
    transform: translateY(-4px);
    border-color: var(--yellow);
    box-shadow: 0 16px 36px rgba(19,27,31,.10);
}
.building-related-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #edf1f2;
}
.building-related-image img,
.building-related-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.building-related-category {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(21,27,31,.86);
    color: #fff;
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    backdrop-filter: blur(7px);
}
.building-related-body { padding: 16px; }
.building-related-body code {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 4px 7px;
    border-radius: 6px;
    background: #f1f3f4;
    color: #69767c;
    font-size: .62rem;
}
.building-related-body h3 {
    min-height: 48px;
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
}
.building-related-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 13px;
}
.building-related-meta span {
    padding: 6px 8px;
    border-radius: 7px;
    background: #f7f8f8;
    color: #69767c;
    font-size: .65rem;
    font-weight: 800;
}
.building-related-body > strong { color: #9a6c00; font-size: .7rem; }

@media (max-width: 1100px) {
    .building-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .building-detail-magazine-grid-inline .building-detail-magazine-card { grid-template-columns: 92px minmax(0, 1fr); }
    .building-detail-magazine-grid-inline .building-detail-magazine-cover { width: 92px; }
}
@media (max-width: 560px) {
    .building-related-grid { grid-template-columns: 1fr; }
}



/* CATEGORY + SUBCATEGORY */
.building-catalog-category small,
.building-related-category small{
    display:block;margin-top:2px;color:#ffd96b;font-size:.55rem;font-weight:800;
    text-transform:none;letter-spacing:0
}
.building-detail-taxonomy{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 22px}
.building-detail-taxonomy>span{display:inline-flex;gap:5px;align-items:center;padding:7px 10px;
    border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.06);
    color:#aebdc3;font-size:.68rem}
.building-detail-taxonomy strong{color:var(--yellow)}

.register-info::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../../images/buildings.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.08;

    pointer-events: none;
    z-index: 0;
}

.register-info > * {
    position: relative;
    z-index: 1;
}


.login-info::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../../images/buildings.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.08;

    pointer-events: none;
    z-index: 0;
}

.login-info > * {
    position: relative;
    z-index: 1;
}