@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

body { 
    font-family: 'Inter', sans-serif; 
    transition: background-color 0.3s, color 0.3s; 
}

.glass-nav { 
    backdrop-filter: blur(10px); 
}

.hero-gradient { 
    background: linear-gradient(135deg, rgba(236,91,19,0.1) 0%, rgba(16,185,129,0.05) 100%); 
}

.dark .hero-gradient { 
    background: linear-gradient(135deg, rgba(236,91,19,0.05) 0%, rgba(16,185,129,0.02) 100%); 
}

.mockup-container {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 720px;
    margin: 0 auto;
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 12px solid #1A1C1E;
    background: #fff;
    overflow: hidden;
}

.mockup-notch {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #1A1C1E;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 20;
}

.mockup-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.mockup-content::-webkit-scrollbar {
    display: none;
}

.dark .mockup-container { 
    border-color: #2C323A; 
    background: #0C0F10; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
}
.dark .mockup-notch {
    background: #2C323A;
}

.mockup-container img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.feature-card { 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.feature-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

.dark .feature-card:hover { 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Custom Animations for UI Elements */
.circle-progress {
    stroke-dasharray: 351.858;
    stroke-dashoffset: 351.858;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .circle-progress {
    stroke-dashoffset: 70.37;
}