/* ============================================================
   PARSHWA PADME SOLUTIONS PVT LTD
   FULL PREMIUM STYLE.CSS
   Loader + Cursor + Realistic Laptop + Admin + Responsive
   ============================================================ */

:root{
    --bg:#020710;
    --bg2:#061628;
    --card:rgba(10,28,48,.68);
    --line:rgba(148,163,184,.18);
    --text:#f8fafc;
    --muted:#9ca9bb;
    --teal:#18f5d0;
    --blue:#00c7ff;
    --purple:#7c3cff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text) !important;
    background:
        radial-gradient(circle at 78% 12%, rgba(24,245,208,.20), transparent 27%),
        radial-gradient(circle at 18% 55%, rgba(0,199,255,.13), transparent 31%),
        radial-gradient(circle at 50% 100%, rgba(124,60,255,.12), transparent 35%),
        linear-gradient(180deg, #020710 0%, #03101e 48%, #020710 100%);
    overflow-x:hidden;
    cursor:none;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background-image:
        linear-gradient(rgba(24,245,208,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.04) 1px, transparent 1px);
    background-size:58px 58px;
    pointer-events:none;
}

body:after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:
        radial-gradient(circle at 12% 25%, rgba(24,245,208,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 68%, rgba(24,245,208,.7) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 33%, rgba(24,245,208,.7) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 50%, rgba(24,245,208,.7) 0 2px, transparent 3px),
        radial-gradient(circle at 89% 22%, rgba(24,245,208,.65) 0 2px, transparent 3px),
        radial-gradient(circle at 95% 80%, rgba(24,245,208,.6) 0 2px, transparent 3px);
    opacity:.36;
    animation:floatDots 9s ease-in-out infinite alternate;
    pointer-events:none;
}

@keyframes floatDots{
    from{transform:translateY(0)}
    to{transform:translateY(-18px)}
}

a{
    color:inherit;
    text-decoration:none;
    cursor:none;
}

button,
.btn,
input,
textarea,
select{
    cursor:none;
}

.container{
    width:min(1180px, calc(100% - 36px));
    margin:auto;
}

/* ============================================================
   PREMIUM INTRO LOADER
   ============================================================ */

.pps-intro-loader{
    position:fixed;
    inset:0;
    z-index:2147483647;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 28%, rgba(24,245,208,.22), transparent 34%),
        radial-gradient(circle at 20% 70%, rgba(0,199,255,.16), transparent 32%),
        radial-gradient(circle at 78% 75%, rgba(124,60,255,.13), transparent 34%),
        linear-gradient(180deg, #020710, #03101e);
    overflow:hidden;
    transition:opacity .65s ease, visibility .65s ease;
}

.pps-intro-loader.pps-hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.pps-loader-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(24,245,208,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.045) 1px, transparent 1px);
    background-size:54px 54px;
    animation:ppsGridMove 1.8s linear infinite;
    opacity:.7;
}

@keyframes ppsGridMove{
    from{transform:translateY(0)}
    to{transform:translateY(54px)}
}

.pps-loader-orb{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    border:1px dashed rgba(24,245,208,.38);
    animation:ppsLoaderSpin 8s linear infinite;
    box-shadow:0 0 90px rgba(24,245,208,.12);
}

.pps-loader-orb::before,
.pps-loader-orb::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(0,199,255,.20);
}

.pps-loader-orb::before{
    inset:55px;
}

.pps-loader-orb::after{
    inset:115px;
    border-color:rgba(255,255,255,.12);
}

@keyframes ppsLoaderSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

.pps-loader-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:26px;
}

.pps-loader-logo{
    width:92px;
    height:92px;
    margin:0 auto 22px;
    border-radius:28px;
    display:grid;
    place-items:center;
    background:conic-gradient(from 180deg, #18f5d0, #00c7ff, #ffffff, #18f5d0);
    color:#020710;
    box-shadow:
        0 0 45px rgba(24,245,208,.42),
        inset 0 0 20px rgba(255,255,255,.42);
    animation:ppsLogoPulse 1.35s ease-in-out infinite alternate;
}

.pps-loader-logo span{
    font-size:34px;
    font-weight:1000;
    font-style:normal;
    letter-spacing:0;
    font-family:"Noto Sans Gujarati","Nirmala UI","Arial",sans-serif;
}

@keyframes ppsLogoPulse{
    from{transform:scale(1)}
    to{transform:scale(1.08)}
}

.pps-loader-small{
    color:#18f5d0;
    font-size:12px;
    font-weight:1000;
    letter-spacing:.32em;
    margin-bottom:14px;
}

.pps-loader-content h1{
    margin:0;
    color:#fff;
    font-size:clamp(34px, 5vw, 72px);
    line-height:.98;
    font-weight:1000;
    letter-spacing:-.06em;
}

.pps-loader-content h1 span{
    color:#fff;
}

.pps-loader-content h1 b{
    color:#18f5d0;
}

.pps-loader-content h1 em{
    display:block;
    font-style:normal;
    background:linear-gradient(90deg, #18f5d0, #00c7ff, #7c3cff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.pps-loader-content p{
    color:#b7c3d1;
    margin:18px 0 24px;
}

.pps-tech-loader{
    position:relative;
    width:min(380px, 80vw);
    height:12px;
    border-radius:999px;
    margin:auto;
    overflow:hidden;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
        inset 0 0 18px rgba(24,245,208,.08),
        0 0 34px rgba(24,245,208,.10);
}

.pps-tech-loader i{
    display:block;
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #18f5d0, #00c7ff, #7c3cff);
    box-shadow:
        0 0 18px rgba(24,245,208,.75),
        0 0 38px rgba(0,199,255,.38);
    animation:none;
    transition:width .08s linear;
}

.pps-loader-percent{
    margin-top:14px;
    color:#18f5d0;
    font-size:18px;
    font-weight:1000;
    letter-spacing:.08em;
    text-shadow:
        0 0 14px rgba(24,245,208,.85),
        0 0 34px rgba(0,199,255,.42);
}

/* ============================================================
   TOP BAR + HEADER
   ============================================================ */

.topbar{
    background:rgba(2,10,20,.62);
    border-bottom:1px solid rgba(255,255,255,.10);
    color:#cbd5e1;
    font-size:12px;
}

.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    gap:15px;
}

.navbar{
    position:sticky;
    top:0;
    z-index:50;
    background:linear-gradient(180deg, rgba(2,8,18,.92), rgba(2,8,18,.68));
    backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(24,245,208,.18);
    box-shadow:0 18px 65px rgba(0,0,0,.34);
}

.nav-inner{
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:245px;
}

.brand-mark{
    width:45px;
    height:45px;
    min-width:45px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:conic-gradient(from 180deg, #18f5d0, #00c7ff, #ffffff, #18f5d0);
    color:#020710;
    font-weight:1000;
    font-size:25px;
    line-height:1;
    box-shadow:
        0 0 30px rgba(24,245,208,.38),
        inset 0 0 18px rgba(255,255,255,.38);
}

.brand-title{
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.04em;
    font-size:20px;
    color:#ffffff;
}

.brand-title span{
    color:var(--teal);
}

.brand-small{
    font-size:13px;
    color:#e5ecf6;
    font-weight:700;
    letter-spacing:.01em;
}

.menu{
    display:flex;
    align-items:center;
    gap:28px;
}

.menu a{
    color:#e8edf5;
    font-size:14px;
    font-weight:800;
    letter-spacing:.02em;
    padding:30px 0;
    position:relative;
    opacity:.88;
}

.menu a:hover,
.menu a.active{
    color:var(--teal);
    opacity:1;
}

.menu a:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:18px;
    width:0;
    height:2px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, transparent, var(--teal), transparent);
    transition:.25s ease;
}

.menu a:hover:after,
.menu a.active:after{
    width:100%;
}

.mobile-toggle{
    display:none;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    padding:13px 22px;
    border-radius:999px;
    font-weight:900;
    font-size:14px;
    transition:.25s ease;
}

.btn-primary{
    background:linear-gradient(135deg, #18f5d0 0%, #00c7ff 100%);
    color:#020710 !important;
    border-color:transparent;
    box-shadow:
        0 0 28px rgba(24,245,208,.30),
        inset 0 1px 0 rgba(255,255,255,.45);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:
        0 0 46px rgba(24,245,208,.45),
        0 18px 44px rgba(0,0,0,.32);
}

.btn-ghost{
    background:rgba(255,255,255,.025);
    color:#fff;
}

.btn-ghost:hover{
    border-color:var(--teal);
    color:var(--teal);
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
    position:relative;
    min-height:760px;
    padding:95px 0 50px;
    overflow:hidden;
    isolation:isolate;
}

.hero:before{
    content:"";
    position:absolute;
    width:680px;
    height:680px;
    right:-240px;
    top:10px;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(24,245,208,.24), transparent 58%);
    filter:blur(16px);
    animation:auroraOne 8s ease-in-out infinite alternate;
}

.hero:after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-220px;
    bottom:20px;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,199,255,.18), transparent 60%);
    filter:blur(18px);
    animation:auroraTwo 9s ease-in-out infinite alternate;
}

@keyframes auroraOne{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(-48px,32px,0) scale(1.12)}
}

@keyframes auroraTwo{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(60px,-24px,0) scale(1.10)}
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr .95fr;
    gap:48px;
    align-items:center;
}

.kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg, rgba(24,245,208,.12), rgba(255,255,255,.045));
    border:1px solid rgba(24,245,208,.25);
    border-radius:999px;
    padding:10px 16px;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    box-shadow:
        inset 0 0 20px rgba(24,245,208,.07),
        0 0 34px rgba(24,245,208,.12);
}

.kicker:before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 15px var(--teal);
}

.hero h1{
    margin:30px 0 22px;
    font-size:clamp(48px,6vw,86px);
    line-height:.98;
    font-weight:1000;
    letter-spacing:-.07em;
    color:#fff;
    text-shadow:0 0 42px rgba(24,245,208,.11);
}

.gradient-text{
    background:linear-gradient(90deg, #ffffff 0%, #18f5d0 42%, #00c7ff 72%, #7c3cff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero p{
    font-size:18px;
    line-height:1.8;
    color:#c7d3e2;
    max-width:640px;
}

.hero-actions{
    display:flex;
    gap:16px;
    margin-top:32px;
    flex-wrap:wrap;
}

/* ============================================================
   REALISTIC LAPTOP VISUAL
   ============================================================ */

.visual,
.pps-about-visual,
.pps-services-visual,
.pps-team-visual{
    position:relative !important;
    min-height:540px !important;
    display:grid !important;
    place-items:center !important;
    perspective:1200px;
    isolation:isolate !important;
    overflow:visible !important;
}

/* laptop base */
.visual::after,
.pps-about-visual::after,
.pps-services-visual::after,
.pps-team-visual::after{
    content:"" !important;
    position:absolute !important;
    width:min(650px, 96%) !important;
    height:122px !important;
    left:50% !important;
    top:64% !important;
    transform:translateX(-50%) perspective(1100px) rotateX(72deg) !important;
    border-radius:16px 16px 30px 30px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.10)),
        linear-gradient(135deg, #b9bec6 0%, #8c929c 28%, #666d77 52%, #9198a2 100%) !important;
    border:1px solid rgba(255,255,255,.38) !important;
    box-shadow:
        0 42px 70px rgba(0,0,0,.30),
        inset 0 2px 0 rgba(255,255,255,.60),
        inset 0 -14px 24px rgba(0,0,0,.20) !important;
    z-index:3 !important;
    pointer-events:none !important;
}

