/* =====================================================================
   AJONTec — Redesign layer (loaded LAST)
   A clean, simple, professional skin applied across the whole site.
   Theme-aware (uses the dynamic palette variables).
   ===================================================================== */

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--text-secondary);
    letter-spacing: -0.011em;
    line-height: 1.65;
}
h1, h2, h3, h4, h5 { color: var(--text-primary); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }

/* Kill dated effects */
.cursor-dot, .cursor-ring, .glow-orb { display: none !important; }
* { cursor: auto !important; }
a, button, .btn, [role="button"], label[for], input[type="checkbox"], input[type="radio"], select { cursor: pointer !important; }
input, textarea { cursor: text !important; }

/* Container width */
.container, .m-wrap { max-width: 1180px !important; margin: 0 auto; padding-left: 22px; padding-right: 22px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 10px;
    font-weight: 600; font-size: 0.95rem; line-height: 1;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    text-decoration: none;
}
.btn-primary {
    background: var(--accent-indigo) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 6px 18px rgba(var(--theme-primary-rgb), 0.28) !important;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--theme-primary-rgb), 0.4) !important; filter: brightness(1.05); }
.btn-outline {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
.btn-outline:hover { border-color: var(--accent-indigo) !important; background: rgba(var(--theme-primary-rgb), 0.08) !important; transform: translateY(-2px); }
.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Header / nav ---------- */
.header { border-bottom: 1px solid var(--border-color) !important; box-shadow: none !important; }
.header-container { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.logo-text { font-weight: 800 !important; font-size: 1.35rem !important; letter-spacing: -0.03em; }
.nav-item { font-weight: 500 !important; font-size: 0.95rem; color: var(--text-secondary) !important; }
.nav-item:hover, .nav-item.active { color: var(--text-primary) !important; }
.nav-item::after { height: 2px !important; background: var(--accent-indigo) !important; }
.btn-nav-cta { padding: 10px 18px !important; font-size: 0.9rem !important; }

.dropdown, .sub-dropdown {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.4) !important;
}
.dropdown > li > a:hover, .sub-dropdown > li > a:hover { background: rgba(var(--theme-primary-rgb), 0.12) !important; }

/* ---------- Section headers ---------- */
section { padding: 72px 0; }
.section-header-center, .section-header-left { margin-bottom: 2.4rem; }
.subtitle, .m-eyebrow {
    color: var(--accent-indigo) !important;
    font-weight: 700 !important; font-size: 0.76rem !important;
    letter-spacing: 0.12em !important; text-transform: uppercase;
    background: none !important; border: none !important; padding: 0 !important;
}
.title, .m-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important; font-weight: 800 !important; margin-bottom: 12px !important; }
.title-bar, .title-bar-center { height: 3px !important; width: 52px !important; border-radius: 3px; background: var(--accent-indigo) !important; box-shadow: none !important; }
.title-bar-center { margin-left: auto; margin-right: auto; }

/* ---------- Cards (unified, flat & clean) ---------- */
.service-card, .feature-card, .project-card, .stat-card, .testimonial-card,
.m-card, .m-feat, .m-stat, .team-card, .mv-card, .contact-card, .tech-badge,
.contact-form-wrapper, .map-wrapper, .slider-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.service-card:hover, .feature-card:hover, .project-card:hover,
.m-card:hover, .m-feat:hover, .team-card:hover, .mv-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.5) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.28) !important;
}
.m-card::after { display: none; }

/* Icon tiles — solid, clean (no heavy gradient glow) */
.m-card-ico, .m-feat-ico, .service-icon-box, .feature-icon-wrapper, .cc-icon, .contact-card .cc-icon, .mv-icon, .m-hub-ico {
    background: var(--accent-indigo) !important;
    box-shadow: none !important;
    color: #fff !important;
    border-radius: 12px !important;
}

/* ---------- Hero (home) ---------- */
.m-hero { padding: 120px 0 64px; }
.m-hero::before { opacity: .7; }
.m-hub { box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important; border-radius: 18px !important; }
.m-chip { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 128px 0 56px !important; border-bottom: 1px solid var(--border-color); }
.page-hero::before { background: radial-gradient(36rem 22rem at 50% -30%, rgba(var(--theme-primary-rgb),0.18), transparent 60%) !important; }
.page-hero .eyebrow { background: rgba(var(--theme-primary-rgb),0.1) !important; border: 1px solid rgba(var(--theme-primary-rgb),0.25) !important; color: var(--accent-indigo) !important; padding: 6px 14px !important; }
.breadcrumb a:hover { color: var(--accent-indigo) !important; }

/* ---------- Forms ---------- */
.contact-form .form-group label, .form-group label { color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; margin-bottom: 6px; display: block; }
.contact-form input, .contact-form textarea, .form-group input, .form-group textarea {
    background: rgba(var(--theme-bg-rgb), 0.5) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    padding: 12px 14px !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.contact-form input:focus, .contact-form textarea:focus, .form-group input:focus, .form-group textarea:focus {
    border-color: var(--accent-indigo) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.18) !important;
    outline: none !important;
}

