/* ============================================================
   KP-PLATFORM.CSS — Design System
   Projekt: Kompletny Piłkarz · Platforma Edukacyjna
   Autor:   Thomas Rozworski
   Wersja:  2.0 — tokeny + komponenty
   ------------------------------------------------------------
   SEKCJE PLIKU:
    01  TOKENY (CSS Variables)
    02  RESET I BAZA
    03  TYPOGRAFIA UTILITY
    04  LAYOUT — KONTENERY I SEKCJE
    05  TŁO STRONY — ORBY, SIATKA
    06  TOPBAR (sticky góra)
    07  AVATAR + DROPDOWN
    08  HERO
    09  PRZYCISKI (BTN)
    10  KARTY (feat, mod, flow)
    11  NAGŁÓWKI SEKCJI
    12  BOOK QUOTE
    13  STATS ROW
    14  BOTTOM NAV (gn-bar) + DRAWER
    15  SCROLL-TO-TOP FLOATING
    16  FOOTER MINI
    17  ANIMACJE / REVEALS
    18  UTILITY CLASSES
   ============================================================ */


/* ============================================================
   01 · TOKENY
   ============================================================ */
:root {
  --kp-bg:#0d1117; --kp-bg-alt:#0a0d12; --kp-bg-deep:#050709;
  --kp-surface:#0d1219; --kp-surface-2:#161b22; --kp-surface-3:#1c2129;
  --kp-overlay:rgba(0,0,0,.60); --kp-overlay-str:rgba(0,0,0,.85);

  --kp-border:rgba(255,215,0,.08);
  --kp-border-mid:rgba(255,215,0,.14);
  --kp-border-str:rgba(255,215,0,.22);
  --kp-border-focus:rgba(255,215,0,.50);
  --kp-divider:rgba(255,255,255,.06);

  --kp-text:#f0ead6; --kp-text-bright:#ffffff;
  --kp-text-dim:rgba(255,255,255,.65);
  --kp-text-mute:rgba(255,255,255,.40);
  --kp-text-micro:rgba(255,255,255,.22);

  --kp-gold:#FFD700; --kp-gold-warm:#FFA500; --kp-gold-bright:#FFEB8A;
  --kp-gold-dim:rgba(255,215,0,.15);
  --kp-gold-10:rgba(255,215,0,.10);
  --kp-gold-20:rgba(255,215,0,.20);
  --kp-gold-40:rgba(255,215,0,.40);
  --kp-gradient-gold:linear-gradient(135deg,#FFD700 0%,#FFA500 100%);
  --kp-gradient-gold-subtle:linear-gradient(135deg,rgba(255,215,0,.08) 0%,rgba(255,165,0,.03) 100%);

  --kp-theme:var(--kp-gold);
  --kp-theme-dark:var(--kp-gold-warm);
  --kp-theme-light:var(--kp-gold-bright);
  --kp-theme-dim:var(--kp-gold-dim);

  --kp-success:#22c55e; --kp-success-dim:rgba(34,197,94,.15);
  --kp-info:#58a6ff;    --kp-info-dim:rgba(88,166,255,.15);
  --kp-warn:#f0883e;    --kp-warn-dim:rgba(240,136,62,.15);
  --kp-danger:#f85149;  --kp-danger-dim:rgba(248,81,73,.15);
  --kp-purple:#bc8cff;  --kp-purple-dim:rgba(188,140,255,.15);
  --kp-cyan:#39d2c0;    --kp-cyan-dim:rgba(57,210,192,.15);
  --kp-amber:#d29922;   --kp-amber-dim:rgba(210,153,34,.15);
  --kp-pink:#ec4899;    --kp-pink-dim:rgba(236,72,153,.15);
  --kp-medal-bronze:#cd7f32; --kp-medal-silver:#c0c0c0; --kp-medal-gold:#ffd700;

  --kp-font-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --kp-font-display:'Oswald','Barlow Condensed','Montserrat',sans-serif;
  --kp-font-mono:'JetBrains Mono','Menlo','Monaco',ui-monospace,monospace;

  --kp-t-xs:clamp(10px,1.8vw,11px);
  --kp-t-sm:clamp(12px,2vw,13px);
  --kp-t-base:clamp(14px,2.2vw,15px);
  --kp-t-md:clamp(16px,2.5vw,17px);
  --kp-t-lg:clamp(18px,3vw,21px);
  --kp-t-xl:clamp(22px,4vw,26px);
  --kp-t-2xl:clamp(28px,5vw,36px);
  --kp-t-3xl:clamp(36px,7vw,56px);
  --kp-t-4xl:clamp(48px,9vw,80px);

  --kp-w-normal:400; --kp-w-medium:500; --kp-w-semibold:600;
  --kp-w-bold:700;   --kp-w-extrabold:800; --kp-w-black:900;

  --kp-lh-tight:1.1; --kp-lh-snug:1.25; --kp-lh-normal:1.5; --kp-lh-relaxed:1.7;
  --kp-ls-tight:-0.02em; --kp-ls-normal:0;
  --kp-ls-wide:0.05em; --kp-ls-wider:0.10em; --kp-ls-widest:0.20em;

  --kp-s-0:0; --kp-s-1:4px; --kp-s-2:8px; --kp-s-3:12px;
  --kp-s-4:16px; --kp-s-5:20px; --kp-s-6:24px; --kp-s-7:28px;
  --kp-s-8:32px; --kp-s-10:40px; --kp-s-12:48px; --kp-s-14:56px;
  --kp-s-16:64px; --kp-s-20:80px; --kp-s-24:96px; --kp-s-32:128px;

  --kp-r-none:0; --kp-r-xs:4px; --kp-r-sm:8px; --kp-r:12px;
  --kp-r-md:14px; --kp-r-lg:20px; --kp-r-xl:28px; --kp-r-2xl:36px;
  --kp-r-full:9999px;

  --kp-shadow-xs:0 1px 2px rgba(0,0,0,.20);
  --kp-shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --kp-shadow:0 8px 24px rgba(0,0,0,.35);
  --kp-shadow-md:0 12px 32px rgba(0,0,0,.40);
  --kp-shadow-lg:0 20px 50px rgba(0,0,0,.45);
  --kp-shadow-xl:0 30px 80px rgba(0,0,0,.55);
  --kp-glow-xs:0 0 8px var(--kp-theme-dim);
  --kp-glow:0 0 24px var(--kp-theme-dim);
  --kp-glow-lg:0 0 60px var(--kp-theme-dim);
  --kp-glow-gold:0 0 24px var(--kp-gold-20);

  --kp-blur-sm:blur(8px); --kp-blur:blur(16px);
  --kp-blur-lg:blur(24px); --kp-blur-xl:blur(40px);

  --kp-ease:cubic-bezier(.22,1,.36,1);
  --kp-ease-out:cubic-bezier(0,0,.20,1);
  --kp-ease-in:cubic-bezier(.40,0,1,1);
  --kp-ease-in-out:cubic-bezier(.40,0,.20,1);
  --kp-ease-back:cubic-bezier(.34,1.56,.64,1);
  --kp-ease-spring:cubic-bezier(.50,1.80,.50,1);
  --kp-dur-instant:.10s; --kp-dur-fast:.18s;
  --kp-dur-normal:.30s; --kp-dur-slow:.50s; --kp-dur-slower:.80s;

  --kp-z-base:0; --kp-z-raised:1; --kp-z-dropdown:100;
  --kp-z-sticky:500; --kp-z-topbar:800; --kp-z-bottom-nav:900;
  --kp-z-overlay:1000; --kp-z-drawer:1100; --kp-z-modal:1200;
  --kp-z-toast:1400; --kp-z-tooltip:1600;

  --kp-h-topbar-m:56px; --kp-h-topbar-d:64px;
  --kp-h-bottom-nav:64px; --kp-h-scroll-top:44px;

  --kp-container-max:1200px; --kp-content-max:720px;
  --kp-drawer-w:480px; --kp-dropdown-w:280px;

  --kp-o-disabled:.40; --kp-o-muted:.60; --kp-o-active:1;
}

/* ═══ Motywy lokalne — kopiuj na górze każdego indexu ═══
   Cele:      --kp-theme:#22c55e; --kp-theme-dark:#16a34a; --kp-theme-light:#86efac; --kp-theme-dim:rgba(34,197,94,.15);
   Kalendarz: --kp-theme:#58a6ff; --kp-theme-dark:#388bfd; --kp-theme-light:#a5d6ff; --kp-theme-dim:rgba(88,166,255,.15);
   Trening:   --kp-theme:#f0883e; --kp-theme-dark:#d4722e; --kp-theme-light:#ff9f5a; --kp-theme-dim:rgba(240,136,62,.15);
   RSP:       --kp-theme:#bc8cff; --kp-theme-dark:#a06ce4; --kp-theme-light:#d4b3ff; --kp-theme-dim:rgba(188,140,255,.15);
   Kreator:   --kp-theme:#FF6B35; --kp-theme-dark:#e05a28; --kp-theme-light:#ff8c5a; --kp-theme-dim:rgba(255,107,53,.15);
   Taktyka:   --kp-theme:#f85149; --kp-theme-dark:#da3633; --kp-theme-light:#ff8a85; --kp-theme-dim:rgba(248,81,73,.15);
*/

@media (prefers-reduced-motion: reduce) {
  :root {
    --kp-dur-instant:.01s; --kp-dur-fast:.01s; --kp-dur-normal:.01s;
    --kp-dur-slow:.01s; --kp-dur-slower:.01s;
  }
}


/* ============================================================
   02 · RESET I BAZA
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--kp-font-body);font-size:var(--kp-t-base);line-height:var(--kp-lh-normal);color:var(--kp-text);background:var(--kp-bg);min-height:100vh;overflow-x:hidden}
body.kp-has-bottom-nav{padding-bottom:calc(var(--kp-h-bottom-nav) + env(safe-area-inset-bottom, 0px))}
a{color:inherit;text-decoration:none}
button{background:none;border:none;font:inherit;cursor:pointer;color:inherit}
img,svg,video{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
::selection{background:var(--kp-theme-dim);color:var(--kp-theme-light)}
:focus-visible{outline:2px solid var(--kp-theme);outline-offset:3px;border-radius:var(--kp-r-sm)}


/* ============================================================
   03 · TYPOGRAFIA UTILITY
   ============================================================ */
.kp-display{font-family:var(--kp-font-display)}
.kp-mono{font-family:var(--kp-font-mono)}
.kp-uppercase{text-transform:uppercase;letter-spacing:var(--kp-ls-wide)}
.kp-text-gold{color:var(--kp-gold)}
.kp-text-theme{color:var(--kp-theme)}
.kp-text-dim{color:var(--kp-text-dim)}
.kp-text-mute{color:var(--kp-text-mute)}
.kp-gradient-text{background:linear-gradient(135deg,var(--kp-theme) 0%,var(--kp-theme-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kp-gradient-text-gold{background:var(--kp-gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}


/* ============================================================
   04 · LAYOUT — KONTENERY I SEKCJE
   ============================================================ */
.kp-container{width:100%;max-width:var(--kp-container-max);margin:0 auto;padding:0 var(--kp-s-5)}
@media(min-width:768px){.kp-container{padding:0 var(--kp-s-8)}}
.kp-section{padding:var(--kp-s-16) 0;position:relative}
.kp-section-alt{background:var(--kp-bg-alt)}
@media(max-width:768px){.kp-section{padding:var(--kp-s-12) 0}}
@media(max-width:480px){.kp-section{padding:var(--kp-s-10) 0}}


/* ============================================================
   05 · TŁO STRONY — ORBY
   ============================================================ */
.kp-page-fx{position:fixed;inset:0;z-index:var(--kp-z-base);pointer-events:none;overflow:hidden}
.kp-page-fx .fx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,215,0,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,.018) 1px,transparent 1px);background-size:80px 80px;animation:kpGridDrift 30s linear infinite;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%)}
.kp-page-fx .fx-orb{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.kp-page-fx .fx-orb-1{width:900px;height:900px;background:radial-gradient(circle,var(--kp-theme-dim) 0%,transparent 55%);top:-350px;left:-300px;animation:kpOrb1 18s ease-in-out infinite}
.kp-page-fx .fx-orb-2{width:700px;height:700px;background:radial-gradient(circle,rgba(255,165,0,.035) 0%,transparent 55%);bottom:-250px;right:-250px;animation:kpOrb2 22s ease-in-out infinite}
.kp-page-fx .fx-orb-3{width:500px;height:500px;background:radial-gradient(circle,var(--kp-theme-dim) 0%,transparent 55%);top:40%;left:60%;animation:kpOrb3 15s ease-in-out infinite;opacity:.5}
@keyframes kpGridDrift{to{transform:translateY(80px)}}
@keyframes kpOrb1{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(80px,60px) scale(1.15)}70%{transform:translate(-40px,100px) scale(.92)}}
@keyframes kpOrb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-60px) scale(1.2)}}
@keyframes kpOrb3{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.5);opacity:1}}


