/* =========================================================
   KAKOFIND — INDEX REDESIGN LAYER (2026)
   Spójna, premium warstwa wizualna nakładana NA istniejące style
   (ładowana jako ostatnia, więc wygrywa kaskadę dla ustawianych
   właściwości). Nie zmienia struktury HTML — tylko wygląd.
   Paleta: czerń #050505 / czerwień #E60000·#FF1A1A·#8A0000.
   ========================================================= */

:root {
    --kf-red: #E60000;
    --kf-red-lt: #FF2D2D;
    --kf-red-dk: #8A0000;
    --kf-ink: #f3f3f3;
    --kf-muted: #9a9a9a;
    --kf-line: rgba(255, 255, 255, 0.08);
    --kf-glass: rgba(255, 255, 255, 0.035);
}

body { background-color: #050505; }

/* Wspólny, mocniejszy styl „pigułki/badge” nagłówków sekcji */
.preview-badge,
.porownywarka-hero__badge,
.op-minimal__badge,
.teaser-badge,
.hub-badge {
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.12), 0 8px 22px rgba(230, 0, 0, 0.12);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* =========================================================
   HERO
   ========================================================= */
.kako-hero {
    background:
        radial-gradient(ellipse 60% 50% at 50% -10%, rgba(230, 0, 0, 0.16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 12% 18%, rgba(230, 0, 0, 0.08), transparent 55%),
        #050505;
}
/* Subtelna siatka punktowa w tle hero */
.kako-hero__bg-fx {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    opacity: 0.6;
}

/* Statystyki jako szklane karty z czerwonym akcentem */
.kako-stats {
    gap: 0 !important;
    padding: 10px;
    border: 1px solid var(--kf-line);
    border-radius: 18px;
    background: var(--kf-glass);
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.kako-stats__item { padding: 6px 26px; }
.kako-stats__number {
    background: linear-gradient(180deg, #fff, #ffd9d9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 26px rgba(230, 0, 0, 0.25);
}
.kako-stats__label { letter-spacing: 0.6px; }
.kako-stats__separator {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(230, 0, 0, 0.5), transparent) !important;
}

/* =========================================================
   PODGLĄD PRODUKTÓW
   ========================================================= */
.index-products-preview { padding-top: clamp(48px, 7vw, 96px); }
.preview-title { letter-spacing: -0.5px; }

/* Karty produktów — mocniejszy hover + gradientowa obwódka */
.idx-product-card {
    position: relative;
    border-radius: 16px !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.idx-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 0, 0, 0.55) !important;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6), 0 0 26px rgba(230, 0, 0, 0.18);
}
.idx-card-image img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.idx-product-card:hover .idx-card-image img { transform: scale(1.07); }
.idx-card-quality {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 210, 77, 0.35);
}

