/* Soloety · modern academic design system */

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: #0F172A;
    background-color: #F8FAFC;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-display { font-family: 'Fraunces', Georgia, serif; }

.card-solid {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.03);
    transition: all .25s ease;
}
.card-solid:hover {
    box-shadow: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.03);
    transform: translateY(-3px);
    border-color: #CBD5E1;
}

.header-glass {
    background: rgba(248,250,252,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #E2E8F0;
}

.btn-primary {
    background: #0F172A;
    color: #fff;
    box-shadow: 0 4px 0 #020617;
    transition: all .15s ease;
}
.btn-primary:hover { transform: translateY(1px); box-shadow: 0 3px 0 #020617; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #020617; }

.btn-brand {
    background: #0D9488;
    color: #fff;
    box-shadow: 0 4px 0 #0F766E;
    transition: all .15s ease;
}
.btn-brand:hover { transform: translateY(1px); box-shadow: 0 3px 0 #0F766E; }
.btn-brand:active { transform: translateY(3px); box-shadow: 0 1px 0 #0F766E; }

.btn-accent {
    background: #F59E0B;
    color: #0F172A;
    box-shadow: 0 4px 0 #B45309;
    transition: all .15s ease;
}
.btn-accent:hover { transform: translateY(1px); box-shadow: 0 3px 0 #B45309; }
.btn-accent:active { transform: translateY(3px); box-shadow: 0 1px 0 #B45309; }

.btn-soft {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #0F172A;
    box-shadow: 0 3px 0 #E2E8F0;
    transition: all .15s ease;
}
.btn-soft:hover { transform: translateY(1px); box-shadow: 0 2px 0 #E2E8F0; }

.lang-chip {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 0 #E2E8F0;
    transition: all .15s ease;
}
.lang-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 0 #CBD5E1; border-color: #CBD5E1; }

.badge-live { background: #CCFBF1; color: #0F766E; border: 1px solid #99F6E4; }
.badge-lessons { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.badge-video { background: #E0E7FF; color: #4338CA; border: 1px solid #C7D2FE; }
.badge-tests { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }

@keyframes softPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}
.lang-live { animation: softPulse 3.5s ease-in-out infinite; }

.line-clamp-6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 640px) {
    .sm\\:line-clamp-none {
        display: block;
        -webkit-line-clamp: unset;
    }
}

.mobile-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mobile-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 639px) {
    .mobile-scroll {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .75rem;
    }
    .mobile-scroll > * {
        flex: 0 0 85vw;
        max-width: 320px;
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {
    body { padding-bottom: 72px; }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.vis {
    opacity: 1;
    transform: none;
}
/* Fallback: if JS fails or observer misses, still show content */
@keyframes revealFallback {
    to { opacity: 1; transform: none; }
}
.reveal:not(.vis) {
    animation: revealFallback .6s ease 1.2s forwards;
}

.hand { font-family: 'Caveat', cursive; }
.hl-marker { background: linear-gradient(transparent 62%, rgba(245,158,11,.42) 62%); }

.note-accent {
    font-family: 'Caveat', cursive;
    color: #B45309;
    transform: rotate(-3deg);
    display: inline-block;
}
.note-accent.right { transform: rotate(3deg); }

.section-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, #CBD5E1 20%, #CBD5E1 80%, transparent);
}

.gradient-mesh {
    background:
        radial-gradient(circle at 15% 20%, rgba(20,184,166,.10) 0%, transparent 35%),
        radial-gradient(circle at 85% 30%, rgba(245,158,11,.08) 0%, transparent 30%),
        radial-gradient(circle at 50% 90%, rgba(13,148,136,.06) 0%, transparent 40%);
}

.notebook-mock {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.04);
    overflow: hidden;
}
.mock-header {
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.chat-bubble { border-radius: 18px; padding: 14px 18px; }

.hero-dots {
    background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .35;
}

.stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    transition: all .2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15,23,42,.08);
    border-color: #CBD5E1;
}

.text-balance { text-wrap: balance; }

@media (max-width: 640px) {
    .card-solid:hover { transform: translateY(-2px); }
    .hero-dots { background-size: 18px 18px; }
}