/* ============================================================
   ISFIBER - Shared Stylesheet (style.css)
   Used by: index.html, about.html, solutions.html, products.html,
            pricing.html, hr-management.html, case-studies.html, dashboard.html
   ============================================================ */

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

/* ── 2. Typography ───────────────────────────────────────── */
body,
p,
span:not(.material-symbols-outlined),
li,
a,
button,
input,
textarea,
label {
    font-family: 'Inter', 'IBM Plex Sans Thai', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.font-h1, .font-h2, .font-h3, .font-h4, .font-h5, .font-h6 {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif !important;
    font-weight: 700 !important;
}

/* Typography scale (used by pages that don't have tailwind fontSize config) */
.font-h1  { font-size: 40px; font-weight: 700; line-height: 48px; letter-spacing: -0.02em; }
.font-h2  { font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.01em; }
.font-h3  { font-size: 24px; font-weight: 600; line-height: 32px; }
.font-h4  { font-size: 20px; font-weight: 600; line-height: 28px; }
.font-h5  { font-size: 16px; font-weight: 600; line-height: 24px; }
.font-h6  { font-size: 14px; font-weight: 600; line-height: 20px; }
.font-body-lg { font-size: 18px; font-weight: 400; line-height: 28px; }
.font-body-md { font-size: 16px; font-weight: 400; line-height: 24px; }
.font-body-sm { font-size: 14px; font-weight: 400; line-height: 20px; }
.font-caption { font-size: 12px; font-weight: 500; line-height: 16px; }

/* ── 3. Glassmorphism Components ─────────────────────────── */
.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 61, 155, 0.04) !important;
    transition: all 0.3s ease-in-out !important;
}

.glass-card:hover {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 12px 40px 0 rgba(0, 61, 155, 0.08) !important;
    transform: translateY(-4px) !important;
}

.glass-nav {
    background: rgba(250, 248, 255, 0.75) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ── 4. Hero / Background effects ────────────────────────── */
.hero-gradient {
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 61, 155, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(112, 155, 254, 0.05) 0%, transparent 40%),
        #faf8ff;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.5;
    animation: float 20s infinite alternate ease-in-out;
}

@keyframes float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -40px) scale(1.1); }
}

.inner-glow {
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.4);
}

/* ── 5. Marquee / Ticker ─────────────────────────────────── */
.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 2rem;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: 2rem;
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ── 6. Navigation — Desktop ─────────────────────────────── */
.nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .nav-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

.nav-logo-section {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
}

.nav-menu-links {
    display: none !important;
}

@media (min-width: 768px) {
    .nav-menu-links {
        display: flex !important;
        gap: 24px !important;
        margin-left: 2rem !important;
    }
}

.nav-buttons-section {
    display: none !important;
}

@media (min-width: 768px) {
    .nav-buttons-section {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
    }
}

/* Active nav link indicator */
.active-dot {
    position: relative;
}

.active-dot::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #003d9b;
    border-radius: 50%;
}

/* ── 7. Mobile Drawer Navigation ─────────────────────────── */
#mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(250, 248, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(195, 198, 214, 0.5);
    box-shadow: -8px 0 32px rgba(0, 61, 155, 0.08);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
}

#mobile-drawer.translate-x-0 {
    transform: translateX(0);
}

#mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(25, 27, 35, 0.4);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

/* ── 8. Mobile Bottom Navigation ─────────────────────────── */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(250, 248, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(195, 198, 214, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0.5rem);
}

@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

.mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #434654;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: #003d9b;
}

.mobile-bottom-nav a .material-symbols-outlined {
    font-size: 22px;
}

/* ── 9. Scroll Reveal Animations ─────────────────────────── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0) !important;
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}

.scroll-reveal-left.active {
    opacity: 1;
    transform: translateX(0) !important;
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}

.scroll-reveal-right.active {
    opacity: 1;
    transform: translateX(0) !important;
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}

.scroll-reveal-scale.active {
    opacity: 1;
    transform: scale(1) !important;
}

/* Staggered animation delays */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* ── 10. Pricing page extras ─────────────────────────────── */
.active-tab {
    border-bottom: 2px solid #003d9b;
    color: #003d9b;
}