/* ============================================================
   06 · TOPBAR
   ============================================================ */
.kp-topbar{position:sticky;top:0;z-index:var(--kp-z-topbar);background:rgba(13,17,23,.88);backdrop-filter:var(--kp-blur);-webkit-backdrop-filter:var(--kp-blur);border-bottom:1px solid var(--kp-border);padding-top:env(safe-area-inset-top,0);transition:transform var(--kp-dur-normal) var(--kp-ease)}
.kp-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--kp-theme-dim),transparent);opacity:.6}
.kp-topbar.kp-hidden{transform:translateY(-100%)}
.kp-topbar-inner{max-width:var(--kp-container-max);margin:0 auto;height:var(--kp-h-topbar-m);padding:0 var(--kp-s-4);display:flex;align-items:center;justify-content:space-between;gap:var(--kp-s-3)}
@media(min-width:768px){.kp-topbar-inner{height:var(--kp-h-topbar-d);padding:0 var(--kp-s-6)}}
.kp-topbar-brand{display:flex;align-items:center;gap:var(--kp-s-3);text-decoration:none;flex-shrink:0}
.kp-topbar-logo{width:36px;height:36px;border-radius:var(--kp-r-full);background:var(--kp-bg-deep);border:1.5px solid var(--kp-gold);box-shadow:var(--kp-glow-gold);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.kp-topbar-brand-txt{display:flex;flex-direction:column}
.kp-topbar-brand-name{font-family:var(--kp-font-display);font-size:var(--kp-t-sm);font-weight:var(--kp-w-bold);color:var(--kp-gold);letter-spacing:var(--kp-ls-widest);text-transform:uppercase;line-height:1}
.kp-topbar-brand-sub{font-size:var(--kp-t-xs);color:var(--kp-text-mute);letter-spacing:var(--kp-ls-wide);text-transform:uppercase;margin-top:3px;line-height:1}
@media(max-width:480px){.kp-topbar-brand-sub{display:none}}
.kp-topbar-right{display:flex;align-items:center;gap:var(--kp-s-2)}
.kp-topbar-stat{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--kp-surface);border:1px solid var(--kp-border);border-radius:var(--kp-r-full);font-family:var(--kp-font-mono);font-size:var(--kp-t-xs);font-weight:var(--kp-w-bold);color:var(--kp-text);transition:border-color var(--kp-dur-fast),background var(--kp-dur-fast)}
.kp-topbar-stat:hover{border-color:var(--kp-border-str);background:var(--kp-surface-2)}
.kp-topbar-stat .ico{font-size:13px}
.kp-topbar-stat.stat-streak{color:var(--kp-gold)}
.kp-topbar-stat.stat-progress{color:var(--kp-theme-light)}
@media(max-width:640px){.kp-topbar-stat .label{display:none}.kp-topbar-stat{padding:6px 10px}}
.kp-topbar-dash{padding:8px 14px;border-radius:var(--kp-r-full);border:1px solid var(--kp-border);background:transparent;color:var(--kp-text-mute);font-size:var(--kp-t-xs);font-weight:var(--kp-w-semibold);letter-spacing:var(--kp-ls-wide);text-transform:uppercase;transition:all var(--kp-dur-fast) var(--kp-ease);white-space:nowrap}
.kp-topbar-dash:hover{color:var(--kp-gold);border-color:var(--kp-border-str);background:var(--kp-gold-10)}
@media(max-width:640px){.kp-topbar-dash{display:none}}


