:root {
    --navy: #0a192f;
    --black: #000000;
    --purple: #bc13fe;
    --white: #ffffff;
    --slate: #475569;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--white);
}

/* --- LOGO: TOTAL HOVER REMOVAL --- */
.logo-link-static { 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    color: white !important; 
    transition: none !important; /* Kills the purple flash */
}
.logo-link-static:hover { 
    color: white !important; 
    opacity: 1 !important;
}

/* --- BLACK NAVBAR --- */
header.black-nav { 
    background-color: var(--black); 
    padding: 1.2rem 8%; 
    position: sticky; top: 0; z-index: 1000;
}
nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo { height: 38px; }
.brand-name { font-weight: 800; font-size: 1.2rem; margin-left: 10px; }

.nav-links-container { flex: 1; display: flex; justify-content: flex-end; padding-left: 10%; }
nav ul { display: flex; list-style: none; align-items: center; width: 100%; justify-content: flex-end; }
nav a { color: white; text-decoration: none; font-size: 0.9rem; margin-left: 40px; opacity: 0.8; transition: 0.2s; font-weight: 500; }
nav a:hover { opacity: 1; color: var(--purple); }

.btn-login { border: 1px solid rgba(188, 19, 254, 0.8); padding: 8px 20px; border-radius: 6px; opacity: 1 !important; }

/* --- HERO --- */
#hero.navy-hero { background-color: var(--navy); color: white; padding: 80px 10% 100px 10%; min-height: 60vh; }
.hero-flex-container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-left { flex: 1.2; }
.hero-right { flex: 0.8; display: flex; justify-content: flex-end; }
.badge-large { border: 1px solid var(--purple); color: var(--purple); padding: 12px 24px; border-radius: 50px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
h1 { font-size: 3.8rem; line-height: 1.05; margin-bottom: 2rem; letter-spacing: -2px; }
.highlight { color: var(--purple); }
.subtitle { font-size: 1.3rem; opacity: 0.7; max-width: 550px; margin-bottom: 3rem; }
.btn-primary { background: var(--purple); color: white; padding: 1.1rem 2.2rem; text-decoration: none; border-radius: 8px; font-weight: 700; display: inline-block; transition: 0.3s; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(188, 19, 254, 0.3); }

/* --- CONTENT SECTIONS --- */
.light-section-wrapper { background-color: var(--white); color: var(--navy); padding: 0 10%; }
.content-section { padding: 80px 0; }

/* Handled spacing after subtitle removal */
.section-header h2 { 
    font-size: 2.5rem; 
    letter-spacing: -1px; 
    margin-bottom: 3.5rem; /* This creates the gap where the text used to be */
}

/* APPS GRID */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.navy-card { background: var(--navy) !important; color: white !important; border: none !important; }
.bento-item { border-radius: 28px; padding: 3.5rem; transition: var(--transition); }
.bento-item h3 { font-size: 1.6rem; margin: 1.2rem 0; color: inherit; }
.bento-item p { opacity: 0.8; line-height: 1.6; font-size: 1rem; }
.status-pill-light { display: inline-block; margin-top: 2rem; font-size: 0.7rem; font-weight: 800; color: var(--purple); border: 1px solid var(--purple); padding: 5px 12px; border-radius: 4px; text-transform: uppercase; }

/* --- FOOTER --- */
.dark-footer { background-color: var(--black); color: white; padding: 50px 10%; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-container { display: flex; justify-content: space-between; align-items: center; }
.footer-legal { margin-top: 15px; }
.footer-legal a { color: white; opacity: 0.5; text-decoration: none; font-size: 0.8rem; margin-right: 20px; }
.social-links { display: flex; gap: 25px; }
.social-icon { color: white; text-decoration: none; font-size: 0.85rem; font-weight: 600; opacity: 0.7; transition: 0.3s; }
.social-icon:hover { opacity: 1; color: var(--purple); }