/* Desktop compact pass v3
   Keeps the original proportions much closer to the base design,
   but scales the desktop presentation down in a more uniform way. */
@media (min-width: 992px) {
    html{
        font-size: 14.5px;
    }

    body{
        letter-spacing: normal;
    }

    .pf-header{
        padding: 10px 16px 0;
    }

    .pf-header__nav{
        max-width: 1180px;
        min-height: 78px;
        padding: 11px 16px;
        gap: 16px;
        border-radius: 24px;
    }

    .pf-header__brand-panel{
        gap: 9px;
        padding: 7px 12px 7px 8px;
        border-radius: 18px;
    }

    .pf-header__logo-icon{
        width: 72px !important;
        height: 72px !important;
        border-radius: 0;
    }

    .pf-header__logo-text{
        font-size: clamp(0.96rem, 1vw, 1.22rem);
        letter-spacing: 0.14em;
    }

    .pf-header__menu{
        gap: 7px;
        padding: 4px;
        border-radius: 18px;
    }

    .pf-header__link{
        min-height: 40px;
        padding: 0 13px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.12em !important;
    }

    .pf-about-section{
        padding-top: 104px;
        padding-bottom: 112px;
    }

    .pf-about-section{
        padding-top: 156px;
    }

    .pf-about-section::before{
        inset: 22px 16px;
        border-radius: 32px;
    }

    .pf-about-stack{
        max-width: 1180px;
        margin: 0 auto;
        padding: 0;
        gap: 24px;
    }

    .pf-about-shell, .pf-about-contact-shell, .pf-footer-panel{
        max-width: 1100px;
        padding: 32px;
        border-radius: 32px;
    }

    .pf-about-shell, .pf-about-contact-shell{
        max-width: 1180px;
    }

    .pf-about-shell::before, .pf-about-contact-shell::before, .pf-footer-panel::before{
        inset: 8px;
        border-radius: 24px;
    }

    .pf-about-shell::after, .pf-about-contact-shell::after, .pf-footer-panel::after{
        bottom: -34px;
        height: 68px;
    }

    .pf-about-contact-grid{
        gap: 24px;
    }

    

    

    .pf-about-contact-title{
        font-size: clamp(1.65rem, 1.46rem + 0.68vw, 2.32rem);
        line-height: 1.1;
        letter-spacing: 0.04em;
    }

    .pf-about-contact-back-title{
        font-size: clamp(1.42rem, 1.30rem + 0.52vw, 2.02rem);
        line-height: 1.14;
        letter-spacing: 0.04em;
    }

    

    .pf-about-contact-subtitle{
        font-size: clamp(1.04rem, 0.98rem + 0.22vw, 1.16rem);
        line-height: 1.78;
    }

    .pf-footer-brand, .pf-footer-section{
        border-radius: 24px;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    .pf-footer-shell{
        padding: 52px 16px 22px;
    }

    .pf-footer-panel{
        gap: 24px;
    }

    .pf-footer-brand, .pf-footer-section{
        padding: 18px 16px;
    }

    .pf-footer-brand{
        gap: 14px;
    }

    .pf-footer-logo{
        gap: 14px;
    }

    .pf-footer-logo-icon{
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .pf-footer-prism-shape{
        width: 24px;
        height: 24px;
    }

    .pf-footer-logo-text{
        font-size: clamp(1.12rem, 0.98rem + 0.48vw, 1.46rem);
    }

    .pf-footer-description, .pf-footer-links a, .pf-footer-legal, .pf-footer-signature{
        font-size: 0.84rem;
    }

    .pf-footer-social{
        gap: 9px;
    }

    .pf-footer-social-icon{
        width: 36px;
        height: 36px;
    }

    .pf-footer-meta{
        padding: 14px 16px;
        border-radius: 18px;
    }
}

@media (min-width: 992px) {
    /* ===== Final desktop override for the real About roller on Index ===== */
    .pf-about-contact-panel{
        border-color: rgba(45, 140, 255, 0.76);
        box-shadow:
            0 0 0 1px rgba(111,212,255,0.10),
            0 0 20px rgba(45,140,255,0.14),
            0 0 38px rgba(111,212,255,0.08),
            inset 0 1px 0 rgba(111,212,255,0.18),
            inset 0 0 0 1px rgba(111,212,255,0.04),
            inset 0 -1px 0 rgba(45,140,255,0.06),
            0 36px 92px rgba(1, 11, 31, 0.38),
            0 80px 182px rgba(0,0,0,0.56);
    }

    .pf-about-contact-panel::after{
        inset: 10px;
        border-radius: 22px;
    }

    .pf-about-feature-card, .pf-about-stat-card, .pf-about-skill-card, .pf-about-contact-list-card, .pf-about-form-shell, .pf-about-portal-shell{
        border-color: rgba(45, 140, 255, 0.68);
        box-shadow:
            0 0 0 1px rgba(111,212,255,0.10),
            0 0 16px rgba(45,140,255,0.12),
            0 0 30px rgba(111,212,255,0.06),
            inset 0 1px 0 rgba(111,212,255,0.15),
            inset 0 0 0 1px rgba(111,212,255,0.04),
            inset 0 -1px 0 rgba(45,140,255,0.05),
            0 24px 52px rgba(1, 11, 31, 0.48);
    }

    .pf-about-feature-card::before, .pf-about-stat-card::before, .pf-about-skill-card::before, .pf-about-contact-list-card::before, .pf-about-form-shell::before, .pf-about-portal-shell::before{
        inset: 8px;
        border-radius: 16px;
    }
}

@media (min-width: 992px) {
    /* ===== Final desktop override: all About roller faces transparent, inner cards unchanged ===== */
    .pf-about-contact-panel{
        background: transparent !important;
        box-shadow:
            0 0 0 1px rgba(111,212,255,0.10),
            0 0 20px rgba(45,140,255,0.14),
            0 0 38px rgba(111,212,255,0.08),
            inset 0 1px 0 rgba(111,212,255,0.18),
            inset 0 0 0 1px rgba(111,212,255,0.04),
            0 36px 92px rgba(1, 11, 31, 0.38),
            0 80px 182px rgba(0,0,0,0.56) !important;
    }

    .pf-about-contact-panel::before, .pf-about-contact-panel::after{
        background: none !important;
        box-shadow: none !important;
    }
}

@media (min-width: 992px) {
    /* ===== Final desktop override: all inner About roller cards transparent ===== */
    .pf-about-feature-card, .pf-about-stat-card, .pf-about-skill-card, .pf-about-contact-list-card, .pf-about-form-shell, .pf-about-portal-shell{
        background: transparent !important;
        box-shadow:
            0 0 0 1px rgba(111,212,255,0.10),
            0 0 16px rgba(45,140,255,0.12),
            0 0 30px rgba(111,212,255,0.06),
            inset 0 1px 0 rgba(111,212,255,0.15),
            inset 0 0 0 1px rgba(111,212,255,0.04),
            inset 0 -1px 0 rgba(45,140,255,0.05),
            0 24px 52px rgba(1, 11, 31, 0.48) !important;
    }

    .pf-about-feature-card::before, .pf-about-stat-card::before, .pf-about-skill-card::before, .pf-about-contact-list-card::before, .pf-about-form-shell::before, .pf-about-portal-shell::before{
        background: none !important;
    }
}

@media (min-width: 992px) {
    /* Final desktop corrective override: keep the About roller transparent and only tint the frames with the light CTA blue. */
    .pf-about-contact-panel{
        background: transparent !important;
    }

    .pf-about-contact-panel::before{
        background: none !important;
        box-shadow: none !important;
    }

    .pf-about-contact-panel::after{
        background: none !important;
        box-shadow: none !important;
    }

    .pf-about-feature-card, .pf-about-stat-card, .pf-about-skill-card, .pf-about-contact-list-card, .pf-about-form-shell, .pf-about-portal-shell{
        background: transparent !important;
    }

    .pf-about-feature-card::before, .pf-about-stat-card::before, .pf-about-skill-card::before, .pf-about-contact-list-card::before, .pf-about-form-shell::before, .pf-about-portal-shell::before{
        background: none !important;
    }
}

/* ===== Desktop override: home roller buttons and badges pop more in 3D ===== */

/* ===== Desktop clamp: make roller controls visibly 3D ===== */

/* ===== Patch 2026-04-03 final decisive desktop clamp for ultra 3D roller cards ===== */

/* ===== Patch 2026-04-03 actual Index about roller inner cards 3D pass ===== */
@media (min-width: 992px) {
    .pf-about-section .pf-about-contact-scroll, .pf-about-section .pf-about-feature-grid, .pf-about-section .pf-about-stat-grid, .pf-about-section .pf-about-skill-grid, .pf-about-section .pf-about-contact-list{
        perspective: 1850px;
        transform-style: preserve-3d;
        overflow: visible;
    }

    .pf-about-section [data-pf-about-inner-card]{
        --pf-about-inner-rx: 0deg;
        --pf-about-inner-ry: 0deg;
        --pf-about-inner-tz: 0px;
        --pf-about-inner-shift-y: 0px;
        --pf-about-inner-pointer-x: 50%;
        --pf-about-inner-pointer-y: 18%;
        --pf-about-inner-glow: 0;
        position: relative;
        transform-style: preserve-3d;
        isolation: isolate;
        will-change: transform, box-shadow, filter;
        overflow: visible !important;
        transition:
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 260ms ease,
            border-color 220ms ease,
            filter 220ms ease;
        transform:
            perspective(1850px)
            rotateX(var(--pf-about-inner-rx))
            rotateY(var(--pf-about-inner-ry))
            translate3d(0, var(--pf-about-inner-shift-y), var(--pf-about-inner-tz))
            scale(1.002) !important;
        border-color: rgba(118, 214, 255, 0.72) !important;
        box-shadow:
            0 0 0 1px rgba(169,236,255,0.14),
            0 10px 22px rgba(1,11,31,0.24),
            0 18px 36px rgba(1,11,31,0.34),
            0 calc(8px + (10px * var(--pf-about-inner-glow))) calc(18px + (18px * var(--pf-about-inner-glow))) rgba(46,142,255,0.10),
            inset 0 1px 0 rgba(255,255,255,0.16),
            inset 0 0 0 1px rgba(169,236,255,0.05),
            inset 0 -1px 0 rgba(84,196,255,0.08) !important;
    }

    .pf-about-section [data-pf-about-inner-card]:hover, .pf-about-section [data-pf-about-inner-card].is-tilting{
        border-color: rgba(169, 236, 255, 0.94) !important;
        filter: saturate(1.03) brightness(1.015);
        box-shadow:
            0 0 0 1px rgba(189,242,255,0.18),
            0 14px 28px rgba(1,11,31,0.28),
            0 24px 48px rgba(1,11,31,0.38),
            0 calc(10px + (12px * var(--pf-about-inner-glow))) calc(22px + (20px * var(--pf-about-inner-glow))) rgba(84,196,255,0.14),
            inset 0 1px 0 rgba(255,255,255,0.22),
            inset 0 0 0 1px rgba(169,236,255,0.08),
            inset 0 -1px 0 rgba(84,196,255,0.12) !important;
    }

    .pf-about-section [data-pf-about-inner-card]::before{
        border-color: rgba(188, 243, 255, 0.22) !important;
        inset: 7px !important;
        border-radius: 20px !important;
        opacity: 0.96;
        background:
            linear-gradient(180deg, rgba(230,248,255,0.20), rgba(230,248,255,0.05) 26%, rgba(230,248,255,0) 58%),
            radial-gradient(circle at var(--pf-about-inner-pointer-x) var(--pf-about-inner-pointer-y), rgba(169,236,255,0.12), rgba(169,236,255,0) 46%) !important;
        transform: translate3d(0, 0, 18px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.10),
            0 0 20px rgba(84,196,255,0.06);
    }

    .pf-about-section [data-pf-about-inner-card]::after{
        left: 14px !important;
        right: 14px !important;
        top: auto !important;
        bottom: -14px !important;
        height: 24px !important;
        border-radius: 999px !important;
        opacity: calc(0.34 + (0.14 * var(--pf-about-inner-glow)));
        filter: blur(8px) !important;
        background: radial-gradient(ellipse at center, rgba(32,118,255,0.34), rgba(6,19,44,0) 74%) !important;
        transform: translate3d(0, 0, -18px) scaleX(0.92);
        z-index: 0 !important;
    }

    .pf-about-section [data-pf-about-inner-card] > *{
        position: relative;
        z-index: 3;
        transform-style: preserve-3d;
    }

    .pf-about-section .pf-about-feature-icon, .pf-about-section .pf-about-stat-icon, .pf-about-section .pf-about-skill-icon, .pf-about-section .pf-about-contact-list-card > span{
        transform: translateZ(34px) rotateX(4deg) rotateY(-2.5deg);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.16),
            0 18px 28px rgba(8,50,128,0.24),
            0 0 24px rgba(84,196,255,0.10) !important;
    }

    .pf-about-section .pf-about-stat-value, .pf-about-section .pf-about-feature-title, .pf-about-section .pf-about-stat-title, .pf-about-section .pf-about-skill-card h3, .pf-about-section .pf-about-skill-card h4, .pf-about-section .pf-about-contact-list-card h5, .pf-about-section .pf-about-portal-title, .pf-about-section .pf-about-portal-subtitle, .pf-about-section .pf-about-form-field span{
        transform: translateZ(18px);
        text-shadow: 0 12px 24px rgba(3,10,24,0.24);
    }

    .pf-about-section .pf-about-feature-text, .pf-about-section .pf-about-stat-text, .pf-about-section .pf-about-skill-card p, .pf-about-section .pf-about-contact-list-card p, .pf-about-section .pf-about-portal-text, .pf-about-section .pf-about-form-field input, .pf-about-section .pf-about-form-field textarea{
        font-size: clamp(1rem, 0.95rem + 0.14vw, 1.08rem);
        line-height: 1.76;
        transform: translateZ(10px);
    }

    .pf-about-section .pf-about-form-field input, .pf-about-section .pf-about-form-field textarea{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.07),
            0 10px 26px rgba(1,11,31,0.22),
            0 0 0 1px rgba(169,236,255,0.03);
    }
}

