/* ═══════════════════════════════════════════════════════════════════════════
 * PvPure landing — общий stylesheet для register.html / product.html / pvpcoin.html.
 *
 * Тут сидит та же визуальная система, что и в Mini App (client/src/index.css):
 *   • glass-card surfaces (linear-gradient + backdrop-filter)
 *   • gradient-border через mask-composite
 *   • neon glows: cyan #00D2FF, gold #F59E0B, purple #A855F7, green/red
 *   • cyber-кнопка (linear-gradient 135deg #00D2FF→#3A7BD5)
 *   • text-glow для заголовков
 *   • rarity-glow rings (common/rare/epic/legendary/nft)
 *   • card-shimmer (анимированная блёстка)
 *   • nav-neon-border под header
 *   • Rajdhani — display, Inter — body
 *
 * Меняешь дизайн в приложении — обнови и тут (или вынеси в один shared токен-файл).
 * ═══════════════════════════════════════════════════════════════════════ */

:root{
  --pp-bg:#0A0E1A;
  --pp-bg-2:#0E1422;
  --pp-bg-3:#050810;
  --pp-panel:#131A2A;
  --pp-panel-2:#182236;
  --pp-card-bg:#1A1F2E;
  --pp-line:#243049;
  --pp-line-soft:#1B2540;

  --pp-text-1:#E8EEF7;
  --pp-text-2:#A6B1C8;
  --pp-text-3:#6B7794;

  --pp-cyan:#00E5FF;
  --pp-cyan-bright:#00D2FF;
  --pp-cyan-2:#38BDF8;
  --pp-cyan-deep:#3A7BD5;
  --pp-cyan-glow:rgba(0,210,255,.55);
  --pp-purple:#A855F7;
  --pp-purple-2:#C084FC;
  --pp-purple-glow:rgba(168,85,247,.55);
  --pp-red:#EF4444;
  --pp-red-2:#FB7185;
  --pp-gold:#F59E0B;
  --pp-gold-2:#FBBF24;
  --pp-green:#10B981;
  --pp-orange:#F97316;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--pp-bg);
  color:var(--pp-text-1);
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
h1,h2,h3,h4,h5,h6{font-family:'Rajdhani',sans-serif;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ─── Background ─────────────────────────────────────────────────── */
.pp-bg{
  background:
    radial-gradient(900px 500px at 12% 8%,rgba(0,210,255,.12),transparent 60%),
    radial-gradient(900px 500px at 88% 8%,rgba(168,85,247,.12),transparent 60%),
    radial-gradient(900px 500px at 12% 92%,rgba(168,85,247,.10),transparent 60%),
    radial-gradient(900px 500px at 88% 92%,rgba(0,210,255,.10),transparent 60%),
    linear-gradient(180deg,#0A0E1A 0%,#0E1422 50%,#050810 100%);
}
.pp-bg-grid{
  background-image:
    linear-gradient(rgba(0,210,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,210,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
}

/* ─── Layout ─────────────────────────────────────────────────────── */
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.font-display{font-family:'Rajdhani',sans-serif}
.font-mono{font-family:ui-monospace,'SFMono-Regular',monospace}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.g7{grid-template-columns:repeat(7,1fr)}
@media(max-width:1100px){.g7{grid-template-columns:repeat(5,1fr)}}
@media(max-width:920px){.g3,.g4,.g5,.g7{grid-template-columns:repeat(2,1fr)}.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.g2,.g3,.g4,.g5,.g6,.g7{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.g2,.g3,.g4,.g5,.g6,.g7{grid-template-columns:1fr}}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--pp-line),transparent)}

/* ─── Surfaces (из app: .glass / .glass-card / .glass-dark) ────── */
.glass{
  background:rgba(21,26,39,.7);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);
}
.glass-dark{
  background:rgba(11,14,17,.75);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.05);
}
.glass-card{
  background:linear-gradient(135deg,rgba(21,26,39,.85) 0%,rgba(15,18,28,.9) 100%);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  position:relative;
}
.glass-card-pad{padding:20px}

/* hover lift для интерактивных карточек */
.card-h{transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.card-h:hover{
  transform:translateY(-2px);
  border-color:rgba(0,210,255,.30);
  box-shadow:0 18px 38px -12px rgba(0,210,255,.25),0 0 0 1px rgba(0,210,255,.08) inset;
}
.card-h:active{transform:scale(.99)}

/* ─── Gradient border (ровно как в app: ::before + mask-composite) ─── */
.gradient-border{position:relative}
.gradient-border::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(0,210,255,.6),rgba(58,123,213,.25) 50%,transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.gradient-border-gold::before{
  background:linear-gradient(135deg,rgba(245,158,11,.65),rgba(251,191,36,.30) 50%,transparent 70%);
}
.gradient-border-purple::before{
  background:linear-gradient(135deg,rgba(168,85,247,.65),rgba(192,132,252,.30) 50%,transparent 70%);
}
.gradient-border-cyan-purple::before{
  background:linear-gradient(135deg,rgba(0,210,255,.7),rgba(168,85,247,.55) 70%);
}

/* ─── Neon glows (из app) ─────────────────────────────────────────── */
.glow-cyan{box-shadow:0 0 12px rgba(0,210,255,.4),0 0 28px rgba(0,210,255,.15),0 0 1px rgba(0,210,255,.6)}
.glow-cyan-sm{box-shadow:0 0 8px rgba(0,210,255,.35),0 0 16px rgba(0,210,255,.12)}
.glow-gold{box-shadow:0 0 12px rgba(245,158,11,.45),0 0 28px rgba(245,158,11,.15)}
.glow-gold-sm{box-shadow:0 0 8px rgba(245,158,11,.35),0 0 16px rgba(245,158,11,.10)}
.glow-green{box-shadow:0 0 12px rgba(16,185,129,.40),0 0 24px rgba(16,185,129,.15)}
.glow-purple{box-shadow:0 0 12px rgba(168,85,247,.40),0 0 24px rgba(168,85,247,.15)}
.glow-red{box-shadow:0 0 12px rgba(239,68,68,.40),0 0 24px rgba(239,68,68,.15)}

.text-glow-cyan{text-shadow:0 0 8px rgba(0,210,255,.65),0 0 20px rgba(0,210,255,.35)}
.text-glow-gold{text-shadow:0 0 8px rgba(245,158,11,.65),0 0 20px rgba(245,158,11,.35)}
.text-glow-white{text-shadow:0 0 8px rgba(255,255,255,.5),0 0 16px rgba(255,255,255,.2)}

/* ─── Rarity rings (как в app: rarity-glow-*) ─────────────────────── */
.rarity-common{box-shadow:0 0 0 1px rgba(148,163,184,.25),0 0 10px rgba(148,163,184,.08)}
.rarity-rare{box-shadow:0 0 0 1px rgba(59,130,246,.4),0 0 12px rgba(59,130,246,.2),0 0 24px rgba(59,130,246,.08)}
.rarity-epic{box-shadow:0 0 0 1px rgba(168,85,247,.45),0 0 14px rgba(168,85,247,.25),0 0 28px rgba(168,85,247,.10)}
.rarity-legendary{box-shadow:0 0 0 1px rgba(245,158,11,.5),0 0 14px rgba(245,158,11,.3),0 0 28px rgba(245,158,11,.12)}
.rarity-nft{box-shadow:0 0 0 1px rgba(0,210,255,.5),0 0 14px rgba(0,210,255,.25),0 0 28px rgba(0,210,255,.10)}
.rarity-rekt{box-shadow:0 0 0 1px rgba(239,68,68,.45),0 0 14px rgba(239,68,68,.20),0 0 28px rgba(239,68,68,.06)}
.rarity-cosmic{box-shadow:0 0 0 1px rgba(168,85,247,.6),0 0 18px rgba(168,85,247,.40),0 0 38px rgba(0,210,255,.18)}

/* ─── Buttons (cyber gradient + ghost + gold) ─────────────────────── */
.pp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:.03em;
  border-radius:10px;border:1.5px solid var(--pp-cyan);color:var(--pp-cyan);
  background:rgba(0,210,255,.04);
  cursor:pointer;user-select:none;text-decoration:none;
  transition:filter .15s,transform .12s,box-shadow .15s;
}
.pp-btn:hover{filter:brightness(1.15);box-shadow:0 0 24px -6px var(--pp-cyan-glow)}
.pp-btn:active{transform:scale(.97)}

/* cyber filled (главная CTA) */
.pp-btn-cyber{
  background:linear-gradient(135deg,#00D2FF,#3A7BD5);
  color:#fff;border-color:transparent;
  box-shadow:0 0 12px rgba(0,210,255,.35),inset 0 1px 0 rgba(255,255,255,.15);
}
.pp-btn-cyber:hover{box-shadow:0 0 18px rgba(0,210,255,.55),0 0 36px rgba(0,210,255,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.pp-btn-cyber:active{box-shadow:0 0 18px rgba(0,210,255,.55),inset 0 1px 0 rgba(255,255,255,.15)}

/* gold filled (deposit / play CTA) */
.pp-btn-gold{
  background:linear-gradient(180deg,#FBBF24,#B45309);
  color:#1a0c00;border-color:transparent;
  box-shadow:0 0 14px rgba(245,158,11,.50),inset 0 1px 0 rgba(255,255,255,.20);
}
.pp-btn-gold:hover{box-shadow:0 0 22px rgba(245,158,11,.65),inset 0 1px 0 rgba(255,255,255,.24)}

/* purple filled */
.pp-btn-purple{
  background:linear-gradient(135deg,#A855F7,#7E22CE);
  color:#fff;border-color:transparent;
  box-shadow:0 0 12px rgba(168,85,247,.40),inset 0 1px 0 rgba(255,255,255,.15);
}

/* ghost */
.pp-btn-ghost{
  background:transparent;border-color:var(--pp-line);color:var(--pp-text-1);
  box-shadow:none;
}
.pp-btn-ghost:hover{border-color:var(--pp-cyan);color:var(--pp-cyan);box-shadow:0 0 14px -6px var(--pp-cyan-glow)}

.pp-btn-sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:8px}
.pp-btn-lg{min-height:54px;padding:0 24px;font-size:17px;border-radius:12px}

/* ─── Chips ──────────────────────────────────────────────────────── */
.pp-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--pp-cyan);background:rgba(0,210,255,.08);
  border:1px solid rgba(0,210,255,.30);
}
.pp-chip-success{color:#6ee7b7;background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.35)}
.pp-chip-danger{color:#fca5a5;background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.35)}
.pp-chip-warn{color:#fcd34d;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.35)}
.pp-chip-rare{color:var(--pp-purple-2);background:rgba(168,85,247,.10);border-color:rgba(168,85,247,.35)}
.pp-chip-gold{color:var(--pp-gold);background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.35)}

/* ─── Live dot ───────────────────────────────────────────────────── */
.live-dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--pp-green);box-shadow:0 0 10px var(--pp-green);
  animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── Card shimmer (из app — анимация для balance/CTA-карточек) ─── */
@keyframes card-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.card-shimmer{position:relative;overflow:hidden}
.card-shimmer::after{
  content:'';position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:card-shimmer 3s ease-in-out infinite;pointer-events:none;
}

/* ─── Hue spin (как у Play tab в bottom nav) ─────────────────────── */
@keyframes hue-spin{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.hue-spin{animation:hue-spin 8s linear infinite}

/* ─── Header ─────────────────────────────────────────────────────── */
header.pp-site{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,26,.78);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  /* Нижняя неон-линия из app (.nav-neon-border перевёрнутый) */
  border-bottom:1px solid transparent;
  position:sticky;
}
header.pp-site::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(0,210,255,.35) 15%,rgba(0,210,255,.85) 40%,rgba(120,200,255,1) 50%,rgba(0,210,255,.85) 60%,rgba(0,210,255,.35) 85%,transparent 100%);
  box-shadow:0 0 8px rgba(0,210,255,.6),0 0 22px rgba(0,210,255,.25),0 0 45px rgba(0,210,255,.10);
  pointer-events:none;
}
.pp-site-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.pp-crest{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#00D2FF,#A855F7);
  font-family:'Rajdhani',sans-serif;font-weight:700;color:#04141a;
  box-shadow:0 0 12px rgba(0,210,255,.35),inset 0 1px 0 rgba(255,255,255,.20);
}
.pp-brand-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;line-height:1}
.pp-brand-sub{font-size:10px;color:var(--pp-text-3);letter-spacing:.10em;text-transform:uppercase}
.pp-nav{display:flex;gap:20px;align-items:center}
.pp-nav a{color:var(--pp-text-2);font-size:14px;font-weight:500;transition:color .15s}
.pp-nav a:hover{color:var(--pp-text-1)}
@media(max-width:840px){.pp-nav{display:none}}

/* ─── Hero ───────────────────────────────────────────────────────── */
.pp-hero{padding:88px 0 72px}
.pp-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pp-text-2);font-weight:600;margin-bottom:18px;
}
.pp-eyebrow::before,.pp-eyebrow::after{
  content:"";height:1px;width:28px;
  background:linear-gradient(90deg,transparent,rgba(0,210,255,.55),transparent);
}
.pp-eyebrow.center::before,.pp-eyebrow.center::after{display:inline-block}
.pp-eyebrow-gold{color:var(--pp-gold)}
.pp-eyebrow-gold::before,.pp-eyebrow-gold::after{
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),transparent);
}
.pp-h1{
  font-family:'Rajdhani',sans-serif;font-weight:700;line-height:1.02;
  font-size:clamp(40px,7vw,84px);letter-spacing:-.02em;margin:8px 0 18px;
}
.pp-lead{font-size:17.5px;color:var(--pp-text-2);max-width:620px;line-height:1.55;margin:0 0 28px}
.pp-lead strong{color:var(--pp-text-1)}

