:root {
    --bg-dark: #000000;
    --primary: #ff6a00;
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.04);
}
/* --- GLOBAL STYLE & FONT OPTIMIZATION --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; -webkit-tap-highlight-color: transparent !important; outline: none !important; }
/* overflow-x: clip, not hidden. `hidden` makes the element a scroll
   container, and a scroll container that never actually scrolls breaks any
   position:sticky inside it — which is why the insight page sidebar has never
   stuck. `clip` clips identically without creating one. The hidden line stays
   first as the fallback for browsers that do not know clip. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    overflow-x: clip;
    min-height: 100vh;
    position: relative;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* --- SCROLL REVEAL --------------------------------------------------------
   Deliberately plain: opacity and translate3d, nothing else. Both are handled
   by the compositor, so once a reveal starts it costs the main thread nothing
   and cannot stutter while the page is scrolling.

   It is also deliberately NOT scroll-linked. A scroll-driven version of this
   was measured on this page at 4 janky frames per pass against 0 for the
   one-shot, and it read as less of a reveal, not more — spreading the movement
   across the scroll distance means nothing ever appears to happen. A fixed
   0.75s play is what makes it visible.

   translate3d rather than translateY: the 3d form is what promotes the element
   to its own layer for the duration of the transition. */
.reveal {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out;
}
.reveal.active { opacity: 1; transform: translate3d(0, 0, 0); }

/* Items inside a grid land one after another instead of as a block. Safe as a
   transition-delay only because this plays once — on a scroll-linked timeline
   a delay desynchronises the moment the visitor scrolls at a different speed. */
.bento-card.reveal:nth-child(2),  .portfolio-card.reveal:nth-child(2)  { transition-delay: 0.07s; }
.bento-card.reveal:nth-child(3),  .portfolio-card.reveal:nth-child(3)  { transition-delay: 0.14s; }
.bento-card.reveal:nth-child(4),  .portfolio-card.reveal:nth-child(4)  { transition-delay: 0.21s; }
.bento-card.reveal:nth-child(5),  .portfolio-card.reveal:nth-child(5)  { transition-delay: 0.28s; }
.bento-card.reveal:nth-child(6),  .portfolio-card.reveal:nth-child(6)  { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- BRANDING COLORS --- */
.brand-zil { color: #ffffff; font-weight: inherit; display: inline; margin: 0; padding: 0; }
.brand-fox { color: var(--primary); font-weight: inherit; display: inline; margin: 0; padding: 0; }
.fox-text { color: var(--primary); font-weight: inherit; }

/* --- NAVBAR --- */
/* will-change keeps the bar on its own compositor layer. It is translated on
   every scroll direction change, so the layer is earning its keep — without
   it the browser re-promotes and re-rasterises the blurred bar each time. */
header { position: fixed; top: 20px; width: 100%; display: flex; justify-content: center; z-index: 2000; padding: 0 5%; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; will-change: transform; }
header.nav-hidden { transform: translateY(-150%); opacity: 0; }
/* blur(14px), not 20px: the backdrop is re-sampled on every scrolled frame,
   and the cost scales with the radius. Behind an 80%-opaque bar the two are
   indistinguishable. */
.navbar { width: 100%; max-width: 1100px; height: 75px; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-border); border-radius: 100px; display: flex; justify-content: space-between; align-items: center; padding: 0 35px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.logo { -webkit-tap-highlight-color: transparent; }
/* No orange glow on the navbar logo — not at rest, not on hover, not on
   click/tap. Only the subtle scale+rotate remains, and only where a real
   pointer can hover (touch devices keep :hover stuck after a tap). */
.logo img { height: 66px; width: auto; border-radius: 0; border: none; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: none; }
@media (hover: hover) and (pointer: fine) {
    .logo img:hover { transform: scale(1.05); }
}
/* --- LOGO ANIMATION -------------------------------------------------------
   A light sheen that travels across the mark, and a soft entrance on load.

   The sheen is masked with the logo file itself. Without that mask the
   gradient would sweep a rectangle of light across the whole box, including
   all the transparent pixels around the mark — which reads as a glowing box,
   not a shining logo. Masking with logo.png clips the light to the mark, so
   it lights up the actual shape.

   Both the sheen layers and the <img> share one box and both resolve at
   size: contain, so they stay in register at whatever height the logo is set
   to, and they follow the artwork automatically if the file is ever swapped.

   Two pseudo-elements, not one: ::before carries the hover sweep and ::after
   the one-shot. Re-applying the same animation-name to a single element does
   not reliably restart it, so giving each trigger its own layer is what keeps
   the hover working after the entrance has already played. */
.logo-mark { position: relative; display: inline-block; line-height: 0; }
/* The mark travels in from the left, oversized, and shrinks to size as it
   lands. -88px, not a percentage: the logo sits at the left edge of the bar,
   so it sweeps in over the page rather than out of the viewport. html and
   body already carry overflow-x: clip, so nothing it does off to the side can
   add a scrollbar. */
@keyframes logoIn {
    from { opacity: 0; transform: translateX(-88px) scale(1.6); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}



.logo .logo-mark,
.ty-logo .logo-mark { animation: logoIn 1.6s cubic-bezier(0.38, 0, 0.16, 1) 0.15s backwards; }

@media (prefers-reduced-motion: reduce) {
    .logo .logo-mark, .ty-logo .logo-mark { animation: none; }
}

/* --- LOGO INTRO (first visit per tab, see intro-head.php / intro-body.php) ---
   Hidden unless the head script added .zf-intro, so with JS off it never shows.
   While it plays (.zf-lock) the navbar logo waits at its start frame, so it
   lands in the header as the intro clears. */
#zf-intro { display: none; }
html.zf-intro #zf-intro {
    position: fixed; inset: 0; z-index: 100000; background: #000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    cursor: pointer; transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
/* No overflow:hidden lock: the overlay already covers everything, and hiding
   the scrollbar then giving it back when the intro ends shifted the whole page
   sideways (CLS 0.15). */
html.zf-lock .logo .logo-mark { animation-play-state: paused; }
/* The overlay lets the browser paint before <main> has been parsed. When main
   then arrives, its top margin collapsed through <body> and moved the whole
   body down 140px behind the overlay — invisible, but Google counted it as a
   0.15 layout shift. flow-root keeps that margin inside body; nothing moves. */
html.zf-intro body { display: flow-root; }

.zf-intro-stage { position: relative; display: grid; place-items: center; }
.zf-intro-logo { position: relative; width: min(64vw, 440px); aspect-ratio: 3 / 2; opacity: 0; }
.zf-intro-logo img { width: 100%; height: 100%; display: block; }
/* The sheen is masked by the logo itself so the light runs over the mark only. */
.zf-intro-logo::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 160% 0;
    -webkit-mask: url(zilfox-logo.webp) center / contain no-repeat;
            mask: url(zilfox-logo.webp) center / contain no-repeat;
}
/* Out of flow, so the glow can spill past the logo without pushing the tagline down. */
.zf-intro-glow {
    --zf-glow: min(78vw, 520px);
    position: absolute; top: 50%; left: 50%; margin: calc(var(--zf-glow) / -2) 0 0 calc(var(--zf-glow) / -2);
    width: var(--zf-glow); height: var(--zf-glow); border-radius: 50%; opacity: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.42) 0%, rgba(255, 106, 0, 0.12) 40%, rgba(255, 106, 0, 0) 68%);
}
.zf-intro-tag {
    color: #fff; font-weight: 700; text-transform: uppercase; opacity: 0; text-align: center; padding: 0 16px;
    font-size: clamp(0.68rem, 2.6vw, 0.95rem); letter-spacing: 0.35em;
}
.zf-intro-tag span { color: var(--primary, #ff6a00); }

#zf-intro.play .zf-intro-logo  { animation: zfLogoIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }
#zf-intro.play .zf-intro-logo::after { animation: zfSheen 0.95s ease-in-out 1.05s forwards; }
#zf-intro.play .zf-intro-glow  { animation: zfGlow 2.2s ease-out 0.2s forwards; }
#zf-intro.play .zf-intro-tag   { animation: zfTag 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards; }
#zf-intro.out { opacity: 0; visibility: hidden; }
#zf-intro.out .zf-intro-logo { animation: zfLogoOut 0.7s ease-in forwards; }

@keyframes zfLogoIn {
    0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); filter: blur(16px); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
@keyframes zfLogoOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.18); }
}
@keyframes zfSheen {
    0%   { opacity: 1; background-position: 160% 0; }
    85%  { opacity: 1; }
    100% { opacity: 0; background-position: -60% 0; }
}
@keyframes zfGlow {
    0%   { opacity: 0; transform: scale(0.4); }
    55%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 0.7; transform: scale(1); }
}
@keyframes zfTag {
    from { opacity: 0; transform: translateY(12px); letter-spacing: 0.7em; }
    to   { opacity: 1; transform: translateY(0); letter-spacing: 0.35em; }
}