/* ===== Roller card cleanup: remove top thin line and top glow near badges ===== */
.pf-about-contact-panel > .pf-about-shell-topline, .pf-about-contact-panel > .pf-about-shell-glow{
    display: none !important;
}

/* ===== Roller inner card luxury background pass ===== */
.pf-about-section [data-pf-about-inner-card]{
    background:
        radial-gradient(circle at 18% 10%, rgba(244, 251, 255, 0.18), rgba(244, 251, 255, 0) 30%),
        radial-gradient(circle at 82% 0%, rgba(96, 168, 255, 0.18), rgba(96, 168, 255, 0) 34%),
        radial-gradient(circle at 50% 120%, rgba(20, 86, 208, 0.18), rgba(20, 86, 208, 0) 42%),
        linear-gradient(146deg, rgba(245, 251, 255, 0.12) 0%, rgba(245, 251, 255, 0.05) 10%, rgba(64, 132, 255, 0.08) 24%, rgba(8, 18, 46, 0.94) 58%, rgba(2, 7, 22, 0.98) 100%) !important;
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.pf-about-section [data-pf-about-inner-card]::before{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06) 20%, rgba(255,255,255,0) 56%),
        linear-gradient(125deg, rgba(169,236,255,0.10) 0%, rgba(169,236,255,0.02) 28%, rgba(169,236,255,0) 55%),
        radial-gradient(circle at 78% 18%, rgba(168, 226, 255, 0.12), rgba(168, 226, 255, 0) 36%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 0 22px rgba(94, 176, 255, 0.05),
        0 0 22px rgba(84,196,255,0.06) !important;
}

