/* ============================================
   GLOBAL STYLES & RESET
   Base styles using Manrope font
   ============================================ */

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

body {
    font-family: 'Manrope', sans-serif;
    background-color: #000000; /* Black background as per design */
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Container for consistent width */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
}

/* ============================================
   NAVIGATION BAR STYLES
   Sticky with blur effect
   ============================================ */

.navbar {
    position: fixed; /* Sticky header */
    top: 20px; /* Slight offset from top */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1160px;
    z-index: 1000;
    
    /* Glassmorphism effect as specified */
    border-radius: 100px;
    background: rgba(23, 23, 23, 0.70);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    padding: 12px 24px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo sizing */
.logo img {
    height: 32px;
    width: auto;
}

/* Navigation links - Desktop only */
.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.nav-links a:hover {
    opacity: 0.8;
}

/* Navigation button */
.nav-button {
    display: inline-flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* ============================================
   HERO SECTION STYLES
   Stars background + Content + Image
   ============================================ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 80px;
    overflow: hidden;
}

/* Rotating Stars Background */
.stars-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stars-background img {
    width: 150%; /* Large size for rotation coverage */
    height: 150%;
    object-fit: cover;
    opacity: 0.6; /* Slightly transparent */
    
    /* Infinite rotation animation */
    animation: rotateStars 120s linear infinite;
}

/* Keyframes for slow rotation */
@keyframes rotateStars {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hero Content Layout */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin-bottom: 60px;
}

/* Small tag above title */
.hero-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(56, 123, 254, 0.1);
    color: #387BFE;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(56, 123, 254, 0.3);
}

/* Main Title - 48px Manrope */
.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Subtitle - 16px Manrope */
.hero-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #A3A3A3; /* Gray color for subtitle */
    margin-bottom: 40px;
    line-height: 1.6;
}

/* GitHub Button Style */
.github-button {
    display: inline-flex;
    padding: 14px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #387BFE;
    box-shadow: 4px 11px 22.8px 0 rgba(0, 0, 0, 0.06);
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* Hover effect with glowing shadow */
/* ============================================
   GITHUB BUTTON - Exact Design Match
   Gradient bg + inner shadow + multi colored drop shadows
   ============================================ */

.github-button {
    display: inline-flex;
    padding: 14px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    /* Pill shape */
    border-radius: 100px;
    border: none;
    
    /* Gradient background - light cyan to blue */
    background: linear-gradient(180deg, #5BA8FF 0%, #387BFE 100%);
    
    /* Inner shadow for 3D depth (inset highlight at top) */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.4),  /* Top inner highlight */
        inset 0 -1px 1px rgba(0, 0, 0, 0.1),       /* Bottom inner shadow */
        0 0 0 1px rgba(56, 123, 254, 0.3),         /* Border/stroke effect */
        0 4px 8px rgba(56, 123, 254, 0.3),         /* First drop shadow */
        0 8px 24px rgba(56, 123, 254, 0.4),        /* Second drop shadow larger */
        0 16px 48px rgba(56, 123, 254, 0.2);       /* Large ambient glow */
    
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover state - Enhanced glow */
.github-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #6BB2FF 0%, #4888FE 100%);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(56, 123, 254, 0.4),
        0 8px 16px rgba(56, 123, 254, 0.4),
        0 12px 32px rgba(56, 123, 254, 0.5),
        0 24px 64px rgba(56, 123, 254, 0.3);
}

/* Active/Click state */
.github-button:active {
    transform: translateY(0);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(56, 123, 254, 0.3);
}

/* Icon styling */
.github-button img.github-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Makes icon white */
}
.github-icon {
    width: 20px;
    height: 20px;
}

/* Hero Image Container */
.hero-image-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   SECTION COMMON STYLES
   Titles and subtitles used across sections
   ============================================ */

.section-title {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
}

.section-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #A3A3A3;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.6;
}

/* ============================================
   FEATURES SECTION STYLES
   5 cards with specific grid layout
   ============================================ */

.features {
    padding: 0px 20px;
    background: #000000;
}

/* Grid layout for feature cards */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Large card spans 2 columns */
.feature-card.large {
    grid-column: span 2;
}

/* Individual card styles */
.feature-card {
    background: #111111; /* Dark gray card bg */
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}



/* Icon container - User provides icon.svg with circle bg */
.feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Card title */
.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

/* Card description */
.feature-card p {
    font-size: 14px;
    color: #888888;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Tags in cards */
.feature-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: #A3A3A3;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Response time text */
.response-time {
    color: #22C55E; /* Green color for positive indicator */
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   HOW IT WORKS SECTION STYLES
   Steps 1, 2, 3 with dark number badges
   ============================================ */

.how-it-works {
    padding: 100px 20px;
    background: #000000;
}

/* GIF placeholder container */
.gif-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 80px;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a; /* Grey bg as placeholder for gif */
}

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

/* Steps grid - 3 columns */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Individual step */
.step-item {
    text-align: center;
}

/* Number badge style - 42px radius, #171717 bg */
.step-number {
    width: 56px; /* 42px radius = 84px diameter */
    height: 56px;
    border-radius: 42px;
    background: #171717;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 auto 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-item h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

.step-item p {
    font-size: 14px;
    color: #888888;
    line-height: 1.6;
}

/* ============================================
   FAQ SECTION STYLES
   Expandable accordion
   ============================================ */

.faq {
    padding: 100px 20px;
    background: #000000;
}

/* FAQ Container centered */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Individual FAQ item */
.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* FAQ Question button */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: 'Manrope', sans-serif;
}

.faq-question:hover {
    color: #387BFE;
}

/* Plus/Minus icon */
.faq-icon {
    font-size: 24px;
    font-weight: 300;
    margin-left: 20px;
    flex-shrink: 0;
}

/* FAQ Answer - hidden by default */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* When active, show answer */
.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust based on content */
    padding-bottom: 24px;
}

