/* ============ ÁÀÇÀ ============ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --bg: #0a0a0a;
    --bg-2: #111111;
    --text: #f5f5f5;
    --muted: #8a8a8a;
    --line: rgba(255,255,255,.08);
    --red: #e11d2a;
    --amber: #ffb703;
    --radius: 22px;
    --ease: cubic-bezier(.22,1,.36,1);
    --mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        opacity: .04;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

img, video {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

::selection {
    background: var(--red);
    color: #fff
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px
}

    ::-webkit-scrollbar-thumb:hover {
        background: #3a3a3a
    }

.wrap {
    width: min(1200px,92vw);
    margin-inline: auto
}

section {
    padding: clamp(80px,12vh,150px) 0;
    position: relative
}

/* ============ ÏÐÎÃÐÅÑÑ + ÊÓÐÑÎÐ ============ */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg,var(--red),var(--amber));
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 1000;
}

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(225,29,42,.14),transparent 65%);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    will-change: transform;
}

@media (hover:none) {
    .cursor-glow {
        display: none
    }
}

/* ============ ÍÀÂÈÃÀÖÈß ============ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    transition: background .4s ease,backdrop-filter .4s ease,border-color .4s ease,padding .4s ease;
    border-bottom: 1px solid transparent;
    padding: 18px 0;
}

    .nav.is-scrolled {
        background: rgba(10,10,10,.72);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        border-bottom-color: var(--line);
        padding: 12px 0;
    }

.nav__inner {
    width: min(1200px,92vw);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.logo {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

    .logo span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--red),var(--amber));
        box-shadow: 0 0 14px rgba(225,29,42,.9);
    }

/* RENDER-áåéäæ â øàïêå, ðÿäîì ñ ôàìèëèåé */
.render-badge {
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 4px 9px 4px 8px;
    border-radius: 6px;
    background: rgba(10,10,10,.55);
    border: 1px solid rgba(255,183,3,.28);
    color: var(--amber);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .3s ease,transform .3s ease;
    pointer-events: none;
    white-space: nowrap;
}

    .render-badge.is-active {
        opacity: 1;
        transform: translateX(0)
    }

.render-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber);
    animation: pulse 1.2s ease-in-out infinite;
}

@media (max-width:560px) {
    .render-badge {
        display: none
    }
}

.nav__links {
    display: flex;
    gap: 32px;
    list-style: none
}

    .nav__links a {
        font-size: .9rem;
        color: var(--muted);
        font-weight: 500;
        position: relative;
        transition: color .3s ease;
    }

        .nav__links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg,var(--red),var(--amber));
            transform: scaleX(0);
            transform-origin: 0 50%;
            transition: transform .4s var(--ease);
        }

        .nav__links a:hover {
            color: var(--text)
        }

            .nav__links a:hover::after {
                transform: scaleX(1)
            }

.burger {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 1001;
}

    .burger span {
        position: absolute;
        left: 9px;
        width: 22px;
        height: 1.5px;
        background: var(--text);
        transition: transform .35s var(--ease),opacity .25s ease;
    }

        .burger span:nth-child(1) {
            top: 16px
        }

        .burger span:nth-child(2) {
            top: 23px
        }

    .burger.is-open span:nth-child(1) {
        transform: translateY(3.5px) rotate(45deg)
    }

    .burger.is-open span:nth-child(2) {
        transform: translateY(-3.5px) rotate(-45deg)
    }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 899;
    background: rgba(10,10,10,.96);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateY(-100%);
    transition: transform .6s var(--ease);
}

    .mobile-menu.is-open {
        transform: translateY(0)
    }

    .mobile-menu a {
        font-size: clamp(1.8rem,8vw,2.6rem);
        font-weight: 700;
        letter-spacing: -.03em;
        padding: 10px 0;
        color: var(--muted);
        transition: color .3s ease;
    }

        .mobile-menu a:hover {
            color: var(--text)
        }