.pf-about-section .pf-about-portal-shell, .pf-about-section .pf-about-form-shell{
    background:
        radial-gradient(circle at 16% 8%, rgba(244, 251, 255, 0.16), rgba(244, 251, 255, 0) 28%),
        radial-gradient(circle at 86% 0%, rgba(92, 156, 255, 0.16), rgba(92, 156, 255, 0) 34%),
        linear-gradient(145deg, rgba(247, 252, 255, 0.10) 0%, rgba(247, 252, 255, 0.04) 12%, rgba(31, 92, 219, 0.08) 28%, rgba(7, 17, 43, 0.95) 60%, rgba(2, 8, 24, 0.99) 100%) !important;
}

.pf-about-section .pf-about-skill-card, .pf-about-section .pf-about-contact-list-card{
    background:
        radial-gradient(circle at 14% 8%, rgba(250, 252, 255, 0.12), rgba(250, 252, 255, 0) 24%),
        radial-gradient(circle at 88% 0%, rgba(88, 154, 255, 0.14), rgba(88, 154, 255, 0) 28%),
        linear-gradient(148deg, rgba(248, 252, 255, 0.08) 0%, rgba(248, 252, 255, 0.03) 14%, rgba(48, 110, 230, 0.08) 30%, rgba(8, 18, 44, 0.94) 62%, rgba(3, 9, 24, 0.98) 100%) !important;
}

/* ===== Patch 2026-04-06: keep desktop badge overrides shadow-free too ===== */