:root {
    --kb-primary: #4361ee;
    --kb-secondary: #3f37c9;
    --kb-accent: #4cc9f0;
    --kb-dark: #0b1120;
    --kb-light: #f8f9fa;
    --text-white: #ffffff;
    --text-gray: #94a3b8;
    --card-bg: rgba(255, 255, 255, 0.05);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Reset & Base */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent default scroll */
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--kb-dark);
    color: var(--text-white);
}

/* Scroll Container */
.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.snap-container::-webkit-scrollbar {
    display: none;
}

/* Section Common */
.snap-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px 20px; /* Top padding for header */
    box-sizing: border-box;
    overflow: hidden;
}
.snap-section:hover .section-title {
    filter: drop-shadow(0 4px 20px rgba(76, 201, 240, 0.3));
    transform: translateY(0) scale(1.02);
}
.snap-section:hover .section-desc {
    transform: translateY(0) scale(1.01);
}

/* Backgrounds */
.bg-gradient-1 {
    background: radial-gradient(circle at top right, #1a2a4a 0%, #0b1120 100%);
}
.bg-gradient-2 {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.bg-gradient-3 {
    background: radial-gradient(circle at bottom left, #1e1b4b 0%, #0b1120 100%);
}

/* Typography */
h2.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #4cc9f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

p.section-desc {
    font-size: 1.1rem;
    color: var(--text-gray);
    max-width: 800px;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.2s;
}

/* Animations Trigger */
.snap-section.active h2.section-title,
.snap-section.active p.section-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Navigation Dots */
.side-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
    outline: none;
}

.nav-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    background: rgba(0,0,0,0.5);
    padding: 4px 8px;
    border-radius: 4px;
}

.nav-dot:hover::after {
    opacity: 1;
}

.nav-dot.active {
    background: var(--kb-accent);
    box-shadow: 0 0 10px var(--kb-accent);
}

/* ================= Specific Sections ================= */

/* Section 1: Intro */
#intro {
    text-align: center;
}
.hero-visual {
    width: 600px;
    height: 400px;
    background: url('https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=Futuristic%20AI%20brain%20digital%20knowledge%20network%20glowing%20blue%20particles%20dark%20background%203d%20render&image_size=landscape_16_9') no-repeat center/contain;
    margin: 20px auto;
    animation: float 6s ease-in-out infinite;
}
.hero-visual:hover {
    transform: translateY(-10px) scale(1.02);
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Section 2: Tech Solution */
.tech-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    width: 100%;
}
.tech-card {
    background: var(--card-bg);
    border: var(--glass-border);
    padding: 30px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s;
    opacity: 0;
    transform: translateY(50px);
}
.tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
}
.tech-card:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.1);
}
.tech-icon {
    font-size: 40px;
    color: var(--kb-accent);
    margin-bottom: 20px;
}
.snap-section.active .tech-card {
    opacity: 1;
    transform: translateY(0);
}
.snap-section.active .tech-card:nth-child(1) { transition: all 0.6s ease 0.2s; }
.snap-section.active .tech-card:nth-child(2) { transition: all 0.6s ease 0.4s; }
.snap-section.active .tech-card:nth-child(3) { transition: all 0.6s ease 0.6s; }

/* Section 3: Industries */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
}
.industry-item {
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s;
    opacity: 0;
    transform: scale(0.9);
}
.industry-item.tilt-card:hover {
    transform: scale(1.03);
}
.industry-item:hover {
    border-color: var(--kb-accent);
    background: rgba(255,255,255,0.08);
}
.industry-item i {
    font-size: 32px;
    color: var(--kb-secondary);
    margin-bottom: 10px;
    display: block;
}
.snap-section.active .industry-item {
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s ease 0.3s;
}

/* Section 4: Comparison */
.comparison-container {
    display: flex;
    width: 100%;
    max-width: 1000px;
    gap: 40px;
    align-items: center;
}
.comp-box {
    flex: 1;
    padding: 40px;
    border-radius: 20px;
    position: relative;
}
.comp-box.tilt-card {
    will-change: transform;
}
.comp-box.before {
    background: rgba(255, 50, 50, 0.05);
    border: 1px solid rgba(255, 50, 50, 0.2);
}
.comp-box.after {
    background: rgba(50, 255, 100, 0.05);
    border: 1px solid rgba(50, 255, 100, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(50, 255, 100, 0.1);
}
.vs-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--kb-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 2;
}

/* Section 5: Problems */
.problem-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
}
.problem-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--kb-accent);
    opacity: 0;
    transform: translateX(-50px);
}
.problem-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(76, 201, 240, 0.1);
}
.snap-section.active .problem-item {
    opacity: 1;
    transform: translateX(0);
}
.snap-section.active .problem-item:nth-child(1) { transition: all 0.5s ease 0.2s; }
.snap-section.active .problem-item:nth-child(2) { transition: all 0.5s ease 0.4s; }
.snap-section.active .problem-item:nth-child(3) { transition: all 0.5s ease 0.6s; }

