/*
 * shared-pages.css  — PKCP Unified Design System
 * ─────────────────────────────────────────────────────────────────
 * Matches index.html exactly: Sora font, red #F20101, green #00BC91
 * NO gold / yellow — consistent with main.css brand tokens
 * ─────────────────────────────────────────────────────────────────
 */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --pk-red:        #F20101;
  --pk-green:      #00BC91;
  --pk-red-dim:    rgba(242,1,1,0.08);
  --pk-red-bdr:    rgba(242,1,1,0.22);
  --pk-red-glow:   rgba(242,1,1,0.35);
  --pk-green-dim:  rgba(0,188,145,0.08);
  --pk-green-bdr:  rgba(0,188,145,0.22);
  --pk-blue:       #4E92E3;
  --pk-blue-dim:   rgba(78,146,227,0.08);
  --pk-blue-bdr:   rgba(78,146,227,0.22);

  --pk-bg:   #060606;
  --pk-bg2:  #0d0d0d;
  --pk-bg3:  #111111;
  --pk-bg4:  #161616;

  --pk-t1: #ffffff;
  --pk-t2: rgba(255,255,255,0.55);
  --pk-t3: rgba(255,255,255,0.22);

  --pk-divider: rgba(255,255,255,0.07);

  --pk-f:        'Sora','Kumbh Sans',sans-serif;
  --pk-f-mono:   'Kumbh Sans',sans-serif;
  --pk-f-display:'Sora',sans-serif;

  --pk-r-sm: 6px; --pk-r-md: 10px; --pk-r-lg: 16px; --pk-r-xl: 22px;
  --pk-ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --pk-transition: all 0.3s var(--pk-ease);

  /* Map to main.css tokens */
  --secondary-color: var(--pk-red);
  --tertiary-color:  var(--pk-green);
  --template-bg:     var(--pk-bg);
  --template-color:  var(--pk-t1);

  /* Legacy gold aliases → redirect to red so old classes don't show yellow */
  --pk-gold:     var(--pk-red);
  --pk-gold-l:   #ff3333;
  --pk-gold-dim: var(--pk-red-dim);
  --pk-gold-bdr: var(--pk-red-bdr);
}

/* ── 2. BASE RESET ───────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;margin:0;padding:0;}

/* ── 3. BODY ─────────────────────────────────────────────────── */
body.pk-page {
  font-family: var(--pk-f);
  font-size: 16px; line-height: 1.6;
  color: var(--pk-t1);
  background-color: var(--pk-bg);
  overflow-x: hidden; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--pk-bg);}
::-webkit-scrollbar-thumb{background:var(--pk-red);border-radius:2px;}

