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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #F1F1F1;
    font-family: 'Poppins', sans-serif;
    color: #0C1115;
    overflow-x: hidden;
}

p, h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Custom Gradients */
.bg-gradient-yellow-cyan {
    background: linear-gradient(90deg, #FFE900 0%, #2B99D1 100%);
}
.text-gradient-yellow-cyan {
    background: linear-gradient(90deg, #FFE900 0%, #2B99D1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-dark2-cyan {
    background: linear-gradient(90deg, #323641 0%, #2B99D1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bg-gradient-dark2-cyan {
    background: linear-gradient(90deg, #323641 0%, #2B99D1 100%);
}

/* Home Hero Title — slightly smaller to fit 3 lines */
#home-hero-title {
    font-size: 32px;
}
@media (min-width: 640px)  { #home-hero-title { font-size: 38px; } }
@media (min-width: 768px)  { #home-hero-title { font-size: 40px; } }
@media (min-width: 1280px) { #home-hero-title { font-size: 44px; } }

/* ─── Mobile CTA Button Fixes ─── */
/* Prevent CTA buttons from overflowing on small screens */
@media (max-width: 639px) {
    /* Shared button component overrides */
    .btn-cyan,
    .btn-yellow,
    .btn-outline-yellow,
    .btn-gradient {
        padding-left: 14px;
        padding-right: 14px;
        line-height: 1 !important;
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
        text-wrap: balance;
        max-width: 260px;
    }

    /* Mobile nav menu buttons should stay full-width */
    #mobile-menu .btn-cyan,
    #mobile-menu .btn-outline-yellow {
        max-width: 100%;
        width: 100%;
    }

    /* Tab-section gradient pill CTA overrides */
    #tab-content-1 a,
    #tab-content-2 a,
    #tab-content-3 a {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        line-height: 1 !important;
        text-align: center;
        text-wrap: balance;
        max-width: 260px;
    }
}

/* ─── Team Section Mobile Fixes ─── */
@media (max-width: 639px) {
    /* Reduce card padding & border-radius */
    #team-section .bg-primary-pure-white,
    #team-section .bg-primary-yellow {
        padding: 24px;
        border-radius: 24px;
    }

    /* Smaller team member photos */
    #team-section img[alt="Sofia Mendez"],
    #team-section img[alt="David Park"],
    #team-section img[alt="Isabella Rossi"],
    #team-section img[alt="Thomas Weber"],
    #team-section img[alt="Amara Okonkwo"],
    #team-section img[alt="Lucas Fernandes"] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    /* Reduce gap between photo and name */
    #team-section .flex.items-center {
        gap: 12px;
    }

    /* Prevent email overflow */
    #team-section a[href^="mailto:"] {
        word-break: break-all;
    }
}

/* Hero Background — gradient base (particles rendered via Canvas) */
.hero-bg {
    background: linear-gradient(135deg, #0C1115 0%, #323641 100%);
}

.about-hero-bg {
    background: linear-gradient(135deg, #0C1115 0%, #21242B 60%, #323641 100%);
}

/* Hero Particles Canvas */
.hero-particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Gradient mask — darkens top-left (text area), fades to transparent at bottom-right (particles) */
.hero-bg::before,
.about-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(12, 17, 21, 0.98) 0%,
        rgba(12, 17, 21, 0.96) 40%,
        rgba(12, 17, 21, 0.80) 55%,
        rgba(12, 17, 21, 0.40) 72%,
        rgba(12, 17, 21, 0.10) 85%,
        rgba(12, 17, 21, 0)    95%
    );
}


/* About Us Stats Section Background */
.about-stats-bg {
    background-image: url('../assets/About%20Us/Data-Grid-BG-img-Mobile.png');
    background-size: auto;
    background-position: left top;
    background-repeat: no-repeat;
}
@media (min-width: 1024px) {
    .about-stats-bg {
        background-image: url('../assets/About%20Us/Data-Grid-BG-img.png');
        background-position: left bottom;
    }
}

/* ─── Spotlight / Glow Card Effect ─── */
[data-glow] {
    position: relative;
    /* NOTE: Do NOT add z-index here. Keeping z-index:auto means
       the card doesn't create its own stacking context, so ::before
       at z-index:-1 renders BELOW the card's own background paint. */
}

/* White glow ring — rendered behind the card's opaque background,
   visible only in the strip that extends beyond the card edge. */
[data-glow]::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    z-index: -1;
    background: radial-gradient(
        250px 250px at var(--glow-x, -500px) var(--glow-y, -500px),
        #FFFFFF,
        transparent
    );
    filter: blur(5px);
    pointer-events: none;
}

/* Gradient border lines — real CSS borders that follow border-radius,
   masked with a horizontal gradient for transparent→cyan→transparent */
[data-glow]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    border-top: 3px solid #2B99D1;
    border-bottom: 3px solid #2B99D1;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, white 20%, white 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, white 20%, white 80%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

[data-glow]:hover::after {
    opacity: 1;
}

/* Hover: subtle drop shadow (default: neutral) */
[data-glow]:hover {
    box-shadow: 0 20px 40px -6px rgba(0, 0, 0, 0.15);
}

/* ── Yellow border variant (About Us cards) ── */
[data-glow="yellow"]::after {
    border-top-color: #FFE900;
    border-bottom-color: #FFE900;
}

[data-glow="yellow"]:hover {
    box-shadow: 0 20px 40px -6px rgba(43, 153, 209, 0.25);
}