html {
    scroll-behavior: smooth;
}

#about,
#features,
#pricing,
#blog,
#contact {
    scroll-margin-top: 6.5rem;
}

.landing-shell {
    background: #f6f8fc;
    color: #10233e;
}

.landing-glass {
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .88);
    box-shadow: 0 18px 45px rgba(24, 55, 95, .08);
    backdrop-filter: blur(18px);
}

.landing-photo {
    background-position: center;
    background-size: cover;
}

.landing-grid {
    background-image: linear-gradient(rgba(33, 81, 151, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 81, 151, .055) 1px, transparent 1px);
    background-size: 34px 34px;
}

.landing-notebook {
    background-color: #020617;
    background-image: linear-gradient(rgba(148, 163, 184, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .12) 1px, transparent 1px), linear-gradient(135deg, #020617, #172554);
    background-size: 34px 34px, 34px 34px, auto;
}

#about,
#pricing {
    padding-block: 4rem;
}

#features {
    padding-block: 2rem;
}

#features .landing-glass > span {
    background: #eff6ff;
    color: #2563eb;
    float: left;
    margin-right: 1rem;
}

#features .landing-glass h3 {
    color: #0f172a;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    margin-top: 0;
}

#features .landing-glass p {
    color: #475569;
    clear: both;
    margin-top: 1rem;
}

.dashboard-preview,
.dashboard-preview * {
    transition: background-color .7s ease, border-color .7s ease, color .7s ease, box-shadow .7s ease;
}

.dashboard-preview.dashboard-light {
    background: #f8fafc;
    color: #0f172a;
}

.dashboard-preview.dashboard-light.dashboard-learning-panel {
    background: #f8fafc;
}

.dashboard-preview.dashboard-light.dashboard-player-panel {
    background: #f8fafc;
}

.dashboard-preview.dashboard-light.dashboard-learning-panel > .absolute {
    opacity: .08;
}

.dashboard-preview.dashboard-light .player-stage {
    background: #eff6ff;
}

.dashboard-preview.dashboard-light .player-stage .player-backdrop {
    background: radial-gradient(circle at 70% 20%, rgba(96, 165, 250, .28), transparent 36%), linear-gradient(135deg, #f8fafc, #dbeafe);
}

.dashboard-preview.dashboard-light .player-track {
    background: #cbd5e1;
}

.dashboard-preview.dashboard-light .dashboard-surface,
.dashboard-preview.dashboard-light .dashboard-task {
    background: rgba(255, 255, 255, .88);
    border-color: #e2e8f0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.dashboard-preview.dashboard-light .dashboard-ring-inner {
    background: #f8fafc;
}

.dashboard-preview.dashboard-light .dashboard-bar-bg {
    background: #e2e8f0;
}

.dashboard-preview.dashboard-light .text-white {
    color: #0f172a;
}

.dashboard-preview.dashboard-light .text-slate-300,
.dashboard-preview.dashboard-light .text-slate-200,
.dashboard-preview.dashboard-light .text-slate-400 {
    color: #64748b;
}

.dashboard-preview.dashboard-light .text-blue-100,
.dashboard-preview.dashboard-light .text-blue-200,
.dashboard-preview.dashboard-light .text-blue-300 {
    color: #2563eb;
}

@keyframes ai-generate-spin {
    to { transform: rotate(360deg); }
}

.ai-generate-spinner {
    animation: ai-generate-spin 1.1s linear infinite;
}

#contact {
    padding-bottom: 4rem;
}

.faq-chevron-up {
    display: none;
}

details[open] .faq-chevron-down {
    display: none;
}

details[open] .faq-chevron-up {
    display: block;
}

@keyframes landing-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: no-preference) {
    .landing-float { animation: landing-float 5s ease-in-out infinite; }
    .landing-scroll-down { animation: landing-scroll-down 1.8s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
    .wow { visibility: visible !important; animation: none !important; }
}

@keyframes landing-scroll-down {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .65; }
    50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

@keyframes landing-review-enter {
    from { transform: translateX(-115%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .landing-review-card { animation: landing-review-enter .7s cubic-bezier(.22, 1, .36, 1) both; }
}

@keyframes player-canvas-card {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(10px, -7px, 0); }
}

@keyframes player-canvas-line {
    0%, 100% { transform: scaleX(.7); opacity: .3; }
    50% { transform: scaleX(1); opacity: .9; }
}

@keyframes player-canvas-cursor {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(24px, -16px, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .player-is-playing .player-canvas-card { animation: player-canvas-card 3s ease-in-out infinite; }
    .player-is-playing .player-canvas-card:nth-child(2) { animation-delay: -1.4s; }
    .player-is-playing .player-canvas-line { animation: player-canvas-line 2s ease-in-out infinite; transform-origin: left; }
    .player-is-playing .player-canvas-cursor { animation: player-canvas-cursor 3.5s ease-in-out infinite; }
}