/* Адаптивность: ≤1200, ≤850, ≤570, 571–700 px. Подключается последним (каскад как в эталоне) */
@media (max-width:1200px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .hero-grid {
    grid-template-columns:minmax(335px,.82fr) minmax(0,1.18fr);
    gap:20px;
  }
  .hero h1 {
    font-size:54px;
  }
  .device-window {
    height:350px;
    grid-template-columns:78px 1fr;
  }
  .device-sidebar {
    padding:8px 5px;
  }
  .side-item {
    font-size:7px;
  }
  .sidebar-brand {
    font-size:9px;
  }
  .device-cards {
    grid-template-rows:215px 90px;
    gap:5px;
  }
  .device-chart {
    padding:8px;
  }
  .line-graph {
    height:100px;
  }
  .ui-big {
    font-size:20px;
  }
  .ui-green {
    font-size:13px;
  }
  .device-rates>div {
    padding:16px 0 11px;
  }
  .device-rates strong {
    font-size:12px;
  }
  .device-rates span:not(.panel-caption) {
    font-size:9px;
  }
  .device-income,.device-split,.device-tickers {
    padding:7px;
  }
  .donut-large {
    width:57px;
    height:57px;
    flex-basis:57px;
  }
  .donut-large:after {
    inset:13px;
  }
  .legend {
    font-size:6px;
  }
  .income-amount {
    font-size:13px;
  }
  .bar-graph {
    height:36px;
  }
  .device-tickers {
    display:none;
  }
  .device-cards {
    grid-template-columns:1.3fr 1fr .72fr;
  }
  .device-split {
    grid-column:2/4;
  }
  .device-income {
    grid-column:1;
  }
  .section-grid {
    gap:38px;
  }
  .benefit {
    padding-inline:9px;
  }
  .benefit h2 {
    font-size:11px;
  }
  .benefit p {
    font-size:10px;
  }
  .benefit-symbol {
    width:37px;
    height:37px;
    flex-basis:37px;
  }
  .assets-inner {
    display:block;
  }
  .assets-inner .overline {
    margin-bottom:14px;
  }
}

@media (max-width:850px) {
  .wrap {
    width:calc(100% - 44px);
  }
  .header-inner {
    height:68px;
    gap:15px;
  }
  .primary-nav {
    display:none;
  }
  .auth-nav .about {
    display:none;
  }
  .mobile-about {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#82e6f4;
    font-size:12px;
    margin-top:13px;
  }
  .brand {
    font-size:19px;
  }
  .hero {
    padding:25px 0 58px;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:45px;
  }
  .hero-copy {
    max-width:600px;
  }
  .hero h1 {
    font-size:60px;
  }
  .hero-desc {
    font-size:17px;
  }
  .hero-art {
    max-width:740px;
    margin-inline:auto;
    width:100%;
  }
  .device-window {
    height:414px;
    grid-template-columns:95px 1fr;
  }
  .device-cards {
    grid-template-rows:250px 114px;
  }
  .device-tickers {
    display:block;
  }
  .device-split {
    grid-column:auto;
  }
  .ui-big {
    font-size:23px;
  }
  .ui-green {
    font-size:16px;
  }
  .device-rates>div {
    padding:24px 0 14px;
  }
  .device-rates strong {
    font-size:15px;
  }
  .device-rates span:not(.panel-caption) {
    font-size:10px;
  }
  .device-income,.device-split,.device-tickers {
    padding:10px;
  }
  .donut-large {
    width:78px;
    height:78px;
    flex-basis:78px;
  }
  .donut-large:after {
    inset:18px;
  }
  .legend {
    font-size:7px;
  }
  .income-amount {
    font-size:17px;
  }
  .bar-graph {
    height:55px;
  }
  .device-cards {
    grid-template-columns:1.7fr 1.05fr .75fr;
  }
  .device-tickers {
    grid-column:auto;
  }
  .device-split {
    grid-column:auto;
  }
  .device-income {
    grid-column:auto;
  }
  .benefit {
    padding:16px 12px;
  }
  .value-grid {
    grid-template-columns:1fr 1fr;
  }
  .benefit:nth-child(2) {
    border-right:0;
  }
  .benefit:nth-child(-n+2) {
    border-bottom:1px solid rgba(10,131,154,.28);
  }
  .section-grid,.section-grid.reverse {
    grid-template-columns:1fr;
    gap:30px;
  }
  .section-grid.reverse .right-feature {
    order:-1;
  }
  .section {
    padding:70px 0;
  }
  .bottom-grid {
    grid-template-columns:1fr 1fr;
  }
  .bottom-copy {
    grid-column:1/-1;
  }
  .bottom-copy h2 {
    max-width:700px;
  }
  /* Восемь категорий (LANDING-02): 4 в ряд; подписи переносятся внутри плитки, чтобы не выходить за её край */
  .assets-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .asset {
    white-space:normal;
    line-height:1.25;
  }
}