/* trackpad */
.visual::before,
.pps-about-visual::before,
.pps-services-visual::before,
.pps-team-visual::before{
    content:"" !important;
    position:absolute !important;
    width:150px !important;
    height:42px !important;
    left:33% !important;
    top:69% !important;
    transform:translateX(-50%) perspective(1100px) rotateX(72deg) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:
        inset 0 0 14px rgba(0,0,0,.18),
        0 1px 0 rgba(255,255,255,.26) !important;
    z-index:4 !important;
    pointer-events:none !important;
}

.glow-ring{
    position:absolute;
    width:560px !important;
    height:360px !important;
    top:54% !important;
    border-radius:50%;
    border:1px dashed rgba(24,245,208,.42);
    transform:translateY(-50%) rotateX(72deg) rotateZ(-12deg) !important;
    animation:ringSpin 14s linear infinite;
    box-shadow:
        0 0 40px rgba(24,245,208,.08),
        inset 0 0 34px rgba(24,245,208,.06);
    opacity:.42 !important;
    z-index:0 !important;
}

.glow-ring:before,
.glow-ring:after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(0,199,255,.20);
}

.glow-ring:before{
    inset:62px;
}

.glow-ring:after{
    inset:128px;
    border-color:rgba(255,255,255,.13);
}

@keyframes ringSpin{
    from{transform:translateY(-50%) rotateX(72deg) rotateZ(0deg)}
    to{transform:translateY(-50%) rotateX(72deg) rotateZ(360deg)}
}

/* laptop screen body */
.laptop,
.pps-about-orb,
.pps-service-main-orb,
.pps-team-screen-orb{
    position:relative !important;
    width:min(520px, 86%) !important;
    height:320px !important;
    border-radius:18px !important;
    transform:perspective(1200px) rotateX(5deg) rotateY(-14deg) translateX(18px) !important;
    background:linear-gradient(145deg, #090a0d 0%, #181a20 42%, #050506 100%) !important;
    border:4px solid #07080a !important;
    outline:1px solid rgba(255,255,255,.16) !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,.45),
        0 0 70px rgba(24,245,208,.12),
        inset 0 0 0 1px rgba(255,255,255,.05) !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    animation:ppsLaptopFinalFloat 4.4s ease-in-out infinite alternate !important;
    z-index:6 !important;
}

/* white screen */
.laptop::before,
.pps-about-orb::before,
.pps-service-main-orb::before,
.pps-team-screen-orb::before{
    content:"" !important;
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    top:12px !important;
    bottom:12px !important;
    border-radius:10px !important;
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.98), rgba(244,246,248,.98) 64%),
        linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%) !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.75),
        inset 0 0 26px rgba(0,0,0,.04) !important;
    animation:none !important;
}

/* page name inside screen */
.laptop::after,
.pps-about-orb::after,
.pps-service-main-orb::after,
.pps-team-screen-orb::after{
    content:attr(data-screen-title) !important;
    position:relative !important;
    z-index:7 !important;
    color:#101214 !important;
    font-size:clamp(26px, 3vw, 42px) !important;
    font-weight:1000 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    text-shadow:none !important;
    max-width:78% !important;
    text-align:center !important;
    line-height:1.12 !important;
}

@keyframes ppsLaptopFinalFloat{
    from{
        transform:perspective(1200px) rotateX(5deg) rotateY(-14deg) translateX(18px) translateY(0);
    }
    to{
        transform:perspective(1200px) rotateX(5deg) rotateY(-14deg) translateX(18px) translateY(-12px);
    }
}

/* ============================================================
   FLOATING CARDS FIX
   ============================================================ */

.float-card{
    position:absolute;
    z-index:20 !important;
    min-width:156px !important;
    max-width:180px !important;
    background:linear-gradient(145deg, rgba(42,65,73,.96), rgba(30,47,56,.92)) !important;
    border:1px solid rgba(24,245,208,.20) !important;
    border-radius:16px;
    padding:15px 18px;
    display:flex;
    gap:12px;
    align-items:center;
    backdrop-filter:blur(22px);
    box-shadow:
        0 22px 44px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    animation:floatCard 4s ease-in-out infinite alternate;
}

.float-card b{
    display:block;
    color:#f7fbff !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:900;
}

.float-card span{
    width:42px;
    height:42px;
    border-radius:13px;
    background:rgba(24,245,208,.12) !important;
    display:grid;
    place-items:center;
    font-size:22px;
    color:#eafffb !important;
}

.visual .fc1{top:48px !important;left:-8px !important}
.visual .fc2{top:78px !important;right:-18px !important;animation-delay:.3s}
.visual .fc3{left:-10px !important;bottom:138px !important;animation-delay:.5s}
.visual .fc4{right:-10px !important;bottom:126px !important;animation-delay:.8s}
.visual .fc5{right:130px !important;top:182px !important;animation-delay:.65s}

@keyframes floatCard{
    to{transform:translateY(-15px)}
}

/* About page side notes */
.pps-floating-note{
    z-index:22 !important;
    min-width:150px !important;
    background:linear-gradient(145deg, rgba(42,65,73,.96), rgba(30,47,56,.92)) !important;
    border:1px solid rgba(24,245,208,.20) !important;
    box-shadow:
        0 22px 44px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.pps-floating-note strong{
    color:#18f5d0 !important;
}

.pps-floating-note span{
    color:#e5edf7 !important;
}

.pps-about-visual .pps-note-1{left:-8px !important;top:78px !important}
.pps-about-visual .pps-note-2{right:-12px !important;top:126px !important}
.pps-about-visual .pps-note-3{left:8px !important;bottom:122px !important}
.pps-about-visual .pps-note-4{right:8px !important;bottom:110px !important}

/* Services page side notes */
.pps-service-float{
    z-index:22 !important;
    min-width:150px !important;
    background:linear-gradient(145deg, rgba(42,65,73,.96), rgba(30,47,56,.92)) !important;
    border:1px solid rgba(24,245,208,.20) !important;
    box-shadow:
        0 22px 44px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.pps-service-float strong{
    color:#18f5d0 !important;
}

.pps-service-float span{
    color:#e5edf7 !important;
}

.pps-services-visual .pps-sf-1{left:-8px !important;top:76px !important}
.pps-services-visual .pps-sf-2{right:-12px !important;top:126px !important}
.pps-services-visual .pps-sf-3{left:8px !important;bottom:126px !important}
.pps-services-visual .pps-sf-4{right:8px !important;bottom:112px !important}

/* ============================================================
   STATS UPDATE
   ============================================================ */

.metrics .metric:nth-child(1) h3::before{
    content:"8+";
}

.metrics .metric:nth-child(2) h3::before{
    content:"800+";
}

.metrics .metric:nth-child(3) h3::before{
    content:"500+";
}

.metrics .metric:nth-child(1) h3,
.metrics .metric:nth-child(2) h3,
.metrics .metric:nth-child(3) h3{
    font-size:0 !important;
}

.metrics .metric:nth-child(1) h3::before,
.metrics .metric:nth-child(2) h3::before,
.metrics .metric:nth-child(3) h3::before{
    font-size:29px !important;
    color:#18f5d0 !important;
    text-shadow:0 0 18px rgba(24,245,208,.30) !important;
}

.metrics .metric:nth-child(3) p{
    font-size:0 !important;
}

.metrics .metric:nth-child(3) p::before{
    content:"Customers";
    font-size:13px !important;
    color:#fff !important;
}

/* ============================================================
   METRICS
   ============================================================ */

.metrics{
    margin-top:42px;
    background:
        linear-gradient(135deg, rgba(24,245,208,.08), rgba(255,255,255,.035)),
        rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    overflow:hidden;
    box-shadow:0 24px 65px rgba(0,0,0,.25);
}

.metric{
    padding:25px 28px;
    display:flex;
    align-items:center;
    gap:17px;
    border-right:1px solid var(--line);
}

.metric:last-child{
    border-right:0;
}

.metric-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.15);
    display:grid;
    place-items:center;
    font-size:25px;
    color:var(--teal);
}

.metric h3{
    margin:0;
    color:var(--teal);
    font-size:29px;
    letter-spacing:-.03em;
    text-shadow:0 0 18px rgba(24,245,208,.30);
}

.metric p{
    margin:2px 0 0;
    color:#fff;
    font-size:13px;
}

/* ============================================================
   SECTIONS + CARDS
   ============================================================ */

.section{
    padding:86px 0;
}

.section-head{
    text-align:center;
    max-width:760px;
    margin:0 auto 42px;
}

.section-tag{
    color:var(--teal);
    font-weight:900;
    font-size:12px;
    letter-spacing:.14em;
}

.section-title{
    font-size:clamp(34px,4vw,54px);
    line-height:1.08;
    margin:12px 0;
    font-weight:1000;
    letter-spacing:-.045em;
    color:#fff;
}

.section-desc{
    color:#aeb9c8;
    line-height:1.8;
    font-size:16px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.service-card,
.work-card,
.glass-card,
.form-card{
    background:linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.032));
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;
    padding:28px;
    box-shadow:
        0 28px 80px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:.3s ease;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(22px);
}

.service-card:before,
.work-card:before,
.glass-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 0%, rgba(24,245,208,.14), transparent 36%);
    opacity:0;
    transition:.3s ease;
}

.service-card:after,
.work-card:after,
.glass-card:after,
.form-card:after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(24,245,208,.55), transparent 35%, rgba(0,199,255,.32));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:.45;
}

.service-card:hover,
.work-card:hover,
.glass-card:hover{
    transform:translateY(-10px) scale(1.012);
    border-color:rgba(24,245,208,.38);
    box-shadow:
        0 38px 100px rgba(0,0,0,.38),
        0 0 70px rgba(24,245,208,.12);
}

.service-card:hover:before,
.work-card:hover:before,
.glass-card:hover:before{
    opacity:1;
}

.card-icon{
    position:relative;
    width:58px;
    height:58px;
    border-radius:17px;
    background:rgba(24,245,208,.11);
    display:grid;
    place-items:center;
    font-size:28px;
    margin-bottom:22px;
    box-shadow:
        inset 0 0 18px rgba(24,245,208,.08),
        0 0 28px rgba(24,245,208,.10);
}

.service-card h3,
.work-card h3,
.glass-card h3{
    position:relative;
    margin:0 0 12px;
    font-size:22px;
    color:#fff;
}

.service-card p,
.work-card p,
.glass-card p{
    position:relative;
    color:#b3bfcc;
    line-height:1.7;
    margin:0;
}

.label{
    position:relative;
    display:inline-flex;
    color:var(--teal);
    font-size:11px;
    font-weight:1000;
    letter-spacing:.16em;
    margin-bottom:10px;
}

/* ============================================================
   ABOUT / TIMELINE / CTA
   ============================================================ */

.about-split{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:32px;
    align-items:stretch;
}

.about-panel{
    background:linear-gradient(145deg, rgba(24,245,208,.15), rgba(255,255,255,.04));
    border:1px solid rgba(24,245,208,.2);
    border-radius:26px;
    padding:36px;
    min-height:320px;
}

.timeline{
    display:grid;
    gap:16px;
}

.timeline-item{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:18px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    padding:20px;
    border-radius:18px;
}

.timeline-item strong{
    color:var(--teal);
    font-size:24px;
}

.timeline-item h3{
    color:#fff;
    margin:0 0 8px;
}

.timeline-item p{
    color:#b3bfcc;
    margin:0;
}

.cta{
    background:linear-gradient(135deg, rgba(24,245,208,.14), rgba(0,199,255,.07));
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:28px;
}

.contact-list{
    display:grid;
    gap:14px;
}

.info-row{
    display:flex;
    gap:14px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:17px;
    background:rgba(255,255,255,.045);
    color:#fff;
}

.info-row span{
    color:var(--teal);
    font-size:24px;
}