/* --- FOOTER LOGO: STANDING OFF THE PAGE -----------------------------------
   The mark tilts toward the pointer and lifts on the Z axis, so it reads as
   a physical thing facing the visitor rather than a flat image printed on
   the footer.

   The perspective lives on the stage and the rotation on the mark inside it,
   because .reveal already owns a transform on the stage — two transforms on
   one element would simply overwrite each other and the scroll-in would stop
   working.

   The shadow is filter: drop-shadow, never box-shadow. The logo is a
   transparent PNG: box-shadow would trace the rectangular element box and
   give the mark a visible slab behind it, while drop-shadow follows the
   alpha channel and so is cast by the artwork itself.

   The shadow deliberately does NOT track the pointer. Rotation is composited
   and costs nothing per frame, but a shadow whose offsets change every frame
   forces a repaint every frame. It steps up once on enter and eases back on
   leave, which looks the same and keeps the per-frame work on the GPU. */
.footer-logo-stage { display: inline-block; perspective: 850px; }
.logo-3d {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
    transition: transform 0.7s cubic-bezier(0.38, 0, 0.16, 1), filter 0.45s ease;
    filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.5));
}
.logo-3d.is-tilting {
    --tz: 30px;
    transition: transform 0.12s linear, filter 0.45s ease;
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.72));
}

@media (prefers-reduced-motion: reduce) {
    .logo-3d { transform: none; transition: none; }
}


@media (prefers-reduced-motion: reduce) {
}

