/* =========================================================
   ICAX DGTL AGENCY — главный экран.
   Активное северное сияние (WebGL, dgtl-aurora.js) внутри
   крупного скруглённого блока + 3D-сцены-кнопки из PNG.
   ========================================================= */

.dgtl {
    --dg-page:        #050b11;
    --dg-mint:        #6ff7c8;
    --dg-teal:        #16d9c8;
    --dg-blue:        #4f7cff;
    --dg-text:        #f3fbff;
    --dg-text-soft:   rgba(243, 251, 255, 0.74);
    --dg-text-muted:  rgba(243, 251, 255, 0.5);
    --dg-glass:       rgba(255, 255, 255, 0.10);
    --dg-glass-brd:   rgba(255, 255, 255, 0.30);
    --dg-hero-edge:   #081019;   /* тёмный край hero под вырезанный таб */
    --dg-radius:      52px;

    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;            /* страховка от горизонтального скролла на мобиле */
    color: var(--dg-text);
    background: var(--dg-page);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.dgtl * { box-sizing: border-box; }
.dgtl a { text-decoration: none; color: inherit; }

.dg-shell { max-width: 1440px; margin: 0 auto; padding: 22px; }

/* ---------------- Шапка — общая для всех страниц сайта ----------------
   На внутренних страницах лежит на тёмном фоне страницы; на главной —
   внутри hero, на ступенчатом тёмном верху блока (см. .dg-hero .dg-topbar). */
.dg-topbar {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 10px 14px 22px;
}
/* Внутри hero шапка лежит на тёмной «крыше» блока */
.dg-hero .dg-topbar { padding: 17px 30px 0 38px; }
/* Тёмный ступенчатый верх блока (бесшовный стык с фоном страницы) */
.dg-hero__sky {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 130px;
    z-index: 2; pointer-events: none; display: block;
}
.dg-logo {
    display: flex; align-items: center; gap: 12px;
    font-size: 23px; font-weight: 800; letter-spacing: -0.01em;
}
.dg-logo img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; }
.dg-logo .dg-logo__dim { color: var(--dg-mint); font-weight: 700; }

.dg-mainnav { display: flex; align-items: center; gap: 32px; }
.dg-mainnav a { font-size: 15px; font-weight: 500; color: var(--dg-text-soft); transition: color .2s; }
.dg-mainnav a:hover { color: var(--dg-text); }

.dg-topbar__actions { display: flex; align-items: center; gap: 12px; }

/* Иконки соцсетей/мессенджеров в шапке */
.dg-social { display: flex; align-items: center; gap: 8px; }
.dg-social__link {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 12px; color: var(--dg-text-soft);
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04);
    transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.dg-social__link:hover {
    color: #04231d; transform: translateY(-2px);
    background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal));
    border-color: transparent; box-shadow: 0 10px 22px rgba(22,217,200,.35);
}

/* «Контакты» — контурная кнопка (как на референсе) */
.dg-contacts {
    display: inline-flex; align-items: center;
    padding: 11px 24px; border-radius: 12px;
    font-size: 14px; font-weight: 600; color: var(--dg-text);
    border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04);
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.dg-contacts:hover {
    color: #04231d; transform: translateY(-2px);
    background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal));
    border-color: transparent; box-shadow: 0 10px 22px rgba(22,217,200,.35);
}
.dg-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 14px; font-size: 14px; font-weight: 600;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.dg-btn--ghost { color: var(--dg-text); border: 1px solid var(--dg-glass-brd); background: var(--dg-glass); backdrop-filter: blur(8px); }
.dg-btn--ghost:hover { background: rgba(255,255,255,.18); }
.dg-btn--primary { color: #04231d; background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal)); box-shadow: 0 12px 28px rgba(22,217,200,.35); }
.dg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(22,217,200,.45); }