/* ── 4. PRELOADER ────────────────────────────────────────────── */
#pkPreloader {
  position:fixed;inset:0;z-index:99999;
  background:#060606;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:opacity 0.6s ease;
}
#pkPreloader.pk-pl-out{opacity:0;pointer-events:none;}
.pk-pl-lines{position:absolute;inset:0;display:flex;justify-content:space-evenly;pointer-events:none;}
.pk-pl-lines span{display:block;width:1px;height:100%;background:rgba(255,255,255,0.03);animation:pkPlPulse 3s ease-in-out infinite;}
.pk-pl-lines span:nth-child(1){animation-delay:0s}
.pk-pl-lines span:nth-child(2){animation-delay:0.3s}
.pk-pl-lines span:nth-child(3){animation-delay:0.6s}
.pk-pl-lines span:nth-child(4){animation-delay:0.9s}
.pk-pl-lines span:nth-child(5){animation-delay:1.2s}
.pk-pl-lines span:nth-child(6){animation-delay:1.5s}
.pk-pl-lines span:nth-child(7){animation-delay:1.8s}
.pk-pl-lines span:nth-child(8){animation-delay:2.1s}
.pk-pl-lines span:nth-child(9){animation-delay:2.4s}
.pk-pl-lines span:nth-child(10){animation-delay:2.7s}
@keyframes pkPlPulse{0%,100%{opacity:0.4}50%{opacity:1}}
.pk-pl-corner{position:absolute;width:28px;height:28px;pointer-events:none;}
.pk-pl-tl{top:28px;left:28px;border-top:2px solid #F20101;border-left:2px solid #F20101;}
.pk-pl-tr{top:28px;right:28px;border-top:2px solid #F20101;border-right:2px solid #F20101;}
.pk-pl-bl{bottom:28px;left:28px;border-bottom:2px solid #00BC91;border-left:2px solid #00BC91;}
.pk-pl-br{bottom:28px;right:28px;border-bottom:2px solid #00BC91;border-right:2px solid #00BC91;}
.pk-pl-center{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.pk-pl-logo{font-family:'Sora',sans-serif;font-size:clamp(52px,10vw,88px);font-weight:700;letter-spacing:0.18em;line-height:1;display:flex;}
.pk-pl-p {color:#F20101;animation:pkPlLetterIn 0.6s 0.1s  both;}
.pk-pl-k {color:#ffffff;animation:pkPlLetterIn 0.6s 0.25s both;}
.pk-pl-c {color:#ffffff;animation:pkPlLetterIn 0.6s 0.4s  both;}
.pk-pl-p2{color:#00BC91;animation:pkPlLetterIn 0.6s 0.55s both;}
@keyframes pkPlLetterIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.pk-pl-tagline{font-family:'Sora',sans-serif;font-size:clamp(9px,1.6vw,12px);letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,255,0.3);animation:pkPlFadeIn 0.8s 0.8s both;}
@keyframes pkPlFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pk-pl-track{width:min(320px,68vw);height:2px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden;animation:pkPlFadeIn 0.5s 1s both;}
.pk-pl-fill{height:100%;width:0%;background:linear-gradient(90deg,#F20101,#00BC91);border-radius:2px;box-shadow:0 0 12px rgba(242,1,1,0.5);transition:width 0.5s cubic-bezier(0.4,0,0.2,1);}
.pk-pl-status{font-family:'Sora',sans-serif;font-size:9px;letter-spacing:0.3em;color:rgba(255,255,255,0.25);text-transform:uppercase;animation:pkPlFadeIn 0.5s 1.1s both;}
.pk-pl-blink{animation:pkPlBlk 0.8s step-end infinite;color:#F20101;}
@keyframes pkPlBlk{0%,100%{opacity:1}50%{opacity:0}}

/* ── 5. TOP NAV ──────────────────────────────────────────────── */
.pk-topnav{position:sticky;top:0;z-index:1000;padding:10px 24px;}
.pk-topnav-inner{
  background:rgba(6,6,6,0.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--pk-divider);
  border-radius:var(--pk-r-xl);
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 8px 32px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.03);
}
.pk-nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--pk-f);font-size:15px;font-weight:700;color:var(--pk-t1);letter-spacing:0.02em;}
.pk-name-gold{color:var(--pk-red);}
.pk-nav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.pk-nav-links a{font-family:var(--pk-f-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pk-t3);padding:8px 13px;border-radius:6px;display:inline-flex;align-items:center;transition:color .2s,background .2s;}
.pk-nav-links a:hover{color:var(--pk-t1);background:rgba(255,255,255,0.04);}
.pk-nav-links a.pk-active{color:var(--pk-red);}
.pk-nav-cta{font-family:var(--pk-f-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#fff;background:var(--pk-red);padding:8px 18px;border-radius:6px;font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;transition:background .25s,transform .25s;}
.pk-nav-cta:hover{background:#d40000;transform:translateY(-1px);}
.pk-nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.pk-nav-burger span{width:22px;height:1.5px;background:var(--pk-t2);border-radius:2px;display:block;}
.pk-nav-mobile{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(6,6,6,0.97);border-bottom:1px solid var(--pk-divider);padding:16px 24px;flex-direction:column;gap:2px;z-index:999;}
.pk-nav-mobile.open{display:flex;}
.pk-nav-mobile a{font-family:var(--pk-f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pk-t2);padding:12px 0;border-bottom:1px solid var(--pk-divider);display:block;transition:color .2s;}
.pk-nav-mobile a:hover,.pk-nav-mobile a.pk-active{color:var(--pk-red);}

/* ── 6. PAGE BANNER ──────────────────────────────────────────── */
.pk-page-banner{padding:52px 0 40px;border-bottom:1px solid var(--pk-divider);margin-bottom:40px;position:relative;z-index:1;}
.pk-page-eyebrow{font-family:var(--pk-f-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--pk-green);display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;}
.pk-page-eyebrow::before{content:'';width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--pk-green));}
.pk-page-h1{font-family:var(--pk-f);font-size:clamp(30px,4.5vw,62px);font-weight:700;line-height:1.07;letter-spacing:-0.01em;color:var(--pk-t1);margin-bottom:14px;}
.pk-page-h1 em{color:var(--pk-red);font-style:italic;}
.pk-page-sub{font-size:0.95rem;color:var(--pk-t2);max-width:600px;line-height:1.85;}

/* ── 7. FOOTER ───────────────────────────────────────────────── */
.pk-page-footer{border-top:1px solid var(--pk-divider);padding:24px 0;margin-top:48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;position:relative;z-index:1;}
.pk-page-footer p{font-family:var(--pk-f-mono);font-size:10px;letter-spacing:0.1em;color:var(--pk-t3);line-height:1;}
.pk-footer-brand{font-family:var(--pk-f-display);font-size:14px;color:var(--pk-t2);}
.pk-footer-brand em{color:var(--pk-green);font-style:italic;}

/* ── 8. PROGRESS BAR ─────────────────────────────────────────── */
.pk-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--pk-divider);z-index:2000;}
.pk-progress-bar{height:100%;background:linear-gradient(90deg,var(--pk-red),var(--pk-green));width:0%;transition:width .08s linear;}

/* ── 9. UTILITY ──────────────────────────────────────────────── */
.pk-tag{font-family:var(--pk-f-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--pk-t2);border:1px solid var(--pk-divider);padding:5px 13px;border-radius:20px;display:inline-flex;align-items:center;transition:color .2s,border-color .2s,background .2s;cursor:default;}
.pk-tag:hover{color:var(--pk-red);border-color:var(--pk-red-bdr);background:var(--pk-red-dim);}
.pk-badge{font-family:var(--pk-f-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pk-red);background:var(--pk-red-dim);border:1px solid var(--pk-red-bdr);padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;}
.pk-badge-green{color:var(--pk-green);background:var(--pk-green-dim);border:1px solid var(--pk-green-bdr);}
.pk-btn-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--pk-f-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pk-t3);border:1px solid var(--pk-divider);padding:7px 16px;border-radius:20px;transition:color .22s,border-color .22s,background .22s;}
.pk-btn-back:hover{color:var(--pk-red);border-color:var(--pk-red-bdr);background:var(--pk-red-dim);}

/* Hook / callout */
.pk-hook{background:var(--pk-red-dim);border-left:3px solid var(--pk-red);border-radius:0 var(--pk-r-md) var(--pk-r-md) 0;padding:14px 20px;margin-bottom:36px;max-width:720px;}
.pk-hook p{font-family:var(--pk-f);font-size:.92rem;color:var(--pk-t1);line-height:1.7;font-weight:600;}
.pk-hook p em{color:var(--pk-red);font-style:italic;}

/* Stat strip */
.stat-strip{display:flex;flex-wrap:wrap;gap:3px;border:1px solid var(--pk-divider);border-radius:var(--pk-r-lg);overflow:hidden;max-width:780px;}
.stat-box{flex:1;min-width:130px;padding:18px 22px;border-right:1px solid var(--pk-divider);}
.stat-box:last-child{border-right:none;}
.stat-num{font-family:var(--pk-f);font-size:1.9rem;font-weight:700;color:var(--pk-red);line-height:1;margin-bottom:4px;}
.stat-lbl{font-family:var(--pk-f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-t3);}
.stat-sub{font-size:.78rem;color:var(--pk-t2);margin-top:3px;line-height:1.4;}

/* Card topbar */
.pk-card-topbar{height:3px;background:linear-gradient(90deg,var(--pk-red),var(--pk-green));}

/* Filter buttons */
.pk-filter-btn{font-family:var(--pk-f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;border-radius:20px;border:1px solid var(--pk-divider);color:var(--pk-t2);background:transparent;cursor:pointer;transition:all .22s;}
.pk-filter-btn:hover{color:var(--pk-t1);border-color:var(--pk-red-bdr);}
.pk-filter-btn.active{background:var(--pk-red-dim);border-color:var(--pk-red);color:var(--pk-red);}

/* Advisory / info box */
.pk-advisory{background:var(--pk-green-dim);border:1px solid var(--pk-green-bdr);border-radius:var(--pk-r-md);padding:12px 16px;}
.pk-advisory-title{font-family:var(--pk-f-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--pk-green);margin-bottom:6px;}
.pk-advisory p{font-family:var(--pk-f);font-size:.82rem;color:var(--pk-t2);line-height:1.65;}
.pk-advisory p strong{color:var(--pk-t1);}

/* ── 10. RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .pk-topnav{padding:10px 16px;}
  .pk-nav-links{display:none;}
  .pk-nav-burger{display:flex;}
}
@media(max-width:600px){
  .pk-page-banner{padding:36px 0 28px;}
  .pk-page-h1{font-size:clamp(26px,8vw,38px);}
  .stat-box{min-width:110px;}
}