/* HERO */
.hero {
    display: flex;
    align-items: center;

    height: 420px; /* 🔥 EXACT controlled height like screenshot */
    padding: 0 80px;

    background: linear-gradient(135deg, #032667, #2a5298);

    color: white;
    position: relative;
    overflow: hidden;
}

/* LEFT CONTENT */
.hero-text {
    max-width: 700px;
    color: white;
}

/* TAG */
.brand-tag {
    color: white;
    font-size: 14px;
    letter-spacing: 2px;
    margin-top: 20px;
    opacity: 0.8;
}

.sub-text{
    color: white;
}
/* HEADING */
.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin: 0 0 15px 0;
}


/* SUBTEXT */
.sub-hero {
    font-size: 18px;
    opacity: 0.9;
    color: white;
}

/* SUBTLE BOTTOM LINE */
.hero::after {
    content: "";
    position: absolute;
    bottom: 40px;
    left: 80px;
    width: 60%;
    height: 2px;
    background: linear-gradient(to right, #22d3ee, transparent);
    opacity: 0.5;
}

/* FLOATING SHAPES (like your screenshot) */
/* FLOATING SHAPES BASE */
.shape {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 15px;
    background: rgba(255,255,255,0.08);
    transform: rotate(25deg);
    animation: floatMove 18s linear infinite;
}

/* DIFFERENT SIZES */
.s1 { width: 60px; height: 60px; animation-duration: 20s; }
.s2 { width: 100px; height: 100px; animation-duration: 25s; }
.s3 { width: 70px; height: 70px; animation-duration: 18s; }
.s4 { width: 90px; height: 90px; animation-duration: 22s; }
.s5 { width: 50px; height: 50px; animation-duration: 16s; }
.s6 { width: 110px; height: 110px; animation-duration: 28s; }

/* RANDOM START POSITIONS */
.s1 { top: 10%; left: 5%; }
.s2 { top: 30%; left: 80%; }
.s3 { top: 70%; left: 20%; }
.s4 { top: 60%; left: 70%; }
.s5 { top: 20%; left: 50%; }
.s6 { top: 80%; left: 40%; }
@keyframes floatMove {
    0% {
        transform: translate(0, 0) rotate(25deg);
    }
    25% {
        transform: translate(40px, -60px) rotate(35deg);
    }
    50% {
        transform: translate(-30px, -120px) rotate(15deg);
    }
    75% {
        transform: translate(50px, -60px) rotate(30deg);
    }
    100% {
        transform: translate(0, 0) rotate(25deg);
    }
}
/* ===== BASE (keep your existing hero.css same) ===== */

/* ===== KABANE STYLE ===== */
.hero-kabane {
    position: relative;
}

/* ===== LEFT TEXT (SMOOTH ENTRY) ===== */






/* ===== RIGHT GLASS ELEMENTS ===== */
/* ===== HERO MOTION STYLE ===== */
.hero-motion {
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND MOVING GRADIENT ===== */
.hero-motion::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;

    background: radial-gradient(circle, rgba(168,85,247,0.2), transparent 60%);
    animation: bgMove 12s linear infinite;
}

/* ===== LEFT TEXT (FLOATING) ===== */
.hero-motion .hero-text {
    animation: textFloat 6s ease-in-out infinite;
}

/* ===== HEADING EXTRA MOTION ===== */
.hero-motion h1 span {
    display: inline-block;
    animation: textWave 4s ease-in-out infinite;
}

/* ===== RIGHT SIDE ===== */
.hero-visual {
    width: 40%;
    position: relative;
    height: 400px;
}

/* GLASS SHAPES */
.glass {
    position: absolute;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* MOVING SHAPES */
.g1 {
    width: 180px;
    height: 180px;
    top: 20%;
    left: 20%;
    animation: move1 8s ease-in-out infinite;
}

.g2 {
    width: 120px;
    height: 120px;
    top: 55%;
    left: 55%;
    animation: move2 10s ease-in-out infinite;
}
/* ===== EXTRA GLASS SHAPES ===== */

.g3 {
    width: 100px;
    height: 100px;
    top: 15%;
    right: 10%;

    animation: move3 9s ease-in-out infinite;
}

.g4 {
    width: 140px;
    height: 140px;
    bottom: 10%;
    left: 10%;

    animation: move4 11s ease-in-out infinite;
}

/* ===== NEW MOTION ===== */

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

@keyframes move4 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(25px, -20px); }
    100% { transform: translate(0, 0); }
}
/* ===== ANIMATIONS ===== */

/* BACKGROUND MOTION */
@keyframes bgMove {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* TEXT FLOAT */
@keyframes textFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* TEXT WAVE */
@keyframes textWave {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* SHAPE MOVEMENT */
@keyframes move1 {
    0% { transform: translate(0,0); }
    50% { transform: translate(20px, -30px); }
    100% { transform: translate(0,0); }
}

@keyframes move2 {
    0% { transform: translate(0,0); }
    50% { transform: translate(-25px, 20px); }
    100% { transform: translate(0,0); }
}/* ===== CURSOR FOLLOW ===== */
.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a855f7;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 999;
}

/* ===== LEFT FLOAT ===== */
.hero-interactive .hero-text {
    animation: floatText 6s ease-in-out infinite;
}

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

/* ===== RIGHT SHAPES ===== */
.glass {
    position: absolute;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
}

.g1 { width: 150px; height: 150px; top: 20%; left: 20%; }
.g2 { width: 100px; height: 100px; top: 60%; left: 60%; }
.g3 { width: 120px; height: 120px; top: 30%; right: 10%; }

/* ===== BUTTON ===== */
.magnetic-btn {
    margin-top: 20px;
    padding: 12px 28px;
    border: none;
    background: #a855f7;
    color: white;
    cursor: pointer;
    border-radius: 30px;
    transition: transform 0.2s ease;
}

/* ===== HOVER TILT (for cards future use) ===== */
.tilt {
    transition: transform 0.2s ease;
}/* ===== HERO FLOW STYLE ===== */
.hero-flow {
    position: relative;
    overflow: hidden;
}

/* ===== BACKGROUND GLOW (MOVING) ===== */
.hero-flow::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;

    background: radial-gradient(circle at 30% 30%, rgba(168,85,247,0.25), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(236,72,153,0.2), transparent 60%);

    animation: bgFlow 12s ease-in-out infinite alternate;
}

/* ===== RIGHT SIDE ===== */

/* ===== ORBS ===== */
/* ===== PREMIUM LIQUID SHAPES ===== */
/* ===== RIGHT SIDE ===== */
.hero-visual {
    width: 40%;
    position: relative;
    height: 400px;
}

/* BASE CIRCLE */
.circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);

    animation: float 8s ease-in-out infinite;
}

/* ===== DIFFERENT CIRCLES ===== */
.c1 {
    width: 140px;
    height: 140px;
    top: 20%;
    left: 15%;
}

.c2 {
    width: 90px;
    height: 90px;
    top: 60%;
    left: 55%;
    animation-delay: 2s;
}

.c3 {
    width: 160px;
    height: 160px;
    top: 35%;
    right: 10%;
    animation-delay: 4s;
}

.c4 {
    width: 70px;
    height: 70px;
    top: 75%;
    left: 25%;
    animation-delay: 1s;
}

/* ===== FLOAT ANIMATION ===== */
@keyframes float {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.05);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}.soft-overlay {
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 50%);

    pointer-events: none;
    z-index: 0;
}.neural-lines {
    position: absolute;
    inset: 0;

    background-image: repeating-linear-gradient(
        120deg,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 2px,
        transparent 2px,
        transparent 50px
    );

    opacity: 0.4;
    animation: neuralMove 20s linear infinite;

    z-index: 0;
}

