/* ============================================================
   TechnoBoost Homepage v7.0.0 — Architectural Precision
   Design System: Stitch / "The Digital Architect"
   ============================================================ */

/* --- Design Tokens (CSS Custom Properties) --- */
:root {
    --tb-primary:                 #006571;
    --tb-primary-container:       #00e3fd;
    --tb-surface:                 #f5f7f9;
    --tb-on-surface:              #2c2f31;
    --tb-surface-container-low:   #eef1f3;
    --tb-surface-container-lowest:#ffffff;
    --tb-surface-container-high:  #dfe3e6;
    --tb-outline-variant:         #abadaf;
    --tb-on-surface-variant:      #595c5e;
    --tb-on-primary:              #d8f8ff;
    --tb-on-primary-fixed:        #003840;

    --tb-font-headline: 'Space Grotesk', sans-serif;
    --tb-font-body:     'Inter', sans-serif;

    --tb-shadow-ambient: 0 20px 40px -5px rgba(44,47,49,0.04);
    --tb-ghost-border:   1px solid rgba(171,173,175,0.15);
    --tb-radius-md:      0.375rem;
    --tb-radius-lg:      0.75rem;
    --tb-radius-xl:      1rem;
}

/* --- Base / Reset --- */
.tb-homepage {
    font-family: var(--tb-font-body);
    color: var(--tb-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tb-homepage *,
.tb-homepage *::before,
.tb-homepage *::after {
    box-sizing: border-box;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* --- Hero Pattern (dot grid) --- */
.hero-pattern {
    background-image: radial-gradient(circle, rgba(0,227,253,0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* --- Ghost Border --- */
.ghost-border {
    border: 1px solid rgba(171,173,175,0.15);
}

/* --- Glass Card --- */
.glass-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(171,173,175,0.15);
}

/* --- Glow Accent (for featured card) --- */
.glow-accent {
    box-shadow: 0 0 20px -4px rgba(0,227,253,0.2), var(--tb-shadow-ambient);
}

/* --- Shimmer Hover --- */
.shimmer-hover {
    position: relative;
    overflow: hidden;
}
.shimmer-hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,227,253,0.04), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}
.shimmer-hover:hover::after {
    left: 100%;
}

/* --- Scroll Animations --- */
.tb-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.tb-fade-in.tb-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Keyframe Animations --- */
@keyframes tb-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tb-pulse-glow {
    0%, 100% { box-shadow: 0 0 20px -4px rgba(0,227,253,0.2); }
    50%      { box-shadow: 0 0 30px -2px rgba(0,227,253,0.35); }
}

.glow-accent {
    animation: tb-pulse-glow 3s ease-in-out infinite;
}

/* --- Mobile Hamburger Animation --- */
#tb-mobile-toggle.active .tb-burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
#tb-mobile-toggle.active .tb-burger-line:nth-child(2) {
    opacity: 0;
}
#tb-mobile-toggle.active .tb-burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Active Nav Link --- */
.tb-nav-link.active {
    color: var(--tb-primary);
    position: relative;
}
.tb-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--tb-primary), var(--tb-primary-container));
    border-radius: 1px;
}

/* --- Header scroll state --- */
#tb-header.scrolled {
    box-shadow: var(--tb-shadow-ambient);
}

/* --- Material Symbols sizing --- */
.tb-homepage .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Responsive Overrides --- */
@media (max-width: 767px) {
    .tb-homepage section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .hero-pattern {
        background-size: 18px 18px;
    }
}

@media (max-width: 1023px) {
    #hero .grid {
        text-align: center;
    }
    #hero .flex.flex-col.sm\\:flex-row {
        justify-content: center;
    }
}

/* --- Utility: gradient text --- */
.tb-gradient-text {
    background-image: linear-gradient(135deg, var(--tb-primary), var(--tb-primary-container));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Section Sub-Nav --- */
.tb-section-link {
    color: var(--tb-on-surface-variant);
    text-decoration: none;
    position: relative;
}
.tb-section-link:hover {
    color: var(--tb-primary);
    background: rgba(0,227,253,0.05);
}
.tb-section-link.active {
    color: var(--tb-primary);
    background: rgba(0,227,253,0.1);
    font-weight: 600;
}

/* Hide scrollbar on sub-nav */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Sub-nav responsive */
@media (max-width: 767px) {
    #tb-section-nav {
        top: 56px !important;
    }
    .tb-section-link {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }
}

/* --- Print --- */
@media print {
    #tb-header,
    #tb-section-nav { position: static; }
    .tb-homepage section { break-inside: avoid; }
}

/* --- Hero Globe Canvas & Floating KPI Badges --- */
#tb-hero-canvas {
    background: transparent;
}

.tb-globe-badge {
    opacity: 0;
    animation: tb-badge-appear 0.6s ease-out forwards, tb-badge-hover 4s ease-in-out infinite;
    z-index: 2;
    white-space: nowrap;
    pointer-events: none;
}

.tb-badge-interactive {
    pointer-events: auto;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
    cursor: default;
}

@keyframes tb-badge-appear {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tb-badge-hover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Bottom center badge needs special transform to keep centering */
.tb-globe-badge:last-child {
    animation: tb-badge-appear 0.6s ease-out forwards, tb-badge-hover-center 4s ease-in-out infinite;
}

@keyframes tb-badge-hover-center {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-5px); }
}

/* --- Hero reduced spacing on mobile --- */
@media (max-width: 1023px) {
    #hero {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}