/* ============================================================
   07 · AVATAR + DROPDOWN
   ============================================================ */
.kp-avatar-wrap{position:relative}
.kp-avatar{width:40px;height:40px;border-radius:var(--kp-r-full);background:var(--kp-gradient-gold);color:var(--kp-bg-deep);font-family:var(--kp-font-display);font-size:13px;font-weight:var(--kp-w-black);letter-spacing:var(--kp-ls-wide);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;border:2px solid var(--kp-gold);box-shadow:var(--kp-glow-gold);transition:transform var(--kp-dur-fast) var(--kp-ease),box-shadow var(--kp-dur-fast) var(--kp-ease)}
.kp-avatar:hover{transform:scale(1.05);box-shadow:0 0 40px var(--kp-gold-40)}
.kp-avatar:active{transform:scale(.95)}
.kp-avatar-notif{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:var(--kp-r-full);background:var(--kp-danger);border:2px solid var(--kp-bg);box-shadow:0 0 8px var(--kp-danger);animation:kpPulse 2s ease-in-out infinite}
@keyframes kpPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}
.kp-avatar-dropdown{position:absolute;top:calc(100% + 12px);right:0;min-width:var(--kp-dropdown-w);background:var(--kp-surface-2);border:1px solid var(--kp-border-str);border-radius:var(--kp-r);box-shadow:var(--kp-shadow-lg);z-index:var(--kp-z-dropdown);overflow:hidden;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity var(--kp-dur-fast) var(--kp-ease),transform var(--kp-dur-fast) var(--kp-ease)}
.kp-avatar-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.kp-avatar-dropdown-head{padding:var(--kp-s-4);display:flex;align-items:center;gap:var(--kp-s-3);border-bottom:1px solid var(--kp-divider);background:var(--kp-gradient-gold-subtle)}
.kp-avatar-dropdown-avatar{width:44px;height:44px;border-radius:var(--kp-r-full);background:var(--kp-gradient-gold);color:var(--kp-bg-deep);font-family:var(--kp-font-display);font-weight:var(--kp-w-black);font-size:14px;display:flex;align-items:center;justify-content:center;border:2px solid var(--kp-gold);flex-shrink:0}
.kp-avatar-dropdown-info{flex:1;min-width:0}
.kp-avatar-dropdown-name{font-weight:var(--kp-w-bold);color:var(--kp-text-bright);font-size:var(--kp-t-base);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-avatar-dropdown-email{font-size:var(--kp-t-xs);color:var(--kp-text-mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-avatar-dropdown-menu{padding:var(--kp-s-2)}
.kp-avatar-dropdown-item{display:flex;align-items:center;gap:var(--kp-s-3);padding:var(--kp-s-3);border-radius:var(--kp-r-sm);color:var(--kp-text);font-size:var(--kp-t-sm);font-weight:var(--kp-w-medium);transition:background var(--kp-dur-fast),color var(--kp-dur-fast);width:100%;text-align:left;cursor:pointer}
.kp-avatar-dropdown-item:hover{background:var(--kp-surface-3);color:var(--kp-theme-light)}
.kp-avatar-dropdown-item .ico{font-size:16px;flex-shrink:0}
.kp-avatar-dropdown-item .badge{margin-left:auto;background:var(--kp-danger-dim);color:var(--kp-danger);font-size:10px;font-weight:var(--kp-w-bold);padding:2px 8px;border-radius:var(--kp-r-full)}
.kp-avatar-dropdown-item.danger{color:var(--kp-danger)}
.kp-avatar-dropdown-item.danger:hover{background:var(--kp-danger-dim)}
.kp-avatar-dropdown-sep{height:1px;background:var(--kp-divider);margin:var(--kp-s-1) var(--kp-s-2)}


/* ============================================================
   08 · HERO
   ============================================================ */
.kp-hero{position:relative;min-height:calc(100vh - var(--kp-h-topbar-m));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kp-s-12) var(--kp-s-5);text-align:center;overflow:hidden}
@media(min-width:768px){.kp-hero{min-height:calc(100vh - var(--kp-h-topbar-d));padding:var(--kp-s-16) var(--kp-s-8)}}
.kp-hero-content{position:relative;z-index:var(--kp-z-raised);max-width:900px;display:flex;flex-direction:column;align-items:center;gap:var(--kp-s-5);width:100%}
.kp-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:var(--kp-theme-dim);border:1px solid var(--kp-theme);color:var(--kp-theme-light);border-radius:var(--kp-r-full);font-size:var(--kp-t-xs);font-weight:var(--kp-w-bold);letter-spacing:var(--kp-ls-wider);text-transform:uppercase;box-shadow:var(--kp-glow-xs)}
.kp-hero-title{font-family:var(--kp-font-display);font-size:var(--kp-t-3xl);line-height:var(--kp-lh-tight);font-weight:var(--kp-w-black);letter-spacing:var(--kp-ls-tight);text-transform:uppercase;color:var(--kp-text-bright)}
.kp-hero-title .accent{background:linear-gradient(135deg,var(--kp-theme) 0%,var(--kp-theme-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kp-hero-sub{font-family:var(--kp-font-display);font-size:var(--kp-t-lg);font-weight:var(--kp-w-semibold);letter-spacing:var(--kp-ls-widest);text-transform:uppercase;color:var(--kp-text)}
.kp-hero-desc{font-size:var(--kp-t-md);line-height:var(--kp-lh-relaxed);color:var(--kp-text-dim);max-width:720px}
.kp-hero-desc b,.kp-hero-desc strong{color:var(--kp-text-bright);font-weight:var(--kp-w-bold)}
.kp-hero-scroll{position:absolute;bottom:var(--kp-s-6);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--kp-text-mute);font-size:var(--kp-t-xs);letter-spacing:var(--kp-ls-wide);text-transform:uppercase;animation:kpBounceHint 2s ease-in-out infinite}
.kp-hero-scroll .arrow{width:14px;height:14px;border:2px solid var(--kp-text-mute);border-top:none;border-left:none;transform:rotate(45deg)}
@keyframes kpBounceHint{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(8px);opacity:1}}


/* ============================================================
   09 · PRZYCISKI
   ============================================================ */
.kp-cta-row{display:flex;flex-wrap:wrap;gap:var(--kp-s-3);align-items:center;justify-content:center}
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--kp-s-2);padding:14px 28px;border-radius:var(--kp-r-full);font-family:var(--kp-font-body);font-size:var(--kp-t-base);font-weight:var(--kp-w-bold);letter-spacing:var(--kp-ls-wide);text-transform:uppercase;cursor:pointer;user-select:none;text-decoration:none;transition:all var(--kp-dur-fast) var(--kp-ease);position:relative;overflow:hidden;border:2px solid transparent;white-space:nowrap;min-height:48px}
.kp-btn:active{transform:scale(.97)}
.kp-btn-primary{background:linear-gradient(135deg,var(--kp-theme) 0%,var(--kp-theme-dark) 100%);color:var(--kp-bg-deep);box-shadow:var(--kp-shadow-md),var(--kp-glow)}
.kp-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--kp-shadow-lg),var(--kp-glow-lg)}
.kp-btn-secondary{background:transparent;border-color:var(--kp-border-str);color:var(--kp-text)}
.kp-btn-secondary:hover{border-color:var(--kp-theme);background:var(--kp-theme-dim);color:var(--kp-theme-light)}
.kp-btn-ghost{background:transparent;color:var(--kp-text-dim);border-color:transparent}
.kp-btn-ghost:hover{background:var(--kp-surface-2);color:var(--kp-text)}
.kp-btn-lg{padding:18px 40px;font-size:var(--kp-t-md);min-height:56px}
.kp-btn-sm{padding:10px 18px;font-size:var(--kp-t-xs);min-height:36px}