/* SMOOTH MOTION */
@keyframes neuralMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200px);
    }
}.data-streams {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* EACH STREAM */
.data-streams span {
    position: absolute;
    width: 2px;
    height: 120px;

    background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
    opacity: 0.5;

    animation: streamFlow 6s linear infinite;
}

/* POSITIONS */
.data-streams span:nth-child(1) {
    left: 30%;
    animation-delay: 0s;
}

.data-streams span:nth-child(2) {
    left: 55%;
    animation-delay: 2s;
}

.data-streams span:nth-child(3) {
    left: 75%;
    animation-delay: 4s;
}

/* FLOW ANIMATION */
@keyframes streamFlow {
    0% {
        transform: translateY(-150px);
        opacity: 0;
    }
    30% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(500px);
        opacity: 0;
    }
}
.hero-visual {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);

    width: 400px;
    height: 400px;
}.neural-orb {
    position: absolute;
    width: 220px;
    height: 220px;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: radial-gradient(circle, #22d3ee, transparent 70%);
    filter: blur(40px);

    animation: orbPulse 4s ease-in-out infinite alternate;
}

@keyframes orbPulse {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    to   { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* DIFFERENT SIZES */
.r1 {
    width: 260px;
    height: 260px;
    animation: rotateClock 20s linear infinite;
}

.r2 {
    width: 320px;
    height: 320px;
    animation: rotateAnti 25s linear infinite;
}

.r3 {
    width: 380px;
    height: 380px;
    animation: rotateClock 35s linear infinite;
}

/* ROTATIONS */
@keyframes rotateClock {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateAnti {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to   { transform: translate(-50%, -50%) rotate(0deg); }
}
/* ===== AI HERO (TAAS STYLE) ===== */
.ai-hero {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #2a0f4f, #1a0d2e);
}.ai-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 6px
    );

    opacity: 0.4;
    animation: scanMove 12s linear infinite;
}

@keyframes scanMove {
    from { transform: translateY(0); }
    to   { transform: translateY(40px); }
}.ai-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 30%, rgba(0,200,255,0.08), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(168,85,247,0.1), transparent 50%);
}.ai-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sq {
    position: absolute;
    width: 120px;
    height: 120px;

    border-radius: 20px;
    border: 1px solid rgba(0,200,255,0.3);
    background: rgba(0,200,255,0.05);

    backdrop-filter: blur(10px);
    animation: floatSquare 14s ease-in-out infinite;
}
.hero-text {
    position: relative;
    z-index: 2;
}
/* POSITIONS */
.sq.s1 { top: 20%; right: 20%; }
.sq.s2 { top: 60%; right: 10%; animation-delay: 3s; }
.sq.s3 { top: 50%; left: 40%; animation-delay: 6s; }

/* MOTION */
@keyframes floatSquare {
    0%   { transform: translateY(0px) rotate(0deg); }
    50%  { transform: translateY(-30px) rotate(8deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.hero-cloud {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #2b0a4a, #3b1c6b);
}.hero-cloud::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size: 60px 60px;
    opacity: 0.3;
}.hero-cloud::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;

    background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);

    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
}.cloud-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cloud-dots span {
    position: absolute;
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 20px #22d3ee;

    animation: floatDot 8s ease-in-out infinite;
}

/* POSITIONS */
.cloud-dots span:nth-child(1) {
    top: 25%;
    left: 30%;
}

.cloud-dots span:nth-child(2) {
    top: 50%;
    left: 60%;
    animation-delay: 2s;
}

.cloud-dots span:nth-child(3) {
    top: 70%;
    left: 80%;
    animation-delay: 4s;
}@keyframes floatDot {
    0%   { transform: translateY(0px); opacity: 0.6; }
    50%  { transform: translateY(-20px); opacity: 1; }
    100% { transform: translateY(0px); opacity: 0.6; }
}
.cloud-visual {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);

    width: 420px;
    height: 300px;
    pointer-events: none;
}.cloud {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border-radius: 100px;
    
    width: 160px;
    height: 80px;

    box-shadow:
        60px 0px 0 0 rgba(255,255,255,0.12),
        120px 10px 0 0 rgba(255,255,255,0.12),
        30px -30px 0 0 rgba(255,255,255,0.12),
        90px -20px 0 0 rgba(255,255,255,0.12);

    filter: blur(6px); /* small blur only */
    animation: cloudMove 20s ease-in-out infinite;
}.cloud-1 {
    top: 20%;
    left: 10%;
}

.cloud-2 {
    top: 50%;
    left: 40%;
    animation-delay: 5s;
}

.cloud-3 {
    top: 70%;
    left: 20%;
    animation-delay: 10s;
}@keyframes cloudMove {
    0%   { transform: translateX(0px) translateY(0px); }
    50%  { transform: translateX(40px) translateY(-20px); }
    100% { transform: translateX(0px) translateY(0px); }
}.cloud {
    filter: blur(5px); /* reduce blur */
}
/* ===================================================== */
/* ================= ENTERPRISE HERO ==================== */
/* ===================================================== */

.enterprise-hero {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #1f1140, #2a0d5a);
}

/* ===================================================== */
/* ================= GRID BACKGROUND ==================== */
/* ===================================================== */

.enterprise-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size: 60px 60px;
    opacity: 0.4;
}

/* ===================================================== */
/* ================= MOVING GRADIENT ==================== */
/* ===================================================== */

.enterprise-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 30% 30%, rgba(34,211,238,0.08), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(168,85,247,0.08), transparent 60%);

    animation: bgShift 12s ease-in-out infinite alternate;
}

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

/* ===================================================== */
/* ================= BACKGROUND STREAMS ================= */
/* ===================================================== */

.bg-streams {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-streams span {
    position: absolute;
    width: 2px;
    height: 120px;

    background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
    opacity: 0.15;

    animation: streamFlow 8s linear infinite;
}

.bg-streams span:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.bg-streams span:nth-child(2) {
    left: 50%;
    animation-delay: 3s;
}

.bg-streams span:nth-child(3) {
    left: 75%;
    animation-delay: 6s;
}

@keyframes streamFlow {
    0%   { transform: translateY(-150px); opacity: 0; }
    40%  { opacity: 0.2; }
    100% { transform: translateY(500px); opacity: 0; }
}

/* ===================================================== */
/* ================= RIGHT SYSTEM ======================= */
/* ===================================================== */

.enterprise-system {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);

    width: 420px;
    height: 300px;
}

/* SOFT GLOW */
.enterprise-system::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at center, rgba(34,211,238,0.08), transparent 70%);
}

/* ===================================================== */
/* ================= CUBE SYSTEM ======================== */
/* ===================================================== */

.system-cubes span {
    position: absolute;
    width: 32px;
    height: 32px;

    border-radius: 6px;
    background: linear-gradient(145deg, #22d3ee, #0ea5e9);

    border: 1px solid rgba(255,255,255,0.1);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.35),
        inset -5px -5px 10px rgba(0,0,0,0.25),
        inset 5px 5px 10px rgba(255,255,255,0.1);

    animation: cubeFloat 6s ease-in-out infinite;
}

/* POSITIONS */
.system-cubes span:nth-child(1) { top: 20%; left: 20%; }
.system-cubes span:nth-child(2) { top: 40%; left: 60%; }
.system-cubes span:nth-child(3) { top: 70%; left: 30%; }
.system-cubes span:nth-child(4) { top: 60%; left: 80%; }

/* FLOAT */
@keyframes cubeFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* ===================================================== */
/* ================= CONNECTION LINES =================== */
/* ===================================================== */

.system-lines {
    position: absolute;
    inset: 0;
}

.system-lines .line {
    position: absolute;
    height: 2px;
    background: rgba(255,255,255,0.2);
    transform-origin: left center;
}

/* STRUCTURED CONNECTIONS */
.line.l1 {
    width: 120px;
    top: 25%;
    left: 22%;
    transform: rotate(25deg);
}

.line.l2 {
    width: 140px;
    top: 45%;
    left: 40%;
    transform: rotate(-20deg);
}

.line.l3 {
    width: 110px;
    top: 65%;
    left: 30%;
    transform: rotate(15deg);
}

/* ===================================================== */
/* ================= DATA FLOW ========================== */
/* ===================================================== */

