/* =========================================================
   PRIMESCAPE INFOSOFT — VISUAL SYSTEM V2
   Premium atmospheric layer

   PURPOSE
   - Remove the "plain white / white / white" feeling.
   - Preserve all existing scene geometry and VFX.
   - Add visual rhythm, depth, material, and contrast.
   - Stay elegant, low-saturation, and performance conscious.
   - Desktop / tablet / mobile share the same visual language.

   IMPORTANT
   This file intentionally avoids changing core scene dimensions,
   transforms, sticky logic, or responsive containment.
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
    --ps-v2-ink: #121722;
    --ps-v2-ink-soft: #4f5869;

    --ps-v2-pearl: #f6f5f1;
    --ps-v2-ivory: #f0eee8;
    --ps-v2-mist: #edf1f4;
    --ps-v2-mineral: #e8ebef;
    --ps-v2-lilac: #efedf4;
    --ps-v2-sage: #e9efeb;

    --ps-v2-graphite: #11151c;
    --ps-v2-graphite-2: #181d26;

    --ps-v2-line: rgba(30, 41, 59, .09);
    --ps-v2-line-light: rgba(255,255,255,.08);

    --ps-v2-glass:
        rgba(255,255,255,.50);

    --ps-v2-shadow:
        0 22px 70px rgba(25, 35, 52, .10);

    --ps-v2-shadow-deep:
        0 26px 90px rgba(6, 10, 18, .28);
}


/* =========================================================
   02. GLOBAL PAGE MATERIAL
========================================================= */

html {
    background:
        var(--ps-v2-pearl);
}


body {
    background:
        linear-gradient(
            180deg,
            #f7f6f2 0%,
            #eff1f3 44%,
            #f4f2ed 100%
        );

    color:
        var(--ps-v2-ink);
}


#primary,
main {
    position:
        relative;
}


/* Subtle premium grain without image assets. */

body::before {
    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        9999999;

    pointer-events:
        none;

    opacity:
        .025;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(15,23,42,.36) 0,
            rgba(15,23,42,.36) 1px,
            transparent 1px,
            transparent 3px
        );

    mix-blend-mode:
        multiply;
}


/* =========================================================
   03. HERO — PREMIUM LIGHT ARCHITECTURE
========================================================= */

.ps-hero,
.hero-section,
#home {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(204, 212, 226, .58),
            transparent 29%
        ),
        radial-gradient(
            circle at 8% 76%,
            rgba(220, 226, 218, .68),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #f7f5ef 0%,
            #eef1f4 48%,
            #f5f3ee 100%
        ) !important;
}


.ps-hero::before,
.hero-section::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    opacity:
        .42;

    background:
        linear-gradient(
            90deg,
            rgba(45,55,72,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(45,55,72,.045) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 82%
        );
}


.ps-hero::after,
.hero-section::after {
    content:
        "";

    position:
        absolute;

    width:
        min(760px, 68vw);

    height:
        min(760px, 68vw);

    right:
        -15%;

    top:
        -32%;

    z-index:
        -1;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.84) 0%,
            rgba(204,214,231,.18) 43%,
            transparent 70%
        );

    filter:
        blur(10px);
}


/* =========================================================
   04. SHOWCASE INTRO — PEARL TO MINERAL BRIDGE
========================================================= */

.ps-showcase-intro {
    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            ellipse at 17% 20%,
            rgba(255,255,255,.82),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 86% 76%,
            rgba(205,215,226,.26),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f4f2ec 0%,
            #e9edf1 100%
        ) !important;
}


.ps-showcase-intro::before {
    content:
        "BUILD / DESIGN / INTELLIGENCE";

    position:
        absolute;

    right:
        3vw;

    bottom:
        -0.12em;

    font-size:
        clamp(46px, 8vw, 132px);

    font-weight:
        800;

    letter-spacing:
        -.055em;

    line-height:
        .8;

    white-space:
        nowrap;

    color:
        rgba(26, 35, 49, .035);

    pointer-events:
        none;
}


/* =========================================================
   05. SHARED CAPABILITY SCENE MATERIAL
========================================================= */

.ps-capability-scene {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;
}


.ps-capability-scene::before {
    pointer-events:
        none;
}


/* Shared edge architecture */

.ps-capability-scene::after {
    content:
        "";

    position:
        absolute;

    left:
        max(24px, calc((100% - 1420px) / 2));

    right:
        max(24px, calc((100% - 1420px) / 2));

    bottom:
        0;

    height:
        1px;

    z-index:
        1;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(24, 34, 51, .10) 17%,
            rgba(24, 34, 51, .10) 83%,
            transparent
        );
}


