/* ══════════════════════════════════════════════════════════════
   WEBozINDIA Solutions LLP — Cinematic Agency Stylesheet v2
   Typography: Instrument Serif (display) + Satoshi (body) + Space Mono (labels)
   Palette: Deep black #08080c, warm cream #f0ece4, accent #ff4d00, neon #00e5cc
   ══════════════════════════════════════════════════════════════ */


/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #08080c;
    --bg-2: #0e0e14;
    --bg-3: #14141e;
    --bg-card: #111118;
    --surface: rgba(255,255,255,0.02);
    --border: rgba(255,255,255,0.05);
    --border-hover: rgba(255,255,255,0.12);
    --text: #f0ece4;
    --text-2: #a09c94;
    --text-3: #5a5852;
    --accent: #ff4d00;
    --accent-2: #ff6a2f;
    --accent-glow: rgba(255,77,0,0.15);
    --neon: #00e5cc;
    --neon-glow: rgba(0,229,204,0.12);
    --cream: #f0ece4;
    --warm: #c8a87c;
    --purple: #9071f7;
    --pink: #f472b6;
    --blue: #4d9fff;
    --gold: #e8b931;
    --red: #ef4444;
    --green: #22c55e;
    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: all 0.4s var(--ease); }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Film Grain ───────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 10000;
}

/* ── Utilities ────────────────────────────────────── */
.container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.2rem, 3vw, 3rem); }
.text-accent { color: var(--accent); }
.text-neon { color: var(--neon); }
.text-gradient {
    background: linear-gradient(135deg, var(--accent), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-center { text-align: center; }


/* ══════════════════════════════════════════════════════
   NAVIGATION — Floating glassmorphism pill
   ══════════════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 0.7rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 48px);
    max-width: 1320px;
    background: rgba(8,8,12,0.6);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 100px;
    transition: all 0.5s var(--ease);
}

.nav.scrolled {
    top: 8px;
    background: rgba(8,8,12,0.88);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.nav__logo {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1px;
    z-index: 1001;
    letter-spacing: -0.02em;
}

.nav__logo .w { color: var(--text); }
.nav__logo .o { color: var(--accent); font-style: italic; font-family: var(--font-display); }
.nav__logo .i { color: var(--text); }

.nav__logo-pulse {
    width: 6px;
    height: 6px;
    background: var(--neon);
    border-radius: 50%;
    margin-left: 3px;
    animation: pulse 2.5s ease-in-out infinite;
    box-shadow: 0 0 12px var(--neon);
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.6); }
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.nav__link {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-2);
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    transition: all 0.3s;
}

.nav__link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}

.nav__link.active {
    color: var(--accent);
    background: var(--accent-glow);
}

.nav__cta {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.5rem 1.4rem;
    margin-left: 0.5rem;
    background: var(--accent);
    color: var(--bg);
    border-radius: 50px;
    transition: all 0.3s var(--spring);
}

.nav__cta:hover {
    background: var(--accent-2);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255,77,0,0.3);
}

/* Mobile nav */
.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    padding: 5px;
    z-index: 1001;
}

.nav__burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text);
    transition: all 0.3s;
    border-radius: 2px;
}

.nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8,8,12,0.97);
    backdrop-filter: blur(40px);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--text);
    font-style: italic;
}

.mobile-nav a:hover { color: var(--accent); }


/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */
.btn {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.4s var(--ease);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn:hover::after { opacity: 1; }

.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover {
    background: var(--accent-2);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 48px rgba(255,77,0,0.3), 0 0 0 1px rgba(255,77,0,0.2);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-hover);
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px);
    background: var(--accent-glow);
}

.btn-neon { background: transparent; color: var(--neon); border: 1px solid rgba(0,229,204,0.2); }
.btn-neon:hover {
    background: var(--neon-glow);
    border-color: var(--neon);
    box-shadow: 0 0 30px rgba(0,229,204,0.12);
    transform: translateY(-3px);
}

.btn-lg { padding: 1.05rem 2.6rem; font-size: 0.9rem; }
.btn .arrow { transition: transform 0.4s var(--spring); }
.btn:hover .arrow { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════ */
.section { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.section-alt { background: var(--bg-2); }
.section-dark { background: var(--bg-3); }

.section__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--neon);
    margin-bottom: 1.8rem;
    width: fit-content;
}

.section__badge::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--neon);
    opacity: 0.5;
}

.section__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
    max-width: 700px;
    color: var(--cream);
}

.section__desc {
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 300;
    max-width: 520px;
    line-height: 1.8;
    margin-top: 1.5rem;
}


/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 75% 20%, rgba(255,77,0,0.06), transparent 50%),
        radial-gradient(ellipse 80% 60% at 15% 90%, rgba(0,229,204,0.03), transparent 40%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(144,113,247,0.02), transparent 50%);
}

.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 100px 100px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent);
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: float 12s ease-in-out infinite;
    pointer-events: none;
}

.orb-1 { width: 600px; height: 600px; background: rgba(255,77,0,0.1); top: -15%; right: -8%; }
.orb-2 { width: 450px; height: 450px; background: rgba(0,229,204,0.06); bottom: 5%; left: -8%; animation-delay: -6s; }
.orb-3 { width: 350px; height: 350px; background: rgba(144,113,247,0.06); top: 35%; left: 45%; animation-delay: -3s; }

@keyframes float {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(20px,-12px) scale(1.03); }
    66% { transform: translate(-12px,8px) scale(0.97); }
}

.hero__content {
    position: relative;
    z-index: 2;
    padding: 0 clamp(1.2rem, 3vw, 3rem);
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--neon);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
}

.hero__eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--neon);
    opacity: 0.5;
}

.hero__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(3.2rem, 8.5vw, 7rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--cream);
    max-width: 900px;
}

.hero__title em {
    font-style: italic;
    color: var(--accent);
    text-shadow: 0 0 80px rgba(255,77,0,0.2);
}

.hero__title-outline {
    -webkit-text-stroke: 1.5px var(--text-2);
    -webkit-text-fill-color: transparent;
    transition: all 0.5s var(--ease);
}

.hero__title-outline:hover {
    -webkit-text-fill-color: var(--cream);
    -webkit-text-stroke: 0;
}

.hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-2);
    font-weight: 300;
    max-width: 520px;
    margin-top: 2.2rem;
    line-height: 1.8;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2.8rem;
    flex-wrap: wrap;
}

.hero__stats {
    display: flex;
    gap: 0;
    margin-top: 5rem;
    border-top: 1px solid var(--border);
}

.hero__stat {
    flex: 1;
    padding: 2rem 0;
    border-right: 1px solid var(--border);
    text-align: center;
}

.hero__stat:last-child { border-right: none; }

.hero__stat-value {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--cream);
    letter-spacing: -0.02em;
}

.hero__stat-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 0.3rem;
}


/* ══════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════ */
.marquee {
    padding: 2rem 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.marquee::before,
.marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
}

.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

.marquee__label {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--text-3);
    margin-bottom: 1.2rem;
}

.marquee__track {
    display: flex;
    animation: scroll 35s linear infinite;
    width: max-content;
}

.marquee__track:hover { animation-play-state: paused; }

.marquee__item {
    flex-shrink: 0;
    padding: 0 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.07);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    transition: color 0.4s;
}

.marquee__item:hover { color: rgba(255,255,255,0.35); }
.marquee__item::after { content: '●'; font-size: 0.25rem; color: var(--accent); opacity: 0.4; }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ══════════════════════════════════════════════════════
   SERVICE CARDS — 3D perspective hover
   ══════════════════════════════════════════════════════ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.2rem;
    margin-top: 3.5rem;
    perspective: 1200px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all 0.5s var(--ease);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255,77,0,0.15), transparent 40%, transparent 60%, rgba(0,229,204,0.1));
    opacity: 0;
    transition: opacity 0.5s;
    z-index: -1;
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}