/* ---------------- Бургер и мобильное меню ---------------- */
.dg-burger {
    display: none;                       /* включается в медиа-запросе <=1040px */
    width: 42px; height: 42px; padding: 0; border-radius: 12px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; color: var(--dg-text);
    background: rgba(255,255,255,.06); border: 1px solid var(--dg-glass-brd);
    transition: background .2s, border-color .2s;
}
.dg-burger:hover { background: rgba(255,255,255,.12); }
.dg-burger span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .28s ease, opacity .2s ease;
}
/* Открытое состояние — бургер превращается в крестик */
.dg-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dg-burger.is-open span:nth-child(2) { opacity: 0; }
.dg-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dg-mobmenu {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column; justify-content: center; gap: 30px;
    padding: 96px 26px 40px;
    background: rgba(5, 11, 17, .97); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.dg-mobmenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.dg-mobmenu__nav { display: flex; flex-direction: column; }
.dg-mobmenu__nav a {
    font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--dg-text);
    padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    transition: color .2s ease, padding-left .2s ease;
}
.dg-mobmenu__nav a:hover, .dg-mobmenu__nav a:focus-visible { color: var(--dg-mint); padding-left: 8px; }
.dg-mobmenu__foot { display: flex; flex-direction: column; gap: 18px; }
.dg-mobmenu__cta { justify-content: center; }
/* Блокировка прокрутки страницы, пока открыто меню */
.dgtl.dg-noscroll { overflow: hidden; }
/* Пока меню открыто, шапка должна быть НАД оверлеем: иначе логотип (уход на
   главную) и бургер-крестик оказываются перекрыты и меню не закрыть. */
.dgtl.dg-noscroll .dg-topbar { z-index: 70; }

/* ---------------- HERO ---------------- */
.dg-hero {
    position: relative;
    border-radius: var(--dg-radius);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    /* Ровно цвет страницы: по краю остаётся 2px этого фона (картинка сияния
       обрезана чуть меньшим скруглением), и кромка не читается вообще. */
    background: var(--dg-page);
    box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

/* Контейнер живого фона.
   Обрезает картинку СВОИМ скруглением, на 2px меньше, чем у hero. Так сияние
   не доходит до кромки hero, и на скруглении не остаётся светлого волоска:
   браузер обрезает слои по отдельности, и на крайнем сглаженном пикселе дуги
   всегда подмешивается нижний слой — поэтому важно, чтобы там его не было. */
.dg-hero__bg {
    position: absolute; inset: 2px;
    border-radius: calc(var(--dg-radius) - 2px);
    overflow: hidden;
    z-index: 0; pointer-events: none;
    isolation: isolate;                          /* blend взаимодействует только внутри */
}

/* Сама картинка сияния + «дыхание» (scale + плавный дрейф) */
.dg-hero__bg-img {
    position: absolute; inset: -52px;            /* запас под дыхание/сдвиги */
    /* Пережатая версия: оригинал bckg.png весит 6 МБ и держал загрузку hero.
       Мобильная версия поменьше подключается в медиа-запросе ниже. */
    background-image: url("/static/bckg-1800.jpg");
    background-size: cover;
    background-position: center;
    will-change: transform;
    animation: dg-breath 16s ease-in-out infinite;
}
@keyframes dg-breath {
    0%   { transform: scale(1.04) translate3d(0, 0, 0); }
    50%  { transform: scale(1.09) translate3d(-22px, 14px, 0); }
    100% { transform: scale(1.04) translate3d(0, 0, 0); }
}

/* Анимированные световые блики поверх картинки (иллюзия переливания) */
.dg-hero__light, .dg-hero__light2, .dg-hero__light3 {
    position: absolute; inset: -45%;
    will-change: transform, opacity;
    pointer-events: none;
}
.dg-hero__light {
    background: linear-gradient(115deg,
        transparent 28%, rgba(160,255,225,.62) 46%,
        rgba(120,200,255,.50) 60%, transparent 76%);
    mix-blend-mode: screen;
    animation: dg-shimmer 9s ease-in-out infinite;
}
.dg-hero__light2 {
    background: radial-gradient(42% 55% at 62% 38%, rgba(130,255,205,.55), transparent 64%),
                radial-gradient(46% 60% at 32% 66%, rgba(95,160,255,.48), transparent 70%);
    mix-blend-mode: color-dodge;
    animation: dg-shimmer2 13s ease-in-out infinite;
}
/* Светлый «прогон» — заметная волна света, проходящая по сиянию */
.dg-hero__light3 {
    background: linear-gradient(102deg,
        transparent 40%, rgba(210,255,240,.55) 50%, transparent 60%);
    mix-blend-mode: screen;
    animation: dg-sweep 8s linear infinite;
}
@keyframes dg-shimmer {
    0%   { transform: translate3d(-22%, -10%, 0) rotate(0deg); opacity: .25; }
    50%  { transform: translate3d(20%,  10%, 0)  rotate(7deg); opacity: 1;   }
    100% { transform: translate3d(-22%, -10%, 0) rotate(0deg); opacity: .25; }
}
@keyframes dg-shimmer2 {
    0%   { transform: translate3d(12%, 6%, 0)   scale(1.0);  opacity: .2; }
    50%  { transform: translate3d(-14%, -8%, 0) scale(1.28); opacity: .9; }
    100% { transform: translate3d(12%, 6%, 0)   scale(1.0);  opacity: .2; }
}
@keyframes dg-sweep {
    0%   { transform: translate3d(-55%, 0, 0); opacity: 0; }
    15%  { opacity: .8; }
    85%  { opacity: .8; }
    100% { transform: translate3d(55%, 0, 0);  opacity: 0; }
}

/* Затемнение для читаемости текста — мягкое, из нижнего-левого угла,
   без единого жёсткого края (никаких линий). Верх остаётся ярким. */
.dg-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(135% 125% at 0% 100%,
        rgba(5, 11, 17, 0.86) 0%, rgba(5, 11, 17, 0.30) 42%, transparent 66%);
}