/* =========================================================
   06. SOFTWARE — PEARL / ARCHITECTURAL
========================================================= */

.ps-scene-software {
    background:
        radial-gradient(
            circle at 76% 28%,
            rgba(184,196,217,.28),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 76%,
            rgba(213,221,214,.40),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f5f3ed 0%,
            #eef0f2 48%,
            #f4f1eb 100%
        ) !important;
}


.ps-scene-software::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        .32;

    background:
        linear-gradient(
            90deg,
            rgba(25,35,52,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(25,35,52,.04) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        radial-gradient(
            ellipse at 70% 45%,
            #000 0%,
            transparent 68%
        );

    pointer-events:
        none;
}


/* =========================================================
   07. WEB — MINERAL / SOFT LILAC
========================================================= */

.ps-scene-web {
    background:
        radial-gradient(
            circle at 74% 30%,
            rgba(184,189,219,.35),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(212,224,220,.30),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #ececf1 0%,
            #f2eff4 48%,
            #e9edf0 100%
        ) !important;
}


.ps-scene-web::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76,70,112,.12) 20%,
            rgba(76,70,112,.12) 80%,
            transparent
        );
}


/* =========================================================
   08. MOBILE — WARM NEUTRAL / DEVICE SPACE
========================================================= */

.ps-scene-mobile {
    background:
        radial-gradient(
            circle at 69% 26%,
            rgba(232,214,201,.48),
            transparent 30%
        ),
        radial-gradient(
            circle at 17% 78%,
            rgba(205,216,223,.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f3eee8 0%,
            #eee9e4 48%,
            #edf0f2 100%
        ) !important;
}


/* =========================================================
   09. AI — COOL INTELLIGENCE ATMOSPHERE
========================================================= */

.ps-scene-ai {
    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(154,174,210,.32),
            transparent 29%
        ),
        radial-gradient(
            circle at 16% 72%,
            rgba(178,204,192,.28),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #e9edf1 0%,
            #edf0f4 43%,
            #e7ece9 100%
        ) !important;
}


.ps-scene-ai::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        .28;

    background:
        repeating-radial-gradient(
            circle at 70% 46%,
            rgba(42,64,96,.13) 0,
            rgba(42,64,96,.13) 1px,
            transparent 1px,
            transparent 34px
        );

    mask-image:
        radial-gradient(
            circle at 70% 46%,
            #000,
            transparent 62%
        );

    pointer-events:
        none;
}


/* =========================================================
   10. CYBERSECURITY — DEEP CONTRAST MOMENT
========================================================= */

.ps-scene-security {
    background:
        radial-gradient(
            circle at 72% 40%,
            rgba(50,76,89,.34),
            transparent 28%
        ),
        radial-gradient(
            circle at 32% 12%,
            rgba(77,82,112,.22),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #0e1319 0%,
            #151b23 52%,
            #10151b 100%
        ) !important;

    color:
        #f4f5f7;
}


.ps-scene-security::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        .20;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 34%,
            #000 100%
        );

    pointer-events:
        none;
}


.ps-scene-security::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.11) 18%,
            rgba(255,255,255,.11) 82%,
            transparent
        );
}


/* Preserve/readability of security copy */

.ps-scene-security
.ps-scene-content h3 {
    color:
        #f6f7f9 !important;
}


.ps-scene-security
.ps-scene-content > p {
    color:
        rgba(232,236,242,.70) !important;
}


.ps-scene-security
.ps-scene-label,
.ps-scene-security
.ps-scene-number {
    color:
        rgba(210,220,230,.66) !important;
}


.ps-scene-security
.ps-scene-tags span {
    color:
        rgba(235,239,244,.78) !important;

    background:
        rgba(255,255,255,.055) !important;

    border-color:
        rgba(255,255,255,.10) !important;

    backdrop-filter:
        blur(10px);
}


/* =========================================================
   11. CLOUD — AIRY BLUE-GREY INFRASTRUCTURE
   IMPORTANT: NO GRID/GEO LAYOUT OVERRIDES.
========================================================= */

.ps-scene-cloud {
    background:
        radial-gradient(
            circle at 73% 26%,
            rgba(185,207,228,.48),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 77%,
            rgba(209,221,216,.38),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #eef2f4 0%,
            #e6edf1 48%,
            #edf1ee 100%
        ) !important;
}


.ps-scene-cloud::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    opacity:
        .34;

    background:
        linear-gradient(
            110deg,
            transparent 10%,
            rgba(255,255,255,.62) 38%,
            transparent 56%
        );

    transform:
        translateX(-36%);
}


/* =========================================================
   12. CONTENT TYPOGRAPHIC RICHNESS
========================================================= */

