/*
* Online Oil — общие стили, первый экран, роли, экологичность и шапка.
* Порядок правил сохранён: он определяет приоритет адаптивных стилей.
* Пути к изображениям и существующие имена классов сохранены.
*/

/* 01. Переменные и базовые настройки */

:root {
    --green:  #0bb58b;
    --green2:  #0ad2a2;
    --deep:  #032b28;
    --gold:  #f6b719;
    --white:  #f8fbfa;
    --muted:  rgba(255,255,255,.74);
}

* {
    box-sizing:  border-box;
}

html,
body {
    margin:  0;
    font-family:  Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:  #fff;
    color:  #fff;
}

/* 02. Шапка и навигация */

.topbar {
    height:  84px;
    align-items:  center;
    justify-content:  space-between;
    color:  #0c2b2b;
}

.brand {
    display:  flex;
    align-items:  center;
    gap:  12px;
    text-decoration:  none;
    color:  #0c2b2b;
    font-size:  22px;
    font-weight:  800;
}

.brand img {
    width:  44px;
    height:  52px;
    object-fit:  contain;
}

nav {
    display:  flex;
    align-items:  center;
    gap:  22px;
}

nav a {
    color:  #4d6868;
    text-decoration:  none;
    font-weight:  600;
}

/* 03. Основной экран и текст */

.hero {
    min-height:  calc(100vh - 84px);
    background:  #04332e url("assets/hero-bg.svg") center/cover no-repeat;
    overflow:  hidden;
    position:  relative;
}

.hero-inner {
    width:  min(1500px,95vw);
    min-height:  840px;
    margin:  0 auto;
    display:  grid;
    grid-template-columns:  45% 55%;
    gap:  0;
    align-items:  center;
    position:  relative;
}

.copy {
    padding-left:  24px;
    z-index:  3;
}

.eyebrow {
    font-size:  14px;
    letter-spacing:  .28em;
    color:  rgba(255,255,255,.74);
    margin-bottom:  24px;
}

h1 {
    font-size:  clamp(46px,4.2vw,72px);
    line-height:  .98;
    margin:  0 0 30px;
    font-weight:  850;
    letter-spacing:  -.04em;
}

h1 span {
    color:  #13c79a;
}

.lead {
    font-size:  22px;
    line-height:  1.5;
    margin:  0 0 34px;
    color:  rgba(255,255,255,.84);
}

/* 04. Преимущества и контурные иконки */

.benefits {
    display:  flex;
    gap:  28px;
    margin:  26px 0 38px;
}

.benefit {
    min-width:  94px;
    text-align:  center;
    position:  relative;
}

.benefit:not(:last-child)::after {
    content:  "";
    position:  absolute;
    right:  -15px;
    top:  26px;
    width:  1px;
    height:  62px;
    background:  rgba(255,255,255,.18);
}

.benefit b {
    display:  grid;
    place-items:  center;
    width:  56px;
    height:  56px;
    margin:  0 auto 10px;
    border-radius:  13px;
    border:  1px solid rgba(55,255,206,.35);
    background:  linear-gradient( 145deg, rgba(16,137,110,.28), rgba(1,47,42,.55) );
    box-shadow:  inset 0 1px 0 rgba(255,255,255,.13), 0 0 24px rgba(0,255,199,.08);
    font-size:  27px;
}

.benefit span {
    font-size:  15px;
    line-height:  1.25;
    color:  #f4f8f7;
}

.benefit b svg {
    display:  block;
    width:  34px;
    height:  34px;
    fill:  none;
    stroke:  #eafff7;
    stroke-width:  1.8;
    stroke-linecap:  round;
    stroke-linejoin:  round;
    filter:  drop-shadow( 0 0 3px rgba(100, 255, 210, .18) );
}

.benefit {
    transition:  transform 0.3s ease;
}

.benefit:hover {
    transform:  scale(1.09);
}

/* 05. Кнопки и подпись */

.btn {
    display:  inline-flex;
    align-items:  center;
    justify-content:  center;
    text-decoration:  none;
    border-radius:  12px;
    transition:  .2s ease;
}

.btn-ghost {
    padding:  14px 22px;
    border:  1px solid #c9d7d5;
    color:  #0c2b2b;
}

.btn-login {
    padding:  14px 22px;
    background:  #0a8b6f;
    color:  #fff;
}

.actions {
    display:  flex;
    gap:  18px;
    align-items:  center;
}