.line::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;

    background: linear-gradient(to right, transparent, #22d3ee, transparent);

    animation: moveData 3s linear infinite;
}

@keyframes moveData {
    0%   { transform: translateX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

/* ===================================================== */
/* ================= TEXT FIX =========================== */
/* ===================================================== */

.hero-text {
    position: relative;
    z-index: 2;
}/* ===== DIGITAL TRANSFORMATION HERO ===== */
.hero-transform {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

/* ===== BACKGROUND SHIFT ===== */
.hero-transform::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 30%, rgba(34,211,238,0.12), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(168,85,247,0.12), transparent 60%);

    animation: transformBg 12s ease-in-out infinite alternate;
}

@keyframes transformBg {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(-40px, 30px); }
    100% { transform: translate(30px, -30px); }
}

/* ===== PARTICLE GRID ===== */
.hero-transform::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px;

    opacity: 0.15;
    animation: particleMove 20s linear infinite;
}

@keyframes particleMove {
    from { transform: translateY(0); }
    to   { transform: translateY(-200px); }
}

/* ===== MORPH GLOW LAYERS ===== */
.morph-layer {
    position: absolute;
    width: 300px;
    height: 300px;

    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.morph-layer.one {
    top: 20%;
    left: 10%;
    background: #10053a;
    animation: morphMove1 14s ease-in-out infinite;
}

.morph-layer.two {
    bottom: 10%;
    right: 15%;
    background: #1d0038;
    animation: morphMove2 18s ease-in-out infinite;
}

@keyframes morphMove1 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(60px,-40px) scale(1.2); }
    100% { transform: translate(0,0) scale(1); }
}

@keyframes morphMove2 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-50px,30px) scale(1.15); }
    100% { transform: translate(0,0) scale(1); }
}

/* ===== PROGRESS LINES ===== */
.progress-lines {
    position: absolute;
    inset: 0;

    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 60px,
        rgba(255,255,255,0.05) 60px,
        rgba(255,255,255,0.05) 62px
    );

    animation: moveLinesX 10s linear infinite;
}

@keyframes moveLinesX {
    from { transform: translateX(0); }
    to   { transform: translateX(-120px); }
}

/* ===== FLOATING BLOCKS ===== */
.transform-blocks span {
    position: absolute;
    width: 80px;
    height: 80px;

    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.1);

    animation: blockTransform 10s ease-in-out infinite;
}

.transform-blocks span:nth-child(1) {
    top: 20%;
    right: 20%;
}

.transform-blocks span:nth-child(2) {
    top: 60%;
    right: 10%;
    animation-delay: 3s;
}

.transform-blocks span:nth-child(3) {
    top: 45%;
    left: 55%;
    animation-delay: 6s;
}

@keyframes blockTransform {
    0%   { transform: translateY(0px) rotate(0deg); }
    50%  { transform: translateY(-30px) rotate(10deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* ===================================================== */
/* ================= TAAS HERO ========================== */
/* ===================================================== */

.hero-taas {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #1e1b5c, #2b2e83);
}

/* ===================================================== */
/* ================= SPOTLIGHT ========================== */
/* ===================================================== */

.spotlight {
    position: absolute;
    width: 400px;
    height: 400px;

    top: -100px;
    left: 20%;

    background: radial-gradient(circle, rgba(168,85,247,0.3), transparent 70%);
    filter: blur(60px);

    animation: spotlightMove 10s ease-in-out infinite alternate;
}

@keyframes spotlightMove {
    0%   { transform: translateX(0); }
    100% { transform: translateX(200px); }
}

/* ===================================================== */
/* ================= SCAN LINES ========================= */
/* ===================================================== */

.scan-lines {
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 2px,
        transparent 2px,
        transparent 6px
    );

    animation: scanMove 8s linear infinite;
}

@keyframes scanMove {
    from { transform: translateY(0); }
    to   { transform: translateY(40px); }
}

/* ===================================================== */
/* ================= PARTICLE GRID ====================== */
/* ===================================================== */

.taas-particles {
    position: absolute;
    inset: 0;

    background: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 35px 35px;

    opacity: 0.2;
    animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-200px); }
}

/* ===================================================== */
/* ================= HOLOGRAM CARDS ===================== */
/* ===================================================== */

.holo-cards span {
    position: absolute;
    width: 90px;
    height: 110px;

    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(15px);

    border: 1px solid rgba(255,255,255,0.15);

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);

    animation: cardFloat 8s ease-in-out infinite;
}

/* POSITIONS */
.holo-cards span:nth-child(1) {
    top: 25%;
    right: 20%;
}

.holo-cards span:nth-child(2) {
    top: 55%;
    right: 10%;
    animation-delay: 2s;
}

.holo-cards span:nth-child(3) {
    top: 45%;
    left: 60%;
    animation-delay: 4s;
}

/* FLOAT + TILT */
@keyframes cardFloat {
    0%   { transform: translateY(0px) rotate(0deg); }
    50%  { transform: translateY(-25px) rotate(6deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* ===================================================== */
/* ================= EXTRA GLOW ========================= */
/* ===================================================== */

.hero-taas::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 70% 30%, rgba(34,211,238,0.1), transparent 60%);
}

/* ===================================================== */
/* ================= HERO BASE ========================== */
/* ===================================================== */

.hero-industries {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0f172a, #1e293b);
}

/* ===================================================== */
/* ================= RIGHT SIDE WRAPPER ================= */
/* ===================================================== */

.hero-design {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
}

/* ===================================================== */
/* ================= GRID BACKGROUND ==================== */
/* ===================================================== */

.grid-lines {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size: 60px 60px;
    opacity: 0.3;
}

/* ===================================================== */
/* ================= SCANNING LINE ====================== */
/* ===================================================== */

.moving-line {
    position: absolute;
    width: 100%;
    height: 2px;

    top: 40%;
    background: linear-gradient(to right, transparent, #22d3ee, transparent);

    animation: scanLine 6s linear infinite;
}

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

/* ===================================================== */
/* ================= GLOW ORB =========================== */
/* ===================================================== */

.glow-orb {
    position: absolute;
    width: 220px;
    height: 220px;

    top: 30%;
    right: 20%;

    background: radial-gradient(circle, #22d3ee, transparent 70%);
    filter: blur(70px);

    animation: orbPulse 6s ease-in-out infinite alternate;
}

@keyframes orbPulse {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 1; }
}

/* ===================================================== */
/* ================= BUILDINGS SYSTEM =================== */
/* ===================================================== */

.industry-buildings {
    position: absolute;
    bottom: 0;
    right: 10%;

    display: flex;
    align-items: flex-end;
    gap: 20px;
}

/* BUILDING BASE */
.industry-buildings span {
    width: 50px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);

    position: relative;
    overflow: hidden;

    border-radius: 6px 6px 0 0;

    animation: buildingFloat 6s ease-in-out infinite;
}

/* HEIGHT VARIATION */
.b1 { height: 120px; }
.b2 { height: 180px; animation-delay: 1s; }
.b3 { height: 140px; animation-delay: 2s; }
.b4 { height: 200px; animation-delay: 3s; }

/* WINDOWS EFFECT */
.industry-buildings span::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.15) 0px,
        rgba(255,255,255,0.15) 2px,
        transparent 2px,
        transparent 12px
    );

    opacity: 0.4;
}

/* FLOAT ANIMATION */
@keyframes buildingFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ===================================================== */
/* ================= EXTRA DEPTH GLOW =================== */
/* ===================================================== */

.hero-industries::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 70% 30%, rgba(34,211,238,0.08), transparent 60%);
}
.hero-industries .bg-wave {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.03),
        transparent
    );

    animation: waveMove 10s linear infinite;
}