/* ============================================================
   10 · KARTY
   ============================================================ */
.kp-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--kp-s-4);margin-top:var(--kp-s-8);width:100%;max-width:var(--kp-container-max)}
.kp-feat-card{background:var(--kp-surface);border:1px solid var(--kp-border);border-radius:var(--kp-r-lg);padding:var(--kp-s-5) var(--kp-s-4);text-align:left;transition:all var(--kp-dur-normal) var(--kp-ease);position:relative;overflow:hidden}
.kp-feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--kp-theme),transparent);opacity:0;transition:opacity var(--kp-dur-normal)}
.kp-feat-card:hover{border-color:var(--kp-theme);background:var(--kp-surface-2);transform:translateY(-4px);box-shadow:var(--kp-shadow-md)}
.kp-feat-card:hover::before{opacity:1}
.kp-feat-icon{width:48px;height:48px;border-radius:var(--kp-r-md);background:var(--kp-theme-dim);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:var(--kp-s-3);transition:transform var(--kp-dur-normal) var(--kp-ease)}
.kp-feat-card:hover .kp-feat-icon{transform:scale(1.1) rotate(-5deg)}
.kp-feat-title{font-family:var(--kp-font-display);font-size:var(--kp-t-lg);font-weight:var(--kp-w-bold);color:var(--kp-text-bright);text-transform:uppercase;letter-spacing:var(--kp-ls-wide);margin-bottom:var(--kp-s-2);line-height:var(--kp-lh-snug)}
.kp-feat-desc{font-size:var(--kp-t-sm);color:var(--kp-text-dim);line-height:var(--kp-lh-normal)}