.btn-gold {
    position: relative; /* Обязательно для позиционирования псевдоэлемента */
    z-index: 1; /* Чтобы текст оставался поверх нового фона */
    overflow: hidden; /* Чтобы анимация не выходила за границы кнопки */

    min-width: 270px;
    padding: 18px 26px;
    background: linear-gradient(135deg, #ffd54a, #f0a900); /* Начальный золотой */
    color: #13211f;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 12px 28px rgba(246,183,25,.28);
    border: none;
    cursor: pointer;

    /* Плавно анимируем тень и трансформацию (если будет) */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* Создаем скрытый слой с более ярким градиентом для ховера */
.btn-gold::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Сюда добавьте цвета, которые хотите видеть при наведении */
    background: linear-gradient(135deg, #ffe17d, #ffc229); 
    z-index: -1; /* Прячем под текст */
    opacity: 0; /* Изначально скрыт */
    transition: opacity 0.3s ease; /* Плавно меняем прозрачность за 0.3 сек */
}

/* Эффекты при наведении */
.btn-gold:hover {
    /* Опционально: можно слегка усилить тень при наведении */
    box-shadow: 0 14px 32px rgba(246,183,25,.4); 
}

.btn-gold:hover::before {
    opacity: 1; /* Проявляем яркий градиент */
}


.btn-green {
    position: relative; /* Обязательно для позиционирования псевдоэлемента */
    z-index: 1; /* Чтобы текст оставался поверх нового фона */
    overflow: hidden; /* Чтобы анимация не выходила за границы кнопки */
    
    min-width: 270px;
    padding: 18px 26px;
    background: linear-gradient(#13c79a, #00785a); /* Начальный градиент */
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    border: none; /* Убираем дефолтную рамку, если это тег <button> */
    cursor: pointer;
    
    /* Добавляем плавность для трансформации и прозрачности */
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

/* Создаем скрытый верхний слой со вторым градиентом */
.btn-green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#0fe6b0, #019e77); /* Градиент при наведении */
    z-index: -1; /* Прячем под текст, но оставляем над основным фоном */
    opacity: 0; /* Изначально он полностью прозрачный */
    transition: opacity 0.3s ease; /* Плавно меняем прозрачность за 0.3 секунды */
}

/* Эффекты при наведении */
.btn-green:hover {
    transform: scale(1.03); /* Пример трансформации, раз она у вас была */
}

.btn-green:hover::before {
    opacity: 1; /* Делаем верхний градиент видимым */
}


.btn-gold span {
    font-size:  26px;
    margin-left:  20px;
}

.btn-how {
    min-width:  560px;
    padding:  17px 25px;
    border:  1px solid rgba(255,255,255,.7);
    color:  #fff;
    font-weight:  700;
    font-size:  18px;
    background:  rgba(1,26,24,.25);
}

.btn-how i {
    font-style:  normal;
    border:  1px solid #fff;
    border-radius:  50%;
    width:  28px;
    height:  28px;
    display:  grid;
    place-items:  center;
    margin-right:  12px;
    font-size:  12px;
}

.trust {
    margin-top:  16px;
    color:  rgba(255,255,255,.72);
    font-size:  14px;
}

/* 06. Карточки: стекло, изображения и базовое расположение */

.cards-stage {
    position:  relative;
    width:  100%;
    max-width:  830px;
    height:  800px;
    min-width:  0;
    margin-left:  -10px;
}

.glass-card {
    position:  absolute;
    width:  280px;
    min-height:  315px;
    padding:  26px 26px 28px;
    background:  linear-gradient( 145deg, rgba(118, 255, 207, .18), rgba(12, 123, 92, .12) 38%, rgba(0, 35, 29, .32) );
    border:  1px solid rgba(145, 255, 225, .95);
    border-radius:  24px;
    backdrop-filter:  blur(5px);
    -webkit-backdrop-filter:  blur(5px);
    overflow:  visible;
    box-shadow:  inset 0 1px 3px rgba(225, 255, 245, .40), inset 0 -2px 9px rgba(0, 255, 200, .32), 0 0 5px rgba(0, 255, 200, .28), 0 0 20px rgba(0, 240, 185, .19), 0 18px 38px rgba(0, 0, 0, .22);
}

.glass-card h3 {
    font-weight:  820;
    letter-spacing:  -.02em;
    font-size:  21px;
    line-height:  1.15;
    margin:  7px 0 12px;
}

.glass-card p {
    margin:  0;
    font-size:  16px;
    color:  rgba(255, 255, 255, .87);
    line-height:  1.4;
}

.asset {
    width:  220px;
    height:  138px;
    object-fit:  contain;
    object-position:  center;
    border-radius:  18px;
    display:  block;
    margin:  -10px auto 8px;
    max-width:  100%;
    filter:  drop-shadow(0 9px 13px rgba(0, 0, 0, .22));
}

.asset-ticket {
    object-position:  50% 48%;
}

.asset-card {
    object-position:  50% 52%;
    transform:  scale(1.6);
    transform-origin:  center;
}

.asset-cash {
    object-position:  50% 50%;
    transform:  scale(1.6);
    transform-origin:  center;
}

.card-1 {
    top:  30px;
    left:  -100px;
    width:  270px;
    min-height:  310px;
    transform:  rotate(-4deg) scale(.90);
    z-index:  1;
}

.card-2 {
    top:  155px;
    left:  165px;
    width:  292px;
    min-height:  330px;
    transform:  rotate(2.5deg) scale(.96);
    z-index:  2;
}

/* 07. Основная карточка Online Oil */

.card-main {
    background:  linear-gradient( 135deg, rgba(134, 255, 201, .24), rgba(5, 119, 85, .17) 35%, rgba(0, 28, 24, .48) 78%, rgba(0, 153, 117, .22) );
    border-color:  #9affdf;
    box-shadow:  inset 0 1px 4px rgba(235, 255, 245, .48), inset -2px -3px 12px rgba(0, 255, 200, .48), 2px 3px 7px rgba(0, 255, 200, .40), 0 0 27px rgba(0, 245, 185, .24), 0 20px 42px rgba(0, 0, 0, .25);
}

.main-logo {
    object-fit:  contain;
    display:  block;
    filter:  drop-shadow(0 12px 20px rgba(0,0,0,.22));
    width:  122px;
    height:  132px;
    margin:  0 auto 8px;
}

.card-main h2 {
    text-align:  center;
    margin:  0 0 7px;
    line-height:  1.05;
    font-size:  36px;
    letter-spacing:  -.04em;
    font-style:  normal;
}

.card-main > p {
    text-align:  center;
    line-height:  1.4;
    font-size:  19px;
    font-style:  normal;
}

.card-main ul {
    list-style:  none;
    padding:  0;
    margin:  18px 0 0;
}

.card-main li {
    position:  relative;
    padding-left:  30px;
    line-height:  1.2;
    color:  #eefbf7;
    font-size:  14px;
    margin:  13px 0;
}

.card-main li::before {
    content:  "✓";
    position:  absolute;
    left:  0;
    top:  -2px;
    width:  20px;
    height:  20px;
    border-radius:  50%;
    color:  #06362d;
    display:  grid;
    place-items:  center;
    font-weight:  900;
    background:  linear-gradient( 135deg, #65ffe0, #00bd98 );
    box-shadow:  0 0 7px rgba(0, 255, 194, .16);
}

/* 08. Золотые блики */

.card-main::before,
.card-main::after {
    content:  "";
    position:  absolute;
    z-index:  5;
    width:  160px;
    height:  60px;
    background:  radial-gradient( ellipse 65px 2px at center, #fffff0 0%, #fff8b0 25%, rgba(255, 220, 75, .85) 50%, transparent 100% ), radial-gradient( ellipse 65px 20px at center, rgba(255, 233, 100, .55) 0%, rgba(255, 209, 40, .22) 40%, transparent 100% );
    background-position:  center;
    background-repeat:  no-repeat;
    background-size:  100% 100%;
    filter:  drop-shadow( 0 0 6px rgba(255, 224, 80, .55) );
    pointer-events:  none;
}

.card-main::before {
    top:  -30px;
    left:  50%;
    transform:  translateX(-50%);
}

.card-main::after {
    top:  25%;
    left:  -80px;
    transform:  rotate(90deg);
}

/* 09. Адаптация и светящиеся дуги */

@media (max-width:1280px) {
    .hero-inner {
        grid-template-columns:  46% 54%;
        width:  min(1240px,96vw);
    }

    .copy {
        padding-left:  10px;
    }

    .cards-stage {
        transform:  scale(.88);
        transform-origin:  left center;
        margin-left:  -22px;
    }
}

@media (max-width:1100px) {
    .hero-inner {
        grid-template-columns:  1fr;
        min-height:  auto;
        padding:  70px 0 30px;
    }

    .cards-stage {
        height:  760px;
        width:  830px;
        max-width:  none;
        transform:  scale(.88);
        transform-origin:  top left;
        margin:  35px auto 0;
    }

    .copy {
        padding:  0 24px;
    }

    .topbar {
        padding:  0 24px;
    }

    .hero {
        overflow-x:  hidden;
    }
}

@media (max-width:720px) {
    .topbar {
        height:  auto;
        padding:  14px 18px;
        gap:  14px;
    }

    .brand span {
        display:  none;
    }

    nav {
        gap:  8px;
    }

    nav > a:first-child {
        display:  none;
    }

    .btn-ghost {
        padding:  10px 12px;
        font-size:  13px;
    }

    .btn-login {
        padding:  10px 12px;
        font-size:  13px;
    }

    .hero-inner {
        width:  100%;
        padding:  50px 18px 30px;
    }

    .copy {
        padding:  0;
    }

    .lead br {
        display:  none;
    }

    .benefits {
        display:  grid;
        grid-template-columns:  repeat(2,1fr);
        gap:  18px;
    }

    .benefit::after {
        display:  none;
    }

    .actions {
        flex-direction:  column;
        align-items:  stretch;
    }

    .btn-gold {
        min-width:  0;
        width:  100%;
    }

    .btn-how {
        min-width:  0;
        width:  100%;
    }

    .cards-stage {
        height:  auto;
        width:  100%;
        max-width:  none;
        display:  grid;
        gap:  20px;
        transform:  none;
        margin:  50px 0 0;
    }

    .glass-card {
        position:  relative;
        top:  auto !important;
        left:  auto !important;
        transform:  none !important;
        width:  100% !important;
        min-height:  0;
        padding:  24px;
        overflow:  visible;
    }

    .asset {
        width:  210px;
        height:  132px;
    }
}

@media (min-width: 1101px) {
    .cards-stage {
        height:  800px;
        isolation:  isolate;
    }

    .glass-card {
        padding:  20px 22px 24px;
        transform-origin:  center;
    }

    .card-1 {
        top:  22px;
        left:  -9%;
        width:  238px;
        min-height:  270px;
        transform:  rotate(-2deg);
    }

    .card-2 {
        top:  135px;
        left:  15%;
        width:  250px;
        min-height:  270px;
        transform:  rotate(-2deg);
    }

    .asset {
        width:  210px;
        height:  133px;
        margin:  -7px auto 7px;
    }

    .cards-stage::before {
        content:  "";
        position:  absolute;
        inset:  0;
        z-index:  0;
        pointer-events:  none;
        background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath d='M155 80 Q255 57 310 172 M357 204 Q464 169 522 305 M565 350 Q650 355 686 452' stroke='%2300ffc3' stroke-width='7' opacity='.48' filter='url(%23g)'/%3E%3Cpath d='M155 80 Q255 57 310 172 M357 204 Q464 169 522 305 M565 350 Q650 355 686 452' stroke='%23c2ffe8' stroke-width='1.5' opacity='.9'/%3E%3C/g%3E%3C/svg%3E");
        background-size:  100% 100%;
        background-repeat:  no-repeat;
        filter:  brightness(1.25) saturate(1.35) drop-shadow(0 0 5px rgba(0, 255, 200, .65));
    }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .cards-stage {
        width:  100%;
        max-width:  740px;
        height:  auto;
        margin:  45px auto 20px;
        padding:  0 24px;
        display:  grid;
        grid-template-columns:  repeat(2, minmax(0, 1fr));
        gap:  28px;
        transform:  none;
    }

    .glass-card {
        position:  relative;
        top:  auto;
        left:  auto;
        width:  100%;
        min-height:  0;
        transform:  none;
    }
}

/*
* 10. Итоговое расположение третьей и четвёртой карточек.
* Эти правила и в исходнике действуют после адаптации.
* Мобильные значения с !important по-прежнему имеют приоритет.
*/

.card-3 {
    top:  305px;
    left:  310px;
    width:  310px;
    min-height:  350px;
    transform:  rotate(3.5deg) scale(1.01);
    z-index:  3;
}

.card-4 {
    top:  465px;
    left:  545px;
    width:  315px;
    min-height:  410px;
    padding:  25px 28px 28px;
    transform:  rotate(2.5deg) scale(1.04);
    z-index:  4;
}

/* =========================================================
ONLINE OIL — РОЛИ
========================================================= */

.oo-roles {
    padding:  110px 0 120px;
    background:  #ffffff;
}

.oo-roles__container {
    width:  95%;
    max-width:  1500px;
    margin:  0 auto;
}

/* HEADER */

.oo-roles__header {
    max-width:  820px;
    margin-bottom:  58px;
}

.oo-roles__eyebrow {
    display:  block;
    margin-bottom:  20px;
    color:  #009d91;
    font-size:  12px;
    font-weight:  800;
    letter-spacing:  0.18em;
}

.oo-roles__header h2 {
    margin:  0 0 22px;
    color:  #0d292b;
    font-size:  clamp(36px, 4vw, 54px);
    line-height:  1.05;
    letter-spacing:  -0.035em;
}

.oo-roles__header p {
    margin:  0;
    max-width:  760px;
    color:  #53647a;
    font-size:  18px;
    line-height:  1.7;
}

/* GRID */

.oo-roles__grid {
    display:  grid;
    grid-template-columns:  repeat(3, 1fr);
    gap:  24px;
}

/* CARD */

.oo-role-card {
    position:  relative;
    display:  flex;
    flex-direction:  column;
    min-height:  610px;
    padding:  34px;
    background:  #ffffff;
    border:  1px solid #d9e7e5;
    border-radius:  22px;
    transition:  transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.oo-role-card:hover {
    transform:  translateY(-5px);
    border-color:  #6bcfc4;
    box-shadow:  0 20px 50px rgba(13, 41, 43, 0.08);
}

/* TOP */

.oo-role-card__top {
    display:  flex;
    align-items:  center;
    gap:  17px;
    margin-bottom:  34px;
}

.oo-role-card__icon {
    display:  flex;
    align-items:  center;
    justify-content:  center;
    width:  58px;
    height:  58px;
    flex:  0 0 58px;
    background:  #e9f8f5;
    border-radius:  15px;
}

.oo-role-card__icon svg {
    width:  28px;
    height:  28px;
    fill:  none;
    stroke:  #009d91;
    stroke-width:  1.7;
    stroke-linecap:  round;
    stroke-linejoin:  round;
}

.oo-role-card__number {
    display:  block;
    margin-bottom:  4px;
    color:  #009d91;
    font-size:  11px;
    font-weight:  800;
    letter-spacing:  0.12em;
}

.oo-role-card h3 {
    margin:  0;
    color:  #0d292b;
    font-size:  27px;
    line-height:  1.1;
}

/* CONTENT */

.oo-role-card h4 {
    margin:  0 0 15px;
    color:  #0d292b;
    font-size:  20px;
    line-height:  1.3;
}

.oo-role-card__description {
    margin:  0 0 28px;
    color:  #53647a;
    font-size:  15px;
    line-height:  1.7;
}

/* LIST */

.oo-role-card__list {
    display:  flex;
    flex-direction:  column;
    gap:  0;
    margin:  0;
    padding:  0;
    list-style:  none;
    border-top:  1px solid #e4eceb;
}

.oo-role-card__list li {
    position:  relative;
    padding:  13px 0 13px 27px;
    color:  #233d40;
    font-size:  14px;
    font-weight:  600;
    line-height:  1.4;
    border-bottom:  1px solid #e9efee;
}

.oo-role-card__list li::before {
    content:  "✓";
    position:  absolute;
    left:  0;
    top:  13px;
    color:  #009d91;
    font-weight:  800;
}

.oo-role-card__list li:last-child {
    border-bottom:  0;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1050px) {
    .oo-roles__grid {
        grid-template-columns:  1fr;
    }

    .oo-role-card {
        min-height:  auto;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 640px) {
    .oo-roles {
        padding:  75px 0 80px;
    }

    .oo-roles__header {
        margin-bottom:  38px;
    }

    .oo-roles__header h2 {
        font-size:  36px;
    }

    .oo-roles__header p {
        font-size:  16px;
    }

    .oo-role-card {
        padding:  26px 22px;
        border-radius:  18px;
    }

    .oo-role-card h3 {
        font-size:  24px;
    }

    .oo-role-card__top {
        margin-bottom:  27px;
    }
}

/* Функции в разработке */

.oo-role-card__list li.oo-role-card__planned {
    display:  flex;
    align-items:  center;
    flex-wrap:  wrap;
    gap:  6px 12px;
    margin:  6px 0;
    padding:  13px 16px 13px 36px;
    color:  #ffffff;
    background:  linear-gradient(115deg, #00483b, #006451);
    border:  0;
    border-radius:  10px;
    box-shadow:  inset 0 0 0 1px rgba(93, 224, 194, 0.18);
}

.oo-role-card__list li.oo-role-card__planned::before {
    content:  "○";
    left:  14px;
    top:  13px;
    color:  #69e3c9;
}

.oo-role-card__planned .oo-role-card__status {
    display:  inline-block;
    margin:  0 0 0 auto;
    color:  #83ead5;
    font-size:  11px;
    font-weight:  500;
    line-height:  1.5;
    white-space:  nowrap;
}

.oo-role-card__status {
    display:  inline-block;
    margin-left:  6px;
    color:  #008c80;
    font-size:  12px;
    font-weight:  500;
    white-space:  nowrap;
}

.oo-free-highlight {
    color:  #0ad2a2;
}

/* =========================================================
ONLINE OIL — ЭКОЛОГИЧНОСТЬ
========================================================= */

.oo-eco,
.oo-eco * {
    box-sizing:  border-box;
}

.oo-eco {
    padding:  90px 0 70px;
    overflow:  hidden;
    color:  #123d35;
    background:  radial-gradient( ellipse at 15% 45%, rgba(111, 224, 193, 0.16), transparent 55% ), #f5faf7;
}

.oo-eco__container {
    width:  95%;
    max-width:  1500px;
    margin:  0 auto;
}

/* Заголовок */

.oo-eco__header {
    max-width:  1000px;
}

.oo-eco__eyebrow {
    display:  block;
    margin-bottom:  22px;
    color:  #078a75;
    font-size:  12px;
    font-weight:  800;
    letter-spacing:  0.18em;
}

.oo-eco__header h2 {
    margin:  0;
    font-size:  clamp(34px, 4vw, 56px);
    line-height:  1.12;
    letter-spacing:  -0.035em;
}

.oo-eco__header h2 span {
    color:  #008d77;
}

.oo-eco__header > p {
    max-width:  650px;
    margin:  24px 0 0;
    color:  #60766e;
    font-size:  18px;
    line-height:  1.7;
}

/* Основная композиция */

.oo-eco__main {
    display:  grid;
    grid-template-columns:  1.1fr 1fr;
    align-items:  center;
    gap:  clamp(36px, 6vw, 100px);
    margin:  60px 0;
}

.oo-eco__main > * {
    min-width:  0;
}

.oo-eco__visual {
    padding:  30px;
    border:  1px solid #d7e9df;
    border-radius:  28px;
    background:  radial-gradient( circle at 75% 65%, rgba(52, 219, 178, 0.18), transparent 48% ), rgba(255, 255, 255, 0.65);
}

.oo-eco__stat {
    display:  flex;
    align-items:  center;
    justify-content:  center;
    gap:  22px;
}

.oo-eco__zero {
    color:  #008c73;
    font-size:  clamp(100px, 10vw, 150px);
    font-weight:  800;
    line-height:  1;
    letter-spacing:  -0.07em;
}

.oo-eco__stat-label {
    font-size:  clamp(22px, 2.4vw, 32px);
    font-weight:  600;
    line-height:  1.2;
    letter-spacing:  -0.025em;
}

/* Бумага → цифровой формат */

.oo-eco__transition {
    display:  flex;
    align-items:  center;
    justify-content:  center;
    margin:  32px 0 24px;
}

.oo-eco__tickets {
    position:  relative;
    width:  150px;
    flex:  0 0 150px;
    transform:  rotate(-9deg);
}

.oo-eco__tickets::before,
.oo-eco__tickets::after {
    content:  "";
    position:  absolute;
    inset:  0;
    border:  1px solid #d6dfd9;
    border-radius:  10px;
    background:  #edf1eb;
}

.oo-eco__tickets::before {
    transform:  translate(-8px, 10px) rotate(-7deg);
}

.oo-eco__tickets::after {
    transform:  translate(-4px, 5px) rotate(-3deg);
}

.oo-eco__ticket {
    position:  relative;
    z-index:  1;
    padding:  22px 16px;
    border:  1px solid #d6dfd9;
    border-radius:  10px;
    background:  #fffef8;
    box-shadow:  0 12px 24px rgba(40, 70, 50, 0.07);
}

.oo-eco__ticket > span {
    color:  #879087;
    font-size:  8px;
    font-weight:  700;
    letter-spacing:  0.1em;
}

.oo-eco__ticket strong {
    display:  block;
    margin:  14px 0;
    color:  #69796e;
    font-size:  32px;
}

.oo-eco__ticket > i {
    display:  block;
    height:  18px;
    opacity:  0.35;
    background:  repeating-linear-gradient( 90deg, #52665b 0 2px, transparent 2px 5px );
}

.oo-eco__particles {
    display:  grid;
    grid-template-columns:  repeat(4, 1fr);
    align-items:  center;
    justify-items:  center;
    gap:  12px;
    width:  110px;
    padding:  16px;
    flex-shrink:  1;
}

.oo-eco__particles i {
    width:  5px;
    height:  5px;
    border-radius:  1px;
    background:  #39bda0;
    opacity:  0.45;
    transform:  rotate(20deg);
}

.oo-eco__particles i:nth-child(3n) {
    width:  8px;
    height:  8px;
    opacity:  0.8;
    transform:  translateY(-8px) rotate(45deg);
}

.oo-eco__particles i:nth-child(4n) {
    background:  #008d77;
    transform:  translateY(7px);
}

/* Телефон */

.oo-eco__phone {
    position:  relative;
    width:  145px;
    flex:  0 0 145px;
    padding:  30px 13px 20px;
    text-align:  center;
    border:  5px solid #075444;
    border-radius:  24px;
    background:  #fafffc;
    box-shadow:  0 18px 35px rgba(0, 116, 88, 0.14);
    transform:  rotate(7deg);
}

.oo-eco__speaker {
    position:  absolute;
    top:  9px;
    left:  50%;
    width:  36px;
    height:  5px;
    border-radius:  5px;
    background:  #075444;
    transform:  translateX(-50%);
}

.oo-eco__phone-brand {
    display:  block;
    font-size:  13px;
    font-weight:  800;
}

.oo-eco__qr {
    display:  block;
    width:  100%;
    height:  auto;
    margin:  14px 0;
    color:  #075444;
}

.oo-eco__phone-label {
    display:  block;
    color:  #617c70;
    font-size:  9px;
    line-height:  1.5;
}

.oo-eco__visual-caption {
    color:  #668075;
    font-size:  12px;
    line-height:  1.6;
    text-align:  center;
}

/* Текст */

.oo-eco__copy h3 {
    margin:  0 0 24px;
    font-size:  clamp(26px, 2.7vw, 38px);
    line-height:  1.2;
    letter-spacing:  -0.025em;
}

.oo-eco__copy p {
    margin:  0 0 20px;
    color:  #536d62;
    font-size:  17px;
    line-height:  1.8;
}

.oo-eco__copy p:last-child {
    margin-bottom:  0;
}

/* Преимущества */

.oo-eco__benefits {
    display:  grid;
    grid-template-columns:  repeat(3, minmax(0, 1fr));
    gap:  36px;
}

.oo-eco__benefit {
    padding-top:  24px;
    border-top:  1px solid #c9dfd3;
}

.oo-eco__number {
    color:  #008d77;
    font-size:  13px;
    font-weight:  800;
}

.oo-eco__benefit h3 {
    margin:  16px 0 12px;
    font-size:  21px;
    line-height:  1.35;
}

.oo-eco__benefit p {
    margin:  0;
    color:  #60766e;
    font-size:  16px;
    line-height:  1.7;
}

.oo-eco__closing {
    margin:  56px 0 0;
    padding-top:  30px;
    border-top:  1px solid #d7e7dd;
    color:  #63796d;
    font-size:  clamp(18px, 2vw, 24px);
    line-height:  1.5;
    text-align:  center;
}

.oo-eco__closing span {
    color:  #007f68;
    font-weight:  700;
}

/* Адаптация */

@media (max-width: 1050px) {
    .oo-eco__main {
        grid-template-columns:  1fr;
        gap:  36px;
    }

    .oo-eco__visual {
        width:  100%;
        max-width:  650px;
        margin:  0 auto;
    }
}

@media (max-width: 640px) {
    .oo-eco {
        padding:  64px 0 48px;
    }

    .oo-eco__main {
        margin:  36px 0;
    }

    .oo-eco__visual {
        padding:  24px 12px;
        border-radius:  20px;
    }

    .oo-eco__tickets {
        width:  110px;
        flex-basis:  110px;
    }

    .oo-eco__ticket {
        padding:  18px 10px;
    }

    .oo-eco__ticket > span {
        font-size:  7px;
    }

    .oo-eco__phone {
        width:  120px;
        flex-basis:  120px;
        padding:  28px 9px 16px;
    }

    .oo-eco__particles {
        width:  65px;
        gap:  6px;
        padding:  8px;
    }

    .oo-eco__benefits {
        grid-template-columns:  1fr;
        gap:  26px;
    }

    .oo-eco__closing {
        margin-top:  36px;
    }
}

/* 13. Шапка: контейнер, навигация, состояния и мобильное меню */

.topbar {
    display:  block;
    width:  100%;
    max-width:  none;
    padding:  16px 0;
    box-sizing:  border-box;
    background:  #fff;
}

.topbar__inner {
    width:  95%;
    max-width:  1500px;
    margin-inline:  auto;
    display:  flex;
    align-items:  center;
    justify-content:  space-between;
    gap:  24px;
}

.topbar .brand {
    display:  inline-flex;
    align-items:  center;
    gap:  12px;
    flex-shrink:  0;
    text-decoration:  none;
}

.topbar .brand img {
    display:  block;
    width:  40px;
    height:  48px;
    object-fit:  contain;
}

.topbar .topbar__nav {
    display:  flex;
    align-items:  center;
    justify-content:  flex-end;
    flex-wrap:  wrap;
    gap:  20px;
    margin:  0;
}

.topbar__nav > a {
    white-space:  nowrap;
}

@media (max-width: 640px) {
    .topbar__inner {
        flex-direction:  column;
        align-items:  flex-start;
        gap:  16px;
    }

    .topbar .topbar__nav {
        width:  100%;
        justify-content:  flex-start;
        gap:  12px;
    }

    .topbar__nav > a {
        font-size:  14px;
    }
}

.topbar .topbar__nav > a {
    padding:  12px 18px;
    border-radius:  10px;
    transition:  background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.topbar .topbar__nav > a:hover,
.topbar .topbar__nav > a:focus-visible {
    background:  #126b54;
    border-color:  #126b54;
    color:  #ffffff;
    text-decoration:  none;
}

.topbar .topbar__nav > a:focus-visible {
    outline:  2px solid #126b54;
    outline-offset:  3px;
}

/* Мобильное меню */

.topbar__burger {
    display:  none;
}

@media (max-width: 760px) {
    .topbar .topbar__inner {
        position:  relative;
        flex-direction:  row;
        align-items:  center;
        justify-content:  space-between;
        flex-wrap:  wrap;
        gap:  0;
    }

    .topbar__burger {
        display:  flex;
        flex-direction:  column;
        align-items:  center;
        justify-content:  center;
        gap:  5px;
        width:  44px;
        height:  44px;
        padding:  0;
        background:  #edf6f1;
        border:  1px solid #c6ddd0;
        border-radius:  10px;
        color:  #126b54;
        cursor:  pointer;
    }

    .topbar__burger span {
        display:  block;
        width:  20px;
        height:  2px;
        border-radius:  2px;
        background:  currentColor;
        transition:  transform 200ms ease, opacity 200ms ease;
    }

    .topbar__burger[aria-expanded="true"] span:nth-child(1) {
        transform:  translateY(7px) rotate(45deg);
    }

    .topbar__burger[aria-expanded="true"] span:nth-child(2) {
        opacity:  0;
    }

    .topbar__burger[aria-expanded="true"] span:nth-child(3) {
        transform:  translateY(-7px) rotate(-45deg);
    }

    .topbar__burger:focus-visible {
        outline:  2px solid #126b54;
        outline-offset:  3px;
    }

    .topbar .topbar__nav {
        flex:  0 0 100%;
        width:  100%;
        flex-direction:  column;
        align-items:  stretch;
        gap:  8px;
        display:  flex;
        max-height:  0;
        margin-top:  0;
        padding-top:  0;
        border-top:  0;
        overflow:  hidden;
        visibility:  hidden;
        opacity:  0;
        transform:  translateY(-8px);
        pointer-events:  none;
        transition:  max-height 350ms ease, margin-top 350ms ease, padding-top 350ms ease, opacity 250ms ease, transform 350ms ease, visibility 0s linear 350ms;
    }

    .topbar.topbar--menu-open .topbar__nav {
        display:  flex;
        max-height:  300px;
        margin-top:  16px;
        padding-top:  12px;
        visibility:  visible;
        opacity:  1;
        transform:  translateY(0);
        pointer-events:  auto;
        transition-delay:  0s;
    }

    .topbar .topbar__nav > a {
        display:  block;
        width:  100%;
        box-sizing:  border-box;
        padding:  14px 16px;
        font-size:  15px;
        text-align:  left;
        white-space:  normal;
        flex-shrink:  0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar__burger span {
        transition:  none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar .topbar__nav {
        transition:  none;
        transform:  none;
    }
}