/* =========================================================
   PRIMESCAPE INFOSOFT — HERO POLISH V2
   Premium first-impression layer

   GOALS
   - Keep the current hero geometry/layout intact.
   - Add richness, depth, light architecture and material.
   - Preserve current laptop/phone composition and parallax JS.
   - Avoid changing responsive transforms/containment.
========================================================= */


/* =========================================================
   01. HERO CANVAS
========================================================= */

.ps-cinematic-hero {
    isolation: isolate;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(186, 197, 224, .42),
            transparent 27%
        ),
        radial-gradient(
            circle at 10% 76%,
            rgba(232, 204, 187, .34),
            transparent 31%
        ),
        radial-gradient(
            circle at 54% 105%,
            rgba(194, 216, 225, .30),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f4f1eb 0%,
            #edf0f4 46%,
            #f1eef5 72%,
            #f4f2ed 100%
        ) !important;
}


/*
 * Deep atmospheric transition at the bottom.
 * This gives the hero a clear cinematic ending instead of
 * fading into another flat pale section.
 */

.ps-cinematic-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 220px;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(218, 225, 232, .10) 28%,
            rgba(201, 211, 221, .28) 65%,
            rgba(188, 200, 211, .38) 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 60%
        );
}


/* =========================================================
   02. AMBIENT FIELD
========================================================= */

.ps-hero-ambient {
    z-index: 0;
}


.ps-hero-ambient::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 48%;

    width: min(980px, 66vw);
    height: min(980px, 66vw);

    transform:
        translate(-6%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.70) 0%,
            rgba(222,226,239,.24) 36%,
            rgba(192,203,221,.08) 57%,
            transparent 72%
        );

    filter:
        blur(8px);

    pointer-events: none;
}


.ps-hero-ambient::after {
    content: "";

    position: absolute;

    right: -7vw;
    top: 7%;

    width: 42vw;
    height: 82%;

    min-width: 520px;

    border-radius:
        55% 0 0 55%;

    opacity: .44;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.44),
            rgba(200,210,231,.14) 40%,
            rgba(165,175,210,.08) 68%,
            transparent
        );

    border-left:
        1px solid
        rgba(255,255,255,.50);

    transform:
        skewX(-5deg);

    pointer-events: none;
}


/* Existing glows — richer but still quiet */

.ps-cinematic-hero .glow-peach {
    opacity: .82;

    background:
        rgba(
            224,
            181,
            158,
            .26
        ) !important;
}


.ps-cinematic-hero .glow-lavender {
    opacity: .90;

    background:
        rgba(
            183,
            180,
            224,
            .34
        ) !important;
}


.ps-cinematic-hero .glow-blue {
    opacity: .78;

    background:
        rgba(
            175,
            205,
            222,
            .28
        ) !important;
}


/* =========================================================
   03. GRID — EDITORIAL / ARCHITECTURAL, NOT "TECH WALLPAPER"
========================================================= */

.ps-cinematic-hero
.ps-hero-grid-pattern {
    opacity: .52;

    background-image:
        linear-gradient(
            rgba(35,48,70,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(35,48,70,.035) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.44) 42%,
            rgba(0,0,0,.18) 70%,
            transparent 100%
        );
}


/* =========================================================
   04. COPY — STRONGER EDITORIAL PRESENCE
========================================================= */

.ps-cinematic-hero
.ps-hero-copy {
    isolation: isolate;
}


.ps-cinematic-hero
.ps-hero-copy::before {
    content: "";

    position: absolute;

    left: -56px;
    top: -44px;

    width: 420px;
    height: 420px;

    z-index: -1;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.62),
            transparent 68%
        );

    filter:
        blur(12px);
}


.ps-cinematic-hero
.ps-hero-kicker {
    border:
        1px solid
        rgba(65,76,118,.11);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.82),
            rgba(243,245,250,.60)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 8px 30px rgba(39,50,79,.055);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.ps-cinematic-hero
.ps-main-heading span {
    text-shadow:
        0 1px 0 rgba(255,255,255,.55);
}


.ps-cinematic-hero
.ps-main-heading strong {
    filter:
        drop-shadow(
            0 10px 28px
            rgba(92,84,194,.10)
        );
}


.ps-cinematic-hero
.ps-hero-text {
    color:
        #677187;

    max-width:
        620px;
}