/* ── 11. Case Studies extras ─────────────────────────────── */
.text-shadow-sm {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── 12. Responsive Breakpoints ──────────────────────────── */
@media (max-width: 1024px) {
    /* Bento grid spans collapse */
    .md\:col-span-4,
    .md\:col-span-2,
    .lg\:col-span-8,
    .lg\:col-span-4,
    .col-span-4 {
        grid-column: span 1 / span 1 !important;
    }

    .grid-cols-6,
    .grid-cols-12,
    .lg\:grid-cols-12,
    .md\:grid-cols-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    /* Layout collapse to single column */
    .grid:not(.grid-cols-2):not(.grid-cols-5) {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .lg\:grid-cols-2,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Padding, Margin and Spacing optimization */
    .px-margin-desktop,
    .px-10,
    .px-2xl,
    .px-3xl {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .py-2xl,
    .py-3xl,
    .py-20,
    .py-24,
    .py-32 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .pt-24 {
        padding-top: 6rem !important;
    }

    .mb-2xl,
    .mb-xl,
    .mb-lg {
        margin-bottom: 1.5rem !important;
    }

    .gap-3xl,
    .gap-2xl,
    .gap-xl {
        gap: 1.5rem !important;
    }

    /* Responsive typography */
    h1, .text-5xl, .text-6xl, .font-h1 {
        font-size: 2rem !important;
        line-height: 2.5rem !important;
    }

    h2, .text-4xl, .font-h2 {
        font-size: 1.6rem !important;
        line-height: 2rem !important;
    }

    h3, .text-3xl, .font-h3 {
        font-size: 1.35rem !important;
        line-height: 1.7rem !important;
    }

    h4, .text-2xl, .font-h4 {
        font-size: 1.15rem !important;
        line-height: 1.5rem !important;
    }

    /* Keep header alignment intact */
    nav .flex.justify-between {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Image sizing */
    img:not(.h-10):not(.h-8):not(.h-12):not(.h-16):not([src*="logo"]) {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================================
   Pricing Page - Bold Contrast Redesign
   ============================================================ */

/* Dark hero section background */
.pricing-hero-dark {
    background: linear-gradient(160deg, #0a1628 0%, #0c2654 35%, #0052cc 70%, #003d9b 100%);
}

/* White pricing cards - crisp on dark bg */
.pricing-card-white {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 
        0 20px 60px -15px rgba(0, 0, 0, 0.25),
        0 8px 24px -8px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-card-white:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 30px 80px -15px rgba(0, 0, 0, 0.35),
        0 12px 32px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

/* Dark Enterprise card - premium look */
.pricing-card-dark {
    background: linear-gradient(160deg, #0a1628 0%, #0d2b5e 50%, #143a7a 100%);
    border: 1px solid rgba(112, 155, 254, 0.2);
    box-shadow: 
        0 25px 60px -10px rgba(0, 61, 155, 0.45),
        0 10px 30px -5px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-card-dark:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(112, 155, 254, 0.35);
    box-shadow: 
        0 35px 80px -10px rgba(0, 61, 155, 0.55),
        0 15px 40px -5px rgba(0, 0, 0, 0.35),
        inset 0 1px 2px rgba(255, 255, 255, 0.12);
}


/* ============================================================
   Solutions Page Premium Redesign Styles
   ============================================================ */
.solutions-hero-glow {
    background: radial-gradient(circle at 10% 20%, rgba(0, 61, 155, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 90% 80%, rgba(112, 155, 254, 0.08) 0%, transparent 50%),
                #faf8ff;
}

.premium-glass-frame {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 8px !important;
    border-radius: 24px !important;
    box-shadow: 
        0 15px 35px -10px rgba(0, 61, 155, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.premium-glass-frame:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 61, 155, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.glow-hover-primary:hover {
    border-color: rgba(0, 61, 155, 0.3) !important;
    box-shadow: 0 15px 30px -10px rgba(0, 61, 155, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.glow-hover-secondary:hover {
    border-color: rgba(112, 155, 254, 0.4) !important;
    box-shadow: 0 15px 30px -10px rgba(112, 155, 254, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.glow-hover-tertiary:hover {
    border-color: rgba(123, 38, 0, 0.3) !important;
    box-shadow: 0 15px 30px -10px rgba(123, 38, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}