@media (prefers-reduced-motion: reduce) {
    .dg-hero__bg-img, .dg-hero__light, .dg-hero__light2, .dg-hero__light3 { animation: none; }
}

.dg-hero__grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center;
    padding: 24px 56px 58px;
}

/* Левая зона — текст */
.dg-hero__eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
    color: var(--dg-mint); padding: 7px 14px; border: 1px solid var(--dg-glass-brd);
    border-radius: 999px; background: var(--dg-glass); backdrop-filter: blur(8px); margin-bottom: 22px;
}
.dg-hero__title { font-size: clamp(40px,5vw,68px); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 20px; }
.dg-hero__title .accent { background: linear-gradient(110deg, var(--dg-mint), var(--dg-teal), var(--dg-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dg-hero__lead {
    font-size: 18px; line-height: 1.6; color: #eef7fb; font-weight: 500;
    max-width: 460px; margin: 0 0 30px;
    text-shadow: 0 1px 2px rgba(5,11,17,.55), 0 2px 18px rgba(5,11,17,.5);
}
.dg-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------------- Стеклянные кнопки-карточки ---------------- */
.dg-stage {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    align-content: center; justify-content: end; min-height: 360px;
}

/* Объёмная прозрачная (glassmorphism) кнопка прямоугольной формы */
.dg-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    width: 210px; min-height: 170px; padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.02) 55%),
        rgba(9, 22, 32, 0.52);
    border: 1px solid rgba(255,255,255,.38);
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow:
        0 26px 60px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.dg-card:hover {
    background:
        linear-gradient(155deg, rgba(255,255,255,.18), rgba(255,255,255,.03) 55%),
        rgba(11, 26, 38, 0.58);
}
/* Цветной блик внутри стекла — даёт ощущение объёма */
.dg-card__glow {
    position: absolute; inset: auto auto 30% -20%;
    width: 70%; height: 60%; pointer-events: none; z-index: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(111,247,200,.45), transparent 70%);
    filter: blur(18px);
    opacity: .7; transition: opacity .3s ease, transform .4s ease;
}
.dg-card:nth-child(2) .dg-card__glow {
    inset: -10% -20% auto auto;
    background: radial-gradient(50% 50% at 50% 50%, rgba(79,124,255,.45), transparent 70%);
}
.dg-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.5);
    box-shadow:
        0 36px 80px rgba(0,0,0,.5),
        0 0 0 1px rgba(111,247,200,.25),
        inset 0 1px 0 rgba(255,255,255,.45);
}
.dg-card:hover .dg-card__glow { opacity: 1; transform: scale(1.15); }

.dg-card__label {
    position: relative; z-index: 1;
    font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--dg-mint); margin-bottom: 8px;
}
.dg-card__title {
    position: relative; z-index: 1;
    font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--dg-text);
}
.dg-card__arrow {
    position: absolute; top: 18px; right: 18px; z-index: 1;
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; color: var(--dg-text);
    background: rgba(255,255,255,.10); border: 1px solid var(--dg-glass-brd);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.dg-card:hover .dg-card__arrow {
    background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal));
    color: #04231d; transform: rotate(45deg);
}

