/* ============================================================
   Home Hub — layout, area nav, cards, and mascot animations
   ============================================================ */

.hub-body {
    background-color: #f7f9fc;
    font-family: 'Arial', sans-serif;
}

.hub-main {
    min-height: 60vh;
}

/* ---------- Area switcher nav ---------- */

.hub-area-nav {
    background: #ffffff;
    border-bottom: 1px solid rgba(13, 27, 42, 0.08);
    box-shadow: 0 2px 10px rgba(13, 27, 42, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.hub-area-tabs .nav-link {
    color: #1a202c;
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hub-area-tabs .nav-link:hover {
    background-color: rgba(43, 108, 176, 0.1);
}

.hub-area-tabs .nav-link.active {
    background-color: #2b6cb0;
    color: #ffffff;
}

/* Make the mobile hamburger button unmistakable and easy to tap */
.hub-area-nav .navbar-toggler {
    border-color: rgba(43, 108, 176, 0.4);
}

.hub-area-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(43, 108, 176, 0.25);
}

@media (max-width: 991.98px) {
    .hub-area-tabs {
        padding: 0.5rem 0 0.75rem;
    }

    .hub-area-tabs .nav-item {
        border-bottom: 1px solid rgba(13, 27, 42, 0.06);
    }

    .hub-area-tabs .nav-item:last-child {
        border-bottom: none;
    }

    .hub-area-tabs .nav-link {
        padding: 0.85rem 0.5rem;
        border-radius: 0;
    }

    .hub-hero {
        padding: 2.5rem 1.25rem;
        margin: 1.25rem auto;
        text-align: center;
        justify-content: center;
    }

    .hub-hero-text {
        flex-basis: 100%;
    }

    .hub-hero-mascot {
        flex-basis: 100%;
        order: -1;
    }
}

/* ---------- Hero ---------- */

.hub-hero {
    padding: 4rem 1.5rem;
    border-radius: 20px;
    margin: 2rem auto;
    max-width: 1140px;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    color: #fff;
}

.hub-hero-text {
    flex: 1 1 320px;
}

.hub-hero-mascot {
    flex: 0 0 220px;
    display: flex;
    justify-content: center;
}

.hub-hero.theme-ai { background: linear-gradient(135deg, #1a4e8a, #2b6cb0); }
.hub-hero.theme-corporate { background: linear-gradient(135deg, #22543d, #2f855a); }
.hub-hero.theme-learners { background: linear-gradient(135deg, #276749, #38a169); }
.hub-hero.theme-social { background: linear-gradient(135deg, #6b46c1, #d53f8c); }
.hub-hero.theme-product { background: linear-gradient(135deg, #9c4221, #dd6b20); }

/* ---------- Content sections ---------- */

.hub-content {
    max-width: 1140px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

.hub-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 6px 18px rgba(13, 27, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(13, 27, 42, 0.12);
}

.hub-product-card img,
.hub-product-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
}

.hub-ad-unit {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.link-hover:hover {
    color: #00d4ff;
    text-decoration: underline;
}

/* ============================================================
   Mascots
   ============================================================ */

.mascot svg {
    width: 100%;
    max-width: 220px;
    height: auto;
}

/* Shared idle bob used by the robot mascots */
.mascot-bob {
    animation: mascotBob 3.2s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes mascotBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Coding robot: AI Consultant */
.mascot-eye {
    animation: mascotBlink 4s infinite;
    transform-origin: center;
}

@keyframes mascotBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.mascot-antenna {
    animation: mascotGlow 1.6s ease-in-out infinite;
}

@keyframes mascotGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.mascot-arm-left {
    animation: mascotTypeLeft 0.9s ease-in-out infinite;
    transform-origin: right center;
}

.mascot-arm-right {
    animation: mascotTypeRight 0.9s ease-in-out infinite 0.3s;
    transform-origin: left center;
}

@keyframes mascotTypeLeft {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

@keyframes mascotTypeRight {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(8deg); }
}

.mascot-code-lines {
    animation: mascotScreenFlicker 2.4s ease-in-out infinite;
}

@keyframes mascotScreenFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Teaching robot: Corporate Training / Learners */
.mascot-point-arm {
    animation: mascotPoint 2.2s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes mascotPoint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(6deg); }
}

.mascot-board-line {
    animation: mascotDraw 3s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes mascotDraw {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.4); }
}

.mascot-board {
    animation: mascotFade 5s ease-in-out infinite;
}

@keyframes mascotFade {
    0%, 80%, 100% { opacity: 1; }
    90% { opacity: 0.55; }
}

/* Social people: Social Messages */
.mascot-wave-arm {
    animation: mascotWave 1.4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes mascotWave {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-24deg); }
}

.mascot-wave-left {
    animation: mascotBob 3.4s ease-in-out infinite;
}

.mascot-idle-right {
    animation: mascotBob 3.8s ease-in-out infinite 0.4s;
}

.mascot-bubble {
    animation: mascotFloat 3.6s ease-in-out infinite;
}

.mascot-bubble-2 {
    animation-delay: 0.8s;
}

@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50% { transform: translateY(-8px); opacity: 1; }
}

/* Selling robot: Product Gallery */
.mascot-spotlight {
    animation: mascotSweep 4.5s ease-in-out infinite;
    transform-origin: 110px 10px;
}

@keyframes mascotSweep {
    0%, 100% { transform: rotate(-8deg); opacity: 0.5; }
    50% { transform: rotate(8deg); opacity: 0.85; }
}

.mascot-raise-arm {
    animation: mascotShake 1.8s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes mascotShake {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-4deg); }
}

.mascot-product-box {
    animation: mascotFloat 2.4s ease-in-out infinite;
}

/* ---------- Accessibility: respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .mascot-bob,
    .mascot-eye,
    .mascot-antenna,
    .mascot-arm-left,
    .mascot-arm-right,
    .mascot-code-lines,
    .mascot-point-arm,
    .mascot-board-line,
    .mascot-board,
    .mascot-wave-arm,
    .mascot-wave-left,
    .mascot-idle-right,
    .mascot-bubble,
    .mascot-spotlight,
    .mascot-raise-arm,
    .mascot-product-box {
        animation: none !important;
        transform: none !important;
    }
}