/* ==========================================================================
   mcAdware Solutions — Exotic FX (background canvas, cursor glow, typewriter,
   animated grid, shimmering cards, gradient borders, neon accents)
   ========================================================================== */

/* Background animated canvas */
#bgFx {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
}
[data-bs-theme="dark"] #bgFx { opacity: .85; }

/* Keep page content above canvas */
.main-wrapper { position: relative; z-index: 1; }

/* Soft cursor spotlight */
#cursorGlow {
    position: fixed;
    top: 0; left: 0;
    width: 400px; height: 400px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(6,182,212,0.10) 35%, transparent 70%);
    mix-blend-mode: screen;
    transition: transform .08s linear;
    will-change: transform;
}
@media (pointer: coarse) { #cursorGlow { display: none; } }
[data-bs-theme="dark"] #cursorGlow {
    background: radial-gradient(circle, rgba(124,58,237,0.35) 0%, rgba(6,182,212,0.22) 35%, transparent 70%);
}

/* Animated grid overlay on hero */
.hero-section::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
    animation: gridShift 18s linear infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes gridShift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 40px 40px, 40px 40px; }
}

/* Hero gradient typewriter text + caret */
.hero-gradient-text {
    background: linear-gradient(135deg, #fde68a 0%, #c89b3c 50%, #ffd9a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: hueShift 7s ease-in-out infinite;
}
@keyframes hueShift {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}
.tw-caret {
    display: inline-block;
    margin-left: 4px;
    color: #fde68a;
    font-weight: 300;
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* Gradient-border premium cards (shimmer on hover) */
.modern-grid-card,
.timeline-card,
.estimator-card,
.tech-item,
.stat-box,
.client-logo {
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.modern-grid-card::after,
.timeline-card::after,
.estimator-card::after,
.tech-item::after,
.stat-box::after,
.client-logo::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(122,22,18,0.65), rgba(200,155,60,0.55), rgba(0,7,23,0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 2;
}
.modern-grid-card:hover::after,
.timeline-card:hover::after,
.estimator-card:hover::after,
.tech-item:hover::after,
.stat-box:hover::after,
.client-logo:hover::after { opacity: 1; }

/* Shimmer sweep on service cards */
.modern-grid-card .service-icon-box {
    position: relative;
    overflow: hidden;
    transition: transform .4s ease;
}
.modern-grid-card:hover .service-icon-box { transform: rotate(-6deg) scale(1.08); }
.modern-grid-card .service-icon-box::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s ease;
}
.modern-grid-card:hover .service-icon-box::after { transform: translateX(120%); }

/* Section-tag — animated underline */
.section-tag {
    position: relative;
    overflow: hidden;
}
.section-tag::after {
    content: "";
    position: absolute; left: -100%; top: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: tagShine 3.5s ease-in-out infinite;
}
@keyframes tagShine { 60%, 100% { left: 100%; } }

/* Glowing nav links */
.main-menu .nav-link {
    position: relative;
    transition: color .25s ease;
}
.main-menu .nav-link::after {
    content: "";
    position: absolute; left: 50%; bottom: 4px;
    width: 0; height: 2px;
    background: var(--mca-grad);
    transition: width .3s ease, left .3s ease;
}
.main-menu .nav-link:hover::after { width: 70%; left: 15%; }
.main-menu .nav-link:hover { color: var(--mca-primary) !important; }

/* Tech-item neon pulse */
.tech-item { background: linear-gradient(180deg, #ffffff, #fafbff); }
.tech-item:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 25px 45px -20px rgba(122,22,18,0.45); }
.tech-item i { transition: transform .4s ease; }
.tech-item:hover i { transform: scale(1.2) rotate(8deg); }

/* Workflow timeline — glowing badge */
.timeline-badge {
    position: relative;
}
.timeline-badge::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: var(--mca-grad);
    filter: blur(14px);
    opacity: .55;
    z-index: -1;
    animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow { 50% { transform: scale(1.15); opacity: .85; } }

/* Estimator option — neon outline */
.estimator-option {
    background: linear-gradient(180deg, #ffffff, #f5f7ff);
    box-shadow: inset 0 0 0 0 rgba(122,22,18,0);
}
.estimator-option.selected { box-shadow: 0 0 0 3px rgba(122,22,18,0.25), 0 16px 35px -12px rgba(122,22,18,0.55); }

/* Dark theme tweaks for FX */
[data-bs-theme="dark"] .tech-item { background: linear-gradient(180deg, #131a2e, #0f1426); }
[data-bs-theme="dark"] .estimator-option { background: linear-gradient(180deg, #131a2e, #0f1426); }
[data-bs-theme="dark"] .hero-section::before {
    background-image:
        linear-gradient(rgba(122,22,18,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,155,60,0.10) 1px, transparent 1px);
}

/* Subtle scroll-driven gradient ring on hero image */
.hero-img::before {
    content: "";
    position: absolute; inset: -10%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(122,22,18,0), rgba(122,22,18,0.45), rgba(200,155,60,0.45), rgba(122,22,18,0));
    filter: blur(40px);
    animation: spinSlow 20s linear infinite;
    z-index: 0;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Selection styling */
::selection { background: rgba(122,22,18,0.35); color: #fff; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Classy upgrades — scroll progress, glass nav, marquee, ticker, headings
   ========================================================================== */

/* Top scroll progress */
#scrollProgress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #000717, #7a1612, #c89b3c, #7a1612);
    background-size: 300% 100%;
    z-index: 1100;
    box-shadow: 0 0 12px rgba(122,22,18,0.7);
    animation: progressHue 6s linear infinite;
    transition: transform .12s linear;
}
@keyframes progressHue { to { background-position: 300% 0; } }

/* Glass navbar on scroll */
.main-header { transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, padding .35s ease; }
.main-header.is-scrolled {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.72);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 8px 30px -20px rgba(15,23,42,0.35);
    z-index: 1040;
    animation: navDrop .35s ease;
}
[data-bs-theme="dark"] .main-header.is-scrolled {
    background: rgba(15,20,38,0.72);
    box-shadow: 0 8px 30px -20px rgba(0,0,0,0.6);
}
@keyframes navDrop { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Section H2 — premium gradient + decorative bar */
section h2:not(.text-white) {
    font-weight: 800;
    background: linear-gradient(135deg, #000717 0%, #7a1612 60%, #c89b3c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
[data-bs-theme="dark"] section h2:not(.text-white) {
    background: linear-gradient(135deg, #e2e8f0 0%, #f5c97a 60%, #ffd9a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Headings on the gradient CTA stay solid white */
section .bg-gradient h2,
section h2.text-white {
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}
section .section-heading, section .text-center { position: relative; }

/* Magnetic buttons */
.magnetic-btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; will-change: transform; }

/* Hero ticker strip */
.ticker-strip {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    padding: 10px 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
    display: inline-flex;
    gap: 36px;
    white-space: nowrap;
    padding-left: 100%;
    animation: tickerScroll 28s linear infinite;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 8px; }
.ticker-track i { color: #fde68a; }
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Clients marquee */
.clients-marquee {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: marqueeScroll 35s linear infinite;
}
.clients-marquee:hover .clients-marquee-track { animation-play-state: paused; }
.clients-marquee .client-logo {
    flex: 0 0 220px;
    min-height: 110px;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Reveal-up on scroll for sections (subtle) */
section { position: relative; }
section::after {
    content: "";
    position: absolute; left: 50%; bottom: 0;
    width: 80px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(122,22,18,0.4), transparent);
    transform: translateX(-50%);
    opacity: .6;
}

/* Hero text glow */
.hero-section h1 { text-shadow: 0 6px 30px rgba(122,22,18,0.45); }

/* ==========================================================================
   Hero Visual — fintech command-centre composition
   ========================================================================== */
.hero-visual {
    position: relative;
    width: 100%;
    min-height: 520px;
    perspective: 1400px;
}
.hero-visual .hv-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.18);
    animation: hvSpin 28s linear infinite;
    pointer-events: none;
}
.hero-visual .hv-orbit-1 { inset: 5% 5%; }
.hero-visual .hv-orbit-2 {
    inset: 18% 18%;
    border-style: solid;
    border-color: rgba(200,155,60,0.18);
    animation-duration: 40s;
    animation-direction: reverse;
}
@keyframes hvSpin { to { transform: rotate(360deg); } }

.hv-card {
    position: absolute;
    background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 22px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 30px 80px -25px rgba(0,7,23,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
    color: #fff;
}
.hv-dashboard {
    top: 8%;
    left: 6%;
    right: 6%;
    padding: 18px 20px 14px;
    animation: hvFloat 7s ease-in-out infinite;
}
@keyframes hvFloat {
    0%,100% { transform: translateY(0) rotate(-0.6deg); }
    50%     { transform: translateY(-10px) rotate(0.4deg); }
}
.hv-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.hv-dot { width: 10px; height: 10px; border-radius: 50%; }
.hv-dot-r { background: #ff6058; }
.hv-dot-y { background: #ffbd2e; }
.hv-dot-g { background: #28c93f; }
.hv-card-title {
    margin-left: 10px;
    font-size: .78rem;
    color: rgba(255,255,255,0.75);
    letter-spacing: .04em;
}

.hv-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 10px;
}
.hv-kpi {
    background: rgba(0,7,23,0.35);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 10px 12px;
}
.hv-kpi-label { display: block; font-size: .7rem; color: rgba(255,255,255,0.65); }
.hv-kpi-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffe6b3, #c89b3c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.15;
}
.hv-kpi-delta { font-size: .72rem; font-weight: 600; }
.hv-kpi-delta.up { color: #6ee7b7; }

.hv-chart { width: 100%; height: 90px; display: block; margin-bottom: 8px; }
.hv-stroke {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: hvDraw 3.2s ease-out forwards;
    filter: drop-shadow(0 4px 12px rgba(200,155,60,0.55));
}
@keyframes hvDraw { to { stroke-dashoffset: 0; } }

.hv-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
    height: 48px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.hv-bars span {
    display: block;
    height: var(--h, 50%);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #c89b3c, rgba(122,22,18,0.85));
    box-shadow: 0 4px 12px -4px rgba(200,155,60,0.55);
    transform-origin: bottom;
    transform: scaleY(0);
    animation: hvBar 1.2s ease forwards;
}
.hv-bars span:nth-child(1) { animation-delay: .15s; }
.hv-bars span:nth-child(2) { animation-delay: .25s; }
.hv-bars span:nth-child(3) { animation-delay: .35s; }
.hv-bars span:nth-child(4) { animation-delay: .45s; }
.hv-bars span:nth-child(5) { animation-delay: .55s; }
.hv-bars span:nth-child(6) { animation-delay: .65s; }
.hv-bars span:nth-child(7) { animation-delay: .75s; }
@keyframes hvBar { to { transform: scaleY(1); } }

/* Floating chips */
.hv-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.95);
    color: #1e293b;
    font-size: .82rem;
    box-shadow: 0 18px 40px -18px rgba(0,7,23,0.55);
    border: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    z-index: 3;
}
.hv-chip i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(135deg, #7a1612, #c89b3c);
    flex: 0 0 34px;
}
.hv-chip strong { display: block; font-weight: 700; line-height: 1.1; }
.hv-chip small  { display: block; color: #64748b; font-size: .7rem; margin-top: 2px; }

.hv-chip-tl { top: 2%; left: -4%; animation: hvFloat2 6s ease-in-out infinite; }
.hv-chip-br { bottom: 6%; right: -4%; animation: hvFloat2 7.5s ease-in-out infinite reverse; }
.hv-chip-r  { top: 46%; right: -8%; animation: hvFloat2 8s ease-in-out infinite; }
@keyframes hvFloat2 {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
}

/* Currency pills */
.hv-pill {
    position: absolute;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    color: #fff;
    background: rgba(0,7,23,0.55);
    border: 1px solid rgba(200,155,60,0.45);
    box-shadow: 0 10px 25px -10px rgba(0,7,23,0.6);
    backdrop-filter: blur(8px);
    z-index: 2;
}
.hv-pill-1 { bottom: 14%; left: -2%; animation: hvFloat2 6.5s ease-in-out infinite; }
.hv-pill-2 { top: 35%; left: -6%; animation: hvFloat2 7s ease-in-out infinite reverse; }
.hv-pill-3 { bottom: -2%; right: 24%; animation: hvFloat2 8.5s ease-in-out infinite; }

[data-bs-theme="dark"] .hv-chip {
    background: rgba(19,26,46,0.92);
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] .hv-chip small { color: #94a3b8; }

@media (max-width: 991px) {
    .hero-visual { min-height: 460px; }
    .hv-chip-tl { left: 2%; }
    .hv-chip-br { right: 2%; }
    .hv-chip-r  { right: 2%; }
    .hv-pill-1, .hv-pill-2 { left: 4%; }
}
@media (max-width: 575px) {
    .hero-visual { min-height: 420px; }
    .hv-chip { font-size: .72rem; padding: 8px 10px; }
    .hv-chip i { width: 28px; height: 28px; flex-basis: 28px; }
}

/* ==========================================================================
   Strong mobile responsiveness
   ========================================================================== */

/* Navbar toggler (visible below xl) */
.navbar-toggler {
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.10);
    padding: .35rem .55rem;
    border-radius: 10px;
    backdrop-filter: blur(8px);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(200,155,60,0.35); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.main-header.is-scrolled .navbar-toggler {
    border-color: rgba(122,22,18,0.25);
    background: rgba(122,22,18,0.06);
}
.main-header.is-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%237a1612' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Collapsed menu panel on mobile/tablet */
@media (max-width: 1199.98px) {
    .main-header .container { flex-wrap: wrap; }
    .navbar-collapse {
        flex-basis: 100%;
        margin-top: 14px;
        background: rgba(0,7,23,0.92);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 16px;
        padding: 12px 16px;
        backdrop-filter: blur(14px);
        box-shadow: 0 20px 50px -20px rgba(0,0,0,0.45);
    }
    .main-header.is-scrolled .navbar-collapse {
        background: rgba(255,255,255,0.97);
        border-color: rgba(15,23,42,0.08);
    }
    .main-menu { width: 100%; gap: 2px; }
    .main-menu li { width: 100%; }
    .main-menu .nav-link {
        display: block;
        padding: 12px 14px !important;
        font-size: 1rem !important;
        border-radius: 10px;
        color: #fff !important;
    }
    .main-header.is-scrolled .main-menu .nav-link { color: #1e293b !important; }
    .main-menu .nav-link:hover { background: rgba(255,255,255,0.08); }
    .main-header.is-scrolled .main-menu .nav-link:hover { background: rgba(122,22,18,0.08); }
    .main-menu .nav-link::after { display: none; }
}

/* General mobile/tablet tweaks */
@media (max-width: 991.98px) {
    .ptb-120 { padding-top: 70px; padding-bottom: 70px; }
    .pt-60 { padding-top: 40px; }
    .pb-120 { padding-bottom: 70px; }
    .hero-section { padding-top: 110px; padding-bottom: 60px; background-size: cover; }
    .hero-section h1.display-4 { font-size: 2.25rem; line-height: 1.18; }
    .hero-section .lead { font-size: 1rem; }
    section h2 { font-size: 1.75rem; }
    section h2:not(.text-white) { line-height: 1.25; }

    /* Action buttons stack cleanly */
    .action-btn .btn,
    .action-btn .watch-now-btn { width: 100%; justify-content: center; margin-right: 0 !important; }
    .action-btn .btn { margin-bottom: 12px; }

    /* Floating side buttons get out of the way */
    .theme-switch-wrapper { top: auto; bottom: 96px; right: 16px; transform: none; }
    .theme-switch-btn { width: 42px; height: 42px; }
    .whatsapp-float { width: 52px; height: 52px; font-size: 24px; right: 16px; bottom: 20px; }

    /* Cursor glow off on touch */
    #cursorGlow { display: none; }

    /* Section divider line scaled down */
    section::after { width: 50px; }
}

@media (max-width: 767.98px) {
    .hero-section h1.display-4 { font-size: 1.85rem; }
    .hero-content-wrap { margin-top: 1rem !important; text-align: center; }
    .hero-content-wrap .hero-badge { margin-left: auto; margin-right: auto; }
    .ticker-strip { font-size: .8rem; }

    /* Stats counters: 2-col grid, tighter */
    .stats-row { margin-top: 24px; }
    .stat-box { padding: 16px 12px; }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: .8rem; }

    /* Service / solution cards */
    .modern-grid-card { padding: 24px 20px; }
    .service-icon-box { width: 54px; height: 54px; font-size: 22px; border-radius: 14px; }

    /* Tech tabs scrollable */
    .tech-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tech-tabs::-webkit-scrollbar { display: none; }
    .tech-tab { flex: 0 0 auto; padding: 8px 16px; font-size: .85rem; }

    .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tech-item { padding: 18px 12px; }
    .tech-item i { font-size: 28px; }

    /* Clients marquee */
    .clients-marquee .client-logo { flex: 0 0 160px; min-height: 90px; padding: 16px 12px; }
    .clients-marquee .client-logo img { max-height: 44px; }
    .clients-marquee-track { gap: 14px; animation-duration: 28s; }

    /* Contact CTA */
    .cta-subscribe .form-block-banner.mw-60 { max-width: 100% !important; }
    .cta-subscribe .form-block-banner .btn,
    .cta-subscribe .form-block-banner .watch-now-btn { display: flex; width: 100%; justify-content: center; margin-right: 0 !important; }
    .cta-subscribe .form-block-banner .btn { margin-bottom: 12px; }
    .subscribe-feature-list { flex-direction: column; gap: 8px; align-items: center; }
    .subscribe-feature-list .nav-item { padding: 0; }

    /* About / feature image */
    .feature-img-wrap { margin-top: 32px; }
    .img-overlay-list { position: static !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
    .img-overlay-list li { width: 100%; }
    .feature-img-wrap img { width: 100%; }

    /* Footer */
    .footer-bottom .row { row-gap: 12px; text-align: center; }
    .footer-bottom .footer-single-col { text-align: center !important; }

    /* Workflow timeline tighter */
    .timeline-item { margin-bottom: 28px; padding-left: 58px !important; }
    .workflow-timeline::before { left: 22px; }
    .timeline-badge { left: 22px; width: 44px; height: 44px; font-size: .9rem; }
    .timeline-card { padding: 18px; }

    /* Hero visual — relax glass dashboard for small screens */
    .hero-visual { min-height: 460px; margin-top: 1.5rem; padding: 0 8px; }
    .hv-dashboard { left: 4%; right: 4%; padding: 14px 14px 10px; }
    .hv-card-title { font-size: .7rem; }
    .hv-kpis { gap: 10px; }
    .hv-kpi { padding: 8px 10px; }
    .hv-kpi-value { font-size: 1.1rem; }
    .hv-kpi-label, .hv-kpi-delta { font-size: .66rem; }
    .hv-chart { height: 70px; }
    .hv-bars { height: 36px; }
    .hv-chip-tl { top: 0; left: 2%; }
    .hv-chip-br { bottom: 4%; right: 2%; }
    .hv-chip-r  { top: auto; bottom: 22%; right: 2%; }
    .hv-pill-1 { left: 2%; bottom: 12%; }
    .hv-pill-2 { left: 2%; top: 30%; }
    .hv-pill-3 { right: 18%; bottom: 0; }
}

@media (max-width: 480px) {
    .hero-section h1.display-4 { font-size: 1.6rem; }
    .hero-section .lead { font-size: .95rem; }
    .hero-badge { font-size: .72rem; padding: 6px 12px; }
    section h2 { font-size: 1.45rem; }
    .section-tag { font-size: .72rem; }

    .container, .container-lg, .container-md, .container-sm { padding-left: 16px; padding-right: 16px; }

    /* Stack stats to 1 column for very narrow phones if needed via 2-col still */
    .stat-number { font-size: 1.35rem; }

    /* Tighter hero visual */
    .hero-visual { min-height: 420px; }
    .hv-dashboard { padding: 12px 12px 8px; }
    .hv-chip { padding: 6px 8px; font-size: .68rem; gap: 6px; }
    .hv-chip i { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; border-radius: 8px; }
    .hv-chip strong { font-size: .75rem; }
    .hv-chip small  { font-size: .62rem; }
    .hv-pill { font-size: .68rem; padding: 4px 10px; }

    /* Hero ticker — slow down a bit, smaller chips */
    .ticker-track { gap: 22px; font-size: .78rem; animation-duration: 22s; }

    /* Glow orbs scaled down to avoid overflow */
    .glow-orb.a { width: 140px; height: 140px; }
    .glow-orb.b { width: 160px; height: 160px; }

    /* Disable heavy background grid on tiny screens */
    .hero-section::before { background-size: 28px 28px; opacity: .6; }
}

/* Prevent horizontal scroll across the page on small viewports */
html, body { overflow-x: hidden; }

/* Ensure images never overflow their container */
img { max-width: 100%; height: auto; }

/* Reduce 3D tilt jitter on touch devices */
@media (hover: none) {
    .modern-grid-card, .stat-box, .timeline-card, .tech-item, .estimator-card {
        transform: none !important;
    }
}

/* Safety: if AOS fails to load/run, never leave content invisible */
html.no-js [data-aos],
[data-aos].aos-animate { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1 !important; transform: none !important; }
}