.service-card:hover {
    transform: translateY(-10px) rotateX(2deg);
    border-color: rgba(255,77,0,0.1);
    box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,77,0,0.05);
}

.service-card:hover::before { opacity: 1; }
.service-card:hover::after { opacity: 1; }

.service-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.service-card__icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    background: inherit;
    opacity: 0.15;
    filter: blur(12px);
}

.service-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--cream);
    margin-bottom: 0.6rem;
}

.service-card__text {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.7;
    font-weight: 300;
}

.service-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--warm);
    margin-top: 1.3rem;
    padding: 0.35rem 0.7rem;
    background: rgba(200,168,124,0.06);
    border: 1px solid rgba(200,168,124,0.1);
    border-radius: 4px;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    margin-top: 1.3rem;
}

.service-card__link:hover { gap: 0.8rem; }


/* ══════════════════════════════════════════════════════
   INDUSTRY CARDS
   ══════════════════════════════════════════════════════ */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.industry-card {
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

.industry-card:hover { transform: translateY(-6px); border-color: var(--border-hover); }

.industry-card__number {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 6rem;
    font-weight: 400;
    opacity: 0.03;
    position: absolute;
    top: -0.5rem;
    right: 1.5rem;
    line-height: 1;
}

.industry-card__icon { font-size: 2rem; margin-bottom: 1rem; }

.industry-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--cream);
    margin-bottom: 0.3rem;
}

.industry-card__subtitle {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 1.2rem;
}

.industry-card__list { display: flex; flex-direction: column; gap: 0.5rem; }

.industry-card__list li {
    font-size: 0.82rem;
    color: var(--text-2);
    font-weight: 300;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
}

.industry-card__list li::before {
    content: '→';
    color: var(--accent);
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.75rem;
    margin-top: 2px;
}


/* ══════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════ */
.stats-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,77,0,0.015), transparent, rgba(0,229,204,0.01));
}

.stats-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 2rem; }
.stat-item { text-align: center; }

.stat-value {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 3.2rem;
    font-weight: 400;
    color: var(--cream);
    letter-spacing: -0.02em;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 0.3rem;
}


/* ══════════════════════════════════════════════════════
   ABOUT — Split editorial layout
   ══════════════════════════════════════════════════════ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3.5rem;
}

.about__image-wrap {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--bg-3);
    border: 1px solid var(--border);
}

.about__image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.about__image-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: rgba(8,8,12,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about__image-badge strong {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2rem;
    color: var(--accent);
}

.about__text { font-size: 0.98rem; color: var(--text-2); line-height: 1.85; font-weight: 300; }
.about__text p + p { margin-top: 1.2rem; }
.about__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }

.about__tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    border: 1px solid var(--border);
    color: var(--text-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════
   FEATURES / WHY US — Bento grid
   ══════════════════════════════════════════════════════ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 3.5rem;
    background: var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.feature-card {
    background: var(--bg-2);
    padding: 2.5rem;
    transition: all 0.4s var(--ease);
}

.feature-card:hover { background: var(--bg-3); }

.feature-card__num {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--accent);
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.feature-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--cream);
    margin-bottom: 0.7rem;
}

.feature-card__text {
    font-size: 0.82rem;
    color: var(--text-2);
    line-height: 1.7;
    font-weight: 300;
}


/* ══════════════════════════════════════════════════════
   CLIENTS
   ══════════════════════════════════════════════════════ */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 3.5rem;
}

.client-item {
    width: 140px;
    height: 68px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.4s var(--ease);
}

.client-item:hover {
    border-color: rgba(255,77,0,0.12);
    color: var(--cream);
    background: rgba(255,77,0,0.03);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.client-item img {
    max-height: 36px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.4);
    transition: filter 0.4s;
}

.client-item:hover img { filter: grayscale(0%) brightness(1); }


/* ══════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2.2rem;
    position: relative;
}

.testimonial-card::before {
    content: '"';
    font-family: var(--font-display);
    font-style: italic;
    font-size: 5rem;
    color: var(--accent);
    opacity: 0.15;
    position: absolute;
    top: 0.5rem;
    left: 1.5rem;
    line-height: 1;
}

.testimonial-card__stars { color: var(--gold); font-size: 0.75rem; letter-spacing: 3px; margin-bottom: 1rem; }

.testimonial-card__text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--text-2);
    line-height: 1.8;
}

.testimonial-card__author { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }

.testimonial-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bg);
}

.testimonial-card__name { font-weight: 600; font-size: 0.85rem; }
.testimonial-card__role { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }


/* ══════════════════════════════════════════════════════
   CONTACT FORM
   ══════════════════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
    margin-top: 3.5rem;
}

.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-info__item { display: flex; align-items: flex-start; gap: 1rem; }

.contact-info__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--accent-glow);
    border: 1px solid rgba(255,77,0,0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-info__label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-3);
    margin-bottom: 0.3rem;
}

.contact-info__value { font-size: 0.9rem; line-height: 1.6; font-weight: 300; }

.form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-3);
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.85rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    transition: all 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 0 20px rgba(255,77,0,0.05);
}

.form-group textarea { resize: vertical; min-height: 110px; }
.form-group select option { background: var(--bg-2); }

.form-success {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.15);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    color: var(--green);
    text-align: center;
}

.form-error {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: var(--radius);
    padding: 0.8rem;
    color: var(--red);
    font-size: 0.82rem;
}


/* ══════════════════════════════════════════════════════
   TEAM
   ══════════════════════════════════════════════════════ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.5s var(--ease);
}

.team-card:hover { transform: translateY(-6px); border-color: var(--border-hover); }

.team-card__photo {
    height: 260px;
    background: var(--bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
}

.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__info { padding: 1.5rem; }
.team-card__name { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }

.team-card__role {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.2rem;
}

.team-card__bio { font-size: 0.82rem; color: var(--text-2); margin-top: 0.8rem; line-height: 1.65; font-weight: 300; }


/* ══════════════════════════════════════════════════════
   SERVICE DETAIL PAGE
   ══════════════════════════════════════════════════════ */
.service-hero {
    padding: clamp(8rem, 15vw, 12rem) 0 clamp(4rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
}

.service-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg));
}

.service-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(1.2rem, 3vw, 3rem);
}

.service-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-3);
    margin-bottom: 2.5rem;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.service-hero__back:hover { color: var(--accent); }

.service-hero__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--cream);
}

.service-hero__subtitle {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 1rem;
}

.service-detail__content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
}

.service-detail__body {
    font-size: 0.98rem;
    color: var(--text-2);
    line-height: 1.9;
    font-weight: 300;
}

.service-detail__body p + p { margin-top: 1.3rem; }

.service-detail__features {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    align-self: start;
    position: sticky;
    top: 100px;
}

.service-detail__features h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.service-detail__features ul { display: flex; flex-direction: column; gap: 0.7rem; }

.service-detail__features li {
    font-size: 0.82rem;
    color: var(--text-2);
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.service-detail__features li::before {
    content: '✓';
    color: var(--neon);
    font-weight: 700;
    font-size: 0.85rem;
}


/* ══════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════ */
.cta-banner {
    margin: 4rem 0;
    padding: 4rem;
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(255,77,0,0.2), transparent 30%, transparent 70%, rgba(0,229,204,0.15));
    z-index: -1;
}

.cta-banner__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    color: var(--cream);
    margin-bottom: 1rem;
}

.cta-banner__text {
    font-size: 0.95rem;
    color: var(--text-2);
    font-weight: 300;
    max-width: 480px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}


/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.footer {
    background: var(--bg);
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--border);
}