.pp-grad-cyan-purple{
  background:linear-gradient(90deg,#00D2FF,#67e8f9 50%,#A855F7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pp-grad-gold-cyan{
  background:linear-gradient(90deg,#F59E0B,#FBBF24 50%,#00D2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pp-grad-purple-cyan{
  background:linear-gradient(90deg,#A855F7,#C084FC 50%,#00D2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ─── Sections ───────────────────────────────────────────────────── */
section.pp-sec{padding:80px 0;border-top:1px solid var(--pp-line-soft)}
section.pp-sec.no-border{border-top:0}
.pp-sec-head{margin-bottom:32px}
.pp-sec-head.center{text-align:center}
.pp-sec-title{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-.01em;margin:8px 0 12px;
}
.pp-sec-sub{color:var(--pp-text-2);font-size:16px;max-width:720px;line-height:1.55}
.pp-sec-head.center .pp-sec-sub{margin:0 auto}

/* ─── Stat numbers ───────────────────────────────────────────────── */
.pp-stat-num{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:30px;line-height:1.05;
  background:linear-gradient(90deg,#00D2FF,#A855F7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.pp-stat-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pp-text-3);margin-top:4px}
.pp-stat-foot{font-size:11.5px;color:var(--pp-text-3);line-height:1.5;margin-top:6px}

/* ─── Mode card ──────────────────────────────────────────────────── */
.pp-mode-icon{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  font-size:28px;background:rgba(0,210,255,.10);
  border:1px solid rgba(0,210,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pp-mode-icon.purple{background:rgba(168,85,247,.10);border-color:rgba(168,85,247,.30)}
.pp-mode-icon.gold{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.30)}
.pp-mode-icon.red{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30)}
.pp-mode-icon.green{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.30)}
.pp-mode-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.pp-mode-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;line-height:1.2}
.pp-mode-desc{font-size:13px;color:var(--pp-text-2);line-height:1.5;margin-top:6px}
.pp-mode-tag{
  display:inline-block;font-size:10px;color:var(--pp-text-3);
  padding:2px 8px;border:1px solid var(--pp-line-soft);border-radius:5px;
  font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-top:10px;
}

/* ─── Bulloon mascot card ────────────────────────────────────────── */
.pp-bul{
  position:relative;border-radius:14px;padding:14px 14px 16px;text-align:center;
  background:linear-gradient(135deg,rgba(21,26,39,.85) 0%,rgba(15,18,28,.92) 100%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:transform .2s ease,box-shadow .25s ease;
}
.pp-bul:hover{transform:translateY(-3px) scale(1.01)}
.pp-bul-img{position:relative;aspect-ratio:1/1;width:100%;display:block;z-index:1}
.pp-bul-img img,.pp-bul-img svg{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,210,255,.18))}
.pp-bul-label{margin-top:10px}
.pp-bul-name{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1;
}
.pp-bul-mult{font-family:ui-monospace,monospace;font-size:11px;color:var(--pp-text-3);margin-top:4px}
.pp-bul-emo{font-size:12.5px;color:var(--pp-text-2);margin-top:8px;line-height:1.45;min-height:34px}

/* gradient color accents per state */
.pp-bul-cyan .pp-bul-name{color:#67e8f9}
.pp-bul-cyan2 .pp-bul-name{color:var(--pp-cyan)}
.pp-bul-green .pp-bul-name{color:#86efac}
.pp-bul-lime .pp-bul-name{color:#bef264}
.pp-bul-yellow .pp-bul-name{color:#facc15}
.pp-bul-gold .pp-bul-name{color:var(--pp-gold)}
.pp-bul-orange .pp-bul-name{color:#fb923c}
.pp-bul-red .pp-bul-name{color:#f87171}
.pp-bul-purple .pp-bul-name{color:var(--pp-purple-2)}
.pp-bul-magenta .pp-bul-name{color:#f472b6}
.pp-bul-cosmic .pp-bul-name{
  background:linear-gradient(90deg,#00D2FF,#A855F7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ─── Provably fair step ─────────────────────────────────────────── */
.pp-fair-num{font-family:'Rajdhani',sans-serif;font-size:42px;font-weight:700;color:var(--pp-cyan);opacity:.35;line-height:1;margin-bottom:8px}
.pp-fair-title{font-family:'Rajdhani',sans-serif;font-size:18px;font-weight:700;margin-bottom:6px}
.pp-fair-desc{font-size:13px;color:var(--pp-text-2);line-height:1.55}
.pp-code{
  font-family:ui-monospace,monospace;font-size:11px;color:var(--pp-cyan);
  background:rgba(0,210,255,.06);padding:6px 10px;border-radius:6px;
  display:block;margin-top:10px;border:1px solid rgba(0,210,255,.18);word-break:break-all;
}

/* ─── Onboarding / Journey ───────────────────────────────────────── */
.pp-flow{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.pp-flow.steps-4{grid-template-columns:repeat(4,1fr)}
.pp-flow::before{
  content:"";position:absolute;top:18px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,#00D2FF,#A855F7);opacity:.30;
}
.pp-fstep{text-align:center;padding:0 8px}
.pp-fnum{
  width:36px;height:36px;border-radius:50%;background:var(--pp-bg);
  border:2px solid var(--pp-cyan);color:var(--pp-cyan);
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;position:relative;z-index:1;
  box-shadow:0 0 12px rgba(0,210,255,.40);
}
.pp-ftitle{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;margin-bottom:4px;line-height:1.3}
.pp-fsub{font-size:11.5px;color:var(--pp-text-3);line-height:1.45}
@media(max-width:720px){.pp-flow,.pp-flow.steps-4{grid-template-columns:1fr 1fr}.pp-flow::before{display:none}}

/* ─── Phase card (timeline) ──────────────────────────────────────── */
.pp-phases{display:flex;flex-direction:column;gap:14px;position:relative;padding-left:8px}
.pp-phases::before{
  content:"";position:absolute;left:32px;top:24px;bottom:24px;width:2px;
  background:linear-gradient(180deg,#10B981,#00D2FF,#A855F7,#F59E0B,#6B7794);opacity:.30;border-radius:2px;
}
.pp-phase{display:flex;gap:18px;align-items:flex-start}
.pp-phase-dot{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--pp-bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;
  position:relative;z-index:1;margin-top:2px;
}
.pp-pd-done{border:2px solid var(--pp-green);color:var(--pp-green);box-shadow:0 0 10px rgba(16,185,129,.4)}
.pp-pd-now{border:2px solid var(--pp-cyan);color:var(--pp-cyan);box-shadow:0 0 14px rgba(0,210,255,.55)}
.pp-pd-par{border:2px solid var(--pp-purple);color:var(--pp-purple);box-shadow:0 0 10px rgba(168,85,247,.40)}
.pp-pd-fut{border:2px solid var(--pp-gold);color:var(--pp-gold);box-shadow:0 0 10px rgba(245,158,11,.40)}
.pp-pd-far{border:2px solid var(--pp-text-3);color:var(--pp-text-3)}
.pp-phase-body{flex:1}
.pp-phase-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pp-phase-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;letter-spacing:.02em}
.pp-phase-period{font-size:11px;color:var(--pp-text-3);padding:3px 9px;border:1px solid var(--pp-line);border-radius:999px}
.pp-phase-goal{font-size:13.5px;color:var(--pp-text-2);margin:6px 0 10px;line-height:1.55}
.pp-phase-tags{display:flex;gap:6px;flex-wrap:wrap}
.pp-phase-tag{
  font-size:11px;padding:3px 10px;background:rgba(0,0,0,.25);
  border:1px solid var(--pp-line-soft);border-radius:6px;color:var(--pp-text-3);
  font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.03em;
}
.pp-phase-tag.hi{color:var(--pp-cyan);border-color:rgba(0,210,255,.30);background:rgba(0,210,255,.05)}

/* ─── Tokenomics donut ───────────────────────────────────────────── */
.pp-tkn{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:center}
@media(max-width:720px){.pp-tkn{grid-template-columns:1fr}.pp-donut-wrap{margin:0 auto}}
.pp-donut-wrap{position:relative;width:240px;height:240px;flex-shrink:0}
.pp-donut{
  width:240px;height:240px;border-radius:50%;
  background:conic-gradient(#00D2FF 0% 35%,#A855F7 35% 60%,#F59E0B 60% 75%,#10B981 75% 87%,#38BDF8 87% 95%,#6B7794 95% 100%);
  box-shadow:0 0 40px rgba(0,210,255,.18),0 0 80px rgba(168,85,247,.12);
}
.pp-donut-hole{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;background:var(--pp-bg);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.06);
}
.pp-dh-val{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;color:var(--pp-cyan);line-height:1}
.pp-dh-sub{font-size:10px;color:var(--pp-text-3);letter-spacing:.08em;margin-top:4px}
.pp-legend{display:flex;flex-direction:column;gap:14px}
.pp-litem{display:flex;align-items:flex-start;gap:14px}
.pp-ldot{width:14px;height:14px;border-radius:4px;flex-shrink:0;margin-top:5px}
.pp-lpct{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;line-height:1;margin-bottom:2px}
.pp-lname{font-size:13px;font-weight:700;color:var(--pp-text-1);margin-bottom:2px}
.pp-lsimple{font-size:12px;color:var(--pp-text-3);line-height:1.45}

/* ─── Flywheel ───────────────────────────────────────────────────── */
.pp-flow-row{display:flex;align-items:stretch;gap:0;margin-bottom:18px}
.pp-flow-node{
  flex:1;text-align:center;padding:16px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(21,26,39,.85),rgba(15,18,28,.92));
  border:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.pp-flow-node-t{font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;color:var(--pp-cyan);margin-bottom:4px;line-height:1.25}
.pp-flow-node-s{font-size:11.5px;color:var(--pp-text-3);line-height:1.45}
.pp-flow-arrow{display:flex;align-items:center;padding:0 6px;color:var(--pp-text-3);font-size:22px}
@media(max-width:720px){.pp-flow-row{flex-direction:column}.pp-flow-arrow{transform:rotate(90deg);justify-content:center;padding:6px 0}}

/* ─── Checklist ──────────────────────────────────────────────────── */
.pp-checklist{display:flex;flex-direction:column;gap:10px}
.pp-chk{
  display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:12px;
  background:linear-gradient(135deg,rgba(21,26,39,.85),rgba(15,18,28,.92));
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .2s,box-shadow .2s;
}
.pp-chk:hover{border-color:rgba(0,210,255,.30);box-shadow:0 0 14px rgba(0,210,255,.10)}
.pp-chkbox{
  width:24px;height:24px;border:2px solid var(--pp-cyan);border-radius:6px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--pp-cyan);background:rgba(0,210,255,.06);margin-top:2px;
  box-shadow:inset 0 0 8px rgba(0,210,255,.15);
}
.pp-chk-txt{font-size:14px;color:var(--pp-text-1);font-weight:600;line-height:1.4}
.pp-chk-note{display:block;font-size:12px;color:var(--pp-text-3);font-weight:400;margin-top:4px;line-height:1.5}

/* ─── Anti-pattern card ──────────────────────────────────────────── */
.pp-anti{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:11px;
  background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.20);
}
.pp-anti-x{color:var(--pp-red);font-size:18px;flex-shrink:0;line-height:1.2;margin-top:1px}
.pp-anti-t strong{display:block;font-size:13px;font-weight:700;color:var(--pp-text-1);margin-bottom:3px}
.pp-anti-t span{font-size:12px;color:var(--pp-text-3);line-height:1.5}

/* ─── Tech stack ─────────────────────────────────────────────────── */
.pp-stack{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,rgba(21,26,39,.85),rgba(15,18,28,.92));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
.pp-stack-l{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.05)}
.pp-stack-l:last-child{border-bottom:none}
.pp-sl-label{
  background:rgba(0,210,255,.04);border-right:1px solid rgba(255,255,255,.05);
  padding:14px 18px;min-width:140px;display:flex;flex-direction:column;justify-content:center;
}
.pp-sl-name{
  font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--pp-cyan);margin-bottom:2px;
}
.pp-sl-role{font-size:10px;color:var(--pp-text-3)}
.pp-sl-content{padding:12px 18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.pp-tch{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:6px;font-family:'Rajdhani',sans-serif;letter-spacing:.03em}
.pp-tch-react{background:rgba(20,184,166,.12);color:#2DD4BF;border:1px solid rgba(20,184,166,.30)}
.pp-tch-node{background:rgba(16,185,129,.10);color:#34D399;border:1px solid rgba(16,185,129,.28)}
.pp-tch-db{background:rgba(59,130,246,.10);color:#60A5FA;border:1px solid rgba(59,130,246,.28)}
.pp-tch-tg{background:rgba(0,136,204,.12);color:#38BDF8;border:1px solid rgba(0,136,204,.30)}
.pp-tch-dev{background:rgba(245,158,11,.10);color:#FBBF24;border:1px solid rgba(245,158,11,.28)}
.pp-tch-gray{background:rgba(107,114,128,.10);color:#9CA3AF;border:1px solid rgba(107,114,128,.25)}
@media(max-width:600px){.pp-stack-l{flex-direction:column}.pp-sl-label{border-right:none;border-bottom:1px solid rgba(255,255,255,.05);min-width:0}}

/* ─── Routes ─────────────────────────────────────────────────────── */
.pp-routes{display:flex;flex-direction:column;gap:8px}
.pp-route{
  display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:10px;
  background:linear-gradient(135deg,rgba(21,26,39,.7),rgba(15,18,28,.85));
  border:1px solid rgba(255,255,255,.05);
  transition:border-color .2s,box-shadow .2s;
}
.pp-route:hover{border-color:rgba(0,210,255,.25);box-shadow:0 0 12px rgba(0,210,255,.10)}
.pp-route-path{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--pp-cyan);min-width:170px;font-weight:600}
.pp-route-desc{font-size:13px;color:var(--pp-text-2)}
@media(max-width:560px){.pp-route{flex-direction:column;align-items:flex-start;gap:4px}.pp-route-path{min-width:0}}

/* ─── Glossary ───────────────────────────────────────────────────── */
.pp-gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pp-gterm{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:var(--pp-cyan);margin-bottom:4px}
.pp-gdef{font-size:12.5px;color:var(--pp-text-2);line-height:1.55}
.pp-ghint{display:block;font-size:11px;color:var(--pp-text-3);margin-top:6px;font-style:italic}

/* ─── CTA band ───────────────────────────────────────────────────── */
.pp-ctaband{
  position:relative;padding:48px 28px;border-radius:18px;text-align:center;
  background:
    radial-gradient(circle at 20% 30%,rgba(0,210,255,.14),transparent 50%),
    radial-gradient(circle at 80% 70%,rgba(168,85,247,.16),transparent 50%),
    linear-gradient(135deg,rgba(21,26,39,.92) 0%,rgba(15,18,28,.95) 100%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.pp-ctaband h3{
  font-family:'Rajdhani',sans-serif;font-size:clamp(28px,4vw,42px);
  font-weight:700;line-height:1.1;margin-bottom:12px;
}
.pp-ctaband p{color:var(--pp-text-2);font-size:16px;max-width:560px;margin:0 auto 24px;line-height:1.55}
.pp-ctaband-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ─── Footer ─────────────────────────────────────────────────────── */
footer.pp-foot{padding:56px 0 32px;border-top:1px solid var(--pp-line-soft);margin-top:32px}
.pp-foot-grid{display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr;gap:24px}
@media(max-width:720px){.pp-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.pp-foot-grid{grid-template-columns:1fr}}
.pp-foot-eyebrow{
  display:block;font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pp-text-2);font-weight:600;margin-bottom:14px;
}
.pp-foot-link{
  display:block;color:var(--pp-text-2);font-size:13.5px;padding:4px 0;
  transition:color .15s;
}
.pp-foot-link:hover{color:var(--pp-cyan)}
.pp-foot-bottom{
  display:flex;justify-content:space-between;font-size:12px;color:var(--pp-text-3);
  flex-wrap:wrap;gap:8px;margin-top:32px;padding-top:20px;border-top:1px solid var(--pp-line-soft);
}

/* ─── Modal ──────────────────────────────────────────────────────── */
.pp-modal-back{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,8,16,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:pp-mfade .2s ease;
}
@keyframes pp-mfade{from{opacity:0}to{opacity:1}}
.pp-modal{
  position:relative;width:100%;max-width:460px;
  background:linear-gradient(135deg,rgba(21,26,39,.95),rgba(15,18,28,.98));
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-radius:14px;padding:28px 24px 24px;
  box-shadow:0 24px 64px -12px rgba(0,210,255,.30),0 0 0 1px rgba(0,210,255,.10) inset;
  animation:pp-mrise .25s cubic-bezier(.2,.9,.4,1);
  max-height:calc(100dvh - 40px);overflow-y:auto;
}
.pp-modal::before{
  content:'';position:absolute;inset:0;border-radius:14px;padding:1.5px;
  background:linear-gradient(135deg,#00D2FF,#A855F7);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
@keyframes pp-mrise{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.pp-modal-close{
  position:absolute;top:12px;right:12px;z-index:1;width:32px;height:32px;border-radius:8px;
  background:transparent;border:1px solid var(--pp-line-soft);color:var(--pp-text-2);
  font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;
  transition:all .15s;
}
.pp-modal-close:hover{color:var(--pp-text-1);border-color:var(--pp-cyan);background:rgba(0,210,255,.06)}
.pp-modal h3{margin:0 0 8px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:28px;line-height:1.1}
.pp-modal-sub{color:var(--pp-text-2);font-size:14px;line-height:1.55;margin:0 0 20px}
.pp-modal-step{
  display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;
  background:rgba(0,210,255,.04);border:1px solid rgba(0,210,255,.22);margin-bottom:10px;
}
.pp-modal-step-num{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:'Rajdhani',sans-serif;font-weight:700;
  background:linear-gradient(135deg,#00D2FF,#A855F7);color:#04141a;
  box-shadow:0 0 8px rgba(0,210,255,.30);
}
.pp-modal-step-text{font-size:14px;line-height:1.4;color:var(--pp-text-1)}
.pp-modal-step-text small{display:block;color:var(--pp-text-3);font-size:12px;margin-top:2px}
.pp-modal-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.pp-modal-divider{height:1px;background:linear-gradient(90deg,transparent,var(--pp-line),transparent);margin:18px 0 14px}
.pp-modal-or{text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pp-text-3);margin:4px 0 14px}
.pp-modal-foot{margin-top:16px;font-size:12px;color:var(--pp-text-3);text-align:center;line-height:1.5}
.pp-modal-foot a{color:var(--pp-cyan)}
.pp-modal-foot a:hover{color:var(--pp-cyan-2)}

.pp-hidden{display:none !important}