/* ---------- Footer ---------- */
.footer { background: transparent !important; border-top: 1px solid var(--border-color); padding: 56px 0 24px !important; }
.footer-col h4 { color: var(--text-primary); font-size: 0.95rem; margin-bottom: 14px; }
.footer-links a, .footer-info-list a { color: var(--text-secondary) !important; transition: color .2s ease; }
.footer-links a:hover { color: var(--accent-indigo) !important; }
.footer-bottom { border-top: 1px solid var(--border-color); margin-top: 32px; padding-top: 20px; }
.socials { padding: 40px 0 !important; border-top: 1px solid var(--border-color); }
.social-icon { border-radius: 12px !important; border: 1px solid var(--border-color) !important; transition: transform .2s ease, background .2s ease !important; }
.social-icon:hover { transform: translateY(-3px); }

/* ---------- Stats numbers ---------- */
.stat-number { color: var(--text-primary) !important; }
.m-stat .stat-number { background: none !important; -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; }

/* ---------- Misc tidy ---------- */
.cta-strip, .m-cta { border-radius: 18px !important; box-shadow: none !important; border: 1px solid var(--border-color) !important; }
.back-to-top { border-radius: 12px !important; }
.tech-badge { border-radius: 12px !important; }
.project-tag { background: rgba(var(--theme-primary-rgb),0.12) !important; color: var(--accent-indigo) !important; border: none !important; }

/* Tame any leftover loud animations */
.reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade { transition-duration: .5s !important; }

/* ---------- Responsive polish ---------- */
@media (max-width: 768px) {
    section { padding: 52px 0; }
    .page-hero { padding: 104px 0 40px !important; }
    .header-container { height: 64px; }
}

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-5px); border-color: rgba(var(--theme-primary-rgb),0.5); box-shadow: 0 14px 36px rgba(0,0,0,0.28); }
.blog-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-card-hover); position: relative; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: #fff; background: var(--accent-indigo); }
.blog-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-cat { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-indigo); background: rgba(var(--theme-primary-rgb),0.12); padding: 4px 10px; border-radius: 999px; }
.blog-card-body h3 { font-size: 1.15rem; margin: 2px 0; line-height: 1.3; }
.blog-card-body h3 a { color: var(--text-primary); text-decoration: none; }
.blog-card-body h3 a:hover { color: var(--accent-indigo); }
.blog-card-body p { color: var(--text-secondary); font-size: 0.93rem; margin: 0; flex: 1; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--text-muted); font-size: 0.82rem; }

.blog-single-hero { padding: 120px 0 24px; text-align: left; }
.blog-single-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 12px 0; max-width: 820px; }
.blog-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; margin: 16px 0 30px; }
.blog-body { font-size: 1.06rem; }
.blog-body h2 { margin-top: 34px; }
.blog-body blockquote { border-left: 3px solid var(--accent-indigo); padding-left: 16px; margin: 22px 0; color: var(--text-primary); font-style: italic; }

@media (max-width: 992px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .blog-single-hero { padding: 104px 0 16px; } }

/* =====================================================================
   Home spacing fix + mobile + subscribe + notifications + cookie
   ===================================================================== */

/* Consistent, tighter section rhythm on the home page */
.m-section { padding: 60px 0 !important; }
.m-section-sm { padding: 36px 0 !important; }
.pt-0 { padding-top: 0 !important; }
.m-head { margin-bottom: 34px; }
.m-center-btn { text-align: center; margin-top: 30px; }
.m-hero { padding: 116px 0 56px !important; }
.m-hero-grid { gap: 48px; }