.footer__top {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.footer__brand-desc {
    font-size: 0.85rem;
    color: var(--text-2);
    font-weight: 300;
    line-height: 1.75;
    margin-top: 1.2rem;
    max-width: 280px;
}

.footer__col-title {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1.5rem;
    color: var(--text-3);
}

.footer__col a {
    display: block;
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-2);
    margin-bottom: 0.7rem;
}

.footer__col a:hover { color: var(--accent); }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--text-3);
    font-weight: 300;
}

.footer__social { display: flex; gap: 0.6rem; }

.footer__social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-2);
    transition: all 0.3s;
}

.footer__social a:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,77,0,0.15);
}


/* ══════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ══════════════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }


/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero__stats { flex-wrap: wrap; }
    .hero__stat { flex: 1 1 45%; border-bottom: 1px solid var(--border); }
    .about-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .service-detail__content { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr 1fr; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .nav {
        width: calc(100% - 24px);
        padding: 0.6rem 1.2rem;
        top: 8px;
        border-radius: 16px;
    }
    .nav__menu { display: none; }
    .nav__burger { display: flex; }
    .nav__logo { font-size: 1.1rem; }
    .section { padding: clamp(3.5rem, 8vw, 5rem) 0; }
    .hero { min-height: auto; padding: 8rem 0 3rem; }
    .hero__stats { flex-direction: column; }
    .hero__stat {
        border-right: none;
        border-bottom: 1px solid var(--border);
        text-align: left;
        padding: 1.2rem 0;
    }
    .hero__stat:last-child { border-bottom: none; }
    .services-grid { grid-template-columns: 1fr; }
    .industry-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer__top { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .features-grid { grid-template-columns: 1fr; }
    .stats-grid { justify-content: center; gap: 1.5rem; }
    .stat-value { font-size: 2.4rem; }
    .cta-banner { padding: 2.5rem 1.5rem; }
}

/* --- Upgraded futuristic UI additions --- */
.glass-panel{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:1.4rem;box-shadow:0 18px 60px rgba(0,0,0,.28);backdrop-filter:blur(16px)}
.solution-flow,.solution-stack,.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.flow-step{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,92,0,.12);border:1px solid rgba(255,92,0,.16);font-family:var(--font-mono);font-size:.78rem;color:var(--accent);margin-bottom:1rem}
.solution-flow h3,.solution-card h3,.case-card h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.65rem}
.solution-flow p,.solution-card p,.case-card p{color:var(--text-2);line-height:1.7;font-size:.9rem}
.solution-card,.case-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:1.6rem;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.32)}
.solution-card:before,.case-card:before{content:'';position:absolute;inset:auto -15% 70% auto;width:180px;height:180px;background:radial-gradient(circle,rgba(0,229,255,.18),transparent 65%);pointer-events:none}
.solution-card__icon{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:1.4rem;margin-bottom:1rem}
.solution-card ul,.case-card ul{margin:1rem 0 0 1rem;color:var(--text-2)}
.solution-card li,.case-card li{margin-bottom:.55rem;line-height:1.6}
.case-card__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:1rem}
.case-card__meta strong{color:var(--accent);font-size:.78rem}
.stats-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid var(--border);border-radius:28px;padding:1.2rem}
.stats-band div{padding:1rem;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
.stats-band strong{display:block;font-size:1rem;margin-bottom:.35rem}.stats-band span{color:var(--text-2);font-size:.88rem;line-height:1.6}
.footer-chip-wrap{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.footer-chip{font-size:.72rem;padding:.4rem .8rem;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:var(--text-2);background:rgba(255,255,255,.03)}
.faq-list{display:grid;gap:1rem}.faq-item{border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));overflow:hidden}.faq-item__q{width:100%;background:none;border:none;color:var(--text);padding:1.2rem 1.3rem;display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:1rem;font-weight:600;cursor:pointer}.faq-item__a{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-item__a p{padding:0 1.3rem 1.2rem;color:var(--text-2);line-height:1.75}.faq-item.open .faq-item__a{max-height:240px}
@media(max-width:980px){.solution-flow,.solution-stack,.case-grid,.stats-band{grid-template-columns:1fr}.nav__menu{gap:1rem}.nav__link{font-size:.84rem}}


/* --- Futuristic Aurora Light Theme Override --- */
:root {
    --bg: #f6fbff;
    --bg-2: #eef7ff;
    --bg-3: #e7f2ff;
    --bg-card: rgba(255,255,255,0.82);
    --surface: rgba(255,255,255,0.72);
    --border: rgba(78,112,170,0.16);
    --border-hover: rgba(78,112,170,0.28);
    --text: #0f172a;
    --text-2: #4b5b7a;
    --text-3: #7a8aa8;
    --accent: #5b5cff;
    --accent-2: #7b7cff;
    --accent-glow: rgba(91,92,255,0.12);
    --neon: #00b8d9;
    --neon-glow: rgba(0,184,217,0.12);
    --cream: #091226;
    --warm: #ff9d5c;
    --purple: #8b5cf6;
    --pink: #ec4899;
    --blue: #3b82f6;
    --gold: #f59e0b;
}
body {
    background:
        radial-gradient(circle at top left, rgba(91,92,255,0.12), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(0,184,217,0.12), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(236,72,153,0.08), transparent 26%),
        linear-gradient(180deg, #f7fbff 0%, #eef6ff 45%, #f6fbff 100%);
    color: var(--text);
}
body::after { opacity: .28; mix-blend-mode: soft-light; }
.nav {
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(123,143,184,0.18);
    box-shadow: 0 10px 40px rgba(52,84,140,0.08);
}
.nav.scrolled {
    background: rgba(255,255,255,0.84);
    border-color: rgba(123,143,184,0.26);
    box-shadow: 0 16px 50px rgba(52,84,140,0.12);
}
.nav__link:hover { background: rgba(91,92,255,0.08); color: var(--text); }
.nav__link.active { color: var(--accent); background: rgba(91,92,255,0.1); }
.nav__cta, .btn-primary { color: #fff; box-shadow: 0 16px 36px rgba(91,92,255,0.18); }
.btn-outline { background: rgba(255,255,255,0.45); }
.mobile-nav { background: rgba(241,247,255,0.94); }
.mobile-nav a { color: var(--text); }
.hero__bg {
    background:
        radial-gradient(ellipse 120% 80% at 78% 14%, rgba(91,92,255,0.18), transparent 46%),
        radial-gradient(ellipse 75% 56% at 12% 82%, rgba(0,184,217,0.14), transparent 38%),
        radial-gradient(ellipse 40% 40% at 52% 45%, rgba(236,72,153,0.09), transparent 42%);
}
.hero__grid {
    background-image:
        linear-gradient(rgba(91,92,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,92,255,0.05) 1px, transparent 1px);
}
.orb { opacity: .5; }
.orb-1 { background: rgba(91,92,255,0.2); }
.orb-2 { background: rgba(0,184,217,0.16); }
.orb-3 { background: rgba(236,72,153,0.14); }
.section-alt, .section-dark, .footer { background: transparent; }
.marquee { background: rgba(255,255,255,0.4); }
.marquee::before { background: linear-gradient(90deg, #f7fbff, transparent); }
.marquee::after { background: linear-gradient(-90deg, #f7fbff, transparent); }
.marquee__item { color: rgba(15,23,42,0.18); }
.marquee__item:hover { color: rgba(15,23,42,0.5); }
.service-card, .industry-card, .testimonial-card, .stats-card, .team-card, .blog-card, .contact-card, .service-detail__features, .cta-banner, .glass-panel, .solution-card, .case-card, .faq-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244,249,255,0.78));
    border: 1px solid rgba(123,143,184,0.18);
    box-shadow: 0 20px 50px rgba(75,104,156,0.12);
    backdrop-filter: blur(20px);
}
.service-card:hover, .industry-card:hover, .testimonial-card:hover, .team-card:hover, .blog-card:hover, .contact-card:hover, .solution-card:hover, .case-card:hover, .faq-item:hover {
    box-shadow: 0 26px 60px rgba(75,104,156,0.18);
    border-color: rgba(91,92,255,0.22);
}
.service-card::before, .cta-banner::before {
    background: linear-gradient(135deg, rgba(91,92,255,0.14), transparent 34%, transparent 66%, rgba(0,184,217,0.12));
}
.service-card::after { background: linear-gradient(90deg, transparent, rgba(91,92,255,0.8), transparent); }
.hero__stats, .marquee, .footer__bottom { border-color: rgba(123,143,184,0.18); }
.hero__title em { text-shadow: 0 0 40px rgba(91,92,255,0.16); }
.hero__title-outline { -webkit-text-stroke: 1.5px rgba(75,91,122,0.55); }
.form-group input, .form-group select, .form-group textarea {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(123,143,184,0.2);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: rgba(91,92,255,0.45);
    box-shadow: 0 0 0 4px rgba(91,92,255,0.08);
}
.flow-step, .footer-chip, .stats-band, .stats-band div {
    background: rgba(255,255,255,0.7);
    border-color: rgba(123,143,184,0.18);
}
.footer__social a { background: rgba(255,255,255,0.7); }
.page-hero, .service-hero {
    background:
        radial-gradient(circle at top right, rgba(91,92,255,0.12), transparent 24%),
        radial-gradient(circle at bottom left, rgba(0,184,217,0.1), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.55), rgba(240,247,255,0.65));
}
@media (max-width: 768px) {
    .nav { background: rgba(255,255,255,0.8); }
}


/* ===== 2026 Futuristic Light UI Refresh ===== */
:root {
    --bg: #f6fbff;
    --bg-2: #eef6ff;
    --bg-3: #e7f1fb;
    --bg-card: rgba(255,255,255,0.70);
    --surface: rgba(255,255,255,0.62);
    --border: rgba(92,126,187,0.16);
    --border-hover: rgba(73,116,201,0.28);
    --text: #12233f;
    --text-2: #536987;
    --text-3: #7d90ab;
    --accent: #5b5cf0;
    --accent-2: #7b7cff;
    --accent-glow: rgba(91,92,240,0.12);
    --neon: #07c5b8;
    --neon-glow: rgba(7,197,184,0.14);
    --cream: #ffffff;
    --warm: #ffb86a;
    --purple: #8a5cff;
    --pink: #ff70bf;
    --blue: #3d8bff;
    --gold: #ffbf47;
    --red: #ff657a;
    --green: #1fc98a;
}
body {
    background:
      radial-gradient(circle at 10% 10%, rgba(123,124,255,0.18), transparent 23%),
      radial-gradient(circle at 90% 18%, rgba(7,197,184,0.16), transparent 19%),
      radial-gradient(circle at 50% 80%, rgba(255,112,191,0.10), transparent 28%),
      linear-gradient(180deg, #f8fbff 0%, #edf5ff 46%, #f6fbff 100%);
    color: var(--text);
}
body::after { opacity: .22; mix-blend-mode: soft-light; }
.site-bg{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;isolation:isolate;}
.site-bg__mesh{position:absolute;inset:-8%;background:radial-gradient(circle at 18% 18%, rgba(123,124,255,.16), transparent 24%),radial-gradient(circle at 78% 20%, rgba(0,229,204,.13), transparent 18%),radial-gradient(circle at 55% 76%, rgba(255,77,0,.11), transparent 22%),radial-gradient(circle at 42% 46%, rgba(144,113,247,.08), transparent 20%);filter:blur(18px);opacity:.95;animation:meshShift 18s ease-in-out infinite;}
.site-bg__orb{position:absolute;border-radius:999px;filter:blur(22px);opacity:.58;animation:floatOrb 16s ease-in-out infinite;}
.site-bg__orb--1{width:420px;height:420px;background:radial-gradient(circle, rgba(123,124,255,.20), transparent 70%);top:-90px;left:-90px;}
.site-bg__orb--2{width:360px;height:360px;background:radial-gradient(circle, rgba(7,197,184,.16), transparent 72%);top:24%;right:-80px;animation-delay:-4s;}
.site-bg__orb--3{width:420px;height:420px;background:radial-gradient(circle, rgba(255,112,191,.12), transparent 72%);bottom:-120px;left:35%;animation-delay:-8s;}
.site-bg__orb--4{width:320px;height:320px;background:radial-gradient(circle, rgba(232,185,49,.11), transparent 72%);top:58%;left:-60px;animation-delay:-11s;}
.site-bg__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(91,92,240,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(91,92,240,0.06) 1px, transparent 1px);background-size:52px 52px;mask-image:linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.6) 65%, transparent 90%);opacity:.62;}
.site-bg__line{position:absolute;height:1px;width:44vw;background:linear-gradient(90deg, transparent, rgba(91,92,240,.58), rgba(0,229,204,.18), transparent);opacity:.55;box-shadow:0 0 18px rgba(91,92,240,.18);}
.site-bg__line--1{top:18%;left:12%;transform:rotate(8deg);}
.site-bg__line--2{bottom:16%;right:8%;transform:rotate(-12deg);}
.site-bg__scan{position:absolute;inset:-20% 0 auto 0;height:38vh;background:linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent);opacity:.45;animation:scanFloat 15s linear infinite;}
.site-particles{position:absolute;inset:0;width:100%;height:100%;opacity:.82;mix-blend-mode:screen;}
.site-spotlight{position:absolute;left:0;top:0;width:34rem;height:34rem;border-radius:999px;background:radial-gradient(circle, rgba(255,255,255,.08), rgba(91,107,255,.08) 26%, rgba(0,229,204,.05) 46%, transparent 70%);transform:translate3d(-50%,-50%,0);opacity:.8;filter:blur(10px);transition:opacity .3s ease;}
@keyframes floatOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-30px,0) scale(1.07)}}
@keyframes meshShift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-3%,0) scale(1.04)}}
@keyframes scanFloat{0%{transform:translate3d(0,-14%,0)}50%{transform:translate3d(0,85vh,0)}100%{transform:translate3d(0,160vh,0)}}
.nav{background:rgba(255,255,255,0.62); border-color:rgba(255,255,255,0.7); box-shadow:0 18px 45px rgba(79,102,146,0.10);}
.nav.scrolled{background:rgba(255,255,255,0.82); box-shadow:0 18px 45px rgba(79,102,146,0.14);} 
.nav__link:hover,.nav__link.active{background:rgba(91,92,240,0.08); color:var(--accent)}
.nav__cta{color:#fff; box-shadow:0 14px 30px rgba(91,92,240,.24);}
.mobile-nav{background:rgba(244,249,255,.96)}
.mobile-nav a{color:var(--text)}
.btn-primary{color:#fff!important;background:linear-gradient(135deg,var(--accent),#6f9cff)!important;border:none!important;box-shadow:0 16px 35px rgba(91,92,240,.25)}
.btn-outline{background:rgba(255,255,255,.72)!important;border:1px solid rgba(91,92,240,.15)!important;color:var(--text)!important}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(224,238,255,.65));}
.glass-panel,.service-card,.case-card,.testimonial-card,.industry-card,.solution-card,.blog-card,.service-detail__features,.service-detail__body,.cta-banner,.faq-item,.client-item{
    background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,250,255,.72))!important;
    border:1px solid rgba(125,146,188,.16)!important;
    box-shadow:0 20px 40px rgba(66,98,146,.08), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter:blur(18px);
}
.section__badge{background:rgba(255,255,255,.74); color:var(--accent); border:1px solid rgba(91,92,240,.16); box-shadow:0 10px 24px rgba(91,92,240,.08)}
.section__title,.service-hero__title,.hero__title,h1,h2,h3{color:var(--text)!important}
.hero,.service-hero{position:relative;overflow:hidden}
.hero__layout{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;min-height:100vh;padding-top:8rem;padding-bottom:4rem;}
.hero__content{max-width:680px}
.hero__title{font-size:clamp(3.2rem, 7vw, 6.2rem)!important;line-height:.92;letter-spacing:-.05em}
.hero__title em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--neon));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__title-outline{-webkit-text-stroke:1px rgba(91,92,240,.2);color:transparent;background:linear-gradient(135deg, rgba(91,92,240,.92), rgba(7,197,184,.92));-webkit-background-clip:text;background-clip:text;}
.hero__subtitle{font-size:1.06rem;color:var(--text-2)!important;max-width:640px}
.hero__stats{gap:1rem}
.hero__stat{background:rgba(255,255,255,.62); border:1px solid rgba(91,92,240,.12); box-shadow:0 12px 24px rgba(82,110,154,.08)}
.hero-visual{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center}
.hero-visual__halo{position:absolute;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle, rgba(91,92,240,.18), rgba(7,197,184,.1), transparent 68%);filter:blur(8px);animation:haloSpin 16s linear infinite}
.hero-visual__panel{position:relative;width:min(100%,540px);padding:1.4rem;border-radius:34px;background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(242,248,255,.72));border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 60px rgba(79,102,146,.15);backdrop-filter:blur(22px);overflow:hidden}
.hero-visual__panel::before{content:'';position:absolute;inset:0;background:linear-gradient(130deg, rgba(91,92,240,.13), rgba(7,197,184,.06) 42%, rgba(255,255,255,0) 62%);pointer-events:none}
.hero-visual__panel-top{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.3rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.52rem .85rem;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(91,92,240,.14);font-size:.76rem;font-weight:700;color:var(--text)}
.chip--live{color:var(--neon)}
.hero-visual__graph{display:grid;grid-template-columns:1fr 220px;gap:1rem;align-items:center}
.hero-visual__bars{display:grid;grid-template-columns:repeat(6,1fr);gap:.65rem;align-items:end;height:210px;padding:1.1rem 0}
.hero-visual__bars span{display:block;border-radius:18px 18px 10px 10px;background:linear-gradient(180deg, rgba(91,92,240,.24), rgba(7,197,184,.68));animation:barPulse 3.6s ease-in-out infinite;min-height:64px;box-shadow:inset 0 1px 0 rgba(255,255,255,.52)}
.hero-visual__bars span:nth-child(1){height:44%}.hero-visual__bars span:nth-child(2){height:68%;animation-delay:-.3s}.hero-visual__bars span:nth-child(3){height:54%;animation-delay:-.8s}.hero-visual__bars span:nth-child(4){height:88%;animation-delay:-1.1s}.hero-visual__bars span:nth-child(5){height:72%;animation-delay:-1.5s}.hero-visual__bars span:nth-child(6){height:96%;animation-delay:-1.8s}
.hero-visual__ring{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 0deg, var(--accent), var(--neon), var(--pink), var(--accent));padding:12px;animation:haloSpin 10s linear infinite}
.hero-visual__ring-core{width:100%;height:100%;border-radius:50%;background:rgba(247,251,255,.95);display:grid;place-items:center;font-size:2.3rem;font-weight:800;color:var(--text);box-shadow:inset 0 0 0 1px rgba(91,92,240,.12)}
.hero-visual__ring-core small{display:block;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);margin-top:.3rem}
.hero-visual__mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:1rem}
.metric-card{padding:1rem;border-radius:22px;background:rgba(255,255,255,.78);border:1px solid rgba(91,92,240,.11)}
.metric-card strong{display:block;font-size:1.25rem}
.metric-card span{display:block;color:var(--text-2);font-size:.82rem}
.floating-badge{position:absolute;padding:.8rem 1rem;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(91,92,240,.14);box-shadow:0 16px 32px rgba(66,98,146,.12);font-weight:700;font-size:.82rem;color:var(--text);backdrop-filter:blur(14px);animation:floatBadge 5s ease-in-out infinite}
.floating-badge--a{top:15%;left:4%}.floating-badge--b{right:2%;top:28%;animation-delay:-1.6s}.floating-badge--c{left:8%;bottom:14%;animation-delay:-3.1s}
@keyframes haloSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes barPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.92)}}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.marquee{background:rgba(255,255,255,.65); border-block:1px solid rgba(91,92,240,.1)}
.marquee__item{background:rgba(255,255,255,.8); border:1px solid rgba(91,92,240,.12); color:var(--text)}
.feature-lab__wrap,.experience-strip{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.4rem;align-items:start}
.feature-lab__stack,.experience-strip__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature-tile,.experience-card{padding:1.25rem;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(240,247,255,.72));border:1px solid rgba(91,92,240,.12);box-shadow:0 18px 35px rgba(66,98,146,.09)}
.feature-tile span{display:inline-flex;width:42px;height:42px;border-radius:14px;align-items:center;justify-content:center;background:rgba(91,92,240,.08);color:var(--accent);font-weight:800;margin-bottom:.9rem}
.feature-tile h3,.experience-card strong{font-size:1.05rem}
.feature-tile p,.experience-card span{color:var(--text-2);font-size:.9rem;display:block;margin-top:.55rem}
.solution-flow{grid-template-columns:repeat(3,1fr)}
.service-card,.case-card,.industry-card,.solution-card,.testimonial-card,.blog-card,.client-item{position:relative;overflow:hidden}
.service-card::before,.case-card::before,.industry-card::before,.solution-card::before,.testimonial-card::before,.blog-card::before,.client-item::before{content:'';position:absolute;inset:-1px;background:linear-gradient(130deg, rgba(91,92,240,.13), rgba(7,197,184,.05), rgba(255,255,255,0) 58%);opacity:.9;pointer-events:none}
.service-card:hover,.case-card:hover,.industry-card:hover,.solution-card:hover,.testimonial-card:hover,.blog-card:hover,.client-item:hover{transform:translateY(-8px);border-color:rgba(91,92,240,.22)!important;box-shadow:0 26px 60px rgba(66,98,146,.14)}
.service-card__icon{box-shadow:0 12px 22px rgba(66,98,146,.12)}
.cta-banner{position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(91,92,240,.14), rgba(7,197,184,.12), rgba(255,255,255,.82))!important}
.cta-banner::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-40px;top:-40px;background:radial-gradient(circle, rgba(255,255,255,.9), transparent 65%)}
.footer{background:linear-gradient(180deg, rgba(232,242,255,.55), rgba(245,250,255,.92));border-top:1px solid rgba(91,92,240,.12)}
.footer__brand-desc,.footer__col a,.footer__bottom,.footer__col-title{color:var(--text-2)!important}
.footer__col-title,.footer__bottom span,strong{color:var(--text)!important}
.newsletter-section{background:linear-gradient(135deg, rgba(91,92,240,.06), rgba(7,197,184,.06), rgba(255,255,255,.8))!important}
input,textarea,select{background:rgba(255,255,255,.78)!important;color:var(--text)!important;border:1px solid rgba(91,92,240,.12)!important;box-shadow:none}
#backTop{background:rgba(255,255,255,.82)!important;color:var(--text)!important}
#preloader{background:linear-gradient(180deg, #f8fbff, #eef6ff)!important}
.tilt-card{transform-style:preserve-3d;will-change:transform}
.magnetic{position:relative}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media (max-width: 1100px){
  .hero__layout,.feature-lab__wrap,.experience-strip{grid-template-columns:1fr;}
  .hero-visual{min-height:unset;padding-top:1rem}
}
@media (max-width: 820px){
  .hero__layout{padding-top:7rem}
  .hero-visual__graph{grid-template-columns:1fr;}
  .hero-visual__ring{margin:0 auto}
  .feature-lab__stack,.experience-strip__cards,.solution-flow{grid-template-columns:1fr;}
  .floating-badge{display:none}
}


