/* ===========================
   PCR HOME PRO V1
=========================== */

:root{
    --gold:#ffd400;
    --gold2:#ffef7a;
    --bg:#050505;
    --card:#111;
    --text:#ffffff;
    --muted:#cfcfcf;
}

body.pcr-pro-home{
    margin:0;
    background:#050505;
    color:white;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

/* ================= NAVBAR ================= */

.pro-nav{
    position:fixed;
    top:18px;
    left:24px;
    right:24px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 35px;

    border-radius:24px;

    background:rgba(10,10,10,.82);

    backdrop-filter:blur(18px);

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

    z-index:999;
}

.pro-brand{

display:flex;

align-items:center;

gap:12px;

text-decoration:none;

color:white;

font-size:20px;

font-weight:800;
}

.pro-brand img{

width:42px;

height:42px;

object-fit:contain;

filter:drop-shadow(0 0 18px rgba(255,215,0,.45));
}

.pro-brand strong{

font-size:26px;

color:gold;
}

.pro-menu{

display:flex;

gap:38px;

align-items:center;
}

.pro-menu a{

text-decoration:none;

color:#ddd;

font-weight:600;

transition:.35s;
}

.pro-menu a:hover{

color:gold;
}

.pro-menu .active{

color:gold;

position:relative;
}

.pro-menu .active::after{

content:"";

position:absolute;

left:0;

right:0;

bottom:-12px;

height:3px;

border-radius:20px;

background:gold;

box-shadow:0 0 12px gold;
}

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

.pro-page{

padding-top:170px;
}

.pro-hero{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:60px 70px;

min-height:720px;

position:relative;
}

.pro-left{

z-index:5;
}

.pro-left h1{

font-size:76px;

line-height:82px;

margin:0;

font-weight:800;
}

.pro-left h1 span{

display:block;

color:gold;
}

.pro-line{

margin:30px 0;

width:130px;

height:5px;

border-radius:30px;

background:linear-gradient(to right,gold,#fff4a2);

box-shadow:0 0 22px gold;
}

.pro-desc{

font-size:28px;

max-width:650px;

color:#d2d2d2;

line-height:1.6;
}

.pro-actions{

display:flex;

gap:20px;

margin-top:40px;
}

.btn-main{

padding:18px 40px;

border-radius:40px;

background:linear-gradient(135deg,#ffd400,#ffb900);

color:black;

font-weight:700;

font-size:22px;

text-decoration:none;

transition:.35s;

box-shadow:0 0 30px rgba(255,215,0,.35);
}

.btn-main:hover{

transform:translateY(-6px);

box-shadow:0 0 40px gold;
}

.btn-dark{

padding:18px 40px;

border-radius:40px;

background:#202020;

color:white;

text-decoration:none;

font-size:22px;

font-weight:700;

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

transition:.35s;
}

.btn-dark:hover{

background:#2f2f2f;

transform:translateY(-6px);
}

/* ================= RIGHT ================= */

.pro-right{

display:flex;

justify-content:center;

align-items:center;

position:relative;
}

.pro-right img{

width:630px;

max-width:100%;

z-index:5;

filter:drop-shadow(0 0 70px rgba(255,255,255,.55));
}

/* ================= GLOW ================= */

.pro-right::before{

content:"";

position:absolute;

width:750px;

height:750px;

background:radial-gradient(circle,
rgba(255,255,180,.45),
rgba(255,220,0,.12),
transparent 75%);

filter:blur(80px);

border-radius:50%;

animation:glow 5s infinite alternate;

}

@keyframes glow{

from{

transform:scale(.95);

opacity:.6;
}

to{

transform:scale(1.1);

opacity:1;
}
}

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

.pro-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 38px;
  max-width: 820px;
}

.pro-stats div {
  min-height: 82px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,212,0,.22);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.pro-stats i {
  font-style: normal;
  font-size: 24px;
  margin-right: 8px;
}

.pro-stats b {
  color: #ffd400;
  font-size: 24px;
  font-weight: 900;
}

.pro-stats span {
  display: block;
  color: rgba(255,255,255,.70);
  margin-top: 4px;
}

/* ================= LOGO ORBITS ================= */

.pro-logo-zone {
  position: relative;
}

.pro-logo-zone::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 330px;
  border-radius: 50%;
  border: 2px solid rgba(255,212,0,.45);
  border-left-color: rgba(0,200,255,.55);
  transform: rotate(-18deg);
  filter: drop-shadow(0 0 22px rgba(255,212,0,.45));
  animation: orbitRotate 9s linear infinite;
}

@keyframes orbitRotate {
  from { transform: rotate(-18deg); }
  to { transform: rotate(342deg); }
}

/* ================= CARDS ================= */

.pro-categories {
  padding: 20px 70px 80px;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}

.pro-categories h2 {
  font-size: 36px;
  margin-bottom: 22px;
}

.pro-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 24px;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
}

