/* =========================================================
   PAGE: /hello — page-only styles
   IMPORTANT: BG / lines / header / drawer come from /style.css + /mobile.css
   ========================================================= */

/* -------------------- layout -------------------- */

body[data-page="hello"] main.main {
    max-width: 720px;
    margin: 0 auto;
}

body[data-page="hello"] .hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 6px;
}

/* ---------- top identity block ---------- */

body[data-page="hello"] .hero-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0px 0 4px;
}

body[data-page="hello"] .ava {
    width: 104px;
    height: 104px;
    border-radius: 999px;
    overflow: visible;
    border: 1px solid var(--border-soft);
}

body[data-page="hello"] .ava img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: .96;
}

body[data-page="hello"] .hero-id .h1 {
    margin: 6px 0 0;
    font-size: clamp(28px, 9vw, 40px);
    line-height: 1.04;
    letter-spacing: .01em;
    color: rgba(219, 221, 228, 0.918);
}

body[data-page="hello"] .hero-id .sub {
    margin: 3px 0 0;
    font-size: 14px;
    color: #ffffff86;
}

/* -------------------- chips -------------------- */

body[data-page="hello"] .chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

body[data-page="hello"] .chip {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .74);
    white-space: nowrap;
}

body[data-page="hello"] .chip-accent {
    border-color: rgba(245, 193, 91, .35);
    background: rgba(245, 193, 91, .08);
    color: rgba(245, 193, 91, .95);
}

/* =========================================================
   LINKS — Telegram / Наковальня / YouTube / Сотрудничество
   ========================================================= */

body[data-page="hello"] .links {
    width: calc(91%);
    margin-left: -16px;
    margin-right: -16px;

    display: flex;
    flex-direction: column;
    gap: 9px; /* ← ВОТ ЗДЕСЬ */
}

/* ---------- base button ---------- */
/* ВАЖНО: фон темнее BG (через затемняющий слой + твой bg2) */

body[data-page="hello"] .btn {
    display: grid;
    grid-template-columns: 38px 1fr 22px;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 56px;
    padding: 12px 16px;

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);

    background: rgba(16, 16, 24, 0.589);

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.432),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    text-decoration: none;
    cursor: pointer;

    font-weight: 600;
    color: var(--txt);

    transform: translateZ(0);
    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

body[data-page="hello"] .btn:hover {
    border-color: rgba(245, 193, 91, .26);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

body[data-page="hello"] .btn:active {
    transform: translateY(1px);
}

body[data-page="hello"] .btn:focus-visible {
    outline: none;
    box-shadow:
        0 22px 56px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 0 3px rgba(245, 193, 91, .16);
}

/* ---------- icon ---------- */

body[data-page="hello"] .ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    display: grid;
    place-items: center;
    overflow: hidden;
}

body[data-page="hello"] .ico img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    opacity: .95;
}

body[data-page="hello"] .ico-nakoval img {
    width: 28px;
    height: 24px;
}

/* ---------- text ---------- */

body[data-page="hello"] .txt {
    line-height: 1.1;
}

body[data-page="hello"] .t {
    display: block;
    font-size: 12.8px;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: rgba(219, 221, 228, 0.918);
}

body[data-page="hello"] .s {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .065em;
    text-transform: uppercase;
    color: rgba(245, 193, 91, .72);
}

/* ---------- arrow ---------- */

body[data-page="hello"] .arr {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, .40);
    border-bottom: 2px solid rgba(255, 255, 255, .40);
    transform: rotate(-45deg);
    justify-self: end;
    opacity: .75;
    transition: transform .25s ease, opacity .25s ease;
}

body[data-page="hello"] .btn:hover .arr {
    opacity: .9;
    transform: translateX(2px) rotate(-45deg);
}

/* =========================================================
   TELEGRAM — premium primary
   (оригинальная обводка + перелив внутри + corner sweep border)
   ========================================================= */

body[data-page="hello"] .btn-primary {
    position: relative;
    overflow: hidden;
    border: none;

    /* оригинальная обводка как у остальных */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        0 22px 56px rgba(0, 0, 0, .68);

    background:rgba(16, 16, 24, 0.678);

    background-size:
        220% 220%,
        100% 100%,
        100% 100%,
        100% 100%;

    animation: tg-inner-flow 9s ease-in-out infinite;
}

/* анимированная обводка (corner sweep) */
body[data-page="hello"] .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    background:
        /* тихая рамка */
        linear-gradient(90deg, rgba(245, 193, 91, .04), rgba(245, 193, 91, .04)),
        /* движущийся акцент */
        linear-gradient(90deg,
            rgba(245, 193, 91, 0),
            rgba(245, 193, 91, .38),
            rgba(245, 193, 91, 0));

    background-size: 100% 100%, 28% 100%;
    background-position: 0 0, -40% 0;
    background-repeat: no-repeat;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation: tg-corner-soft 5.6s ease-in-out infinite;
    pointer-events: none;
    opacity: .15;
}

