/* IaaS: стили страницы. Общая визуальная система — assets/site.css. */

/* Дополнительные стили калькулятора IaaS. */
/* Разбивка ресурсов и итог в стиле калькулятора Cloud Server. */
.iaas-bill { margin-top: 26px; }
.iaas-bill > div:not(.hidden) { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; padding-block: 9px; }
.iaas-bill dt { color: #64748b; }
.iaas-bill dd { white-space: nowrap; font-weight: 500; color: #2c3e50; }
.iaas-total { margin-top: 18px; padding-top: 20px; margin-bottom: 20px; border-top: 1px solid #dce3ed; }
.iaas-total > strong { font-size: 42px; font-weight: 700; letter-spacing: -.055em; color: #2c3e50; line-height: 1.2; }
.iaas-total-label { font-size: 13px; color: #64748b; margin-bottom: 8px; }
.iaas-total-unit { font-size: 13px; color: #64748b; margin-left: 8px; }
.iaas-total .payment-period-total strong { font-size: 22px; font-weight: 700; white-space: nowrap; letter-spacing: -.02em; color: #2c3e50; line-height: 1.2; }
.iaas-total .payment-savings { font-size: 13px; line-height: 1.6; color: #287256; margin-top: 10px; }
.iaas-tax-note { font-size: 13px; color: #64748b; margin-top: 10px; }
@media (max-width: 480px) {
    .iaas-total > strong { font-size: 36px; }
}

/* Пропорции колонок как в калькуляторе Cloud Server. */
.iaas-page .iaas-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    box-shadow: 0 8px 30px #233a4c08;
    border: 1px solid #dce3ed;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 760px) {
    .iaas-page .iaas-config-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Отзывы: карусель и карточки. */
.iaas-page .iaas-review { display: grid; grid-template-columns: .35fr .65fr; border: 1px solid #dce3ed; border-radius: 16px; overflow: hidden; background: #fff; min-height: 310px; }
.iaas-review[hidden] { display: none; }
.iaas-review-person { display: flex; flex-direction: column; align-items: flex-start; padding: 36px; background: #2c3e50; color: #fff; }
.iaas-review-company { font-size: 12px; font-weight: 600; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; color: #cbd5e1; }
.iaas-review-quote { flex: 1; font-family: Georgia, serif; font-size: 90px; line-height: 1; margin-top: 22px; color: #a5b9cb; }
.iaas-review-name { font-size: 16px; font-weight: 600; }
.iaas-review-role { margin-top: 5px; font-size: 13px; color: #cbd5e1; }
.iaas-page .iaas-review-content { display: flex; flex-direction: column; justify-content: center; padding: 30px 36px; }
.iaas-review-topic { margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.iaas-page .iaas-review-content blockquote { margin: 0; line-height: 1.75; letter-spacing: -.015em; color: #475569; font-size: 18px; }
.iaas-review-controls { display: flex; align-items: center; gap: 16px; margin-top: 20px; position: relative; justify-content: center; }
/* Индикаторы как в iaas-tmp: анимируется сама кнопка от 8 до 28 px. */
.iaas-review-dots { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.iaas-review-dot { position: relative; flex-shrink: 0; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 9999px; background-color: #d1d5db; cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.iaas-review-dot::after { content: ''; position: absolute; inset: -12px -4px; }
.iaas-review-dot[aria-current="true"] { width: 28px; background-color: #2c3e50; }
.iaas-review-viewport { position: relative; }
.iaas-review-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%; background: #fff; color: #4b5563; box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; cursor: pointer; transform: translateY(-50%); transition: background-color .2s; }
.iaas-review-arrow svg { width: 24px; height: 24px; }
.iaas-review-prev { left: -24px; }
.iaas-review-next { right: -24px; }
.iaas-review-arrow:hover { background: #f9fafb; }
@media (min-width: 1440px) {
    .iaas-review-prev { left: -64px; }
    .iaas-review-next { right: -64px; }
}
@media (max-width: 767px) {
    .iaas-review-arrow { display: none; }
}
.iaas-reviews :focus-visible { outline: 2px solid #64748b; outline-offset: 4px; }
@media (max-width: 760px) {
    .iaas-page .iaas-review { grid-template-columns: 1fr; }
    .iaas-review-person { padding: 24px; }
    .iaas-review-quote { display: none; }
    .iaas-review-company { margin-bottom: 22px; }
    .iaas-review-controls { flex-wrap: wrap; gap: 8px; }
}

.iaas-review-window { overflow: hidden; border-radius: 16px; }
.iaas-reviews.is-ready .iaas-review-track { display: flex; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.iaas-reviews.is-ready .iaas-review { flex: 0 0 100%; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
    .iaas-reviews.is-ready .iaas-review-track { transition: none; }
    /* Как в эталоне, короткий переход индикатора сохраняется и в этом режиме. */
    .iaas-review-dot { transition: width .3s ease, background-color .3s ease !important; }
}

/* Композиция IaaS и дополнения к общим product-компонентам.
   Область .iaas-page сохраняет приоритет над общими стилями и изоляцию страницы. */
.iaas-page .product-section { padding-block: 68px; }
.iaas-page .product-hero-grid { grid-template-columns: 1.14fr 1fr; gap: 36px; }
.iaas-page .iaas-hero > .max-w-7xl { padding-block: 42px 52px; }
.iaas-page .product-hero-grid > .flex > p { max-width: 550px; font-size: 16px; line-height: 1.85; }
.iaas-page .iaas-hero-actions { display: flex; gap: 12px; }
.iaas-page .iaas-hero-actions > :is(a, button) { margin: 0; flex: 1; padding: 14px 12px; gap: 8px; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.iaas-page .iaas-hero-actions svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (min-width: 768px) {
    .iaas-page .iaas-hero-actions > a { flex: 0 1 calc(50% - 6px); }
    .iaas-page .iaas-hero-actions > button { flex: 0 0 auto; padding-inline: 10px; }
}
.iaas-page #technology > div { padding-block: 25px; }
.iaas-page #technology p { margin-bottom: 16px; }

/* Сценарии использования */
.iaas-page .iaas-scenarios .text-center { margin-bottom: 34px; }
.iaas-page .iaas-scenarios .section-subtitle { font-size: 15px; }
.iaas-page .iaas-scenario-grid { gap: 16px; }
.iaas-page .iaas-scenario-grid > div { padding: 24px; gap: 18px; border-color: #dfe5ed; border-radius: 12px; background: #fff; }
.iaas-page .iaas-scenario-grid > div > div:first-child { width: 42px; height: 42px; border-radius: 10px; border-color: #dce3ef; background: #f7f8fc; }
.iaas-page .iaas-scenario-grid .card-title { font-size: 16px; margin-bottom: 8px; color: #2c3e50; }
.iaas-page .iaas-scenario-grid .card-text { font-size: 14px; line-height: 1.75; color: #627287; }

/* Калькулятор: контейнер и помощь с подбором */
.iaas-page #calculator .section-subtitle { max-width: 720px; font-size: 15px; }
.iaas-page .iaas-calc-help { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 26px; font-size: 14px; color: #627287; }
.iaas-page .iaas-calc-help a { color: #466c9f; font-weight: 600; }
.iaas-page .iaas-calc-help a:hover { text-decoration: underline; }

/* Инфраструктура и ответственность */
.iaas-page #infra .product-copy { margin-top: 18px; }
.iaas-page #infra .product-feature-list { gap: 22px; }
.iaas-page #infra .product-figure { min-height: 530px; }
.iaas-page .iaas-responsibility { padding: 0; border: 0; gap: 20px; margin: 0 0 24px; }
.iaas-page .iaas-responsibility > div { padding: 28px; border: 1px solid #dce3ed; border-radius: 12px; background: #fff; }
.iaas-page .iaas-responsibility .product-icon { margin-bottom: 20px; }
.iaas-page .iaas-responsibility h3 { font-size: 18px; }

/* Отзывы, FAQ и заявка */
.iaas-page #reviews .product-section-head { flex-direction: row; align-items: flex-end; }
.iaas-page #faq a { color: #466c9f; }
.iaas-page #contact .section-subtitle { font-size: 15px; }

/* Адаптивная композиция */
@media (max-width: 960px) {
 .iaas-page .product-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
 .iaas-page .product-section { padding-block: 52px; }
 .iaas-page .iaas-hero-actions { flex-direction: column; }
 .iaas-page .iaas-scenario-grid > div { padding: 22px; }
 .iaas-page .iaas-responsibility { grid-template-columns: 1fr; }
 .iaas-page #reviews .product-section-head { flex-direction: column; align-items: flex-start; }
}

/* Панель платформы в hero — композиция main-fable5.1. */
.iaas-page .iaas-platform-panel {
    min-width: 0;
    padding: 24px;
    color: #fff;
    background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.iaas-platform-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.iaas-platform-heading h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: #dbeafe; }
.iaas-platform-heading > a { font-size: 11px; color: #bfdbfeb3; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.iaas-platform-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.iaas-platform-metrics > div { padding: 12px; border: 1px solid #ffffff1a; border-radius: 12px; background: #ffffff0d; }
.iaas-platform-metrics p { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #bfdbfe99; }
.iaas-platform-metrics strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; }
.iaas-platform-bar { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 9999px; background: #ffffff1f; }
.iaas-platform-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); }
.iaas-platform-specs > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; font-size: 14px; }
.iaas-platform-specs > div + div { border-top: 1px solid #ffffff14; }
.iaas-platform-specs dt { display: flex; align-items: center; gap: 8px; color: #bfdbfecc; }
.iaas-platform-specs svg { flex-shrink: 0; color: #93c5fd; }
.iaas-platform-specs dd { margin: 0; font-weight: 500; text-align: right; }
.iaas-platform-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; font-weight: 600; color: #bfdbfe; }
.iaas-platform-heading > a:hover, .iaas-platform-link:hover { color: #fff; }
.iaas-platform-panel a:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 4px; }
@media (min-width: 961px) and (max-width: 1150px) {
    .iaas-platform-specs > div { align-items: flex-start; font-size: 12px; }
    .iaas-platform-metrics { gap: 8px; }
    .iaas-platform-metrics > div { padding: 10px 8px; }
}