/* ============ ÊÍÎÏÊÈ ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 100px;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .35s var(--ease),box-shadow .35s var(--ease),background .35s ease,color .3s ease,border-color .3s ease;
    position: relative;
    overflow: hidden;
}

.btn--primary {
    background: linear-gradient(135deg,var(--red),var(--amber));
    color: #0a0a0a;
    box-shadow: 0 8px 30px -10px rgba(225,29,42,.7);
}

    .btn--primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px -10px rgba(225,29,42,.9)
    }

.btn--ghost {
    border-color: var(--line);
    color: var(--text);
    background: rgba(255,255,255,.02)
}

    .btn--ghost:hover {
        border-color: rgba(255,183,3,.5);
        color: var(--amber);
        background: rgba(255,183,3,.05);
        transform: translateY(-3px)
    }

.btn--sm {
    padding: 11px 22px;
    font-size: .85rem
}

.btn--logo {
    padding-left: 20px;
    padding-right: 20px
}

/* ============ HERO ============ */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    will-change: transform;
}

.orb--1 {
    width: 520px;
    height: 520px;
    top: -12%;
    left: -8%;
    background: radial-gradient(circle,#a01020,transparent 70%);
    animation: float1 18s ease-in-out infinite;
}

.orb--2 {
    width: 460px;
    height: 460px;
    bottom: -18%;
    right: -6%;
    background: radial-gradient(circle,#7a4a00,transparent 70%);
    animation: float2 22s ease-in-out infinite;
}

.orb--3 {
    width: 340px;
    height: 340px;
    top: 38%;
    left: 52%;
    background: radial-gradient(circle,#c81828,transparent 70%);
    opacity: .28;
    animation: float1 26s ease-in-out infinite reverse;
}

@keyframes float1 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(80px,60px) scale(1.12)
    }
}

@keyframes float2 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-70px,-50px) scale(1.1)
    }
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 45%,#000 30%,transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%,#000 30%,transparent 100%);
}

/* Bezier-êðèâûå êàê â motion paths AE */
.bezier-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .55;
}

.bezier-path {
    fill: none;
    stroke: rgba(225,29,42,.35);
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
    animation: dashMove 30s linear infinite;
}

.bezier-path--2 {
    stroke: rgba(255,183,3,.28);
    animation-duration: 42s;
    animation-direction: reverse;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -200;
    }
}

.bezier-anchor {
    fill: var(--amber);
    filter: drop-shadow(0 0 6px rgba(255,183,3,.85));
}

.bezier-anchor--2 {
    fill: var(--red);
    filter: drop-shadow(0 0 6px rgba(225,29,42,.85))
}

.hero__content {
    position: relative;
    z-index: 2;
    width: min(1200px,92vw);
    margin-inline: auto
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: rgba(255,255,255,.025);
    margin-bottom: 32px;
}

    .eyebrow::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 10px var(--amber);
        animation: pulse 2s ease-in-out infinite;
    }

@keyframes pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.8)
    }
}

.hero__title {
    font-size: clamp(2rem,7vw,5.5rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.045em;
    margin-bottom: 30px;
}

    .hero__title .line {
        display: block;
        overflow: hidden;
        padding-bottom: .08em
    }

        .hero__title .line > span {
            display: block;
            transform: translateY(115%);
            animation: lineUp 1.1s var(--ease) forwards;
            animation-delay: var(--d,0s);
        }

@keyframes lineUp {
    to {
        transform: translateY(0)
    }
}

.gradient-text {
    background: linear-gradient(100deg,#ff2d3f,#ffb703 55%,#ff6a00 95%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 200% 50%
    }
}

.hero__sub {
    font-size: clamp(1rem,1.35vw,1.15rem);
    color: var(--muted);
    max-width: 620px;
    margin-bottom: 42px;
    font-weight: 300;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 52px
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px,5vw,64px);
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

.stat__num {
    font-size: clamp(1.6rem,3vw,2.2rem);
    font-weight: 700;
    letter-spacing: -.04em;
    background: linear-gradient(135deg,#fff,#8a8a8a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat__label {
    font-size: .8rem;
    color: var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase
}

.scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #555;
}

.scroll-hint__line {
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg,var(--red),transparent);
    animation: scrollLine 2.2s ease-in-out infinite;
    transform-origin: top;
}

@keyframes scrollLine {
    0% {
        transform: scaleY(0);
        opacity: 0
    }

    40% {
        transform: scaleY(1);
        opacity: 1
    }

    100% {
        transform: scaleY(1);
        opacity: 0
    }
}