@keyframes waveMove {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}.hero-industries .light-beams span {
    position: absolute;
    width: 2px;
    height: 150px;

    background: linear-gradient(to bottom, transparent, #22d3ee, transparent);
    opacity: 0.2;

    animation: beamMove 8s linear infinite;
}

/* positions */
.light-beams span:nth-child(1) {
    left: 25%;
}

.light-beams span:nth-child(2) {
    left: 55%;
    animation-delay: 2s;
}

.light-beams span:nth-child(3) {
    left: 80%;
    animation-delay: 4s;
}

@keyframes beamMove {
    0%   { transform: translateY(-150px); opacity: 0; }
    40%  { opacity: 0.3; }
    100% { transform: translateY(400px); opacity: 0; }
}
.hero-industries .bg-particles {
    position: absolute;
    inset: 0;

    background: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 50px 50px;

    opacity: 0.15;
    animation: particleMove 25s linear infinite;
}

@keyframes particleMove {
    from { transform: translateY(0); }
    to   { transform: translateY(-200px); }
}
/* ===================================================== */
/* ================= FINTECH HERO ======================= */
/* ===================================================== */

.hero-fintech {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0f172a, #020617);
    color: white;
}

/* ===================================================== */
/* ================= GRID BACKGROUND ==================== */
/* ===================================================== */

.finance-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size: 60px 60px;
    opacity: 0.3;
}

/* ===================================================== */
/* ================= BANK STRUCTURE ===================== */
/* ===================================================== */

.bank-structure {
    position: absolute;
    bottom: 0;
    right: 10%;

    width: 220px;
    height: 140px;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 6px 6px 0 0;
}

/* ROOF */
.bank-structure::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;

    width: 100%;
    height: 40px;

    background: rgba(255,255,255,0.1);

    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* PILLARS */
.bank-structure::after {
    content: "";
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
        to right,
        transparent,
        transparent 30px,
        rgba(255,255,255,0.15) 30px,
        rgba(255,255,255,0.15) 35px
    );

    opacity: 0.5;
}

/* ===================================================== */
/* ================= MONEY FLOW ========================= */
/* ===================================================== */

.money-flow span {
    position: absolute;
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: #22d3ee;

    box-shadow:
        0 0 10px #22d3ee,
        0 0 20px rgba(34,211,238,0.5);

    animation: moneyMove 6s linear infinite;
}

/* POSITIONS */
.money-flow span:nth-child(1) {
    top: 30%;
    left: 20%;
}

.money-flow span:nth-child(2) {
    top: 50%;
    left: 40%;
    animation-delay: 2s;
}

.money-flow span:nth-child(3) {
    top: 70%;
    left: 60%;
    animation-delay: 4s;
}

/* FLOW */
@keyframes moneyMove {
    0%   { transform: translateX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateX(200px); opacity: 0; }
}

/* ===================================================== */
/* ================= TAX BARS =========================== */
/* ===================================================== */

.tax-bars {
    position: absolute;
    bottom: 0;
    left: 10%;

    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.tax-bars span {
    width: 20px;
    background: #22d3ee;

    opacity: 0.6;
    animation: barGrow 4s ease-in-out infinite;
}

/* HEIGHT VARIATION */
.tax-bars span:nth-child(1) { height: 60px; }
.tax-bars span:nth-child(2) { height: 100px; animation-delay: 1s; }
.tax-bars span:nth-child(3) { height: 80px; animation-delay: 2s; }

/* ANIMATION */
@keyframes barGrow {
    0%,100% { transform: scaleY(1); }
    50%     { transform: scaleY(1.3); }
}

/* ===================================================== */
/* ================= INSURANCE SHIELD =================== */
/* ===================================================== */

.insurance-shield {
    position: absolute;
    top: 25%;
    right: 25%;

    width: 80px;
    height: 100px;

    background: rgba(34,211,238,0.15);
    border: 1px solid rgba(34,211,238,0.4);

    clip-path: polygon(
        50% 0%,
        90% 20%,
        90% 60%,
        50% 100%,
        10% 60%,
        10% 20%
    );

    animation: shieldPulse 4s ease-in-out infinite;
}

/* PULSE */
@keyframes shieldPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%     { transform: scale(1.1); opacity: 1; }
}

/* ===================================================== */
/* ================= BACKGROUND DEPTH =================== */
/* ===================================================== */

.hero-fintech::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.08), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(168,85,247,0.08), transparent 60%);

    animation: bgMove 14s ease-in-out infinite alternate;
}

@keyframes bgMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(30px,-20px); }
}

/* ================= EXTRA GLOW ========================= */
.hero-fintech::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 70% 30%, rgba(34,211,238,0.1), transparent 60%);
}

/* ===================================================== */
/* ================= HEALTHCARE HERO ==================== */
/* ===================================================== */

.hero-healthcare {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0f766e, #022c22);
    color: white;
}

/* ===================================================== */
/* ================= GRID BACKGROUND ==================== */
/* ===================================================== */

.health-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size: 50px 50px;
    opacity: 0.25;
}

/* ===================================================== */
/* ================= HEARTBEAT LINE ===================== */
/* ===================================================== */

.heartbeat-line {
    position: absolute;
    width: 100%;
    height: 2px;

    top: 50%;
    background: linear-gradient(to right, transparent, #22d3ee, transparent);

    animation: heartbeatMove 4s linear infinite;
}

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

/* ===================================================== */
/* ================= MEDICAL CROSS ====================== */
/* ===================================================== */

.medical-cross {
    position: absolute;
    top: 30%;
    right: 20%;

    width: 60px;
    height: 60px;

    animation: crossPulse 3s ease-in-out infinite;
}

.medical-cross::before,
.medical-cross::after {
    content: "";
    position: absolute;
    background: #22d3ee;

    box-shadow: 0 0 15px #22d3ee;
}

/* horizontal */
.medical-cross::before {
    width: 100%;
    height: 20px;
    top: 20px;
}

/* vertical */
.medical-cross::after {
    width: 20px;
    height: 100%;
    left: 20px;
}

/* pulse */
@keyframes crossPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%     { transform: scale(1.2); opacity: 1; }
}

/* ===================================================== */
/* ================= FLOATING BUBBLES =================== */
/* ===================================================== */

.health-bubbles span {
    position: absolute;
    width: 30px;
    height: 30px;

    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);

    animation: bubbleFloat 10s ease-in-out infinite;
}

/* positions */
.health-bubbles span:nth-child(1) {
    top: 30%;
    left: 20%;
}

.health-bubbles span:nth-child(2) {
    top: 60%;
    left: 70%;
    animation-delay: 3s;
}

.health-bubbles span:nth-child(3) {
    top: 70%;
    left: 40%;
    animation-delay: 6s;
}

/* float */
@keyframes bubbleFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

/* ===================================================== */
/* ================= HEALTH DATA NODES ================== */
/* ===================================================== */

.health-nodes span {
    position: absolute;
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #22d3ee;

    box-shadow:
        0 0 10px #22d3ee,
        0 0 20px rgba(34,211,238,0.5);

    animation: nodePulse 4s ease-in-out infinite;
}

/* positions */
.health-nodes span:nth-child(1) {
    top: 25%;
    left: 60%;
}

.health-nodes span:nth-child(2) {
    top: 50%;
    left: 30%;
    animation-delay: 2s;
}

.health-nodes span:nth-child(3) {
    top: 75%;
    left: 50%;
    animation-delay: 4s;
}

/* pulse */
@keyframes nodePulse {
    0%,100% { transform: scale(1); opacity: 0.6; }
    50%     { transform: scale(1.5); opacity: 1; }
}

/* ===================================================== */
/* ================= BACKGROUND DEPTH =================== */
/* ===================================================== */

.hero-healthcare::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.08), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(16,185,129,0.08), transparent 60%);

    animation: bgMove 12s ease-in-out infinite alternate;
}

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

/* ===================================================== */
/* ================= EXTRA GLOW ========================= */
/* ===================================================== */

.hero-healthcare::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 70% 30%, rgba(34,211,238,0.1), transparent 60%);
}

/* ===================================================== */
/* ================= RETAIL HERO ======================== */
/* ===================================================== */

.hero-retail {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
}

/* ===================================================== */
/* ================= SOFT GLOW ========================== */
/* ===================================================== */