/* Компас со звёздами — слева, над заголовком */
.dg-compass {
    width: 84px; height: 84px; margin-bottom: 14px;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
}
.dg-compass img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------- Контентные секции ---------------- */
.dg-section { max-width: 1440px; margin: 0 auto; padding: 64px 40px; scroll-margin-top: 90px; }
.dg-section__head { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dg-mint); margin-bottom: 10px; }
.dg-section__title { font-size: clamp(26px,4vw,40px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.dg-section__note { font-size: 16px; color: var(--dg-text-muted); margin: 8px 0 0; }
.dg-section__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }

/* Ссылка «Все услуги / кейсы →» */
.dg-link {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-size: 14px; font-weight: 600; color: var(--dg-mint);
    padding: 9px 16px; border-radius: 12px;
    border: 1px solid var(--dg-glass-brd); background: var(--dg-glass);
    backdrop-filter: blur(8px); transition: background .2s, transform .2s;
}
.dg-link:hover { background: rgba(255,255,255,.16); transform: translateX(2px); }

/* Сетки */
.dg-grid { display: grid; gap: 18px; }
.dg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dg-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Стеклянная карточка услуги */
.dg-tile {
    position: relative; overflow: hidden;
    padding: 26px; border-radius: 22px;
    background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%), rgba(255,255,255,.04);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dg-tile:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.5); box-shadow: 0 28px 60px rgba(0,0,0,.5); }
.dg-tile__glow { position: absolute; inset: -20% -20% auto auto; width: 60%; height: 55%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(111,247,200,.32), transparent 70%); filter: blur(16px); opacity: .7; }
.dg-tile__ic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 24px; background: rgba(255,255,255,.08); border: 1px solid var(--dg-glass-brd); margin-bottom: 16px; }
/* Линейные SVG-иконки в карточках (услуги, ценности) */
.dg-ic { width: 24px; height: 24px; color: var(--dg-mint); display: block; }
.dg-tile__ic .dg-ic, .dg-svc__ic .dg-ic { color: var(--dg-mint); }
.dg-tile__title { position: relative; font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.dg-tile__text { position: relative; font-size: 15px; line-height: 1.55; color: var(--dg-text-soft); margin: 0; }

/* Карточка кейса */
.dg-case {
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px; border-radius: 22px; min-height: 200px;
    background: linear-gradient(160deg, rgba(79,124,255,.12), rgba(255,255,255,.03) 65%), rgba(255,255,255,.04);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dg-case:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.5); box-shadow: 0 28px 60px rgba(0,0,0,.5); }
/* Верх карточки: тег слева, логотип заказчика справа */
.dg-case__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dg-case__logo { flex: none; display: flex; align-items: center; height: 40px; }
.dg-case__logo img { max-height: 100%; max-width: 110px; width: auto; object-fit: contain; opacity: .92; }
.dg-case__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-mint); padding: 5px 12px; border-radius: 999px; background: rgba(111,247,200,.12); border: 1px solid rgba(111,247,200,.3); }
.dg-case__title { font-size: 20px; font-weight: 800; margin: 4px 0 0; }
.dg-case__text { font-size: 15px; line-height: 1.5; color: var(--dg-text-soft); margin: 0; flex: 1; }
.dg-case__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 6px; }
.dg-case__metric { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; background: linear-gradient(110deg, var(--dg-mint), var(--dg-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dg-case__link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--dg-mint);
    padding: 7px 14px; border-radius: 999px;
    background: rgba(111,247,200,.10); border: 1px solid rgba(111,247,200,.28);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.dg-case:hover .dg-case__link { background: rgba(111,247,200,.18); border-color: rgba(111,247,200,.5); }
.dg-case__link svg { transition: transform .2s ease; }
.dg-case:hover .dg-case__link svg { transform: translate(2px, -2px); }

/* Отзыв */
.dg-review {
    margin: 0; padding: 26px; border-radius: 22px;
    background: rgba(255,255,255,.04); border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(12px);
    box-shadow: 0 14px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
    display: flex; flex-direction: column; gap: 18px;
}
.dg-review__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--dg-text); }
.dg-review__author { display: flex; align-items: center; gap: 12px; }
.dg-review__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; font-size: 14px; font-weight: 700; color: #04231d; background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal)); }
.dg-review__author b { display: block; font-size: 15px; }
.dg-review__author small { display: block; font-size: 13px; color: var(--dg-text-muted); }

/* Пустое состояние (например, отзывов пока нет) */
.dg-empty {
    padding: 40px; border-radius: 22px; text-align: center;
    font-size: 16px; color: var(--dg-text-muted);
    background: rgba(255,255,255,.03); border: 1px dashed var(--dg-glass-brd);
}
.dg-empty a { color: var(--dg-mint); font-weight: 600; }

/* Блок-заявка (форма + текст) */
.dg-lead {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 36px; align-items: start;
    padding: 40px; border-radius: 28px;
    background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%), rgba(255,255,255,.04);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.dg-lead__note { font-size: 16px; line-height: 1.55; color: var(--dg-text-soft); margin: 14px 0 0; max-width: 360px; }
