/* Site finale v27 — home density, cap 3D, careers fix, inner pages, z-index, readability */

/* ── Home mesh full viewport ── */
body.p4p-home .p4p-home-canvas,
body.p4p-home #p4p-mesh {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.p4p-home .p4p-global-shader,
body.p4p-home .p4p-universe-bg {
    pointer-events: none;
}

/* Text readability — all home sections */
body.p4p-home .p4p-section__shell,
body.p4p-home .p4p-cap-band,
body.p4p-home .p4p-gateway-fuse,
body.p4p-home .p4p-csgo-core__inner {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

body.p4p-home .p4p-cap-band__intro,
body.p4p-home .p4p-service-card__desc,
body.p4p-home .p4p-gateway-fuse__intro,
body.p4p-home .p4p-csgo-core__desc {
    color: #e2e8f0 !important;
}

/* ── Cap band — gateway-style 3D glass ── */
.p4p-cap-band {
    position: relative;
    padding: clamp(0.65rem, 1.4vh, 0.9rem) clamp(0.85rem, 2vw, 1.15rem) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(167, 139, 250, 0.28) !important;
    background:
        linear-gradient(145deg, rgba(18, 14, 32, 0.96) 0%, rgba(8, 8, 16, 0.92) 100%) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(232, 168, 124, 0.06) !important;
    transform: perspective(900px) rotateX(2deg);
    transform-origin: center bottom;
    overflow: hidden;
}

.p4p-cap-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(167, 139, 250, 0.08) 50%, transparent 65%);
    pointer-events: none;
}

.p4p-cap-band__intro {
    font-size: clamp(0.68rem, 1.05vw, 0.82rem) !important;
    line-height: 1.5 !important;
    max-width: 52ch;
}

.p4p-cap-band__pill {
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s;
}

.p4p-cap-band__pill.is-active,
.p4p-cap-band__pill:hover {
    transform: translateY(-2px) translateZ(8px);
    box-shadow: 0 8px 24px rgba(134, 239, 172, 0.12);
}

.p4p-section--capabilities .p4p-carousel-rotor {
    width: min(252px, 46vw) !important;
    height: min(320px, 32vh) !important;
}

.p4p-carousel-card {
    transform-style: preserve-3d;
}

.p4p-carousel-card.is-front {
    transform: translateZ(24px) scale(1.02);
}

/* Cap rail — smoother 3D */
.p4p-cap-rail {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(6, 8, 14, 0.88) !important;
    padding: 0.5rem 0.65rem !important;
    transform: perspective(800px) rotateX(1.5deg);
}

.p4p-cap-rail__fill {
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 0 16px rgba(232, 168, 124, 0.45);
}

.p4p-cap-rail__node {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, box-shadow 0.3s !important;
}

.p4p-cap-rail__node.is-active {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 20px rgba(232, 168, 124, 0.25);
}

/* Main timeline HUD */
.p4p-tl-minimal {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.p4p-tl-minimal__fill {
    transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.p4p-tl-minimal__node {
    transition: transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease !important;
}

.p4p-tl-minimal__node.is-active {
    transform: scale(1.12);
}

/* Gateway — tighter, denser */
.p4p-section--gateway .p4p-section__shell {
    max-width: min(920px, 94vw);
    margin: 0 auto;
}

.p4p-portals-3d {
    gap: clamp(0.75rem, 2vw, 1.25rem) !important;
}

.p4p-portal-door {
    min-height: clamp(180px, 22vh, 240px) !important;
}

/* ── Careers fix ── */
.p4p-careers-wheel,
.p4p-careers-globe {
    overflow: hidden !important;
    position: relative;
    max-width: min(100%, 520px);
    margin: 0 auto;
}

.p4p-csgo-stage {
    overflow: hidden !important;
    position: relative;
    isolation: isolate;
}

.p4p-csgo-side-preview {
    position: absolute !important;
    left: auto !important;
    right: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: min(220px, 38vw) !important;
    max-height: 280px;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
}

.p4p-csgo-core__logo {
    opacity: 0.18 !important;
    pointer-events: none !important;
}

.p4p-csgo-core__logo img,
.p4p-brand--csgo .p4p-brand__img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(232, 168, 124, 0.35));
}

.p4p-csgo-node::after {
    display: none !important;
}

.p4p-csgo-bolts {
    pointer-events: none !important;
    z-index: 2;
}

.p4p-csgo-core {
    z-index: 5;
    position: relative;
}

.p4p-csgo-node__content {
    pointer-events: auto;
}

@media (max-width: 900px) {
    .p4p-csgo-side-preview {
        display: none !important;
    }
}

/* ── Inner pages density (portfolio / about / services) ── */
.p4p-page--grid-full .p4p-services-main__inner,
.p4p-page--grid-full .p4p-portfolio-main__inner,
.p4p-page--grid-full .p4p-about-main__inner {
    max-width: min(1160px, calc(100% - clamp(1rem, 3vw, 2rem))) !important;
}

.p4p-pf-showcase-wrap {
    max-width: 1160px !important;
    margin-left: auto;
    margin-right: auto;
}

.p4p-pf-hero,
.p4p-abt-hero-studio {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.p4p-portfolio-card,
.p4p-abt-chapter,
.p4p-service-card {
    transform-style: preserve-3d;
}

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

.p4p-page--about .p4p-abt-chapter__grid {
    gap: 1rem !important;
}

/* Reading rail — dedicated element (no ::before conflict with v14 glow) */
.p4p-page--portfolio .p4p-read-rail,
.p4p-page--about .p4p-read-rail {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    top: calc(var(--p4p-header, 72px) + 1rem);
    bottom: 1rem;
    width: 2px;
    z-index: 60;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.p4p-page--portfolio .p4p-read-rail__fill,
.p4p-page--about .p4p-read-rail__fill {
    display: block;
    width: 100%;
    height: 0;
    max-height: 100%;
    background: linear-gradient(180deg, #e8a87c, #a78bfa);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
    transition: height 0.15s ease-out;
}

@media (max-width: 768px) {
    .p4p-page--portfolio .p4p-read-rail,
    .p4p-page--about .p4p-read-rail {
        display: none;
    }
}

/* Z-index stack fix */
.p4p-grid-dock {
    z-index: 9000 !important;
}

.p4p-header {
    z-index: 9500 !important;
}

.p4p-page--grid-full .p4p-services-main__inner {
    position: relative;
    z-index: 3;
    isolation: isolate;
}

.p4p-page-mesh {
    z-index: 0 !important;
}

.p4p-mesh-readability {
    z-index: 1 !important;
}

/* Services hub tighter hero */
.p4p-page--services .p4p-services-hero-v2,
.p4p-page--services .p4p-services-section__shell {
    max-width: min(1100px, 94vw);
    margin-left: auto;
    margin-right: auto;
}

.p4p-page--services .p4p-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
}