/* --- Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* --- Preloader --- */
#preloader {
    transition: opacity 0.5s, visibility 0.5s;
}
.math-loader {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #10b981);
    border-radius: 4px;
}

/* --- Gradient Text --- */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Floating Shapes --- */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    animation: float 6s ease-in-out infinite;
}
.shape-1 { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
.shape-2 { width: 120px; height: 120px; top: 60%; right: 10%; animation-delay: 2s; }
.shape-3 { width: 60px; height: 60px; bottom: 20%; left: 30%; animation-delay: 4s; }
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* --- Hero Section --- */
.hero-section {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}
.hero-title { font-size: 4rem; color: #fff; font-weight: bold; margin-bottom: 1.5rem; }
.hero-subtitle { font-size: 1.5rem; color: rgba(255,255,255,0.9); margin-bottom: 2rem; }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Buttons --- */
.interactive-btn {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.interactive-btn.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59,130,246,0.4);
}
.interactive-btn.secondary {
    background: linear-gradient(135deg, #939496, #191b1f);
    color: #fff;
    /* border: 2px solid rgba(255,255,255,0.3); */
    box-shadow: 0 4px 15px rgba(59,130,246,0.4);
}
.interactive-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.btn-icon, .btn-emoji { transition: transform 0.3s ease; }
.interactive-btn:hover .btn-icon { transform: translateX(5px); }
.interactive-btn:hover .btn-emoji { transform: scale(1.2) rotate(15deg); }

/* --- Scroll Indicator --- */
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-10px) translateX(-50%); }
    60% { transform: translateY(-5px) translateX(-50%); }
}
.mouse-scroll { width: 30px; height: 50px; border: 2px solid white; border-radius: 25px; position: relative; }
.mouse-wheel { width: 4px; height: 8px; background: white; border-radius: 2px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); animation: scroll 2s infinite; }
@keyframes scroll { 0% { opacity:1; top:8px; } 100% { opacity:0; top:30px; } }

/* --- About App Section --- */
.about-app { padding: 6rem 2rem; background-color: #f9f9f9; text-align: center; }
.about-app .container { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; }
.about-app img { width: 100%; max-width: 500px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.about-app h3 { font-size: 2rem; font-weight: bold; margin-bottom: 1rem; }
.about-app p { font-size: 1rem; color: #666; margin-bottom: 1.5rem; line-height: 1.6; }
.about-app ul { list-style: none; padding-left: 0; }
.about-app li { margin-bottom: 0.5rem; font-size: 1rem; color: #444; }

/* --- Features Section --- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-card { background: #fff; border-radius: 20px; padding: 2rem; position: relative; cursor: pointer; transition: all 0.3s ease; overflow: hidden; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.card-glow { position: absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 70%); opacity:0; transition: opacity 0.3s ease; }
.feature-card:hover .card-glow { opacity:1; }
.card-shine { position: absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s ease; }
.feature-card:hover .card-shine { left:100%; }
.card-icon { width: 80px; height: 80px; background: linear-gradient(135deg,#3b82f6,#10b981); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: transform 0.3s ease; }
.feature-card:hover .card-icon { transform: rotate(360deg) scale(1.1); }

/* --- Stats Section --- */
.stats-section { padding: 4rem 2rem; }
.stats-section .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; text-align: center; }
.counter { font-size: 2rem; font-weight: bold; color: #fff; }

/* --- Quick Access Cards --- */
.quick-access-card { display: block; border-radius: 20px; overflow: hidden; transition: all 0.3s ease; text-decoration: none; color: inherit; }
.card-content { position: relative; padding: 3rem 2rem; text-align: center; background: #fff; border-radius: 20px; transition: all 0.3s ease; }
.quick-access-card:hover .card-content { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.card-bg { position: absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(135deg,#3b82f6,#10b981); opacity:0; transition: opacity 0.3s ease; z-index:0; }
.quick-access-card:hover .card-bg { opacity:0.1; }

/* --- Navbar --- */
#navbar.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.nav-link { position: relative; transition: all 0.3s ease; }
.nav-link::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background: linear-gradient(to right,#3b82f6,#10b981); transition: width 0.3s ease; }
.nav-link:hover::after { width:100%; }

/* --- Responsive --- */
/* Tablet */
@media (max-width: 992px) {
    .hero-title { font-size: 3rem; }
    .hero-subtitle { font-size: 1.3rem; }
    .features-grid { grid-template-columns: 1fr 1fr; gap:1.5rem; }
    .stats-section .grid { grid-template-columns: 1fr 1fr; gap:1.5rem; }
    .about-app .container { flex-direction: column; text-align: center; gap:2rem; }
}
/* Mobile */
@media (max-width: 576px) {
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-buttons { flex-direction: column; gap:10px; }
    .features-grid, .quick-access-card { grid-template-columns: 1fr !important; }
    .stats-section .grid { grid-template-columns: 1fr !important; }
    .about-app h3 { font-size: 1.5rem; }
    .about-app p, .about-app li { font-size: 0.9rem; }
    .about-app img { width: 100%; height: auto; }
}

/* Hamburger */
.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background-color: white;
    position: relative;
    transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

.hamburger.active {
    background-color: transparent;
}

.hamburger.active::before {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active::after {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu animation */
#mobile-menu {
    transform-origin: top;
    transition: transform 0.3s ease;
}