.form-card input,
.form-card textarea,
.form-card select,
.admin-input{
    width:100%;
    background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    border-radius:14px;
    padding:14px 15px;
    outline:none;
}

.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus,
.admin-input:focus{
    border-color:var(--teal);
}

.form-card input::placeholder,
.form-card textarea::placeholder{
    color:rgba(203,213,225,.58);
}

.form-card label{
    font-size:13px;
    font-weight:800;
    color:#d9e2ee;
    margin-bottom:8px;
    display:block;
}

.form-card .grid2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.form-card option{
    color:#07111f;
}

/* ============================================================
   PAGE HERO
   ============================================================ */

.page-hero{
    padding:90px 0 50px;
}

.page-hero h1{
    font-size:clamp(44px,5vw,76px);
    line-height:1;
    margin:16px 0;
    font-weight:1000;
    letter-spacing:-.06em;
    color:#fff;
}

.alert{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:16px;
    border:1px solid rgba(24,245,208,.25);
    background:rgba(24,245,208,.08);
    color:#dffef9;
}

.error{
    border-color:rgba(255,92,92,.34);
    background:rgba(255,92,92,.08);
    color:#ffd6d6;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
    background:rgba(1,7,14,.74);
    border-top:1px solid var(--line);
    padding:48px 0 24px;
    color:#aeb8c6;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.1fr;
    gap:24px;
}

.footer h4{
    color:#fff;
    margin:0 0 14px;
}

.footer a{
    display:block;
    color:#aeb8c6;
    margin:9px 0;
}

.footer a:hover{
    color:var(--teal);
}

.footer p{
    line-height:1.8;
}

.copyright{
    border-top:1px solid var(--line);
    margin-top:30px;
    padding-top:20px;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

/* ============================================================
   PREMIUM CURSOR
   ============================================================ */

.pps-v4-cursor,
.pps-v4-dot,
.pps-v4-spark{
    position:fixed;
    top:0;
    left:0;
    pointer-events:none;
    z-index:2147483646;
    transform:translate(-50%,-50%);
}

.pps-v4-cursor{
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(24,245,208,.85);
    background:radial-gradient(circle, rgba(24,245,208,.08), transparent 65%);
    box-shadow:
        0 0 20px rgba(24,245,208,.35),
        inset 0 0 18px rgba(24,245,208,.12);
    transition:.22s ease;
}

.pps-v4-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#18f5d0;
    box-shadow:
        0 0 12px rgba(24,245,208,1),
        0 0 28px rgba(0,199,255,.75);
}

.pps-v4-spark{
    width:11px;
    height:11px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(24,245,208,.78), rgba(0,199,255,.25), transparent 72%);
    filter:blur(.3px);
    animation:cursorSpark .75s ease-out forwards;
}

@keyframes cursorSpark{
    0%{
        opacity:.65;
        transform:translate(-50%, -50%) scale(.7);
    }
    100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(4.8);
    }
}

body.pps-v4-hover .pps-v4-cursor{
    width:72px;
    height:72px;
    border-color:rgba(255,255,255,.95);
    background:radial-gradient(circle, rgba(24,245,208,.16), rgba(0,199,255,.06), transparent 70%);
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */

.admin-wrap{
    display:grid;
    grid-template-columns:260px 1fr;
    min-height:100vh;
}

.admin-side{
    background:#020914;
    border-right:1px solid var(--line);
    padding:24px;
    position:sticky;
    top:0;
    height:100vh;
}

.admin-main{
    padding:26px;
    background:#05101d;
}

.admin-side a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    margin:6px 0;
    color:#cdd6e2;
    font-weight:800;
}

.admin-side a:hover,
.admin-side a.active{
    background:rgba(24,245,208,.1);
    color:var(--teal);
}

.table-wrap{
    overflow:auto;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:18px;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:14px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:14px;
}

th{
    color:#fff;
    background:rgba(255,255,255,.04);
}

td{
    color:#cbd5e1;
}

.badge{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(24,245,208,.1);
    color:var(--teal);
    font-weight:900;
    font-size:12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:980px){
    .menu{
        display:none;
        position:absolute;
        left:18px;
        right:18px;
        top:82px;
        background:#06111f;
        border:1px solid var(--line);
        border-radius:18px;
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .menu.show{
        display:flex;
    }

    .menu a{
        padding:14px 16px;
    }

    .mobile-toggle{
        display:inline-flex;
    }

    .nav-inner{
        height:72px;
    }

    .hero{
        padding-top:60px;
        min-height:auto;
    }

    .hero-grid,
    .about-split,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .visual,
    .pps-about-visual,
    .pps-services-visual,
    .pps-team-visual{
        min-height:455px !important;
    }

    .laptop,
    .pps-about-orb,
    .pps-service-main-orb,
    .pps-team-screen-orb{
        width:min(430px, 88%) !important;
        height:270px !important;
        transform:perspective(1100px) rotateX(5deg) rotateY(-10deg) translateX(0) !important;
    }

    .visual::after,
    .pps-about-visual::after,
    .pps-services-visual::after,
    .pps-team-visual::after{
        width:min(520px, 96%) !important;
        height:96px !important;
        top:64% !important;
    }

    .visual::before,
    .pps-about-visual::before,
    .pps-services-visual::before,
    .pps-team-visual::before{
        width:118px !important;
        height:34px !important;
        left:34% !important;
        top:69% !important;
    }

    .float-card,
    .pps-floating-note,
    .pps-service-float{
        min-width:132px !important;
        padding:12px 14px !important;
    }

    .metrics{
        grid-template-columns:repeat(2,1fr);
    }

    .cards{
        grid-template-columns:1fr 1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .admin-wrap{
        grid-template-columns:1fr;
    }

    .admin-side{
        height:auto;
        position:relative;
    }
}

@media(max-width:640px){
    body,
    a,
    button,
    .btn,
    input,
    textarea,
    select{
        cursor:auto;
    }

    .pps-v4-cursor,
    .pps-v4-dot,
    .pps-v4-spark{
        display:none !important;
    }

    .container{
        width:min(100% - 24px,1180px);
    }

    .topbar-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .brand{
        min-width:auto;
    }

    .brand-title{
        font-size:17px;
    }

    .hero h1{
        font-size:48px;
    }

    .hero p{
        font-size:16px;
    }

    .visual,
    .pps-about-visual,
    .pps-services-visual,
    .pps-team-visual{
        min-height:360px !important;
    }

    .laptop,
    .pps-about-orb,
    .pps-service-main-orb,
    .pps-team-screen-orb{
        width:300px !important;
        height:195px !important;
        border-width:3px !important;
        transform:perspective(900px) rotateX(4deg) rotateY(-8deg) translateX(0) !important;
    }

    .laptop::after,
    .pps-about-orb::after,
    .pps-service-main-orb::after,
    .pps-team-screen-orb::after{
        font-size:22px !important;
        letter-spacing:.08em !important;
    }

    .visual::after,
    .pps-about-visual::after,
    .pps-services-visual::after,
    .pps-team-visual::after{
        width:340px !important;
        height:68px !important;
        top:65% !important;
    }

    .visual::before,
    .pps-about-visual::before,
    .pps-services-visual::before,
    .pps-team-visual::before{
        width:84px !important;
        height:22px !important;
        left:33% !important;
        top:70% !important;
    }

    .glow-ring{
        width:330px !important;
        height:230px !important;
    }

    .float-card,
    .pps-floating-note,
    .pps-service-float{
        min-width:120px !important;
        max-width:130px !important;
        padding:9px 10px !important;
    }

    .float-card b,
    .pps-floating-note span,
    .pps-service-float span{
        font-size:10px !important;
    }

    .float-card span{
        width:34px !important;
        height:34px !important;
        font-size:16px !important;
    }

    .visual .fc5{
        display:none !important;
    }

    .visual .fc1,
    .pps-about-visual .pps-note-1,
    .pps-services-visual .pps-sf-1{
        left:0 !important;
        top:20px !important;
    }

    .visual .fc2,
    .pps-about-visual .pps-note-2,
    .pps-services-visual .pps-sf-2{
        right:0 !important;
        top:48px !important;
    }

    .visual .fc3,
    .pps-about-visual .pps-note-3,
    .pps-services-visual .pps-sf-3{
        left:0 !important;
        bottom:70px !important;
    }

    .visual .fc4,
    .pps-about-visual .pps-note-4,
    .pps-services-visual .pps-sf-4{
        right:0 !important;
        bottom:58px !important;
    }

    .metrics{
        grid-template-columns:1fr;
    }

    .metric{
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .cards,
    .form-card .grid2,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .section{
        padding:62px 0;
    }

    .pps-loader-orb{
        width:300px;
        height:300px;
    }

    .pps-loader-logo{
        width:76px;
        height:76px;
    }

    .pps-loader-logo span{
        font-size:28px;
    }
}
/* ============================================================
   PPS ADVANCED TEAM STYLE SCROLL INTRO
   Full screen laptop zoom intro
   Paste at bottom of assets/css/style.css
   ============================================================ */

html.pps-intro-lock,
body.pps-intro-lock {
    overflow: hidden !important;
    height: 100% !important;
}

.pps-scroll-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background:
        radial-gradient(circle at 50% 32%, rgba(24,245,208,.18), transparent 34%),
        radial-gradient(circle at 78% 60%, rgba(0,199,255,.14), transparent 34%),
        radial-gradient(circle at 18% 78%, rgba(124,60,255,.12), transparent 30%),
        linear-gradient(180deg, #020710 0%, #03101e 100%);
    overflow: hidden;
    display: grid;
    place-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity .75s ease, visibility .75s ease;
}

.pps-scroll-intro.pps-scroll-intro-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pps-scroll-intro-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(24,245,208,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .72;
    animation: ppsIntroGridMove 2.4s linear infinite;
}

@keyframes ppsIntroGridMove {
    from { transform: translateY(0); }
    to { transform: translateY(58px); }
}

.pps-scroll-intro-glow {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24,245,208,.20), transparent 58%);
    filter: blur(18px);
    animation: ppsIntroGlowMove 5s ease-in-out infinite alternate;
}

@keyframes ppsIntroGlowMove {
    from { transform: translate3d(-30px, -10px, 0) scale(1); }
    to { transform: translate3d(45px, 25px, 0) scale(1.12); }
}

.pps-scroll-laptop-stage {
    position: absolute;
    width: min(980px, 92vw);
    height: min(640px, 76vh);
    display: grid;
    place-items: center;
    z-index: 2;
    transform-origin: center center;
    will-change: transform, opacity;
}

.pps-scroll-laptop {
    position: relative;
    width: min(690px, 82vw);
    height: 460px;
    transform: perspective(1200px) rotateX(4deg) rotateY(-12deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 46px 90px rgba(0,0,0,.42));
}

.pps-scroll-laptop-screen {
    position: absolute;
    left: 50%;
    top: 0;
    width: 560px;
    height: 350px;
    transform: translateX(-50%);
    border-radius: 22px;
    background: linear-gradient(145deg, #06070a, #171b22 45%, #030406);
    border: 5px solid #06070a;
    outline: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 0 90px rgba(24,245,208,.14),
        inset 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
}

.pps-scroll-laptop-screen::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 32%, rgba(24,245,208,.30), transparent 36%),
        radial-gradient(circle at 76% 72%, rgba(0,199,255,.15), transparent 38%),
        linear-gradient(145deg, #0b2d4b 0%, #020914 78%);
    border: 1px solid rgba(24,245,208,.24);
    box-shadow:
        inset 0 0 50px rgba(24,245,208,.12),
        inset 0 0 0 1px rgba(255,255,255,.04);
}

.pps-screen-shine {
    position: absolute;
    inset: 14px;
    z-index: 2;
    border-radius: 14px;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 42%, transparent 58%);
    transform: translateX(-120%);
    animation: ppsScreenShine 3.2s ease-in-out infinite;
}