/* =========================================================
   05. CTA MATERIAL
========================================================= */

.ps-cinematic-hero
.ps-primary-button {
    position: relative;

    overflow: hidden;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 18px 44px rgba(92,71,197,.22),
        0 4px 12px rgba(41,54,88,.08);
}


.ps-cinematic-hero
.ps-primary-button::before {
    content: "";

    position: absolute;

    top: -70%;
    left: -40%;

    width: 38%;
    height: 240%;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.34),
            transparent
        );

    pointer-events: none;

    opacity: .60;

    transition:
        transform .75s cubic-bezier(.16,1,.3,1);
}


.ps-cinematic-hero
.ps-primary-button:hover::before {
    transform:
        translateX(330%)
        rotate(18deg);
}


.ps-cinematic-hero
.ps-secondary-button {
    border:
        1px solid
        rgba(42,55,84,.11);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.70),
            rgba(242,244,248,.50)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 12px 35px rgba(33,45,67,.055);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* =========================================================
   06. CAPABILITY CHIPS
========================================================= */

.ps-cinematic-hero
.ps-hero-capabilities span {
    border:
        1px solid
        rgba(42,55,84,.08);

    background:
        rgba(255,255,255,.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.74);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


/* =========================================================
   07. TECH STAGE — SPATIAL DEPTH WITHOUT GEOMETRY CHANGES
========================================================= */

.ps-cinematic-hero
.ps-tech-stage::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 49%;

    width: 690px;
    height: 540px;

    transform:
        translate(-50%, -50%);

    z-index: -2;

    border-radius:
        46% 54% 58% 42% /
        51% 44% 56% 49%;

    background:
        radial-gradient(
            circle at 44% 38%,
            rgba(255,255,255,.80),
            rgba(209,215,236,.30) 37%,
            rgba(172,186,213,.12) 58%,
            transparent 73%
        );

    filter:
        blur(8px);

    pointer-events: none;
}


.ps-cinematic-hero
.ps-tech-stage::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 32px;

    width: 640px;
    height: 80px;

    z-index: -1;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(46,62,94,.18),
            rgba(89,75,189,.07) 43%,
            transparent 72%
        );

    filter:
        blur(12px);

    pointer-events: none;
}


/* =========================================================
   08. LAPTOP — MORE PHYSICAL / PREMIUM
========================================================= */

.ps-cinematic-hero
.ps-laptop-screen {
    border-color:
        #0e162b;

    background:
        linear-gradient(
            145deg,
            #111b3a,
            #0c152f
        );

    box-shadow:
        0 54px 105px rgba(27,36,76,.28),
        0 16px 38px rgba(36,47,77,.15),
        inset 0 1px 0 rgba(255,255,255,.055);
}


.ps-cinematic-hero
.ps-laptop-base {
    background:
        linear-gradient(
            180deg,
            #eef0f4 0%,
            #c5cad4 42%,
            #8d94a4 100%
        );

    box-shadow:
        0 24px 40px rgba(46,55,76,.18),
        inset 0 1px 0 rgba(255,255,255,.72);
}


/* =========================================================
   09. SIDE OBJECTS — GLASS + DEPTH
========================================================= */

.ps-cinematic-hero
.ps-web-panel,
.ps-cinematic-hero
.ps-ai-object,
.ps-cinematic-hero
.ps-cloud-object,
.ps-cinematic-hero
.ps-security-object {
    border:
        1px solid
        rgba(255,255,255,.62);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        0 20px 50px rgba(41,50,77,.10);

    backdrop-filter:
        blur(18px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(115%);
}


.ps-cinematic-hero
.ps-web-panel {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(239,240,249,.66)
        ) !important;
}


.ps-cinematic-hero
.ps-code-panel {
    border:
        1px solid
        rgba(255,255,255,.055);

    background:
        linear-gradient(
            145deg,
            rgba(18,27,57,.96),
            rgba(12,21,47,.94)
        ) !important;

    box-shadow:
        0 28px 60px rgba(26,35,70,.20),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* =========================================================
   10. STAGE LIGHT / FLOOR
========================================================= */

.ps-cinematic-hero
.ps-stage-light {
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.92),
            rgba(218,215,241,.32) 42%,
            rgba(177,194,218,.10) 61%,
            transparent 75%
        );

    filter:
        blur(16px);
}