@keyframes tg-inner-flow {
    0% {
        background-position: 0% 50%, 0 0, 0 0, 0 0;
    }

    50% {
        background-position: 100% 50%, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 0% 50%, 0 0, 0 0, 0 0;
    }
}

@keyframes tg-corner-soft {

    0%,
    100% {
        background-position: 0 0, -40% 0;
    }

    50% {
        background-position: 0 0, 140% 0;
    }
}

/* =========================================================
   NOTE
   ========================================================= */

body[data-page="hello"] .note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
}

/* =========================================================
   PITCH BLOCK
   ========================================================= */

body[data-page="hello"] .pitch {
    margin-top: 10px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .08);

    background:
        linear-gradient(145deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .52)),
        linear-gradient(145deg, var(--bg-elevated), #060915);

    padding: 16px 16px 18px;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

body[data-page="hello"] .pitch-title {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
    margin-bottom: 10px;
}

body[data-page="hello"] .pitch-text {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}

/* ---------- kpi ---------- */

body[data-page="hello"] .kpi {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

body[data-page="hello"] .kpi-item {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    padding: 12px 12px 13px;
}

body[data-page="hello"] .kpi-n {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245, 193, 91, .9);
}

body[data-page="hello"] .kpi-t {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 650;
    color: rgba(255, 255, 255, .86);
}

body[data-page="hello"] .kpi-d {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .66);
}

/* ---------- mini cards ---------- */

body[data-page="hello"] .mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
}

body[data-page="hello"] .mini-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    padding: 12px 12px 13px;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}

body[data-page="hello"] .mini-t {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

body[data-page="hello"] .mini-d {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .66);
}

/* =========================================================
   SAFETY: no horizontal scroll on mobile
   ========================================================= */

@media (max-width: 768px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body[data-page="hello"] main.main {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================
   ACCESSIBILITY: reduce motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body[data-page="hello"] .btn,
    body[data-page="hello"] .btn-primary {
        transition: none;
    }

    body[data-page="hello"] .btn-primary {
        animation: none;
    }

    body[data-page="hello"] .btn-primary::before {
        animation: none;
    }
}

/* =========================================================
   HELLO — PROJECTS BLOCK
   ========================================================= */

body[data-page="hello"] .projects {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body[data-page="hello"] .projects-head {
    text-align: center;
    padding: 0 6px;
}

body[data-page="hello"] .projects-title {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

body[data-page="hello"] .projects-sub {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

body[data-page="hello"] .p-card {
    position: relative;
    overflow: hidden;

    display: block;
    padding: 16px 16px 18px;

    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .08);

    background:
        linear-gradient(145deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .55)),
        linear-gradient(145deg, var(--bg-elevated), #060915);

    box-shadow:
        0 18px 44px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    text-decoration: none;
    color: var(--txt);
}

body[data-page="hello"] .p-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body[data-page="hello"] .p-meta {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

body[data-page="hello"] .p-count {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245, 193, 91, .86);
}

body[data-page="hello"] .p-name {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92);
}

body[data-page="hello"] .p-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .66);
    max-width: 48ch;
}

body[data-page="hello"] .p-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(245, 193, 91, .82);
}

body[data-page="hello"] .p-arr {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(245, 193, 91, .70);
    border-bottom: 2px solid rgba(245, 193, 91, .70);
    transform: rotate(-45deg);
    opacity: .9;
}

body[data-page="hello"] .p-glow {
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 120%;
    pointer-events: none;

    background: radial-gradient(closest-side at 35% 35%,
            rgba(245, 193, 91, .16),
            rgba(245, 193, 91, 0) 62%);
    opacity: .55;
}

/* =========================================================
   HELLO — SECTIONS (shop-style, light)
   ========================================================= */

body[data-page="hello"] .hello-sections {
    margin-top: 18px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* карточка */
body[data-page="hello"] .hs-card {
    position: relative;
    display: block;

    padding: 16px 16px 18px;
    border-radius: 24px;

    background:
        linear-gradient(145deg,
            rgba(0, 0, 0, .25),
            rgba(0, 0, 0, .55)),
        rgba(16, 16, 24, .58);

    border: 1px solid rgba(255, 255, 255, .10);

    box-shadow:
        0 18px 44px rgba(0, 0, 0, .58),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    text-decoration: none;
    color: var(--txt);
}

/* верхняя строка */
body[data-page="hello"] .hs-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-page="hello"] .hs-meta {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

body[data-page="hello"] .hs-tag {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 193, 91, .85);
}

/* контент */
body[data-page="hello"] .hs-title {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .01em;
}

body[data-page="hello"] .hs-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .60);
    max-width: 46ch;
}

/* CTA */
body[data-page="hello"] .hs-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 193, 91, .85);
}

body[data-page="hello"] .hs-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(245, 193, 91, .75);
    border-bottom: 2px solid rgba(245, 193, 91, .75);
    transform: rotate(-45deg);
}

/* заглушки */
body[data-page="hello"] .hs-card.is-soon {
    opacity: .55;
    pointer-events: none;
}

/* =========================================================
   HELLO — AVATAR (single ring only)
   ========================================================= */