/* Performance optimizations */
section, .footer, .newsletter-section, .hero, .services-grid, .solutions-grid, .stats-grid, .case-grid, .faq-grid, .blog-grid {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

@media (max-width: 991px) {
    body::after { display:none; }
    .site-bg__orb, .site-bg__line, .site-bg__mesh, .site-bg__scan { animation: none !important; filter: none !important; }
    .site-particles, .site-spotlight { display:none !important; }
    .tilt-card, .magnetic { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body::after { display:none; }
}


/* Performance refinements while keeping the original motion language */
#preloader{pointer-events:none;animation:preloaderFade .28s ease .18s forwards;will-change:opacity,visibility}
@keyframes preloaderFade{to{opacity:0;visibility:hidden}}
.site-bg,.site-bg__orb,.site-bg__grid,.site-bg__line,.site-bg__mesh,.site-bg__scan,.site-spotlight{will-change:transform,opacity}
.reveal{content-visibility:auto;contain-intrinsic-size:1px 600px}
.tilt-card,.magnetic{transition:transform .22s ease, box-shadow .22s ease}
@media (hover:hover) and (pointer:fine) {
  .tilt-card:hover{transform:translate3d(0,-6px,0)}
  .magnetic:hover{transform:translate3d(0,-2px,0)}
}

/* --- upgraded visuals cleanup --- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.viz-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(244,247,255,.76));border:1px solid rgba(120,125,255,.18);box-shadow:0 20px 45px rgba(92,95,162,.14), inset 0 1px 0 rgba(255,255,255,.85)}
.viz-badge--lg{width:88px;height:88px;border-radius:28px}
.viz-badge__grid,.viz-badge__pulse{position:absolute;inset:0}
.viz-badge__grid{background-image:linear-gradient(rgba(109,92,255,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(109,92,255,.08) 1px, transparent 1px);background-size:12px 12px;mask-image:radial-gradient(circle at center, #000 55%, transparent 78%)}
.viz-badge__core{position:relative;z-index:2;width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.08em;color:var(--viz-accent);background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,247,255,.7));border:1px solid rgba(109,92,255,.15);box-shadow:0 8px 24px rgba(78,85,164,.14)}
.viz-badge__pulse{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.viz-badge__pulse::before,.viz-badge__pulse::after{content:"";position:absolute;border-radius:50%;inset:18%;border:1px solid color-mix(in srgb, var(--viz-accent) 28%, transparent);animation:visualPulse 5.6s ease-in-out infinite}
.viz-badge__pulse::after{inset:8%;animation-delay:1.2s;opacity:.6}
@keyframes visualPulse{0%,100%{transform:scale(.92);opacity:.3}50%{transform:scale(1.04);opacity:.8}}
.scene-panel{position:relative;overflow:hidden;min-height:320px;border-radius:32px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,247,255,.78));border:1px solid rgba(116,126,255,.18);box-shadow:0 30px 80px rgba(61,80,140,.12), inset 0 1px 0 rgba(255,255,255,.9)}
.scene-panel__chrome{display:flex;gap:8px;margin-bottom:18px}
.scene-panel__chrome span{width:10px;height:10px;border-radius:50%;background:rgba(109,92,255,.18)}
.scene-panel__kicker{position:relative;z-index:2;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.scene-panel__title{position:relative;z-index:2;max-width:250px;font-family:var(--font-display);font-size:1.4rem;line-height:1.15;font-weight:700;color:var(--text)}
.scene-panel__mesh{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--scene-accent) 18%, transparent), transparent 28%),radial-gradient(circle at 78% 22%, rgba(0,224,255,.14), transparent 24%),linear-gradient(rgba(109,92,255,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(109,92,255,.08) 1px, transparent 1px);background-size:auto,auto,24px 24px,24px 24px;mask-image:linear-gradient(180deg, #000, rgba(0,0,0,.35));opacity:.95}
.scene-panel__orbit{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb, var(--scene-accent) 20%, transparent)}
.scene-panel__orbit--a{width:200px;height:200px;right:-10px;top:46px;animation:floatY 9s ease-in-out infinite}
.scene-panel__orbit--b{width:118px;height:118px;right:42px;top:88px;animation:floatY 7s ease-in-out infinite reverse}
.scene-panel__node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--scene-accent);box-shadow:0 0 0 10px color-mix(in srgb, var(--scene-accent) 14%, transparent),0 10px 30px color-mix(in srgb, var(--scene-accent) 26%, transparent)}
.scene-panel__node--a{right:92px;top:102px}.scene-panel__node--b{right:170px;top:184px}.scene-panel__node--c{right:56px;top:228px}
.scene-panel__footer{position:absolute;left:24px;right:24px;bottom:24px;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.6);backdrop-filter:blur(12px);border:1px solid rgba(122,126,255,.12);font-size:.82rem;color:var(--text-2)}
.scene-panel__footer strong{color:var(--text);font-weight:600}
.floating-badge{display:flex;align-items:center;gap:.55rem}
.floating-badge::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg, var(--accent), #82e5ff);box-shadow:0 0 0 6px rgba(109,92,255,.12)}
.about-visual-card{position:relative;min-height:400px;display:flex;align-items:flex-end;padding:2rem;border-radius:30px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,247,255,.78));border:1px solid rgba(116,126,255,.18);box-shadow:0 24px 70px rgba(61,80,140,.12)}
.about-visual-card__bg{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 25%, rgba(109,92,255,.14), transparent 24%),radial-gradient(circle at 78% 18%, rgba(0,216,255,.15), transparent 22%),linear-gradient(rgba(109,92,255,.07) 1px, transparent 1px),linear-gradient(90deg, rgba(109,92,255,.07) 1px, transparent 1px);background-size:auto,auto,26px 26px,26px 26px}
.about-visual-card__tower,.about-visual-card__tower::before,.about-visual-card__tower::after{position:absolute;bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(221,229,255,.75));border:1px solid rgba(119,126,255,.16)}
.about-visual-card__tower{left:12%;width:22%;height:46%}.about-visual-card__tower::before{content:"";left:125%;bottom:0;width:70%;height:118%}.about-visual-card__tower::after{content:"";left:222%;bottom:0;width:88%;height:74%}
.about-visual-card__windows{position:absolute;left:0;right:0;top:12%;bottom:10%;background-image:linear-gradient(rgba(109,92,255,.16) 1px, transparent 1px),linear-gradient(90deg, rgba(109,92,255,.16) 1px, transparent 1px);background-size:18px 18px;mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25))}
.about-visual-card__content{position:relative;z-index:2;max-width:290px;padding:1rem 1.1rem;border-radius:22px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px);border:1px solid rgba(116,126,255,.16)}
.about-visual-card__eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.65rem}.about-visual-card__title{font-family:var(--font-display);font-size:1.28rem;font-weight:700;line-height:1.2;margin-bottom:.55rem}.about-visual-card__text{font-size:.88rem;line-height:1.6;color:var(--text-2)}
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.module-card{position:relative;padding:1.4rem;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(244,247,255,.72));border:1px solid rgba(116,126,255,.14);box-shadow:0 14px 40px rgba(64,79,130,.09)}
.module-card__top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.module-card h3{font-family:var(--font-display);font-size:1.05rem;margin:0 0 .55rem}.module-card p{font-size:.88rem;color:var(--text-2);line-height:1.6;margin:0}.module-card ul{margin:1rem 0 0;padding-left:1rem;color:var(--text-2)}.module-card li+li{margin-top:.45rem}
.contact-info__icon{position:relative;font-size:0;color:transparent}.contact-info__icon::before{content:"";display:block;width:48px;height:48px}.contact-info__item:nth-child(1) .contact-info__icon::before{background:radial-gradient(circle at 50% 38%, rgba(109,92,255,.18) 0 7px, transparent 8px),linear-gradient(180deg, rgba(109,92,255,.18), rgba(109,92,255,.06));clip-path:path('M24 2C14.1 2 6 10.1 6 20c0 13.5 18 28 18 28s18-14.5 18-28C42 10.1 33.9 2 24 2z')}
.contact-info__item:nth-child(2) .contact-info__icon::before{background:linear-gradient(135deg, rgba(109,92,255,.18), rgba(0,216,255,.18));mask:radial-gradient(circle at 35% 35%, #000 0 9px, transparent 10px), linear-gradient(#000,#000);-webkit-mask:radial-gradient(circle at 35% 35%, #000 0 9px, transparent 10px), linear-gradient(#000,#000)}
.contact-info__item:nth-child(3) .contact-info__icon::before{border-radius:14px;background:linear-gradient(135deg, rgba(109,92,255,.18), rgba(0,216,255,.12));box-shadow:inset 0 0 0 1px rgba(109,92,255,.12)}
.blog-card__image,.article-visual{position:relative;overflow:hidden}
.article-visual{height:100%;min-height:100%;display:flex;align-items:flex-end;padding:1.1rem;background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(238,243,255,.9))}
.article-visual::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 22% 24%, rgba(109,92,255,.16), transparent 24%),radial-gradient(circle at 78% 26%, rgba(0,216,255,.16), transparent 20%),linear-gradient(rgba(109,92,255,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(109,92,255,.08) 1px, transparent 1px);background-size:auto,auto,20px 20px,20px 20px}
.article-visual__card{position:relative;z-index:2;width:100%;padding:1rem;border-radius:18px;background:rgba(255,255,255,.68);backdrop-filter:blur(12px);border:1px solid rgba(116,126,255,.14)}
.article-visual__eyebrow{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.45rem}.article-visual__title{font-family:var(--font-display);font-size:1rem;line-height:1.25;font-weight:600}.article-visual__meta{display:flex;justify-content:space-between;gap:.6rem;margin-top:.85rem;font-size:.72rem;color:var(--text-2)}
@media (max-width: 992px){.module-grid{grid-template-columns:1fr}.scene-panel{min-height:280px}.about-visual-card{min-height:340px}}

.card::before,.service-card::before,.feature-card::before,.case-card::before,.blog-card::before,.industry-card::before,.testimonial-card::before{content:"";position:absolute;inset:1px 1px auto 1px;height:38%;border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 75%);pointer-events:none;opacity:.78;}
.hero::after{content:"";position:absolute;left:8%;right:8%;bottom:2rem;height:1px;background:linear-gradient(90deg, transparent, rgba(0,229,204,.45), rgba(123,124,255,.55), transparent);opacity:.7;}

/* ===== V10 Final Polished Readability Tuning ===== */
:root {
    --bg: #f1f6ff;
    --bg-2: #e9f1ff;
    --bg-3: #e3edff;
    --bg-card: rgba(255,255,255,0.88);
    --surface: rgba(255,255,255,0.80);
    --border: rgba(86,110,166,0.18);
    --border-hover: rgba(73,96,168,0.32);
    --text: #0e1b34;
    --text-2: #33476a;
    --text-3: #5d7398;
    --accent: #5356f5;
    --accent-2: #6f74ff;
    --accent-glow: rgba(83,86,245,0.14);
    --neon: #08bfb2;
    --neon-glow: rgba(8,191,178,0.12);
}
body {
    background:
      radial-gradient(circle at 10% 8%, rgba(83,86,245,0.12), transparent 20%),
      radial-gradient(circle at 88% 18%, rgba(8,191,178,0.10), transparent 16%),
      radial-gradient(circle at 50% 82%, rgba(255,112,191,0.06), transparent 24%),
      linear-gradient(180deg, #f3f8ff 0%, #ebf2ff 44%, #f1f6ff 100%);
    color: var(--text);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(8, 18, 44, 0.035), rgba(8, 18, 44, 0.06)),
      radial-gradient(circle at 50% 10%, rgba(255,255,255,0.35), transparent 34%);
}
body::after {
    opacity: .14 !important;
    mix-blend-mode: multiply !important;
}
.site-bg__mesh { opacity: .72; filter: blur(22px); }
.site-bg__orb { opacity: .34; }
.site-bg__grid { opacity: .34; }
.site-bg__line { opacity: .34; }
.site-bg__scan {
    opacity: .18;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.025), transparent);
}
.site-particles { opacity: .40; }
.site-spotlight { opacity: .42; filter: blur(18px); }