/* Stopka: CTA + dynamiczny licznik produktów */
.preview-footer { gap: 16px; }
.preview-cta-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(230, 0, 0, 0.28);
}
.preview-cta-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: kfShine 3.4s ease-in-out infinite;
}
@keyframes kfShine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
.preview-count-chip {
    border: 1px solid rgba(230, 0, 0, 0.25) !important;
    background: linear-gradient(180deg, rgba(230, 0, 0, 0.08), rgba(255, 255, 255, 0.02)) !important;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.preview-count-chip:hover { transform: translateY(-2px); border-color: rgba(230, 0, 0, 0.5) !important; }
.preview-count-chip strong { color: #fff; }

/* =========================================================
   OFICJALNY ARKUSZ (premium „official” card)
   ========================================================= */
.arkusz-main-note-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 210, 77, 0.28) !important;
    background:
        radial-gradient(ellipse 50% 120% at 0% 0%, rgba(255, 210, 77, 0.08), transparent 60%),
        linear-gradient(180deg, #140d05, #0a0703) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.arkusz-main-note-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #FFD24D, transparent);
}
.arkusz-main-note-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 210, 77, 0.55) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 32px rgba(255, 210, 77, 0.14);
}
.a2n-icon--main {
    background: linear-gradient(135deg, #1e7a44, #0e3d22) !important;
    box-shadow: 0 10px 24px rgba(31, 122, 68, 0.3);
}
.a2n-eyebrow--main { color: #FFD24D !important; }
.a2n-cta--main {
    background: linear-gradient(135deg, #FFD24D, #C99500) !important;
    color: #1a0a00 !important;
}

/* =========================================================
   PORÓWNYWARKA AGENTÓW — „live ranking" dashboard
   ========================================================= */
.porownywarka-hero {
    background:
        radial-gradient(ellipse 55% 60% at 88% 26%, rgba(230, 0, 0, 0.12), transparent 60%),
        radial-gradient(ellipse 40% 50% at 4% 82%, rgba(230, 0, 0, 0.06), transparent 60%),
        #050505;
}
.text-highlight {
    background: linear-gradient(110deg, #FF2D2D, #FF7A7A);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.porownywarka-hero__title { letter-spacing: -0.5px; }

/* Badge „LIVE DATA 2026" — pulsująca kropka */
.porownywarka-hero__badge { display: inline-flex !important; align-items: center; gap: 8px; }
.porownywarka-hero__badge::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #FF3B3B; box-shadow: 0 0 8px #FF3B3B;
    animation: kfLive 1.5s ease-in-out infinite;
}
@keyframes kfLive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* Karta dashboardu */
.abstract-dashboard {
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(230,0,0,0.08), transparent 60%),
        linear-gradient(180deg, #100c0c, #070505) !important;
    box-shadow: 0 36px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(230,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transform: rotateY(-6deg) rotateX(4deg) !important;
}
.abstract-dashboard:hover { transform: rotateY(0) rotateX(0) translateY(-4px) !important; }

/* Nagłówek: kropki · tytuł · LIVE */
.abstract-dashboard__header {
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.abstract-dashboard__header .bulb--red { animation: kfLive 1.6s ease-in-out infinite; }
.abstract-dashboard__header::before {
    content: "RANKING AGENTÓW · 2026"; order: 5; margin-left: 12px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 1.4px; color: #cfcfcf;
}
.abstract-dashboard__header::after {
    content: "● LIVE"; order: 10; margin-left: auto;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; color: #00FF99;
    padding: 3px 9px; border-radius: 50px;
    background: rgba(0,255,153,0.1); border: 1px solid rgba(0,255,153,0.3);
}

/* Wiersze rankingu + numerki */
.abstract-dashboard__body { counter-reset: kfrank; }
.data-row {
    position: relative; gap: 12px;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.025) !important;
    counter-increment: kfrank;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.data-row:hover { transform: translateX(3px); background: rgba(255,255,255,0.05) !important; }
.data-row::before {
    content: counter(kfrank); flex: 0 0 auto;
    width: 24px; height: 24px; display: grid; place-items: center;
    font-size: 0.72rem; font-weight: 800; color: #cfcfcf;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
}

/* Zwycięzca (Kakobuy) — zielona poświata + złoty numerek + korona */
.data-row--highlight {
    border: 1px solid rgba(0,255,153,0.4) !important;
    background: linear-gradient(90deg, rgba(0,255,153,0.1), rgba(0,255,153,0.02)) !important;
}
.porownywarka-hero .data-row--highlight.pulse-animation { animation: kfWinnerGlow 2.6s ease-in-out infinite; }
@keyframes kfWinnerGlow {
    0%,100% { box-shadow: 0 0 22px rgba(0,255,153,0.12); }
    50% { box-shadow: 0 0 36px rgba(0,255,153,0.24); }
}
.data-row--highlight::before {
    color: #07140d; background: linear-gradient(135deg, #FFE066, #FFB800);
    border-color: #FFB800; box-shadow: 0 0 12px rgba(255,184,0,0.4);
}
.data-row--highlight::after {
    content: "\f521"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: -10px; right: -8px;
    font-size: 0.66rem; color: #07140d;
    width: 24px; height: 24px; display: grid; place-items: center;
    background: linear-gradient(135deg, #FFE066, #FFB800); border-radius: 50%;
    box-shadow: 0 4px 12px rgba(255,184,0,0.45); transform: rotate(12deg);
}
.data-row__label { width: auto !important; min-width: 62px; }
.data-row--highlight .data-row__label { color: #fff; }

/* Paski — gradient, zaokrąglenie, animacja „wzrostu" */
.data-row__bars { margin: 0 6px !important; gap: 7px !important; }
.bar {
    height: 7px !important; border-radius: 50px !important; opacity: 1 !important;
    transform-origin: left; animation: kfBarGrow 0.9s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes kfBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar--green { background: linear-gradient(90deg, #00FF99, #00C97B) !important; box-shadow: 0 0 12px rgba(0,255,153,0.45); }
.bar--yellow { background: linear-gradient(90deg, #FFD24D, #E6A700) !important; }
.bar--red { background: linear-gradient(90deg, #FF6B6B, #C92A2A) !important; }

/* Wyniki */
.data-row__score { font-size: 1rem !important; width: auto !important; min-width: 52px; }
.data-row__score small { font-size: 0.62rem; color: #888; font-weight: 600; }
.data-row__score.text-green { color: #00FF99 !important; text-shadow: 0 0 14px rgba(0,255,153,0.45); }

/* Stopka: trend zaufania */
.abstract-dashboard__footer {
    height: auto !important; overflow: visible !important;
    margin-top: 22px !important; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dash-trend-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600; color: #9a9a9a; margin-bottom: 6px;
}
.dash-trend-label i, .dash-trend-label strong { color: #00FF99; }
.dash-trend-label strong { font-weight: 800; }
.trend-line { width: 100%; height: 46px; display: block; filter: drop-shadow(0 4px 8px rgba(230,0,0,0.35)); }
.trend-line path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: kfDraw 2.4s ease-out forwards !important; }
.trend-line .trend-area { stroke-dasharray: none; stroke-dashoffset: 0; animation: kfFadeIn 1s ease 1.4s backwards !important; }
@keyframes kfDraw { to { stroke-dashoffset: 0; } }
@keyframes kfFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Wyłączamy migotanie opacity wierszy (rozprasza) — zostaje sam glow zwycięzcy */
.porownywarka-hero .pulse-animation { animation: none; }

/* CTA */
.porownywarka-hero .btn-primary { box-shadow: 0 14px 32px rgba(230,0,0,0.32); }

/* =========================================================
   AI WEIGHT ENGINE (oszacuj pakę)
   ========================================================= */
.oszacuj-pake-minimal {
    background:
        radial-gradient(ellipse 60% 50% at 50% 110%, rgba(230, 0, 0, 0.08), transparent 60%),
        #060404;
}
.op-minimal__widget {
    position: relative;
    border-radius: 22px;
    padding: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)) ;
    border: 1px solid var(--kf-line);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.op-minimal__search-box {
    border: 1px solid rgba(230, 0, 0, 0.3) !important;
    box-shadow: 0 0 0 4px rgba(230, 0, 0, 0.07), 0 16px 36px rgba(0, 0, 0, 0.5);
    background: rgba(10, 8, 8, 0.9) !important;
}
.op-minimal__search-box .search-icon { color: var(--kf-red-lt) !important; }
.op-tag {
    backdrop-filter: blur(6px);
    border: 1px solid var(--kf-line) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.op-res-value.text-red { text-shadow: 0 0 20px rgba(230, 0, 0, 0.4); }

/* =========================================================
   KONWERTER LINKÓW
   ========================================================= */
.link-konwerter {
    background:
        radial-gradient(ellipse 45% 50% at 10% 40%, rgba(230, 0, 0, 0.08), transparent 60%),
        #050505;
}
.highlight-gradient {
    background: linear-gradient(110deg, #FF2D2D, #FF7A7A);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.conversion-box {
    border: 1px solid var(--kf-line) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg, #0f0d0d, #070505) !important;
}
.kakobuy-glow-border {
    box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.4), 0 0 22px rgba(230, 0, 0, 0.25) !important;
}
.teaser-cta-btn {
    position: relative; overflow: hidden;
    box-shadow: 0 12px 30px rgba(230, 0, 0, 0.3);
}
.teaser-cta-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.2) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: kfShine 3.6s ease-in-out infinite;
}

/* =========================================================
   KNOWLEDGE HUB — bardziej unikalne karty
   ========================================================= */
.knowledge-hub { background: #070303; }
.hub-card {
    background: linear-gradient(180deg, #130707, #0b0404) !important;
    border: 1px solid var(--kf-line) !important;
}
/* Gradientowa obwódka pojawiająca się na hover */
.hub-card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(230, 0, 0, 0.6), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.hub-card:hover::after { opacity: 1; }
/* Duża, „duchowa” ikona w tle karty */
.hub-card .card-icon-box { position: relative; z-index: 2; }
.tutorial-card .hub-card-bg::before,
.faq-card .hub-card-bg::before {
    content: "\f19d"; /* graduation cap */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -10px; bottom: -24px;
    font-size: 9rem;
    color: rgba(230, 0, 0, 0.06);
    line-height: 1;
    pointer-events: none;
}
.faq-card .hub-card-bg::before { content: "\f059"; /* question circle */ }
.card-icon-box { box-shadow: 0 10px 26px rgba(230, 0, 0, 0.18); }

/* =========================================================
   FOOTER
   ========================================================= */
.custom-footer {
    border-top: 1px solid var(--kf-line);
    background: linear-gradient(180deg, #070303, #030101) !important;
}
.footer-title { letter-spacing: 1.5px; }
.discord-button { box-shadow: 0 10px 24px rgba(88, 101, 242, 0.18); }
.social-icons a { transition: transform 0.25s ease, color 0.25s ease; }
.social-icons a:hover { transform: translateY(-3px); }

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 768px) {
    .kako-stats__item { padding: 6px 16px; }
    .tutorial-card .hub-card-bg::before,
    .faq-card .hub-card-bg::before { font-size: 6rem; }
}