/* static/css/index.css - VIBZ.LOL BLUE/BLACK THEME */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #5865F2;
    --secondary-blue: #4752C4;
    --light: #ffffff;
    --gray: #99AAB5;
    --dark-bg: #0a0a0a;
    --card-bg: rgba(15, 15, 15, 0.95);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--dark-bg);
    color: var(--light);
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
}

/* ========== UKRYJ SCROLLBAR ========== */
body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========== MNIEJ GWIAZDEK - SPADAJĄCE ========== */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        0 0 6px 2px rgba(255, 255, 255, 0.6),
        200px 100px white,
        400px 50px white,
        600px 200px white,
        800px 120px white,
        1000px 180px white,
        1200px 60px white,
        1400px 150px white,
        300px 30px white,
        700px 170px white;
    animation: starfall 10s linear infinite;
}

.stars::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    background: rgba(88, 101, 242, 0.7);
    border-radius: 50%;
    box-shadow: 
        150px 120px rgba(88, 101, 242, 0.7),
        450px 40px rgba(88, 101, 242, 0.7),
        750px 200px rgba(88, 101, 242, 0.7),
        1050px 80px rgba(88, 101, 242, 0.7),
        350px 160px rgba(88, 101, 242, 0.7);
    animation: starfall 15s linear infinite 3s;
}

@keyframes starfall {
    0% {
        transform: translateY(-50px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-100px);
        opacity: 0;
    }
}

/* Gradient tło */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top, rgba(88, 101, 242, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 3rem;
    position: relative;
    z-index: 1;
}

/* ========== SIDEBAR - USUNIĘTY ========== */
.sidebar {
    display: none !important;
}

/* ========== MNIEJSZY NAVBAR ========== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1.6rem;
    position: fixed;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 6rem);
    max-width: 1400px;
    z-index: 260;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(30px);
    border-radius: 1.2rem;
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s;
}

.logo:hover {
    transform: scale(1.05);
}

.logo i {
    color: var(--primary-blue);
    font-size: 1.3rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.btn-login-nav {
    padding: 0.6rem 1.6rem;
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--light);
    background: var(--primary-blue);
    transition: all 0.3s;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.4);
}

.btn-login-nav:hover {
    background: var(--secondary-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
}

/* Smaller navbar on larger desktop screens */
@media (min-width: 1200px) {
    .navbar {
        /* slightly taller navbar for desktop */
        padding: 0.65rem 1rem;
        top: 1.05rem;
        border-radius: 0.95rem;
        width: calc(100% - 6rem);
        max-width: 1300px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
    }

    .logo {
        font-size: 1.05rem;
        gap: 0.55rem;
    }

    .logo i {
        font-size: 1.15rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .btn-login-nav {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        border-radius: 0.85rem;
    }
}

/* ========== HERO SECTION ========== */
.hero {
    padding: 11rem 0 8rem;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    max-width: 1000px;
    text-align: center;
}

.hero-title {
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.1;
    color: var(--light);
    letter-spacing: -0.03em;
    text-shadow: 0 4px 20px rgba(88, 101, 242, 0.3);
}

.hero-subtitle {
    display: block;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0.5rem;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--gray);
    margin-bottom: 3rem;
    line-height: 1.8;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 6rem;
    justify-content: center;
}

.btn-login {
    padding: 1.2rem 3rem;
    border-radius: 1.2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    transition: all 0.3s;
    color: var(--light);
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.btn-login:hover {
    border-color: var(--primary-blue);
    background: rgba(88, 101, 242, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.3);
}

.btn-get-started {
    padding: 1.2rem 3rem;
    border-radius: 1.2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    transition: all 0.3s;
    color: var(--light);
    background: var(--primary-blue);
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}

.btn-get-started:hover {
    background: var(--secondary-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(88, 101, 242, 0.6);
}

/* ========== USERS SHOWCASE - SZERSZY PASEK, MNIEJ WIDOCZNY BLUR ========== */
.users-showcase {
    margin-top: 5rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: transparent;
    padding: 6rem 0;
}

.users-scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* JESZCZE SZYBSZA ANIMACJA - 8s */
.users-avatars {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* --scroll-length will be set by JS (px). Fallback to 50% if unavailable. */
    --scroll-length: 50%;
    animation: scrollLeft 8s linear infinite;
    width: max-content;
    padding: 0 2rem;
    will-change: transform;
}

.users-avatars:hover {
    animation-play-state: paused;
}

.users-avatars a[data-duplicate="true"] {
    /* Allow hover effects on duplicated items so they feel interactive when visible.
       Clicks are prevented via JS handler to avoid double-navigation. */
    pointer-events: auto;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    /* Use exact pixel width measured at runtime to avoid jumps when content width changes */
    100% {
        transform: translateX(calc(-1 * var(--scroll-length)));
    }
}

.user-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    padding: 0.85rem 1.5rem;
    border-radius: 1.2rem;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 180px;
    max-width: 200px;
    flex-shrink: 0;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.06) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s;
}