.soft-glow {
    position: absolute;
    width: 300px;
    height: 300px;

    top: 20%;
    left: 20%;

    background: radial-gradient(circle, #22d3ee, transparent 70%);
    filter: blur(80px);

    opacity: 0.4;
}

.shopping-bags span {
    position: absolute;
    width: 70px;
    height: 80px;

    background: rgba(255,255,255,0.08);
    border-radius: 8px;

    border: 1px solid rgba(255,255,255,0.1);

    animation: bagFloat 7s ease-in-out infinite;
}

/* handle */
.shopping-bags span::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 15px;

    width: 40px;
    height: 20px;

    border: 2px solid #22d3ee;
    border-bottom: none;
    border-radius: 20px;
}

/* positions */
.shopping-bags span:nth-child(1) {
    top: 30%;
    right: 20%;
}

.shopping-bags span:nth-child(2) {
    top: 55%;
    right: 10%;
    animation-delay: 2s;
}

@keyframes bagFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}.product-boxes span {
    position: absolute;
    width: 60px;
    height: 60px;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);

    transform: rotate(45deg);

    animation: boxFloat 8s ease-in-out infinite;
}

/* positions */
.product-boxes span:nth-child(1) {
    top: 25%;
    left: 60%;
}

.product-boxes span:nth-child(2) {
    top: 60%;
    left: 40%;
    animation-delay: 2s;
}

.product-boxes span:nth-child(3) {
    top: 45%;
    left: 75%;
    animation-delay: 4s;
}

@keyframes boxFloat {
    0%   { transform: rotate(45deg) translateY(0); }
    50%  { transform: rotate(45deg) translateY(-15px); }
    100% { transform: rotate(45deg) translateY(0); }
}.commerce-ui span {
    position: absolute;
    width: 120px;
    height: 70px;

    border-radius: 10px;
    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.1);

    backdrop-filter: blur(10px);

    animation: uiFloat 9s ease-in-out infinite;
}

/* fake lines inside */
.commerce-ui span::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    height: 2px;

    background: rgba(255,255,255,0.3);

    box-shadow: 0 10px 0 rgba(255,255,255,0.2),
                0 20px 0 rgba(255,255,255,0.15);
}

/* positions */
.commerce-ui span:nth-child(1) {
    top: 20%;
    left: 30%;
}

.commerce-ui span:nth-child(2) {
    top: 70%;
    left: 55%;
    animation-delay: 3s;
}

@keyframes uiFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}
/* ===================================================== */
/* ================= CART ICON ========================== */
/* ===================================================== */

.cart-icon {
    position: absolute;
    bottom: 20%;
    left: 15%;

    width: 60px;
    height: 30px;

    border: 2px solid #22d3ee;
    border-radius: 4px;

    animation: cartMove 6s ease-in-out infinite;
}

/* wheels */
.cart-icon::before,
.cart-icon::after {
    content: "";
    position: absolute;
    bottom: -8px;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #22d3ee;
}

.cart-icon::before {
    left: 10px;
}

.cart-icon::after {
    right: 10px;
}

/* cart motion */
@keyframes cartMove {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(40px); }
    100% { transform: translateX(0); }
}

/* ===================================================== */
/* ================= ORDER FLOW ========================= */
/* ===================================================== */

.order-flow span {
    position: absolute;
    width: 100px;
    height: 2px;

    background: linear-gradient(to right, transparent, #22d3ee, transparent);

    animation: flowMove 5s linear infinite;
}

/* POSITIONS */
.order-flow span:nth-child(1) {
    top: 30%;
    left: 20%;
}

.order-flow span:nth-child(2) {
    top: 50%;
    left: 40%;
    animation-delay: 2s;
}

.order-flow span:nth-child(3) {
    top: 70%;
    left: 60%;
    animation-delay: 4s;
}

/* FLOW */
@keyframes flowMove {
    0%   { transform: translateX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateX(150px); opacity: 0; }
}

/* ===================================================== */
/* ================= PRICE TAGS ========================= */
/* ===================================================== */

.price-tags span {
    position: absolute;
    width: 40px;
    height: 20px;

    background: #22d3ee;
    border-radius: 4px;

    animation: tagFloat 6s ease-in-out infinite;
}

/* POSITIONS */
.price-tags span:nth-child(1) {
    top: 20%;
    left: 30%;
}

.price-tags span:nth-child(2) {
    top: 60%;
    left: 50%;
    animation-delay: 3s;
}

/* FLOAT */
@keyframes tagFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* ===================================================== */
/* ================= BACKGROUND DEPTH =================== */
/* ===================================================== */

.hero-retail::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.08), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(168,85,247,0.08), transparent 60%);

    animation: bgMove 14s ease-in-out infinite alternate;
}

@keyframes bgMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(30px,-20px); }
}

/* ===================================================== */
/* ================= EXTRA GLOW ========================= */
/* ===================================================== */

.hero-retail::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 70% 30%, rgba(34,211,238,0.1), transparent 60%);
}
.warehouse {
    position: absolute;
    bottom: 0;
    right: 12%;

    width: 220px;
    height: 140px;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 6px 6px 0 0;
}

/* roof */
.warehouse::before {
    content: "";
    position: absolute;
    top: -40px;
    width: 100%;
    height: 40px;

    background: rgba(255,255,255,0.1);

    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* doors / storage lines */
.warehouse::after {
    content: "";
    position: absolute;
    inset: 0;

    background: repeating-linear-gradient(
        to right,
        transparent,
        transparent 25px,
        rgba(255,255,255,0.15) 25px,
        rgba(255,255,255,0.15) 30px
    );
}.stock-blocks span {
    position: absolute;
    width: 40px;
    height: 40px;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);

    animation: stockFloat 6s ease-in-out infinite;
}

/* stacking look */
.stock-blocks span:nth-child(1) {
    bottom: 0;
    left: 10%;
}

.stock-blocks span:nth-child(2) {
    bottom: 40px;
    left: 10%;
    animation-delay: 1s;
}

.stock-blocks span:nth-child(3) {
    bottom: 80px;
    left: 10%;
    animation-delay: 2s;
}

@keyframes stockFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}.logistic-nodes span {
    position: absolute;
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: #22d3ee;

    box-shadow: 0 0 10px #22d3ee;

    animation: nodePulse 4s infinite;
}

/* positions */
.logistic-nodes span:nth-child(1) { top: 40%; left: 20%; }
.logistic-nodes span:nth-child(2) { top: 60%; left: 35%; }
.logistic-nodes span:nth-child(3) { top: 50%; left: 60%; }

@keyframes nodePulse {
    0%,100% { transform: scale(1); opacity: 0.6; }
    50%     { transform: scale(1.5); opacity: 1; }
}.shipment-flow span {
    position: absolute;
    width: 30px;
    height: 30px;

    background: #22d3ee;
    border-radius: 6px;

    animation: moveShipment 6s linear infinite;
}

/* paths */
.shipment-flow span:nth-child(1) {
    top: 40%;
    left: 20%;
}

.shipment-flow span:nth-child(2) {
    top: 60%;
    left: 35%;
    animation-delay: 3s;
}

@keyframes moveShipment {
    0%   { transform: translateX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateX(200px); opacity: 0; }
}.hero-logistics {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0f172a, #020617);
}

.hero-logistics::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 20%, rgba(34,211,238,0.08), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(168,85,247,0.08), transparent 60%);

    animation: bgMove 12s ease-in-out infinite alternate;
}

@keyframes bgMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(30px,-20px); }
}
/* ===================================================== */
/* ================= SAAS HERO ========================== */
/* ===================================================== */

.hero-saas {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #020617, #0f172a);
    color: white;
}

/* ===================================================== */
/* ================= TECH GRID ========================== */
/* ===================================================== */

.tech-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size: 60px 60px;
    opacity: 0.25;
}

/* ===================================================== */
/* ================= CODE PARTICLES ===================== */
/* ===================================================== */

