/* ============================================================
   PREMIUM CHUNKS v1 — section-scoped polish, universal device/browser
   Adds layered depth, scroll progress, marquee, tilt, lightbox, counters,
   ribbons, image rails. Non-destructive: only ADDS visuals.
   ============================================================ */

/* ---------- Cross-browser baseline & safety nets ---------- */
@supports not (backdrop-filter: blur(1px)) {
  .glass, .pcx-glass { background: rgba(10,13,24,.85) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pcx-marquee__track, .pcx-orbit, .pcx-shine, .pcx-pulse { animation: none !important; }
}
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }

/* iOS safe area + small phones */
@supports (padding: max(0px)) {
  .nav, header.nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}
@media (max-width: 480px){
  h1 { font-size: clamp(36px, 11vw, 64px) !important; }
  .section, section.section { padding: 80px 18px !important; }
  .rail, #rail { display: none !important; }
  .hud, #hud { transform: scale(.78); transform-origin: top right; }
}

/* ---------- Scroll Progress Bar ---------- */
.pcx-scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,#00e5ff,#a855f7 55%,#ff3d9a);box-shadow:0 0 18px rgba(0,229,255,.55);transition:width .12s linear;pointer-events:none}

/* ---------- Section Ribbon (premium tag) ---------- */
.pcx-ribbon{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(168,85,247,.12));font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#cfe5ff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pcx-ribbon .pcx-dot{width:7px;height:7px;border-radius:50%;background:#00e5ff;box-shadow:0 0 12px #00e5ff;animation:pcxPulse 1.8s ease-in-out infinite}
@keyframes pcxPulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* ---------- Premium Card Tilt + Shine ---------- */
.pcx-tilt{will-change:transform;transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pcx-shine{position:relative;overflow:hidden;isolation:isolate}
.pcx-shine::after{content:"";position:absolute;inset:-2px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s ease;pointer-events:none;z-index:2}
.pcx-shine:hover::after{transform:translateX(120%)}

/* ---------- Marquee strip ---------- */
.pcx-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.pcx-marquee__track{display:flex;gap:48px;padding:18px 0;width:max-content;animation:pcxMarquee 38s linear infinite;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#9fb4d8}
.pcx-marquee__track span{display:inline-flex;align-items:center;gap:14px}
.pcx-marquee__track i{width:6px;height:6px;border-radius:50%;background:#00e5ff;box-shadow:0 0 10px #00e5ff;display:inline-block}
@keyframes pcxMarquee{to{transform:translateX(-50%)}}

/* ---------- Image Rail (premium slider) ---------- */
.pcx-rail{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));overflow:hidden}
.pcx-rail__viewport{overflow:hidden;border-radius:18px;cursor:grab}
.pcx-rail__viewport:active{cursor:grabbing}
.pcx-rail__track{display:flex;gap:18px;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.pcx-rail__slide{flex:0 0 min(78vw,420px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative;background:#0a0d18;border:1px solid rgba(255,255,255,.08)}
.pcx-rail__slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.pcx-rail__slide:hover img{transform:scale(1.06)}
.pcx-rail__slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));font-family:"Space Grotesk";font-size:13px;color:#e9ecf5;display:flex;justify-content:space-between;gap:8px}
.pcx-rail__slide figcaption small{color:#8a92ad;font-family:"JetBrains Mono";letter-spacing:.18em;text-transform:uppercase;font-size:10px}
.pcx-rail__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(10,13,24,.7);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s, background .2s}
.pcx-rail__nav:hover{background:rgba(0,229,255,.2);transform:translateY(-50%) scale(1.08)}
.pcx-rail__nav.prev{left:14px}.pcx-rail__nav.next{right:14px}
.pcx-rail__dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.pcx-rail__dots b{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .25s, width .25s;cursor:pointer}
.pcx-rail__dots b.on{background:linear-gradient(90deg,#00e5ff,#a855f7);width:38px}

/* ---------- Lightbox ---------- */
.pcx-lightbox{position:fixed;inset:0;background:rgba(2,4,10,.92);z-index:9998;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pcx-lightbox.on{display:flex;animation:pcxFade .25s ease}
.pcx-lightbox img{max-width:min(94vw,1280px);max-height:88vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,229,255,.25)}
.pcx-lightbox button{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,13,24,.7);color:#fff;font-size:22px;cursor:pointer}
@keyframes pcxFade{from{opacity:0}to{opacity:1}}

/* ---------- Stats Counter Strip ---------- */
.pcx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:48px 0;padding:28px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(168,85,247,.06));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pcx-stat{text-align:center}
.pcx-stat b{display:block;font-family:"Instrument Serif",serif;font-style:italic;font-size:clamp(38px,5vw,64px);background:linear-gradient(135deg,#00e5ff,#a855f7,#ff3d9a);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.pcx-stat span{display:block;margin-top:6px;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a92ad}

/* ---------- Reveal on scroll ---------- */
.pcx-reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.pcx-reveal.on{opacity:1;transform:none}

/* ---------- Section divider (cinematic) ---------- */
.pcx-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.5),rgba(168,85,247,.5),transparent);margin:0 auto;max-width:1200px;position:relative}
.pcx-divider::after{content:"◇";position:absolute;left:50%;top:-9px;transform:translateX(-50%);color:rgba(0,229,255,.7);background:#05070d;padding:0 10px;font-size:14px}

/* ---------- Section background neural layer (per-section subtle) ---------- */
.pcx-neural-section{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;z-index:0}
section.section, section{position:relative}
section.section > *:not(.pcx-neural-section){position:relative;z-index:1}

/* ---------- Floating CTA dock (mobile only) ---------- */
@media (max-width: 768px){
  .pcx-dock{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;gap:10px;padding:10px;border-radius:18px;background:rgba(10,13,24,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .pcx-dock a{flex:1;text-align:center;padding:13px 8px;border-radius:12px;font-weight:600;font-size:13px;letter-spacing:.02em}
  .pcx-dock a.primary{background:linear-gradient(135deg,#00e5ff,#a855f7);color:#04060c}
  .pcx-dock a.ghost{background:rgba(255,255,255,.06);color:#e9ecf5;border:1px solid rgba(255,255,255,.12)}
  body{padding-bottom:84px}
}
.pcx-dock{display:none}
@media (max-width:768px){.pcx-dock{display:flex}}