/* ---- Subscribe band ---- */
.subscribe-band {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    padding: 34px 36px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb),0.16), rgba(var(--theme-accent-rgb),0.10)), var(--bg-card);
    border: 1px solid var(--border-color);
}
.subscribe-text h2 { font-size: 1.5rem; margin: 0 0 6px; }
.subscribe-text p { color: var(--text-secondary); margin: 0; }
.subscribe-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 460px; }
.subscribe-form input {
    flex: 1; padding: 13px 16px; border-radius: 10px;
    background: var(--bg-base); border: 1px solid var(--border-color); color: var(--text-primary);
}
.subscribe-form input:focus { outline: none; border-color: var(--accent-indigo); box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb),0.18); }
.subscribe-success { text-align: center; color: #22c55e; margin-top: 14px; font-weight: 600; }
.subscribe-error { text-align: center; color: #ef4444; margin-top: 14px; }

/* ---- Notification toast (with logo) ---- */
.aj-noti {
    position: fixed; left: 22px; bottom: 22px; z-index: 2600;
    max-width: 360px; width: calc(100% - 44px);
    opacity: 0; transform: translateY(20px); visibility: hidden;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.aj-noti.show { opacity: 1; transform: translateY(0); visibility: visible; }
.aj-noti-card {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--bg-card-hover); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.aj-noti-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: 0 0 42px; }
.aj-noti-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.aj-noti-body strong { color: var(--text-primary); font-size: 0.95rem; }
.aj-noti-body span { color: var(--text-secondary); font-size: 0.86rem; }
.aj-noti-body a { color: var(--accent-indigo); font-size: 0.85rem; font-weight: 600; margin-top: 2px; }
.aj-noti-x { background: none; border: none; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.aj-noti-x:hover { color: var(--text-primary); }

/* ---- Cookie consent ---- */
.aj-cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2500;
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    background: var(--bg-card-hover); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 16px 20px; box-shadow: 0 18px 44px rgba(0,0,0,0.4);
    opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease;
}
.aj-cookie.show { opacity: 1; transform: translateY(0); }
.aj-cookie p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; flex: 1; min-width: 240px; }
.aj-cookie p a { color: var(--accent-indigo); }
.aj-cookie-actions { display: flex; gap: 10px; }
.aj-cookie .btn { padding: 9px 18px; }

/* =====================================================================
   MOBILE — make the whole site genuinely responsive
   ===================================================================== */
@media (max-width: 920px) {
    .m-hero-grid { grid-template-columns: 1fr !important; gap: 32px; }
    .m-hero { padding: 100px 0 44px !important; }
    .m-cards, .m-feats { grid-template-columns: repeat(2, 1fr) !important; }
    .m-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .contact-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .m-wrap, .container { padding-left: 18px !important; padding-right: 18px !important; }
    .m-section { padding: 44px 0 !important; }
    .m-section-sm { padding: 28px 0 !important; }
    .m-hero { padding: 92px 0 36px !important; }
    .m-hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; }
    .m-hero p { font-size: 1rem !important; }
    .m-cards, .m-feats, .m-stats, .blog-grid, .services-grid, .features-grid, .projects-grid, .team-grid, .footer-grid { grid-template-columns: 1fr !important; }
    .m-head { margin-bottom: 24px; }
    .m-hero-actions, .m-cta-actions { flex-direction: column; }
    .m-hero-actions .btn, .m-cta-actions .btn { width: 100%; justify-content: center; }
    .subscribe-band { flex-direction: column; align-items: stretch; text-align: center; padding: 26px 20px; }
    .subscribe-form { max-width: none; }
    .m-hub { padding: 16px !important; }
    .aj-noti { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
    .aj-cookie { flex-direction: column; align-items: stretch; text-align: center; }
    .aj-cookie-actions { justify-content: center; }
    .cta-strip, .m-cta { padding: 32px 20px !important; }
}

/* =====================================================================
   Authoritative mobile navigation (fixes hamburger + slide panel)
   ===================================================================== */
@media (max-width: 992px) {
    .menu-toggle-btn {
        display: flex !important;
        flex-direction: column; justify-content: center; align-items: center;
        gap: 5px; width: 44px; height: 44px; border-radius: 10px;
        background: var(--bg-card); border: 1px solid var(--border-color);
        cursor: pointer; z-index: 95; position: relative;
    }
    .menu-toggle-btn .bar { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: .3s; display: block; }
    .menu-toggle-checkbox:checked ~ .menu-toggle-btn .bar-1 { transform: translateY(7px) rotate(45deg); }
    .menu-toggle-checkbox:checked ~ .menu-toggle-btn .bar-2 { opacity: 0; }
    .menu-toggle-checkbox:checked ~ .menu-toggle-btn .bar-3 { transform: translateY(-7px) rotate(-45deg); }

    .navbar {
        position: fixed !important;
        top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
        width: min(320px, 86vw) !important; height: 100vh !important;
        flex-direction: column !important; align-items: flex-start !important;
        gap: 4px !important; padding: 90px 22px 30px !important;
        background: var(--bg-card-hover) !important;
        backdrop-filter: blur(20px) !important;
        border-left: 1px solid var(--border-color) !important;
        transform: translateX(105%) !important;
        transition: transform .35s cubic-bezier(.16,1,.3,1) !important;
        overflow-y: auto !important; z-index: 90 !important; border-radius: 0 !important;
    }
    .menu-toggle-checkbox:checked ~ .navbar { transform: translateX(0) !important; }
    .navbar .nav-links { flex-direction: column !important; align-items: flex-start !important; width: 100%; gap: 2px; }
    .navbar .nav-links li { width: 100%; }
    .navbar .nav-item { display: block; padding: 11px 0; width: 100%; }
    .navbar .btn-nav-cta { margin-top: 16px; width: 100%; justify-content: center; }
    /* dropdowns are collapsed by default on mobile; JS toggles .open
       on the caret click. When closed they take ZERO space (no empty
       white box) — only when .open is added do they expand. */
    .navbar .dropdown, .navbar .sub-dropdown {
        position: static !important; transform: none !important;
        box-shadow: none !important; background: transparent !important;
        border: none !important; min-width: auto !important;
        max-height: 0 !important; overflow: hidden !important;
        opacity: 0 !important; visibility: hidden !important;
        margin: 0 !important; padding: 0 !important;
        transition: max-height .3s ease, opacity .25s ease, padding .3s ease !important;
    }
    .navbar .has-dropdown.open > .dropdown,
    .navbar .has-sub.open > .sub-dropdown {
        max-height: 600px !important;
        opacity: 1 !important; visibility: visible !important;
        padding: 2px 0 8px 0 !important;
    }
    .navbar .caret, .navbar .caret-right {
        cursor: pointer;
        padding: 10px;
        margin: -10px -10px -10px 0;
    }
    .navbar .has-dropdown.open > .nav-item .caret,
    .navbar .has-sub.open > a .caret-right { transform: rotate(180deg) !important; }

    /* Kill the desktop card-box look on mobile — submenu should be flat
       and clean (no background box, border, shadow, or radius) */
    .navbar .dropdown, .navbar .sub-dropdown {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Clean, simple submenu items — plain indented links, no box/border */
    .navbar .dropdown > li > a,
    .navbar .sub-dropdown > li > a {
        display: block !important;
        padding: 10px 0 10px 20px !important;
        font-size: 0.9rem !important;
        color: var(--text-secondary) !important;
        border: none !important;
        background: transparent !important;
    }
    .navbar .dropdown > li > a:hover,
    .navbar .sub-dropdown > li > a:hover {
        color: var(--accent-indigo) !important;
        background: transparent !important;
        padding-left: 24px !important;
    }
}
@media (min-width: 993px) {
    .menu-toggle-btn { display: none !important; }
}

/* =====================================================================
   v6 — 4-card grids, contact redesign, about, testimonials, gallery
   ===================================================================== */

/* 4 cards per row for projects, portfolio, blog */
.projects-grid, .blog-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }

/* Testimonials — compact 4-up grid */
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.t-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; transition: transform .25s ease, border-color .25s ease; }
.t-card:hover { transform: translateY(-4px); border-color: rgba(var(--theme-primary-rgb),0.5); }
.t-stars { display: flex; gap: 2px; margin-bottom: 10px; }
.t-stars svg { fill: #fbbf24; }
.t-text { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin: 0 0 16px; }
.t-user { display: flex; align-items: center; gap: 10px; }
.t-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.t-meta strong { display: block; font-size: 0.9rem; color: var(--text-primary); }
.t-meta span { font-size: 0.78rem; color: var(--text-muted); }

/* Contact — details + map (left), form (right) */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr !important; gap: 30px; align-items: start; }
.contact-left { display: flex; flex-direction: column; gap: 22px; }
.contact-left .contact-info { margin: 0; }
.contact-left .map-wrapper { min-height: 280px; }
.contact-left .map-wrapper iframe, .contact-left .map-wrapper .map-placeholder { min-height: 300px; }
.contact-right .contact-form-wrapper { margin: 0; position: sticky; top: 90px; }