.code-particles span {
    position: absolute;
    color: #22d3ee;
    font-size: 12px;
    opacity: 0.6;

    animation: codeFloat 8s linear infinite;
}

.code-particles span::before {
    content: "</>";
}

/* positions */
.code-particles span:nth-child(1) { top: 30%; left: 20%; }
.code-particles span:nth-child(2) { top: 60%; left: 70%; animation-delay: 2s; }
.code-particles span:nth-child(3) { top: 80%; left: 40%; animation-delay: 4s; }

@keyframes codeFloat {
    0%   { transform: translateY(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateY(-80px); opacity: 0; }
}

/* ===================================================== */
/* ================= DEV FIGURE ========================= */
/* ===================================================== */

.dev-figure {
    position: absolute;
    right: 10%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HEAD */
.head {
    width: 40px;
    height: 40px;

    background: #22d3ee;
    border-radius: 50%;

    margin-bottom: 5px;
}

/* BODY */
.body {
    width: 60px;
    height: 80px;

    background: rgba(255,255,255,0.1);
    border-radius: 10px;

    margin-bottom: 10px;
}

/* ===================================================== */
/* ================= LAPTOP ============================= */
/* ===================================================== */

.laptop {
    width: 120px;
    height: 70px;

    background: rgba(255,255,255,0.08);
    border-radius: 6px;

    position: relative;

    animation: typing 2s ease-in-out infinite;
}

/* SCREEN */
.screen {
    position: absolute;
    inset: 10px;

    background: #020617;
    border-radius: 4px;
}

/* CODE LINES */
.screen span {
    display: block;
    height: 4px;
    margin: 6px;

    background: #22d3ee;
    opacity: 0.7;
}

.screen span:nth-child(1) { width: 80%; }
.screen span:nth-child(2) { width: 60%; }
.screen span:nth-child(3) { width: 70%; }

/* TYPING EFFECT */
@keyframes typing {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
}

/* ===================================================== */
/* ================= BACKGROUND GLOW ==================== */
/* ===================================================== */

.hero-saas::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 70% 30%, rgba(34,211,238,0.1), transparent 60%);

    animation: bgMove 10s ease-in-out infinite alternate;
}

@keyframes bgMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(-30px,20px); }
}

/* ===================================================== */
/* ================= EXTRA DEPTH ======================== */
/* ===================================================== */

.hero-saas::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 20%, rgba(168,85,247,0.08), transparent 60%);
}
/* ===================================================== */
/* ================= BACKGROUND CODE ==================== */
/* ===================================================== */

.bg-code {
    position: relative;
    inset: 0;

    font-size: 12px;
    line-height: 1.6;

    color: rgba(34, 211, 238, 0.15);

    white-space: pre;
    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

/* animate scrolling */
.bg-code pre {
    position: absolute;
    width: 200%;

    animation: codeScroll 25s linear infinite;
}

/* movement */
@keyframes codeScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}
/* ===================================================== */
/* ================= INSURANCE HERO ===================== */
/* ===================================================== */

.hero-insurance {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #020617, #0f172a);
    color: white;
}

/* ===================================================== */
/* ================= PROTECTION DOME ==================== */
/* ===================================================== */

.protection-dome {
    position: absolute;
    bottom: 0;
    right: 10%;

    width: 300px;
    height: 200px;

    border-radius: 50% 50% 0 0;

    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.3);

    backdrop-filter: blur(10px);

    animation: domePulse 4s ease-in-out infinite;
}

@keyframes domePulse {
    0%,100% { transform: scale(1); opacity: 0.6; }
    50%     { transform: scale(1.05); opacity: 1; }
}

/* ===================================================== */
/* ================= HOUSE ============================== */
/* ===================================================== */

.ins-house {
    position: absolute;
    bottom: 0;
    right: 18%;

    width: 80px;
    height: 60px;

    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

/* ROOF */
.ins-house::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;

    width: 100%;
    height: 40px;

    background: rgba(255,255,255,0.15);

    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* DOOR */
.ins-house::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;

    width: 15px;
    height: 25px;

    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

/* ================= CAR ================================ */
.ins-car {
    position: absolute;
    bottom: 10px;
    right: 30%;

    width: 70px;
    height: 30px;

    border: 2px solid #22d3ee;
    border-radius: 6px;

    animation: carFloat 6s ease-in-out infinite;
}

/* WHEELS */
.ins-car::before,
.ins-car::after {
    content: "";
    position: absolute;
    bottom: -8px;

    width: 8px;
    height: 8px;

    background: #22d3ee;
    border-radius: 50%;
}

.ins-car::before { left: 10px; }
.ins-car::after  { right: 10px; }

/* FLOAT */
@keyframes carFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}

/* ===================================================== */
/* ================= SAFETY GLOW ======================== */

.safe-glow {
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 70% 80%,
        rgba(34,211,238,0.1),
        transparent 60%
    );
}

/* ===================================================== */
/* ================= BACKGROUND DEPTH =================== */
/* ===================================================== */

.hero-insurance::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 20%, rgba(34,211,238,0.08), transparent 60%),
        radial-gradient(circle at 80% 30%, rgba(168,85,247,0.08), transparent 60%);

    animation: bgMove 12s ease-in-out infinite alternate;
}

@keyframes bgMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(25px,-20px); }
}

/* ===================================================== */
/* ================= EXTRA GLOW ========================= */
/* ===================================================== */

.hero-insurance::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 60% 40%, rgba(34,211,238,0.08), transparent 60%);
}
/* ===================================================== */
/* ================= MISSION HERO ======================= */
/* ===================================================== */

.hero-mission {
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #0f172a, #1e1b4b, #312e81);
    color: white;
}

/* ===================================================== */
/* ================= BACKGROUND GRID ==================== */
/* ===================================================== */

.mission-lines {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

    background-size: 70px 70px;

    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-70px); }
}

/* ===================================================== */
/* ================= MISSION TARGET ===================== */
/* ===================================================== */

.mission-target {
    position: absolute;
    right: 15%;
    top: 40%;
}

.mission-target span {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #22d3ee;

    animation: targetPulse 3s ease-in-out infinite;
}

/* OUTER RING */
.mission-target span:nth-child(1) {
    width: 120px;
    height: 120px;
}

/* MID RING */
.mission-target span:nth-child(2) {
    width: 80px;
    height: 80px;
    top: 20px;
    left: 20px;
    animation-delay: 0.5s;
}

/* CENTER POINT */
.mission-target span:nth-child(3) {
    width: 40px;
    height: 40px;
    top: 40px;
    left: 40px;
    background: #22d3ee;
    animation-delay: 1s;
}

@keyframes targetPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%     { transform: scale(1.1); opacity: 1; }
}

/* ===================================================== */
/* ================= VISION PATH ======================== */
/* ===================================================== */

.vision-path span {
    position: absolute;
    width: 200px;
    height: 2px;

    top: 60%;
    left: 20%;

    background: linear-gradient(to right, transparent, #a855f7, transparent);

    transform: rotate(-25deg);

    animation: visionMove 4s linear infinite;
}

@keyframes visionMove {
    0%   { transform: rotate(-25deg) translateX(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: rotate(-25deg) translateX(150px); opacity: 0; }
}

/* ===================================================== */
/* ================= FLOATING DOTS ====================== */
/* ===================================================== */

.mission-dots span {
    position: absolute;
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #22d3ee;

    box-shadow: 0 0 10px #22d3ee;

    animation: dotFloat 6s ease-in-out infinite;
}

/* POSITIONS */
.mission-dots span:nth-child(1) {
    top: 30%;
    left: 25%;
}

.mission-dots span:nth-child(2) {
    top: 50%;
    left: 60%;
    animation-delay: 2s;
}

.mission-dots span:nth-child(3) {
    top: 70%;
    left: 40%;
    animation-delay: 4s;
}

@keyframes dotFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-15px); }
}

/* ===================================================== */
/* ================= BACKGROUND GLOW ==================== */
/* ===================================================== */