@keyframes ppsScreenShine {
    0%, 35% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
}

.pps-scroll-screen-content {
    position: absolute;
    inset: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px;
}

.pps-screen-kicker {
    color: #18f5d0;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .28em;
    margin-bottom: 18px;
}

.pps-scroll-screen-content h1 {
    margin: 0;
    color: #eafffb;
    font-size: clamp(30px, 4vw, 54px);
    line-height: .98;
    font-weight: 1000;
    letter-spacing: .06em;
    text-shadow:
        0 0 16px rgba(24,245,208,.95),
        0 0 45px rgba(0,199,255,.50);
}

.pps-scroll-screen-content h1 span {
    display: block;
    margin-top: 10px;
    font-size: .55em;
    letter-spacing: .16em;
    color: #ffffff;
}

.pps-scroll-screen-content p {
    margin: 20px 0 0;
    color: #b9c9d9;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
}

.pps-scroll-laptop-base {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 690px;
    height: 150px;
    transform: translateX(-50%) perspective(1100px) rotateX(72deg);
    border-radius: 20px 20px 38px 38px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10)),
        linear-gradient(135deg, #b9bec6 0%, #8c929c 28%, #666d77 52%, #9198a2 100%);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow:
        0 42px 70px rgba(0,0,0,.30),
        inset 0 2px 0 rgba(255,255,255,.60),
        inset 0 -14px 24px rgba(0,0,0,.20);
    overflow: hidden;
}

.pps-scroll-keyboard {
    position: absolute;
    left: 42px;
    right: 42px;
    top: 24px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    opacity: .62;
}

.pps-scroll-keyboard i {
    height: 10px;
    border-radius: 4px;
    background: rgba(12,18,26,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.pps-scroll-trackpad {
    position: absolute;
    width: 150px;
    height: 42px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        inset 0 0 14px rgba(0,0,0,.18),
        0 1px 0 rgba(255,255,255,.26);
}

.pps-scroll-intro-content {
    position: absolute;
    left: clamp(22px, 7vw, 115px);
    bottom: clamp(28px, 9vh, 90px);
    z-index: 4;
    max-width: 520px;
    color: #fff;
    will-change: opacity, transform;
}

.pps-scroll-brand-mini {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(24,245,208,.20);
    backdrop-filter: blur(16px);
}

.pps-scroll-brand-mini span {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: conic-gradient(from 180deg, #18f5d0, #00c7ff, #ffffff, #18f5d0);
    color: #020710;
    font-weight: 1000;
}

.pps-scroll-brand-mini b {
    font-size: 14px;
    letter-spacing: -.02em;
}

.pps-scroll-brand-mini em {
    font-style: normal;
    color: #18f5d0;
}

.pps-scroll-intro-content h2 {
    margin: 0 0 14px;
    font-size: clamp(42px, 5vw, 82px);
    line-height: .95;
    font-weight: 1000;
    letter-spacing: -.065em;
}

.pps-scroll-intro-content p {
    margin: 0;
    color: #c7d3e2;
    font-size: 17px;
    line-height: 1.75;
}

.pps-scroll-indicator {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    color: #18f5d0;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .18em;
}

.pps-scroll-indicator span {
    width: 34px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(24,245,208,.55);
    position: relative;
    box-shadow: 0 0 24px rgba(24,245,208,.16);
}

.pps-scroll-indicator span::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #18f5d0;
    animation: ppsMouseDot 1.2s ease-in-out infinite;
}

@keyframes ppsMouseDot {
    0% { top: 10px; opacity: 1; }
    100% { top: 32px; opacity: 0; }
}

.pps-intro-enter-btn {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(135deg, #18f5d0, #00c7ff);
    color: #020710;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 1000;
    box-shadow: 0 0 30px rgba(24,245,208,.26);
}

.pps-intro-enter-btn:hover {
    transform: translateY(-2px);
}

body.pps-intro-lock .topbar,
body.pps-intro-lock .navbar,
body.pps-intro-lock main,
body.pps-intro-lock footer {
    filter: blur(1.5px);
}

/* Mobile */
@media (max-width: 980px) {
    .pps-scroll-laptop {
        width: min(560px, 84vw);
        height: 400px;
    }

    .pps-scroll-laptop-screen {
        width: 460px;
        height: 290px;
    }

    .pps-scroll-laptop-base {
        width: 560px;
        height: 124px;
    }

    .pps-scroll-intro-content {
        left: 24px;
        right: 24px;
        bottom: 32px;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .pps-scroll-laptop-stage {
        transform: translateY(-70px);
    }

    .pps-scroll-laptop {
        width: 330px;
        height: 250px;
        transform: perspective(900px) rotateX(4deg) rotateY(-8deg);
    }

    .pps-scroll-laptop-screen {
        width: 300px;
        height: 190px;
        border-width: 4px;
    }

    .pps-scroll-laptop-screen::before,
    .pps-screen-shine {
        inset: 9px;
    }

    .pps-scroll-screen-content {
        inset: 9px;
        padding: 16px;
    }

    .pps-screen-kicker {
        font-size: 8px;
        margin-bottom: 10px;
    }

    .pps-scroll-screen-content h1 {
        font-size: 22px;
    }

    .pps-scroll-screen-content p {
        font-size: 10px;
        margin-top: 10px;
    }

    .pps-scroll-laptop-base {
        width: 340px;
        height: 76px;
        bottom: 4px;
    }

    .pps-scroll-keyboard {
        display: none;
    }

    .pps-scroll-trackpad {
        width: 82px;
        height: 22px;
        bottom: 11px;
    }

    .pps-scroll-intro-content h2 {
        font-size: 40px;
    }

    .pps-scroll-intro-content p {
        font-size: 14px;
    }

    .pps-scroll-indicator {
        margin-top: 18px;
    }
}
/* ============================================================
   PPS SMOOTH P INTRO
   Advanced style smooth scroll reveal
   Paste at bottom of assets/css/style.css
   ============================================================ */

html.pps-intro-lock,
body.pps-intro-lock {
    overflow: hidden !important;
    height: 100% !important;
}

.pps-scroll-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(24,245,208,.18), transparent 34%),
        radial-gradient(circle at 78% 62%, rgba(0,199,255,.13), transparent 34%),
        radial-gradient(circle at 20% 78%, rgba(124,60,255,.12), transparent 32%),
        linear-gradient(180deg, #020710 0%, #03101e 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .78s ease, visibility .78s ease;
    will-change: opacity;
}

.pps-scroll-intro.pps-scroll-intro-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.pps-p-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(24,245,208,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .72;
    animation: ppsPGridMove 2.8s linear infinite;
    will-change: opacity, transform;
}

@keyframes ppsPGridMove {
    from { transform: translateY(0); }
    to { transform: translateY(58px); }
}

.pps-p-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    pointer-events: none;
    will-change: transform, opacity;
}

.pps-glow-one {
    width: 740px;
    height: 740px;
    background: radial-gradient(circle, rgba(24,245,208,.22), transparent 60%);
    animation: ppsPGlowOne 5s ease-in-out infinite alternate;
}

.pps-glow-two {
    width: 560px;
    height: 560px;
    right: -170px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0,199,255,.16), transparent 62%);
    opacity: .8;
    animation: ppsPGlowTwo 6s ease-in-out infinite alternate;
}

@keyframes ppsPGlowOne {
    from { transform: translate3d(-28px, -14px, 0) scale(1); }
    to { transform: translate3d(42px, 24px, 0) scale(1.1); }
}

@keyframes ppsPGlowTwo {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-42px, -28px, 0) scale(1.14); }
}

.pps-p-symbol-stage {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    transform-origin: center center;
    will-change: transform, opacity;
}

.pps-p-symbol {
    position: relative;
    width: min(300px, 48vw);
    height: min(300px, 48vw);
    display: grid;
    place-items: center;
    border-radius: 42px;
    transform: rotate(-8deg);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.92), transparent 22%),
        conic-gradient(from 180deg, #18f5d0, #00c7ff, #ffffff, #18f5d0);
    color: #020710;
    box-shadow:
        0 0 80px rgba(24,245,208,.32),
        0 38px 100px rgba(0,0,0,.42),
        inset 0 0 32px rgba(255,255,255,.35);
    will-change: filter;
}

.pps-p-symbol::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 54px;
    border: 1px solid rgba(24,245,208,.26);
    box-shadow:
        0 0 40px rgba(24,245,208,.16),
        inset 0 0 30px rgba(24,245,208,.08);
}

.pps-p-symbol::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.32), transparent 38%),
        rgba(2,7,16,.07);
    pointer-events: none;
}

.pps-p-symbol-inner {
    position: relative;
    z-index: 2;
    font-size: clamp(130px, 18vw, 230px);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -.12em;
    transform: translateX(-8px);
    text-shadow:
        0 1px 0 rgba(255,255,255,.45),
        0 18px 40px rgba(0,0,0,.18);
}

.pps-p-intro-content {
    position: absolute;
    left: clamp(22px, 7vw, 118px);
    bottom: clamp(30px, 9vh, 92px);
    z-index: 5;
    max-width: 560px;
    color: #fff;
    will-change: opacity, transform;
}

.pps-p-mini-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(24,245,208,.20);
    backdrop-filter: blur(16px);
}

.pps-p-mini-brand span {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: conic-gradient(from 180deg, #18f5d0, #00c7ff, #ffffff, #18f5d0);
    color: #020710;
    font-weight: 1000;
}

.pps-p-mini-brand b {
    font-size: 14px;
    letter-spacing: -.02em;
}

.pps-p-mini-brand em {
    font-style: normal;
    color: #18f5d0;
}

.pps-p-intro-content h1 {
    margin: 0 0 14px;
    font-size: clamp(42px, 5vw, 84px);
    line-height: .95;
    font-weight: 1000;
    letter-spacing: -.065em;
}

.pps-p-intro-content p {
    margin: 0;
    color: #c7d3e2;
    font-size: 17px;
    line-height: 1.75;
}

.pps-p-scroll-cue {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 28px;
    color: #18f5d0;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .18em;
}

.pps-p-scroll-cue i {
    width: 34px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(24,245,208,.55);
    position: relative;
    box-shadow: 0 0 24px rgba(24,245,208,.16);
}

.pps-p-scroll-cue i::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #18f5d0;
    animation: ppsPMouseDot 1.2s ease-in-out infinite;
}

@keyframes ppsPMouseDot {
    0% { top: 10px; opacity: 1; }
    100% { top: 32px; opacity: 0; }
}

.pps-p-enter-btn {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(135deg, #18f5d0, #00c7ff);
    color: #020710;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 1000;
    box-shadow: 0 0 30px rgba(24,245,208,.26);
    transition: transform .25s ease, box-shadow .25s ease;
}

.pps-p-enter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 44px rgba(24,245,208,.38);
}

body.pps-intro-lock .topbar,
body.pps-intro-lock .navbar,
body.pps-intro-lock main,
body.pps-intro-lock footer {
    filter: blur(1.5px);
}

/* hide old laptop intro classes if old CSS remains */
.pps-scroll-laptop-stage,
.pps-scroll-laptop,
.pps-scroll-laptop-screen,
.pps-scroll-laptop-base {
    pointer-events: none;
}