.dg-form { display: flex; flex-direction: column; gap: 14px; }
.dg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dg-form__ok { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #04231d; background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal)); }
.dg-field { display: flex; flex-direction: column; gap: 7px; }
.dg-field > span { font-size: 13px; font-weight: 600; color: var(--dg-text-soft); }
.dg-field input, .dg-field select, .dg-field textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px;
    font: inherit; font-size: 15px; color: var(--dg-text);
    background: rgba(255,255,255,.06); border: 1px solid var(--dg-glass-brd);
    transition: border-color .2s, background .2s;
}
/* Без нативного «гриппа» в углу — он выбивался из стиля */
.dg-field textarea { resize: none; min-height: 108px; }

/* ---- Кастомный выпадающий список (замена нативного select) ---- */
.dg-select { position: relative; }
.dg-select__btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: 12px; cursor: pointer; text-align: left;
    font: inherit; font-size: 15px; color: var(--dg-text);
    background: rgba(255,255,255,.06); border: 1px solid var(--dg-glass-brd);
    transition: border-color .2s, background .2s;
}
.dg-select__btn:hover { background: rgba(255,255,255,.09); }
.dg-select__btn:focus-visible,
.dg-select.is-open .dg-select__btn { outline: none; border-color: var(--dg-mint); background: rgba(255,255,255,.10); }
.dg-select__chev { flex: none; color: var(--dg-text-soft); transition: transform .25s ease, color .2s; }
.dg-select.is-open .dg-select__chev { transform: rotate(180deg); color: var(--dg-mint); }

.dg-select__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
    margin: 0; padding: 6px; list-style: none;
    max-height: 264px; overflow-y: auto;
    border-radius: 14px; background: rgba(10, 22, 32, .97);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    backdrop-filter: blur(14px);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.dg-select.is-open .dg-select__list { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dg-select__opt {
    padding: 11px 14px; border-radius: 10px; font-size: 15px; color: var(--dg-text-soft);
    cursor: pointer; transition: background .15s, color .15s;
}
.dg-select__opt:hover { background: rgba(255,255,255,.08); color: var(--dg-text); }
.dg-select__opt.is-active {
    color: #04231d; font-weight: 600;
    background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal));
}
.dg-field input:focus, .dg-field select:focus, .dg-field textarea:focus {
    outline: none; border-color: var(--dg-mint); background: rgba(255,255,255,.10);
}
.dg-field input::placeholder, .dg-field textarea::placeholder { color: var(--dg-text-muted); }
.dg-form__submit { justify-content: center; margin-top: 4px; }

/* Шапка внутренней страницы (Услуги / Кейсы) */
.dg-pagehead { padding: 40px 14px 8px; }
.dg-pagehead__title { font-size: clamp(34px,5vw,56px); font-weight: 800; letter-spacing: -.025em; margin: 8px 0 16px; }
.dg-pagehead__lead { font-size: 18px; line-height: 1.55; color: var(--dg-text-soft); max-width: 620px; margin: 0; }

/* Мета мир — блогер и маскоты */
.dg-meta-hero { display: flex; justify-content: center; }
.dg-meta-hero__photo {
    display: block; position: relative; overflow: hidden;
    width: 100%; max-width: 520px; aspect-ratio: 4 / 5;
    border-radius: 28px; border: 1.5px solid rgba(111,247,200,.6);
    background: rgba(255,255,255,.04);
    box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(111,247,200,.12), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.dg-meta-hero__photo:hover { transform: translateY(-5px); border-color: var(--dg-mint); box-shadow: 0 34px 72px rgba(0,0,0,.55), 0 0 0 1px rgba(111,247,200,.25); }
.dg-meta-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Описание блогера под фото */
.dg-meta-about { max-width: 640px; margin: 26px auto 0; text-align: center; }
.dg-meta-about p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--dg-text-soft); }
.dg-meta-about p:last-child { margin-bottom: 0; }