.hero-mission::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 20%, rgba(34,211,238,0.1), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(168,85,247,0.1), transparent 60%);

    animation: bgMove 12s ease-in-out infinite alternate;
}

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

/* ===================================================== */
/* ================= EXTRA DEPTH ======================== */
/* ===================================================== */

.hero-mission::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 60% 40%, rgba(34,211,238,0.08), transparent 60%);
}/* ================= CAREER ANIMATION UPGRADE ================= */

/* 🌌 Subtle moving grid (light, not heavy) */
.hero-career::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size: 60px 60px;
    opacity: 0.2;

    animation: careerGridMove 14s linear infinite;
}

@keyframes careerGridMove {
    from { transform: translateY(0); }
    to   { transform: translateY(-60px); }
}

/* ✨ Soft glow (focus on left side) */
.hero-career::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;

    top: 50%;
    left: 10%;
    transform: translateY(-50%);

    background: radial-gradient(circle, rgba(34,211,238,0.25), transparent 70%);
    filter: blur(80px);
}

/* 📈 Moving career path line */
.hero-career .eva-accent-bar {
    position: relative;
    overflow: hidden;
}

.hero-career .eva-accent-bar::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        #22d3ee,
        transparent
    );

    animation: careerLineMove 4s linear infinite;
}

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

/* 🔵 Floating subtle dot (career energy) */
.hero-career {
    position: relative;
}

.hero-career .career-dot {
    position: absolute;
    width: 10px;
    height: 10px;

    background: #22d3ee;
    border-radius: 50%;

    top: 60%;
    left: 70%;

    box-shadow: 0 0 15px #22d3ee;

    animation: dotFloat 6s ease-in-out infinite;
}

@keyframes dotFloat {
    0%,100% { transform: translateY(0); opacity: 0.6; }
    50%     { transform: translateY(-20px); opacity: 1; }
}

/* ✨ TEXT ENTRY (clean + premium) */
.hero-career .brand-tag {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
}

.hero-career h1 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.2s;
}

.hero-career .sub-text {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.4s;
}

/* smooth fade */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ✨ Highlight glow pulse */
.hero-career .highlight {
    animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%,100% { text-shadow: 0 0 8px rgba(34,211,238,0.3); }
    50%     { text-shadow: 0 0 20px rgba(34,211,238,0.7); }
}/* ================= RIGHT IMAGE ================= */

.hero-career {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* IMAGE WRAPPER */
.hero-career-image {
  position: relative;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

/* IMAGE STYLE */
.hero-career-image img {
  width: 100%;
  max-width: 380px;

  /* premium look */
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));

  animation: imageFloat 6s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes imageFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-15px); }
}.hero-career-image::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;

  background: radial-gradient(circle, rgba(34,211,238,0.25), transparent 70%);
  filter: blur(60px);

  z-index: -1;
}/* ================= HERO MOTION WRAPPER ================= */
.hero-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* ================= SOFT GLOW ================= */
.hero-glow {
  position: absolute;
  width: 400px;
  height: 400px;

  top: 50%;
  left: 15%;
  transform: translateY(-50%);

  background: radial-gradient(circle, rgba(0,198,255,0.25), transparent 70%);
  filter: blur(80px);

  animation: glowMove 10s ease-in-out infinite alternate;
}

@keyframes glowMove {
  0%   { transform: translateY(-50%) translateX(0); }
  100% { transform: translateY(-50%) translateX(40px); }
}

/* ================= FLOW LINE ================= */
.hero-flow {
  position: absolute;
  width: 200%;
  height: 2px;

  top: 65%;
  left: -50%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,198,255,0.6),
    transparent
  );

  animation: flowMove 6s linear infinite;
  opacity: 0.4;
}

@keyframes flowMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(30%); }
}

/* ================= FLOATING DOTS ================= */
.hero-dot {
  position: absolute;
  width: 8px;
  height: 8px;

  background: #00c6ff;
  border-radius: 50%;

  box-shadow: 0 0 10px rgba(0,198,255,0.8);

  animation: dotFloat 6s ease-in-out infinite;
}

.hero-dot:nth-child(3) { top: 30%; left: 20%; }
.hero-dot:nth-child(4) { top: 70%; left: 60%; animation-delay: 2s; }
.hero-dot:nth-child(5) { top: 50%; left: 80%; animation-delay: 4s; }

@keyframes dotFloat {
  0%,100% { transform: translateY(0); opacity: 0.6; }
  50%     { transform: translateY(-20px); opacity: 1; }
}




/* ================= HIGHLIGHT ================= */
.highlight {
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 6px rgba(0,198,255,0.3); }
  50%     { text-shadow: 0 0 18px rgba(0,198,255,0.7); }
}


@keyframes barFlow {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}/* ================= RIGHT SIDE ART ================= */


/* wrapper */
.hero-art {
  width: 40%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* card (main drawing) */
.art-card {
  width: 260px;
  padding: 20px;
  border-radius: 14px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  animation: floatCard 6s ease-in-out infinite;
}

/* floating motion */
@keyframes floatCard {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* header line */
.art-header {
  height: 8px;
  width: 60%;
  background: #00c6ff;
  border-radius: 4px;
  margin-bottom: 15px;

  animation: drawLine 1s ease forwards;
}

/* content lines */
.art-line {
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  margin-bottom: 10px;

  transform: scaleX(0);
  transform-origin: left;
  animation: drawLine 1s ease forwards;
}

.art-line:nth-child(2) { animation-delay: 0.2s; }
.art-line:nth-child(3) { animation-delay: 0.4s; }
.art-line:nth-child(4) { animation-delay: 0.6s; }

/* shorter line */
.art-line.short {
  width: 70%;
}

/* button */
.art-btn {
  margin-top: 15px;
  height: 30px;
  width: 100px;
  border-radius: 6px;
  background: linear-gradient(90deg, #00c6ff, #007bff);

  transform: scaleX(0);
  transform-origin: left;
  animation: drawLine 1s ease forwards;
  animation-delay: 0.8s;
}

/* draw animation */
@keyframes drawLine {
  to {
    transform: scaleX(1);
  }
}

/* glow behind */
.hero-art::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;

  background: radial-gradient(circle, rgba(0,198,255,0.2), transparent 70%);
  filter: blur(60px);
  z-index: -1;
}/* ===================================================== */
/* ============= COMPLETE RESPONSIVE SYSTEM ============ */
/* ===================================================== */

/* 1. GLOBAL FLUID SCALING */
:root {
    --hero-padding: clamp(20px, 6vw, 80px);
}

.hero-text h1 {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
}

.sub-hero {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.hero.hero-purple.hero-consulting {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #05010a,
        #0f0220,
        #1a0433
    );
}


/* ================= BACKGROUND GLOW ================= */

.hero.hero-purple.hero-consulting::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;

    top: 40%;
    left: 10%;

    background: radial-gradient(
        circle,
        rgba(168,85,247,0.25),
        transparent 70%
    );

    filter: blur(120px);

    animation: bgGlowMove 12s ease-in-out infinite alternate;
}

.hero.hero-purple.hero-consulting::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;

    bottom: 0;
    right: 10%;

    background: radial-gradient(
        circle,
        rgba(236,72,153,0.2),
        transparent 70%
    );

    filter: blur(100px);

    animation: bgGlowMove2 14s ease-in-out infinite alternate;
}


/* ================= GRID ================= */

.hero.hero-purple.hero-consulting .consult-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

    background-size: 80px 80px;
    opacity: 0.15;

    animation: gridMove 18s linear infinite;
}


/* ================= CONSULTING SCENE ================= */

.hero.hero-purple.hero-consulting .consulting-scene {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    height: 260px;
}

/* ================= PEOPLE ================= */

.hero.hero-purple.hero-consulting .person {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;

    animation: personFloat 5s ease-in-out infinite;
}

.hero.hero-purple.hero-consulting .p2 {
    animation-delay: 1s;
}

.hero.hero-purple.hero-consulting .person .head {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
}

.hero.hero-purple.hero-consulting .person .body {
    width: 45px;
    height: 65px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-top: 5px;
}

