/*
Theme Name: Digital Kinetics
Theme URI: https://digitalkineticsindia.com
Description: Pure Hand-Coded Fluid Kinetic WordPress Theme.
Version: 5.0
Author: Do Digitals
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bg-white: #ffffff;
    --text-dark: #0A1128;    /* Deep Navy */
    --text-muted: #5A6473;   /* Grey */
    --primary-blue: #005AEE; /* Kinetic Blue */
    --accent-cyan: #00d2ff;  /* Dynamic Cyan */
    --radius-full: 50px;
    --container: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; transition: 0.3s ease; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   HEADER & TOP PROGRESS BAR
   ========================================================================== */
#scroll-progress {
    position: fixed; top: 0; left: 0; width: 0%; height: 3px;
    background: linear-gradient(to right, var(--primary-blue), var(--accent-cyan));
    z-index: 10000;
}

.site-header-fixed {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    padding: 15px 0; background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.03);
}

.header-flex { display: flex; justify-content: space-between; align-items: center; }
.site-logo img { 
    max-height: 80px; /* Logo ki height yahan se adjust kar sakte ho */
    width: auto; 
    display: block;
}
.logo a { font-weight: 800; font-size: 22px; color: var(--text-dark); letter-spacing: -1px; }
.logo a .text-gradient { background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.nav-minimal ul { display: flex; gap: 30px; list-style: none; }
.nav-minimal a { font-weight: 600; font-size: 15px; color: var(--text-muted); }
.nav-minimal a:hover { color: var(--text-dark); }

.header-action { display: flex; gap: 15px; align-items: center; }

.btn-primary-small {
    background: var(--text-dark); color: #fff;
    padding: 10px 22px; border-radius: 30px; font-weight: 600; font-size: 14px;
}
.btn-primary-small:hover { background: var(--primary-blue); transform: translateY(-2px); }

.mobile-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; }
.mobile-toggle span { width: 22px; height: 2px; background: var(--text-dark); border-radius: 3px; transition: 0.3s; }

/* ==========================================================================
   HERO FLUID LAYERS & TYPOGRAPHY
   ========================================================================== */
.hero-section-fluid {
    padding-top: 180px; padding-bottom: 120px;
    min-height: 100vh; position: relative; display: flex; align-items: center;
}

/* Background Soft Blobs Animation */
.kinetic-bg-shapes { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; }
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.1;
    animation: breatherGlow 15s ease-in-out infinite alternate;
}
.blob-1 { width: 400px; height: 400px; background: var(--primary-blue); top: 10%; right: 10%; }
.blob-2 { width: 300px; height: 300px; background: var(--accent-cyan); bottom: 10%; left: 10%; animation-duration: 20s; }

@keyframes breatherGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, 30px) scale(1.1); }
}

.hero-overlap-layout {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 40px; position: relative; z-index: 2;
}

/* Typography Overlap */
.kinetic-badge {
    display: inline-block; padding: 6px 16px; border-radius: 30px;
    background: #e0edff; color: var(--primary-blue);
    font-weight: 700; font-size: 13px; margin-bottom: 20px;
}

.giant-heading {
    font-size: 4rem;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0px;
    margin-bottom: 30px;
}
.giant-heading span { color: var(--primary-blue); }

/* Cursor styling for Typing Effect */
.cursor {
    display: inline-block; color: var(--primary-blue);
    animation: blinkCursor 0.8s infinite alternate;
}
@keyframes blinkCursor { to { opacity: 0; } }

.hero-desc {
    font-size: 1.15rem; color: var(--text-muted); max-width: 90%;
    margin-bottom: 40px;
}

.hero-actions { display: flex; gap: 20px; }

.btn-gradient-fill {
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
    color: #fff; padding: 16px 36px; border-radius: 30px;
    font-weight: 700; font-size: 16px;
    box-shadow: 0 10px 25px rgba(0, 90, 238, 0.2);
}
.btn-gradient-fill:hover {
    box-shadow: 0 15px 35px rgba(0, 90, 238, 0.4);
    transform: translateY(-3px);
}

.btn-outline {
    background: transparent; color: var(--text-dark);
    padding: 16px 36px; border-radius: 30px;
    font-weight: 700; font-size: 16px;
    border: 2px solid var(--text-dark);
}
.btn-outline:hover { background: var(--text-dark); color: #fff; }

/* ==========================================================================
   VISUAL Collage Parallax Parallax
   ========================================================================== */
.hero-visual-collage { position: relative; height: 500px; display: flex; justify-content: center; align-items: center; }

/* Dashboard Image peeking */
.dashboard-visual { position: absolute; max-width: 100%; border-radius: 12px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1)); transform-origin: top left; }
.dashboard-visual img { width: 100%; height: auto; }

/* Overlapping Glass UI Cards Parallax Parallax Parallax Parallax Parallax */
.glass-float {
    position: absolute; background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 1);
    padding: 15px 25px; border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    display: flex; align-items: center; gap: 15px; z-index: 5;
    transition: transform 0.1s linear; /* Smooth mouse tracking */
}

.card-icon { font-size: 24px; }
.card-info strong { display: block; font-size: 18px; color: var(--text-dark); font-weight: 700; }
.card-info p { font-size: 12px; color: var(--text-muted); margin: 0; }

.card-seo { top: 10%; left: -20px; }
.card-ads { bottom: 15%; right: 0px; }
.card-design { top: 30%; right: -30px; }

/* Abstract shapes behind main collage */
.circles-group { position: absolute; width: 400px; height: 400px; top: 0; left: 0; z-index: 0; opacity: 0.05; }
.circle-blue { width: 100%; height: 100%; border-radius: 50%; background: var(--primary-blue); }
.circle-silver { width: 80%; height: 80%; border-radius: 50%; background: var(--text-muted); position: absolute; bottom: -20px; right: -20px; }

/* Entrance Animations Keyframes Keyframes Keyframes Keyframes Keyframes */
@keyframes fadeInUpReveal { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes scaleInReveal { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }

/* CSS-based staggered reveal logic on load (using animate-on-load class on parent) */
.animate-on-load .stagger-reveal { opacity: 0; animation: fadeInUpReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-on-load .scale-reveal { opacity: 0; animation: scaleInReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-on-load .parallax-elements .glass-float, 
.animate-on-load .parallax-elements .dashboard-visual {
    opacity: 0; animation: fadeInUpReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

.stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } .stagger-6 { animation-delay: 0.6s; }

/* Responsive adjustments */
@media (max-width: 992px) {
    .giant-heading { font-size: 3.5rem; letter-spacing: -1px; }
    .hero-overlap-layout { grid-template-columns: 1fr; text-align: center; }
    .hero-actions { justify-content: center; flex-direction: column; }
    .hero-visual-collage { margin-top: 40px; height: 400px; }
    .glass-float { display: none; } /* Kept clean on mobile */
    .dashboard-visual { position: relative; max-width: 100%; top: 0; left: 0; margin: 0 auto; }
}

@media (max-width: 768px) {
    .mobile-toggle { display: flex; }
    .site-header-fixed { padding: 10px 0; }
    .hero-section-fluid { padding-top: 140px; }
    .giant-heading { font-size: 2.8rem; }
    .dashboard-visual { max-width: 90%; }
}

/* ==========================================================================
   NEW: KINETIC PARTICLES BACKGROUND STYLE & DEPTH
   ========================================================================== */
#kinetic-particles-bg {
    position: absolute;
    width: 100vw;
    height: 110vh; /* Peeking below the fold slightly fold slightly fold fold peeking below */
    top: 0;
    left: 0;
    z-index: 0; /* Behind all text content BehindBehindBehindBehind BehindBehind BehindBehindBehind Behind */
    overflow: hidden;
    pointer-events: none; /* User can click through particles to buttons */
}

/* Ensure the dark midnight V5 theme remains primary Midnighttheme themes primaryMidnight themes primary primary */
.hero-section-fluid.bg-white {
    background: #fcfdfd !important; /* particles are behind Transparent Transparent Transparent transparent!important transparent!important */
    z-index: 2; /* Content above particles content content Content above particles ContentContent Content above particles content */
}

/* We need to increase z-index on content slightly content content z-index on content slightly z-index content slightly content slightly content slightly */
.hero-text-overlap, 
.hero-visual-collage {
    position: relative;
    z-index: 10;
}

/* Corrected z-index for glass cards in V5 glass z-index in V5 V5 glass z-index in V5 glass cards in V5 z-index glass cards z-index in V5 */
.glass-float {
    z-index: 15 !important;
}

.site-header-fixed {
    position: absolute; /* Fixed ki jagah absolute, taaki hero ke flow me rahe */
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 10000;
    padding: 6px 0 0; 
    background: transparent !important; /* Koi color nahi, pura transparent */
    border-bottom: none; /* Koi line nahi */
    box-shadow: none;
}
.site-header-fixed.scrolled {
    position: fixed;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 6px 0 0;
    transition: all 0.4s ease;
}
.site-header-fixed.scrolled .site-logo img {
    max-height: 70px;
}

/* Nav links color adjust taaki white bg par proper dikhe */
.nav-minimal a { 
    color: var(--text-dark); /* Dark color for light background */
    font-weight: 600; 
    font-size: 15px; 
}
.nav-minimal a:hover { color: var(--primary-blue); }

.logo a { 
    color: var(--text-dark); /* Logo color adjust */
}

/* ==========================================================================
   DIGITAL MARKETING BACKGROUND ANIMATIONS (6 UNIQUE FX)
   ========================================================================== */
.digital-marketing-bg-fx {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; pointer-events: none; z-index: 0;
}

/* 1. Floating Metric Pills */
.bg-metric {
    position: absolute; background: rgba(0, 90, 238, 0.05); color: var(--primary-blue);
    padding: 8px 16px; border-radius: 30px; font-weight: 700; font-size: 14px;
    border: 1px solid rgba(0, 90, 238, 0.1); opacity: 0.6;
    animation: floatMetric 15s linear infinite;
}
.m-1 { top: 15%; left: 5%; animation-duration: 20s; }
.m-2 { top: 60%; right: 10%; animation-duration: 25s; animation-direction: reverse; }
.m-3 { bottom: 10%; left: 30%; animation-duration: 18s; }

@keyframes floatMetric {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -50px) rotate(5deg); }
    66% { transform: translate(-20px, -20px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* 2. Growing Trend Graph (SVG Line) */
.bg-trend-graph {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 40vh; opacity: 0.05;
}
.animated-line {
    fill: none; stroke: var(--primary-blue); stroke-width: 4;
    stroke-dasharray: 1000; stroke-dashoffset: 1000;
    animation: drawTrend 6s ease-out infinite alternate;
}
@keyframes drawTrend { to { stroke-dashoffset: 0; } }

/* 3. Audience Targeting Radar */
.bg-radar {
    position: absolute; top: -100px; right: -100px; width: 400px; height: 400px;
    border-radius: 50%; opacity: 0.08; border: 1px solid var(--primary-blue);
}
.radar-ring {
    position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;
    border-radius: 50%; border: 1px dashed var(--primary-blue);
}
.r2 { top: 25%; left: 25%; width: 50%; height: 50%; border: 1px solid var(--primary-blue); }
.radar-sweep {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(0, 90, 238, 0.4) 100%);
    animation: sweepRadar 4s linear infinite;
}
@keyframes sweepRadar { to { transform: rotate(360deg); } }

/* 4. Social Engagement Bubbles */
.bg-engagement { position: absolute; bottom: -50px; right: 20%; width: 100px; height: 100%; }
.soc-icon {
    position: absolute; font-size: 24px; opacity: 0; filter: grayscale(100%);
    animation: riseUp 5s ease-in infinite;
}
.i-1 { left: 10px; animation-delay: 0s; }
.i-2 { left: 40px; animation-delay: 1.5s; font-size: 18px; }
.i-3 { left: 70px; animation-delay: 3s; font-size: 30px; }
.i-4 { left: 25px; animation-delay: 4.2s; }

@keyframes riseUp {
    0% { bottom: 0; opacity: 0; transform: scale(0.5); }
    20% { opacity: 0.15; filter: grayscale(0%); transform: scale(1.2); }
    80% { opacity: 0.15; }
    100% { bottom: 80%; opacity: 0; transform: scale(1); }
}

/* 5. Background Auto-Typing Search Bar */
.bg-search-bar {
    position: absolute; top: 30%; left: -50px;
    background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0,0,0,0.05);
    padding: 12px 24px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    display: flex; align-items: center; gap: 10px; opacity: 0.4;
    transform: rotate(-5deg);
}
.search-icon { opacity: 0.5; }
#bg-typing-text { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.bg-cursor { animation: blinkCursor 0.8s infinite; color: var(--primary-blue); }

/* 6. Pulsing Data Nodes */
.data-node {
    position: absolute; width: 12px; height: 12px; background: var(--accent-cyan);
    border-radius: 50%; opacity: 0.2; box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.4);
    animation: pulseNode 3s infinite;
}
.n-1 { top: 40%; left: 45%; } .n-2 { top: 25%; right: 35%; animation-delay: 1s; } .n-3 { bottom: 30%; right: 40%; animation-delay: 2s; }

