/* ============================================================
   Bytes Yatra — Modern UI theme (colours + typography)
   Loaded after each page's styles and theme-3d.css.
   ONE brand colour only: everything uses Admin → Design "primary colour".
   No multi-colour gradients on buttons, text or backgrounds.
   ============================================================ */

:root {
    /* Secondary/accent follow the primary so no second colour appears anywhere */
    --secondary:  var(--primary);
    --accent:     var(--primary);
    --primary-light: color-mix(in srgb, var(--primary) 9%, #fff);
    --text-dark:  #0F172A;
    --text-mid:   #475569;
    --text-light: #64748B;
    --bg-white:   #FFFFFF;
    --bg-light:   #F8FAFC;
    --border:     #E6EAF2;
    --radius:     14px;
    --shadow:     0 1px 2px rgba(15,23,42,.04), 0 10px 30px -12px rgba(15,23,42,.12);
    --shadow-lg:  0 2px 4px rgba(15,23,42,.04), 0 24px 48px -16px rgba(15,23,42,.18);
    --grad:       var(--primary); /* solid — kept as a name so rules below stay simple */
    --ink:        #0B1120;        /* dark sections */
    --font-head:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ═══════════ TYPOGRAPHY ═══════════ */
body {
    color: var(--text-dark);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .section-title, .nav-brand span, .stat-number, .footer-brand-name,
.typewriter-wrap, .post-title, [style*="Poppins"] {
    font-family: var(--font-head) !important;
}
h1, .hero h1, .page-banner h1, .post-title { font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
h2, .section-title { font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
h3, h4 { letter-spacing: -.015em; }
p { color: inherit; }
.section-sub, .hero-sub, .page-banner p { color: var(--text-mid); font-size: 1.05rem; line-height: 1.75; }
::selection { background: color-mix(in srgb, var(--primary) 22%, #fff); color: var(--text-dark); }

/* Highlight words — solid brand colour */
.hero h1 em, .page-banner h1 em, .section-title em, #tw-text {
    color: var(--primary) !important; text-shadow: none !important; font-style: normal;
}
.typewriter-static { color: var(--text-dark); }
.tw-cursor { background: var(--primary); }

/* Section labels — small, tracked, pill with a dot */
.section-label, .page-banner .eyebrow, .hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: color-mix(in srgb, var(--primary) 7%, #fff);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: .4rem .95rem; border-radius: 999px;
}
.section-label::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--grad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.hero-eyebrow { background: rgba(255,255,255,.7); backdrop-filter: blur(8px); letter-spacing: .06em; text-transform: none; font-size: .82rem; }
.hero-eyebrow .dot { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ═══════════ NAVBAR — solid white (never tinted by content scrolling under it) ═══════════ */
.navbar {
    background: #fff !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(15,23,42,.06) !important;
    box-shadow: none;
}
.navbar.scrolled { box-shadow: 0 8px 30px -12px rgba(15,23,42,.15); }
.nav-brand span { color: var(--text-dark) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.nav-links a { color: #334155; font-weight: 500; font-size: .9rem; }
.nav-links a:hover { color: var(--primary); }
.nav-links a::after { background: var(--grad) !important; }
.nav-cta { background: var(--grad) !important; color: #fff !important; padding: .55rem 1.3rem !important; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent); }
@media (max-width: 960px) { .nav-links { background: #fff !important; } }

/* ═══════════ HERO + BANNERS ═══════════ */
.hero, .page-banner { background: #F8FAFC !important; }
.hero::before, .hero::after { display: none; }
.hero h1, .page-banner h1, .post-title { color: var(--text-dark); text-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 14%, transparent) !important; }
.section-title { text-shadow: none !important; }
.hero-float { border: 1px solid var(--border); background: rgba(255,255,255,.85); backdrop-filter: blur(10px); color: var(--text-dark); border-radius: 12px; box-shadow: var(--shadow); }

/* ═══════════ BUTTONS ═══════════ */
.btn-primary, .job-apply, .submit-btn, .btn-login {
    background: var(--grad) !important; background-size: 160% 100% !important; background-position: 0 0 !important;
    color: #fff !important; font-weight: 600; letter-spacing: -.005em; border: 0;
    --y3d-depth: color-mix(in srgb, var(--primary) 55%, #0B1120);
}
.btn-primary:hover, .job-apply:hover, .submit-btn:hover:not(:disabled) { background-position: 100% 0 !important; }
.btn-outline {
    background: #fff !important; color: var(--text-dark) !important;
    border: 1.5px solid #CBD5E1 !important; font-weight: 600;
    box-shadow: 0 4px 0 #E2E8F0 !important;
}
.btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !important; transform: translateY(-2px) !important; }
.btn-outline i { color: var(--primary); }

/* ═══════════ CARDS ═══════════ */
.service-card, .portfolio-card, .testi-card, .team-card, .culture-card, .job-card, .value-card,
.mv-card, .about-feat, .related-card, .blog-card, .apply-card, .contact-form, .faq-item, .no-jobs {
    background: #fff; border: 1px solid var(--border) !important; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.service-card:hover, .portfolio-card:hover, .testi-card:hover, .team-card:hover, .culture-card:hover,
.job-card:hover, .value-card:hover, .about-feat:hover, .related-card:hover, .faq-item:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
}
.service-card::before { background: var(--grad) !important; }
.service-card h3, .portfolio-info h3, .team-info h3, .job-info h3, .culture-card h3 { color: var(--text-dark); font-weight: 700; }
.service-card p, .culture-card p, .portfolio-info p, .about-feat p { color: var(--text-mid); }
.service-icon {
    background: var(--primary-light) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 16px !important;
}
.service-card:hover .service-icon { background: var(--grad) !important; border-color: transparent; }
.service-link, .portfolio-category { color: var(--primary); }
.testi-avatar, .team-img { background: var(--primary-light) !important; }
.stars { color: var(--primary); }
.portfolio-overlay { background: color-mix(in srgb, var(--ink) 75%, transparent) !important; }

/* Job badges — all the same brand tint */
.badge-dept, .badge-type, .badge-loc { background: var(--primary-light) !important; color: var(--primary) !important; }

/* ═══════════ FORMS ═══════════ */
.form-group input, .form-group select, .form-group textarea {
    background: #F8FAFC !important; border: 1.5px solid var(--border) !important; border-radius: 12px !important; color: var(--text-dark);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    background: #fff !important; border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent) !important;
}
.form-group label { color: #334155; font-weight: 600; }

/* ═══════════ DARK SECTIONS — solid navy ═══════════ */
#stats, .stats-section, .stats-bar, .cta-banner { background: var(--ink) !important; color: #E2E8F0; }
#stats .stat-number, .stats-section .stat-number, .stats-bar .stat-number { color: #fff !important; text-shadow: none !important; }
#stats .stat-label, .stats-bar .stat-label { color: #94A3B8; opacity: 1; }
#stats .stat-icon, .stats-bar .stat-icon { color: var(--primary); opacity: 1; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #CBD5E1; }

#newsletter { background: var(--primary) !important; }
.newsletter-form input { border: 1px solid rgba(255,255,255,.3); background: #fff; }
.newsletter-form button { background: var(--ink) !important; --y3d-depth: #000; }

/* ═══════════ FOOTER — solid navy ═══════════ */
footer, .mini-footer { background: var(--ink) !important; border-top: 1px solid rgba(255,255,255,.06) !important; color: #94A3B8 !important; }
footer a, .mini-footer a { color: #E2E8F0 !important; }
footer a:hover, .mini-footer a:hover { color: #fff !important; }
.footer-col h4, .footer-brand-name { color: #F8FAFC !important; }
.footer-col ul li a, .footer-col ul li span, .footer-brand p { color: #94A3B8 !important; }
.footer-col ul li a:hover { color: #fff !important; }
.footer-bottom { border-top-color: rgba(255,255,255,.08) !important; color: #64748B !important; }
footer .social-btn { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.1); }
footer .social-btn:hover { background: var(--primary) !important; }

/* ═══════════ SMALL DETAILS ═══════════ */
.social-btn { background: var(--grad) !important; border-radius: 12px; }
.contact-icon { background: color-mix(in srgb, var(--primary) 9%, #fff) !important; border-radius: 12px; }
.contact-detail:hover .contact-icon { background: var(--grad) !important; }
#back-top { background: var(--ink) !important; }
.alert-success { background: #ECFDF5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
.alert-error   { background: #FEF2F2 !important; color: #B91C1C !important; border-color: #FECACA !important; }
html { scrollbar-color: color-mix(in srgb, var(--primary) 45%, #CBD5E1) transparent; scrollbar-width: thin; }
.why-num { background: var(--grad) !important; }