/* Mobile */
@media (max-width: 980px) {
    .pps-p-symbol {
        width: 240px;
        height: 240px;
        border-radius: 34px;
    }

    .pps-p-symbol-inner {
        font-size: 170px;
    }

    .pps-p-intro-content {
        left: 24px;
        right: 24px;
        bottom: 34px;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .pps-p-symbol-stage {
        transform: translateY(-54px);
    }

    .pps-p-symbol {
        width: 178px;
        height: 178px;
        border-radius: 28px;
    }

    .pps-p-symbol::before {
        inset: -12px;
        border-radius: 38px;
    }

    .pps-p-symbol-inner {
        font-size: 124px;
        transform: translateX(-5px);
    }

    .pps-p-intro-content h1 {
        font-size: 40px;
    }

    .pps-p-intro-content p {
        font-size: 14px;
    }

    .pps-p-scroll-cue {
        margin-top: 18px;
    }
}
/* ============================================================
   PPS SMOOTH LAPTOP BUTTON INTRO
   No scroll needed - button click smooth zoom reveal
   Paste at bottom of assets/css/style.css
   ============================================================ */

html.pps-intro-lock,
body.pps-intro-lock {
    overflow: hidden !important;
    height: 100% !important;
}

.pps-scroll-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 34%, rgba(24,245,208,.18), transparent 34%),
        radial-gradient(circle at 80% 62%, rgba(0,199,255,.14), transparent 34%),
        radial-gradient(circle at 20% 78%, rgba(124,60,255,.12), transparent 32%),
        linear-gradient(180deg, #020710 0%, #03101e 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .78s ease, visibility .78s ease;
    will-change: opacity;
}

.pps-scroll-intro.pps-scroll-intro-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.pps-laptop-intro-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(24,245,208,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .72;
    animation: ppsLaptopIntroGridMove 2.8s linear infinite;
    will-change: opacity, transform;
}

@keyframes ppsLaptopIntroGridMove {
    from { transform: translateY(0); }
    to { transform: translateY(58px); }
}

.pps-laptop-intro-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    pointer-events: none;
    will-change: transform, opacity;
}

.pps-laptop-intro-glow.glow-a {
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, rgba(24,245,208,.22), transparent 60%);
    animation: ppsLaptopGlowA 5s ease-in-out infinite alternate;
}

.pps-laptop-intro-glow.glow-b {
    width: 560px;
    height: 560px;
    right: -170px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(0,199,255,.16), transparent 62%);
    opacity: .9;
    animation: ppsLaptopGlowB 6s ease-in-out infinite alternate;
}

@keyframes ppsLaptopGlowA {
    from { transform: translate3d(-28px, -14px, 0) scale(1); }
    to { transform: translate3d(42px, 24px, 0) scale(1.1); }
}

@keyframes ppsLaptopGlowB {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-42px, -28px, 0) scale(1.14); }
}

.pps-laptop-stage {
    position: absolute;
    z-index: 3;
    width: min(820px, 88vw);
    height: min(540px, 62vh);
    display: grid;
    place-items: center;
    transform-origin: center center;
    will-change: transform, opacity;
}

.pps-intro-laptop {
    position: relative;
    width: min(680px, 82vw);
    height: 455px;
    transform: perspective(1200px) rotateX(4deg) rotateY(-10deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 44px 88px rgba(0,0,0,.42));
}

.pps-intro-laptop-screen {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(560px, 82vw);
    height: 350px;
    transform: translateX(-50%);
    border-radius: 22px;
    background: linear-gradient(145deg, #06070a, #171b22 45%, #030406);
    border: 5px solid #06070a;
    outline: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 0 90px rgba(24,245,208,.14),
        inset 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
}

.pps-intro-laptop-screen::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 32%, rgba(24,245,208,.30), transparent 36%),
        radial-gradient(circle at 76% 72%, rgba(0,199,255,.15), transparent 38%),
        linear-gradient(145deg, #0b2d4b 0%, #020914 78%);
    border: 1px solid rgba(24,245,208,.24);
    box-shadow:
        inset 0 0 50px rgba(24,245,208,.12),
        inset 0 0 0 1px rgba(255,255,255,.04);
}

.pps-intro-screen-shine {
    position: absolute;
    inset: 14px;
    z-index: 2;
    border-radius: 14px;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 42%, transparent 58%);
    transform: translateX(-120%);
    animation: ppsIntroScreenShine 3.2s ease-in-out infinite;
}

@keyframes ppsIntroScreenShine {
    0%, 35% { transform: translateX(-120%); }
    70%, 100% { transform: translateX(120%); }
}

.pps-intro-screen-content {
    position: absolute;
    inset: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 34px;
}

.pps-intro-kicker {
    color: #18f5d0;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .28em;
    margin-bottom: 18px;
}

.pps-intro-screen-content h1 {
    margin: 0;
    color: #eafffb;
    font-size: clamp(30px, 4vw, 54px);
    line-height: .98;
    font-weight: 1000;
    letter-spacing: .06em;
    text-shadow:
        0 0 16px rgba(24,245,208,.95),
        0 0 45px rgba(0,199,255,.50);
}

.pps-intro-screen-content h1 span {
    display: block;
    margin-top: 10px;
    font-size: .55em;
    letter-spacing: .16em;
    color: #ffffff;
}

.pps-intro-screen-content p {
    margin: 20px 0 0;
    color: #b9c9d9;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
}

.pps-intro-laptop-base {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: min(680px, 86vw);
    height: 150px;
    transform: translateX(-50%) perspective(1100px) rotateX(72deg);
    border-radius: 20px 20px 38px 38px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10)),
        linear-gradient(135deg, #b9bec6 0%, #8c929c 28%, #666d77 52%, #9198a2 100%);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow:
        0 42px 70px rgba(0,0,0,.30),
        inset 0 2px 0 rgba(255,255,255,.60),
        inset 0 -14px 24px rgba(0,0,0,.20);
    overflow: hidden;
}

.pps-intro-keyboard {
    position: absolute;
    left: 42px;
    right: 42px;
    top: 24px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    opacity: .62;
}

.pps-intro-keyboard i {
    height: 10px;
    border-radius: 4px;
    background: rgba(12,18,26,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.pps-intro-trackpad {
    position: absolute;
    width: 150px;
    height: 42px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        inset 0 0 14px rgba(0,0,0,.18),
        0 1px 0 rgba(255,255,255,.26);
}

.pps-laptop-intro-content {
    position: absolute;
    left: clamp(22px, 7vw, 118px);
    bottom: clamp(30px, 8vh, 76px);
    z-index: 6;
    max-width: 560px;
    color: #fff;
    will-change: opacity, transform;
}

.pps-laptop-mini-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(24,245,208,.20);
    backdrop-filter: blur(16px);
}

.pps-laptop-mini-brand span {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: conic-gradient(from 180deg, #18f5d0, #00c7ff, #ffffff, #18f5d0);
    color: #020710;
    font-weight: 1000;
}

.pps-laptop-mini-brand b {
    font-size: 14px;
    letter-spacing: -.02em;
}

.pps-laptop-mini-brand em {
    font-style: normal;
    color: #18f5d0;
}

.pps-laptop-intro-content h2 {
    margin: 0 0 14px;
    font-size: clamp(38px, 5vw, 78px);
    line-height: .95;
    font-weight: 1000;
    letter-spacing: -.065em;
}

.pps-laptop-intro-content p {
    margin: 0;
    color: #c7d3e2;
    font-size: 17px;
    line-height: 1.7;
}

.pps-laptop-enter-btn {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(135deg, #18f5d0, #00c7ff);
    color: #020710;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 1000;
    box-shadow: 0 0 30px rgba(24,245,208,.26);
    transition: transform .25s ease, box-shadow .25s ease;
}

.pps-laptop-enter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 44px rgba(24,245,208,.38);
}

body.pps-intro-lock .topbar,
body.pps-intro-lock .navbar,
body.pps-intro-lock main,
body.pps-intro-lock footer {
    filter: blur(1.5px);
}

/* hide old P intro if old CSS remains */
.pps-p-symbol-stage,
.pps-p-symbol,
.pps-p-intro-content {
    pointer-events: none;
}

/* Mobile perfect setup */
@media (max-width: 980px) {
    .pps-laptop-stage {
        width: 100vw;
        height: 54vh;
        top: 4vh;
    }

    .pps-intro-laptop {
        width: 520px;
        height: 350px;
        transform: perspective(1000px) rotateX(4deg) rotateY(-7deg);
    }

    .pps-intro-laptop-screen {
        width: 430px;
        height: 270px;
    }

    .pps-intro-laptop-base {
        width: 520px;
        height: 112px;
        bottom: 8px;
    }

    .pps-laptop-intro-content {
        left: 24px;
        right: 24px;
        bottom: 34px;
        max-width: none;
        text-align: left;
    }

    .pps-laptop-intro-content h2 {
        font-size: 42px;
    }
}

@media (max-width: 640px) {
    .pps-laptop-stage {
        top: 2vh;
        height: 46vh;
        transform: translateY(-12px);
    }

    .pps-intro-laptop {
        width: 330px;
        height: 245px;
        transform: perspective(900px) rotateX(4deg) rotateY(-5deg);
        filter: drop-shadow(0 28px 50px rgba(0,0,0,.36));
    }

    .pps-intro-laptop-screen {
        width: 295px;
        height: 185px;
        border-width: 4px;
        border-radius: 16px;
    }

    .pps-intro-laptop-screen::before,
    .pps-intro-screen-shine {
        inset: 9px;
        border-radius: 10px;
    }

    .pps-intro-screen-content {
        inset: 9px;
        padding: 14px;
    }

    .pps-intro-kicker {
        font-size: 8px;
        letter-spacing: .18em;
        margin-bottom: 10px;
    }

    .pps-intro-screen-content h1 {
        font-size: 21px;
        letter-spacing: .04em;
    }

    .pps-intro-screen-content h1 span {
        font-size: .52em;
        margin-top: 7px;
    }

    .pps-intro-screen-content p {
        font-size: 9px;
        margin-top: 9px;
        letter-spacing: .04em;
    }

    .pps-intro-laptop-base {
        width: 330px;
        height: 72px;
        bottom: 3px;
        border-radius: 12px 12px 22px 22px;
    }

    .pps-intro-keyboard {
        display: none;
    }

    .pps-intro-trackpad {
        width: 82px;
        height: 22px;
        bottom: 10px;
    }

    .pps-laptop-intro-content {
        bottom: 28px;
    }

    .pps-laptop-mini-brand {
        margin-bottom: 14px;
        padding: 9px 12px;
    }

    .pps-laptop-mini-brand span {
        width: 32px;
        height: 32px;
    }

    .pps-laptop-mini-brand b {
        font-size: 12px;
    }

    .pps-laptop-intro-content h2 {
        font-size: 34px;
        letter-spacing: -.045em;
    }

    .pps-laptop-intro-content p {
        font-size: 13px;
    }

    .pps-laptop-enter-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 18px;
        margin-top: 18px;
        font-size: 13px;
    }
}
/* ============================================================
   PPS INTRO HD / 4K SMOOTH FIX
   Button text no tearing + smoother zoom
   Paste at bottom of assets/css/style.css
   ============================================================ */

.pps-scroll-intro,
.pps-laptop-stage,
.pps-intro-laptop,
.pps-intro-laptop-screen,
.pps-intro-laptop-base,
.pps-laptop-intro-content,
.pps-laptop-enter-btn {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    will-change: transform, opacity !important;
}

.pps-laptop-stage {
    transform-origin: center center !important;
    transform: translate3d(0,0,0) scale3d(1,1,1);
}

.pps-intro-laptop {
    transform: perspective(1400px) rotateX(4deg) rotateY(-8deg) translate3d(0,0,0) !important;
    filter: none !important;
}

.pps-intro-laptop-screen {
    box-shadow:
        0 0 110px rgba(24,245,208,.18),
        0 35px 90px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.pps-intro-screen-content h1,
.pps-intro-screen-content h1 span,
.pps-intro-screen-content p,
.pps-intro-kicker,
.pps-laptop-intro-content h2,
.pps-laptop-intro-content p,
.pps-laptop-enter-btn {
    transform: translate3d(0,0,0) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
}

/* Button will fade before zoom, so it will not break/pixelate */
.pps-laptop-intro-content {
    transition:
        opacity .28s ease,
        transform .28s ease,
        filter .28s ease !important;
}

.pps-scroll-intro.pps-intro-started .pps-laptop-intro-content {
    opacity: 0 !important;
    transform: translate3d(0,-28px,0) !important;
    filter: blur(4px) !important;
    pointer-events: none !important;
}

.pps-scroll-intro.pps-intro-started .pps-laptop-enter-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* During zoom remove heavy filters to avoid tearing */
.pps-scroll-intro.pps-intro-started .pps-intro-laptop {
    filter: none !important;
}

.pps-scroll-intro.pps-intro-started .pps-intro-screen-shine {
    animation-play-state: paused !important;
    opacity: 0 !important;
}

/* Make laptop screen sharper */
.pps-intro-laptop-screen::before {
    background:
        radial-gradient(circle at 50% 32%, rgba(24,245,208,.34), transparent 36%),
        radial-gradient(circle at 76% 72%, rgba(0,199,255,.18), transparent 38%),
        linear-gradient(145deg, #0d3355 0%, #020914 78%) !important;
}

.pps-intro-screen-content h1 {
    text-shadow:
        0 0 12px rgba(24,245,208,.88),
        0 0 34px rgba(0,199,255,.42) !important;
}

/* Mobile HD fix */
@media (max-width: 640px) {
    .pps-intro-laptop {
        transform: perspective(1000px) rotateX(3deg) rotateY(-4deg) translate3d(0,0,0) !important;
        filter: none !important;
    }

    .pps-laptop-stage {
        transform-origin: center center !important;
    }

    .pps-scroll-intro.pps-intro-started .pps-laptop-intro-content {
        opacity: 0 !important;
        transform: translate3d(0,-18px,0) !important;
        filter: blur(3px) !important;
    }

    .pps-intro-screen-content h1 {
        font-size: 22px !important;
        text-shadow:
            0 0 8px rgba(24,245,208,.80),
            0 0 22px rgba(0,199,255,.35) !important;
    }
}

/* ============================================================
   PPS V2 · 3D LETTER INTRO  ·  CURSOR PARALLAX
   ============================================================ */

.pps-scroll-intro.pps-v2-intro {
    background: #030710 !important;
    display: block !important;
    place-items: unset !important;
}

/* ── Grid background ── */
.pps-v2-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(24,245,208,.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.024) 1px, transparent 1px);
    background-size: 68px 68px;
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

/* ── Brand badge ── */
.pps-v2-brand {
    position: absolute;
    top: 38px;
    left: 46px;
    display: flex;
    align-items: center;
    gap: 13px;
    z-index: 20;
    color: #fff;
}
.pps-v2-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #18f5d0 0%, #00c7ff 100%);
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #030710;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 0 28px rgba(24,245,208,.38);
}
.pps-v2-brand-text strong {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #fff;
    text-transform: uppercase;
}
.pps-v2-brand-text em {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255,255,255,.38);
    font-style: normal;
    letter-spacing: .07em;
    margin-top: 2px;
}
.pps-v2-reg {
    font-size: 18px;
    color: rgba(255,255,255,.26);
    font-weight: 400;
    align-self: flex-start;
    line-height: 1;
}