.dg-meta-mascots { margin-top: 18px; }
.dg-mascot { margin: 0; }
.dg-mascot__photo {
    position: relative; overflow: hidden;
    aspect-ratio: 1 / 1; border-radius: 22px;
    border: 1.5px solid rgba(111,247,200,.6); background: rgba(255,255,255,.04);
    box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 0 1px rgba(111,247,200,.12), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dg-mascot:hover .dg-mascot__photo { transform: translateY(-5px); border-color: var(--dg-mint); box-shadow: 0 26px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(111,247,200,.25); }
.dg-mascot__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-mascot__name {
    margin-top: 14px; text-align: center;
    font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--dg-text);
}
.dg-mascot__desc {
    margin: 6px 0 0; text-align: center;
    font-size: 15px; line-height: 1.45; color: var(--dg-text-muted);
}

/* О нас — цифры и рассказ */
.dg-about-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.dg-stat {
    padding: 26px 24px; border-radius: 22px; text-align: center;
    background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%), rgba(255,255,255,.04);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.dg-stat__num {
    font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
    background: linear-gradient(110deg, var(--dg-mint), var(--dg-teal), var(--dg-blue));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dg-stat__label { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--dg-text-soft); }

.dg-about-story {
    max-width: 760px; margin: 40px 0 0;
}
.dg-about-story p {
    margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: var(--dg-text-soft);
}
.dg-about-story p:last-child { margin-bottom: 0; }

/* Плашка-CTA внизу страниц */
.dg-cta-band {
    margin-top: 36px; padding: 30px 36px; border-radius: 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(111,247,200,.12), rgba(79,124,255,.12));
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(12px);
}

/* ---------------- Контакты (отдельная страница) ---------------- */
.dg-contact-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px;
}
.dg-contact-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 24px 26px; border-radius: 22px; color: inherit;
    background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 60%), rgba(255,255,255,.03);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.dg-contact-card:hover {
    transform: translateY(-4px); border-color: rgba(111,247,200,.55);
    box-shadow: 0 22px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(111,247,200,.2);
}
.dg-contact-card__ic {
    width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 10px;
    border-radius: 13px; color: var(--dg-mint);
    background: rgba(111,247,200,.1); border: 1px solid rgba(111,247,200,.28);
}
.dg-contact-card__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-text-muted); }
.dg-contact-card__value { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--dg-text); }

/* ---------------- Шаблонный футер ---------------- */
.dg-footer {
    max-width: 1440px; margin: 40px auto 0; padding: 48px 40px 36px;
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 40px 32px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.dg-footer .dg-logo { font-size: 20px; }
.dg-footer__brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--dg-text-muted); max-width: 320px; }
.dg-footer__brand .dg-social { margin-top: 20px; }
.dg-footer__nav { display: flex; flex-direction: column; gap: 12px; }
.dg-footer__head { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dg-text-muted); margin-bottom: 4px; }
.dg-footer__nav a { font-size: 14px; color: var(--dg-text-soft); transition: color .2s; }
.dg-footer__nav a:hover { color: var(--dg-mint); }
.dg-footer__bottom {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-top: 26px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08);
}
.dg-footer__copy { font-size: 13px; color: var(--dg-text-muted); }
.dg-footer__legal { font-size: 13px; color: var(--dg-text-muted); }

/* ---------------- Аккордеон услуг ---------------- */
.dg-acc { display: flex; flex-direction: column; gap: 16px; }

.dg-acc__item {
    position: relative; overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 60%), rgba(255,255,255,.03);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.dg-acc__item::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(70% 120% at 0% 0%, rgba(111,247,200,.18), transparent 60%);
    transition: opacity .35s ease;
}
.dg-acc__item:hover { border-color: rgba(255,255,255,.42); }
.dg-acc__item.is-open {
    border-color: rgba(111,247,200,.55);
    box-shadow: 0 26px 66px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
    background: linear-gradient(155deg, rgba(111,247,200,.10), rgba(255,255,255,.03) 55%), rgba(255,255,255,.04);
}
.dg-acc__item.is-open::before { opacity: 1; }

