/* =========================================================
   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;
    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-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;
}
.dg-contacts:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.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); }

/* ---------------- HERO ---------------- */
.dg-hero {
    position: relative;
    border-radius: var(--dg-radius);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(160deg, #07131c, #050d14);
    box-shadow: 0 40px 100px rgba(0,0,0,.55);
}

/* Контейнер живого фона */
.dg-hero__bg {
    position: absolute; inset: -52px;            /* запас под дыхание/сдвиги */
    z-index: 0; pointer-events: none;
    isolation: isolate;                          /* blend взаимодействует только внутри */
}

/* Сама картинка сияния + «дыхание» (scale + плавный дрейф) */
.dg-hero__bg-img {
    position: absolute; inset: 0;
    background-image: url("/static/bckg.png");
    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.55; color: var(--dg-text-soft); max-width: 440px; margin: 0 0 30px; }
.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,.16), rgba(255,255,255,.04) 60%),
        rgba(255,255,255,.05);
    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,.35),
        inset 0 -1px 0 rgba(255,255,255,.06);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Цветной блик внутри стекла — даёт ощущение объёма */
.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-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; }
.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__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__metric { font-size: 22px; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(110deg, var(--dg-mint), var(--dg-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Отзыв */
.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: vertical; }
.dg-field option { color: #04231d; }
.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; }

/* Плашка-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-footer {
    max-width: 1440px; margin: 40px auto 0; padding: 48px 40px 40px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 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__nav { display: flex; flex-direction: column; gap: 10px; }
.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-text); }
.dg-footer__copy { grid-column: 1 / -1; padding-top: 24px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; color: var(--dg-text-muted); }

/* ---------------- Адаптив ---------------- */
@media (max-width: 1040px) {
    .dg-hero__grid { grid-template-columns: 1fr; gap: 24px; }
    .dg-mainnav { display: none; }
    .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-lead { grid-template-columns: 1fr; gap: 24px; }
    .dg-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .dg-shell { padding: 14px; }
    .dg-hero { border-radius: 34px; }
    .dg-topbar { padding: 4px 6px 16px; gap: 10px; }
    .dg-hero__grid { padding: 30px 20px 32px; }
    .dg-logo { font-size: 17px; }
    .dg-logo img { width: 32px; height: 32px; }
    .dg-contacts { padding: 10px 18px; font-size: 14px; }
    .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-grid--3 { grid-template-columns: 1fr; }
    .dg-form__row { grid-template-columns: 1fr; }
    .dg-lead { padding: 26px; }
    .dg-pagehead { padding: 28px 8px 4px; }
    .dg-footer { grid-template-columns: 1fr; padding: 36px 22px; gap: 24px; }
}