/* ── Left content ── */
.pps-v2-content {
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 44vw;
    max-width: 560px;
    color: #fff;
    pointer-events: none;
}
.pps-v2-kicker {
    font-size: 10.5px;
    letter-spacing: .22em;
    font-weight: 800;
    color: #18f5d0;
    margin: 0 0 22px;
    text-transform: uppercase;
    line-height: 1;
}
.pps-v2-headline {
    font-family: 'Inter', sans-serif;
    font-size: clamp(44px, 5.8vw, 92px);
    font-weight: 900;
    line-height: .94;
    color: #fff;
    margin: 0 0 34px;
    letter-spacing: -.04em;
    -webkit-font-smoothing: antialiased;
}

/* ── Service pills ── */
.pps-v2-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 46px;
    pointer-events: all;
}
.pps-v2-services span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.46);
    border: 1px solid rgba(255,255,255,.1);
    padding: 6px 12px;
    border-radius: 4px;
    transition: color .22s, border-color .22s;
    cursor: default;
}
.pps-v2-services span:hover {
    color: #18f5d0;
    border-color: rgba(24,245,208,.4);
}

/* ── Scroll hint ── */
.pps-v2-scroll-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,.30);
}
.pps-v2-scroll-line {
    display: block;
    height: 1px;
    background: rgba(255,255,255,.22);
    animation: ppsV2LineAnim 1.9s ease-in-out infinite;
}
@keyframes ppsV2LineAnim {
    0%   { width: 10px; opacity: .3; }
    50%  { width: 38px; opacity: 1;  }
    100% { width: 10px; opacity: .3; }
}

/* ── Bottom-right descriptor ── */
.pps-v2-desc {
    position: absolute;
    bottom: 44px;
    right: 46px;
    max-width: 320px;
    z-index: 20;
    text-align: right;
}
.pps-v2-desc p {
    font-size: 12.5px;
    line-height: 1.82;
    color: rgba(255,255,255,.36);
    margin: 0;
}
.pps-v2-desc-sub {
    margin-top: 10px !important;
    font-size: 10px !important;
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255,255,255,.18) !important;
}

/* ════════════════════════════════════════════
   3D  P  LETTER
   LEFT-EDGE at 48 % of viewport → fully visible
   ════════════════════════════════════════════ */

/* Outer: position only — NO JS touches this */
.pps-v2-letter-outer {
    position: absolute;
    left: 48%;          /* P stem starts at screen center, fully visible */
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

/* Wrap: JS sets perspective-tilt each rAF frame */
.pps-v2-letter-wrap {
    position: relative;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    will-change: transform;
    transform: perspective(900px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg);
}

/*
 * Bowl glow: teal radial visible through P's counter (hole inside bowl).
 * P bowl is in upper-right of the character → glow sits upper-right of wrap.
 */
.pps-v2-bowl-glow {
    position: absolute;
    top: 3%;
    left: 48%;      /* right half of character — where bowl counter sits */
    width: 48%;
    height: 52%;
    background: radial-gradient(
        ellipse at 50% 40%,
        rgba(24,245,208,.55) 0%,
        rgba(0,199,255,.34) 35%,
        rgba(0,199,255,.10) 62%,
        transparent 80%
    );
    filter: blur(20px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}

/* ── The P itself ── */
.pps-v2-p {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: min(90vh, 66vw);
    line-height: 1;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    will-change: transform, opacity;

    /*
     * Face: #0d1f3c — clearly visible against #030710 background
     * (enough contrast so the letter shape reads clearly)
     *
     * Extrusion via stacked text-shadow (diagonal bottom-right):
     *   Layers 1-4  → lit edge (brighter blue-navy, simulates catch-light)
     *   Layers 5-10 → shadowed side (mid-dark, main depth)
     *   Layers 11-16→ receding far edge (darkest)
     */
    color: #0d1f3c;
    text-shadow:
        /* Teal catch-light on top-left edge */
        -1px -1px 0  rgba(24,245,208,.22),

        /* Lit bevel — upper layers */
        1px  1px  0  #1a3d70,
        2px  2px  0  #1d4278,
        3px  3px  0  #1f467e,
        4px  4px  0  #1e4480,

        /* Shadow side — mid depth */
        5px  5px  0  #193a72,
        6px  6px  0  #153264,
        7px  7px  0  #112b56,
        8px  8px  0  #0e2448,
        9px  9px  0  #0b1e3c,

        /* Far edge — receding */
        10px 10px 0  #091832,
        11px 11px 0  #071528,
        12px 12px 0  #06121e,
        13px 13px 0  #050f1a,
        14px 14px 0  #040d16,
        15px 15px 0  #030b12,

        /* Ambient glow */
        0 0  80px rgba(24,245,208,.08),
        0 0 180px rgba(0,199,255,.04);
}

/* Brand fades on exit */
.pps-scroll-intro.pps-v2-intro.pps-intro-started .pps-v2-brand {
    opacity: 0;
    transition: opacity .4s ease;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pps-v2-content { width: 46vw; left: 30px; }
    .pps-v2-brand   { left: 30px; top: 26px; }
    .pps-v2-desc    { right: 30px; bottom: 28px; }
    .pps-v2-headline { font-size: clamp(36px, 6.5vw, 72px); }
    .pps-v2-letter-outer { left: 44%; }
}

@media (max-width: 767px) {
    .pps-v2-brand   { top: 18px; left: 16px; gap: 9px; }
    .pps-v2-brand-mark { width: 36px; height: 36px; font-size: 19px; border-radius: 8px; }
    .pps-v2-brand-text strong { font-size: 10.5px; }
    .pps-v2-brand-text em     { font-size: 9px; }
    .pps-v2-reg               { font-size: 14px; }

    .pps-v2-content { left: 16px; width: 48vw; max-width: none; }
    .pps-v2-kicker  { font-size: 7.5px; margin-bottom: 12px; letter-spacing: .14em; }
    .pps-v2-headline { font-size: clamp(24px, 7.8vw, 44px); margin-bottom: 18px; }
    .pps-v2-services { gap: 5px 6px; margin-bottom: 22px; }
    .pps-v2-services span { font-size: 7.5px; padding: 4px 7px; }
    .pps-v2-scroll-hint { font-size: 8px; }

    .pps-v2-letter-outer { left: 42%; }
    .pps-v2-p { font-size: min(82vh, 76vw); }
    .pps-v2-bowl-glow { filter: blur(14px); }
    .pps-v2-desc { display: none; }
}

@media (max-width: 420px) {
    .pps-v2-content      { width: 50vw; left: 12px; }
    .pps-v2-headline     { font-size: clamp(20px, 8.5vw, 32px); }
    .pps-v2-letter-outer { left: 38%; }
    .pps-v2-p { font-size: min(78vh, 80vw); }
}
/* ============================================================
   PPS FINAL · ADVANCED STYLE CENTER 3D P INTRO
   Paste this at the VERY BOTTOM of assets/css/style.css
   ============================================================ */

html.pps-intro-lock,
body.pps-intro-lock{
    overflow:hidden !important;
    height:100% !important;
}

.pps-scroll-intro.pps-v2-intro{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    display:block !important;
    overflow:hidden !important;
    background:
        radial-gradient(circle at 50% 46%, rgba(24,245,208,.14), transparent 31%),
        radial-gradient(circle at 72% 45%, rgba(0,199,255,.14), transparent 34%),
        radial-gradient(circle at 25% 70%, rgba(124,60,255,.10), transparent 31%),
        linear-gradient(180deg, #02060d 0%, #030914 55%, #01040a 100%) !important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .75s ease, visibility .75s ease;
}

.pps-scroll-intro.pps-scroll-intro-hide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.pps-v2-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(24,245,208,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,255,.030) 1px, transparent 1px);
    background-size:68px 68px;
    opacity:.55;
    pointer-events:none;
    z-index:0;
}

.pps-v2-grid:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(2,6,13,.96) 0%, transparent 32%, transparent 68%, rgba(2,6,13,.96) 100%),
        linear-gradient(180deg, rgba(2,6,13,.94) 0%, transparent 28%, transparent 72%, rgba(2,6,13,.92) 100%);
}

.pps-v2-aurora{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(24px);
    opacity:.72;
    z-index:1;
}

.pps-v2-aurora-a{
    width:560px;
    height:560px;
    left:50%;
    top:48%;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(24,245,208,.24), transparent 62%);
    animation:ppsAuroraA 5s ease-in-out infinite alternate;
}