/* Шапка-кнопка */
.dg-acc__head {
    position: relative; z-index: 1; width: 100%;
    display: flex; align-items: center; gap: 20px;
    padding: 24px 28px; text-align: left; cursor: pointer;
    background: none; border: 0; color: inherit; font: inherit;
}
.dg-acc__ic {
    flex: none; display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 16px; font-size: 26px;
    background: rgba(255,255,255,.07); border: 1px solid var(--dg-glass-brd);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.dg-acc__item.is-open .dg-acc__ic {
    background: linear-gradient(135deg, rgba(111,247,200,.22), rgba(22,217,200,.12));
    box-shadow: 0 0 0 1px rgba(111,247,200,.35), 0 10px 24px rgba(22,217,200,.25);
    transform: scale(1.04);
}
.dg-acc__headmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.dg-acc__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.dg-acc__text { font-size: 14.5px; line-height: 1.5; color: var(--dg-text-muted); }
.dg-acc__item.is-open .dg-acc__text { color: var(--dg-text-soft); }

.dg-acc__meta { flex: none; display: flex; align-items: center; gap: 14px; }
.dg-acc__count {
    display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px;
    font-size: 13px; font-weight: 700; color: var(--dg-mint);
    border-radius: 999px; background: rgba(111,247,200,.10); border: 1px solid rgba(111,247,200,.28);
}
.dg-acc__chev {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
    color: var(--dg-text-soft); background: rgba(255,255,255,.06); border: 1px solid var(--dg-glass-brd);
    transition: transform .35s ease, color .25s ease, background .25s ease;
}
.dg-acc__head:hover .dg-acc__chev { background: rgba(255,255,255,.12); color: var(--dg-text); }
.dg-acc__item.is-open .dg-acc__chev { transform: rotate(180deg); color: var(--dg-mint); border-color: rgba(111,247,200,.4); }

/* Раскрывающееся тело — плавная анимация через grid-template-rows */
.dg-acc__body {
    position: relative; z-index: 1;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1);
}
.dg-acc__item.is-open .dg-acc__body { grid-template-rows: 1fr; }
.dg-acc__inner { overflow: hidden; min-height: 0; }

.dg-acc__intro {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
    margin: 4px 28px 20px; padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.dg-acc__lead { flex: 1; min-width: 260px; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--dg-text-soft); }
.dg-acc__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-acc__tag {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--dg-mint);
    padding: 5px 12px; border-radius: 999px;
    background: rgba(111,247,200,.10); border: 1px solid rgba(111,247,200,.28);
}
.dg-acc__cta { flex: none; }

/* Список подуслуг */
.dg-acc__list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding-bottom: 26px; padding-inline: 28px;
}
.dg-acc__row {
    display: flex; gap: 14px; padding: 15px 16px; border-radius: 16px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.dg-acc__row:hover {
    transform: translateY(-2px); background: rgba(255,255,255,.06);
    border-color: rgba(111,247,200,.32);
}
.dg-acc__dot {
    flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--dg-mint), var(--dg-teal));
    box-shadow: 0 0 12px rgba(111,247,200,.6);
}
.dg-acc__rowmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dg-acc__rowname { font-size: 15px; font-weight: 700; color: var(--dg-text); }
.dg-acc__rowdesc { font-size: 13.5px; line-height: 1.5; color: var(--dg-text-muted); }

/* ---------------- Каталог услуг с ценами (концепт h5script) ---------------- */
.dg-svc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.dg-svc {
    display: flex; flex-direction: column;
    padding: 26px; border-radius: 24px;
    background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 60%), rgba(255,255,255,.03);
    border: 1px solid var(--dg-glass-brd); backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dg-svc:hover { transform: translateY(-4px); border-color: rgba(111,247,200,.45); box-shadow: 0 30px 64px rgba(0,0,0,.5); }

.dg-svc__head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.09); }
.dg-svc__ic {
    flex: none; display: grid; place-items: center; width: 50px; height: 50px;
    border-radius: 14px; font-size: 24px;
    background: rgba(255,255,255,.07); border: 1px solid var(--dg-glass-brd);
}
.dg-svc__headtext { min-width: 0; }
.dg-svc__title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 5px; }
.dg-svc__sub { font-size: 13.5px; line-height: 1.5; color: var(--dg-text-muted); margin: 0; }

.dg-svc__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.dg-svc__row { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dg-svc__row:last-child { border-bottom: 0; }
.dg-svc__rowtop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dg-svc__name { font-size: 15px; font-weight: 600; color: var(--dg-text); }
.dg-svc__price {
    flex: none; font-size: 14px; font-weight: 700; white-space: nowrap;
    background: linear-gradient(110deg, var(--dg-mint), var(--dg-teal));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dg-svc__desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--dg-text-muted); }

.dg-svc__cta { justify-content: center; margin-top: 20px; }

