/* Page-specific стили dc.html (дата-центр). Общие компоненты — в assets/site.css.
   Контейнер страницы переведён на общий .site-wrap (те же 1280px и паддинги),
   поэтому локальный .container-custom здесь больше не нужен. */
.dc-page main .grid > * { min-width: 0; }
.dc-hero { position: relative; isolation: isolate; overflow: hidden; background: #192b3d; }
.dc-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dc-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,29,45,.94) 0%, rgba(26,37,48,.84) 44%, rgba(26,37,48,.35) 100%); z-index: -1; }
.dc-grid { position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: linear-gradient(#a8c3e326 1px, transparent 1px), linear-gradient(90deg, #a8c3e326 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent, black); z-index: -1; }
.dc-hero-content { padding-block: 28px 64px; }
.dc-hero .site-breadcrumb { padding-top: 0; margin-bottom: 34px; }
.dc-hero .product-hero-grid { grid-template-columns: 1.25fr 1fr; gap: 64px; }
.dc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.dc-badges span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid #ffffff26; border-radius: 6px; color: #cbd9ed; background: #ffffff06; font-size: 12px; }
.dc-badges svg { width: 14px; height: 14px; }
.dc-intro { max-width: 600px; color: #c3d1e2; font-size: 16px; line-height: 1.85; margin-top: 24px; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dc-ghost { color: #fff; border: 1px solid #ffffff40; background: #ffffff05; }
.dc-ghost:hover { background: #ffffff15; }
.dc-hero-note { display: flex; align-items: center; gap: 8px; color: #aabed5; font-size: 13px; margin-top: 22px; }
.dc-panel { border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 28px; background: rgba(255,255,255,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 60px #0b12262b; }
.dc-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; }
.dc-panel-heading p { color: #bacbe0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dc-panel-heading span { color: #aacbbb; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.dc-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #9ac5b0; }
.dc-panel-core { text-align: center; padding: 23px 14px; background: #768bc818; border: 1px solid #a8b4ec66; border-radius: 10px; }
.dc-panel-core svg { width: 26px; height: 26px; color: #b9c8ed; margin: 0 auto 12px; }
.dc-panel-core strong { display: block; color: white; font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
.dc-panel-core span { display: block; margin-top: 5px; color: #b8cbe1; font-size: 13px; }
.dc-panel-systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dc-panel-systems > div { text-align: center; border: 1px solid #ffffff24; border-radius: 9px; padding: 17px 5px; background: #ffffff05; }
.dc-panel-systems svg { width: 19px; height: 19px; color: #b9c8ed; margin: 0 auto 10px; }
.dc-panel-systems strong { display: block; color: white; font-size: 21px; font-weight: 600; }
.dc-panel-systems span { display: block; margin-top: 3px; color: #b8cbe1; font-size: 12px; }
.dc-panel-footer { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #ffffff20; font-size: 13px; color: #c0d0e3; }
.dc-panel-footer svg { width: 18px; height: 18px; flex-shrink: 0; color: #b4c8e6; }
.dc-location-photo { position: relative; min-height: 510px; height: 100%; border-radius: 14px; overflow: hidden; background: #263a4e; }
.dc-location-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-location-photo::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #142536f5); }
.dc-location-photo figcaption { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; color: white; }
.dc-location-photo strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.dc-location-photo p { color: #c4d2e3; font-size: 13px; margin-top: 8px; }
.dc-feature-card { background: #fff; border: 1px solid var(--site-border); border-radius: 12px; padding: 26px; transition: border-color .2s; }
.dc-feature-card:hover { border-color: #becbde; }
.dc-feature-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dce3ef; border-radius: 10px; background: #f4f6fb; color: #6576b5; margin-bottom: 22px; }
.dc-feature-icon svg { width: 21px; height: 21px; }
.dc-feature-card h3 { font-size: 17px; font-weight: 600; line-height: 1.4; }
.dc-feature-card p, .dc-feature-card li { color: #637286; font-size: 13px; line-height: 1.8; }
.dc-feature-card li svg { color: #7487ae; margin-top: 4px; }
.dc-passport-card { background: white; border: 1px solid var(--site-border); border-radius: 12px; padding: 28px; }
.dc-passport-card h3 { font-size: 17px; font-weight: 600; }
.spec-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid #e8edf3; font-size: 13px; line-height: 1.6; }
.spec-row:last-child { border-bottom: none; }
.spec-row .k { color: #718096; }
.spec-row .v { color: #2c3e50; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.dc-rack-figure { position: relative; align-self: stretch; justify-self: center; width: 100%; max-width: 360px; min-height: 510px; border-radius: 14px; overflow: hidden; background: #182a3b; }
.dc-rack-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-services > a { display: flex; flex-direction: column; border-radius: 12px; border-color: var(--site-border); }
.dc-services > a:hover { box-shadow: none; border-color: #becbde; }
.dc-services > a > span { margin-top: auto; padding-top: 8px; color: #5269aa; }
.dc-faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
.dc-faq { border-bottom: 1px solid var(--site-border); }
.dc-faq:first-child { border-top: 1px solid var(--site-border); }
.dc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; list-style: none; color: #2c3e50; font-size: 14px; font-weight: 600; }
.dc-faq summary::-webkit-details-marker { display: none; }
.dc-faq summary::after { content: '+'; font-size: 24px; color: #7487ae; font-weight: 400; flex-shrink: 0; }
.dc-faq[open] summary::after { content: '−'; }
.dc-faq p { padding: 0 24px 24px 0; font-size: 14px; line-height: 1.85; color: #64748b; }
@media (max-width: 1100px) { .dc-hero .product-hero-grid { gap: 30px; } }
@media (max-width: 960px) {
    .dc-hero .product-hero-grid, .dc-faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .dc-panel { max-width: 600px; }
    .dc-location-photo { min-height: 430px; }
}
@media (max-width: 767px) {
    .dc-hero-content { padding-block: 24px 40px; }
    .dc-intro { font-size: 14px; }
    .dc-panel { padding: 22px 20px; }
    .dc-actions { flex-direction: column; }
    .dc-location-photo { min-height: 380px; }
    .dc-passport-card { padding: 22px; }
    .spec-row { gap: 12px; font-size: 13px; }
    .dc-rack-figure { min-height: 420px; }
}
@media (max-width: 380px) {
    .spec-row { grid-template-columns: 1fr; gap: 5px; }
    .spec-row .v { text-align: left; }
    #location .grid-cols-2 { grid-template-columns: 1fr; }
    .dc-panel-systems { grid-template-columns: 1fr; }
    .dc-panel-systems > div { display: flex; align-items: center; gap: 10px; padding: 12px; }
    .dc-panel-systems svg { margin: 0; flex-shrink: 0; }
    .dc-panel-systems strong { font-size: 17px; }
    .dc-panel-systems span { margin: 0 0 0 auto; }
}