.ps-scene-number {
    font-variant-numeric:
        tabular-nums;

    letter-spacing:
        .12em;
}


.ps-scene-label,
.ps-showcase-kicker {
    letter-spacing:
        .16em;
}


.ps-scene-content h3,
.ps-showcase-intro h2 {
    text-wrap:
        balance;

    letter-spacing:
        -.035em;
}


.ps-scene-content > p,
.ps-showcase-intro p {
    text-wrap:
        pretty;
}


/* =========================================================
   13. TAGS — MATERIAL, NOT FLAT PILLS
========================================================= */

.ps-scene-tags span {
    border:
        1px solid
        rgba(29,40,58,.095);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        0 10px 30px rgba(28,38,55,.045);

    backdrop-filter:
        blur(10px);

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


/* =========================================================
   14. VISUAL OBJECTS — PREMIUM DEPTH
   Does not change dimensions/transforms.
========================================================= */

.ps-software-main-window,
.ps-software-back-window,
.ps-browser-layer,
.ps-showcase-phone,
.ps-ai-core,
.ps-cloud-core {
    box-shadow:
        0 28px 70px rgba(20,29,44,.13),
        0 4px 16px rgba(20,29,44,.065);
}


/* =========================================================
   15. CLOSING — CLEAN PREMIUM RETURN TO LIGHT
========================================================= */

.ps-closing,
.ps-home-closing,
.ps-closing-section {
    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(201,212,226,.42),
            transparent 28%
        ),
        radial-gradient(
            circle at 13% 80%,
            rgba(218,223,212,.48),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #f6f4ef 0%,
            #eceff1 52%,
            #f4f1eb 100%
        ) !important;
}


/* =========================================================
   16. AMBIENT LIGHT — ONLY WHERE GPU-CHEAP
========================================================= */

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

    .ps-scene-cloud::before {
        animation:
            psV2CloudLight
            11s
            ease-in-out
            infinite alternate;
    }


    @keyframes psV2CloudLight {

        from {
            transform:
                translateX(-38%);
        }

        to {
            transform:
                translateX(18%);
        }
    }
}


/* =========================================================
   17. TABLET
========================================================= */

@media (max-width:1024px) {

    body::before {
        opacity:
            .018;
    }


    .ps-capability-scene::after {
        left:
            28px;

        right:
            28px;
    }


    .ps-showcase-intro::before {
        font-size:
            clamp(40px, 10vw, 88px);

        opacity:
            .8;
    }
}


/* =========================================================
   18. MOBILE
   Same visual language, quieter atmosphere.
========================================================= */

@media (max-width:760px) {

    body::before {
        display:
            none;
    }


    .ps-hero,
    .hero-section,
    #home {
        background:
            radial-gradient(
                circle at 85% 12%,
                rgba(200,211,226,.45),
                transparent 26%
            ),
            radial-gradient(
                circle at 8% 82%,
                rgba(216,224,216,.52),
                transparent 27%
            ),
            linear-gradient(
                150deg,
                #f6f4ef 0%,
                #edf0f2 55%,
                #f3f1ec 100%
            ) !important;
    }


    .ps-hero::before,
    .hero-section::before {
        background-size:
            46px 46px;

        opacity:
            .24;
    }


    .ps-capability-scene::after {
        left:
            18px;

        right:
            18px;
    }


    .ps-scene-software {
        background:
            linear-gradient(
                155deg,
                #f4f2ed 0%,
                #eaedf0 100%
            ) !important;
    }


    .ps-scene-web {
        background:
            linear-gradient(
                155deg,
                #edecf1 0%,
                #e9edf0 100%
            ) !important;
    }


    .ps-scene-mobile {
        background:
            linear-gradient(
                155deg,
                #f2ede7 0%,
                #e9edef 100%
            ) !important;
    }


    .ps-scene-ai {
        background:
            linear-gradient(
                155deg,
                #e9edf1 0%,
                #e7ece9 100%
            ) !important;
    }


    .ps-scene-security {
        background:
            linear-gradient(
                155deg,
                #10151c 0%,
                #171e27 100%
            ) !important;
    }


    .ps-scene-cloud {
        background:
            linear-gradient(
                155deg,
                #edf2f4 0%,
                #e6edee 100%
            ) !important;
    }


    .ps-showcase-intro::before {
        right:
            -2vw;

        bottom:
            .1em;

        font-size:
            clamp(34px, 13vw, 62px);
    }


    .ps-scene-tags span {
        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* =========================================================
   19. REDUCED MOTION / PERFORMANCE
========================================================= */

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

    .ps-scene-cloud::before {
        animation:
            none !important;
    }
}