/* ---------------- Адаптив ---------------- */
@media (max-width: 1040px) {
    .dg-hero__grid { grid-template-columns: 1fr; gap: 24px; padding: 20px 30px 44px; }
    .dg-mainnav { display: none; }
    .dg-burger { display: flex; }        /* заменяет скрытое меню */
    .dg-hero .dg-topbar { padding: 14px 18px 0 22px; }
    .dg-hero::after { background: linear-gradient(180deg, rgba(5,11,17,.7), rgba(5,11,17,.2) 40%, transparent); }
    .dg-grid--3 { grid-template-columns: 1fr 1fr; }
    .dg-about-stats { grid-template-columns: 1fr 1fr; }
    .dg-contact-grid { grid-template-columns: 1fr 1fr; }
    .dg-lead { grid-template-columns: 1fr; gap: 24px; }
    .dg-section__bar { flex-wrap: wrap; }
    .dg-footer { grid-template-columns: 1fr 1fr 1fr; }
    .dg-footer__brand { grid-column: 1 / -1; }
    .dg-acc__list { grid-template-columns: 1fr; }
    .dg-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .dg-shell { padding: 14px; }
    .dg-hero { --dg-radius: 34px; }   /* фон подхватит через calc() */
    /* На узком экране большая картинка не нужна — 68 КБ вместо 200 КБ */
    .dg-hero__bg-img { background-image: url("/static/bckg-900.jpg"); }
    .dg-topbar { flex-wrap: wrap; padding: 4px 6px 16px; gap: 12px; }
    .dg-hero .dg-topbar { padding: 12px 14px 0; gap: 12px; }
    .dg-topbar__actions { gap: 8px; }
    /* Соцсети и «Контакты» переезжают внутрь мобильного меню — в шапке
       остаются только логотип и бургер, иначе тесно на узком экране. */
    .dg-topbar__actions .dg-social,
    .dg-topbar__actions .dg-contacts { display: none; }
    .dg-hero__grid { padding: 26px 20px 32px; }
    .dg-logo { font-size: 17px; }
    .dg-logo img { width: 32px; height: 32px; }
    .dg-contacts { padding: 9px 15px; font-size: 13px; }
    .dg-btn { padding: 10px 16px; font-size: 13px; }
    .dg-stage { grid-template-columns: 1fr; gap: 14px; min-height: auto; justify-content: stretch; }
    .dg-card { width: auto; min-height: 150px; padding: 22px; border-radius: 22px; }
    .dg-card__title { font-size: 22px; }
    .dg-compass { width: 64px; height: 64px; }
    .dg-section { padding: 48px 22px; }
    .dg-section__bar { gap: 12px; margin-bottom: 22px; }
    .dg-grid--3 { grid-template-columns: 1fr; }
    .dg-grid--2 { grid-template-columns: 1fr; }
    .dg-about-stats { grid-template-columns: 1fr; }
    .dg-contact-grid { grid-template-columns: 1fr; }
    .dg-svc-grid { grid-template-columns: 1fr; }
    .dg-form__row { grid-template-columns: 1fr; }
    .dg-lead { padding: 26px; }
    .dg-pagehead { padding: 28px 8px 4px; }
    .dg-cta-band { padding: 24px; text-align: left; }
    .dg-footer { grid-template-columns: 1fr; padding: 36px 22px; gap: 24px; }
    .dg-acc__head { padding: 18px 18px; gap: 14px; }
    .dg-acc__ic { width: 48px; height: 48px; font-size: 22px; }
    .dg-acc__title { font-size: 17px; }
    .dg-acc__text { display: none; }
    .dg-acc__intro { margin: 4px 18px 18px; }
    .dg-acc__list { padding-inline: 18px; }
    .dg-acc__cta { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .dg-shell { padding: 10px; }
    .dg-hero { --dg-radius: 26px; }   /* фон подхватит через calc() */
    .dg-hero .dg-topbar { padding: 12px 12px 0; }
    .dg-logo { font-size: 16px; gap: 9px; }
    .dg-logo img { width: 30px; height: 30px; }
    .dg-logo__dim { display: none; }               /* оставляем короткий «ICAX» */
    .dg-hero__grid { padding: 22px 16px 26px; }
    .dg-hero__title { font-size: 38px; }
    .dg-hero__lead { font-size: 16px; }
    .dg-compass { width: 56px; height: 56px; }
    .dg-section { padding: 40px 16px; }
    .dg-section__title { font-size: 26px; }
    .dg-pagehead__title { font-size: 30px; }
    .dg-pagehead__lead { font-size: 16px; }
    .dg-lead { padding: 20px; }
    .dg-cta-band { padding: 22px 20px; }
    .dg-acc__head { padding: 16px 14px; gap: 12px; }
    .dg-acc__intro { margin: 4px 14px 16px; }
    .dg-acc__list { padding-inline: 14px; }
    .dg-footer { padding: 30px 18px; }
}