/* ============ ÀÍÈÌÀÖÈß ÏÎßÂËÅÍÈß ============ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s);
}

    .reveal.is-visible {
        opacity: 1;
        transform: none
    }

@media (prefers-reduced-motion:reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

/* ============ ÇÀÃÎËÎÂÊÈ ÑÅÊÖÈÉ ============ */
.sec-head {
    margin-bottom: clamp(44px,7vw,80px);
    max-width: 760px
}

.sec-label {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .sec-label::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background: var(--amber);
        transform: rotate(45deg);
        box-shadow: 0 0 8px rgba(255,183,3,.7);
        border-radius: 1px;
    }

.sec-title {
    font-size: clamp(1.9rem,4.6vw,3.4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.06;
}

.sec-desc {
    color: var(--muted);
    margin-top: 20px;
    font-size: 1.02rem;
    font-weight: 300;
    max-width: 600px
}

/* ============ ÎÁÎ ÌÍÅ / ÒÀÉÌËÀÉÍ ============ */
.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px,6vw,90px);
    align-items: start;
}

.about__text p {
    color: var(--muted);
    margin-bottom: 20px;
    font-weight: 300;
    font-size: 1.02rem
}

.about__text strong {
    color: var(--text);
    font-weight: 600
}

.timeline {
    position: relative;
    padding-left: 34px
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 5px;
        top: 8px;
        bottom: 8px;
        width: 1px;
        background: linear-gradient(180deg,var(--red),var(--amber),transparent);
        opacity: .55;
    }

.tl-item {
    position: relative;
    padding-bottom: 38px
}

    .tl-item:last-child {
        padding-bottom: 0
    }

    .tl-item::before {
        content: '';
        position: absolute;
        left: -34px;
        top: 7px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--bg);
        border: 1.5px solid var(--red);
        box-shadow: 0 0 0 4px rgba(225,29,42,.12);
        transition: background .4s ease,box-shadow .4s ease,border-color .4s ease;
    }

    .tl-item:hover::before {
        background: var(--red);
        border-color: var(--amber);
        box-shadow: 0 0 0 6px rgba(225,29,42,.2)
    }

.tl-year {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--amber);
    margin-bottom: 6px;
}

.tl-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: -.015em
}

.tl-desc {
    font-size: .9rem;
    color: var(--muted);
    font-weight: 300;
    line-height: 1.55
}

/* ============ ÍÀÂÛÊÈ ============ */
.skills__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-bottom: 70px;
}

.skill {
    flex: 0 1 320px;
    min-width: 260px;
    max-width: 360px;
    padding: 30px 26px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
    transition: transform .5s var(--ease),border-color .4s ease,background .4s ease;
    position: relative;
    overflow: hidden;
}

    .skill::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(400px circle at 50% 0%,rgba(225,29,42,.15),transparent 70%);
        opacity: 0;
        transition: opacity .5s ease;
    }

    .skill:hover {
        transform: translateY(-6px);
        border-color: rgba(225,29,42,.4)
    }

        .skill:hover::before {
            opacity: 1
        }

/* Bezier-êðèâàÿ â óãëó êàðòî÷êè (motion path èç AE) */
.skill__bezier {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 80px;
    height: 52px;
    opacity: .22;
    pointer-events: none;
    transition: opacity .4s ease;
}

    .skill__bezier path {
        fill: none;
        stroke: var(--amber);
        stroke-width: 1.2;
        stroke-dasharray: 3 3;
    }

    .skill__bezier circle {
        fill: var(--amber);
        filter: drop-shadow(0 0 4px rgba(255,183,3,.7));
    }

.skill:hover .skill__bezier {
    opacity: .5
}

.skill__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    background: linear-gradient(135deg,rgba(225,29,42,.2),rgba(255,183,3,.15));
    border: 1px solid rgba(225,29,42,.3);
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
}

.skill__name {
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    letter-spacing: -.015em
}

.skill__desc {
    font-size: .87rem;
    color: var(--muted);
    font-weight: 300;
    position: relative;
    z-index: 1;
    line-height: 1.55
}

/* Áåãóùàÿ ñòðîêà */
.marquee {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 26px 0;
    mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 32s linear infinite
}