/* About — content left, image right, stats one line below */
.about-container.ab-2col { display: grid; grid-template-columns: 1fr 1fr !important; gap: 40px; align-items: center; }
.ab-2col .about-image-wrapper { order: 2; }
.ab-2col .about-content { order: 1; }
.about-img { width: 100%; border-radius: 18px; }
.ab-stats-row { margin-top: 38px; }
.ab-stats-row .about-stats-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-item { margin: 0; position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid var(--border-color); aspect-ratio: 1/1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item figcaption { position: absolute; inset: auto 0 0 0; padding: 14px 12px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; opacity: 0; transition: opacity .3s ease; }
.gallery-item:hover figcaption { opacity: 1; }
.gallery-item figcaption strong { display: block; font-size: 0.9rem; }
.gallery-item figcaption span { font-size: 0.78rem; opacity: 0.85; }

.aj-lightbox { position: fixed; inset: 0; z-index: 3200; display: none; place-items: center; background: rgba(0,0,0,0.9); padding: 30px; }
.aj-lightbox.show { display: grid; }
.aj-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; }
.aj-lightbox-close { position: absolute; top: 20px; right: 28px; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1; }

/* ---- Responsive for the 4-up grids ---- */
@media (max-width: 1100px) {
    .projects-grid, .blog-grid, .t-grid, .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 880px) {
    .projects-grid, .blog-grid, .t-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .contact-layout { grid-template-columns: 1fr !important; }
    .about-container.ab-2col { grid-template-columns: 1fr !important; gap: 28px; }
    .ab-2col .about-image-wrapper { order: 1; }
    .ab-2col .about-content { order: 2; }
    .ab-stats-row .about-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .contact-right .contact-form-wrapper { position: static; }
}
@media (max-width: 560px) {
    .projects-grid, .blog-grid, .t-grid, .gallery-grid { grid-template-columns: 1fr !important; }
    .ab-stats-row .about-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =====================================================================
   THEME MODES — light / dark / night (front).
   Preset still controls the accent colour; mode controls surfaces.
   ===================================================================== */

/* DARK (default surfaces) */
html[data-mode="dark"] {
    --bg-base:#0b0f1a; --bg-deep:#070a12; --bg-card:#121826; --bg-card-hover:#1a2234;
    --text-primary:#f1f5f9; --text-secondary:#aeb9cc; --text-muted:#7b8699;
    --border-color:rgba(255,255,255,0.08); --border-hover:rgba(255,255,255,0.16);
}
html[data-mode="dark"] body { background-color:#0b0f1a !important; }

/* NIGHT (deep, dimmed, warmer dark — easier on the eyes) */
html[data-mode="night"] {
    --bg-base:#0a0a10; --bg-deep:#060609; --bg-card:#13131c; --bg-card-hover:#1b1b27;
    --text-primary:#e6e3da; --text-secondary:#a8a499; --text-muted:#736f64;
    --border-color:rgba(255,240,210,0.07); --border-hover:rgba(255,240,210,0.14);
}
html[data-mode="night"] body { background-color:#0a0a10 !important; }
html[data-mode="night"] .header { background:rgba(12,12,18,0.85)!important; }
html[data-mode="night"] .footer { background:#0d0d15!important; }

/* LIGHT */
html[data-mode="light"] {
    --bg-base:#f1f5f9; --bg-deep:#e2e8f0; --bg-card:#ffffff; --bg-card-hover:#ffffff;
    --text-primary:#0f172a; --text-secondary:#475569; --text-muted:#64748b;
    --border-color:#e2e8f0; --border-hover:#cbd5e1;
}
html[data-mode="light"] body { background-color:#f1f5f9 !important; color:#0f172a; }
html[data-mode="light"] .header { background:rgba(255,255,255,0.85)!important; box-shadow:0 1px 0 rgba(0,0,0,0.05); }
html[data-mode="light"] .header.scrolled { background:rgba(255,255,255,0.96)!important; }
html[data-mode="light"] .footer { background:#ffffff!important; border-top:1px solid #e2e8f0; }
html[data-mode="light"] .dropdown, html[data-mode="light"] .sub-dropdown { background:#ffffff!important; border:1px solid #e2e8f0!important; }
html[data-mode="light"] .dropdown > li > a { color:#334155!important; }
html[data-mode="light"] .nav-item { color:#1f2937; }
html[data-mode="light"] .navbar { background:#ffffff!important; }
html[data-mode="light"] .t-stars svg { fill:#f59e0b; }

/* Floating mode toggle button */
.aj-mode-toggle {
    position: fixed; right: 22px; bottom: 22px; z-index: 2400;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-card-hover); border: 1px solid var(--border-color);
    color: var(--text-primary); cursor: pointer; font-size: 1.25rem;
    display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: transform .2s ease, border-color .2s ease;
}
.aj-mode-toggle:hover { transform: scale(1.08); border-color: var(--accent-indigo); }
@media (max-width: 600px) { .aj-mode-toggle { right: 14px; bottom: 78px; width: 44px; height: 44px; } }

/* =====================================================================
   Floating action stack — WhatsApp + mode + back-to-top (right side)
   ===================================================================== */
.aj-wa {
    position: fixed; right: 22px; bottom: 22px; z-index: 2400;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25D366; color: #fff; display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(37,211,102,0.45); transition: transform .2s ease;
}
.aj-wa:hover { transform: scale(1.08); }

/* lift the mode toggle above WhatsApp */
.aj-mode-toggle { bottom: 86px !important; }

.aj-top {
    position: fixed; right: 22px; bottom: 150px; z-index: 2400;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-card-hover); border: 1px solid var(--border-color);
    color: var(--text-primary); cursor: pointer; display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s ease;
}
.aj-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.aj-top:hover { border-color: var(--accent-indigo); transform: scale(1.06); }

@media (max-width: 600px) {
    .aj-wa { right: 14px; bottom: 16px; width: 50px; height: 50px; }
    .aj-mode-toggle { right: 14px; bottom: 76px !important; }
    .aj-top { right: 14px; bottom: 134px; width: 44px; height: 44px; }
}

/* On-site search */
.search-bar { display: flex; gap: 10px; }
.search-bar input { flex: 1; padding: 14px 18px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 1rem; }
.search-bar input:focus { outline: none; border-color: var(--accent-indigo); box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb),0.18); }
.search-results { display: flex; flex-direction: column; gap: 12px; }
.search-item { display: block; padding: 18px 20px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.search-item:hover { border-color: var(--accent-indigo); transform: translateY(-2px); }
.search-type { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-indigo); background: rgba(var(--theme-primary-rgb),0.12); padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }
.search-item strong { display: block; color: var(--text-primary); font-size: 1.05rem; margin-bottom: 4px; }
.search-item p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }
@media (max-width: 560px){ .search-bar { flex-direction: column; } }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { width: 18px; height: 18px; position: relative; flex: 0 0 18px; }
.faq-ico::before, .faq-ico::after { content: ''; position: absolute; background: var(--accent-indigo); border-radius: 2px; transition: .25s; }
.faq-ico::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-ico::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item[open] .faq-ico::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { padding: 0 22px 20px; color: var(--text-secondary); line-height: 1.7; }

/* Live chat bubble offset so it doesn't overlap our stack on mobile */
@media (max-width: 600px){ .aj-wa { bottom: 80px; } }

/* =====================================================================
   Footer / Socials — tightened spacing fix (final overrides, loads last)
   Reduces excess top/bottom whitespace and inter-column padding, and
   makes the footer + socials fully responsive on mobile (no overflow,
   comfortable icon spacing, tighter stacked layout on small screens).
   ===================================================================== */
.socials { padding: 2.5rem 0 !important; }
.socials-heading { margin-bottom: 1.5rem !important; }
.social-icons-wrapper { gap: 1rem !important; }

.footer { padding: 3rem 0 1.25rem 0 !important; }
.footer-grid { gap: 2.25rem !important; margin-bottom: 2rem !important; }
.footer-brand { gap: 0.9rem !important; }
.footer-col h4 { margin-bottom: 0.9rem !important; }
.footer-links, .footer-info-list { gap: 0.55rem !important; }
.footer-bottom { padding-top: 1.25rem !important; margin-top: 0 !important; }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.75rem !important; }
}

@media (max-width: 600px) {
    .socials { padding: 2rem 0 !important; }
    .social-icons-wrapper { gap: 0.75rem !important; }
    .social-icon { width: 44px !important; height: 44px !important; }
    .social-icon svg { width: 19px !important; height: 19px !important; }

    .footer { padding: 2.25rem 0 1rem 0 !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; margin-bottom: 1.5rem !important; text-align: left !important; }
    .footer-bottom { padding-top: 1rem !important; }
    .footer-bottom-container { flex-direction: column !important; gap: 0.75rem !important; text-align: center !important; }
    .footer-bottom-links { gap: 1.1rem !important; flex-wrap: wrap !important; justify-content: center !important; }

    /* keep the floating action stack clear of page edges on very small screens */
    .aj-wa, .aj-mode-toggle, .aj-top { right: 12px !important; }
}

@media (max-width: 380px) {
    .social-icons-wrapper { gap: 0.6rem !important; }
    .footer-grid { gap: 1.4rem !important; }
}

/* =====================================================================
   Spacing tightening pass v2 — smaller/compact cards, no oversized empty
   grid space when there are fewer items than columns, reduced gap
   between hero and the next section, and blog card compacting.
   ===================================================================== */

/* Projects / Blog grids: cap card width and collapse unused columns
   instead of forcing 4 equal-width tracks (which left a big blank gap
   when fewer than 4 items exist). Cards also sit closer together. */
.projects-grid, .blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 280px)) !important;
    gap: 18px !important;
    justify-content: start !important;
}
@media (max-width: 1100px) {
    .projects-grid, .blog-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
}
@media (max-width: 560px) {
    .projects-grid, .blog-grid { grid-template-columns: 1fr !important; }
}

/* Compact blog cards to match the smaller project cards */
.blog-card-body { padding: 16px !important; gap: 6px !important; }
.blog-card-body h3 { font-size: 1.02rem !important; }
.blog-card-body p { font-size: 0.86rem !important; }

/* Reduce the gap between the hero section and the section right after it */
.m-hero { padding-bottom: 32px !important; }
.m-section { padding: 44px 0 !important; }
.m-section-sm { padding: 26px 0 !important; }
.m-head { margin-bottom: 22px !important; }

@media (max-width: 768px) {
    .m-hero { padding-bottom: 26px !important; }
    .m-section { padding: 34px 0 !important; }
    .m-section-sm { padding: 20px 0 !important; }
}

/* =====================================================================
   Homepage compacting v3 — smaller service/feature/project cards with
   clamped text, plus a "click card to read full content" modal.
   ===================================================================== */

/* Service cards ("What AjonTec Offers") — smaller, 2-line description */
.m-card { padding: 18px 16px !important; border-radius: 14px !important; }
.m-card-ico { width: 42px !important; height: 42px !important; border-radius: 11px !important; margin-bottom: 10px !important; }
.m-card h3 { font-size: 1rem !important; margin: 0 0 5px !important; }
.m-card p {
    font-size: 0.85rem !important; line-height: 1.5 !important; margin: 0 0 6px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.m-cards { gap: 14px !important; }

/* Feature cards ("Why AjonTec") — smaller, 2-line description */
.m-feat { padding: 14px !important; gap: 10px !important; border-radius: 12px !important; }
.m-feat-ico { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 9px !important; }
.m-feat h3 { font-size: 0.92rem !important; margin: 2px 0 3px !important; }
.m-feat p {
    font-size: 0.82rem !important; line-height: 1.45 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.m-feats { gap: 14px !important; }

/* Project cards — clamp description to 2 lines too */
.project-info p {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Clickable-card affordance + "Read more" hint (added by JS) */
.aj-expandable { cursor: pointer; }
.aj-expandable:focus-visible { outline: 2px solid var(--accent-indigo); outline-offset: 2px; }
.aj-readmore-hint {
    display: inline-block; font-size: 0.76rem; font-weight: 700;
    color: var(--accent-indigo); margin: -2px 0 8px;
}
.aj-readmore-hint::after { content: ' →'; }

/* Read More modal */
.aj-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 5000;
    background: rgba(6, 8, 20, 0.72); backdrop-filter: blur(3px);
    padding: 20px; place-items: center;
}
.aj-modal-overlay.show { display: grid; }
.aj-modal-box {
    position: relative; width: 100%; max-width: 460px; max-height: 82vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px;
    padding: 30px 26px 26px; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.aj-modal-icon {
    width: 48px; height: 48px; border-radius: 13px; display: none; place-items: center;
    color: #fff; background: var(--gradient-primary, var(--accent-indigo)); margin-bottom: 14px;
}
.aj-modal-icon svg { width: 22px; height: 22px; }
.aj-modal-box h3 { font-size: 1.2rem; margin: 0 0 10px; color: var(--text-primary); }
.aj-modal-box p { font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.aj-modal-close {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-color); background: var(--bg-card-hover, transparent);
    color: var(--text-primary); font-size: 1.3rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
}
.aj-modal-close:hover { border-color: var(--accent-indigo); }

@media (max-width: 560px) {
    .aj-modal-box { padding: 24px 20px 20px; }
}

/* =====================================================================
   Round 4 — header/mobile-menu fix, floating button stack cleanup,
   footer bottom-space cleanup.
   ===================================================================== */

/* Safety net: force header to always sit fixed & on top, above everything,
   with no ancestor transform (the header no longer sets transform itself —
   see style.css — but this guards against future accidental regressions). */
.header { position: fixed !important; z-index: 1000 !important; }

/* ---- Floating action stack (WhatsApp / mode toggle / back-to-top) ----
   Single, final source of truth — earlier scattered rules across the
   file are superseded by this block since it loads last. Fixes buttons
   rendering on top of each other on mobile, and makes them smaller. */
.aj-wa, .aj-mode-toggle, .aj-top {
    right: 20px !important; left: auto !important;
}
.aj-wa       { bottom: 20px  !important; width: 52px !important; height: 52px !important; }
.aj-mode-toggle { bottom: 82px  !important; width: 46px !important; height: 46px !important; }
.aj-top      { bottom: 140px !important; width: 46px !important; height: 46px !important; }

@media (max-width: 600px) {
    .aj-wa, .aj-mode-toggle, .aj-top { right: 14px !important; }
    .aj-wa          { bottom: 14px  !important; width: 46px !important; height: 46px !important; }
    .aj-mode-toggle { bottom: 66px  !important; width: 40px !important; height: 40px !important; }
    .aj-top         { bottom: 116px !important; width: 40px !important; height: 40px !important; }
}

/* Footer — remove any residual bottom whitespace */
.footer-bottom { margin-bottom: 0 !important; }
.footer { margin-bottom: 0 !important; }
body { margin-bottom: 0 !important; }

/* =====================================================================
   Round 5 — Carousels (auto-slide + manual arrows/dots) for every card
   grid: services, features, projects, blog. Progressive enhancement —
   JS adds arrows/dots; without JS these still work as a normal
   horizontally-scrollable row.
   ===================================================================== */
.m-cards, .m-feats, .projects-grid, .blog-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 16px !important;
    padding-bottom: 6px !important;
}
.m-cards::-webkit-scrollbar, .m-feats::-webkit-scrollbar,
.projects-grid::-webkit-scrollbar, .blog-grid::-webkit-scrollbar { display: none; height: 0; }

.m-card, .m-feat, .project-card, .blog-card {
    scroll-snap-align: start;
    flex: 0 0 auto !important;
    width: min(270px, 80vw) !important;
}
@media (min-width: 640px) {
    .m-card, .m-feat, .project-card, .blog-card { width: 250px !important; }
}
@media (min-width: 1024px) {
    .m-card, .m-feat, .project-card, .blog-card { width: 265px !important; }
}

/* Carousel wrapper (JS wraps just the track in this, so arrows/dots
   align to the card row itself, not the whole section) */
.aj-carousel-wrap { position: relative; display: block; width: 100%; overflow: visible; }

.aj-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%; z-index: 20;
    display: grid; place-items: center; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-primary); box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    font-size: 1.3rem; line-height: 1; transition: transform .2s ease, border-color .2s ease;
}
.aj-carousel-arrow:hover { border-color: var(--accent-indigo); transform: translateY(-50%) scale(1.08); }
.aj-carousel-prev { left: -6px; }
.aj-carousel-next { right: -6px; }
@media (max-width: 640px) {
    .aj-carousel-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
    .aj-carousel-prev { left: -2px; }
    .aj-carousel-next { right: -2px; }
}

.aj-carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.aj-carousel-dot {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
    background: var(--border-color); cursor: pointer; transition: all .2s ease;
}
.aj-carousel-dot.active { width: 20px; border-radius: 4px; background: var(--accent-indigo); }

/* =====================================================================
   Round 7 — final mobile-hardening pass + footer bottom-space zeroed out
   ===================================================================== */

/* Safety net: no image/svg/video/iframe can ever overflow its container
   and cause horizontal scrolling on mobile (a very common "not
   responsive" bug when a stray image has no width constraint). */
img, svg, video, iframe { max-width: 100%; }

/* Header — comfortable spacing on small phones */
@media (max-width: 480px) {
    .header-container { padding: 0 14px !important; }
    .logo-text { font-size: 1.05rem !important; }
}

/* Hero hub card + chips never overflow narrow phones */
@media (max-width: 420px) {
    .m-chip { font-size: 0.78rem !important; padding: 6px 10px !important; }
    .m-hub-txt small { display: none; } /* keep hub rows compact on very small screens */
}

/* ---- Footer: remove ALL residual bottom whitespace, for real this time ---- */
html, body { height: auto !important; }
footer.footer { margin: 0 !important; padding-bottom: 0 !important; }
.footer-bottom {
    margin: 0 !important;
    padding: 14px 0 !important;
}
.footer-bottom-container { margin: 0 !important; }
@media (max-width: 600px) {
    .footer-bottom { padding: 12px 0 !important; }
}

/* =====================================================================
   Round 8 — True sticky-footer fix.
   Previous rounds only reduced padding, but the empty space below the
   footer on short pages is normal browser behaviour (page content ends
   before the viewport does — every website does this on a tall screen
   with short content). This is the correct, permanent fix: pin the
   footer to the bottom of the viewport when content is short, and let
   it flow naturally after content when the page is long. Zero gap,
   either way, guaranteed.
   ===================================================================== */
html, body { height: 100%; }
body { display: flex !important; flex-direction: column !important; min-height: 100vh; }
body > footer.footer { margin-top: auto !important; }

/* =====================================================================
   Round 10 — COMPREHENSIVE anti-overflow + mobile hardening (A-to-Z).
   Goal: nothing ever gets cut off on the right on ANY device, and the
   whole site stays comfortably within the screen width.
   ===================================================================== */

/* 1) Hard stop horizontal scrolling at the root level */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 2) Universal box-sizing so padding never adds to width and pushes
      elements past the screen edge */