.pro-card {
  min-height: 245px;
  padding: 30px;
  border-radius: 26px;
  color: white;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
  transition: .3s ease;
  position: relative;
  overflow: hidden;
}

.pro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background: radial-gradient(circle at bottom, rgba(255,255,255,.18), transparent 50%);
}

.pro-card span,
.pro-card h3,
.pro-card p,
.pro-card em {
  position: relative;
  z-index: 2;
}

.pro-card span {
  font-size: 58px;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.35));
}

.pro-card h3 {
  font-size: 28px;
  margin: 26px 0 8px;
}

.pro-card p {
  color: rgba(255,255,255,.74);
  font-size: 17px;
  margin: 0;
}

.pro-card em {
  display: inline-flex;
  margin-top: 28px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  font-style: normal;
  font-weight: 800;
}

.pro-card:hover {
  transform: translateY(-12px) scale(1.035);
}

.pro-card.purple { border-color: rgba(180,70,255,.45); box-shadow: inset 0 -80px 90px rgba(160,50,255,.17), 0 30px 90px rgba(0,0,0,.50); }
.pro-card.cyan { border-color: rgba(0,229,255,.45); box-shadow: inset 0 -80px 90px rgba(0,229,255,.15), 0 30px 90px rgba(0,0,0,.50); }
.pro-card.green { border-color: rgba(0,230,118,.45); box-shadow: inset 0 -80px 90px rgba(0,230,118,.15), 0 30px 90px rgba(0,0,0,.50); }
.pro-card.yellow { border-color: rgba(255,212,0,.50); box-shadow: inset 0 -80px 90px rgba(255,212,0,.17), 0 30px 90px rgba(0,0,0,.50); }
.pro-card.blue { border-color: rgba(47,128,255,.50); box-shadow: inset 0 -80px 90px rgba(47,128,255,.17), 0 30px 90px rgba(0,0,0,.50); }

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

@media (max-width: 1200px) {
  .pro-hero {
    grid-template-columns: 1fr;
  }

  .pro-right img {
    width: 430px;
    animation: floatLogo 5s ease-in-out infinite;
  }

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

  .pro-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

  .pro-menu {
    display: none;
  }
}

@keyframes floatLogo{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}

/* ===== FIX NAVBAR + HERO SPACE ===== */

.pro-nav{
  position: sticky;
  top: 10px;
  left: auto;
  right: auto;
  margin: 14px 24px 0;
}

.pro-page{
  padding-top: 0 !important;
}

.pro-hero{
  min-height: 700px !important;
  padding-top: 70px !important;
  padding-bottom: 35px !important;
}

.pro-left{
  transform: translateY(-10px);
}

.pro-right,
.pro-logo-zone{
  transform: translateY(-15px);
}

.pro-categories{
  margin-top: 0 !important;
  padding-top: 25px !important;
}

.pro-grid{
  margin-top: 10px;
}

/* ===== FINAL SCROLL FIX ===== */

.pro-nav{
  position: sticky !important;
  top: 10px !important;
  z-index: 999 !important;
}

.pro-hero{
  min-height: 620px !important;
  padding: 45px 70px 40px !important;
  overflow: visible !important;
}

.pro-left{
  transform: translateY(0) !important;
}

.pro-right,
.pro-logo-zone{
  transform: translateY(0) !important;
}

.pro-stats{
  margin-bottom: 0 !important;
}

.pro-categories{
  margin-top: 35px !important;
  padding-top: 0 !important;
}

.pro-grid{
  margin-top: 0 !important;
}

.pro-right img{
    animation: floatLogo 6s ease-in-out infinite;
}

@keyframes floatLogo{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

.pro-right::before{
    animation: glow 5s ease-in-out infinite alternate;
}

@keyframes glow{
    from{
        opacity:.45;
        transform:scale(.95);
    }

    to{
        opacity:.85;
        transform:scale(1.1);
    }
}

.pro-card{
    transition:.35s;
}

.pro-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 70px rgba(255,220,0,.15);

}

.pro-btn.primary:hover{

    transform:translateY(-3px) scale(1.03);

    box-shadow:
    0 0 40px rgba(255,210,0,.45);

}

.pro-nav{

    backdrop-filter:blur(20px);

    background:rgba(12,12,12,.75);

}

.pro-title{

    letter-spacing:-2px;

    line-height:.95;

}

.pro-hero{

background-image:

radial-gradient(circle at 10% 20%,rgba(255,255,255,.06) 1px,transparent 1px),

radial-gradient(circle at 70% 40%,rgba(255,255,255,.04) 1px,transparent 1px),

linear-gradient(to right,#050505,#090d13);

background-size:

140px 140px,

180px 180px,

100%;

}

.stat-yellow:hover{

box-shadow:0 0 35px rgba(255,210,0,.45);

}

.stat-blue:hover{

box-shadow:0 0 35px rgba(0,180,255,.45);

}