@media (max-width:570px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .header-inner {
    gap:7px;
    height:67px;
  }
  .brand {
    font-size:16px;
    gap:5px;
  }
  .brand .whale {
    width:24px;
    height:23px;
  }
  .auth-nav {
    gap:6px;
  }
  .button {
    min-height:36px;
    font-size:10px;
    padding:0 9px;
    gap:4px;
    border-radius:6px;
  }
  .solid .icon {
    display:none;
  }
  .hero {
    padding:28px 0 35px;
  }
  .hero h1 {
    font-size:clamp(41px,10vw,53px);
    margin:20px 0 14px;
  }
  .hero-desc {
    font-size:15px;
    margin-bottom:23px;
  }
  .hero-copy {
    padding:0;
  }
  .hero-grid {
    gap:31px;
  }
  .beta-panel {
    padding:17px 14px;
  }
  .beta-panel ul {
    grid-template-columns:1fr;
    row-gap:9px;
  }
  .beta-panel li {
    font-size:11.5px;
  }
  .device {
    width:665px;
    transform:scale(.55)!important;
    transform-origin:left top;
    margin-bottom:-200px;
  }
  .hero-art {
    display:block;
    height:277px;
    width:100%;
    overflow:visible;
  }
  .device:before {
    display:none;
  }
  .device-window {
    height:410px;
  }
  .value-grid {
    grid-template-columns:1fr 1fr;
  }
  .benefit {
    gap:8px;
    padding:15px 8px;
  }
  .benefit-symbol {
    width:31px;
    height:31px;
    flex-basis:31px;
  }
  .benefit-symbol .icon {
    width:17px;
    height:17px;
  }
  .benefit h2 {
    font-size:11px;
    margin:0 0 3px;
  }
  .benefit p {
    font-size:9.5px;
  }
  .section {
    padding:58px 0;
  }
  .section h2 {
    font-size:36px;
  }
  .section-text {
    font-size:14px;
  }
  .check-list li {
    font-size:12px;
  }
  .feature-panel {
    padding:8px;
  }
  .feature-main-grid {
    grid-template-columns:1.6fr .85fr;
    gap:6px;
  }
  .kpi-window {
    padding:11px;
  }
  .kpi-rate .metric {
    padding:11px 8px;
    min-height:68px;
  }
  .kpi-rate strong {
    font-size:15px;
  }
  .kpi-rate .metric span {
    font-size:9px;
  }
  .large-figure {
    font-size:20px;
  }
  .main-window-graph {
    height:144px!important;
  }
  .feature-bottom-grid {
    gap:6px;
    margin-top:6px;
  }
  .feature-card {
    min-height:117px;
    padding:9px;
  }
  .wide-bars {
    gap:6px;
    height:65px;
  }
  .wide-donut {
    gap:6px;
  }
  .wide-donut .donut-large {
    width:63px;
    height:63px;
    flex-basis:63px;
  }
  .wide-donut .donut-large:after {
    inset:14px;
  }
  .wide-donut .legend {
    font-size:8px;
    gap:6px;
  }
  .div-app {
    padding:13px;
    min-height:0;
  }
  .div-top h3 {
    font-size:17px;
  }
  .div-chips {
    gap:5px;
    margin:14px 0;
  }
  .div-chips span {
    font-size:9px;
    padding:5px 7px;
  }
  .div-bottom {
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .div-pane {
    padding:10px;
  }
  .div-pane h4 {
    font-size:10px;
    margin-bottom:12px;
  }
  .div-top-line strong {
    font-size:21px;
  }
  .div-top-line small {
    font-size:8px;
  }
  .progress-row {
    margin-top:12px;
    gap:4px;
    font-size:8px;
  }
  .progress-row label {
    min-width:62px;
  }
  .bottom-grid {
    grid-template-columns:1fr;
  }
  .bottom-copy {
    grid-column:auto;
  }
  .bottom-copy h2 {
    font-size:35px;
  }
  .section.section-goals {
    padding:58px 0;
  }
  .assets-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .asset {
    min-height:64px;
    font-size:10px;
  }
  .asset-icon {
    width:25px;
    height:25px;
  }
  .asset-icon .icon {
    width:16px;
    height:16px;
  }
  .footer-inner {
    flex-direction:column;
    align-items:flex-start;
  }
  .footer small {
    text-align:left;
  }
}

/* Восемь категорий: на 571–700 px четыре колонки не вмещают подпись «Драгоценные металлы» — две колонки (на ≤570 так же) */
@media (min-width:571px) and (max-width:700px) {
  .assets-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:571px) and (max-width:700px) {
  .device {
    transform:scale(.8)!important;
    transform-origin:top left;
    width:720px;
    margin-bottom:-80px;
  }
  .hero-art {
    height:370px;
  }
}

@media (max-width:570px) {
  .hero .hero-art::before {
    filter:blur(30px);
  }
  .beta-panel li {
    font-size:12px;
  }
}

/* Доработка эталона для узких экранов (отклонение от Premium v3, см. LANDING_01_REPORT.md).
   В эталоне «ноутбук» в hero масштабируется фиксированно (.55 при ≤570 px, .8 при 571–700 px) и на 320–375 px и 571–640 px
   обрезается справа. Здесь масштаб подбирается по ширине экрана; высота блока считается от масштаба. */
@media (max-width:570px) {
  .hero-art { --dev-s: .55; height: calc(503.64px * var(--dev-s)); }
  .device { transform: scale(var(--dev-s)) !important; }
}
@media (max-width:389px) { .hero-art { --dev-s: .515; } }
@media (max-width:374px) { .hero-art { --dev-s: .49; } }
@media (max-width:359px) { .hero-art { --dev-s: .43; } }
@media (min-width:571px) and (max-width:700px) {
  .hero-art { --dev-s: .8; height: calc(462.5px * var(--dev-s)); }
  .device { transform: scale(var(--dev-s)) !important; }
}
@media (min-width:571px) and (max-width:640px) { .hero-art { --dev-s: .7; } }

/* ≤374 px: в эталоне шапка (логотип + «Войти» + «Зарегистрироваться бесплатно») шире экрана; подпись кнопки переносится на две строки */
@media (max-width:374px) {
  .auth-nav .solid { white-space: normal; line-height: 1.15; text-align: center; max-width: 116px; }
}