.logo img:active,
.logo:focus img,
.logo:focus-visible img { filter: none; }
.nav-links { display: flex; gap: 35px; align-items: center; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem; position: relative; }
.nav-links a:hover { color: #fff; }
.nav-contact-btn { background: var(--primary); color: #000 !important; padding: 10px 22px; border-radius: 50px; font-weight: 700 !important; transition: transform 0.4s ease, opacity 0.4s ease; }
.nav-contact-btn:hover { box-shadow: none; transform: scale(1.05); color: #fff !important; }
.mobile-toggle { display: none; color: #fff; font-size: 1.5rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* --- HERO SECTION --- */
.hero { min-height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; margin-top: 50px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px; border: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: 50px; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 28px; }
.hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; flex-shrink: 0; }
.hero h1 { font-size: clamp(2.8rem, 8vw, 5.5rem); font-weight: 800; letter-spacing: -2px; line-height: 1.1; margin-bottom: 25px; }
@media (min-width: 900px) {
    .hero h1 { white-space: nowrap; font-size: clamp(1.8rem, 4vw, 5rem); }
}
.hero-description { color: var(--text-muted); font-size: clamp(1rem, 2.5vw, 1.15rem); max-width: 620px; line-height: 1.6; font-weight: 400; margin-bottom: 40px; }
.btn { display: inline-block; background: var(--primary); color: #000; padding: 18px 45px; font-size: 1.1rem; text-decoration: none; font-weight: 700; border-radius: 50px; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); border: none; cursor: pointer;}
.btn:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45); }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); box-shadow: none; padding: 12px 35px; font-size: 1rem;}
.btn-outline:hover { background: var(--primary); color: #000; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45); }

/* --- SPLIT HERO (asymmetric, with dashboard mockup) --- */
/* margin-top must clear the fixed navbar (top:20px + 75px height = 95px) plus breathing room */
.hero-split { max-width: 1300px; margin: 180px auto 0; padding: 0 20px 90px; }

/* --- HERO ENTRANCE --------------------------------------------------------
   Deliberately CSS on load, not the .reveal observer.
   Left half ("Innovate Today.") glides in smoothly from the left.
   Right half ("Transform Tomorrow.") glides in smoothly from the right.
   Ultra-smooth, relaxed, luxurious motion with zero rush.
*/
@keyframes heroGlideLeft {
    0% {
        opacity: 0;
        transform: translateX(-38px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroGlideRight {
    0% {
        opacity: 0;
        transform: translateX(38px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

.hero-split h1 .hero-half {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.hero-split h1 .hw {
    display: inline-block;
}

.hero-split h1 .fox-text {
    display: inline-block;
    color: var(--primary);
    text-shadow: none;
    filter: none;
}

.js-anim .hero-split h1 .hero-half-left {
    opacity: 0;
    transform: translateX(-38px);
}

.js-anim .hero-split h1 .hero-half-right {
    opacity: 0;
    transform: translateX(38px);
}

.js-anim .hero-split .hero-description,
.js-anim .hero-split .hero-actions,
.js-anim .hero-split .hero-stats-row {
    opacity: 0;
    transform: translateY(18px);
}

/* Gentle, luxurious, silky-smooth easing with relaxed timing */
.hero-play .hero-split h1 .hero-half-left {
    animation: heroGlideLeft 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero-play .hero-split h1 .hero-half-right {
    animation: heroGlideRight 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero-play .hero-split .hero-description {
    animation: heroFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
.hero-play .hero-split .hero-actions {
    animation: heroFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
.hero-play .hero-split .hero-stats-row {
    animation: heroFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .js-anim .hero-split h1 .hero-half,
    .js-anim .hero-split h1 .hero-half-left,
    .js-anim .hero-split h1 .hero-half-right,
    .js-anim .hero-split .hero-description,
    .js-anim .hero-split .hero-actions,
    .js-anim .hero-split .hero-stats-row {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.hero-split-left { text-align: center; }
.hero-split h1 { font-size: clamp(2.6rem, 4.6vw, 4.8rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 24px; white-space: normal; }
@media (min-width: 900px) {
    .hero-split h1 { white-space: nowrap; }
}
.hero-split .hero-description { text-align: center; margin: 0 auto 34px; max-width: 520px; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 50px; }
.btn-dark { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); color: #fff; padding: 17px 32px; font-weight: 700; border-radius: 50px; text-decoration: none; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; }
.btn-dark:hover { background: rgba(255,255,255,0.1); border-color: var(--primary); }

.hero-stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; width: fit-content; margin: 0 auto; padding-top: 30px; border-top: 1px solid var(--glass-border); }
.stat-inline { text-align: center; }
.stat-inline .stat-number-wrapper { justify-content: center; align-items: baseline; font-size: 2.1rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.stat-inline .plus { color: var(--primary); margin-left: 3px; }
.stat-inline p { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }

.hero-split-right { position: relative; }
.dashboard-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 30px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.dashboard-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.dashboard-card-header .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.dashboard-card-header .dot.on { background: var(--primary); }
.dashboard-label { margin-left: auto; font-size: 0.65rem; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.dstat { border-radius: 14px; padding: 16px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); text-align: center; }
.dstat strong { display: block; font-size: 1.5rem; font-weight: 800; }
.dstat small { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.dstat.c-primary strong { color: var(--primary); }
.dstat.c-green strong { color: #4ade80; }
.dstat.c-blue strong { color: #60a5fa; }
.dbar-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: #e4e4e7; margin-bottom: 7px; }
.dbar-row b { color: #fff; }
.dbar-track { height: 6px; border-radius: 10px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 18px; }
.dbar-fill { height: 100%; background: var(--primary); border-radius: 10px; }
.dashboard-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dashboard-tags span { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: var(--text-muted); font-size: 0.72rem; padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.hero-mock-badge { position: absolute; display: flex; align-items: center; gap: 8px; background: rgba(10,10,10,0.92); border: 1px solid var(--glass-border); padding: 10px 18px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 3; white-space: nowrap; }
.hero-mock-badge i { color: var(--primary); }
.badge-top { top: -10px; right: 30px; }
.badge-bottom { bottom: -10px; left: 20px; }

/* --- TECH / PLATFORM TICKER --- */
.tech-ticker { width: 100%; overflow: hidden; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); padding: 24px 0; background: rgba(255,255,255,0.015); }
.tech-ticker-track { display: flex; width: max-content; gap: 18px; align-items: center; animation: tickerScroll 112s linear infinite; }
.tech-ticker-track span { color: var(--text-muted); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.85rem; white-space: nowrap; }
.tech-ticker-track span.dot-sep { color: var(--primary); font-weight: 400; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Set by script.js while a marquee is off screen. Both marquees are very wide
   composited layers (the testimonial row is ~10,000px), and an off-screen one
   still costs the compositor work on every frame — which is felt as scroll
   jank. Deliberately no !important, so :hover pausing still wins on screen. */
.anim-offscreen { animation-play-state: paused; }

/* --- STATS SECTION --- */
.stats-section { padding: 40px 20px 80px 20px; width: 100%; text-align: center; max-width: 1000px; margin: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
.stat-box { background: var(--glass-bg); padding: 30px 20px; border-radius: 25px; border: 1px solid var(--glass-border); transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; }
.stat-box:hover { border-color: var(--primary); transform: translateY(-5px); }
.stat-number-wrapper { display: flex; justify-content: center; align-items: baseline; color: var(--text-main); font-size: 3rem; font-weight: 800; margin-bottom: 5px; }
.stat-box .plus { color: var(--primary); margin-left: 5px; }
.stat-box p { color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.section { padding: 100px 20px; width: 100%; text-align: center; max-width: 1200px; margin: auto; }
.section-title { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 20px; }
.section-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 650px; margin: 0 auto 60px; line-height: 1.6; }

/* --- HOMEPAGE FEATURED CARDS --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-bottom: 40px; }
.service-link { text-decoration: none; color: inherit; display: block; -webkit-tap-highlight-color: transparent; }
.card { background: var(--glass-bg); padding: 40px 30px; border-radius: 25px; border: 1px solid var(--glass-border); transition: transform 0.5s, opacity 0.5s, color 0.5s, background-color 0.5s, border-color 0.5s; text-align: left; position: relative; overflow: hidden; height: 100%; cursor: pointer; }
.card:hover { transform: translateY(-10px); border-color: var(--primary); background: rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); }
.card h3 { font-size: 1.3rem; margin-bottom: 15px; color: #fff; display: flex; align-items: center; gap: 10px; }
.card h3 i { color: var(--primary); font-size: 1.5rem; }
.card p { color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; margin-bottom: 20px; }
.learn-more { color: var(--primary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.learn-more i { transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; }
.card:hover .learn-more i { transform: translateX(5px); }
.popular { position: absolute; top: 15px; right: -35px; background: var(--primary); color: #000; padding: 8px 40px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; transform: rotate(45deg); box-shadow: none; }

.btn-view-all { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 2px solid var(--primary); color: #fff; padding: 16px 40px; font-size: 1.05rem; text-decoration: none; font-weight: 700; border-radius: 50px; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; }
.btn-view-all:hover { background: var(--primary); color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transform: translateY(-3px); }

/* --- THE PROCESS GRID --- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; position: relative; }
.process-card { background: rgba(255,255,255,0.02); border: 1px dashed var(--glass-border); padding: 40px 25px; border-radius: 25px; text-align: center; position: relative; z-index: 2; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; }
.process-card:hover { border-style: solid; border-color: var(--primary); background: var(--glass-bg); transform: translateY(-5px); }
.step-number { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background: var(--primary); color: #000; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45); }
.process-card h3 { margin: 30px 0 15px; font-size: 1.3rem; color: #fff; }
.process-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

/* --- PLATFORM GRID --- */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.platform-card { background: var(--glass-bg); padding: 45px 30px; border-radius: 35px; border: 1px solid var(--glass-border); text-align: center; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; }
.platform-card:hover { transform: translateY(-15px); border-color: var(--primary); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45); }
.platform-icon { font-size: 3.5rem; margin-bottom: 25px; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; display: inline-block; }
.platform-card:hover .platform-icon { transform: scale(1.15) rotate(5deg); }
.platform-card h3 { color: #fff; font-size: 1.6rem; margin-bottom: 12px; font-weight: 700; }
.platform-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.google-color { color: #4285F4; }
.youtube-color { color: #FF0000; }
.meta-color { color: #0668E1; }
.linkedin-color { color: #0A66C2; }
.tiktok-color { color: #ffffff; text-shadow: 3px 3px 0 #00f2fe, -3px -3px 0 #fe0979; }
.analytics-color { color: #F4B400; }
.notice-box { background: rgba(255, 106, 0, 0.08); border-left: 3px solid var(--primary); padding: 15px; margin-top: 20px; border-radius: 8px; text-align: left; }
.notice-title { color: #fff; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.notice-title i { color: var(--primary); }
.notice-text { color: #d4d4d8 !important; font-size: 0.85rem !important; line-height: 1.5 !important; margin: 0 !important; font-weight: 400; }

/* --- SPLIT-SECTION DESIGN SYSTEM (asymmetric intro + content, rahudoom-style) --- */
.spec-eyebrow { display: block; color: var(--primary); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 16px; }
.split-heading { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: 18px; line-height: 1.15; }
.split-desc { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 26px; max-width: 360px; }
/* Same defect as .split-row: `gap` was never in the transition list, so the
   arrow jumped. The arrow moves on transform now, which also keeps the link
   text from shifting under the cursor. */
.split-link { color: var(--primary); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s ease; }
.split-link i { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.split-link:hover i { transform: translateX(5px); }

.split-section { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 60px; text-align: left; align-items: start; }
.split-intro { position: sticky; top: 120px; }

.bento-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; text-align: left; margin-bottom: 50px; flex-wrap: wrap; }
.bento-header-desc { color: var(--text-muted); font-size: 0.95rem; max-width: 340px; line-height: 1.6; text-align: right; }

.split-list { display: flex; flex-direction: column; border-top: 1px solid var(--glass-border); }
/* The row used to shift by animating padding-left, but padding was missing
   from the transition list, so it snapped 10px in one frame — and animating
   it would have re-laid-out the row (and re-wrapped the paragraph) on every
   frame anyway. The content slides on transform instead: no layout, no
   re-wrap, and the row's bottom border stays put.

   Everything that moves shares one duration and one curve, so the number,
   the text, the arrow and the wash all settle on the same frame. Ease-out
   quint covers most of the distance early and then eases in to a stop —
   that long settle is what actually reads as "smooth". */
.split-row { position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 30px 10px; border-bottom: 1px solid var(--glass-border); text-decoration: none; color: inherit; transition: border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
/* The hover wash is an opacity fade on an overlay, not a background-color
   transition. background-color repaints the row every frame; opacity is
   handled by the compositor, so it cannot fall out of step with the slide. */
.split-row::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.035); opacity: 0; pointer-events: none; transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.split-row:hover::before { opacity: 1; }
.split-row-num, .split-row-body, .split-row-arrow { position: relative; }
.split-row-num { color: var(--text-muted); font-weight: 800; font-size: 1.3rem; opacity: 0.4; min-width: 44px; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.split-row-body { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.split-row:hover .split-row-num { color: var(--primary); opacity: 1; }
.split-row:hover .split-row-num,
.split-row:hover .split-row-body { transform: translateX(12px); }
.split-row-body h3 { font-size: 1.2rem; color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.split-row-body h3 i { color: var(--primary); }
.split-row-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; max-width: 540px; }
.split-row-arrow { margin-left: auto; color: var(--text-muted); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.55s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; padding-top: 4px; }
.split-row:hover .split-row-arrow { color: var(--primary); transform: translate(5px, -5px); }

.process-list { display: flex; flex-direction: column; gap: 16px; }
.process-row { display: flex; gap: 22px; align-items: flex-start; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); border-radius: 16px; padding: 26px; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; }
.process-row:hover { border-color: var(--primary); background: rgba(255, 255, 255, 0.04); }
.process-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 106, 0, 0.12); border: 1px solid rgba(255, 106, 0, 0.3); color: var(--primary); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.process-row h3 { color: #fff; font-size: 1.1rem; margin-bottom: 6px; }
.process-row p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }

.icon-checklist { display: flex; flex-direction: column; gap: 28px; }
.icon-check-row { display: flex; gap: 20px; align-items: flex-start; }
.icon-check-circle { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 106, 0, 0.1); border: 1px solid rgba(255, 106, 0, 0.3); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.icon-check-row h4 { color: #fff; font-size: 1.05rem; margin-bottom: 5px; font-weight: 700; }
.icon-check-row p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; margin: 0; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.bento-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); border-radius: 20px; padding: 28px; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; position: relative; }
.bento-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.bento-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.bento-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 106, 0, 0.12); border: 1px solid rgba(255, 106, 0, 0.3); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.15rem; }
.bento-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); border: 1px solid var(--glass-border); border-radius: 20px; padding: 4px 10px; text-transform: uppercase; height: fit-content; }
.bento-card h4 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; position: relative; }
.bento-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0; position: relative; }

/* --- MEDIA SPLIT (text + supporting photo) --- */
.media-split { display: grid; grid-template-columns: 1.15fr 0.95fr; gap: 60px; align-items: center; text-align: left; }
.media-split-photo { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 30px 60px rgba(0,0,0,0.5); aspect-ratio: 4 / 3; }
.media-split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-photo { margin-top: 32px; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-border); position: relative; }
.process-photo img { width: 100%; height: 200px; object-fit: cover; display: block; }
.process-callout { margin-top: 14px; background: var(--primary); border-radius: 14px; padding: 18px 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45); }
.process-callout p { color: #000 !important; margin: 0; }
.process-callout .callout-title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.process-callout .callout-sub { font-size: 0.82rem; opacity: 0.85; }

/* --- ABOUT COLLAGE --- */
.about-collage { position: relative; margin-bottom: 40px; }
.about-collage-main { border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: 0 24px 60px rgba(0,0,0,0.55); aspect-ratio: 4 / 3.3; }
.about-collage-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-collage-sub { position: absolute; bottom: -30px; right: -16px; width: 46%; border-radius: 16px; overflow: hidden; border: 4px solid var(--bg-dark); box-shadow: 0 16px 40px rgba(0,0,0,0.55); aspect-ratio: 4 / 3.3; }
.about-collage-sub img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- SERVICES PORTRAIT --- */
.services-portrait { position: relative; margin-top: 34px; width: 190px; height: 190px; display: none; }
.services-portrait-ring { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 4px solid rgba(255,106,0,0.3); box-shadow: none; }
.services-portrait-ring img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (min-width: 1024px) { .services-portrait { display: block; } }

/* --- RECENT PROJECTS PORTFOLIO --- */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.portfolio-card { border-radius: 16px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.02); transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; }
.portfolio-card:hover { border-color: var(--primary); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); }
.portfolio-thumb { border-radius: 16px 16px 0 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.5s, opacity 0.5s, color 0.5s, background-color 0.5s, border-color 0.5s; }
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.05); }
.portfolio-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(10, 10, 10, 0.85); color: #fff; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.6px; padding: 6px 12px; border-radius: 20px; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.15); }
.portfolio-info { padding: 18px 20px 22px; }
.portfolio-info h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.portfolio-info p { color: var(--text-muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }

/* --- ENGINEERING CAPABILITIES --- */
.capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; text-align: left; }
.capability-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 30px; display: flex; gap: 18px; align-items: flex-start; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; }
.capability-card:hover { border-color: var(--primary); background: rgba(255, 255, 255, 0.06); transform: translateY(-4px); }
.capability-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 106, 0, 0.1); border: 1px solid rgba(255, 106, 0, 0.25); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.2rem; }
.capability-card h4 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
.capability-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0; }

/* --- WHY CHOOSE US --- */
.growth-system-box { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 30px; padding: 50px; text-align: left; }
.growth-system-box h3 { font-size: 2rem; color: #fff; margin-bottom: 20px; font-weight: 800; }
.growth-system-box p.lead-text { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 30px; line-height: 1.6; }
.growth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.growth-list h4 { color: var(--primary); font-size: 1.2rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.growth-list ul { list-style: none; padding: 0; }
.growth-list ul li { color: #d4d4d8; font-size: 1rem; margin-bottom: 15px; display: flex; align-items: center; gap: 12px; }
.growth-list ul li i { color: #4ade80; font-size: 1.1rem; }

/* --- CASE STUDIES --- */
.case-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; }
.case-card { flex: 1 1 320px; }
@media (min-width: 1024px) { .case-card { max-width: calc((100% - 50px) / 3); } }
.case-card { background: var(--glass-bg); padding: 40px; border-radius: 35px; border: 1px solid var(--glass-border); text-align: left; transition: transform 0.5s, opacity 0.5s, color 0.5s, background-color 0.5s, border-color 0.5s; position: relative; }
.case-card:hover { border-color: var(--primary); transform: translateY(-10px); }
.case-card .tag { background: rgba(255, 106, 0, 0.1); color: var(--primary); padding: 6px 15px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.case-card h3 { margin: 20px 0 15px; font-size: 1.5rem; color: #fff; }
.case-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; }
.case-stats { display: flex; gap: 20px; border-top: 1px solid var(--glass-border); padding-top: 20px; }
.stat-item span { display: block; color: var(--primary); font-size: 1.4rem; font-weight: 800; }
.stat-item small { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }

/* --- TESTIMONIALS FIX --- */
.testimonial-section { width: 100%; padding: 100px 0; overflow: hidden; text-align: center; background: rgba(255,255,255,0.01); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
.slider-container { width: 100%; overflow: hidden; padding: 40px 0; cursor: grab; }
.testimonial-slider { display: flex; width: max-content; gap: 30px; padding: 0 20px; animation: scrollSlider 50s linear infinite; }
.testimonial-slider:hover { animation-play-state: paused; }
@keyframes scrollSlider { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.testimonial-card { background: var(--glass-bg); padding: 40px; border-radius: 30px; border: 1px solid var(--glass-border); text-align: left; width: 380px; flex-shrink: 0; transition: transform 0.4s, opacity 0.4s, color 0.4s, background-color 0.4s, border-color 0.4s; }
.testimonial-card:hover { border-color: var(--primary); transform: scale(1.02); }
.testimonial-card i { color: var(--primary); font-size: 1.5rem; margin-bottom: 20px; opacity: 0.5; }
.testimonial-card p { color: var(--text-muted); font-style: italic; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; }
.author-meta { display: flex; align-items: center; gap: 15px; }
.author-photo { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--glass-border); object-fit: cover; background-color: rgba(255,255,255,0.05); }
.testimonial-card:hover .author-photo { border-color: var(--primary); }
.author-initials { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--glass-border); background: rgba(255, 106, 0, 0.08); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; letter-spacing: 1px; transition: border-color 0.3s; }
.testimonial-card:hover .author-initials { border-color: var(--primary); }
.author span { color: #fff; font-weight: 700; display: block; }
.author small { color: var(--primary); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; }

/* --- GLOBAL REACH MAP --- */
.reach-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.reach-chip { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: var(--text-muted); padding: 10px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; }
.reach-chip img { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.reach-chip i { color: var(--primary); font-size: 0.9rem; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; }
.reach-chip:hover { color: #fff; border-color: var(--primary); }
.reach-chip.active { background: var(--primary); color: #000; border-color: var(--primary); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.reach-chip.active i { color: #000; }
.reach-map { height: 460px; border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); background: #0a0a0d; z-index: 1; }

/* Flag pins */
.reach-pin { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 3px solid var(--primary); background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.reach-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Leaflet chrome restyled for the dark theme */
.reach-map .leaflet-popup-content-wrapper,
.reach-map .leaflet-popup-tip { background: #0e0e11; color: #fff; border: 1px solid var(--glass-border); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.reach-map .leaflet-popup-content { margin: 12px 16px; font-family: 'Outfit', sans-serif; font-size: 0.88rem; line-height: 1.5; }
.reach-map .leaflet-popup-content strong { color: var(--primary); }
.reach-map .leaflet-popup-close-button { color: var(--text-muted) !important; }
.reach-map .leaflet-container a.leaflet-popup-close-button:hover { color: #fff !important; }
.reach-map .leaflet-bar a { background: #14141a; color: #fff; border-bottom-color: var(--glass-border); }
.reach-map .leaflet-bar a:hover { background: var(--primary); color: #000; }
.reach-map .leaflet-control-attribution { background: rgba(0,0,0,0.65); color: var(--text-muted); font-size: 0.65rem; }
.reach-map .leaflet-control-attribution a { color: var(--text-muted); }

/* --- GLOBAL FOOTPRINT --- */
.country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 20px; }
.country-card { background: var(--glass-bg); padding: 50px 40px; border-radius: 35px; border: 1px solid var(--glass-border); transition: transform 0.5s, opacity 0.5s, color 0.5s, background-color 0.5s, border-color 0.5s; cursor: pointer; }
.country-card:hover { border-color: var(--primary); transform: translateY(-10px); }
.country-card img { width: 60px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.country-card h3 { color: #fff; font-size: 1.6rem; margin-bottom: 10px; }
.country-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.country-badge { display: inline-block; background: rgba(74, 222, 128, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.3); padding: 5px 14px; border-radius: 50px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.country-address { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border); color: var(--primary); font-size: 0.82rem; font-weight: 600; text-decoration: none; line-height: 1.5; }
.country-address i { margin-top: 3px; flex-shrink: 0; }
.country-address:hover { color: #fff; }

/* --- STATIC HOOK --- */
.static-hook { padding: 100px 20px; text-align: center; border-top: 1px solid var(--glass-border); }
.static-hook h2 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 30px; }

/* --- MASTER FOOTER --- */
.footer { padding: 100px 20px 40px 20px; border-top: 1px solid var(--glass-border); overflow-x: auto; }
.footer-container { display: grid; grid-template-columns: 1.5fr 0.85fr 1.15fr 1fr 1.15fr; gap: 40px; text-align: left; max-width: 1200px; margin: auto; }
@media (max-width: 1100px) and (min-width: 769px) { .footer-container { grid-template-columns: repeat(2, 1fr); gap: 45px; } }
.footer-logo { height: 88px; width: auto; border-radius: 0; z-index: 2; border: none; }
.footer-column h4 { color: #fff; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px; font-size: 1rem; position: relative; }
.footer-column h4::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 30px; height: 2px; background: var(--primary); }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 15px; }
/* inline-block so the transform applies at all (transforms are ignored on
   inline boxes), and the shift is a transform rather than the padding-left
   it used to be — which was outside the transition list and so snapped. */
.footer-column ul li a { display: inline-block; color: var(--text-muted); text-decoration: none; transition: transform 0.45s cubic-bezier(0.38, 0, 0.16, 1), color 0.45s cubic-bezier(0.38, 0, 0.16, 1); font-size: 0.95rem; }
.footer-column ul li a:hover { color: var(--primary); transform: translateX(7px); }
.social-icons-box { display: flex; gap: 15px; }
.social-circle { width: 45px; height: 45px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: transform 0.45s cubic-bezier(0.38, 0, 0.16, 1), background-color 0.45s cubic-bezier(0.38, 0, 0.16, 1), color 0.45s cubic-bezier(0.38, 0, 0.16, 1), border-color 0.45s cubic-bezier(0.38, 0, 0.16, 1); }
.social-circle:hover { background: var(--primary); color: #000; transform: translateY(-5px); }
.footer-contact-links { margin-top: 25px; display: flex; flex-direction: column; gap: 12px; }
.footer-contact-links a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: transform 0.45s cubic-bezier(0.38, 0, 0.16, 1), color 0.45s cubic-bezier(0.38, 0, 0.16, 1); display: flex; align-items: center; gap: 10px; }
.footer-contact-links a:hover { color: var(--primary); transform: translateX(5px); }
.footer-contact-links a i { color: var(--primary); }
.footer-industries { max-width: 1200px; margin: 50px auto 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.footer-industries h4 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin: 0 6px 0 0; width: 100%; }
.footer-industries a { color: var(--text-muted); text-decoration: none; font-size: 0.88rem; transition: color 0.25s; }
.footer-industries a:hover { color: var(--primary); }
.footer-bottom { padding-top: 40px; border-top: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 60px; gap: 20px; }
.footer-legal { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.footer-legal a { color: var(--text-muted); text-decoration: none; transition: color 0.25s; }
.footer-legal a:hover { color: var(--primary); }

/* --- ELITE SMART AI BOT CSS --- */
#zilfox-bot-wrapper { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; align-items: center; gap: 15px; }
@keyframes floatBot {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
/* No backdrop-filter here. The icon floats on a loop, so the blur was being
   re-sampled every frame for the whole life of the page — and behind a 90%
   opaque circle it was never visible anyway. */
#zilfox-bot-icon { width: 65px; height: 65px; background: rgba(12, 13, 20, 0.94); border: 2px solid var(--primary); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; position: relative; z-index: 2; animation: floatBot 3.5s ease-in-out infinite; transition: transform 0.3s ease, opacity 0.3s ease; }
#zilfox-bot-icon:hover { background: var(--primary); color: #000; transform: scale(1.05); }
#zilfox-bot-window { display: none; width: 380px; background: rgba(12, 13, 20, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255, 106, 0, 0.3); border-radius: 20px; position: absolute; bottom: 85px; right: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.9); overflow: hidden; flex-direction: column; font-family: 'Outfit', sans-serif; transition: border-color 0.4s ease; }
#zilfox-bot-window.bot-typing-active { border-color: var(--primary); box-shadow: 0 20px 50px rgba(0,0,0,0.9); }
.bot-header { background: linear-gradient(90deg, rgba(15,15,20,0.6) 0%, rgba(30,15,5,0.6) 100%); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 18px 25px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.bot-header-left { display: flex; align-items: center; gap: 12px; }
.bot-avatar { width: 35px; height: 35px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; font-size: 1.1rem; box-shadow: none; }
.bot-header-title { display: flex; flex-direction: column; }
.bot-header h4 { margin:0; font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; }
.bot-status { font-size: 0.7rem; color: #4ade80; display: flex; align-items: center; gap: 5px; font-weight: 500; }
.bot-status::before { content: ""; width: 6px; height: 6px; background: #4ade80; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px #4ade80; }
.bot-header .fa-times { cursor: pointer; color: var(--text-muted); transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; font-size: 1.2rem; }
.bot-header .fa-times:hover { color: #fff; transform: rotate(90deg); }
.bot-messages { padding: 25px 20px; height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; font-size: 0.95rem; scroll-behavior: smooth;}
.bot-messages::-webkit-scrollbar { width: 4px; }
.bot-messages::-webkit-scrollbar-thumb { background: rgba(255,106,0,0.3); border-radius: 10px; }
.bot-msg-container { display: flex; gap: 10px; align-items: flex-end; align-self: flex-start; max-width: 90%; }
.bot-mini-avatar { width: 25px; height: 25px; background: rgba(255,106,0,0.1); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 1px solid rgba(255,106,0,0.2); flex-shrink: 0; }
.bot-msg { background: rgba(255,255,255,0.05); color: #e4e4e7; padding: 14px 18px; border-radius: 18px 18px 18px 4px; border: 1px solid rgba(255,255,255,0.05); line-height: 1.6; word-wrap: break-word; font-weight: 300; }
.bot-msg strong { color: #fff; font-weight: 600; }
.user-msg { background: rgba(255, 255, 255, 0.1); color: #fff; padding: 12px 18px; border-radius: 18px 18px 4px 18px; align-self: flex-end; max-width: 85%; border: 1px solid rgba(255,106,0,0.2); word-wrap: break-word; font-weight: 400; }

/* --- NAYA BUTTON CSS YAHAN ADD KIYA HAI --- */
.bot-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 20px;
    background: rgba(255, 106, 0, 0.1);
    color: var(--primary) !important;
    border: 1px solid rgba(255, 106, 0, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.bot-cta-btn:hover {
    background: var(--primary);
    color: #000 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}
.bot-faq-options { padding: 0 20px 15px 20px; display: flex; flex-wrap: wrap; gap: 6px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: bottom center; }
.bot-faq-options.hidden-options { opacity: 0; transform: scale(0.9); pointer-events: none; height: 0; padding: 0 20px; overflow: hidden; margin-top: -10px; }
.bot-faq-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); padding: 7px 12px; border-radius: 50px; font-size: 0.75rem; cursor: pointer; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; font-family: inherit; }
.bot-faq-btn:hover { background: rgba(255,106,0,0.1); color: #fff; border-color: var(--primary); }
.bot-input-area { padding: 15px 20px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,0.4); z-index: 5; }
.bot-input-area input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; outline: none; font-size: 0.95rem; padding: 12px 15px; border-radius: 50px; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; font-family: inherit; }
.bot-input-area input:focus { border-color: rgba(255,106,0,0.5); background: rgba(255,255,255,0.08); }
.bot-input-area input::placeholder { color: #71717a; font-weight: 300; }
.bot-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); border: none; color: #000; font-size: 1rem; cursor: pointer; transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s, border-color 0.3s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bot-send-btn:hover { transform: scale(1.1); box-shadow: none; }
.typing-indicator { display: none; align-items: center; gap: 4px; padding: 10px 20px 15px; }
.dot { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); background: var(--primary); } }
.fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .section { padding: 60px 15px; }
    .hero { margin-top: 80px; min-height: 70vh; padding: 0 15px; }
    .stats-section { padding: 20px 15px 60px 15px; }
    .testimonial-section { padding: 60px 0; }
    .footer { padding: 60px 15px 30px 15px; }
    .logo img { height: 54px; }
    .mobile-toggle { display: block; }
    .nav-links { position: fixed; top: 80px; left: 15px; right: 15px; background: rgba(10,10,10,0.98); flex-direction: column; padding: 40px; border-radius: 25px; border: 1px solid var(--glass-border); transform: translateY(-150%); opacity: 0; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .nav-links.active { transform: translateY(0); opacity: 1; }
    .footer-container { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .footer-column h4::after { left: 50%; transform: translateX(-50%); }
    .social-icons-box { justify-content: center; }
    .footer-contact-links a { justify-content: center; }
    .footer-bottom { justify-content: center; text-align: center; }
    .testimonial-card { width: 300px; padding: 30px; margin: 0; }
    #zilfox-bot-wrapper { bottom: 20px; right: 20px; gap: 10px; }
    #zilfox-bot-window { width: calc(100vw - 40px); right: 0; bottom: 75px; }

    /* Split hero responsive */
    .hero-split { margin-top: 140px; padding-bottom: 60px; }
    .hero-split-left, .hero-split .hero-description { text-align: center; margin-left: auto; margin-right: auto; }
    .hero-split .hero-actions { justify-content: center; }
    .hero-stats-row { margin: 0 auto; text-align: center; gap: 20px 32px; }
    .stat-inline { text-align: center; }
    .stat-inline .stat-number-wrapper { justify-content: center; }
    .badge-top, .badge-bottom { display: none; }
    .dashboard-stats { grid-template-columns: repeat(3, 1fr); }

    /* Split-section system responsive */
    .split-section { grid-template-columns: 1fr; gap: 30px; }
    .split-intro { position: static; }
    .split-desc { max-width: 100%; }
    .split-row { padding: 22px 5px; gap: 14px; }
    .split-row-num { min-width: 32px; font-size: 1.1rem; }
    .bento-header { flex-direction: column; align-items: flex-start; }
    .bento-header-desc { text-align: left; max-width: 100%; }
    .bento-grid { grid-template-columns: 1fr; }
    .process-row { padding: 20px; }
    .media-split { grid-template-columns: 1fr; gap: 30px; }
    .media-split-photo { order: -1; aspect-ratio: 16 / 10; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .reach-map { height: 340px; }
    .reach-chip { padding: 8px 14px; font-size: 0.78rem; }
    .about-collage { margin-bottom: 70px; }
    .about-collage-sub { bottom: -40px; right: -8px; width: 52%; }
}