@keyframes pulseNode {
    70% { box-shadow: 0 0 0 20px rgba(0, 210, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}
/* Z-INDEX MANAGEMENT FOR MEGA BACKGROUND */

/* Sabse piche: Kinetic Particles (Jo mouse hover pe connect hote hain) */
#kinetic-particles-bg {
    position: absolute;
    width: 100vw; height: 110vh;
    top: 0; left: 0;
    z-index: 0; 
}

/* Uske theek upar: Digital Marketing Elements (Radar, Graph, Metrics) */
.digital-marketing-bg-fx {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
    overflow: hidden; 
    pointer-events: none; /* User iske through click kar sakega */
    z-index: 1; 
}

/* Sabse upar: Main Text aur Buttons */
.hero-overlap-layout {
    position: relative;
    z-index: 10; /* Sabse upar rahega taaki links click ho sakein */
}

/* ==========================================================================
   V7: INTRO SCROLL-FILL TEXT
   ========================================================================== */
.intro-scroll-fill {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: var(--bg-white);
    padding: 0px 0;
}

.intro-text-container { max-width: 1000px; }

.scroll-fill-heading {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: normal;
    margin: 30px 0;
    background: linear-gradient(to right, var(--text-dark) 50%, #e2e8f0 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    color: transparent;
    transition: background-position 0.1s ease-out;
}

.scroll-fill-p {
    /* Base color (Grey) aur Fill Color (White/Light Blue) ka gradient */
        background: linear-gradient(to right, var(--text-dark) 50%, #e2e8f0 50%);
    background-size: 200% 100%;
    background-position: 100% 0; /* Default completely grey */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Color transparent hoga tabhi background dikhega */
    transition: background-position 0.1s ease-out;
}

.intro-tags { display: flex; flex-wrap: wrap; gap: 15px; }
.intro-tags span {
    background: #f8fafc; color: var(--text-muted);
    padding: 10px 20px; border-radius: 50px; font-weight: 600; font-size: 14px;
    border: 1px solid #e2e8f0;
}

/* ==========================================================================
   V7: 3D STICKY STACKING CARDS (Services)
   ========================================================================== */
.services-sticky-stack {
    padding: 0px 0;
    background: #ffffff;
    position: relative;
}

.cards-stack-container {
    position: relative;
    padding-bottom: 100px; /* Space after last card */
    margin-top: 60px;
}

.stack-card {
    position: sticky; /* THIS IS THE MAGIC */
    top: 15vh; /* Distance from top when it sticks */
    padding-top: 20px; /* Gives space for overlapping visual effect */
    height: 75vh;
    display: flex;
    align-items: center;
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.card-inner {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.card-content-wrap { width: 45%; }
.card-visual-wrap { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; }

/* Mockup squares for visual side */
.mockup-box { width: 100%; height: 80%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.bg-blue { background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan)); }
.bg-cyan { background: linear-gradient(135deg, #00d2ff, #3a7bd5); }
.bg-white-op { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }
.bg-dark { background: var(--text-dark); }

.service-icon-large {
    width: 70px; height: 70px; background: rgba(0,90,238,0.1); border-radius: 20px;
    display: flex; justify-content: center; align-items: center; font-size: 32px; margin-bottom: 30px;
}

.card-content-wrap h3 { font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; color: var(--text-dark); letter-spacing: -1px; }
.card-content-wrap p { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 30px; }

.service-list { list-style: none; }
.service-list li { font-size: 16px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.service-list li::before { content: '✓'; color: var(--primary-blue); font-size: 14px; background: rgba(0,90,238,0.1); width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }

.light-list li { color: #fff; }
.light-list li::before { color: #fff; background: rgba(255,255,255,0.2); }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .scroll-fill-heading { font-size: 2.5rem; }
    .card-inner { flex-direction: column; padding: 40px; }
    .card-content-wrap, .card-visual-wrap { width: 100%; }
    .card-visual-wrap { display: none; } /* Hide visual on mobile to save space */
    .stack-card { height: auto; top: 10vh; }
}

/* ==========================================================================
   IMPORTANT: Make your existing sections transparent so background shows
   ========================================================================== */
.intro-scroll-fill, .services-sticky-stack {
    background: transparent !important;
    position: relative;
    z-index: 10; /* Keep your text/cards above the animations */
}

/* ==========================================================================
   7 NEW DIGITAL MARKETING BACKGROUND ANIMATIONS
   ========================================================================== */
.marketing-super-bg {
    position: fixed; /* Fixed taaki scroll karne pe peeche chalta rahe */
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0; pointer-events: none; overflow: hidden;
    background: #fdfdfd; /* Solid white base behind everything */
}

/* 1. Heatmap Glow (Mouse Tracked) */

/* 2. Massive Diagonal Ticker */
.bg-ticker-tape {
    position: absolute; top: 30%; left: -50%; width: 200vw;
    font-size: 180px; font-weight: 900; white-space: nowrap;
    color: rgba(0, 90, 238, 0.03); /* Super faint blue */
    transform: rotate(-15deg); font-family: 'Poppins', sans-serif;
    animation: slideTicker 60s linear infinite;
}
@keyframes slideTicker { 0% { transform: rotate(-15deg) translateX(0); } 100% { transform: rotate(-15deg) translateX(-50%); } }

/* 3. Floating Click Pointers */
.cursor-item {
    position: absolute; font-size: 40px; opacity: 0;
    animation: clickFly 12s ease-in infinite;
}
.c-1 { bottom: -50px; left: 15%; animation-delay: 0s; }
.c-2 { bottom: -50px; left: 55%; animation-delay: 4s; font-size: 50px; }
.c-3 { bottom: -50px; left: 85%; animation-delay: 8s; font-size: 30px; }
@keyframes clickFly {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.1; transform: scale(1.2); } /* Click effect */
    100% { transform: translateY(-120vh) translateX(100px); opacity: 0; }
}

/* 4. Ghost Sales/Lead Notifications */
.ghost-notifications .notify {
    position: absolute; background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0,0,0,0.05); padding: 12px 25px;
    border-radius: 50px; font-weight: 700; font-size: 14px;
    color: #0A1128; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    opacity: 0; animation: popNotify 15s infinite; backdrop-filter: blur(10px);
}
.n-1 { top: 20%; left: 10%; animation-delay: 2s; }
.n-2 { top: 60%; right: 5%; animation-delay: 7s; }
.n-3 { bottom: 20%; left: 20%; animation-delay: 12s; }
@keyframes popNotify {
    0% { transform: translateY(20px); opacity: 0; }
    10% { transform: translateY(0); opacity: 0.8; } /* Pops up */
    20% { transform: translateY(-10px); opacity: 0; } /* Fades away */
    100% { opacity: 0; }
}

/* 5. Background Growth Bar Charts */
.bg-bar-charts {
    position: absolute; bottom: 0; right: 10%; display: flex; gap: 15px; align-items: flex-end;
    height: 30vh; opacity: 0.05;
}
.bg-bar-charts .bar { width: 40px; background: #005AEE; border-radius: 10px 10px 0 0; transform-origin: bottom; animation: growBars 3s infinite alternate ease-in-out; }
.b1 { height: 40%; animation-delay: 0s; } .b2 { height: 60%; animation-delay: 0.4s; }
.b3 { height: 80%; animation-delay: 0.8s; } .b4 { height: 100%; animation-delay: 1.2s; }
@keyframes growBars { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }

/* 6. Funnel Rings (Audience Targeting) */
.bg-funnel-rings { position: absolute; top: 10%; right: 20%; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; opacity: 0.1; }
.f-ring { position: absolute; border-radius: 50%; border: 3px dashed #00d2ff; animation: shrinkFunnel 6s infinite linear; }
.fr-1 { width: 300px; height: 300px; animation-delay: 0s; }
.fr-2 { width: 200px; height: 200px; animation-delay: 2s; }
.fr-3 { width: 100px; height: 100px; animation-delay: 4s; }
@keyframes shrinkFunnel { 0% { transform: scale(1.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

/* 7. Flying Growth Rocket */
.bg-rocket-path { position: absolute; bottom: 10%; left: 0; width: 100%; height: 50vh; opacity: 0.08; }
.rocket-icon {
    position: absolute; font-size: 60px;
    animation: flyRocket 15s linear infinite;
}
@keyframes flyRocket {
    0% { transform: translate(-100px, 50vh) rotate(45deg); }
    50% { transform: translate(50vw, 20vh) rotate(45deg); }
    100% { transform: translate(110vw, -10vh) rotate(45deg); }
}
.about-us-section {
	position:relative;
}

/* ==========================================================================
   INDUSTRIES SECTION (Foolproof Marquee)
   ========================================================================== */
.industries-section {
    padding: 60px 0;
    background: transparent;
    position: relative;
    z-index: 10;
    overflow: hidden; /* Only for the marquee wrapper */
}

.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

/* Faded Edges for Marquee */
.marquee-container::before, .marquee-container::after {
    content: ''; position: absolute; top: 0; width: 100px; height: 100%; z-index: 2;
}
.marquee-container::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.marquee-container::after { right: 0; background: linear-gradient(to left, #fff, transparent); }

.marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
}

.ind-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 18px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: 0.3s ease;
    cursor: default;
}

.ind-card:hover {
    background: var(--text-dark);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.left-track { animation: slideLeft 30s linear infinite; }
.right-track { animation: slideRight 30s linear infinite; transform: translateX(-50%); }

.marquee-track:hover { animation-play-state: paused; }

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


/* ==========================================================================
   V10: PROCESS EXPANSION PANELS (Kinetic Hover Layout)
   ========================================================================== */
.process-expansion-section {
    padding: 60px 0;
    background: transparent;
    position: relative;
    z-index: 10;
}

.expansion-container {
    display: flex;
    width: 100%;
    height: 450px;
    gap: 20px;
}

/* Base style for all panels */
.expand-panel {
    position: relative;
    flex: 1; /* Shrunken state width */
    background: #f8fafc;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: flex-end;
}

/* Expanded state width */
.expand-panel.active {
    flex: 5;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 90, 238, 0.1);
    border-color: rgba(0, 90, 238, 0.2);
}

/* Subtle glowing background for active panel */
.panel-glow-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: 0.6s ease; z-index: 0;
}
.blue-glow { background: radial-gradient(circle at bottom right, rgba(0, 90, 238, 0.08) 0%, transparent 60%); }
.cyan-glow { background: radial-gradient(circle at bottom right, rgba(0, 210, 255, 0.08) 0%, transparent 60%); }

.expand-panel.active .panel-glow-bg { opacity: 1; }

/* The Giant Background Number */
.panel-number-giant {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 4rem; font-weight: 900; color: rgba(0,0,0,0.05);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1; pointer-events: none;
}

.expand-panel.active .panel-number-giant {
    top: 20px; left: auto; right: 30px;
    transform: translate(0, 0);
    font-size: 8rem; color: rgba(0, 90, 238, 0.05);
}

/* Vertical Title (Visible only when panel is small) */
.panel-vertical-title {
    position: absolute; bottom: 40px; left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    font-weight: 800; font-size: 1.2rem; color: var(--text-muted);
    white-space: nowrap; letter-spacing: 2px; text-transform: uppercase;
    transition: 0.4s; z-index: 2; opacity: 1;
}

.expand-panel.active .panel-vertical-title {
    opacity: 0; pointer-events: none;
}

/* Full Content (Visible only when panel is expanded) */
.panel-content {
    position: relative; z-index: 3;
    padding: 40px; min-width: 300px;
    opacity: 0; transform: translateY(30px);
    transition: all 0.5s ease;
    pointer-events: none; /* Can't click when hidden */
}

.expand-panel.active .panel-content {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.2s; /* Delays appearance until panel opens */
    pointer-events: all;
}

.panel-icon {
    width: 60px; height: 60px; background: rgba(0, 90, 238, 0.1);
    border-radius: 15px; display: flex; justify-content: center; align-items: center;
    font-size: 28px; margin-bottom: 20px;
}

.panel-content h3 { font-size: 1.8rem; font-weight: 800; color: var(--text-dark); margin-bottom: 15px; }
.panel-content p { font-size: 1.05rem; color: var(--text-muted); max-width: 400px; line-height: 1.6; margin: 0; }

/* Responsive adjustments */
@media (max-width: 992px) {
    .expansion-container { flex-direction: column; height: auto; }
    .expand-panel { height: 100px; align-items: center; } /* Shrunken state height */
    .expand-panel.active { height: 350px; } /* Expanded state height */
    .panel-vertical-title { transform: none; bottom: auto; left: 30px; }
    .panel-number-giant { font-size: 3rem; left: auto; right: 30px; }
    .expand-panel.active .panel-number-giant { top: 20px; font-size: 6rem; }
}

/* ==========================================================================
   V11: PORTFOLIO SECTION (3D Tilt Grid)
   ========================================================================== */
.portfolio-section { padding: 60px 0; background: #ffffff; position: relative; z-index: 10; }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
    perspective: 1000px; /* Required for 3D Tilt */
}

.item-large { grid-column: span 2; grid-row: span 2; }
.item-wide { grid-column: span 2; }

.port-item {
    position: relative; border-radius: 20px; overflow: hidden;
    cursor: pointer; transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    /* Transition for smooth return to original state */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.port-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.6s ease;
}

/* Placeholders for actual portfolio images (You can replace gradients with bg-images later) */
.bg-grad-1 { background: linear-gradient(45deg, #1e3a8a, #3b82f6); }
.bg-grad-2 { background: linear-gradient(45deg, #0f172a, #334155); }
.bg-grad-3 { background: linear-gradient(45deg, #0284c7, #38bdf8); }
.bg-grad-4 { background: linear-gradient(45deg, #172554, #1d4ed8); }
.bg-grad-5 { background: linear-gradient(45deg, #082f49, #0ea5e9); }

.port-item:hover .port-image { transform: scale(1.08); }

.port-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(10, 17, 40, 0.9) 0%, transparent 60%);
    padding: 30px; display: flex; flex-direction: column; justify-content: flex-end;
    opacity: 0; transform: translateY(20px);
    transition: all 0.4s ease;
    /* This makes text pop out in 3D */
    transform: translateZ(50px); 
}

.port-item:hover .port-overlay { opacity: 1; transform: translateY(0) translateZ(50px); }

.port-cat { font-size: 12px; font-weight: 700; color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }
.port-overlay h3 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 0; }


/* ==========================================================================
   V11: CASE STUDIES (Dark Neon Theme)
   ========================================================================== */
.bg-dark-theme {
    background: var(--text-dark);
    padding: 80px 0;
    position: relative;
    z-index: 10;
}
.text-white { color: #ffffff !important; }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.case-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px; padding: 50px 40px;
    position: relative; overflow: hidden;
    backdrop-filter: blur(10px);
    transition: 0.4s ease;
}

.case-card:hover { transform: translateY(-10px); border-color: rgba(0, 210, 255, 0.3); }

/* Hover glow effect behind text */
.case-glow {
    position: absolute; top: -50px; right: -50px; width: 150px; height: 150px;
    background: var(--accent-cyan); filter: blur(80px); opacity: 0; transition: 0.5s;
}
.case-card:hover .case-glow { opacity: 0.3; }

.case-metric { font-size: 4.5rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 15px; letter-spacing: -2px; }
.case-metric span { background: linear-gradient(to right, #00d2ff, #005AEE); -webkit-background-clip: text; color: transparent; }

.case-title { font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: 15px; }
.case-card p { color: #94a3b8; font-size: 1.05rem; margin-bottom: 30px; }

.case-platform {
    display: inline-block; padding: 6px 15px;
    border-radius: 20px; font-size: 13px; font-weight: 700;
    background: rgba(0, 210, 255, 0.1); color: var(--accent-cyan);
}

/* Responsive */
@media (max-width: 992px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .portfolio-grid { grid-template-columns: 1fr; }
    .item-large, .item-wide { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   PORTFOLIO BACKGROUND FX (Creative Theme)
   ========================================================================== */
.portfolio-section { position: relative; overflow: hidden; }

.port-bg-fx {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; overflow: hidden;
}

/* 1. Massive Rotating Watermark */
.port-watermark {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 20vw; font-weight: 900; color: rgba(0, 90, 238, 0.04);
    animation: slowRotate 100s linear infinite; white-space: nowrap;
}
@keyframes slowRotate { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* 2. Floating Wireframes */
.port-wireframe {
    position: absolute; border: 2px dashed rgba(0, 90, 238, 0.1); border-radius: 10px;
    animation: floatShape 20s linear infinite alternate;
}
.wf-1 { width: 150px; height: 100px; top: 20%; left: 10%; }
.wf-2 { width: 80px; height: 120px; bottom: 30%; right: 15%; animation-delay: -5s; }

/* 3. Floating Tags */
.port-float-tag {
    position: absolute; background: rgba(0, 210, 255, 0.05); color: var(--text-muted);
    padding: 10px 20px; border-radius: 30px; font-weight: 800; font-size: 14px; opacity: 0.3;
    animation: driftText 30s linear infinite; white-space: nowrap;
}
.pt-1 { top: 10%; right: -10%; } .pt-2 { bottom: 15%; left: -10%; animation-direction: reverse; }
@keyframes driftText { 100% { transform: translateX(-100vw); } }

/* 4. Abstract Blob */
.port-blob {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.05) 0%, transparent 60%);
    top: 30%; left: 30%; animation: floatShape 15s ease-in-out infinite;
}

/* 5. Floating Cursors */
.port-cursor { position: absolute; font-size: 40px; opacity: 0.05; animation: flyCursor 15s ease-in-out infinite; }
.pc-1 { top: 40%; left: 20%; } .pc-2 { bottom: 20%; right: 30%; animation-delay: -7s; }
@keyframes flyCursor { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px, -50px) scale(1.5); } 100% { transform: translate(0,0) scale(1); } }
@keyframes floatShape { 100% { transform: translateY(100px) rotate(20deg); } }


/* ==========================================================================
   CASE STUDIES BACKGROUND FX (Tech / Data Theme)
   ========================================================================== */
.case-studies-section { position: relative; overflow: hidden; }

.case-bg-fx {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; overflow: hidden;
}

/* 1. Matrix Data Rain */
.case-matrix-rain {
    position: absolute; top: -50%; left: 5%; width: 100%;
    font-family: monospace; font-size: 18px; color: var(--accent-cyan);
    opacity: 0.05; line-height: 1.5; writing-mode: vertical-rl; text-orientation: upright;
    animation: matrixRain 30s linear infinite;
}
@keyframes matrixRain { 100% { transform: translateY(100%); } }

/* 2. Floating Neon Symbols */
.case-neon-sym {
    position: absolute; font-size: 60px; font-weight: 900; color: transparent;
    -webkit-text-stroke: 1px var(--primary-blue); opacity: 0.2;
    animation: neonFloat 10s ease-in-out infinite alternate;
}
.s-1 { top: 15%; right: 15%; } .s-2 { bottom: 20%; left: 10%; animation-delay: -3s; } .s-3 { top: 40%; left: 40%; font-size: 40px; animation-delay: -6s; }
@keyframes neonFloat { 100% { transform: translateY(-40px) scale(1.1) rotate(10deg); filter: drop-shadow(0 0 10px var(--primary-blue)); } }

/* 3. Pulsing Tech Grid */
.case-pulse-grid {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 600px; height: 600px; border-radius: 50%;
    background-image: radial-gradient(transparent 40%, rgba(0, 210, 255, 0.05) 50%, transparent 60%);
    background-size: 100px 100px; animation: pulseGrid 4s linear infinite;
}
@keyframes pulseGrid { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }

/* 4. Rising Sparks */
.case-sparks {
    position: absolute; bottom: -10px; width: 4px; height: 40px;
    background: linear-gradient(to top, transparent, var(--accent-cyan));
    border-radius: 5px; opacity: 0; animation: shootSpark 5s ease-in infinite;
}
.sp-1 { left: 30%; animation-delay: 1s; } .sp-2 { left: 60%; animation-delay: 3s; height: 60px; } .sp-3 { left: 80%; animation-delay: 2s; }
@keyframes shootSpark { 0% { transform: translateY(0); opacity: 0.5; } 100% { transform: translateY(-800px); opacity: 0; } }

/* 5. Laser Scan Line */
.case-laser-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--primary-blue); box-shadow: 0 0 15px 2px var(--primary-blue);
    opacity: 0.2; animation: scanLaser 8s ease-in-out infinite alternate;
}
@keyframes scanLaser { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } }

/* ==========================================================================
   TESTIMONIALS SECTION (Glass Marquee)
   ========================================================================== */
/* ==========================================================================
   TESTIMONIAL BACKGROUND ANIMATIONS (6 Unique FX)
   ========================================================================== */
.testi-bg-fx { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 1. Giant Quotes */
.bg-quote { position: absolute; font-size: 400px; font-family: Georgia, serif; color: rgba(0, 90, 238, 0.03); line-height: 1; animation: floatQuote 20s infinite alternate ease-in-out; }
.left-q { top: -100px; left: 2%; } 
.right-q { bottom: -150px; right: 5%; animation-delay: -5s; }
@keyframes floatQuote { 0% { transform: translateY(0) rotate(-5deg); } 100% { transform: translateY(80px) rotate(5deg); } }

/* 2. Floating 5-Star Reviews */
.float-review { position: absolute; font-size: 24px; opacity: 0.1; filter: grayscale(100%); letter-spacing: 2px; animation: driftStars 25s linear infinite; white-space: nowrap; }
.r-1 { top: 20%; left: -10%; } 
.r-2 { bottom: 30%; right: -10%; animation-direction: reverse; font-size: 30px; animation-duration: 35s; }
@keyframes driftStars { 100% { transform: translateX(120vw) rotate(15deg); } }

/* 3. Social Proof Icons (Thumbs up & Hearts) */
.proof-icon { position: absolute; font-size: 40px; opacity: 0.05; filter: grayscale(100%); animation: flyUpProof 15s ease-in infinite; }
.p-1 { bottom: -50px; left: 25%; } 
.p-2 { bottom: -50px; right: 30%; animation-delay: 7s; font-size: 50px; }
@keyframes flyUpProof { 0% { transform: translateY(0) scale(0.5) rotate(-20deg); opacity: 0; } 50% { opacity: 0.08; transform: scale(1.2) rotate(10deg); } 100% { transform: translateY(-800px) scale(1) rotate(-20deg); opacity: 0; } }

/* 4. Word of Mouth Waves (Expanding circles) */
.wom-wave { position: absolute; border-radius: 50%; border: 2px solid rgba(0, 210, 255, 0.1); animation: expandWave 8s infinite linear; opacity: 0; }
.wave-1 { top: 40%; left: 15%; width: 50px; height: 50px; } 
.wave-2 { top: 60%; right: 20%; width: 100px; height: 100px; animation-delay: 4s; }
@keyframes expandWave { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(8); opacity: 0; border-width: 0px; } }

/* 5. User Profile Bubbles */
.user-bubble { position: absolute; font-size: 50px; background: rgba(0, 90, 238, 0.03); border-radius: 50%; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; opacity: 0; animation: popBubble 12s infinite ease-in-out; }
.b-1 { top: 25%; right: 35%; } 
.b-2 { bottom: 15%; left: 40%; animation-delay: 6s; }
@keyframes popBubble { 0%, 100% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1); opacity: 0.4; } }

/* 6. Trust Text Marquee */
.trust-text { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg); font-size: 10vw; font-weight: 900; color: rgba(0,0,0,0.02); white-space: nowrap; pointer-events: none; animation: pulseText 5s infinite alternate; }
@keyframes pulseText { 0% { transform: translate(-50%, -50%) rotate(-10deg) scale(1); } 100% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.05); } }
.testimonial-section { padding: 60px 0; position: relative; overflow: hidden; background: #fdfdfd; }

/* Background Flying Effects */
.testi-bg-fx { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; pointer-events: none; }
.bg-quote { position: absolute; font-size: 300px; font-family: serif; color: rgba(0, 90, 238, 0.03); line-height: 1; animation: floatQuote 20s infinite alternate; }
.q-1 { top: -50px; left: 5%; } 
.q-2 { bottom: -100px; right: 10%; transform: rotate(180deg); }
.bg-star { position: absolute; font-size: 40px; opacity: 0.1; filter: grayscale(100%); animation: spinStar 10s linear infinite; }
.st-1 { top: 20%; right: 20%; } 
.st-2 { bottom: 30%; left: 15%; animation-direction: reverse; }

@keyframes floatQuote { 100% { transform: translateY(50px); } }
@keyframes spinStar { 100% { transform: rotate(360deg); } }

/* Marquee Track */
.testi-marquee-wrapper { width: 100%; overflow: hidden; position: relative; z-index: 10; padding: 20px 0; }

/* White fade at edges */
.testi-marquee-wrapper::before, .testi-marquee-wrapper::after { content:''; position:absolute; top:0; width:150px; height:100%; z-index:2; pointer-events: none; }
.testi-marquee-wrapper::before { left:0; background: linear-gradient(to right, #fdfdfd, transparent); }
.testi-marquee-wrapper::after { right:0; background: linear-gradient(to left, #fdfdfd, transparent); }

.testi-track { display: flex; gap: 30px; width: max-content; animation: scrollTesti 30s linear infinite; }
.testi-track:hover { animation-play-state: paused; } /* Pauses when mouse is over it */

/* Testimonial Cards */
.testi-card {
    width: 450px; background: rgba(255,255,255,0.8); backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03); position: relative;
    transition: 0.3s ease; white-space: normal;
}
.testi-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 90, 238, 0.1); border-color: rgba(0, 90, 238, 0.2); }
.quote-icon { font-size: 3rem; color: var(--accent-cyan); line-height: 0; margin-bottom: 20px; }
.testi-card p { font-size: 1.15rem; color: var(--text-dark); font-style: italic; margin-bottom: 30px; line-height: 1.6; }

/* Client Details */
.client-info { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 20px; }
.client-avatar { width: 50px; height: 50px; border-radius: 50%; }
.client-info h4 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--text-dark); }
.client-info span { font-size: 0.9rem; color: var(--text-muted); }

/* Animation Keyframe */
@keyframes scrollTesti { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Responsive for Mobile */
@media (max-width: 768px) {
    .testi-card { width: 320px; padding: 30px; }
}

/* ==========================================================================
   V14: BENTO BOX LAYOUT (Clean, Modern, Premium)
   ========================================================================== */
.bento-seo-section {
    padding: 60px 0;
    background: #fdfdfd;
    position: relative;
    z-index: 10;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Base Card Style */
.bento-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 35px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: default;
}

.bento-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 90, 238, 0.08);
}

/* Grid Spanning */
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; justify-content: center; }

/* Content Styling */
.bento-icon { font-size: 2.5rem; margin-bottom: auto; position: relative; z-index: 2; }
.bento-content { position: relative; z-index: 2; }
.bento-content h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.bento-content p { font-size: 1rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Hover Gradients (Hidden until hover) */
.hover-gradient {
    position: absolute; bottom: -50%; right: -50%;
    width: 100%; height: 100%; border-radius: 50%;
    filter: blur(60px); opacity: 0; transition: 0.6s ease; z-index: 0;
}
.bg-blue { background: rgba(0, 90, 238, 0.15); }
.bg-cyan { background: rgba(0, 210, 255, 0.15); }
.bg-dark { background: rgba(10, 17, 40, 0.08); }

.bento-card:hover .hover-gradient { opacity: 1; transform: scale(1.5); }

/* The Map Card Specifics */
.bento-map-card {
    background: var(--text-dark);
    color: #fff;
}
.bento-map-card h3 { color: #fff; font-size: 2rem; }
.bento-map-card p { color: #94a3b8; max-width: 300px; }

/* Subtle dotted map background */
.map-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 20px 20px; z-index: 0;
}

/* Glowing Nodes on Map */
.map-node {
    position: absolute; width: 12px; height: 12px; background: var(--accent-cyan);
    border-radius: 50%; box-shadow: 0 0 15px var(--accent-cyan);
    z-index: 2; display: flex; align-items: center; justify-content: center;
}
.map-node::after {
    content: ''; position: absolute; width: 100%; height: 100%;
    border: 2px solid var(--accent-cyan); border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(3); opacity: 0; } }

.node-label {
    position: absolute; left: 20px; font-size: 12px; font-weight: 700;
    color: #fff; background: rgba(255,255,255,0.1); padding: 4px 10px;
    border-radius: 20px; backdrop-filter: blur(4px); white-space: nowrap;
}

.node-mathura { top: 40%; left: 30%; }
.node-delhi { top: 25%; left: 25%; }
.node-agra { top: 55%; left: 40%; }

/* Arrow icon in wide box */
.arrow-icon { font-size: 2rem; color: var(--primary-blue); transition: 0.3s; }
.bento-wide:hover .arrow-icon { transform: translateX(10px); }

/* Responsive adjustments */
@media (max-width: 992px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-large, .bento-wide { grid-column: span 2; }
}
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-large, .bento-wide { grid-column: span 1; grid-row: auto; }
}
/* ==========================================================================
   BENTO LAYOUT BACKGROUND ANIMATIONS (6 Subtle FX)
   ========================================================================== */
.bento-seo-section {
    padding: 100px 0;
    background: #fdfdfd;
    position: relative;
    overflow: hidden; /* Keeps animations strictly inside this section */
}

.bento-bg-fx {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; overflow: hidden;
}

/* 1. Giant Sliding City Names */
.bg-city-text {
    position: absolute; top: 30%; left: 0;
    font-size: 12vw; font-weight: 900; color: rgba(0, 90, 238, 0.03); /* Extremely faint */
    white-space: nowrap; font-family: 'Inter', sans-serif;
    animation: slideCityText 50s linear infinite;
}
@keyframes slideCityText { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 2. Expanding Broadcast Rings */
.bg-broadcast-ring {
    position: absolute; border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);
    animation: broadcastPulse 6s linear infinite; opacity: 0;
}
.br-1 { width: 100px; height: 100px; animation-delay: 0s; }
.br-2 { width: 100px; height: 100px; animation-delay: 3s; }
@keyframes broadcastPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(10); opacity: 0; border-width: 0; }
}

/* 3. Floating Map Pins */
.bg-pin {
    position: absolute; font-size: 30px; opacity: 0.1; filter: grayscale(100%);
    animation: floatPin 8s ease-in-out infinite alternate;
}
.p-1 { top: 15%; left: 10%; } 
.p-2 { bottom: 20%; right: 15%; animation-delay: -3s; font-size: 40px; }
@keyframes floatPin { 0% { transform: translateY(0); } 100% { transform: translateY(-30px) rotate(10deg); } }

/* 4. Topographic Waves */
.bg-topo-waves {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: repeating-radial-gradient(circle at center, transparent, transparent 40px, rgba(0, 90, 238, 0.02) 41px, rgba(0, 90, 238, 0.02) 42px);
    opacity: 0.6; animation: rotateTopo 120s linear infinite;
}
@keyframes rotateTopo { 100% { transform: rotate(360deg); } }

/* 5. Rotating Crosshairs */
.bg-crosshair {
    position: absolute; font-size: 24px; font-weight: 300; color: rgba(0, 90, 238, 0.2);
    animation: spinCrosshair 10s linear infinite;
}
.ch-1 { top: 25%; right: 25%; } 
.ch-2 { bottom: 30%; left: 20%; animation-direction: reverse; }
@keyframes spinCrosshair { 100% { transform: rotate(360deg); } }

/* 6. Pulsing Data Dots */
.bg-data-dot {
    position: absolute; width: 6px; height: 6px; background: var(--primary-blue);
    border-radius: 50%; box-shadow: 0 0 10px var(--primary-blue);
    animation: dotPulse 2s infinite alternate; opacity: 0.2;
}
.d-1 { top: 60%; left: 30%; } 
.d-2 { top: 40%; right: 10%; animation-delay: 1s; }
@keyframes dotPulse { 0% { transform: scale(1); opacity: 0.1; } 100% { transform: scale(2); opacity: 0.4; } }

/* ==========================================================================
   V17: KINETIC SEARCH CONSOLE FAQ (SEO Vibe)
   ========================================================================== */
.search-faq-section {
    padding: 60px 0;
    background: #fafcff; /* Extremely light blue/white */
    position: relative;
    overflow: hidden;
}

/* Background FX */
.search-bg-fx { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; }
.float-icon { position: absolute; font-size: 150px; font-weight: 900; font-family: sans-serif; color: rgba(0, 90, 238, 0.03); animation: floatUpFx 20s linear infinite; }
.icon-g { bottom: -50px; left: 10%; } 
.icon-m { top: 20%; right: 10%; animation-direction: reverse; font-size: 200px; }
.bg-search-line { position: absolute; top: 30%; left: -10%; width: 120%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 90, 238, 0.1), transparent); transform: rotate(-5deg); }

@keyframes floatUpFx { 100% { transform: translateY(-100vh) rotate(45deg); } }

/* 1. The Giant Search Box */
.faq-search-box {
    max-width: 800px; margin: 0 auto;
    background: #ffffff;
    border: 2px solid rgba(0, 90, 238, 0.2);
    border-radius: 50px;
    padding: 20px 40px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 20px 50px rgba(0, 90, 238, 0.1);
    transition: 0.3s;
    position: relative; z-index: 10;
}
.faq-search-box:hover { box-shadow: 0 25px 60px rgba(0, 210, 255, 0.15); border-color: rgba(0, 210, 255, 0.4); transform: translateY(-5px); }

.search-icon { font-size: 2rem; opacity: 0.5; }
.typing-area { font-size: 1.5rem; font-weight: 700; text-align: left; flex-grow: 1; white-space: nowrap; overflow: hidden; }
.search-cursor { font-size: 1.8rem; color: var(--primary-blue); animation: blinkCursor 0.8s infinite; }

/* 2. Trending Query Pills */
.trending-queries {
    max-width: 800px; margin: 30px auto 50px;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px;
    position: relative; z-index: 10;
}
.trend-label { font-weight: 800; color: var(--text-muted); font-size: 1rem; margin-right: 10px; }

.faq-query-pill {
    background: rgba(0, 90, 238, 0.05);
    border: 1px solid rgba(0, 90, 238, 0.1);
    padding: 10px 20px; border-radius: 30px;
    font-weight: 600; font-size: 1rem; color: var(--text-dark);
    cursor: pointer; transition: all 0.3s ease;
}
.faq-query-pill:hover, .faq-query-pill.active {
    background: var(--primary-blue); color: #fff;
    transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 90, 238, 0.2);
}

/* 3. The Featured Snippet (Answer Box) */
.featured-snippet-box {
    max-width: 800px; margin: 0 auto;
    background: #ffffff; border-left: 5px solid var(--accent-cyan);
    border-radius: 16px; padding: 40px; text-align: left;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    opacity: 0; transform: translateY(20px); /* Kam distance se uthega */
    transition: all 0.2s ease-out; /* BLAZING FAST ANIMATION */
    position: relative; z-index: 10;
}

.featured-snippet-box.show-snippet { opacity: 1; transform: translateY(0); }

.snippet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 15px; }
.snippet-badge { background: rgba(0, 210, 255, 0.1); color: var(--primary-blue); font-weight: 800; padding: 5px 12px; border-radius: 8px; font-size: 0.9rem; }
.snippet-url { font-size: 0.9rem; color: #94a3b8; font-family: monospace; }

.snippet-title { font-size: 1.8rem; font-weight: 800; color: var(--text-dark); margin-bottom: 15px; }
.snippet-desc { font-size: 1.15rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

@media (max-width: 768px) {
    .faq-search-box { padding: 15px 20px; }
    .typing-area { font-size: 1.1rem; }
    .featured-snippet-box { padding: 25px; }
    .snippet-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   KINETIC SEARCH CONSOLE - BACKGROUND FX (6 Unique Animations)
   ========================================================================== */
.search-faq-bg-fx {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
    pointer-events: none; z-index: 0; overflow: hidden;
}

/* 1. Search Radar Sweep */
.bg-faq-radar {
    position: absolute; top: -20%; right: -10%; width: 600px; height: 600px;
    border-radius: 50%; background: conic-gradient(from 0deg, transparent 70%, rgba(0, 90, 238, 0.05) 100%);
    animation: sweepFaqRadar 8s linear infinite;
}
@keyframes sweepFaqRadar { 100% { transform: rotate(360deg); } }

/* 2. Floating SEO Keywords */
.bg-keyword {
    position: absolute; font-family: monospace; font-size: 1.2rem; font-weight: 700;
    color: rgba(0, 90, 238, 0.06); white-space: nowrap;
    animation: driftFaqWords 20s linear infinite;
}
.k-1 { top: 15%; left: -20%; animation-duration: 25s; }
.k-2 { top: 60%; right: -20%; animation-direction: reverse; animation-duration: 30s; }
.k-3 { bottom: 10%; left: -10%; animation-duration: 22s; }
@keyframes driftFaqWords { 100% { transform: translateX(120vw); } }

/* 3. Giant Blinking Cursor */
.bg-giant-cursor {
    position: absolute; top: 40%; left: 15%; font-size: 300px; font-weight: 100;
    color: rgba(0, 210, 255, 0.03); line-height: 1;
    animation: giantBlink 1.5s infinite step-end;
}
@keyframes giantBlink { 50% { opacity: 0; } }

/* 4. Floating Magnifying Glasses */
.bg-mag {
    position: absolute; font-size: 80px; filter: grayscale(100%); opacity: 0.03;
    animation: floatMagGlass 15s ease-in-out infinite alternate;
}
.f-1 { top: 70%; left: 20%; } 
.f-2 { top: 20%; right: 25%; font-size: 120px; animation-delay: -5s; }
@keyframes floatMagGlass { 100% { transform: translate(50px, -80px) rotate(20deg); } }

/* 5. Crawler Nodes (Pulsing Dots) */
.crawler-node {
    position: absolute; width: 15px; height: 15px; background: rgba(0, 210, 255, 0.1);
    border-radius: 50%; border: 2px solid rgba(0, 210, 255, 0.3);
    animation: crawlPulse 2s infinite;
}
.cn-1 { top: 30%; left: 40%; }
.cn-2 { bottom: 40%; right: 15%; animation-delay: 0.7s; }
.cn-3 { top: 50%; right: 30%; animation-delay: 1.4s; }
@keyframes crawlPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.2); } 100% { box-shadow: 0 0 0 30px transparent; } }

/* 6. Scanning Laser */
.bg-faq-laser {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 90, 238, 0.15), transparent);
    box-shadow: 0 0 15px rgba(0, 90, 238, 0.1);
    animation: faqScanDown 6s ease-in-out infinite alternate;
}
@keyframes faqScanDown { 0% { transform: translateY(-10px); } 100% { transform: translateY(100vh); } }

/* ==========================================================================
   V25: THE PLASMA CORE CTA (Heavy Animation)
   ========================================================================== */
.plasma-cta-section {
    padding: 80px 0;
    background: #00020a; /* Pitch black space */
    position: relative;
    overflow: hidden;
}

/* Deep Space & Shooting Stars */
.space-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle at center, rgba(0, 90, 238, 0.1) 0%, transparent 60%),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="10" cy="10" r="1.5" fill="white" opacity="0.3"/><circle cx="80" cy="50" r="1" fill="white" opacity="0.1"/><circle cx="150" cy="120" r="2" fill="%2300d2ff" opacity="0.5"/></svg>');
    z-index: 1;
}