.marquee:hover .marquee__track {
    animation-play-state: paused
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

.marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0
}

    .marquee__group span {
        font-size: clamp(1.1rem,2.4vw,1.7rem);
        font-weight: 700;
        letter-spacing: -.03em;
        padding: 0 28px;
        color: #3a3a3a;
        white-space: nowrap;
        transition: color .3s ease;
    }

        .marquee__group span:hover {
            color: var(--text)
        }

        .marquee__group span.dot {
            color: var(--red);
            padding: 0;
            font-size: 1rem
        }

/* ============ ÏÎÐÒÔÎËÈÎ ============ */
.work__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 22px;
}

.card--horizontal {
    flex: 1 1 480px;
    max-width: 589px
}

.card--vertical {
    flex: 1 1 240px;
    max-width: 283px
}

.card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-2);
    transition: transform .5s var(--ease),border-color .4s ease,box-shadow .5s var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
    min-width: 0;
}

    .card:hover {
        border-color: rgba(225,29,42,.45);
        box-shadow: 0 30px 70px -30px rgba(225,29,42,.55);
    }

.card__link {
    display: block
}

.card__media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(140deg,var(--g1),var(--g2));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter .4s ease;
    contain: layout paint;
}

.card--vertical .card__media {
    aspect-ratio: 9/16
}

.card__media.has-poster {
    filter: saturate(.95)
}

.card:hover .card__media.has-poster {
    filter: saturate(1.05) brightness(1.05)
}

.card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
    background: #000;
}

.card__media.is-playing .card__video {
    opacity: 1
}

.card__media.is-playing::after {
    background: linear-gradient(180deg,transparent 55%,rgba(10,10,10,.75));
}

.card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 40%,rgba(10,10,10,.88));
    z-index: 2;
    transition: background .4s ease;
}

.card__noise {
    position: absolute;
    inset: 0;
    opacity: .35;
    z-index: 1;
    background: radial-gradient(circle at 25% 20%,rgba(255,255,255,.12),transparent 45%), radial-gradient(circle at 80% 80%,rgba(255,183,3,.1),transparent 55%);
    pointer-events: none;
    transition: opacity .4s ease;
}

.card__media.is-playing .card__noise {
    opacity: .15
}

.card__glow {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,183,3,.2),transparent 60%);
    pointer-events: none;
}

.card:hover .card__glow {
    opacity: 1
}

.card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
    transform: translate(-50%,-50%) scale(.7);
    opacity: 0;
    transition: transform .5s var(--ease),opacity .4s ease,background .3s ease,border-color .3s ease;
}

.card--vertical .card__play {
    width: 54px;
    height: 54px
}

.card:hover .card__play {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    background: rgba(225,29,42,.7);
    border-color: rgba(255,183,3,.5);
}

.card__media.is-playing .card__play {
    transform: translate(-50%,-50%) scale(.92);
    opacity: .9;
    background: rgba(10,10,10,.55);
}

.card:hover .card__media.is-playing .card__play {
    background: rgba(225,29,42,.85);
    transform: translate(-50%,-50%) scale(1);
}

.card__play svg {
    margin-left: 3px
}

.card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 4;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(10,10,10,.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,183,3,.35);
    color: var(--amber);
}

.card__badge--4k {
    left: auto;
    right: 16px;
    background: var(--amber);
    color: #0a0a0a;
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(255,183,3,.7);
}

.card__body {
    padding: 24px 24px 26px
}

.card--vertical .card__body {
    padding: 18px 18px 20px
}

.card__title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 8px;
    transition: color .3s ease;
}

.card--vertical .card__title {
    font-size: 1rem;
    margin-bottom: 6px
}

.card:hover .card__title {
    color: #ff4d5b
}

.card__desc {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 300;
    margin-bottom: 16px;
    line-height: 1.55
}

.card--vertical .card__desc {
    font-size: .82rem;
    margin-bottom: 12px
}

.card__meta {
    display: flex;
    gap: 14px;
    font-size: .74rem;
    color: #5f5f5f;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}

.card--vertical .card__meta {
    font-size: .68rem;
    gap: 10px
}

.card__meta span {
    display: flex;
    align-items: center;
    gap: 6px
}

    .card__meta span + span::before {
        content: '';
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #3a3a3a
    }

/* ============ ÊÎÍÒÀÊÒÛ ============ */
.contact {
    text-align: center;
    position: relative;
    overflow: hidden
}

    .contact::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(225,29,42,.15),transparent 65%);
        pointer-events: none;
    }