*, *::before, *::after { box-sizing: border-box; }

/* 3) Any element that tries to be wider than its parent gets reined in.
      This is the single most effective fix for "content cut off on the
      right" across an entire site. */
img, svg, video, iframe, canvas, table, pre, figure { max-width: 100% !important; }

/* 4) The newsletter / subscribe form was overflowing on small phones
      because of a fixed min-width. Let it shrink and wrap safely. */
.subscribe-form { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
@media (max-width: 600px) {
    .subscribe-form { flex-direction: column !important; }
    .subscribe-form input, .subscribe-form .btn { width: 100% !important; }
    .subscribe-band { padding: 22px 18px !important; }
}

/* 5) Contact form + map never exceed their column on mobile */
@media (max-width: 880px) {
    .contact-form-wrapper, .map-wrapper, .contact-left, .contact-right {
        width: 100% !important; max-width: 100% !important;
    }
}

/* 6) Hero hub card + service chips never spill off the edge */
.m-hub, .m-hero-grid > * { max-width: 100% !important; min-width: 0 !important; }
.m-chips { max-width: 100%; }

/* 7) Long unbroken text/URLs (e.g. emails) wrap instead of stretching
      the layout */
p, a, li, span, h1, h2, h3, h4, td { overflow-wrap: break-word; word-wrap: break-word; }

/* 8) Comfortable side gutters on phones so content never touches edges */
@media (max-width: 600px) {
    .container, .m-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 380px) {
    .container, .m-wrap { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =====================================================================
   Round 11 — Text-visibility safety net for ALL modes (light/dark/night)
   Guarantees no text ever becomes invisible against its background,
   regardless of which theme/festival preset is active.
   ===================================================================== */

/* Headings & body copy always follow the theme's text variables, so a
   light festival theme shows dark text and a dark one shows light text. */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
p, li, td, th, label, .m-sub, .footer-desc { color: var(--text-secondary); }

/* Light-mode readability: elements that assume a dark backdrop get fixed */
html[data-mode="light"] .page-body h2,
html[data-mode="light"] .page-body h3,
html[data-mode="light"] .m-title,
html[data-mode="light"] .title,
html[data-mode="light"] .hero-title,
html[data-mode="light"] .m-hero h1 { color: var(--text-primary) !important; }

html[data-mode="light"] .m-card p,
html[data-mode="light"] .m-feat p,
html[data-mode="light"] .project-info p,
html[data-mode="light"] .blog-card-body p,
html[data-mode="light"] .footer-desc { color: var(--text-secondary) !important; }

/* Buttons/badges/icon-boxes that sit on a coloured gradient keep white
   text in every mode (they're never on the page background). */
.btn-primary, .m-card-ico, .m-feat-ico, .m-hub-ico, .m-hub-logo,
.cc-icon, .contact-card .cc-icon, .m-eyebrow, .badge, .stat-icon,
.social-icon:hover, .aj-wa { color: #fff; }

/* Eyebrow/subtitle labels use the accent colour so they pop in any theme */
.m-eyebrow, .subtitle, .blog-cat, .search-type { color: var(--accent-indigo) !important; }

/* Night mode: ensure secondary text isn't too dim to read */
html[data-mode="night"] { --text-secondary: #bdb8ac; --text-muted: #8a8578; }

/* Light festival themes: cards get a subtle border so white cards on a
   light background still have definition */
html[data-mode="light"] .m-card,
html[data-mode="light"] .m-feat,
html[data-mode="light"] .project-card,
html[data-mode="light"] .blog-card,
html[data-mode="light"] .contact-card,
html[data-mode="light"] .t-card {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}