body[data-page="hello"] .ava {
    width: 92px;
    height: 92px;
    border-radius: 999px;
    position: relative;
    overflow: visible;
    /* фото обрезаем по кругу */
}

/* одно кольцо вокруг */
body[data-page="hello"] .ava::before {
    content: "";
    position: absolute;
    inset: -6px;
    /* толщина “воздуха” до кольца (крути это) */
    border-radius: 999px;
    pointer-events: none;

    border: 1.5px solid rgba(120, 125, 140, 0.22);
    /* само кольцо */
}

/* фото */
body[data-page="hello"] .ava img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 999px;
    object-fit: cover;
}

/* =========================================================
   HELLO — BACK LINK (← Главная)
   ========================================================= */

@media (max-width: 768px) {

    /* оставляем абсолютное позиционирование, оно правильное */
    body[data-page="hello"] .hero {
        position: relative;
    }

    body[data-page="hello"] .back-link {
        position: absolute;
        left: calc(12px + env(safe-area-inset-left));
        top: 20px;

        display: inline-flex;
        align-items: center;
        gap: 7px;

        height: 28px;
        padding: 0 10px 0 11px;

        border-radius: 999px;
        text-decoration: none;

        /* язык сайта: тихий "стеклянный" pill */
        background: #1e212cab;
        border: 1px solid rgba(255, 255, 255, 0.096);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04);

        color: rgba(255, 255, 255, 0.753);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;

        opacity: .6;
        transition: opacity .2s ease, transform .2s ease;
        z-index: 3;
    }

    body[data-page="hello"] .back-link:active {
        transform: translateY(1px);
        opacity: 1;
    }

    /* стрелка более “UI”, меньше “текст” */
    body[data-page="hello"] .back-arrow {
        width: 7px;
        height: 7px;
        border-left: 2px solid rgba(255, 255, 255, 0.753);
        border-bottom: 2px solid rgba(255, 255, 255, 0.753);
        transform: rotate(45deg);
        margin-top: 1px;
    }

    body[data-page="hello"] .back-text {
        opacity: .9;
    }

    /* анимация тапа */
    body[data-page="hello"] .back-link {
        transform: translateZ(0);
        will-change: transform, opacity, background-color, border-color;
        transition:
            transform .18s ease,
            opacity .18s ease,
            background-color .18s ease,
            border-color .18s ease;
    }

    body[data-page="hello"] .back-link:active {
        transform: translateX(-3px) scale(0.98);
        opacity: 1;
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.10);
    }

    body[data-page="hello"] .back-link:active .back-arrow {
        border-left-color: rgba(255, 255, 255, 0.70);
        border-bottom-color: rgba(255, 255, 255, 0.70);
    }

    /* уважение к настройке "уменьшить движение" */
    @media (prefers-reduced-motion: reduce) {
        body[data-page="hello"] .back-link {
            transition: none;
        }

        body[data-page="hello"] .back-link:active {
            transform: none;
        }
    }
}

/* ———————————————————————— */

@media (max-width: 768px) {

    body[data-page="hello"] .hero {
        position: relative;
    }

    /* ЛЕВО — уже есть */
    body[data-page="hello"] .back-link {
        position: absolute;
        left: calc(12px + env(safe-area-inset-left));
        top: 10px;
        z-index: 3;
    }

    /* ПРАВО — НЕКЛИКАБЕЛЬНЫЙ ЯКОРЬ */
    body[data-page="hello"] .nav-label {
        position: absolute;
        right: calc(12px + env(safe-area-inset-right));
        top: 10px;

        display: inline-flex;
        align-items: center;
        height: 28px;
        padding: 0 10px;

        border-radius: 999px;

        background: #1e212cab;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

        pointer-events: none;
        /* ВАЖНО */
        opacity: .65;
    }

    body[data-page="hello"] .nav-text {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.555);
    }
}

/* ИКОНКА ДЛЯ "ССЫЛКИ" — в том же UI-языке */
body[data-page="hello"] .nav-ico {
    width: 14px;
    height: 14px;
    margin-right: 6px;

    background: url("/assets/icons/link.svg") center / contain no-repeat;

    opacity: .4;
}

@media (max-width: 768px) {

    /* контроллеры */
    body[data-page="hello"] {
        --nav-left-x: 0px;
        --nav-left-y: -16px;
        --nav-left-scale: 0.99;

        --nav-right-x: 1px;
        --nav-right-y: -16px;
        --nav-right-scale: 0.99;
    }

    body[data-page="hello"] .back-link {
        left: calc(12px + env(safe-area-inset-left));
        top: 16px;

        transform:
            translate(var(--nav-left-x), var(--nav-left-y)) scale(var(--nav-left-scale)) translateZ(0);

        transform-origin: left center;
    }

    body[data-page="hello"] .nav-label {
        right: calc(12px + env(safe-area-inset-right));
        top: 16px;

        transform:
            translate(var(--nav-right-x), var(--nav-right-y)) scale(var(--nav-right-scale)) translateZ(0);

        transform-origin: right center;
    }
}