/* assets/css/style.css - Public Page Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

body.dark-theme {
    background-color: #0f172a;
    color: #f8fafc;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.bg-darker { background-color: #0b1120 !important; }
.bg-black { background-color: #020617 !important; }
.text-muted { color: #94a3b8 !important; }
.text-muted-light { color: #cbd5e1; }

.navbar { transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.navbar-nav .nav-link { color: #e2e8f0; font-weight: 500; margin: 0 0.5rem; }
.navbar-nav .nav-link:hover { color: #3b82f6; }

/* Hero Section with Globe-like dark aesthetic */
.hero-section {
    padding-top: 10rem;
    padding-bottom: 8rem;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 70%);
}

.hero-bg-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(15, 23, 42, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.z-index-1 { position: relative; z-index: 1; }

.text-gradient {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-section { padding: 6rem 0; }
.divider { max-width: 3.25rem; border-width: 0.2rem; border-color: #3b82f6; margin: 1.5rem auto; opacity: 1; }

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.feature-icon:hover { transform: translateY(-5px); }

.pricing-card {
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6) !important;
}

.btn-social {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}