.shooting-star {
    position: absolute; width: 150px; height: 2px;
    background: linear-gradient(90deg, transparent, #fff, #00d2ff);
    filter: drop-shadow(0 0 10px #00d2ff);
    transform: rotate(-45deg); opacity: 0;
    animation: shoot 5s infinite; z-index: 2;
}
.s1 { top: 10%; right: 20%; animation-delay: 0s; }
.s2 { top: -10%; right: 50%; animation-delay: 2s; }
.s3 { top: 30%; right: -10%; animation-delay: 4s; }

@keyframes shoot {
    0% { transform: translate(0, 0) rotate(-45deg); opacity: 1; }
    20% { transform: translate(-1000px, 1000px) rotate(-45deg); opacity: 0; }
    100% { opacity: 0; }
}

/* ================= THE LIVING PLASMA CORE ================= */
.plasma-container {
    position: relative; width: 300px; height: 300px; margin: 0 auto;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}

.plasma-core {
    position: absolute;
    width: 180px; height: 180px;
    background: linear-gradient(45deg, #00d2ff, #005AEE, #ff007f, #00d2ff);
    background-size: 400% 400%;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    display: flex; justify-content: center; align-items: center; text-align: center;
    text-decoration: none;
    box-shadow: 0 0 50px rgba(0, 210, 255, 0.6), inset 0 0 20px rgba(255,255,255,0.5);
    animation: plasmaMorph 6s ease-in-out infinite, plasmaColors 5s ease infinite;
    transition: all 0.3s;
    z-index: 5;
}

.plasma-text { color: #fff; font-size: 1.5rem; font-weight: 900; letter-spacing: 2px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* Plasma Morphing Animation */
@keyframes plasmaMorph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes plasmaColors {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Rotating SVG Text Ring */
.rotating-ring {
    position: absolute; width: 300px; height: 300px;
    animation: spinRing 20s linear infinite;
    pointer-events: none; z-index: 4;
}
@keyframes spinRing { 100% { transform: rotate(360deg); } }

/* HOVER EFFECT - WARP SPEED */
.plasma-cta-section.warp-speed .shooting-star { animation: shoot 1s infinite; } /* Stars go crazy fast */
.plasma-cta-section.warp-speed .plasma-core { transform: scale(1.2); box-shadow: 0 0 100px rgba(255, 0, 127, 0.8); }

/* ================= MAGIC MOUSE PARTICLES ================= */
.magic-particle {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    pointer-events: none; z-index: 9999;
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    animation: particleFade 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes particleFade {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}


/* ==========================================================================
   V31: SIMPLE FOOTER WITH SVG ANIMATIONS
   ========================================================================== */
.simple-svg-footer {
    background-color: #0a0f1a; /* Very clean dark slate */
    color: #e2e8f0;
    position: relative;
    margin-top: 100px; /* Space for the waves to overflow */
    font-family: 'Inter', sans-serif;
}

/* --- 1. SVG WAVES ANIMATION --- */
.svg-wave-container {
    position: absolute;
    top: -150px; /* Pulls the wave up above the footer background */
    left: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    line-height: 0;
}

.animated-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* Wider than screen to allow panning */
    height: 100%;
}

.wave-back { animation: wavePan 20s linear infinite; }
.wave-front { animation: wavePan 12s linear infinite reverse; } /* Moves opposite direction */

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

/* --- FOOTER CONTENT (Normal & Clean) --- */
.footer-content-wrap {
    padding: 60px 0 30px;
    position: relative;
    z-index: 10;
}

.normal-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

/* --- 2. SVG LOGO LINE DRAWING ANIMATION --- */
.svg-logo {
    width: 280px;
    height: 60px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -1px;
}

/* Base text (dim) */
.logo-text-base { fill: rgba(255, 255, 255, 0.1); }
.logo-text-base .logo-text-accent { fill: rgba(0, 210, 255, 0.1); }

/* The Animated Stroke Text */
.logo-text-animated {
    fill: transparent;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-dasharray: 400; /* Creates the dashed line */
    stroke-dashoffset: 400; /* Hides it initially */
    animation: drawLogo 4s ease forwards infinite; /* Draws continuously for demo, or change 'infinite' to '1' to play once */
}
.logo-text-animated tspan { stroke: #00d2ff; }

@keyframes drawLogo {
    0% { stroke-dashoffset: 400; fill: transparent; }
    50% { stroke-dashoffset: 0; fill: transparent; }
    80%, 100% { stroke-dashoffset: 0; fill: #ffffff; } /* Fills color at the end */
}
.logo-text-animated tspan { animation: fillCyan 4s ease forwards infinite; }
@keyframes fillCyan { 80%, 100% { fill: #00d2ff; } }


/* --- TYPOGRAPHY & LINKS --- */
.simple-desc { color: #94a3b8; font-size: 1.05rem; line-height: 1.6; max-width: 350px; }

.normal-col h4 { font-size: 1.2rem; font-weight: 700; color: #ffffff; margin-bottom: 25px; }
.normal-col ul { list-style: none; padding: 0; margin: 0; }
.normal-col li { margin-bottom: 15px; color: #94a3b8; }
.normal-col a { color: #94a3b8; text-decoration: none; transition: 0.3s ease; position: relative; }

/* Simple clean hover */
.normal-col a:hover { color: #00d2ff; padding-left: 5px; }


/* --- BOTTOM BAR & SVG ICONS --- */
.normal-footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
}
.normal-footer-bottom p { color: #64748b; font-size: 0.95rem; margin: 0; }

.svg-socials { display: flex; gap: 20px; }
.svg-socials a { display: block; color: #94a3b8; transition: 0.3s; }
.svg-socials svg { width: 22px; height: 22px; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Icon Hover Animation */
.svg-socials a:hover { color: #00d2ff; }
.svg-socials a:hover svg { transform: scale(1.2) translateY(-3px); }

/* Responsive Layout */
@media (max-width: 992px) {
    .normal-footer-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .svg-logo { margin: 0 auto 10px; }
    .simple-desc { margin: 0 auto; }
    .normal-footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}
/* ==========================================================================
   NEW KINETIC SVG BACKGROUND ANIMATIONS
   ========================================================================== */
.kinetic-svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Piche rahega */
    overflow: hidden;
    pointer-events: none; /* Mouse clicks ko disturb nahi karega */
}

/* 1. Giant Rotating Tech Ring */
.bg-svg-ring {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    animation: slowSVGSpin 40s linear infinite;
}

@keyframes slowSVGSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 2. Infinite Traveling Sine Wave */
.bg-svg-sine {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 200px;
    /* CSS Float animation mixed with internal SVG stroke animation */
    animation: floatUpDown 8s ease-in-out infinite alternate;
}

@keyframes floatUpDown {
    0% { transform: translateY(-20px); opacity: 0.5; }
    100% { transform: translateY(20px); opacity: 1; }
}

/* 3. Floating Crosses */
.bg-svg-cross {
    position: absolute;
}

.cross-1 {
    top: 20%;
    left: 15%;
    width: 30px;
    height: 30px;
    animation: spinFloat 15s linear infinite;
}

.cross-2 {
    bottom: 25%;
    right: 35%;
    width: 20px;
    height: 20px;
    animation: spinFloatReverse 12s linear infinite;
}

@keyframes spinFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -40px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes spinFloatReverse {
    0% { transform: translate(0, 0) rotate(360deg); }
    33% { transform: translate(-20px, -30px) rotate(240deg); }
    66% { transform: translate(40px, 10px) rotate(120deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Fix z-index for content to stay above the new background */
.footer-content-wrap {
    position: relative;
    z-index: 10;
}
/* --- 1. ADVANCED SVG WAVES ANIMATION --- */
.svg-wave-container {
    position: absolute;
    top: -100px; /* Pulls the wave up above the footer */
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
}

.advanced-waves {
    width: 100%;
    height: 100px;
    display: block;
}

/* Applying different speeds to different layers to create 3D Parallax */
.parallax-waves > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax-waves > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s; /* Fastest */
}
.parallax-waves > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax-waves > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax-waves > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s; /* Slowest, matching base */
}

@keyframes move-forever {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}


/* ==============================================
   1. ADVANCED SVG & ANIMATED HERO SECTION
   ============================================== */
.advanced-svg-hero {
    position: relative;
    background: linear-gradient(180deg, #f0f7ff 0%, #e6f0fa 100%);
    padding: 160px 20px 180px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.relative-z {
    position: relative;
    z-index: 10;
}

/* 🌟 Animated SVG Badge */
.hero-badge-svg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 90, 238, 0.2);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 90, 238, 0.08);
    backdrop-filter: blur(10px);
}

.spin-svg {
    width: 18px;
    height: 18px;
    animation: slowSpin 4s linear infinite;
}

@keyframes slowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 🌟 Hero Title & Text */
.hero-title-advanced {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.15;
    color: #0f172a;
    letter-spacing: -0.5px;
    position: relative;
}

.hero-desc-advanced {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    color: #475569;
    line-height: 1.8;
}

/* 🌟 Floating SVG Widgets (The Magic) */
.floating-widgets-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none; /* Text click hone me dikkat na de */
}

.floating-widget {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 20px;
    border-radius: 100px;
    box-shadow: 0 15px 35px rgba(0, 0, 10, 0.08);
    border: 1px solid #fff;
    backdrop-filter: blur(5px);
}

.w-icon {
    width: 35px; height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.w-icon svg { width: 18px; height: 18px; }
.bg-blue { background: #005AEE; }
.bg-cyan { background: #06b6d4; }
.bg-purple { background: #8b5cf6; }

.w-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: #334155;
}
.w-green { color: #10b981; }

/* Widget Animations */
.widget-1 {
    top: 20%; left: 10%;
    animation: floatXY 6s ease-in-out infinite;
}
.widget-2 {
    top: 25%; right: 10%;
    animation: floatXY 8s ease-in-out infinite reverse;
}
.widget-3 {
    bottom: 25%; left: 15%;
    animation: floatUp 5s ease-in-out infinite;
}

@keyframes floatXY {
    0% { transform: translate(0, 0); }
    50% { transform: translate(15px, -20px); }
    100% { transform: translate(0, 0); }
}

@keyframes floatUp {
    0% { transform: translateY(0); }
    50% { transform: translateY(-25px); }
    100% { transform: translateY(0); }
}

/* 🌟 Animated SVG Bottom Wave */
.hero-svg-wave {
    position: absolute;
    bottom: -2px; /* Fix for 1px white line issue */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
}

.hero-svg-wave svg {
    display: block;
    width: 150%;
    height: 120px;
    animation: waveMove 15s linear infinite;
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); } /* Infinite smooth wave */
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */
@media (max-width: 1100px) {
    .widget-1 { left: 2%; }
    .widget-2 { right: 2%; }
    .widget-3 { left: 5%; bottom: 15%; }
}

@media (max-width: 767px) {
    .advanced-svg-hero { padding: 120px 20px 100px; }
    .hero-title-advanced { font-size: 2.5rem; }
    .hero-desc-advanced { font-size: 1.05rem; }
    /* Hide widgets on very small mobile to keep it clean */
    .floating-widget { transform: scale(0.7); opacity: 0.5; }
    .widget-1 { top: 10%; left: -5%; }
    .widget-2 { top: 15%; right: -5%; }
}
/* ==============================================
   🌟 NAYA: BACKGROUND SVG ANIMATIONS 
   ============================================== */
.hero-bg-animations {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Subtly Animated Tech Grid */
.bg-tech-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 90, 238, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 90, 238, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: moveGrid 30s linear infinite;
}

@keyframes moveGrid {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(60px) translateX(60px); }
}

/* Radar Pulse / Ripple Effect (SEO Scanning feel) */
.radar-pulse {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
}

.pulse-ring {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 90, 238, 0.1);
    animation: radarRipple 6s infinite cubic-bezier(0.21, 0.53, 0.56, 1);
    opacity: 0;
}

.ring-2 { animation-delay: 2s; }
.ring-3 { animation-delay: 4s; }

@keyframes radarRipple {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Large Floating Translucent Background SVGs */
.bg-svg-icon {
    position: absolute;
    width: 250px;
    height: 250px;
    opacity: 0.5; /* Very subtle */
}

/* Search Icon */
.bg-icon-1 {
    top: -5%; left: 5%;
    stroke: rgba(0, 90, 238, 0.05); /* Soft Blue */
    animation: slowDrift 20s infinite alternate ease-in-out;
}

/* Growth Chart Icon */
.bg-icon-2 {
    top: 20%; right: -5%;
    width: 300px; height: 300px;
    stroke: rgba(6, 182, 212, 0.05); /* Soft Cyan */
    animation: slowDrift 25s infinite alternate-reverse ease-in-out;
}

/* Network Nodes Icon */
.bg-icon-3 {
    bottom: -10%; left: 30%;
    width: 400px; height: 400px;
    stroke: rgba(139, 92, 246, 0.04); /* Soft Purple */
    animation: slowRotate 40s infinite linear;
}

@keyframes slowDrift {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(60px) rotate(15deg); }
}

@keyframes slowRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==============================================
   2. SOLID WHITE CLEAN SAAS GRID
   ============================================== */
.solid-clean-grid {
    position: relative;
    padding: 100px 0 120px 0;
    background-color: #fcfcfc; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.solid-clean-grid .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 🌟 EXTENDED BACKGROUND SVG ANIMATIONS */
.clean-bg-animations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Liquid Mesh Shape */
.bg-mesh {
    position: absolute;
    top: 50%; left: 50%;
    width: 1500px; height: 1500px;
    transform: translate(-50%, -50%);
    animation: rotateMesh 60s linear infinite;
    opacity: 0.8;
}

.bg-mesh path {
    animation: morphMesh 15s ease-in-out infinite alternate;
}

/* Data Stream Lines (Matrix / Matrix-light effect) */
.data-streams {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.stream {
    position: absolute;
    top: -100px;
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(0, 90, 238, 0), rgba(0, 90, 238, 0.15));
    border-radius: 50%;
    animation: fallStream linear infinite;
}

.s-1 { left: 15%; animation-duration: 4s; animation-delay: 0s; }
.s-2 { left: 45%; animation-duration: 6s; animation-delay: 2s; }
.s-3 { left: 75%; animation-duration: 5s; animation-delay: 1s; height: 120px; }
.s-4 { left: 90%; animation-duration: 7s; animation-delay: 3s; }

@keyframes fallStream {
    0% { transform: translateY(-100px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(1500px); opacity: 0; }
}

/* Floating Clean Icons */
.float-icon {
    position: absolute;
    width: 60px; height: 60px;
}
.fi-1 { top: 15%; left: 8%; animation: floatY 6s ease-in-out infinite; }
.fi-2 { top: 40%; right: 10%; width: 80px; height: 80px; animation: floatY 8s ease-in-out infinite reverse; }
.fi-3 { bottom: 20%; left: 15%; width: 50px; height: 50px; animation: floatY 7s ease-in-out infinite 2s; }

/* NEW ICONS ANIMATIONS */
.fi-4 { /* Rocket */
    bottom: 5%; right: 25%;
    width: 70px; height: 70px;
    animation: shootDiagonal 12s linear infinite;
}
.fi-5 { /* Target */
    top: 5%; right: 30%;
    width: 90px; height: 90px;
    animation: pulseScale 4s ease-in-out infinite alternate;
}
.fi-6 { /* Bar Chart */
    top: 60%; left: 5%;
    width: 55px; height: 55px;
    animation: floatYReverse 9s ease-in-out infinite;
}
.fi-7 { /* Network Nodes */
    top: 25%; left: 35%;
    width: 120px; height: 120px;
    animation: rotateSlow 30s linear infinite;
}

/* Keyframes */
@keyframes rotateMesh { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes morphMesh { 0% { d: path("M43.5,-75.7C55.6,-68.2,64.2,-54.6,71.7,-40.8C79.2,-27,85.6,-13.5,85.1,-0.3C84.5,12.9,77,25.8,68.9,37.6C60.8,49.4,52.2,60.1,40.8,68.8C29.4,77.5,14.7,84.2,-0.2,84.5C-15.1,84.9,-30.2,78.9,-43.3,70C-56.4,61.1,-67.5,49.3,-75.4,35.6C-83.3,21.9,-88,6.3,-86.3,-8.6C-84.6,-23.5,-76.5,-37.7,-66,-49.6C-55.5,-61.5,-42.6,-71,-29.3,-77.1C-16,-83.2,-2.3,-85.9,11.3,-84.8C24.9,-83.7,31.4,-83.2,43.5,-75.7Z"); } 100% { d: path("M36.1,-63.3C47.8,-56.3,58.8,-47.9,67.6,-36.8C76.4,-25.7,83,-12.8,83.1,0.1C83.2,13,76.8,26,68,37.1C59.2,48.2,48.1,57.4,35.7,64.3C23.3,71.2,9.6,75.8,-4.2,76.6C-18.1,77.4,-32.1,74.5,-44.6,67.6C-57.2,60.7,-68.2,49.8,-76.3,36.5C-84.4,23.2,-89.6,7.5,-87.3,-7.4C-85,-22.3,-75.2,-36.4,-63.4,-47.7C-51.6,-59,-37.8,-67.5,-24.1,-71.4C-10.4,-75.3,3.2,-74.6,16.2,-71.7C29.2,-68.8,41.5,-63.8,36.1,-63.3Z"); } }
@keyframes floatY { 0% { transform: translateY(0px); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0px); } }
@keyframes floatYReverse { 0% { transform: translateY(0px); } 50% { transform: translateY(30px); } 100% { transform: translateY(0px); } }
@keyframes shootDiagonal { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(300px, -300px) scale(0.5); opacity: 0; } }
@keyframes pulseScale { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.3); opacity: 1; } }
@keyframes rotateSlow { 100% { transform: rotate(360deg); } }

.relative-z { position: relative; z-index: 10; }

/* 🌟 GRID LAYOUT (3 BOXES) - Same as before */
.solid-grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* 🌟 SOLID CARDS - Same as before */
.solid-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 35px 30px; display: flex; flex-direction: column; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; position: relative; }
.solid-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-color: #cbd5e1; }
.solid-card::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px; background: #005AEE; border-radius: 16px 16px 0 0; opacity: 0; transition: opacity 0.3s ease; }
.solid-card:hover::before { opacity: 1; }
.c-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.c-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #f1f5f9; border: 1px solid #e2e8f0; }
.c-title { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.2; }
.c-title a { color: #0f172a; text-decoration: none; transition: color 0.2s ease; }
.solid-card:hover .c-title a { color: #005AEE; }
.c-desc { font-size: 1rem; color: #475569; line-height: 1.6; margin-bottom: 25px; }
.c-features { list-style: none; padding: 0; margin: 0 0 30px 0; display: flex; flex-direction: column; gap: 12px; }
.c-features li { font-size: 0.95rem; color: #334155; display: flex; align-items: flex-start; gap: 10px; }
.c-check { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.c-image-wrap { margin-top: auto; border-radius: 8px; overflow: hidden; margin-bottom: 25px; position: relative; border: 1px solid #e2e8f0; }
.c-image-wrap img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.solid-card:hover .c-image-wrap img { transform: scale(1.05); }
.c-placeholder { width: 100%; height: 180px; background: #f1f5f9; }
.c-image-overlay { position: absolute; inset: 0; background: rgba(0, 90, 238, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.solid-card:hover .c-image-overlay { opacity: 1; }
.overlay-text { color: #ffffff; font-weight: 700; font-size: 1.1rem; transform: translateY(15px); transition: transform 0.3s ease; }
.solid-card:hover .overlay-text { transform: translateY(0); }
.c-btn { display: inline-flex; align-items: center; font-weight: 700; font-size: 1.05rem; color: #005AEE; text-decoration: none; transition: color 0.2s ease; }
.c-btn:hover { color: #0f172a; }
.c-btn span { margin-left: 5px; transition: transform 0.2s ease; }
.c-btn:hover span { transform: translateX(5px); }

/* ==============================================
   RESPONSIVE LAYOUT
   ============================================== */
@media (max-width: 1100px) { .solid-grid-layout { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { 
    .solid-grid-layout { grid-template-columns: 1fr; } 
    .float-icon, .data-streams { display: none; } /* Mobile pe background clean rakhne ke liye hata diya */
}

/* ==========================================================================
   SINGLE SERVICE PAGE - DIGITAL KINETICS (White Theme + SVGs)
   ========================================================================== */
.dk-single-service {
    background-color: var(--bg-white);
    color: var(--text-muted);
    overflow-x: hidden;
}

/* Utilities */
.ss-relative { position: relative; z-index: 10; }
.ss-narrow { max-width: 800px; margin: 0 auto; }
.justify-center { justify-content: center; }
.text-white { color: #fff !important; }
.opacity-80 { opacity: 0.8; }
.mb-40 { margin-bottom: 40px; }
.ss-heading { font-size: 3rem; font-weight: 800; color: var(--text-dark); margin-bottom: 30px; letter-spacing: -1px; }

/* ==========================================================================
   STEP 1: DYNAMIC PREMIUM HERO CSS (SMOOTH & CLEAN)
   ========================================================================== */
.dk-dynamic-page {
    background-color: var(--bg-white);
    overflow-x: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.dyn-hero-section {
    position: relative;
    padding: 180px 0 140px 0;
    background: radial-gradient(circle at top center, #f4f8ff 0%, var(--bg-white) 70%);
    overflow: hidden;
}

/* --- 1. DYNAMIC BACKGROUND TEXT --- */
.dyn-hero-bg-text {
    position: absolute;
    top: 20%; left: 0; width: 200%;
    overflow: hidden; z-index: 0; pointer-events: none;
}

.dyn-slide-text {
    font-size: 12vw;
    font-weight: 900;
    color: rgba(0, 90, 238, 0.03); /* Super soft background text */
    white-space: nowrap;
    text-transform: uppercase;
    animation: dynSlide 45s linear infinite;
}

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

/* --- 2. THE SVGS YOU LIKED --- */
.dyn-hero-svgs {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

.d-svg-globe { position: absolute; top: 18%; right: 5%; width: 350px; height: 350px; opacity: 0.1; }
.d-svg-burst { position: absolute; bottom: 10%; left: 10%; width: 120px; height: 120px; opacity: 0.2; }
.d-svg-orbit { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; opacity: 0.05; }

.d-anim-slow { animation: dynSpinGlobe 30s linear infinite; }
.d-anim-fast { animation: dynSpinBurst 20s linear infinite; }
.d-anim-tilt { animation: dynTiltPulse 12s ease-in-out infinite alternate; }

@keyframes dynSpinGlobe {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}
@keyframes dynSpinBurst { 100% { transform: rotate(-360deg); } }
@keyframes dynTiltPulse {
    0% { transform: translateX(-50%) rotateX(0deg); }
    100% { transform: translateX(-50%) rotateX(50deg); }
}

/* --- 3. PREMIUM DYNAMIC CONTENT --- */
.dyn-relative {
    position: relative;
    z-index: 10;
}

.dyn-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ffffff; border: 1px solid rgba(0, 90, 238, 0.1);
    color: var(--primary-blue); padding: 8px 24px; border-radius: 50px; /* Smooth rounded badge */
    font-size: 14px; font-weight: 700; margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(0, 90, 238, 0.05);
}

.d-blink-dot {
    width: 8px; height: 8px; background: var(--accent-cyan); border-radius: 50%;
    animation: blinkDot 1s infinite;
}
@keyframes blinkDot { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.dyn-hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 25px;
    line-height: 1.15;
    letter-spacing: -1px;
}

.dyn-hero-desc {
    font-size: 1.25rem; color: var(--text-muted);
    max-width: 700px; margin: 0 auto 40px; font-weight: 500; line-height: 1.7;
}

/* Elegant Smooth Buttons */
.dyn-hero-actions {
    display: flex; justify-content: center; gap: 20px;
}

.dyn-btn-primary {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    color: #fff !important;
    padding: 16px 40px; font-size: 16px; font-weight: 700;
    border-radius: 50px; /* Smooth elegant button */
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 90, 238, 0.2);
    transition: all 0.3s ease;
}
.dyn-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 90, 238, 0.4);
}

.dyn-btn-secondary {
    background: #ffffff; color: var(--text-dark) !important;
    padding: 16px 40px; font-size: 16px; font-weight: 700;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 50px;
    text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}
.dyn-btn-secondary:hover {
    background: var(--text-dark); color: #ffffff !important;
}

/* Responsive */
@media (max-width: 991px) {
    .dyn-hero-title { font-size: 3.5rem; }
    .d-svg-globe { width: 250px; height: 250px; }
}
@media (max-width: 767px) {
    .dyn-hero-section { padding: 140px 0 80px; }
    .dyn-hero-title { font-size: 2.8rem; }
    .dyn-slide-text { font-size: 18vw; }
    .dyn-hero-actions { flex-direction: column; width: 100%; align-items: center; }
}

/* ==========================================================================
   ULTIMATE STICKY FIX: LEFT SCROLL CARDS + RIGHT FIXED INTRO
   ========================================================================== */

/* 🚀 FIX NUMBER 1: Parent sections ka overflow visible karna taaki sticky chale */
body, html, main, #primary, .site-main, .dk-story-section {
    overflow: visible !important;
    overflow-x: clip !important; /* hidden ki jagah clip use karein, sticky nahi tutega */
}

.dk-story-section {
    padding: 100px 0;
    background: var(--bg-white);
    position: relative;
}

.dk-story-layout {
    display: flex;
    gap: 80px;
    
    /* 🚀 FIX NUMBER 2: Flex items ko stretch hone se rokna */
    align-items: flex-start !important; 
}

/* --- LEFT SIDE: SCROLLING CARDS --- */
.dk-story-left-scroll {
    flex: 0 0 45%;
    width: 45%;
    padding-bottom: 50px;
}

.dk-stack-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px; 
}

.dk-stack-card {
    position: relative; 
    transition: transform 0.4s ease;
}

.dk-card-glass-inner {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 1);
    border-radius: 32px;
    padding: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.dk-card-glass-inner:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.04); }

.dk-card-top-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.dk-card-index { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1; }
.dk-card-line { flex-grow: 1; height: 2px; background: linear-gradient(90deg, rgba(0, 90, 238, 0.1), transparent); }
.dk-card-icon { width: 30px; height: 30px; }

.dk-stack-title { font-size: 2.2rem; font-weight: 800; color: var(--primary-blue); margin-bottom: 15px; letter-spacing: -0.5px; }
.dk-stack-desc { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 35px; }

.dk-stack-extras {
    display: flex; flex-direction: column; gap: 20px;
    background: #f8fafc; padding: 30px; border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.02);
}
.dk-feature-row { display: flex; align-items: flex-start; gap: 15px; }
.dk-feature-check { width: 24px; height: 24px; background: rgba(0, 210, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; }
.dk-feature-check svg { width: 14px; height: 14px; }
.dk-feature-text strong { display: block; font-size: 1.1rem; color: var(--text-dark); margin-bottom: 5px; }
.dk-feature-text div { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; }

/* --- RIGHT SIDE: FIXED INTRO (THE MAGIC) --- */
.dk-story-right-fixed {
    flex: 0 0 50%;
    width: 50%;
    
    /* 🚀 FIX NUMBER 3: 100% Bulletproof Sticky Code */
    position: -webkit-sticky !important; /* Safari support */
    position: sticky !important;
    top: 150px !important; /* Is offset par rukega */
    align-self: flex-start !important; /* Ensure child doesnt stretch */
    height: auto;
    z-index: 100;
}

.dk-intro-turbine { width: 120px; height: 120px; margin-bottom: 30px; }
.turbine-slow { transform-origin: center; animation: spinTurbine 20s linear infinite; }
.turbine-fast { transform-origin: center; animation: spinTurbine 10s linear infinite reverse; }
@keyframes spinTurbine { 100% { transform: rotate(360deg); } }

.dk-story-title {
    font-size: 3.5rem; font-weight: 800; color: var(--text-dark);
    line-height: 1.1; margin-bottom: 25px; letter-spacing: -1.5px;
}
.dk-story-desc {
    font-size: 1.2rem; color: var(--text-muted); line-height: 1.7;
    border-left: 2px solid rgba(0, 90, 238, 0.2); padding-left: 20px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .dk-story-layout { flex-direction: column-reverse; gap: 60px; }
    .dk-story-right-fixed { 
        position: relative !important; 
        top: 0 !important; 
        flex: 1; width: 100%; 
    }
    .dk-story-left-scroll { flex: 1; width: 100%; padding-bottom: 0; }
}

@media (max-width: 767px) {
    .dk-story-title { font-size: 2.5rem; }
    .dk-card-glass-inner { padding: 30px; }
    .dk-stack-title { font-size: 1.8rem; }
    .dk-stack-extras { padding: 20px; }
}

/* ==========================================================================
   4. KINETIC EXPANSION PANELS (AMBIENT AURORA & NEO SVGS)
   ========================================================================== */
.dk-expansion-section {
    padding: 100px 0 120px;
    background: #fcfdfe; /* Ekdum soft off-white background */
    position: relative;
    overflow: hidden; 
}

.dk-relative-z { position: relative; z-index: 10; }

/* 🌟 1. BACKGROUND AURORA ORBS 🌟 */
.dk-ambient-universe {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

.dk-aurora-orb {
    position: absolute; border-radius: 50%;
    filter: blur(80px); /* Massive blur for fluid Apple-like look */
    opacity: 0.15;
}

.dk-orb-cyan {
    width: 600px; height: 600px; background: var(--accent-cyan);
    top: -100px; left: -200px;
    animation: driftOrb 20s ease-in-out infinite alternate;
}

.dk-orb-blue {
    width: 500px; height: 500px; background: var(--primary-blue);
    bottom: -150px; right: -100px;
    animation: driftOrb 25s ease-in-out infinite alternate-reverse;
}

@keyframes driftOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(150px, 100px) scale(1.2); }
}

/* 🌟 2. CYBER WAVE SVG 🌟 */
.dk-cyber-wave {
    position: absolute; top: 50%; left: 0; width: 100%; height: 300px;
    transform: translateY(-50%); opacity: 0.5;
}
.dk-wave-path {
    stroke-dasharray: 200 400; /* Create dashed lines flowing through */
    animation: flowData 10s linear infinite;
}
.w2 { stroke-dasharray: 100 200; animation: flowData 15s linear infinite reverse; }

@keyframes flowData { 100% { stroke-dashoffset: 1000; } }

/* --- HEADER --- */
.dk-exp-header { margin-bottom: 60px; }
.dk-exp-header h2 { font-size: 3.2rem; font-weight: 800; color: var(--text-dark); letter-spacing: -1.5px; margin-bottom: 15px; }
.dk-exp-header p { font-size: 1.15rem; color: var(--text-muted); }
.dk-text-gradient { background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* --- EXPANSION PANELS --- */
.dk-exp-container { display: flex; width: 100%; height: 450px; gap: 20px; }

.dk-exp-panel {
    position: relative; flex: 1; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px);
    border-radius: 40px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,0.8);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); display: flex; align-items: flex-end;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

.dk-exp-panel.active {
    flex: 5; background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 90, 238, 0.08); border: 1px solid rgba(0, 90, 238, 0.15);
}

.dk-exp-bg-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; font-weight: 900; color: rgba(0,0,0,0.03);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; pointer-events: none;
}
.dk-exp-panel.active .dk-exp-bg-num { top: 20px; left: auto; right: 30px; transform: translate(0, 0); font-size: 7rem; color: rgba(0, 90, 238, 0.03); }

.dk-exp-vert-title {
    position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%) rotate(-90deg); transform-origin: center;
    font-weight: 800; font-size: 1.2rem; color: var(--text-muted); white-space: nowrap; letter-spacing: 4px;
    transition: 0.4s ease; z-index: 2;
}
.dk-exp-panel.active .dk-exp-vert-title { opacity: 0; transform: translateX(-50%) rotate(-90deg) scale(0.5); }

.dk-exp-content {
    position: relative; z-index: 3; padding: 40px; min-width: 350px; opacity: 0; transform: translateY(30px);
    transition: all 0.5s ease; pointer-events: none;
}
.dk-exp-panel.active .dk-exp-content { opacity: 1; transform: translateY(0); transition-delay: 0.2s; pointer-events: all; }

/* 🌟 3. NEO-ABSTRACT ICONS INSIDE CONTENT 🌟 */
.dk-exp-icon {
    width: 65px; height: 65px; color: var(--primary-blue);
    margin-bottom: 25px; position: relative;
}

.dk-neo-svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 4px 6px rgba(0, 90, 238, 0.2));
}

/* Internal SVG Animations */
.anim-spin { animation: spinSvg 8s linear infinite; transform-origin: center; }
.anim-spin-reverse { animation: spinSvg 12s linear infinite reverse; transform-origin: center; }
.anim-pulse-border { animation: pulseDash 3s ease-in-out infinite alternate; stroke-dasharray: 200; }
.anim-orbit { animation: orbitRing 6s linear infinite; transform-origin: center; }
.anim-orbit-reverse { animation: orbitRing 8s linear infinite reverse; transform-origin: center; }

@keyframes spinSvg { 100% { transform: rotate(360deg); } }
@keyframes pulseDash { 0% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } }
@keyframes orbitRing { 100% { transform: rotate(360deg) scale(1.1); } }

/* Panel Hover triggers faster animation */
.dk-exp-panel.active .anim-spin { animation-duration: 3s; }
.dk-exp-panel.active .anim-pulse-border { animation-duration: 1.5s; stroke: var(--accent-cyan); }

.dk-exp-title { font-size: 2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 15px; letter-spacing: -0.5px; }
.dk-exp-desc { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; }

/* Responsive */
@media (max-width: 991px) {
    .dk-exp-container { flex-direction: column; height: auto; }
    .dk-exp-panel { height: 100px; align-items: center; }
    .dk-exp-panel.active { height: auto; padding-top: 80px; }
    .dk-exp-vert-title { transform: none; bottom: auto; left: 30px; }
    .dk-exp-panel.active .dk-exp-vert-title { opacity: 0; }
    .dk-exp-bg-num { font-size: 3rem; left: auto; right: 30px; }
    .dk-exp-panel.active .dk-exp-bg-num { font-size: 5rem; top: 10px; right: 20px; }
    .dk-exp-content { min-width: 100%; padding: 30px; }
}

/* ==========================================================================
   5. PREMIUM MOUSE-TRACKING SPOTLIGHT CARDS
   ========================================================================== */

/* Dark Premium Background for this section to make the glow POP */
.dk-spotlight-section {
    padding: 120px 0;
    background-color: #0b1120; /* Deep Tech Dark Blue/Black */
    position: relative;
    overflow: hidden;
    /* Font colors default to light inside this section */
    color: #e2e8f0; 
}

.dk-relative-z { position: relative; z-index: 10; }

/* 🌟 Ambient Breathing Mesh Background 🌟 */
.dk-mesh-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.6;
}
.dk-blob-1 { animation: breatheBlob 15s ease-in-out infinite alternate; transform-origin: center; }
.dk-blob-2 { animation: breatheBlob 20s ease-in-out infinite alternate-reverse; transform-origin: center; }

@keyframes breatheBlob {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.5) translate(10%, 10%); }
}

/* --- HEADER --- */
.dk-spotlight-header { margin-bottom: 80px; }
.dk-spotlight-header h2 { font-size: 3.5rem; font-weight: 900; color: #ffffff; letter-spacing: -1.5px; margin-bottom: 15px; }
.dk-spotlight-header p { font-size: 1.15rem; color: #94a3b8; }
.dk-text-gradient-neon { 
    background: linear-gradient(90deg, #00d2ff, #3a7bd5); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
}

/* --- THE GRID --- */
.dk-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

/* --- 🌟 THE SPOTLIGHT CARD (MAGIC STARTS HERE) 🌟 --- */
.dk-spot-card {
    position: relative;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03); /* Extremely subtle base border */
    padding: 2px; /* This creates the border thickness */
    cursor: pointer;
    overflow: hidden;
}

/* 1. The Glowing Border Tracking the Mouse */
.dk-spot-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* The glow follows the JS variables --mouse-x and --mouse-y */
    background: radial-gradient(
        400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(0, 210, 255, 0.8), 
        transparent 40%
    );
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.4s ease;
    z-index: 1;
}

.dk-spot-card:hover .dk-spot-border {
    opacity: 1; /* Shows border glow on hover */
}

/* 2. The Inner Card (Covers the middle, leaving only border visible) */
.dk-spot-inner {
    position: relative;
    background: #111827; /* Dark Grey/Blue card body */
    border-radius: 22px; /* Slightly smaller than outer wrapper */
    padding: 40px 30px;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* 3. The Inner Flashlight Glow */
.dk-spot-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Soft glow inside the card following the mouse */
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(0, 144, 255, 0.08), 
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.dk-spot-card:hover .dk-spot-inner::before {
    opacity: 1; /* Shows inner flashlight on hover */
}

/* --- CARD CONTENT --- */
.dk-spot-icon {
    width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #00d2ff;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 25px;
    position: relative; z-index: 10;
    transition: 0.3s ease;
}
.dk-spot-icon svg { width: 30px; height: 30px; transition: transform 0.3s ease; }

.dk-spot-card:hover .dk-spot-icon {
    background: rgba(0, 210, 255, 0.1);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
}
.dk-spot-card:hover .dk-spot-icon svg {
    transform: scale(1.1);
}

.dk-spot-inner h4 {
    font-size: 1.6rem; font-weight: 800; color: #ffffff;
    margin-bottom: 15px; position: relative; z-index: 10;
}

.dk-spot-inner p {
    font-size: 1.05rem; color: #94a3b8; line-height: 1.7;
    margin: 0; position: relative; z-index: 10;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px) {
    .dk-spotlight-header h2 { font-size: 2.5rem; }
    .dk-spot-card { padding: 1px; }
    .dk-spot-inner { padding: 30px 20px; }
}
/* ==========================================================================
   6. INTERACTIVE SaaS DASHBOARD (ECOSYSTEM)
   ========================================================================== */
.dk-app-ecosystem-section {
    padding: 120px 0;
    background: #f8fafc; /* Very light slate background */
    border-top: 1px solid rgba(0,0,0,0.03);
}

/* --- HEADER --- */
.dk-eco-header { margin-bottom: 60px; }
.dk-eco-header h2 { font-size: 3.5rem; font-weight: 900; color: var(--text-dark); letter-spacing: -1.5px; margin-bottom: 15px; }
.dk-eco-header p { font-size: 1.15rem; color: var(--text-muted); }
.dk-text-gradient-app { background: linear-gradient(90deg, var(--primary-blue), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* --- 🌟 THE APP WINDOW 🌟 --- */
.dk-app-window {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 40px 80px rgba(0,0,0,0.06), 0 10px 20px rgba(0,0,0,0.03);
    overflow: hidden;
    min-height: 500px; /* Ensures window doesn't jump too much on tab switch */
}

/* --- LEFT SIDEBAR --- */
.dk-app-sidebar {
    width: 280px;
    background: #fcfdfd; /* Slightly off-white to contrast main display */
    border-right: 1px solid rgba(0,0,0,0.05);
    padding: 25px;
    flex-shrink: 0;
}

/* Mac OS Window Dots */
.dk-mac-dots {
    display: flex; gap: 8px; margin-bottom: 40px;
}
.dk-mac-dots span {
    width: 12px; height: 12px; border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

/* Navigation Buttons */
.dk-nav-title {
    font-size: 0.8rem; font-weight: 800; color: #94a3b8;
    letter-spacing: 2px; margin-bottom: 15px; padding-left: 10px;
}

.dk-tab-btn {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 12px 15px; margin-bottom: 5px;
    background: transparent; border: none;
    border-radius: 12px; cursor: pointer;
    font-size: 1.05rem; font-weight: 600; color: var(--text-muted);
    transition: all 0.3s ease; text-align: left;
}
.dk-tab-btn svg { width: 20px; height: 20px; color: #94a3b8; transition: 0.3s; }

.dk-tab-btn:hover { background: rgba(0,0,0,0.03); color: var(--text-dark); }
.dk-tab-btn:hover svg { color: var(--primary-blue); }

/* The Active State (Blue selection) */
.dk-tab-btn.active {
    background: rgba(0, 90, 238, 0.08);
    color: var(--primary-blue);
}
.dk-tab-btn.active svg { color: var(--primary-blue); }


/* --- RIGHT DISPLAY AREA --- */
.dk-app-display {
    flex: 1;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Developer Search Topbar */
.dk-app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dk-search-mock {
    display: flex; align-items: center; gap: 12px;
    color: #cbd5e1; font-size: 0.95rem; font-family: monospace;
}
.dk-search-mock svg { width: 18px; height: 18px; }

.dk-cmd-key {
    background: #f1f5f9; border: 1px solid #e2e8f0;
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.85rem; font-weight: 700; color: #64748b; font-family: monospace;
    box-shadow: 0 2px 0 rgba(0,0,0,0.05);
}

/* --- TAB CONTENTS & ANIMATIONS --- */
.dk-tab-content {
    display: none; /* Hidden by default */
    padding: 40px;
}

/* 🌟 Show Active Content with Smooth Fade In 🌟 */
.dk-tab-content.active {
    display: block;
    animation: contentFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contentFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.dk-tc-header { margin-bottom: 40px; }
.dk-tc-header h3 { font-size: 2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; }
.dk-tc-header p { font-size: 1.1rem; color: var(--text-muted); }

/* --- THE GLASS CHIP TAGS --- */
.dk-tc-tags {
    display: flex; flex-wrap: wrap; gap: 15px;
}

.dk-glass-chip {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(0,0,0,0.06);
    color: var(--text-dark);
    font-size: 1rem; font-weight: 600;
    padding: 10px 22px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), inset 0 2px 0 rgba(255,255,255,1);
    transition: 0.3s;
    cursor: default;
    
    /* 🌟 The Staggered Pop-In Animation 🌟 */
    opacity: 0;
    transform: scale(0.8);
}

/* When the tab is active, trigger the chips animation with CSS variable delay */
.dk-tab-content.active .dk-glass-chip {
    animation: chipPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--i) * 0.04s); /* One by one reveal */
}

@keyframes chipPop {
    to { opacity: 1; transform: scale(1); }
}

.dk-glass-chip:hover {
    background: var(--primary-blue);
    color: #ffffff;
    border-color: var(--primary-blue);
    transform: scale(1.05) translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(0, 90, 238, 0.2);
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 991px) {
    .dk-app-window { flex-direction: column; }
    .dk-app-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); padding: 20px; }
    .dk-mac-dots { display: none; /* Hide dots on mobile */ }
    .dk-app-nav { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
    .dk-nav-title { display: none; }
    .dk-tab-btn { width: auto; white-space: nowrap; margin: 0; padding: 10px 20px; background: #f1f5f9; }
    .dk-app-topbar { display: none; /* Hide search bar on mobile */ }
    .dk-tab-content { padding: 30px 20px; }
}

/* ==========================================================================
   7. SPLIT-SCREEN FLOATING FAQs
   ========================================================================== */
.dk-faq-premium-section {
    padding: 120px 0;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.dk-faq-layout {
    display: flex;
    gap: 80px;
    align-items: flex-start; /* Crucial for sticky left side */
}

/* --- LEFT SIDE (STICKY) --- */
.dk-faq-left {
    flex: 0 0 35%;
    position: sticky;
    top: 150px;
}

.dk-faq-sticky-box {
    position: relative;
    padding-right: 20px;
}

.dk-faq-badge {
    display: inline-block; background: rgba(0, 90, 238, 0.08);
    color: var(--primary-blue); font-weight: 800; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 2px; padding: 6px 16px;
    border-radius: 50px; margin-bottom: 20px;
}

.dk-faq-left h2 { font-size: 3.5rem; font-weight: 900; color: var(--text-dark); letter-spacing: -1.5px; margin-bottom: 15px; line-height: 1.1; }
.dk-faq-left p { font-size: 1.15rem; color: var(--text-muted); line-height: 1.7; }
.dk-text-gradient-faq { background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* The Premium Glowing Orb behind the text */
.dk-faq-glow-orb {
    position: absolute; top: 0; left: -50px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0, 90, 238, 0.05) 0%, transparent 70%);
    z-index: -1; pointer-events: none; border-radius: 50%;
}

/* --- RIGHT SIDE (ACCORDION LIST) --- */
.dk-faq-right {
    flex: 1;
}

.dk-faq-wrapper {
    display: flex; flex-direction: column; gap: 20px;
}

/* Individual FAQ Item */
.dk-faq-item {
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 20px;
    transition: all 0.4s ease;
    overflow: hidden; /* Contains the expanding answer */
}

.dk-faq-item:hover {
    background: #ffffff;
    border-color: rgba(0, 90, 238, 0.15);
    box-shadow: 0 10px 30px rgba(0, 90, 238, 0.04);
}

/* Question Button */
.dk-faq-btn {
    width: 100%; display: flex; align-items: center; gap: 20px;
    padding: 30px; background: transparent; border: none;
    cursor: pointer; text-align: left;
    transition: 0.3s;
}

.dk-faq-num {
    font-size: 1.2rem; font-weight: 900; color: #cbd5e1;
    font-family: monospace; transition: 0.3s;
}

.dk-faq-q-text {
    flex: 1; font-size: 1.25rem; font-weight: 800; color: var(--text-dark);
    line-height: 1.4; transition: 0.3s;
}

/* Icon Container & Lines */
.dk-faq-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-blue); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.dk-faq-icon svg { width: 20px; height: 20px; transition: 0.4s; }
.dk-faq-icon .vline { transition: 0.4s; transform-origin: center; }

/* 🌟 ACTIVE STATE MAGIC 🌟 */
.dk-faq-item.active {
    background: #ffffff;
    border-color: var(--primary-blue);
    box-shadow: 0 15px 40px rgba(0, 90, 238, 0.08);
}
.dk-faq-item.active .dk-faq-num { color: var(--primary-blue); }
.dk-faq-item.active .dk-faq-icon {
    background: var(--primary-blue); color: #ffffff; border-color: var(--primary-blue);
    transform: rotate(90deg); /* Spins the icon */
}
.dk-faq-item.active .dk-faq-icon .vline { transform: scaleY(0); /* Hides vertical line to make a minus sign */ }

/* 🌟 MODERN GRID ANIMATION FOR ANSWER (No JS Height calculation needed!) 🌟 */
.dk-faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
}

.dk-faq-item.active .dk-faq-answer-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
}

.dk-faq-answer-inner {
    overflow: hidden; /* Required for grid animation to work */
}

.dk-faq-answer-inner p {
    padding: 0 30px 30px 75px; /* Aligns perfectly with question text */
    margin: 0;
    font-size: 1.1rem; color: var(--text-muted); line-height: 1.7;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 991px) {
    .dk-faq-layout { flex-direction: column; gap: 50px; }
    .dk-faq-left { flex: 1; width: 100%; position: relative; top: 0; text-align: center; }
    .dk-faq-glow-orb { left: 50%; transform: translateX(-50%); }
    .dk-faq-answer-inner p { padding: 0 20px 25px 20px; } /* Reset padding for mobile */
    .dk-faq-btn { padding: 25px 20px; gap: 15px; }
}

@media (max-width: 767px) {
    .dk-faq-left h2 { font-size: 2.8rem; }
    .dk-faq-q-text { font-size: 1.1rem; }
}

/* -----------------------------------------
   8. CTA BOX 
   ----------------------------------------- */
.ss-cta-section { padding: 100px 0; background: var(--bg-white); }
.ss-cta-box {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    border-radius: 30px; padding: 80px 40px; position: relative; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 90, 238, 0.2);
}
.ss-cta-pattern {
    position: absolute; inset: 0; opacity: 0.1;
    background-image: radial-gradient(#fff 2px, transparent 2px);
    background-size: 30px 30px; animation: slideBg 20s linear infinite;
}

/* Animations */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes floatX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
@keyframes slideBg { 100% { background-position: 60px 60px; } }

/* Responsive */
@media (max-width: 992px) {
    .ss-bento-grid, .ss-why-grid, .ss-tags-grid { grid-template-columns: 1fr; }
    .ss-title { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    .ss-hero { padding: 140px 0 80px; }
    .ss-title { font-size: 2.8rem; }
    .ss-timeline-item { flex-direction: column; gap: 20px; }
    .ss-timeline-line { left: 24px; }
    .ss-float-svg { display: none; }
}