.pps-v2-aurora-b{
    width:460px;
    height:460px;
    left:62%;
    top:42%;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(0,199,255,.18), transparent 62%);
    animation:ppsAuroraB 6s ease-in-out infinite alternate;
}

@keyframes ppsAuroraA{
    from{transform:translate(-52%, -50%) scale(1)}
    to{transform:translate(-48%, -47%) scale(1.12)}
}

@keyframes ppsAuroraB{
    from{transform:translate(-50%, -50%) scale(1)}
    to{transform:translate(-56%, -46%) scale(1.10)}
}

/* Brand top-left */
.pps-v2-brand{
    position:absolute !important;
    top:34px !important;
    left:42px !important;
    display:flex !important;
    align-items:center !important;
    gap:13px !important;
    z-index:30 !important;
    color:#fff !important;
}

.pps-v2-brand-mark{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
    background:linear-gradient(135deg, #18f5d0 0%, #00d2ff 100%) !important;
    display:grid !important;
    place-items:center !important;
    font-family:'Inter',sans-serif !important;
    font-weight:1000 !important;
    font-size:24px !important;
    color:#02060d !important;
    line-height:1 !important;
    box-shadow:
        0 0 34px rgba(24,245,208,.45),
        inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.pps-v2-brand-text strong{
    display:block !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.13em !important;
    color:#fff !important;
    text-transform:uppercase !important;
}

.pps-v2-brand-text em{
    display:block !important;
    margin-top:2px !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    letter-spacing:.06em !important;
    color:rgba(255,255,255,.48) !important;
    font-style:normal !important;
}

.pps-v2-reg{
    font-size:17px !important;
    color:rgba(255,255,255,.28) !important;
    align-self:flex-start !important;
}

/* Top intro */
.pps-v2-top-content{
    position:absolute;
    left:50%;
    top:12.5vh;
    transform:translateX(-50%);
    width:min(1040px, calc(100% - 44px));
    text-align:center;
    z-index:25;
    pointer-events:none;
    will-change:transform, opacity;
}

.pps-v2-kicker{
    margin:0 0 15px !important;
    color:#18f5d0 !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:1000 !important;
    letter-spacing:.28em !important;
    text-transform:uppercase !important;
    text-shadow:0 0 18px rgba(24,245,208,.42) !important;
}

.pps-v2-headline{
    margin:0 !important;
    color:#fff !important;
    font-family:'Inter',sans-serif !important;
    font-size:clamp(38px, 6vw, 86px) !important;
    line-height:.92 !important;
    font-weight:1000 !important;
    letter-spacing:-.065em !important;
    text-transform:none !important;
    text-shadow:
        0 0 42px rgba(24,245,208,.10),
        0 18px 70px rgba(0,0,0,.45) !important;
}

.pps-v2-subline{
    width:min(640px, 94%);
    margin:18px auto 0;
    color:rgba(226,238,248,.55);
    font-size:14px;
    line-height:1.7;
    font-weight:700;
}

/* Center P */
.pps-v2-letter-outer{
    position:absolute !important;
    left:50% !important;
    top:52% !important;
    transform:translate(-50%, -50%) !important;
    z-index:8 !important;
    pointer-events:none !important;
}

.pps-v2-letter-wrap{
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    transform-style:preserve-3d !important;
    transform:perspective(980px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) !important;
    will-change:transform !important;
}

.pps-v2-bowl-glow{
    position:absolute !important;
    top:6% !important;
    left:47% !important;
    width:48% !important;
    height:48% !important;
    border-radius:50% !important;
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(24,245,208,.78) 0%,
            rgba(0,210,255,.44) 36%,
            rgba(0,210,255,.12) 66%,
            transparent 82%) !important;
    filter:blur(22px) !important;
    z-index:1 !important;
    opacity:.92 !important;
    pointer-events:none !important;
    will-change:transform, opacity !important;
}

.pps-v2-p{
    position:relative !important;
    z-index:2 !important;
    font-family:'Inter',sans-serif !important;
    font-weight:1000 !important;
    font-size:min(70vh, 54vw) !important;
    line-height:.84 !important;
    letter-spacing:-.10em !important;
    user-select:none !important;
    -webkit-font-smoothing:antialiased !important;
    text-rendering:geometricPrecision !important;
    color:#9ff4ff !important;
    will-change:transform, opacity !important;

    text-shadow:
        -2px -2px 0 rgba(255,255,255,.22),
        -4px -4px 24px rgba(24,245,208,.18),

        1px 1px 0 #60dfff,
        2px 2px 0 #42cfff,
        3px 3px 0 #20b8ef,
        4px 4px 0 #109ed9,

        5px 5px 0 #0b86c4,
        6px 6px 0 #096fad,
        7px 7px 0 #075a95,
        8px 8px 0 #06477d,
        9px 9px 0 #053868,
        10px 10px 0 #042b52,
        11px 11px 0 #032340,
        12px 12px 0 #02192f,
        13px 13px 0 #011222,
        14px 14px 0 #010b16,

        0 0 80px rgba(24,245,208,.30),
        0 0 170px rgba(0,199,255,.18),
        0 34px 120px rgba(0,0,0,.72) !important;

    filter:drop-shadow(0 0 22px rgba(24,245,208,.16));
}

/* Bottom services */
.pps-v2-services-panel{
    position:absolute;
    left:50%;
    bottom:8vh;
    transform:translateX(-50%);
    width:min(980px, calc(100% - 44px));
    z-index:28;
    text-align:center;
    will-change:transform, opacity;
}

.pps-v2-services-title{
    margin:0 0 16px;
    color:rgba(255,255,255,.44);
    font-size:11px;
    font-weight:1000;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.pps-v2-services{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin:0 auto 25px !important;
    pointer-events:auto !important;
}

.pps-v2-services span{
    font-size:10.5px !important;
    font-weight:900 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    color:rgba(255,255,255,.62) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    background:rgba(255,255,255,.025) !important;
    padding:8px 13px !important;
    border-radius:999px !important;
    backdrop-filter:blur(14px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 24px rgba(24,245,208,.03) !important;
    transition:.25s ease !important;
}

.pps-v2-services span:hover{
    color:#18f5d0 !important;
    border-color:rgba(24,245,208,.48) !important;
    box-shadow:0 0 28px rgba(24,245,208,.14) !important;
    transform:translateY(-2px);
}

.pps-v2-scroll-hint{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
    color:rgba(255,255,255,.34) !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
}

.pps-v2-scroll-hint small{
    font-size:9px;
    letter-spacing:.10em;
    color:rgba(24,245,208,.62);
}

.pps-v2-scroll-line{
    display:block !important;
    width:40px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(24,245,208,.85), transparent) !important;
    animation:ppsV2LineAnim 1.8s ease-in-out infinite !important;
}

@keyframes ppsV2LineAnim{
    0%{width:18px;opacity:.35}
    50%{width:54px;opacity:1}
    100%{width:18px;opacity:.35}
}

/* Exit state smooth fade */
.pps-scroll-intro.pps-v2-intro.pps-intro-started .pps-v2-brand{
    opacity:0;
    transition:opacity .35s ease;
}

/* Mobile responsive */
@media(max-width:900px){
    .pps-v2-brand{
        top:24px !important;
        left:24px !important;
    }

    .pps-v2-top-content{
        top:13vh;
    }

    .pps-v2-headline{
        font-size:clamp(34px, 8vw, 72px) !important;
    }

    .pps-v2-p{
        font-size:min(64vh, 72vw) !important;
    }

    .pps-v2-services-panel{
        bottom:7vh;
    }
}

@media(max-width:640px){
    .pps-v2-brand{
        top:16px !important;
        left:16px !important;
        gap:9px !important;
    }

    .pps-v2-brand-mark{
        width:36px !important;
        height:36px !important;
        font-size:20px !important;
    }

    .pps-v2-brand-text strong{
        font-size:10px !important;
    }

    .pps-v2-brand-text em{
        font-size:8.5px !important;
    }

    .pps-v2-top-content{
        top:12vh;
        width:calc(100% - 28px);
    }

    .pps-v2-kicker{
        font-size:8px !important;
        letter-spacing:.16em !important;
        margin-bottom:10px !important;
    }

    .pps-v2-headline{
        font-size:clamp(30px, 11vw, 48px) !important;
        line-height:.94 !important;
    }

    .pps-v2-subline{
        margin-top:12px;
        font-size:12px;
        line-height:1.55;
    }

    .pps-v2-letter-outer{
        top:51% !important;
    }

    .pps-v2-p{
        font-size:min(56vh, 92vw) !important;
    }

    .pps-v2-services-panel{
        bottom:5.5vh;
        width:calc(100% - 24px);
    }

    .pps-v2-services-title{
        font-size:9px;
        margin-bottom:10px;
    }

    .pps-v2-services{
        gap:6px !important;
        margin-bottom:16px !important;
    }

    .pps-v2-services span{
        font-size:7.5px !important;
        padding:6px 8px !important;
        letter-spacing:.08em !important;
    }

    .pps-v2-scroll-hint{
        font-size:8px !important;
        gap:8px !important;
    }

    .pps-v2-scroll-hint small{
        display:none;
    }
}
/* ============================================================
   PPS FINAL · ADVANCED TEAM INSPIRED INTRO
   Paste at VERY BOTTOM of assets/css/style.css
   ============================================================ */

html.pps-intro-lock,
body.pps-intro-lock{
    overflow:hidden !important;
    height:100% !important;
}

#ppsScrollIntro.pps-at-intro{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    overflow:hidden !important;
    background:#000 !important;
    color:#fff !important;
    pointer-events:auto !important;
    opacity:1;
    visibility:visible;
    transition:opacity .75s ease, visibility .75s ease;
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}

#ppsScrollIntro.pps-at-intro.pps-scroll-intro-hide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

#ppsScrollIntro.pps-at-intro *,
#ppsScrollIntro.pps-at-intro *::before,
#ppsScrollIntro.pps-at-intro *::after{
    box-sizing:border-box;
}

.pps-at-noise{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:.13;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,.14) 0 1px, transparent 1.5px);
    background-size:32px 32px, 46px 46px;
    mix-blend-mode:screen;
}

.pps-at-grid{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px);
    background-size:72px 72px;
    opacity:.26;
}

.pps-at-grid::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 56% 48%, transparent 0 22%, rgba(0,0,0,.46) 48%, #000 78%),
        linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
}

.pps-at-glow{
    position:absolute;
    z-index:2;
    border-radius:50%;
    pointer-events:none;
    filter:blur(34px);
}

.pps-at-glow-one{
    width:520px;
    height:520px;
    left:47%;
    top:41%;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(255,103,31,.22), transparent 62%);
    animation:ppsAtGlowOne 6s ease-in-out infinite alternate;
}

.pps-at-glow-two{
    width:430px;
    height:430px;
    left:62%;
    top:57%;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(155,33,24,.20), transparent 62%);
    animation:ppsAtGlowTwo 7s ease-in-out infinite alternate;
}

@keyframes ppsAtGlowOne{
    from{transform:translate(-52%, -50%) scale(1)}
    to{transform:translate(-46%, -46%) scale(1.14)}
}

@keyframes ppsAtGlowTwo{
    from{transform:translate(-50%, -52%) scale(1)}
    to{transform:translate(-56%, -46%) scale(1.10)}
}

/* Top left brand */
.pps-at-brand{
    position:absolute;
    left:52px;
    top:44px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:11px;
    color:#fff;
    will-change:opacity, transform;
}