.kp-mod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--kp-s-4)}
.kp-mod-card{background:var(--kp-surface);border:1px solid var(--kp-border);border-radius:var(--kp-r-lg);padding:var(--kp-s-6);transition:all var(--kp-dur-normal) var(--kp-ease);display:flex;flex-direction:column;gap:var(--kp-s-3);position:relative;overflow:hidden}
.kp-mod-card:hover{border-color:var(--kp-theme);background:var(--kp-surface-2);transform:translateY(-4px);box-shadow:var(--kp-shadow-md),var(--kp-glow-xs)}
.kp-mod-emoji{font-size:36px;width:64px;height:64px;border-radius:var(--kp-r-md);background:var(--kp-theme-dim);display:flex;align-items:center;justify-content:center;border:1px solid var(--kp-theme)}
.kp-mod-name{font-family:var(--kp-font-display);font-size:var(--kp-t-xl);font-weight:var(--kp-w-extrabold);color:var(--kp-text-bright);text-transform:uppercase;letter-spacing:var(--kp-ls-wide);line-height:var(--kp-lh-snug)}
.kp-mod-desc{color:var(--kp-text-dim);font-size:var(--kp-t-sm);line-height:var(--kp-lh-normal);flex:1}
.kp-mod-tags{display:flex;flex-wrap:wrap;gap:6px}
.kp-mod-tag{padding:4px 10px;background:var(--kp-surface-3);border:1px solid var(--kp-border);border-radius:var(--kp-r-full);font-size:var(--kp-t-xs);font-weight:var(--kp-w-semibold);color:var(--kp-text-dim)}

.kp-flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--kp-s-4)}
.kp-flow-card{background:var(--kp-surface);border:1px solid var(--kp-border);border-radius:var(--kp-r-lg);padding:var(--kp-s-6) var(--kp-s-5);position:relative;transition:all var(--kp-dur-normal) var(--kp-ease)}
.kp-flow-card:hover{border-color:var(--kp-theme);transform:translateY(-4px);box-shadow:var(--kp-shadow-md)}
.kp-flow-num{font-family:var(--kp-font-mono);font-size:var(--kp-t-4xl);font-weight:var(--kp-w-black);line-height:1;background:linear-gradient(135deg,var(--kp-theme) 0%,var(--kp-theme-dim) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.4;position:absolute;top:var(--kp-s-3);right:var(--kp-s-3)}
.kp-flow-icon{font-size:32px;margin-bottom:var(--kp-s-3)}
.kp-flow-title{font-family:var(--kp-font-display);font-size:var(--kp-t-lg);font-weight:var(--kp-w-bold);color:var(--kp-text-bright);text-transform:uppercase;letter-spacing:var(--kp-ls-wide);margin-bottom:var(--kp-s-2)}
.kp-flow-desc{color:var(--kp-text-dim);font-size:var(--kp-t-sm);line-height:var(--kp-lh-normal)}


/* ============================================================
   11 · NAGŁÓWKI SEKCJI
   ============================================================ */
.kp-sec-head{text-align:center;margin-bottom:var(--kp-s-10);display:flex;flex-direction:column;align-items:center;gap:var(--kp-s-3)}
.kp-sec-badge{display:inline-block;padding:6px 14px;background:var(--kp-theme-dim);border:1px solid var(--kp-theme);color:var(--kp-theme-light);border-radius:var(--kp-r-full);font-size:var(--kp-t-xs);font-weight:var(--kp-w-bold);letter-spacing:var(--kp-ls-wider);text-transform:uppercase}
.kp-sec-title{font-family:var(--kp-font-display);font-size:var(--kp-t-2xl);font-weight:var(--kp-w-black);color:var(--kp-text-bright);text-transform:uppercase;letter-spacing:var(--kp-ls-tight);line-height:var(--kp-lh-tight)}
.kp-sec-title .accent{background:linear-gradient(135deg,var(--kp-theme) 0%,var(--kp-theme-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kp-sec-sub{font-size:var(--kp-t-md);color:var(--kp-text-dim);max-width:640px;line-height:var(--kp-lh-relaxed)}


/* ============================================================
   12 · BOOK QUOTE
   ============================================================ */
.kp-book-section{padding:var(--kp-s-12) var(--kp-s-5);position:relative;border-top:1px solid var(--kp-divider);border-bottom:1px solid var(--kp-divider);background:var(--kp-bg-alt)}
.kp-book-quote-wrap{max-width:900px;margin:0 auto;text-align:center;position:relative;padding:var(--kp-s-5) 0}
.kp-book-quote-wrap::before,.kp-book-quote-wrap::after{font-family:var(--kp-font-display);font-size:120px;font-weight:var(--kp-w-black);color:var(--kp-theme-dim);line-height:1;position:absolute;opacity:.7}
.kp-book-quote-wrap::before{content:'"';top:-30px;left:10px}
.kp-book-quote-wrap::after{content:'"';bottom:-80px;right:10px}
.kp-book-quote{font-family:var(--kp-font-display);font-size:var(--kp-t-xl);font-weight:var(--kp-w-semibold);line-height:var(--kp-lh-snug);color:var(--kp-text-bright);font-style:italic;max-width:720px;margin:0 auto var(--kp-s-5)}
.kp-book-author{font-size:var(--kp-t-sm);color:var(--kp-theme);font-weight:var(--kp-w-bold);letter-spacing:var(--kp-ls-wider);text-transform:uppercase}


/* ============================================================
   13 · STATS ROW
   ============================================================ */
.kp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--kp-s-3);margin-bottom:var(--kp-s-8)}
.kp-stat{background:var(--kp-surface);border:1px solid var(--kp-border);border-radius:var(--kp-r-lg);padding:var(--kp-s-5) var(--kp-s-3);text-align:center;transition:all var(--kp-dur-normal) var(--kp-ease)}
.kp-stat:hover{border-color:var(--kp-theme);transform:translateY(-2px);box-shadow:var(--kp-glow-xs)}
.kp-stat-num{font-family:var(--kp-font-display);font-size:var(--kp-t-2xl);font-weight:var(--kp-w-black);color:var(--kp-theme);line-height:1;margin-bottom:var(--kp-s-2)}
.kp-stat-label{font-size:var(--kp-t-xs);color:var(--kp-text-mute);font-weight:var(--kp-w-semibold);letter-spacing:var(--kp-ls-wide);text-transform:uppercase;line-height:var(--kp-lh-snug)}


/* ============================================================
   14 · BOTTOM NAV + DRAWER
   ============================================================ */
.kp-gn-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--kp-z-bottom-nav);background:rgba(13,17,23,.92);backdrop-filter:var(--kp-blur);-webkit-backdrop-filter:var(--kp-blur);border-top:1px solid var(--kp-border);padding:6px 8px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));display:flex;align-items:stretch;justify-content:space-around;gap:2px;transition:transform var(--kp-dur-normal) var(--kp-ease)}
.kp-gn-bar::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--kp-theme-dim),transparent);opacity:.5}
.kp-gn-bar.kp-hidden{transform:translateY(110%)}
.kp-gn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border-radius:var(--kp-r-sm);color:var(--kp-text-mute);transition:color var(--kp-dur-fast),background var(--kp-dur-fast),transform var(--kp-dur-instant) var(--kp-ease);position:relative;cursor:pointer;min-height:48px}
.kp-gn-item:hover{color:var(--kp-text);background:var(--kp-surface-2)}
.kp-gn-item:active{transform:scale(.92)}
.kp-gn-item .ico{font-size:20px;line-height:1;transition:transform var(--kp-dur-fast) var(--kp-ease)}
.kp-gn-item:hover .ico{transform:translateY(-2px)}
.kp-gn-item .label{font-size:10px;font-weight:var(--kp-w-bold);letter-spacing:.3px;text-transform:uppercase}
.kp-gn-item.active{color:var(--kp-theme);background:var(--kp-theme-dim)}
.kp-gn-item.active::after{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--kp-theme);border-radius:var(--kp-r-full);box-shadow:0 0 8px var(--kp-theme)}
.kp-gn-badge{position:absolute;top:4px;right:10px;min-width:16px;height:16px;padding:0 4px;background:var(--kp-danger);color:white;font-family:var(--kp-font-mono);font-size:9px;font-weight:var(--kp-w-bold);border-radius:var(--kp-r-full);display:flex;align-items:center;justify-content:center;border:2px solid var(--kp-bg);box-shadow:0 0 8px rgba(248,81,73,.5);animation:kpPulseSoft 3s ease-in-out infinite}
@keyframes kpPulseSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.kp-gn-overlay{position:fixed;inset:0;background:var(--kp-overlay-str);backdrop-filter:var(--kp-blur-sm);-webkit-backdrop-filter:var(--kp-blur-sm);z-index:var(--kp-z-overlay);opacity:0;pointer-events:none;transition:opacity var(--kp-dur-normal)}
.kp-gn-overlay.open{opacity:1;pointer-events:auto}