.ps-cinematic-hero
.ps-digital-floor {
    background:
        radial-gradient(
            ellipse,
            rgba(102,86,193,.19),
            rgba(73,121,190,.08) 42%,
            transparent 72%
        );

    filter:
        blur(2px);
}


/* =========================================================
   11. HEADER — PREMIUM FLOATING MATERIAL
   Geometry remains unchanged.
========================================================= */

.site-header
.header-inner {
    border:
        1px solid
        rgba(255,255,255,.74);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.76),
            rgba(244,246,250,.64)
        );

    backdrop-filter:
        blur(26px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(125%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 18px 60px rgba(38,48,74,.095),
        0 3px 10px rgba(38,48,74,.035);
}


/* =========================================================
   12. SOFT HEADER SCROLLED STATE
========================================================= */

.site-header.ps-header-scrolled
.header-inner,
.ps-header-scrolled
.header-inner {
    background:
        rgba(247,248,251,.88);

    border-color:
        rgba(255,255,255,.82);

    box-shadow:
        0 18px 55px rgba(25,35,58,.11);
}


/* =========================================================
   13. SCROLL INDICATOR
========================================================= */

.ps-cinematic-hero
.ps-scroll-indicator {
    z-index: 5;

    opacity: .72;
}


/* =========================================================
   14. AMBIENT MOTION
   Only transform/opacity. No heavy continuous blur animation.
========================================================= */

@media (prefers-reduced-motion:no-preference) {

    .ps-cinematic-hero
    .ps-hero-ambient::before {
        animation:
            psHeroV2Breath
            8s
            ease-in-out
            infinite alternate;
    }


    @keyframes psHeroV2Breath {

        from {
            transform:
                translate(-7%, -50%)
                scale(.96);

            opacity:
                .80;
        }

        to {
            transform:
                translate(-3%, -48%)
                scale(1.04);

            opacity:
                1;
        }
    }
}


/* =========================================================
   15. TABLET
   Keep original responsive geometry as authority.
========================================================= */

@media (max-width:1024px) {

    .ps-cinematic-hero::after {
        height:
            160px;
    }


    .ps-hero-ambient::after {
        min-width:
            420px;

        opacity:
            .28;
    }


    .ps-cinematic-hero
    .ps-tech-stage::before {
        width:
            620px;

        height:
            500px;
    }
}


/* =========================================================
   16. MOBILE
   Same richness; quieter GPU cost.
========================================================= */

@media (max-width:760px) {

    .ps-cinematic-hero {
        background:
            radial-gradient(
                circle at 92% 14%,
                rgba(187,197,224,.34),
                transparent 24%
            ),
            radial-gradient(
                circle at 4% 73%,
                rgba(224,197,181,.25),
                transparent 28%
            ),
            linear-gradient(
                150deg,
                #f4f1eb 0%,
                #edf0f3 54%,
                #f1eef3 100%
            ) !important;
    }


    .ps-cinematic-hero::after {
        height:
            120px;
    }


    .ps-hero-ambient::after {
        display:
            none;
    }


    .ps-cinematic-hero
    .ps-hero-grid-pattern {
        opacity:
            .28;

        background-size:
            48px 48px;
    }


    .ps-cinematic-hero
    .ps-hero-copy::before {
        width:
            280px;

        height:
            280px;

        left:
            -70px;

        top:
            -24px;

        opacity:
            .66;
    }


    .ps-cinematic-hero
    .ps-tech-stage::before {
        width:
            520px;

        height:
            410px;

        opacity:
            .76;
    }


    .ps-cinematic-hero
    .ps-web-panel,
    .ps-cinematic-hero
    .ps-ai-object,
    .ps-cinematic-hero
    .ps-cloud-object,
    .ps-cinematic-hero
    .ps-security-object,
    .ps-cinematic-hero
    .ps-secondary-button,
    .ps-cinematic-hero
    .ps-hero-capabilities span {
        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* =========================================================
   17. REDUCED MOTION
========================================================= */

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

    .ps-cinematic-hero
    .ps-hero-ambient::before {
        animation:
            none !important;
    }


    .ps-cinematic-hero
    .ps-primary-button::before {
        display:
            none;
    }
}