/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Cleaner, Premium Palette */
    --primary-color: #0f172a;
    /* Deep Midnight Blue */
    --secondary-color: #3b82f6;
    /* Vibrant Blue */
    --accent-color: #8b5cf6;
    /* Purple Accent */
    --text-color: #334155;
    /* Slate 700 */
    --light-bg: #f8fafc;
    /* Slate 50 */
    --white: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.8);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --radius: 16px;
}

body {
    font-family: 'Outfit', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header Styles covering Glassmorphism */
header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo {
    height: 40px;
    /* Smaller logo for sticky header if we had one separate, but reusing class for now */
    width: auto;
}

/* Initial large logo in header if that's what was there, 
   but user asked for "Main logo bigger" in Hero usually. 
   Propagating existing structure: The Header HAD the main logo. 
   Let's keep the header logo moderate and put a BIG logo in the Hero if implied, 
   OR just make the header logo the main attraction if there is no separate hero image.
   
   Looking at original HTML: The logo was in the <header>.
   The User said "I'd like the main logo bigger".
   
   Let's make the Logo in the header quite large again as it serves as the main branding,
   OR move it to the Hero.
   
   The original design had a logo in the header and text in the hero.
   Let's move the Main Logo to the Hero for that "Bigger" impact and keep the Header subtle or just contain navigation eventually.
   
   Actually, let's keep the structure simple:
   Header currently only contains the Logo. 
   Let's Style it to be the "Hero" area basically if we want it huge.
   
   But user said "Hero: Larger Logo". 
   Let's move the Logo IMG to the Hero Section to allow it to be huge and central.
*/

/* Hero Section */
.hero {
    padding: 100px 0 20px;
    /* Reduced bottom padding */
    text-align: center;
    background: radial-gradient(circle at center, #fff 0%, var(--light-bg) 100%);
}

.hero-logo {
    max-width: 800px;
    /* Requested: Bigger */
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    /* Reduced margin */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    transition: transform 0.5s ease;
}

.hero-logo:hover {
    transform: scale(1.02);
}

.hero h1 {
    /* Reduced per user request */
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tagline {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
    font-weight: 500;
}

.intro {
    font-size: 1.25rem;
    color: var(--text-color);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    opacity: 0.9;
}

/* Apps Section */
.apps {
    padding: 20px 0 100px;
    /* Reduced top padding */
    background-color: var(--white);
}

.apps h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}

.app-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

/* Horizontal Card Layout */
.app-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: flex;
    /* Horizontal Layout */
    align-items: flex-start;
    gap: 30px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary-color);
}

.app-icon-wrapper {
    flex-shrink: 0;
    width: 100px;
    /* Small logo */
    height: 100px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon {
    width: 100%;
    height: 100%;
    /* Show full image */
    object-fit: contain;
}

.app-content {
    flex: 1;
    text-align: left;
    /* Text to one side */
}

.app-content h3 {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}

.app-content p {
    color: var(--text-color);
    margin-bottom: 20px;
    line-height: 1.7;
}

.app-links {
    display: flex;
    gap: 15px;
}

.app-btn {
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-outline {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.btn-outline:hover {
    background: var(--secondary-color);
    color: white;
}

/* About Section */
.about {
    padding: 100px 0;
    background-color: var(--light-bg);
    text-align: center;
}

.about h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.about p {
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-color);
}

/* Footer */
footer {
    background: var(--primary-color);
    color: var(--white);
    padding: 60px 0 30px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.company-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--white);
}

.company-info p {
    opacity: 0.7;
    font-size: 0.95rem;
}

.footer-bottom {
    text-align: center;
    opacity: 0.5;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .app-card {
        flex-direction: column;
        /* Stack on mobile */
        align-items: center;
        text-align: center;
    }

    .app-content {
        text-align: center;
    }

    .app-links {
        justify-content: center;
    }

    .hero-logo {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}