.kp-gn-drawer{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(110%);width:100%;max-width:var(--kp-drawer-w);background:var(--kp-surface-2);border-top:1px solid var(--kp-border-str);border-radius:var(--kp-r-xl) var(--kp-r-xl) 0 0;box-shadow:var(--kp-shadow-xl);z-index:var(--kp-z-drawer);padding:var(--kp-s-5) var(--kp-s-4) calc(var(--kp-s-5) + env(safe-area-inset-bottom,0px));transition:transform var(--kp-dur-normal) var(--kp-ease);max-height:80vh;overflow-y:auto}
.kp-gn-drawer.open{transform:translateX(-50%) translateY(0)}
.kp-gn-drawer-handle{width:48px;height:4px;background:var(--kp-border-mid);border-radius:var(--kp-r-full);margin:0 auto var(--kp-s-4)}
.kp-gn-drawer-title{font-family:var(--kp-font-display);font-size:var(--kp-t-xs);font-weight:var(--kp-w-bold);color:var(--kp-theme);letter-spacing:var(--kp-ls-wider);text-transform:uppercase;padding:var(--kp-s-2) var(--kp-s-3);margin-top:var(--kp-s-3)}
.kp-gn-drawer-title:first-of-type{margin-top:0}
.kp-gn-drawer-item{display:flex;align-items:center;gap:var(--kp-s-3);padding:var(--kp-s-3);border-radius:var(--kp-r);color:var(--kp-text);font-size:var(--kp-t-base);font-weight:var(--kp-w-medium);transition:background var(--kp-dur-fast),color var(--kp-dur-fast);width:100%;text-align:left;cursor:pointer}
.kp-gn-drawer-item:hover,.kp-gn-drawer-item:active{background:var(--kp-theme-dim);color:var(--kp-theme-light)}
.kp-gn-drawer-item .ico{font-size:22px;width:36px;height:36px;border-radius:var(--kp-r-sm);background:var(--kp-surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kp-gn-drawer-item .bonus-badge{margin-left:auto;padding:3px 8px;background:var(--kp-gold-20);color:var(--kp-gold);border-radius:var(--kp-r-full);font-size:9px;font-weight:var(--kp-w-bold);letter-spacing:var(--kp-ls-wider);text-transform:uppercase}
.kp-gn-drawer-item.danger{color:var(--kp-danger)}


/* ============================================================
   15 · SCROLL-TO-TOP
   ============================================================ */
.kp-scroll-top{position:fixed;right:var(--kp-s-4);bottom:calc(var(--kp-h-bottom-nav) + var(--kp-s-4) + env(safe-area-inset-bottom,0px));width:var(--kp-h-scroll-top);height:var(--kp-h-scroll-top);border-radius:var(--kp-r-full);background:var(--kp-surface-2);border:1px solid var(--kp-border-str);color:var(--kp-theme);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:var(--kp-z-sticky);box-shadow:var(--kp-shadow-md);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:all var(--kp-dur-normal) var(--kp-ease)}
.kp-scroll-top.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.kp-scroll-top:hover{background:var(--kp-theme-dim);border-color:var(--kp-theme);box-shadow:var(--kp-glow);transform:translateY(-4px) scale(1.05)}
.kp-scroll-top:active{transform:translateY(-2px) scale(.98)}


/* ============================================================
   16 · FOOTER MINI
   ============================================================ */
.kp-footer-mini{text-align:center;padding:var(--kp-s-8) var(--kp-s-4);font-size:var(--kp-t-sm);color:var(--kp-text-mute);border-top:1px solid var(--kp-divider)}
.kp-footer-mini a{color:var(--kp-theme);margin-top:var(--kp-s-2);display:inline-block;font-weight:var(--kp-w-semibold);transition:color var(--kp-dur-fast)}
.kp-footer-mini a:hover{color:var(--kp-theme-light)}


/* ============================================================
   17 · ANIMACJE / REVEALS
   ============================================================ */
.kp-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--kp-ease),transform .6s var(--kp-ease)}
.kp-reveal.in{opacity:1;transform:translateY(0)}
.kp-reveal-scale{opacity:0;transform:scale(.95);transition:opacity .6s var(--kp-ease),transform .6s var(--kp-ease-back)}
.kp-reveal-scale.in{opacity:1;transform:scale(1)}
.kp-reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s var(--kp-ease),transform .6s var(--kp-ease)}
.kp-reveal-stagger.in > *:nth-child(1){transition-delay:.05s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(2){transition-delay:.15s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(3){transition-delay:.25s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(4){transition-delay:.35s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(5){transition-delay:.45s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(6){transition-delay:.55s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(7){transition-delay:.65s;opacity:1;transform:translateY(0)}
.kp-reveal-stagger.in > *:nth-child(8){transition-delay:.75s;opacity:1;transform:translateY(0)}


/* ============================================================
   18 · UTILITY CLASSES
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kp-hidden{display:none !important}
.kp-flex{display:flex}
.kp-grid{display:grid}
.kp-center{display:flex;align-items:center;justify-content:center}
.kp-gap-1{gap:var(--kp-s-1)} .kp-gap-2{gap:var(--kp-s-2)} .kp-gap-3{gap:var(--kp-s-3)}
.kp-gap-4{gap:var(--kp-s-4)} .kp-gap-5{gap:var(--kp-s-5)} .kp-gap-6{gap:var(--kp-s-6)}
.kp-mt-4{margin-top:var(--kp-s-4)} .kp-mt-6{margin-top:var(--kp-s-6)} .kp-mt-8{margin-top:var(--kp-s-8)}
.kp-mb-4{margin-bottom:var(--kp-s-4)} .kp-mb-6{margin-bottom:var(--kp-s-6)} .kp-mb-8{margin-bottom:var(--kp-s-8)}
.kp-text-center{text-align:center} .kp-text-left{text-align:left} .kp-text-right{text-align:right}


/* ============================================================
   19 · POLISH & ENHANCEMENTS (v2.1)
   ============================================================ */

/* ─── Scroll progress bar (top) ─── */
.kp-scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--kp-theme) 0%,var(--kp-theme-light) 100%);z-index:9999;transition:width .1s linear;box-shadow:0 0 12px var(--kp-theme);border-radius:0 var(--kp-r-full) var(--kp-r-full) 0;will-change:width}

/* ─── Hero title enhancement ─── */
.kp-hero-title{text-shadow:0 4px 60px var(--kp-theme-dim)}
.kp-hero-title .accent{filter:drop-shadow(0 0 24px var(--kp-theme-dim))}

/* ─── Hero badge float ─── */
.kp-hero-badge{animation:kpBadgeFloat 3s ease-in-out infinite}
@keyframes kpBadgeFloat{0%,100%{transform:translateY(0);box-shadow:0 4px 12px var(--kp-theme-dim)}50%{transform:translateY(-4px);box-shadow:0 10px 24px var(--kp-theme-dim)}}

/* ─── Button shimmer ─── */
.kp-btn-primary{position:relative;overflow:hidden;isolation:isolate}
.kp-btn-primary::before{content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 80%,transparent 100%);transform:skewX(-20deg);transition:left .7s var(--kp-ease);pointer-events:none;z-index:1}
.kp-btn-primary:hover::before{left:120%}

/* ─── Enhanced card shadows ─── */
.kp-mod-card,.kp-feat-card,.kp-flow-card,.kp-stat{box-shadow:0 4px 12px rgba(0,0,0,.15)}
.kp-mod-card:hover,.kp-feat-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 40px -10px var(--kp-theme-dim)}
.kp-flow-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 30px -10px var(--kp-theme-dim)}