/* Section 6: Advantages */
.adv-circle-container {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adv-center {
    width: 150px;
    height: 150px;
    background: var(--kb-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 40px rgba(67, 97, 238, 0.4);
    z-index: 2;
}
.adv-item {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.5s;
    opacity: 0;
    transform: scale(0);
}
.snap-section.active .adv-item {
    opacity: 1;
    /* Reset transform based on position, handled individually below but we need a base generic reset if possible, 
       or better, use animation keyframes or specific transitions. 
       Since transform is used for positioning (translate), we must be careful not to override it.
       Actually, scale(0) to scale(1) combined with translate is tricky.
       Let's use animation instead.
    */
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.snap-section.active .adv-item:nth-child(2) { animation-delay: 0.2s; }
.snap-section.active .adv-item:nth-child(3) { animation-delay: 0.4s; }
.snap-section.active .adv-item:nth-child(4) { animation-delay: 0.6s; }
.snap-section.active .adv-item:nth-child(5) { animation-delay: 0.8s; }

@keyframes popIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0); } /* This is generic, might break specific positioning */
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* But wait, positioning uses different translates */
}

/* 
   Correction: Since each item has different transform (translateX or translateY), 
   we cannot use a single keyframe.
   Let's just use transition on opacity and let them be visible.
   Or use specific transitions.
*/
.adv-item {
    /* ... previous styles ... */
    /* Override previous block for simplicity in this edit */
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.5s;
    opacity: 0;
    /* Initial state set in specific rules */
}

.snap-section.active .adv-item {
    opacity: 1;
}
/* Re-define positioning with initial transforms included */
.adv-item:nth-child(2) { top: 0; left: 50%; transform: translateX(-50%) scale(0); }
.snap-section.active .adv-item:nth-child(2) { transform: translateX(-50%) scale(1); transition-delay: 0.2s; }

.adv-item:nth-child(3) { top: 50%; right: 0; transform: translateY(-50%) scale(0); }
.snap-section.active .adv-item:nth-child(3) { transform: translateY(-50%) scale(1); transition-delay: 0.4s; }

.adv-item:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%) scale(0); }
.snap-section.active .adv-item:nth-child(4) { transform: translateX(-50%) scale(1); transition-delay: 0.6s; }

.adv-item:nth-child(5) { top: 50%; left: 0; transform: translateY(-50%) scale(0); }
.snap-section.active .adv-item:nth-child(5) { transform: translateY(-50%) scale(1); transition-delay: 0.8s; }

/* Correct Hover Effects maintaining position */
.snap-section.active .adv-item:nth-child(2):hover { transform: translateX(-50%) scale(1.1); box-shadow: 0 0 20px rgba(76, 201, 240, 0.4); }
.snap-section.active .adv-item:nth-child(3):hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px rgba(76, 201, 240, 0.4); }
.snap-section.active .adv-item:nth-child(4):hover { transform: translateX(-50%) scale(1.1); box-shadow: 0 0 20px rgba(76, 201, 240, 0.4); }
.snap-section.active .adv-item:nth-child(5):hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px rgba(76, 201, 240, 0.4); }

/* Section 7: Architecture */
.arch-diagram {
    position: relative;
    width: 800px;
    height: 400px;
    background: url('https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=System%20architecture%20diagram%20flowchart%20minimalist%20dark%20ui%20neon%20lines%20connecting%20modules%20database%20cloud%20user&image_size=landscape_16_9') center/contain no-repeat;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background-color: rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s ease-out;
}
.snap-section.active .arch-diagram {
    opacity: 1;
    transform: scale(1);
}
.arch-diagram:hover {
    box-shadow: 0 0 40px rgba(67,97,238,0.2);
    transform: scale(1.01);
}

/* Section 8: Contact & Footer */
#contact {
    justify-content: flex-end; /* Push content to bottom */
    padding: 0 !important; /* Reset all padding to ensure full width */
    width: 100% !important;
    align-items: stretch !important; /* Ensure children take full width */
}
/* Force full width for footer container */
#contact .contact-container {
    width: 100%;
    max-width: 100%;
    padding: 60px 20px;
    margin: 0;
    align-self: center; /* Keep contact content centered if needed, or let it stretch */
}

#global-footer {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#global-footer .container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}
.contact-container {
    background: var(--bg-gradient-2);
    padding: 60px 20px;
    width: 100%;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--kb-primary);
    color: white;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.contact-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(67, 97, 238, 0.5);
}
.contact-btn.ripple-container {
    position: relative;
    overflow: hidden;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background: rgba(255,255,255,0.6);
}
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.parallax-item {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Override Footer for Dark Mode integration */
#global-footer {
    width: 100%;
    background: #000 !important; /* Force black background */
    position: relative;
    z-index: 10;
}
#global-footer .footer {
    background: transparent !important;
}