/**
 * P4PN v2.7 — targeted fixes: home sections, services, inner pages, header, FPS helpers.
 */

/* ═══ HEADER — always fixed ═══ */
body.p4pn-fluid .p4p-header,
body.p4p-home .p4p-header,
body.p4pn-cover-page .p4p-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    transform: none !important;
}

/* ═══ CURSOR — core centered on pointer ═══ */
.p4p-cursor {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.p4p-cursor__trail {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99997 !important;
    pointer-events: none !important;
    transform: none !important;
}

.p4p-cursor__beam-h,
.p4p-cursor__beam-v {
    position: fixed !important;
    transform: none !important;
}

/* Lite cursor on cover — fewer GPU layers */
body.p4pn-cover-page.p4p-fx-cursor .p4p-cursor__orbit,
body.p4pn-cover-page.p4p-fx-cursor .p4p-cursor__ring-2 {
    display: none;
}

/* ═══ HOME SEC 2 — capabilities layout right + organic bg ═══ */
body.p4pn-cover-page .p4p-section--capabilities .p4p-section__shell {
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

body.p4pn-cover-page .p4p-capabilities-stack {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(200px, 0.85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: start;
    width: min(100%, 920px) !important;
    max-width: min(100%, 920px) !important;
    margin-left: auto !important;
    margin-right: clamp(0.5rem, 2cqi, 1.25rem) !important;
    gap: clamp(0.35rem, 1cqi, 0.65rem);
    transform-origin: center center !important;
    z-index: 2;
}

body.p4pn-cover-page .p4p-capabilities-stack::before {
    content: '';
    position: absolute;
    inset: -6% -8% -10% -14%;
    z-index: 0;
    pointer-events: none;
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    background:
        radial-gradient(ellipse 80% 70% at 28% 42%, rgba(167, 139, 250, 0.14) 0%, transparent 62%),
        radial-gradient(ellipse 65% 55% at 78% 28%, rgba(232, 168, 124, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse 90% 80% at 50% 88%, rgba(34, 211, 238, 0.06) 0%, transparent 55%),
        linear-gradient(145deg, rgba(12, 10, 22, 0.55) 0%, rgba(6, 6, 14, 0.35) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 80px rgba(167, 139, 250, 0.06);
}

body.p4pn-cover-page .p4p-cap-band {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    text-align: left !important;
    align-self: start;
}

body.p4pn-cover-page .p4p-cap-band__top {
    align-items: flex-start !important;
}

body.p4pn-cover-page .p4p-cap-band__title {
    background: linear-gradient(120deg, #fff 0%, #f0c4a0 45%, #c4b5fd 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.55));
}

body.p4pn-cover-page .p4p-cap-band__intro {
    text-align: left !important;
    margin-inline: 0 !important;
}

body.p4pn-cover-page .p4p-cap-band__mv {
    justify-content: flex-start !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

body.p4pn-cover-page .p4p-cap-band__pill {
    z-index: 4;
    position: relative;
}

body.p4pn-cover-page .p4p-section--capabilities .p4p-carousel-scene {
    grid-column: 1;
    grid-row: 1 / 3;
    z-index: 5;
    margin-top: 0 !important;
    min-height: min(34vh, 300px) !important;
}

body.p4pn-cover-page .p4p-cap-rail {
    grid-column: 1 / -1;
    grid-row: 3;
    z-index: 6;
}

/* Service cards — desc never under button */
body.p4pn-cover-page .p4p-carousel-card .p4p-service-card__inner {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    height: 100%;
    gap: 0.35rem;
    padding-bottom: 0.65rem !important;
}

body.p4pn-cover-page .p4p-service-card__quote {
    flex-shrink: 0;
    margin-bottom: 0.25rem !important;
}

body.p4pn-cover-page .p4p-service-card__desc {
    flex: 1 1 auto !important;
    margin-bottom: 0.5rem !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    min-height: 0;
}

body.p4pn-cover-page .p4p-service-card__cta {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

/* ═══ GATEWAY — restore 3D portals ═══ */
body.p4pn-cover-page .p4p-portals-3d {
    perspective: 1400px !important;
    transform-style: preserve-3d !important;
    gap: clamp(0.75rem, 2cqi, 1.25rem) !important;
}

body.p4pn-cover-page .p4p-portal-door {
    transform-style: preserve-3d !important;
    transition: transform 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.5s, border-color 0.45s !important;
}

body.p4pn-cover-page .p4p-portal-door--dev {
    transform: rotateY(14deg) translateZ(0) !important;
    border-color: rgba(6, 182, 212, 0.25) !important;
    background: linear-gradient(160deg, rgba(6, 30, 40, 0.92), rgba(4, 8, 18, 0.88)) !important;
}

body.p4pn-cover-page .p4p-portal-door--client {
    transform: rotateY(-14deg) translateZ(0) !important;
    border-color: rgba(217, 70, 239, 0.25) !important;
    background: linear-gradient(160deg, rgba(40, 12, 48, 0.92), rgba(8, 4, 18, 0.88)) !important;
}

@media (hover: hover) {
    body.p4pn-cover-page .p4p-portal-door--dev:hover {
        transform: rotateY(0deg) translateZ(48px) scale(1.02) !important;
        box-shadow: 0 32px 64px rgba(0, 0, 0, 0.75), 0 0 40px rgba(6, 182, 212, 0.35) !important;
        border-color: rgba(6, 182, 212, 0.65) !important;
    }

    body.p4pn-cover-page .p4p-portal-door--client:hover {
        transform: rotateY(0deg) translateZ(48px) scale(1.02) !important;
        box-shadow: 0 32px 64px rgba(0, 0, 0, 0.75), 0 0 40px rgba(217, 70, 239, 0.35) !important;
        border-color: rgba(217, 70, 239, 0.65) !important;
    }
}

body.p4pn-cover-page .p4p-portal-door__hologram {
    animation: holoScan 4s linear infinite !important;
    opacity: 1 !important;
}

/* ═══ CRAFT STUDIO — visible SVG hologram ═══ */
body.p4pn-cover-page .p4p-studio-terminal {
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
    min-height: clamp(280px, 40vh, 420px) !important;
}

body.p4pn-cover-page .p4p-term-display {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    overflow: visible !important;
}

body.p4pn-cover-page .p4p-term-hologram {
    flex: 1 1 auto !important;
    min-height: clamp(160px, 22vh, 220px) !important;
    overflow: visible !important;
    z-index: 2;
}

body.p4pn-cover-page .p4p-term-holo-core.p4p-term-holo--svg,
body.p4pn-cover-page .p4p-term-holo-core {
    font-size: 0 !important;
    width: min(200px, 42cqi) !important;
    height: min(160px, 28cqi) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

body.p4pn-cover-page .p4p-term-holo-svg-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.p4pn-cover-page .p4p-term-holo-svg-wrap .p4p-home-svg {
    width: min(100%, 180px) !important;
    height: auto !important;
    max-height: 150px;
    filter: drop-shadow(0 0 24px rgba(16, 185, 129, 0.45));
}

body.p4pn-cover-page .p4p-term-readout {
    flex-shrink: 0;
    z-index: 3;
}

/* ═══ JOIN US — careers wheel 3D sphere ═══ */
body.p4pn-cover-page .p4p-careers-wheel {
    overflow: visible !important;
    padding: 1rem 0;
}

body.p4pn-cover-page .p4p-csgo-stage {
    transform: rotateX(12deg) scale(0.98) !important;
    box-shadow:
        inset -20px -32px 56px rgba(0, 0, 0, 0.6),
        inset 14px 18px 36px rgba(255, 255, 255, 0.05),
        0 36px 80px rgba(0, 0, 0, 0.55),
        0 0 56px rgba(134, 239, 172, 0.15) !important;
}

body.p4pn-cover-page .p4p-csgo-core {
    border-radius: 50% !important;
    background: radial-gradient(circle at 32% 28%, rgba(134, 239, 172, 0.35) 0%, rgba(16, 185, 129, 0.15) 35%, rgba(6, 6, 14, 0.95) 100%) !important;
    box-shadow:
        inset -8px -12px 24px rgba(0, 0, 0, 0.5),
        inset 6px 8px 16px rgba(255, 255, 255, 0.08),
        0 0 32px rgba(134, 239, 172, 0.35) !important;
}

body.p4pn-cover-page .p4p-csgo-node:nth-child(1) { transform: rotate(0deg) translate(168px) rotate(0deg) !important; }
body.p4pn-cover-page .p4p-csgo-node:nth-child(2) { transform: rotate(60deg) translate(168px) rotate(-60deg) !important; }
body.p4pn-cover-page .p4p-csgo-node:nth-child(3) { transform: rotate(120deg) translate(168px) rotate(-120deg) !important; }
body.p4pn-cover-page .p4p-csgo-node:nth-child(4) { transform: rotate(180deg) translate(168px) rotate(-180deg) !important; }
body.p4pn-cover-page .p4p-csgo-node:nth-child(5) { transform: rotate(240deg) translate(168px) rotate(-240deg) !important; }
body.p4pn-cover-page .p4p-csgo-node:nth-child(6) { transform: rotate(300deg) translate(168px) rotate(-300deg) !important; }

/* Careers node hover — handled in p4pn-v28-home-sections.css (preserve radial transform) */

/* ═══ SERVICES — right timeline, centered content, no default HTML look ═══ */
body.p4pn-services .p4pn-tl {
    left: auto !important;
    right: max(0.65rem, env(safe-area-inset-right)) !important;
    width: clamp(8.5rem, 14cqi, 11rem) !important;
    min-width: clamp(8.5rem, 14cqi, 11rem) !important;
    max-width: clamp(8.5rem, 14cqi, 11rem) !important;
    padding: 0.85rem 0.75rem !important;
    background: rgba(6, 6, 14, 0.94) !important;
    border: 1px solid rgba(167, 139, 250, 0.22) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(167, 139, 250, 0.08) !important;
}

body.p4pn-services .p4pn-tl__node {
    cursor: pointer !important;
    padding: 0.45rem 0.4rem !important;
    border-radius: 8px !important;
}

body.p4pn-services .p4pn-tl__node-label {
    display: block !important;
    font-size: clamp(0.54rem, 1.1cqi, 0.64rem) !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

body.p4pn-services .p4pn-tl__node.is-active {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #e8a87c !important;
}

body.p4pn-services .p4pn-cover-shell {
    padding-left: var(--p4pn-pad-x) !important;
    padding-right: max(var(--p4pn-pad-x), calc(clamp(8.5rem, 14cqi, 11rem) + 1rem)) !important;
    text-align: center;
}

body.p4pn-services .p4p-page-mesh {
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: 1 !important;
}

body.p4pn-services .p4pn-svc-catalog__link,
body.p4pn-services .p4p-svc-card,
body.p4pn-services .p4p-dental-card,
body.p4pn-services .p4p-service-card {
    font-family: var(--p4p-font-ui) !important;
    background: linear-gradient(145deg, rgba(14, 12, 22, 0.92), rgba(8, 8, 14, 0.88)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--p4pn-radius-md, 14px) !important;
    color: #e2e8f0 !important;
}

body.p4pn-services .p4pn-svc-hero__title,
body.p4pn-services .p4pn-title-clear {
    text-align: center;
    color: #fff !important;
}

body.p4pn-services .p4pn-svc-section-head__intro,
body.p4pn-services .p4pn-svc-hero__lead {
    text-align: center;
    margin-inline: auto;
    color: #cbd5e1 !important;
}

/* ═══ BLOG — reduce header gap + card hover sweep ═══ */
body.p4pn-fluid.p4p-page--blog:not(.p4p-page--blog-single) .p4p-services-main__inner {
    padding-top: calc(var(--p4p-header, 72px) + 0.65rem) !important;
}

body.p4pn-fluid .p4pn-blog-hub__head {
    margin-bottom: var(--p4pn-space-sm) !important;
}

body.p4pn-fluid .p4p-blog-adv-card,
body.p4pn-fluid .p4p-blog-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.p4pn-fluid .p4p-blog-adv-card::before,
body.p4pn-fluid .p4p-blog-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, var(--card-accent, #e8a87c) 0%, rgba(167, 139, 250, 0.55) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

body.p4pn-fluid .p4p-blog-adv-card > *,
body.p4pn-fluid .p4p-blog-card > * {
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    body.p4pn-fluid .p4p-blog-adv-card:hover::before,
    body.p4pn-fluid .p4p-blog-card:hover::before {
        opacity: 0.22;
    }

    body.p4pn-fluid .p4p-blog-adv-card:hover,
    body.p4pn-fluid .p4p-blog-card:hover {
        border-color: rgba(232, 168, 124, 0.35) !important;
        transform: translateY(-4px);
    }
}

body.p4pn-fluid .p4p-blog-hub__tags {
    justify-content: center;
    gap: 0.45rem;
}

/* ═══ PORTFOLIO + ABOUT — perf + centering ═══ */
body.p4pn-fluid.p4p-page--portfolio .p4p-page-mesh,
body.p4pn-fluid.p4p-page--about .p4p-page-mesh {
    filter: brightness(1.12) contrast(1.04) saturate(1.08) !important;
}

body.p4pn-fluid.p4p-page--portfolio .p4p-portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
    gap: var(--p4pn-space-sm) !important;
}

body.p4pn-fluid.p4p-page--portfolio .p4p-pf-hero__grid,
body.p4pn-fluid.p4p-page--about .abt-hero-studio__grid,
body.p4pn-fluid.p4p-page--about .p4p-section__head--center {
    text-align: center;
}

body.p4pn-fluid.p4p-page--about .bento-grid,
body.p4pn-fluid.p4p-page--about .why-grid {
    justify-items: stretch;
}

body.p4pn-fluid.p4p-page--portfolio .p4p-portfolio-main__inner,
body.p4pn-fluid.p4p-page--about .p4p-about-main__inner {
    text-align: center;
}

body.p4pn-fluid.p4p-page--portfolio .p4p-portfolio-card__body,
body.p4pn-fluid.p4p-page--about .bento-card__body {
    text-align: left;
}

/* Reduce heavy 3D on inner pages for load time */
body.p4pn-fluid.p4p-page--portfolio .p4p-pf-devices,
body.p4pn-fluid.p4p-page--about .abt-hero-studio__devices {
    transform: scale(0.88);
    will-change: auto;
}

html.p4p-perf-tier-2 body.p4pn-fluid.p4p-page--portfolio .p4p-page-mesh,
html.p4p-perf-tier-2 body.p4pn-fluid.p4p-page--about .p4p-page-mesh {
    opacity: 0.65;
}

/* ═══ FPS — hide heavy ambient on cover ═══ */
body.p4pn-cover-page .p4p-ambient-boxes {
    display: none !important;
}

body.p4pn-cover-page .p4p-ambient-light {
    opacity: 0.65;
    filter: none !important;
}

@media (pointer: coarse) {
    body.p4pn-cover-page .p4p-capabilities-stack {
        grid-template-columns: 1fr !important;
        margin-right: 0 !important;
    }

    body.p4pn-cover-page .p4p-cap-band {
        grid-column: 1;
        text-align: center !important;
    }

    body.p4pn-services .p4pn-tl {
        display: none !important;
    }

    body.p4pn-services .p4pn-cover-shell {
        padding-right: var(--p4pn-pad-x) !important;
    }
}