.hero.hero-purple.hero-consulting .p1 { left: 15%; top: 45%; }
.hero.hero-purple.hero-consulting .p2 { right: 15%; top: 45%; }


/* ================= BOARD ================= */

.hero.hero-purple.hero-consulting .board {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 90px;

    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);

    animation: boardGlow 4s ease-in-out infinite;
}

.hero.hero-purple.hero-consulting .board .line {
    position: absolute;
    height: 3px;

    background: linear-gradient(90deg, #a855f7, #e879f9);
    border-radius: 4px;

    transform: scaleX(0);
    transform-origin: left;

    animation: drawLine 1s ease forwards;
}

.hero.hero-purple.hero-consulting .l1 { width: 70%; top: 25%; left: 15%; }
.hero.hero-purple.hero-consulting .l2 { width: 50%; top: 50%; left: 15%; animation-delay: 0.3s; }
.hero.hero-purple.hero-consulting .l3 { width: 60%; top: 70%; left: 15%; animation-delay: 0.6s; }


/* ================= IDEAS ================= */

.hero.hero-purple.hero-consulting .idea {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: #facc15;
    box-shadow: 0 0 12px rgba(250,204,21,0.8);

    animation: ideaMove 4s linear infinite;
}

.hero.hero-purple.hero-consulting .i1 { left: 35%; top: 40%; }
.hero.hero-purple.hero-consulting .i2 { left: 50%; top: 30%; animation-delay: 1s; }
.hero.hero-purple.hero-consulting .i3 { left: 65%; top: 40%; animation-delay: 2s; }


/* ================= CONNECTION ================= */

.hero.hero-purple.hero-consulting .consulting-scene::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 30%;
    width: 40%;
    height: 2px;

    background: linear-gradient(to right, transparent, #a855f7, transparent);

    animation: connectFlow 3s linear infinite;
}


/* ================= ANIMATIONS ================= */

@keyframes bgGlowMove {
    0%   { transform: translate(0,0); }
    100% { transform: translate(40px, -40px); }
}

@keyframes bgGlowMove2 {
    0%   { transform: translate(0,0); }
    100% { transform: translate(-30px, 30px); }
}

@keyframes gridMove {
    from { transform: translateY(0); }
    to   { transform: translateY(-80px); }
}

@keyframes personFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}

@keyframes drawLine {
    to { transform: scaleX(1); }
}

@keyframes ideaMove {
    0%   { transform: translateY(0); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(-60px); opacity: 0; }
}

@keyframes connectFlow {
    0%   { opacity: 0; transform: translateX(-20px); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(20px); }
}

@keyframes boardGlow {
    0%,100% { box-shadow: 0 0 10px rgba(168,85,247,0.2); }
    50%     { box-shadow: 0 0 25px rgba(168,85,247,0.5); }
}


/* ===================================================== */
/* ============ CONSULTING HERO RESPONSIVE ============= */
/* ===================================================== */

@media (max-width: 992px) {
    /* Center the scene and scale it for tablets */
    .hero.hero-purple.hero-consulting .consulting-scene {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin: 40px auto 0;
        width: 300px;
        height: 240px;
        display: block;
    }

    /* Adjust the persons layout for a centered view */
    .hero.hero-purple.hero-consulting .p1 { left: 10%; }
    .hero.hero-purple.hero-consulting .p2 { right: 10%; }
}

@media (max-width: 768px) {
    /* Hide moving ideas and small grid lines on mobile for performance */
    .hero.hero-purple.hero-consulting .idea,
    .hero.hero-purple.hero-consulting .consult-grid {
        display: none !important;
    }

    /* Reduce glow intensity to keep text readable on small screens */
    .hero.hero-purple.hero-consulting::before,
    .hero.hero-purple.hero-consulting::after {
        width: 300px;
        height: 300px;
        filter: blur(80px);
    }
}

@media (max-width: 576px) {
    /* Scale down the entire consulting visual for small phones */
    .hero.hero-purple.hero-consulting .consulting-scene {
        transform: scale(0.85);
        margin-top: 20px;
    }

    /* Adjust the "Board" size to prevent it from hitting edges */
    .hero.hero-purple.hero-consulting .board {
        width: 150px;
        height: 80px;
    }

    /* Make the persons slightly smaller */
    .hero.hero-purple.hero-consulting .person .head {
        width: 24px;
        height: 24px;
    }

    .hero.hero-purple.hero-consulting .person .body {
        width: 38px;
        height: 55px;
    }

    /* Keep the connection flow visible but shorter */
    .hero.hero-purple.hero-consulting .consulting-scene::before {
        width: 30%;
        left: 35%;
    }
}

/* Ensure smooth entry for the board lines on mobile */
@media (prefers-reduced-motion: reduce) {
    .hero.hero-purple.hero-consulting .board .line {
        animation: none;
        transform: scaleX(1);
    }
}

/* 2. TABLET & SMALL LAPTOP (Up to 1024px) */
@media (max-width: 1024px) {
    .hero {
        padding: 0 var(--hero-padding);
    }
    
    .hero-text {
        max-width: 550px;
    }
}

/* 3. TABLET LANDSCAPE/PORTRAIT (Up to 992px) */
@media (max-width: 992px) {
    .hero {
        height: auto;
        min-height: 600px;
        padding: 80px var(--hero-padding);
        flex-direction: column;
        justify-content: center;
        text-align: center;
        overflow: hidden;
    }

    .hero-text {
        max-width: 100%;
        margin-bottom: 50px;
        z-index: 10;
    }

    /* Target all visual/art/system containers */
    .hero-visual, 
    .hero-design, 
    .hero-art, 
    .hero-career-image, 
    .enterprise-system, 
    .cloud-visual,
    .bank-structure,
    .warehouse,
    .protection-dome,
    .mission-target,
    .dev-figure {
        position: relative;
        width: 100%;
        max-width: 400px;
        height: 300px;
        right: auto;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Handle specific industry building alignment */
    .industry-buildings {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 40px auto 0;
        justify-content: center;
    }

    /* Decorative bottom line centering */
    .hero::after {
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }
}

/* 4. MOBILE DEVICES (Up to 768px) */
@media (max-width: 768px) {
    /* Performance: Disable heavy background particles & streams */
    .shape, 
    .bg-streams, 
    .data-streams, 
    .taas-particles, 
    .cloud-dots, 
    .bg-code {
        display: none !important;
    }

    /* Simplify Background Animations for Battery/CPU */
    .hero-motion::before, 
    .enterprise-hero::after, 
    .hero-transform::before {
        animation-duration: 25s;
        filter: blur(50px);
    }

    /* Adjust specific system graphics */
    .medical-cross {
        right: 10%;
        transform: scale(0.8);
    }

    .insurance-shield {
        right: 10%;
    }
}

/* 5. SMALL MOBILE (Up to 576px) */
@media (max-width: 576px) {
    .hero {
        padding: 60px 20px;
    }

    /* Reduce font noise */
    .brand-tag {
        font-size: 11px;
        letter-spacing: 1px;
    }

    /* Hide smaller decorative layers that clutter the UI */
    .morph-layer, 
    .glow-orb, 
    .spotlight, 
    .neural-orb,
    .r3 {
        display: none;
    }

    /* Graphic Scaling */
    .art-card, 
    .commerce-ui span, 
    .holo-cards span,
    .laptop {
        transform: scale(0.8);
    }

    .hero-career-image img {
        max-width: 260px;
    }

    .protection-dome {
        width: 240px;
        height: 150px;
    }

    /* Movement cleanup */
    .money-flow span, .order-flow span {
        animation-duration: 4s;
    }
}

/* 6. INTERACTION CLEANUP */
@media (hover: none) {
    /* Prevent hover-based glitches on touch screens */
    .magnetic-btn, .tilt, .cursor {
        display: none !important;
        transform: none !important;
    }
    
    .hero-career-image img {
        animation: imageFloat 6s ease-in-out infinite; /* Keep essential float */
    }
}

/* 7. ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}