.faq-answer p {
    color: #888888;
    font-size: 14px;
    line-height: 1.6;
    padding-right: 40px;
}

/* ============================================
   CTA SECTION - Inner Circular Blue Glow
   ============================================ */

.cta-section {
    padding: 60px 20px 100px;
    background: #000000;
}

/* The card container - position relative for absolute glow */
.cta-card {
    position: relative; /* Needed for absolute positioning of glow */
    background: #111111;
    border-radius: 24px;
    padding: 80px 40px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden; /* Keeps glow inside card */
    
    /* Smooth transition for hover */
    transition: all 0.4s ease;
}

/* INNER GLOW - Bottom center position (like your screenshot) */
.cta-card::before {
    content: '';
    position: absolute;
    bottom: -100px; /* Position at bottom, spilling down */
    left: 50%;
    transform: translateX(-50%) scale(2);
    width: 60%;
    height: 200px;
    border-radius: 50%;
    
    /* Blue radial gradient - center bright, edges fade */
    background: radial-gradient(
        ellipse at center,
        rgba(56, 123, 254, 0.15) 0%,    /* Center blue glow */
        rgba(56, 123, 254, 0.05) 40%,   /* Mid fade */
        transparent 70%                 /* Edges transparent */
    );
    
    pointer-events: none; /* Click through */
    transition: all 0.4s ease;
}

/* Second layer glow for depth */
.cta-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%) scale(1.5);
    width: 40%;
    height: 120px;
    border-radius: 50%;
    
    /* Brighter inner core */
    background: radial-gradient(
        ellipse at center,
        rgba(56, 123, 254, 0.2) 0%,
        transparent 60%
    );
    
    pointer-events: none;
    transition: all 0.4s ease;
}

/* HOVER STATE - Glow intensifies */
.cta-card:hover::before {
    background: radial-gradient(
        ellipse at center,
        rgba(56, 123, 254, 0.35) 0%,    /* Brighter center */
        rgba(56, 123, 254, 0.15) 40%,
        transparent 70%
    );
    transform: translateX(-50%) scale(2.2);
}

.cta-card:hover::after {
    background: radial-gradient(
        ellipse at center,
        rgba(56, 123, 254, 0.4) 0%,     /* Brighter core */
        transparent 60%
    );
    transform: translateX(-50%) scale(1.8);
}

/* Ensure content stays above glow */
.cta-card .section-title,
.cta-card .section-subtitle,
.cta-card .github-button {
    position: relative;
    z-index: 2;
}

/* Override section title styles for CTA card */
.cta-card .section-title {
    margin-bottom: 16px;
}

.cta-card .section-subtitle {
    margin-bottom: 40px;
}
/* Override section title styles for CTA card */
.cta-card .section-title {
    margin-bottom: 16px;
}

.cta-card .section-subtitle {
    margin-bottom: 40px;
}

/* ============================================
   FOOTER STYLES
   Logo, links, and copyright
   ============================================ */

.footer {
    padding: 60px 20px;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    text-align: center;
    margin-bottom: 24px;
}

.footer-logo img {
    height: 32px;
    width: auto;
}

/* Footer links container */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #888888;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

/* Copyright text */
.copyright {
    text-align: center;
    color: #555555;
    font-size: 12px;
}

/* ============================================
   ANIMATION CLASSES
   Slide in effect on scroll
   ============================================ */

.slide-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* When element is visible */
.slide-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE STYLES
   Mobile and Tablet adjustments
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 992px) {
    .hero-title {
        font-size: 36px;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-card.large {
        grid-column: span 2;
    }
    
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Navigation adjustments */
    .nav-links {
        display: none; /* Hidden on mobile as per requirement */
    }
    
    .navbar {
        top: 10px;
        width: calc(100% - 20px);
        padding: 12px 16px;
    }
    
    .hero {
        padding: 100px 16px 60px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 14px;
        margin-bottom: 40px;
    }
    
    /* Features stack on mobile */
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-card.large {
        grid-column: span 1;
    }
    
    /* Steps stack on mobile */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* FAQ text size adjustment */
    .faq-question {
        font-size: 16px;
    }
    
    /* CTA card padding */
    .cta-card {
        padding: 40px 20px;
    }
    
    /* Footer links stack */
    .footer-links {
        gap: 20px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .github-button {
        width: 100%;
        padding: 14px 24px;
    }
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-links a:hover {
    color: #387BFE; /* Blue on hover */
    transform: translateY(-1px); /* Slight lift */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    
    /* 1. Smaller logo on phone */
    .logo img {
        height: 24px; /* Reduced from 32px */
        width: auto;
    }
    
    /* Alternative if you want it even smaller on very small phones */
    .navbar {
        padding: 10px 16px; /* Slightly reduced padding */
    }
    
    /* 2. GitHub button adapt to text, not full width */
    .github-button {
        width: auto; /* Remove full width */
        display: inline-flex; /* Keep it inline */
        padding: 12px 24px; /* Slightly smaller padding on mobile */
        white-space: nowrap; /* Prevent text wrapping */
    }
    
    /* Hero content center alignment fix */
    .hero-content {
        padding: 0 20px;
    }
}