.pps-at-brand-mark{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#000;
    font-size:22px;
    font-weight:1000;
    background:linear-gradient(135deg, #ffffff 0%, #f0b38a 52%, #ff5b22 100%);
    box-shadow:
        0 0 30px rgba(255,91,34,.24),
        inset 0 1px 0 rgba(255,255,255,.70);
}

.pps-at-brand-name b{
    display:block;
    font-size:12px;
    line-height:1;
    font-weight:950;
    letter-spacing:.06em;
}

.pps-at-brand-name small{
    display:block;
    margin-top:4px;
    font-size:10px;
    line-height:1;
    color:rgba(255,255,255,.50);
    font-weight:700;
}

.pps-at-brand sup{
    align-self:flex-start;
    color:#fff;
    opacity:.72;
    font-size:17px;
    line-height:1;
}

/* Top right services/nav */
.pps-at-nav{
    position:absolute;
    right:72px;
    top:57px;
    z-index:21;
    display:flex;
    align-items:center;
    gap:54px;
    color:rgba(255,255,255,.42);
    font-size:15px;
    font-weight:800;
    will-change:opacity, transform;
}

.pps-at-nav span{
    display:inline-flex;
    white-space:nowrap;
    transition:.25s ease;
}

.pps-at-nav span:hover{
    color:#fff;
}

/* Left big headline */
.pps-at-title{
    position:absolute;
    left:54px;
    top:124px;
    z-index:12;
    width:min(58vw, 760px);
    will-change:opacity, transform;
    pointer-events:none;
}

.pps-at-title h1{
    margin:0 !important;
    color:#fff !important;
    font-size:clamp(56px, 5.8vw, 105px) !important;
    line-height:.96 !important;
    font-weight:500 !important;
    letter-spacing:-.075em !important;
    text-shadow:0 18px 80px rgba(0,0,0,.55) !important;
}

/* 3D center/right letter */
.pps-at-letter-stage{
    position:absolute;
    inset:0;
    z-index:6;
    display:grid;
    place-items:center;
    pointer-events:none;
    perspective:1400px;
}

.pps-at-letter-wrap{
    position:relative;
    transform-style:preserve-3d;
    will-change:transform;
    margin-left:17vw;
    margin-top:7vh;
}

.pps-at-letter-glow{
    position:absolute;
    left:50%;
    top:43%;
    width:58%;
    height:54%;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:
        radial-gradient(ellipse at center,
            rgba(255,88,32,.50) 0%,
            rgba(164,25,18,.34) 35%,
            rgba(92,10,8,.16) 62%,
            transparent 78%);
    filter:blur(20px);
    z-index:1;
    will-change:opacity, transform;
}

.pps-at-letter{
    position:relative;
    z-index:2;
    font-size:min(68vh, 46vw);
    line-height:.78;
    font-weight:1000;
    letter-spacing:-.10em;
    user-select:none;
    color:transparent;
    background:
        linear-gradient(135deg, #202020 0%, #080808 34%, #181818 52%, #050505 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-stroke:1px rgba(255,255,255,.16);
    text-shadow:
        1px 1px 0 #28100d,
        2px 2px 0 #421812,
        3px 3px 0 #5c2016,
        4px 4px 0 #762719,
        5px 5px 0 #912d1d,
        6px 6px 0 #702117,
        7px 7px 0 #511812,
        8px 8px 0 #39110e,
        9px 9px 0 #260b09,
        10px 10px 0 #170605,
        18px 26px 80px rgba(255,76,28,.16),
        0 50px 110px rgba(0,0,0,.92);
    filter:drop-shadow(0 0 18px rgba(255,90,32,.11));
    transform-origin:center center;
    will-change:transform, opacity;
}

.pps-at-letter::after{
    content:"";
    position:absolute;
    inset:8% 18% auto auto;
    width:38%;
    height:38%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,88,32,.26), transparent 66%);
    pointer-events:none;
    filter:blur(12px);
}

.pps-at-letter-reflection{
    position:absolute;
    left:51%;
    top:87%;
    z-index:0;
    width:46%;
    height:26%;
    transform:translateX(-50%) rotateX(74deg) scaleY(.55);
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(255,69,28,.20), transparent 72%);
    filter:blur(18px);
    opacity:.75;
}

/* Right bottom copy */
.pps-at-copy{
    position:absolute;
    right:74px;
    bottom:82px;
    z-index:18;
    width:min(430px, 32vw);
    will-change:opacity, transform;
}

.pps-at-copy p{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:1.55;
    font-weight:500;
    letter-spacing:-.025em;
}

/* Bottom meta */
.pps-at-meta{
    position:absolute;
    right:74px;
    bottom:34px;
    z-index:19;
    color:rgba(255,255,255,.42);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    will-change:opacity, transform;
}

/* Bottom left scroll */
.pps-at-scroll{
    position:absolute;
    left:54px;
    bottom:36px;
    z-index:20;
    color:#fff;
    font-size:15px;
    font-weight:700;
    will-change:opacity, transform;
}

.pps-at-scroll span{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.pps-at-scroll span::before{
    content:"";
    width:1px;
    height:34px;
    display:inline-block;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.85), transparent);
    animation:ppsAtScrollLine 1.6s ease-in-out infinite;
}

@keyframes ppsAtScrollLine{
    0%,100%{transform:translateY(-5px); opacity:.35}
    50%{transform:translateY(5px); opacity:1}
}

/* During intro exit */
#ppsScrollIntro.pps-at-intro.pps-intro-started .pps-at-nav,
#ppsScrollIntro.pps-at-intro.pps-intro-started .pps-at-brand,
#ppsScrollIntro.pps-at-intro.pps-intro-started .pps-at-title,
#ppsScrollIntro.pps-at-intro.pps-intro-started .pps-at-copy,
#ppsScrollIntro.pps-at-intro.pps-intro-started .pps-at-meta,
#ppsScrollIntro.pps-at-intro.pps-intro-started .pps-at-scroll{
    pointer-events:none;
}

/* Responsive */
@media(max-width:1100px){
    .pps-at-nav{
        gap:28px;
        right:34px;
        font-size:13px;
    }

    .pps-at-title h1{
        font-size:clamp(48px, 7vw, 82px) !important;
    }

    .pps-at-letter-wrap{
        margin-left:20vw;
    }

    .pps-at-copy{
        width:min(390px, 38vw);
        right:36px;
    }
}

@media(max-width:820px){
    .pps-at-brand{
        left:22px;
        top:22px;
    }

    .pps-at-nav{
        left:22px;
        right:22px;
        top:auto;
        bottom:96px;
        justify-content:center;
        flex-wrap:wrap;
        gap:13px 20px;
        font-size:11px;
    }

    .pps-at-title{
        left:22px;
        top:98px;
        width:calc(100% - 44px);
    }

    .pps-at-title h1{
        font-size:clamp(43px, 10vw, 76px) !important;
        line-height:.96 !important;
    }

    .pps-at-letter-wrap{
        margin-left:12vw;
        margin-top:12vh;
    }

    .pps-at-letter{
        font-size:min(54vh, 78vw);
    }

    .pps-at-copy{
        left:22px;
        right:22px;
        bottom:148px;
        width:auto;
    }

    .pps-at-copy p{
        font-size:13px;
        max-width:530px;
    }

    .pps-at-meta{
        left:22px;
        right:22px;
        bottom:62px;
        font-size:9px;
        letter-spacing:.10em;
    }

    .pps-at-scroll{
        left:22px;
        bottom:24px;
        font-size:13px;
    }
}

@media(max-width:520px){
    .pps-at-brand-mark{
        width:36px;
        height:36px;
        font-size:19px;
    }

    .pps-at-brand-name b{
        font-size:10px;
    }

    .pps-at-brand-name small{
        font-size:8px;
    }

    .pps-at-brand sup{
        font-size:14px;
    }

    .pps-at-title{
        top:88px;
    }

    .pps-at-title h1{
        font-size:clamp(38px, 12vw, 58px) !important;
    }

    .pps-at-letter-wrap{
        margin-left:4vw;
        margin-top:8vh;
    }

    .pps-at-letter{
        font-size:min(48vh, 92vw);
    }

    .pps-at-copy{
        bottom:145px;
    }

    .pps-at-copy p{
        font-size:12px;
        line-height:1.48;
    }

    .pps-at-nav{
        bottom:92px;
        gap:9px 14px;
        font-size:9px;
    }

    .pps-at-meta{
        bottom:58px;
    }

    .pps-at-scroll{
        bottom:20px;
    }
}
/* ============================================================
   PPS PATCH · ONLY P COLOR CHANGE + MOBILE RESPONSIVE
   Paste at VERY BOTTOM of assets/css/style.css
   ============================================================ */

/* Intro touch smooth for mobile */
#ppsScrollIntro.pps-at-intro{
    touch-action:none !important;
    overscroll-behavior:none !important;
}

/* P letter new premium color: metallic graphite + cyan/deep blue 3D */
.pps-at-letter{
    color:transparent !important;
    background:
        linear-gradient(135deg,
            #f8fbff 0%,
            #a9c6d8 14%,
            #26384a 34%,
            #07101c 58%,
            #02050a 100%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-stroke:1px rgba(122,220,255,.26) !important;

    text-shadow:
        1px 1px 0 #12314a,
        2px 2px 0 #0f2b44,
        3px 3px 0 #0c253d,
        4px 4px 0 #091f35,
        5px 5px 0 #071a2e,
        6px 6px 0 #061526,
        7px 7px 0 #04111f,
        8px 8px 0 #030d18,
        9px 9px 0 #020912,
        10px 10px 0 #01060c,

        0 0 28px rgba(65,205,255,.16),
        0 0 70px rgba(0,125,255,.12),
        0 42px 115px rgba(0,0,0,.92) !important;

    filter:
        drop-shadow(0 0 16px rgba(0,190,255,.12))
        drop-shadow(0 36px 70px rgba(0,0,0,.62)) !important;
}

/* P inside glow - red removed */
.pps-at-letter::after{
    background:radial-gradient(circle, rgba(95,225,255,.22), transparent 68%) !important;
}

/* P back glow - red removed */
.pps-at-letter-glow{
    background:
        radial-gradient(ellipse at center,
            rgba(80,220,255,.34) 0%,
            rgba(20,95,165,.24) 36%,
            rgba(5,28,58,.15) 62%,
            transparent 78%) !important;
}

/* P floor reflection - red removed */
.pps-at-letter-reflection{
    background:radial-gradient(ellipse at center, rgba(0,170,255,.18), transparent 72%) !important;
}

/* Background glow around P - red/orange removed */
.pps-at-glow-one{
    background:radial-gradient(circle, rgba(55,185,255,.16), transparent 62%) !important;
}

.pps-at-glow-two{
    background:radial-gradient(circle, rgba(42,75,170,.15), transparent 62%) !important;
}

/* Mobile P size/position smooth */
@media(max-width:820px){
    .pps-at-letter-wrap{
        margin-left:8vw !important;
        margin-top:10vh !important;
    }

    .pps-at-letter{
        font-size:min(53vh, 76vw) !important;
    }
}

@media(max-width:520px){
    .pps-at-letter-wrap{
        margin-left:0 !important;
        margin-top:7vh !important;
    }

    .pps-at-letter{
        font-size:min(46vh, 88vw) !important;
        -webkit-text-stroke:.8px rgba(122,220,255,.26) !important;
    }
}
/* ============================================================
   PPS PATCH · REMOVE REGISTERED ® MARK FROM INTRO BRAND
   Paste at VERY BOTTOM of assets/css/style.css
   ============================================================ */

.pps-at-brand sup,
.pps-v2-reg{
    display:none !important;
}
/* REMOVE REGISTERED MARK FROM INTRO BRAND */
#ppsScrollIntro sup,
.pps-at-brand sup,
.pps-v2-reg{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}