/* ─── Module card top accent line ─── */
.kp-mod-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:3px;background:linear-gradient(90deg,transparent,var(--kp-theme),transparent);opacity:0;transition:opacity .4s;border-radius:0 0 var(--kp-r-full) var(--kp-r-full)}
.kp-mod-card:hover::before{opacity:1}

/* ─── Icon wiggle on flow cards hover ─── */
@keyframes kpIconWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.kp-flow-card:hover .kp-flow-icon{animation:kpIconWiggle .6s ease-in-out}

/* ─── Stats with drop-shadow glow ─── */
.kp-stat-num{filter:drop-shadow(0 2px 12px var(--kp-theme-dim));transition:transform var(--kp-dur-normal) var(--kp-ease)}
.kp-stat:hover .kp-stat-num{transform:scale(1.08)}

/* ─── Section titles with decorative lines ─── */
.kp-sec-title{position:relative;display:inline-block}
.kp-sec-title::before,.kp-sec-title::after{content:'';position:absolute;top:50%;width:32px;height:2px;background:linear-gradient(90deg,transparent,var(--kp-theme),transparent);opacity:.6}
.kp-sec-title::before{right:calc(100% + 20px)}
.kp-sec-title::after{left:calc(100% + 20px)}
@media(max-width:768px){.kp-sec-title::before,.kp-sec-title::after{display:none}}

/* ─── Book quote atmospheric background ─── */
.kp-book-section{background:radial-gradient(ellipse 60% 80% at center,var(--kp-theme-dim) 0%,transparent 70%),var(--kp-bg-alt)}
.kp-book-quote{text-shadow:0 2px 20px rgba(0,0,0,.5)}

/* ─── Footer mini gradient ─── */
.kp-footer-mini{background:linear-gradient(180deg,transparent,var(--kp-bg-deep))}

/* ─── Avatar glow ring ─── */
.kp-avatar::after{content:'';position:absolute;inset:-3px;border-radius:inherit;background:var(--kp-gradient-gold);z-index:-1;opacity:0;filter:blur(10px);transition:opacity var(--kp-dur-normal)}
.kp-avatar:hover::after{opacity:.7}

