html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 80px);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

:root {
    --klar-primary: #5586D6;
    --klar-darker: #2c4a8a;
    --klar-light: #73a1e8;
    --background-dark: #121212;
    --background-light: #1E1E1E;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --border-color: #374151;
    --header-bg: rgba(18, 18, 18, 0.7);
    --card-bg: rgba(30, 30, 30, 0.4);
    --modal-card-bg: #1F2937;
    --button-secondary-bg: #374151;
    --button-secondary-hover-bg: #4B5563;
    --button-secondary-text: #F9FAFB;
    --aurora-opacity: 0.1;
}

body.light {
    --background-dark: #F9FAFB;
    --background-light: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #374151;
    --border-color: #E5E7EB;
    --header-bg: rgba(249, 250, 251, 0.8);
    --card-bg: rgba(255, 255, 255, 0.8);
    --modal-card-bg: #FFFFFF;
    --button-secondary-bg: #E5E7EB;
    --button-secondary-hover-bg: #D1D5DB;
    --button-secondary-text: #111827;
    --aurora-opacity: 0.05;
}

.bg-theme-dark { background-color: var(--background-dark); }
.bg-theme-light { background-color: var(--background-light); }
.bg-theme-header { background-color: var(--header-bg); }
.bg-theme-card { background-color: var(--card-bg); }
.bg-theme-modal-card { background-color: var(--modal-card-bg); }
.bg-theme-button-secondary { background-color: var(--button-secondary-bg); }
.hover\:bg-theme-button-secondary-hover:hover { background-color: var(--button-secondary-hover-bg); }
.text-theme-primary { color: var(--text-primary); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-button-secondary-text { color: var(--text-secondary); }
input.text-theme-primary,
textarea.text-theme-primary { color: var(--text-primary) !important; }
.placeholder-theme-secondary::placeholder { color: var(--text-secondary); opacity: 1; }
.border-theme { border-color: var(--border-color); }
.fill-theme-primary { fill: var(--text-primary); }
.stroke-theme-primary { stroke: var(--text-primary); }
.bg-klar { background-color: var(--klar-primary); }
.hover\:bg-klar-light:hover { background-color: var(--klar-light); }
.text-klar { color: var(--klar-primary); }
.border-klar { border-color: var(--klar-primary); }
.shadow-klar { box-shadow: 0 4px 14px 0 rgba(85, 134, 214, 0.3); }
.focus\:ring-klar:focus { --tw-ring-color: var(--klar-primary); }
.nav-active { color: var(--klar-primary) !important; font-weight: 700; }
.fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }
.interactive-card { position: relative; transition: box-shadow 0.3s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-style: preserve-3d; will-change: transform; }
.interactive-card.featured-card-js { transform: scale(1.1); }
.interactive-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 20px rgba(85, 134, 214, 0.2); }
.interactive-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.5rem; border: 1px solid transparent; background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(85, 134, 214, 0.15), transparent 40%) border-box; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.interactive-card:hover::before { opacity: 1; }
.faq-item { transition: transform 0.3s ease, border-color 0.3s ease; }
.faq-item:hover { transform: scale(1.02); border-color: var(--klar-primary); }
.reviews-expandable { transition: max-height 0.5s ease-out, opacity 0.5s ease-out; overflow: hidden; max-height: 0; opacity: 0; }
.reviews-expandable.is-expanded { max-height: 2000px; opacity: 1; }
.slider-thumb { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.slider-thumb.dragging, .slider-thumb:active { transform: scale(1.2); box-shadow: 0 0 10px var(--klar-primary); cursor: grabbing; }
.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-arrows { -moz-appearance: textfield; }
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--background-dark); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
#preloader.loaded { opacity: 0; pointer-events: none; }
.spinner { width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.2); border-top-color: var(--klar-primary); border-radius: 50%; animation: spin 1s linear infinite; }
.aurora-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; }
.aurora-spot { position: absolute; background-image: radial-gradient(circle, var(--klar-primary) 0%, transparent 60%); border-radius: 50%; filter: blur(100px); will-change: transform; pointer-events: none; transition: transform 0.5s ease-out; opacity: var(--aurora-opacity); }
.action-button-wrapper { animation: button-pop-in 1s 1s forwards cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: scale(0.5); }
.initial-tooltip { animation: tooltip-fade 7s 1.5s forwards ease-in-out; opacity: 0; }
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.header-scrolled { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.toast-notification { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); padding: 1rem 2rem; border-radius: 0.5rem; background-color: var(--klar-primary); color: white; font-weight: 600; z-index: 10000; box-shadow: 0 10px 20px rgba(0,0,0,0.2); animation: toast-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, toast-out 0.5s 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.hero-button, .get-key-button { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hero-button:hover, .get-key-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(85, 134, 214, 0.4); }
.hero-button:active, .get-key-button:active { transform: translateY(0); box-shadow: 0 4px 14px 0 rgba(85, 134, 214, 0.3); }
.glowing-letter { display: inline-block; transition: transform 0.2s ease-in-out, text-shadow 0.2s ease-in-out; }
.glowing-letter:hover { transform: scale(1.15) translateY(-2px); text-shadow: 0 0 10px var(--text-primary); }
.glowing-letter.text-klar:hover { text-shadow: 0 0 10px var(--klar-primary), 0 0 20px var(--klar-primary); }
.marquee { overflow: hidden; position: relative; width: 100%; padding: 2rem 0; -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); }
.marquee-content { display: flex; width: max-content; animation: scroll 40s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1024px) { .marquee-content { animation-duration: 30s; } }
@media (max-width: 768px) { .marquee-content { animation-duration: 20s; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(20px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes button-pop-in { to { opacity: 1; transform: scale(1); } }
@keyframes tooltip-fade { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; transform: translateY(-0.5rem); } 80% { opacity: 1; transform: translateY(-0.5rem); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes hub-content-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hub-content-inner { animation: hub-content-fade-in 0.3s ease-out forwards; }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: var(--background-dark, #121212); }
body::-webkit-scrollbar-thumb { background-color: var(--klar-primary, #5586D6); border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background-color: var(--klar-light, #73a1e8); }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px;}
.custom-scrollbar::-webkit-scrollbar-track { background: #111111; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #4f4f4f; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #6f6f6f; }
#snow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: hidden; }
.snowflake { position: absolute; top: -10px; background-color: white; border-radius: 50%; opacity: 0.8; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(105vh); } }