.nav {
    background: rgba(255,255,255,0.78) !important;
    border-color: rgba(138,153,194,0.36) !important;
    box-shadow: 0 18px 44px rgba(58,83,132,0.12) !important;
}
.nav.scrolled {
    background: rgba(255,255,255,0.90) !important;
    box-shadow: 0 18px 48px rgba(58,83,132,0.16) !important;
}
.nav__link { color: var(--text-2); }
.nav__link:hover,
.nav__link.active { background: rgba(83,86,245,0.10) !important; color: var(--text) !important; }
.mobile-nav { background: rgba(244,248,255,.98) !important; }

.hero__title,
.section__title,
.service-hero__title,
h1, h2, h3, h4 {
    color: var(--text) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.hero__title-outline {
    -webkit-text-stroke: 1px rgba(47,67,116,.34) !important;
}
.hero__subtitle,
.section__subtitle,
.service-card p,
.solution-card p,
.case-card p,
.blog-card p,
.testimonial-card p,
.faq-item__a p,
.contact-card p,
.footer__brand-desc,
.footer__col a,
.footer__bottom,
p, li {
    color: var(--text-2);
}
.small-text, .muted, .meta, .label, .eyebrow { color: var(--text-3) !important; }

.glass-panel,
.service-card,
.case-card,
.testimonial-card,
.industry-card,
.solution-card,
.blog-card,
.service-detail__features,
.service-detail__body,
.cta-banner,
.faq-item,
.client-item,
.feature-tile,
.experience-card,
.hero-visual__panel,
.metric-card,
.flow-step,
.stats-band,
.module-card,
.scene-panel,
.about-visual-card,
.article-visual,
.contact-info__item,
.contact-card,
.hero__stat {
    background: linear-gradient(180deg, rgba(255,255,255,.93), rgba(242,247,255,.84)) !important;
    border: 1px solid rgba(123,138,181,.22) !important;
    box-shadow: 0 18px 42px rgba(64,87,136,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
.service-card:hover,
.case-card:hover,
.industry-card:hover,
.solution-card:hover,
.testimonial-card:hover,
.blog-card:hover,
.client-item:hover {
    box-shadow: 0 24px 54px rgba(64,87,136,.14), inset 0 1px 0 rgba(255,255,255,.88) !important;
    border-color: rgba(83,86,245,.24) !important;
}
.section-alt {
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(229,238,255,.72));
}
.footer {
    background: linear-gradient(180deg, rgba(232,241,255,.68), rgba(245,249,255,.96)) !important;
    border-top: 1px solid rgba(123,138,181,.18) !important;
}
.marquee,
.footer__social a,
.footer-chip,
.chip,
.section__badge,
.floating-badge,
.stats-band div {
    background: rgba(255,255,255,.84) !important;
    border-color: rgba(123,138,181,.18) !important;
    color: var(--text) !important;
}
.hero-visual__ring-core {
    background: rgba(245,249,255,.98) !important;
}
.hero-visual__halo {
    background: radial-gradient(circle, rgba(83,86,245,.14), rgba(8,191,178,.08), transparent 70%) !important;
    filter: blur(12px);
}

input, textarea, select,
.form-group input, .form-group select, .form-group textarea {
    background: rgba(255,255,255,.94) !important;
    color: var(--text) !important;
    border: 1px solid rgba(123,138,181,.22) !important;
}
::placeholder { color: #6f82a4; opacity: 1; }

.btn-outline {
    background: rgba(255,255,255,.86) !important;
    color: var(--text) !important;
    border: 1px solid rgba(83,86,245,.16) !important;
}
.btn-primary,
.nav__cta {
    box-shadow: 0 14px 28px rgba(83,86,245,.22) !important;
}

@media (max-width: 991px) {
    body::before { background: linear-gradient(180deg, rgba(8,18,44,0.03), rgba(8,18,44,0.05)); }
    .nav { background: rgba(255,255,255,0.90) !important; }
}


/* ===== V11 Stability + Readability + Performance Patch ===== */
:root{
  --bg:#eef4ff;
  --bg-2:#e6eeff;
  --bg-3:#dfe8fb;
  --bg-card:rgba(255,255,255,.94);
  --surface:rgba(255,255,255,.90);
  --border:rgba(87,107,156,.18);
  --border-hover:rgba(83,86,245,.28);
  --text:#0c1933;
  --text-2:#253a63;
  --text-3:#4d678f;
  --shadow-soft:0 14px 34px rgba(53,78,126,.10);
  --shadow-card:0 18px 40px rgba(53,78,126,.12);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 11% 9%, rgba(83,86,245,.10), transparent 18%),
    radial-gradient(circle at 88% 18%, rgba(8,191,178,.08), transparent 14%),
    radial-gradient(circle at 50% 82%, rgba(255,112,191,.05), transparent 20%),
    linear-gradient(180deg, #f0f6ff 0%, #eaf1ff 48%, #eef4ff 100%) !important;
  color:var(--text)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(180deg, rgba(8,18,44,.04), rgba(8,18,44,.06));
}
body::after{
  opacity:.08 !important;
  mix-blend-mode:multiply !important;
}
#preloader{display:none !important;}

.site-bg{z-index:-2}
.site-bg__mesh{opacity:.58 !important;filter:blur(18px) !important}
.site-bg__orb{opacity:.22 !important;filter:blur(18px) !important}
.site-bg__grid{opacity:.18 !important;background-size:58px 58px !important}
.site-bg__line{opacity:.16 !important}
.site-bg__scan{opacity:.08 !important}
.site-particles{opacity:.22 !important}
.site-spotlight{opacity:.20 !important;filter:blur(20px) !important}

.nav{
  background:rgba(255,255,255,.84) !important;
  border-color:rgba(129,146,184,.30) !important;
  box-shadow:0 12px 34px rgba(53,78,126,.10) !important;
}
.nav.scrolled{
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 16px 42px rgba(53,78,126,.14) !important;
}
.nav__logo,.nav__logo .w,.nav__logo .i{color:var(--text)!important}
.nav__link{color:var(--text-2)!important}
.nav__link:hover,.nav__link.active{
  color:var(--text)!important;
  background:rgba(83,86,245,.10)!important;
}
.mobile-nav{background:rgba(242,247,255,.98) !important;}
.mobile-nav a{color:var(--text)!important;text-shadow:none!important;}

h1,h2,h3,h4,h5,h6,.section__title,.service-hero__title,.hero__title,.cta-banner__title{color:var(--text)!important;text-shadow:none !important;}
p,li,.section__desc,.section__subtitle,.hero__subtitle,.about__text,.service-card__text,.solution-card p,.case-card p,.blog-card__excerpt,.contact-card p,.faq-item__a,.footer__brand-desc,.footer__col a,.footer__bottom{color:var(--text-2)!important;}
.small-text,.muted,.meta,.label,.eyebrow,.hero__stat-label,.service-card__tag,.testimonial-card__role,.article-visual__eyebrow,.article-visual__meta,.blog-card__meta,.service-hero__back{color:var(--text-3)!important;}
.hero__title-outline{-webkit-text-stroke:1px rgba(34,50,84,.42)!important;text-shadow:none!important;}

.service-card,.industry-card,.testimonial-card,.stats-card,.team-card,.blog-card,.contact-card,.service-detail__features,.service-detail__body,.cta-banner,.glass-panel,.solution-card,.case-card,.faq-item,.client-item,.feature-tile,.experience-card,.metric-card,.module-card,.scene-panel,.about-visual-card,.article-visual,.contact-info__item,.hero__stat,.hero-visual__panel{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,255,.90)) !important;
  border:1px solid rgba(119,136,171,.20) !important;
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter:blur(14px) !important;
}
.service-card:hover,.industry-card:hover,.testimonial-card:hover,.team-card:hover,.blog-card:hover,.contact-card:hover,.solution-card:hover,.case-card:hover,.faq-item:hover,.client-item:hover,.feature-tile:hover,.experience-card:hover{border-color:rgba(83,86,245,.26)!important;box-shadow:0 22px 48px rgba(53,78,126,.16), inset 0 1px 0 rgba(255,255,255,.92) !important;}
.section-alt,.newsletter-section{background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(228,237,255,.56)) !important;}
.footer{background:linear-gradient(180deg, rgba(232,241,255,.74), rgba(245,249,255,.96)) !important;border-top:1px solid rgba(119,136,171,.18) !important;}
.marquee,.footer__social a,.footer-chip,.chip,.section__badge,.floating-badge,.stats-band div,.pagination__link,.flow-step{background:rgba(255,255,255,.88) !important;border:1px solid rgba(119,136,171,.18) !important;color:var(--text)!important;box-shadow:var(--shadow-soft);}
.hero__stat-value,.metric-card strong,.feature-tile h3,.case-card h3,.service-card__title,.blog-card__title,.solution-card h3,.industry-card h3,.about-visual-card__title{color:var(--text)!important;}