/* ─── Topbar stat pulse on hover ─── */
.kp-topbar-stat{position:relative;overflow:hidden}
.kp-topbar-stat::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--kp-theme-dim),transparent);transition:left .6s var(--kp-ease)}
.kp-topbar-stat:hover::before{left:100%}

/* ─── Mobile spacing tweaks ─── */
@media(max-width:640px){
  .kp-hero{padding:var(--kp-s-8) var(--kp-s-4)}
  .kp-sec-head{margin-bottom:var(--kp-s-8)}
  .kp-hero-content{gap:var(--kp-s-4)}
}


/* ============================================================
   20 · TOPBAR POLISH (v2.2) — Premium Control Panel Look
   ============================================================ */

/* ─── Subtle scroll shadow ─── */
.kp-topbar{
  box-shadow: 0 1px 0 var(--kp-border), 0 0 40px rgba(0,0,0,.1);
  transition: transform var(--kp-dur-normal) var(--kp-ease),
              background var(--kp-dur-normal),
              box-shadow var(--kp-dur-normal);
}

/* ─── Podwyzszamy topbar dla lepszych proporcji ─── */
.kp-topbar-inner{height:60px;gap:var(--kp-s-3);padding:0 var(--kp-s-4)}
@media(min-width:768px){.kp-topbar-inner{height:68px;padding:0 var(--kp-s-6);gap:var(--kp-s-4)}}

/* ─── Brand z hover ─── */
.kp-topbar-brand{
  transition:transform var(--kp-dur-fast) var(--kp-ease);
  padding: 6px 10px 6px 6px;
  border-radius: var(--kp-r-full);
  margin-left: -6px;
}
.kp-topbar-brand:hover{background:var(--kp-gold-10)}
.kp-topbar-brand:hover .kp-topbar-logo{
  transform:rotate(-8deg);
  box-shadow:0 0 24px var(--kp-gold-40);
}

.kp-topbar-logo{
  width:42px;height:42px;
  font-size:18px;
  transition:transform var(--kp-dur-normal) var(--kp-ease-back),
             box-shadow var(--kp-dur-normal);
}

.kp-topbar-brand-name{
  font-weight:var(--kp-w-extrabold);
  letter-spacing:2.5px;
}
.kp-topbar-brand-sub{
  color:var(--kp-theme);
  font-weight:var(--kp-w-bold);
  letter-spacing:var(--kp-ls-wider);
}

/* ─── Prawa strona — grupowanie ─── */
.kp-topbar-right{gap:var(--kp-s-2)}
@media(min-width:768px){.kp-topbar-right{gap:var(--kp-s-3)}}

/* ─── Stats wrapper (grupa) ─── */
.kp-topbar-stats{
  display:flex;align-items:center;
  gap:6px;
  padding:3px;
  background:rgba(13,17,23,.6);
  border:1px solid var(--kp-border);
  border-radius:var(--kp-r-full);
}
@media(max-width:480px){.kp-topbar-stats{padding:0;background:none;border:none}}

/* ─── Individual stat pill — czystszy, mniejszy ─── */
.kp-topbar-stat{
  padding:6px 12px;
  height:32px;
  gap:6px;
  background:transparent;
  border:none;
  font-family:var(--kp-font-mono);
  font-size:12px;
  font-weight:var(--kp-w-bold);
}
.kp-topbar-stat:hover{
  background:var(--kp-surface-2);
  transform:none;
}
.kp-topbar-stat .ico{
  font-size:14px;
  line-height:1;
}
.kp-topbar-stat .value{
  line-height:1;
  letter-spacing:.3px;
}
.kp-topbar-stat .label{
  font-size:10px;
  color:var(--kp-text-mute);
  font-family:var(--kp-font-body);
  font-weight:var(--kp-w-semibold);
  letter-spacing:var(--kp-ls-wide);
  text-transform:uppercase;
  line-height:1;
  margin-left:-2px;
}

/* Fire flicker na streak */
.kp-topbar-stat.stat-streak{color:var(--kp-gold)}
.kp-topbar-stat.stat-streak .ico{
  animation:topbarFireFlicker 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 6px var(--kp-gold));
}
@keyframes topbarFireFlicker{
  0%,100%{transform:scale(1) rotate(-3deg)}
  25%{transform:scale(1.08) rotate(2deg)}
  50%{transform:scale(1) rotate(3deg)}
  75%{transform:scale(1.12) rotate(-2deg)}
}

/* Progress — theme glow */
.kp-topbar-stat.stat-progress{color:var(--kp-theme-light)}
.kp-topbar-stat.stat-progress .ico{
  filter:drop-shadow(0 0 6px var(--kp-theme));
}

/* Mobile — chowaj labels */
@media(max-width:640px){
  .kp-topbar-stat{padding:6px 10px;height:30px;font-size:11px}
  .kp-topbar-stat .label{display:none}
}

/* ─── Separator między grupami ─── */
.kp-topbar-sep{
  width:1px;
  height:24px;
  background:var(--kp-divider);
  flex-shrink:0;
}
@media(max-width:768px){.kp-topbar-sep{display:none}}

/* ─── Dashboard button — wyraznie inny niz stats ─── */
.kp-topbar-dash{
  display:inline-flex;align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  border-radius:var(--kp-r-full);
  border:1px solid var(--kp-border);
  background:transparent;
  color:var(--kp-text-dim);
  font-family:var(--kp-font-body);
  font-size:11px;
  font-weight:var(--kp-w-bold);
  letter-spacing:var(--kp-ls-wider);
  text-transform:uppercase;
  transition:all var(--kp-dur-fast) var(--kp-ease);
  white-space:nowrap;
}
.kp-topbar-dash .arr{
  font-family:var(--kp-font-mono);
  font-size:14px;line-height:1;
  transition:transform var(--kp-dur-fast) var(--kp-ease);
}
.kp-topbar-dash:hover{
  color:var(--kp-gold);
  border-color:var(--kp-gold);
  background:var(--kp-gold-10);
  box-shadow:0 0 16px var(--kp-gold-20);
}
.kp-topbar-dash:hover .arr{transform:translateX(-4px)}

/* ─── Avatar — zachowuje size, upewniamy sie o ring ─── */
.kp-avatar{width:40px;height:40px;font-size:13px}

/* ─── Notification dot lepiej widoczna ─── */
.kp-avatar-notif{
  top:-3px;right:-3px;
  width:14px;height:14px;
  border-width:2.5px;
}