.user-card:hover::before {
    opacity: 1;
}

.user-card:hover {
    transform: translateY(-1px);
    background: rgba(20, 20, 20, 0.98);
    border-color: rgba(88, 101, 242, 0.28);
    box-shadow: 
        0 6px 14px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(88, 101, 242, 0.12);
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 1.1rem;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(88, 101, 242, 0.4);
    flex-shrink: 0;
    transition: all 0.25s;
    position: relative;
    z-index: 1;
}

.user-card:hover .user-avatar {
    box-shadow: 0 4px 16px rgba(88, 101, 242, 0.5);
    transform: scale(1.03);
    border-color: rgba(88, 101, 242, 0.6);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.user-name {
    color: var(--light);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-handle {
    color: var(--gray);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MNIEJ WIDOCZNY BLUR */
.users-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px;
    background: linear-gradient(to right, var(--dark-bg) 0%, rgba(10, 10, 10, 0.7) 15%, rgba(10, 10, 10, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

.users-showcase::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    background: linear-gradient(to left, var(--dark-bg) 0%, rgba(10, 10, 10, 0.7) 15%, rgba(10, 10, 10, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

/* ========== FOOTER ========== */
.footer {
    padding: 0; /* base reset, site-footer handles spacing */
    margin-top: 6rem;
}

.footer-content {
    text-align: center;
}

.footer-content p {
    color: var(--gray);
    font-size: 0.95rem;
    margin-top: 1rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--light);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: opacity 0.3s;
}

.footer-logo i {
    color: var(--primary-blue);
}

.footer-logo:hover {
    opacity: 0.85;
}

/* New site footer layout */
.site-footer {
    background: #060606;
    border-top: 1px solid rgba(255,255,255,0.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.site-footer .footer-inner {
    /* Keep the background full-bleed but center the content group
       so the top-row appears visually centered on wide screens. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: 56px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--gray);
    font-size: 0.95rem;
    /* visually pull the brand a bit closer to the center */
    margin-right: 1.15rem;
}

.footer-left .footer-brand {
    color: var(--primary-blue);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-copy {
    color: var(--gray);
    font-size: 0.92rem;
}

.footer-center { display:flex; align-items:center; }

.footer-links {
    display: flex;
    gap: 1.1rem;
    align-items: center;
}

.footer-links a {
    color: var(--gray);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, transform 0.12s ease;
    opacity: 0.95;
}

.footer-links a:hover {
    color: #e6e6e6;
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .site-footer .footer-inner { flex-direction: column; align-items: center; gap: 0.6rem; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
}

/* Ensure the footer bottom row is centered independently */
.footer-bottom .footer-inner.footer-bottom-inner {
    justify-content: center;
    padding: 8px 1.5rem;
}

/* Small tweak: on very wide screens, keep inner grouped but not stretched */
@media (min-width: 1600px) {
    .site-footer .footer-inner { max-width: 1700px; }
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 1200px) {
    .navbar {
        width: calc(100% - 4rem);
    }
    .hero-title {
        font-size: 4rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
    .navbar {
        width: calc(100% - 2rem);
        top: 0.8rem;
        padding: 0.6rem 1.3rem;
    }
    .logo {
        font-size: 1.1rem;
    }
    .logo i {
        font-size: 1.2rem;
    }
    .nav-links {
        display: none;
    }
    .hero {
        padding: 7rem 0 4rem;
    }
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-description {
        font-size: 1.05rem;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    .btn-login,
    .btn-get-started {
        text-align: center;
        width: 100%;
    }
    .users-showcase {
        padding: 4rem 0;
    }
    .users-avatars {
        animation: scrollLeft 6s linear infinite;
        gap: 1.2rem;
    }
    .user-card {
        min-width: 150px;
        max-width: 170px;
        padding: 0.75rem 1.2rem;
    }
    .user-card:hover {
        transform: translateY(-1px);
    }
    .user-avatar {
        width: 50px;
        height: 50px;
    }
    .user-name {
        font-size: 0.9rem;
    }
    .user-handle {
        font-size: 0.75rem;
    }
    .users-showcase::before,
    .users-showcase::after {
        width: 100px;
    }
}

.info-tile {
    background: rgba(88, 101, 242, 0.15); /* delikatny niebieski półprzezroczysty */
    color: var(--light);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    margin: 2rem auto 3rem;
    max-width: 600px;
    border-radius: 1.2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

/* ========== STATS SECTION ========== */
.stats-section {
    margin: 2.5rem 0 1.5rem;
}

/* Simple full-width divider used to separate big page sections */
.section-divider {
    width: 100%;
    height: 1px;
    margin: 3rem 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    opacity: 0.9;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 1.2rem 1.4rem;
    border-radius: 1rem;
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.stat-icon {
    font-size: 1.6rem;
    color: var(--primary-blue);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(88,101,242,0.08);
    border-radius: 10px;
}

.stat-body {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--light);
}

.stat-label {
    color: var(--gray);
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stat-card { padding: 1rem; }
}

/* Community section styling (hero below) */
.community-section {
    margin: 4.5rem 0 3rem;
}

.community-inner {
    display: flex;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.community-left {
    width: 48px;
    display: flex;
    align-items: stretch;
}

.vertical-bar {
    width: 6px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(255,255,255,0.06);
    margin-left: 0.5rem;
    height: 140px;
}

.community-body {
    flex: 1;
}

.community-title {
    font-size: 2.1rem;
    font-weight: 900;
    margin-bottom: 0.6rem;
}

.emoji { margin-left: 0.6rem; }

.community-sub {
    color: var(--gray);
    max-width: 980px;
    margin-bottom: 1.6rem;
}

.community-stats-row {
    display: flex;
    gap: 4.5rem;
    align-items: flex-end;
}

.community-stat {
    display: flex;
    flex-direction: column;
}

.community-stat .stat-label {
    color: var(--gray);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.community-stat.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 240px;
    height: 140px;
    padding: 1.1rem 1.6rem;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}

.community-stat.stat-card .stat-label {
    color: var(--gray);
    font-weight: 700;
    font-size: 0.95rem;
}

.community-stat.stat-card .stat-number {
    position: relative;
    font-size: 3.4rem;
    font-weight: 900;
    color: var(--light);
    letter-spacing: -0.03em;
    text-shadow: 0 8px 28px rgba(88,101,242,0.12);
    padding-left: 70px; /* space for the left dash bar */
    line-height: 1;
}

/* left dash bar (visual) before the number */
.community-stat.stat-card .stat-number::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 8px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(255,255,255,0.06);
}

/* entrance */
.community-stat.stat-card .stat-number { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.community-section.loaded .community-stat.stat-card .stat-number { opacity: 1; transform: translateY(0); }

/* center the stats row and make equal-width cards */
.community-stats-row {
    display: flex;
    gap: 2.4rem;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.community-stat.stat-card { flex: 1 1 260px; max-width: 360px; }

/* tweak label alignment */
.community-stat .stat-label {
    color: var(--gray);
    font-weight: 700;
    font-size: 0.95rem;
    margin-left: 6px;
}

@media (max-width: 960px) {
    .community-stats-row { gap: 1rem; }
    .community-stat.stat-card { min-width: 200px; height: 120px; }
    .community-stat.stat-card .stat-number { font-size: 2.6rem; padding-left: 56px; }
    .community-stat.stat-card .stat-number::before { width: 44px; }
}

@media (max-width: 560px) {
    .community-stats-row { flex-direction: column; gap: 1rem; }
    .community-stat.stat-card { width: 100%; max-width: none; }
}

/* Claim tile styles: make CTA a prominent tile */
.claim-section {
    max-width: 1200px;
    margin: 3.2rem auto 4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 1.6rem 1.6rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

.claim-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.claim-text h3 { margin: 0 0 0.2rem 0; font-size: 1.05rem; }
.claim-text p { margin: 0; color: var(--gray); }

.btn-claim {
    display: inline-block;
    /* use a slightly larger gradient area so we can animate background-position */
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: white;
    padding: 0.9rem 1.2rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(88,101,242,0.25);
    will-change: transform, box-shadow, background-position;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1),
                box-shadow 220ms ease,
                background-position 350ms ease;
}

.btn-claim:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 44px rgba(88,101,242,0.32);
    background-position: 100% 50%;
}

.btn-claim:active { transform: translateY(-2px) scale(0.998); }
.btn-claim:focus-visible { outline: 3px solid rgba(88,101,242,0.14); outline-offset: 3px; }

@media (max-width: 860px) {
    .community-inner { flex-direction: column; align-items: flex-start; }
    .community-stats-row { gap: 2.2rem; }
    .claim-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
    .community-inner { gap: 1rem; }
    .vertical-bar { height: 110px; }
    .community-title { font-size: 1.7rem; }
    .community-stats-row { gap: 1.2rem; }
}

@media (max-width: 560px) {
    .community-inner { flex-direction: column; align-items: flex-start; }
    .community-left { width: 100%; }
    .vertical-bar { height: 8px; width: 80px; border-radius: 4px; margin-left: 0; }
    .community-stats-row { width: 100%; justify-content: space-between; }
}

/* ========== FEATURE TILES ========== */
.features-section {
    margin: 2.5rem 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto 1.5rem;
}

.feature-tile {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 1.2rem;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-color: rgba(88,101,242,0.12);
}

.feature-icon {
    font-size: 1.4rem;
    color: var(--primary-blue);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(88,101,242,0.06);
    border-radius: 8px;
}

.feature-title {
    font-weight: 800;
    color: var(--light);
}

.feature-desc {
    color: var(--gray);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

/* FREE badge */
.badge-free {
    display: inline-block;
    background: linear-gradient(90deg, #6ee7b7, #3b82f6);
    color: #0b0b0b;
    font-weight: 800;
    font-size: 0.65rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.6rem;
    vertical-align: middle;
    box-shadow: 0 6px 18px rgba(59,130,246,0.12);
}

@media (max-width: 960px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .features-grid { grid-template-columns: 1fr; }
}

/* ====== Legal / Docs pages styling ====== */
.doc-page { padding: 36px 0; }
.doc-page .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.03);
    color: var(--light);
    text-decoration: none;
    transition: transform .18s ease, background .12s ease;
}
.doc-page .btn-back:hover { transform: translateY(-3px); background: rgba(255,255,255,0.03); }

.doc-header { text-align: center; margin: 18px 0 22px; }
.doc-title { font-size: 2.6rem; font-weight: 900; color: var(--light); margin: 0; }
.doc-sub { color: var(--gray); margin-top: 8px; font-size: 1rem; }

.doc-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 26px 26px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    color: var(--gray);
}
.doc-card { position: relative; }
.doc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    background: linear-gradient(180deg, rgba(88,101,242,0.20), rgba(88,101,242,0.06));
}
.doc-card { padding-left: 34px; }
.doc-card h2 { color: var(--primary-blue); font-size: 1.25rem; margin-top: 0; }
.doc-card h3 { color: #dfe7ff; margin-top: 14px; font-size: 1.02rem; }
.doc-card p { color: #c8ced6; line-height: 1.7; margin-bottom: 0.9rem; }
.doc-card ul { margin-left: 1.2rem; color: #c8ced6; }
.doc-card li { margin-bottom: 0.45rem; }

@media (max-width: 880px) {
    .doc-title { font-size: 1.9rem; }
    .doc-card { padding: 20px; }
}

/* Helper to hide the browser scrollbar while preserving scroll behavior
   Note: target `html.hide-scroll` and `body.hide-scroll` explicitly so the
   rule applies when the class is added to the document root. */
html.hide-scroll, body.hide-scroll, .hide-scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
html.hide-scroll::-webkit-scrollbar, body.hide-scroll::-webkit-scrollbar, .hide-scroll::-webkit-scrollbar {
    width: 0; height: 0; background: transparent; /* Chrome, Safari, Opera */
}


/* Larger footer styles (two-row, more prominent) */
.site-footer.large-footer { background: linear-gradient(180deg, #040404, #060606); border-top: 1px solid rgba(255,255,255,0.02); }
.site-footer.large-footer .footer-top { padding: 12px 0; }
.site-footer.large-footer .footer-bottom { padding: 6px 0; background: rgba(0,0,0,0.25); border-top: 1px solid rgba(255,255,255,0.01); }
.site-footer.large-footer .footer-inner { max-width: none; width: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; }

.footer-brand-wrap { display: flex; align-items: center; gap: 0.8rem; }
.footer-left { margin: 0 0.6rem; }
.footer-center { margin: 0 0.6rem; }
.footer-brand { color: var(--primary-blue); font-size: 1.05rem; display:inline-flex; align-items:center; justify-content:center; }
.footer-copy { color: var(--gray); font-size: 0.95rem; }

.footer-center { flex: 0 0 auto; display:flex; justify-content:center; }
.footer-right { display:none; }

.footer-links { display:flex; gap: 1.6rem; align-items:center; }
.footer-links a { color: var(--gray); text-decoration:none; font-size:0.95rem; opacity:0.95; padding:6px 8px; border-radius:6px; }
.footer-links a:hover { color:#ffffff; transform:translateY(-2px); }

.footer-socials .social-link { color: var(--gray); font-size:1.05rem; text-decoration:none; padding:6px; border-radius:8px; }
.footer-socials .social-link:hover { color: #e6e6e6; transform:translateY(-2px); }

.footer-bottom-inner { justify-content: center; align-items:center; }
.footer-bottom .small-copy { color: var(--gray); font-size:0.9rem; }
.footer-bottom .legal-links { color: rgba(200,200,200,0.65); font-size:0.85rem; }

@media (max-width: 860px) {
    .site-footer.large-footer .footer-inner { flex-direction: column; text-align:center; gap: 0.6rem; }
    .footer-center { justify-content: center; }
    .footer-bottom-inner { flex-direction: column; gap: 4px; }
}