input,textarea,select,.form-group input,.form-group textarea,.form-group select{background:rgba(255,255,255,.96)!important;color:var(--text)!important;border:1px solid rgba(119,136,171,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;}
input:focus,textarea:focus,select:focus,.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:rgba(83,86,245,.48)!important;box-shadow:0 0 0 4px rgba(83,86,245,.10)!important;}
::placeholder{color:#617aa4!important;opacity:1}

.btn-primary,.nav__cta{color:#fff !important;box-shadow:0 12px 24px rgba(83,86,245,.22) !important;}
.btn-outline{background:rgba(255,255,255,.90)!important;color:var(--text)!important;border:1px solid rgba(83,86,245,.14)!important;}
.btn,.nav__cta,.btn-primary,.btn-outline{transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease !important;}
.btn:hover,.nav__cta:hover{transform:translateY(-2px) !important;}

.hero-visual__halo{animation:haloSpin 10s linear infinite !important}
.hero-visual__ring{animation:haloSpin 7s linear infinite !important}
.hero-visual__bars span{animation:barPulse 2.1s ease-in-out infinite !important}
.orb{animation-duration:10s !important}
.marquee__track{animation-duration:20s !important}

.hero-visual__ring-core{background:rgba(248,251,255,.98) !important;color:var(--text)!important;}
.hero-visual__panel::before,.card::before,.service-card::before,.feature-card::before,.case-card::before,.blog-card::before,.industry-card::before,.testimonial-card::before{opacity:.55 !important;}
.service-card__icon svg,.case-card svg,.module-card svg{filter:none!important}

section,.footer,.newsletter-section,.hero,.services-grid,.solutions-grid,.stats-grid,.case-grid,.faq-grid,.blog-grid{content-visibility:auto;contain-intrinsic-size:1px 760px;}
.reveal{transition:opacity .45s ease, transform .45s ease !important;}
@media (max-width: 991px){.site-particles,.site-spotlight{display:none !important}.nav{background:rgba(255,255,255,.92)!important}}
@media (prefers-reduced-motion: reduce){.hero-visual__halo,.hero-visual__ring,.hero-visual__bars span,.marquee__track,.orb,.site-bg__mesh,.site-bg__scan{animation:none !important}}