.contact__inner {
    position: relative;
    z-index: 2
}

.contact__title {
    font-size: clamp(2rem,6vw,4.2rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.05;
    margin-bottom: 22px;
}

.contact__desc {
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 44px;
    font-weight: 300
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center
}

/* ============ ÔÓÒÅÐ ============ */
.footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    color: #5f5f5f;
}

    .footer a {
        transition: color .3s ease
    }

        .footer a:hover {
            color: var(--amber)
        }

/* ============ ÌÎÄÀËÜÍÎÅ ÎÊÍÎ ============ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px,4vw,48px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease),visibility .35s var(--ease);
}

    .modal.is-open {
        opacity: 1;
        visibility: visible
    }

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5,5,5,.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.modal__dialog {
    position: relative;
    width: min(1200px,100%);
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 40px 100px -20px rgba(225,29,42,.5), 0 0 0 1px rgba(255,183,3,.06);
    transform: scale(.94);
    opacity: 0;
    transition: transform .45s var(--ease),opacity .35s ease,width .3s ease,height .3s ease;
}

.modal.is-open .modal__dialog {
    transform: scale(1);
    opacity: 1
}

.modal__dialog[data-orientation="vertical"] {
    width: auto;
    height: min(88vh,100%);
    max-width: 100%;
    aspect-ratio: 9/16;
}

.modal__player {
    width: 100%;
    height: 100%;
    background: #000;
    display: grid;
    place-items: center;
    position: relative;
}

    .modal__player video {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        background: #000;
        object-fit: contain;
    }

    .modal__player::before {
        content: '';
        position: absolute;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.12);
        border-top-color: var(--amber);
        animation: modalSpin .9s linear infinite;
        opacity: 0;
        transition: opacity .2s ease;
        pointer-events: none;
    }

    .modal__player.is-loading::before {
        opacity: 1
    }

@keyframes modalSpin {
    to {
        transform: rotate(360deg)
    }
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(10,10,10,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background .3s ease,transform .4s var(--ease),border-color .3s ease;
}

    .modal__close:hover {
        background: var(--red);
        border-color: var(--amber);
        transform: rotate(90deg) scale(1.05);
    }

/* ============ ÀÄÀÏÒÈÂ ============ */
@media (max-width:900px) {
    .about__grid {
        grid-template-columns: 1fr;
        gap: 56px
    }

    .nav__links, .nav .btn--sm {
        display: none
    }

    .burger {
        display: block
    }

    .card--horizontal {
        flex: 1 1 100%;
        max-width: 100%
    }

    .card--vertical {
        flex: 1 1 calc(50% - 11px);
        max-width: calc(50% - 11px)
    }

    .skill {
        flex: 1 1 calc(50% - 9px);
        max-width: calc(50% - 9px)
    }
}

@media (max-width:560px) {
    .hero {
        padding-top: 110px
    }

    .hero__actions {
        gap: 10px
    }

    .btn {
        padding: 13px 24px;
        font-size: .88rem
    }

    .stats {
        gap: 26px
    }

    .card--horizontal,
    .card--vertical {
        flex: 1 1 100%;
        max-width: 100%
    }

    .skill {
        flex: 1 1 100%;
        max-width: 100%
    }

    .work__grid {
        gap: 16px
    }

    .card__play {
        opacity: 1;
        transform: translate(-50%,-50%) scale(.85)
    }

    .modal {
        padding: 0
    }

    .modal__dialog {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        border: 0;
    }

        .modal__dialog[data-orientation="vertical"] {
            width: 100%;
            height: 100%;
            aspect-ratio: auto;
        }

    .modal__close {
        top: 12px;
        right: 12px
    }
}
/* ============ ÑÊÐÛÒÀß ÑÑÛËÊÀ Â ÔÓÒÅÐÅ ============ */
.footer__ghost {
    color: transparent;
    font-size: .7rem;
    padding: 0 8px;
    user-select: none;
    cursor: default;
    transition: color .25s ease;
}

    .footer__ghost:hover {
        color: #3a3a3a;
    }