/* ============================================================
   Bytes Yatra — Modern UI theme (colours + typography)
   Loaded after each page's own styles.
   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: none !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;
}
.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: none !important;
}
.btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !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; }

/* ═══════════ 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; }

/* ============================================================
   DESIGN SYSTEM REFINEMENTS
   Taste  — calm hierarchy, readable line lengths, consistent rhythm, restraint
   UX     — visible keyboard focus, 44px touch targets, clear form states, real cursor
   Motion — short (150–500ms), ease-out, transform/opacity only, no endless loops,
            fully off for visitors who prefer reduced motion
   ============================================================ */
:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: 150ms;
    --dur:      220ms;
    --dur-slow: 500ms;
    --nav-h:    70px;
}

/* ── Taste: typography & rhythm ── */
html { scroll-padding-top: calc(var(--nav-h) + 16px); } /* #anchors land below the fixed navbar */
body { line-height: 1.6; }
h1, h2, h3, .section-title, .post-title { text-wrap: balance; }
.section-sub, .hero-sub, .page-banner p, .post-content p, .culture-card p, .service-card p { text-wrap: pretty; }
.section-sub, .hero-sub, .page-banner p { max-width: 62ch; }
.section-header.center .section-sub, .page-banner p { margin-inline: auto; }
.post-content { max-width: 68ch; }
.section-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-title { margin-bottom: .6rem; }
.service-card h3, .portfolio-info h3, .team-info h3, .job-info h3, .culture-card h3, .blog-card h2 { line-height: 1.35; }
.stat-number { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── UX: accessibility & usability ── */
/* Keyboard users always see where they are (mouse clicks don't show the ring) */
:where(a, button, select, summary, [tabindex], .faq-q):focus-visible {
    outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px;
}
footer :where(a, button):focus-visible, #stats :where(a, button):focus-visible { outline-color: #fff; }

/* Comfortable tap/click sizes */
.btn-primary, .btn-outline, .job-apply, .submit-btn, .cat-chip, .pagination a, .pagination span { min-height: 44px; }
.form-group input, .form-group select { min-height: 46px; }
.hamburger { min-width: 44px; min-height: 44px; }
.nav-cta { min-height: 40px; display: inline-flex !important; align-items: center; }

/* Normal mouse cursor: a hidden cursor makes clicking harder for many people */
body { cursor: auto !important; }
#cursor-dot, #cursor-ring { display: none !important; }

/* Form states: errors show only after the person has interacted with a field */
.form-group :is(input, select, textarea):user-invalid {
    border-color: #DC2626 !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #94A3B8; }
button:disabled, .submit-btn:disabled { cursor: not-allowed; opacity: .65; }

/* Links inside long text are underlined so they're recognisable */
.post-content a, .policy-section a, .no-posts a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── Motion: purposeful, fast, subtle ── */
.btn-primary, .btn-outline, .job-apply, .submit-btn, .nav-cta, .newsletter-form button, .social-btn {
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                background-color var(--dur), color var(--dur), border-color var(--dur) !important;
}
.btn-primary:hover, .job-apply:hover, .submit-btn:hover:not(:disabled), .nav-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary) 70%, transparent) !important;
}
.btn-primary:active, .btn-outline:active, .job-apply:active, .submit-btn:active:not(:disabled), .nav-cta:active {
    transform: scale(.98) !important; box-shadow: none !important;
}

/* Cards lift a little, not a lot */
.service-card, .portfolio-card, .testi-card, .team-card, .culture-card, .job-card, .value-card,
.about-feat, .related-card, .blog-card {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) !important;
}
.service-card:hover, .portfolio-card:hover, .testi-card:hover, .team-card:hover, .culture-card:hover,
.value-card:hover, .related-card:hover, .blog-card:hover {
    transform: translateY(-3px) !important; box-shadow: var(--shadow) !important;
}
.job-card:hover { transform: none !important; box-shadow: var(--shadow) !important; }
.service-card:hover .service-icon { transform: none !important; }

/* Scroll reveals: short distance, quick ease-out (was 40–100px slides) */
.reveal { transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.left  { transform: translateX(-16px); }
.reveal.right { transform: translateX(16px); }
.reveal.scale { transform: scale(.98); }
.reveal.visible { transform: none; }
html [data-aos="fade-up"]    { transform: translate3d(0, 16px, 0); }
html [data-aos="fade-right"] { transform: translate3d(-16px, 0, 0); }
html [data-aos="fade-left"]  { transform: translate3d(16px, 0, 0); }

/* No endless decorative movement — it pulls attention from the content */
.hero-shape, .hero-float { animation: none !important; }
.hero-shape { transition: transform var(--dur) var(--ease-out); }

/* FAQ answers open smoothly */
.faq-q i { transition: transform var(--dur) var(--ease-out); }

/* Visitors who ask their device for less motion get none */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .reveal, html [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ═══════════ FOOTER LAYOUT — balanced columns, tighter rhythm ═══════════ */
/* Less empty space between the last section and the footer */
#contact { padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
footer { padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem 1.25rem !important; }

/* Brand column gets a sensible width; link columns sit next to it instead of far right */
.footer-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 4vw, 3.5rem) !important;
    align-items: start;
}
.footer-brand p { max-width: 38ch; font-size: .9rem; line-height: 1.65; margin-bottom: 1.25rem; }
.footer-brand-name { margin-bottom: .6rem; }
.footer-brand .contact-social { margin-top: 0 !important; gap: .6rem; }

/* Headings and links: even, compact spacing */
.footer-col h4 { font-size: .95rem; margin-bottom: .9rem !important; }
.footer-col ul li { margin-bottom: .45rem !important; }
.footer-col ul li a, .footer-col ul li span { font-size: .9rem !important; line-height: 1.5; display: inline-block !important; padding: .1rem 0; }
.footer-bottom { margin-top: 2rem !important; padding-top: 1.1rem !important; font-size: .82rem; }

/* Tablet: brand on top, the two link columns side by side */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; }
    .footer-brand { grid-column: 1 / -1; }
}
/* Phone: everything stacked with even gaps */
@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
}