:root {
    --cx-hero-primary: #1A56FF;
    --cx-hero-secondary: #8888A0;
    --cx-hero-bg: #0A0A0F;
    --cx-hero-text-primary: #F5F4F0;
    --cx-clock-justify: center;
    --cx-clock-align: center;
    --cx-content-justify: center;
    --cx-content-align: center;
}

.cx-hero-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--cx-hero-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    perspective: 1200px;
}

.cx-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at center, rgba(26, 86, 255, 0.15) 0%, var(--cx-hero-bg) 100%);
}

/* Background Animations */
.cx-hero-bg-particles .cx-hero-particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--cx-hero-text-primary) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    animation: cx-hero-float 20s linear infinite;
}

.cx-hero-bg-radar .cx-hero-radar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vw;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 70%, rgba(26, 86, 255, 0.1) 100%);
    border-radius: 50%;
    animation: cx-hero-spin 10s linear infinite;
}

.cx-hero-bg-nebula .cx-hero-nebula {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 30% 30%, rgba(26, 86, 255, 0.15), transparent 40%),
                radial-gradient(circle at 70% 70%, rgba(136, 136, 160, 0.1), transparent 40%);
    animation: cx-hero-breathe 15s ease-in-out infinite alternate;
}

.cx-hero-bg-matrix .cx-hero-matrix-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
}

.cx-hero-bg-orbs .cx-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    animation: cx-hero-float 15s ease-in-out infinite alternate;
}
.cx-hero-bg-orbs .cx-orb-1 { width: 300px; height: 300px; background: var(--cx-hero-primary); top: 10%; left: 20%; animation-delay: 0s; }
.cx-hero-bg-orbs .cx-orb-2 { width: 400px; height: 400px; background: var(--cx-hero-secondary); top: 50%; right: 10%; animation-delay: -5s; }
.cx-hero-bg-orbs .cx-orb-3 { width: 250px; height: 250px; background: rgba(26, 86, 255, 0.5); bottom: 10%; left: 40%; animation-delay: -10s; }

.cx-hero-bg-grid .cx-hero-grid-wave {
    position: absolute;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(rgba(26, 86, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 86, 255, 0.2) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg) translateY(-100px);
    animation: cx-hero-grid-move 20s linear infinite;
}

.cx-hero-bg-starfield .cx-hero-stars, .cx-hero-bg-starfield .cx-hero-stars2 {
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 50%;
}
.cx-hero-bg-starfield .cx-hero-stars {
    box-shadow: 20vw 30vh 1px 1px #fff, 50vw 80vh 1px 1px #fff, 80vw 20vh 1px 1px #fff, 10vw 90vh 1px 1px #fff, 90vw 50vh 1px 1px #fff;
    animation: cx-hero-star-scroll 50s linear infinite;
}
.cx-hero-bg-starfield .cx-hero-stars2 {
    box-shadow: 30vw 40vh 2px 2px var(--cx-hero-primary), 70vw 60vh 2px 2px var(--cx-hero-secondary), 40vw 10vh 2px 2px #fff;
    animation: cx-hero-star-scroll 30s linear infinite;
}

.cx-hero-bg-aurora .cx-hero-aurora {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        rgba(26, 86, 255, 0.2) 0%, 
        rgba(136, 136, 160, 0.2) 50%, 
        rgba(245, 244, 240, 0.1) 100%);
    filter: blur(60px);
    background-size: 200% 200%;
    animation: cx-hero-aurora-shift 15s ease infinite;
}

/* New Backgrounds */
.cx-hero-bg-waves .cx-hero-waves {
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(
        circle at 50% 120%,
        transparent,
        transparent 40px,
        rgba(26, 86, 255, 0.1) 41px,
        rgba(26, 86, 255, 0.1) 42px
    );
    animation: cx-hero-wave-ripple 10s linear infinite;
}

.cx-hero-bg-hexagons .cx-hero-hexagons {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='103.92304845413264' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 103.92304845413264L0 86.60254037844386V51.96152422706632L30 34.64101615137754L60 51.96152422706632V86.60254037844386zM30 69.28203230275508L0 51.96152422706632V17.32050807568877L30 0L60 17.32050807568877V51.96152422706632z' fill='none' stroke='rgba(136, 136, 160, 0.1)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 60px 103.9px;
    animation: cx-hero-float 30s linear infinite;
}

.cx-hero-bg-trails .cx-hero-trails {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--cx-hero-bg) 0%, transparent 50%, var(--cx-hero-bg) 100%),
                linear-gradient(0deg, rgba(26, 86, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 20px;
    animation: cx-hero-star-scroll 10s linear infinite;
}

.cx-hero-bg-fog .cx-hero-fog {
    position: absolute;
    inset: -50%;
    background: radial-gradient(ellipse at center, rgba(26, 86, 255, 0.15) 0%, transparent 50%);
    filter: blur(80px);
    animation: cx-hero-orbit-1 20s linear infinite;
}
.cx-hero-bg-fog .cx-fog-2 {
    background: radial-gradient(ellipse at center, rgba(136, 136, 160, 0.1) 0%, transparent 50%);
    animation: cx-hero-orbit-2 25s linear infinite reverse;
}

.cx-hero-bg-binary .cx-hero-binary {
    position: absolute;
    inset: 0;
    font-family: monospace;
    font-size: 14px;
    color: rgba(26, 86, 255, 0.1);
    word-break: break-all;
    overflow: hidden;
}
.cx-hero-bg-binary::after {
    content: "01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100 ";
    /* Repeated string for effect via JS or CSS */
    display: block;
    width: 200%;
    animation: cx-hero-binary-scroll 20s linear infinite;
}

/* Layout */
.cx-hero-layout-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    padding: 40px;
    display: flex;
    flex-direction: column; /* Changed by horizontal_placement */
    gap: 60px;
    align-items: stretch;
}

.cx-hero-clock-col {
    display: flex;
    justify-content: var(--cx-clock-justify);
    align-items: var(--cx-clock-align);
    width: 100%;
    perspective: 1200px;
}

.cx-hero-content-col {
    display: flex;
    justify-content: var(--cx-content-justify);
    align-items: var(--cx-content-align);
    width: 100%;
}

.cx-hero-clock-wrapper {
    position: relative;
    width: 480px;
    height: 480px;
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
}

.cx-3d-object-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    /* This will be rotated by JS for interaction */
}

/* Animated Objects */
/* 1. Clock */
.cx-hero-clock { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cx-hero-clock-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cx-hero-primary); opacity: 0.6; box-shadow: 0 0 60px 8px rgba(26, 86, 255, 0.35); animation: cx-hero-spin 60s linear infinite; }
.cx-hero-clock-face { position: absolute; top: 30px; left: 30px; right: 30px; bottom: 30px; border-radius: 50%; background: rgba(10, 10, 15, 0.75); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.08); transform: translateZ(20px); }
.cx-hero-clock-marker { position: absolute; top: 10px; left: 50%; width: 2px; height: 12px; background: var(--cx-hero-secondary); opacity: 0.7; transform-origin: 50% 200px; }
.cx-hero-clock-marker-1 { transform: translateX(-50%) rotate(30deg); }
.cx-hero-clock-marker-2 { transform: translateX(-50%) rotate(60deg); }
.cx-hero-clock-marker-3 { transform: translateX(-50%) rotate(90deg); }
.cx-hero-clock-marker-4 { transform: translateX(-50%) rotate(120deg); }
.cx-hero-clock-marker-5 { transform: translateX(-50%) rotate(150deg); }
.cx-hero-clock-marker-6 { transform: translateX(-50%) rotate(180deg); }
.cx-hero-clock-marker-7 { transform: translateX(-50%) rotate(210deg); }
.cx-hero-clock-marker-8 { transform: translateX(-50%) rotate(240deg); }
.cx-hero-clock-marker-9 { transform: translateX(-50%) rotate(270deg); }
.cx-hero-clock-marker-10 { transform: translateX(-50%) rotate(300deg); }
.cx-hero-clock-marker-11 { transform: translateX(-50%) rotate(330deg); }
.cx-hero-clock-marker-12 { transform: translateX(-50%) rotate(360deg); }
.cx-hero-clock-hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 2px; transform: translateX(-50%) rotate(0deg); }
.cx-hero-clock-hand-hour { width: 3px; height: 130px; background: var(--cx-hero-text-primary); transform: translateZ(30px); }
.cx-hero-clock-hand-minute { width: 2px; height: 180px; background: var(--cx-hero-secondary); transform: translateZ(40px); }
.cx-hero-clock-hand-second { width: 1px; height: 200px; background: var(--cx-hero-primary); transform: translateZ(50px); }
.cx-hero-clock-wrapper:hover .cx-hero-clock-ring { box-shadow: 0 0 80px 12px rgba(26, 86, 255, 0.6); }
.cx-hero-clock-pivot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: var(--cx-hero-text-primary); border-radius: 50%; transform: translate(-50%, -50%) translateZ(60px); }

/* 2. Web Network */
.cx-obj-web { position: relative; width: 100%; height: 100%; border-radius: 50%; background: rgba(10, 10, 15, 0.75); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); transform-style: preserve-3d; }
.cx-node { position: absolute; width: 20px; height: 20px; background: var(--cx-hero-primary); border-radius: 50%; box-shadow: 0 0 20px var(--cx-hero-primary); transform: translate(-50%, -50%); animation: cx-hero-pulse 3s infinite alternate; }
.cx-node-1 { top: 20%; left: 50%; animation-delay: 0s; transform: translateZ(50px); }
.cx-node-2 { top: 50%; left: 20%; animation-delay: 0.5s; background: var(--cx-hero-secondary); box-shadow: 0 0 20px var(--cx-hero-secondary); transform: translateZ(-30px); }
.cx-node-3 { top: 50%; left: 80%; animation-delay: 1s; transform: translateZ(40px); }
.cx-node-4 { top: 80%; left: 50%; animation-delay: 1.5s; background: var(--cx-hero-secondary); box-shadow: 0 0 20px var(--cx-hero-secondary); transform: translateZ(-50px); }
.cx-node-5 { top: 50%; left: 50%; width: 30px; height: 30px; background: var(--cx-hero-text-primary); box-shadow: 0 0 30px var(--cx-hero-text-primary); transform: translateZ(80px); }
.cx-web-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transform: translateZ(0); }
.cx-web-lines line { stroke: rgba(255,255,255,0.2); stroke-width: 2; animation: cx-dash 5s linear infinite; }

/* 3. SEO Chart */
.cx-obj-seo { position: relative; width: 100%; height: 100%; border-radius: 50%; background: rgba(10, 10, 15, 0.75); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); display: flex; align-items: flex-end; justify-content: center; gap: 20px; padding: 60px; transform-style: preserve-3d; }
.cx-bar { width: 40px; background: var(--cx-hero-primary); border-radius: 4px 4px 0 0; animation: cx-grow-bar 2s ease-out forwards; transform-origin: bottom; transform: translateZ(30px); }
.cx-bar-1 { height: 30%; opacity: 0.4; }
.cx-bar-2 { height: 50%; opacity: 0.6; animation-delay: 0.2s; }
.cx-bar-3 { height: 70%; opacity: 0.8; animation-delay: 0.4s; }
.cx-bar-4 { height: 90%; opacity: 1; animation-delay: 0.6s; background: var(--cx-hero-secondary); transform: translateZ(50px); }
.cx-seo-line { position: absolute; inset: 40px; width: calc(100% - 80px); height: calc(100% - 80px); z-index: 2; transform: translateZ(60px); }
.cx-seo-line path { stroke-dasharray: 200; animation: cx-draw-line 3s ease-out forwards; }
.cx-seo-point { position: absolute; top: 25%; right: 25%; width: 16px; height: 16px; background: var(--cx-hero-text-primary); border-radius: 50%; box-shadow: 0 0 20px var(--cx-hero-text-primary); opacity: 0; animation: cx-fade-in 0.5s 2.5s forwards; transform: translateZ(80px); }

/* 4. AI Brain */
.cx-obj-ai { position: relative; width: 100%; height: 100%; border-radius: 50%; background: rgba(10, 10, 15, 0.75); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.cx-brain-core { width: 100px; height: 100px; background: var(--cx-hero-primary); border-radius: 50%; box-shadow: 0 0 50px var(--cx-hero-primary); z-index: 2; animation: cx-hero-pulse 2s infinite alternate; transform: translateZ(50px); }
.cx-brain-pulse { position: absolute; border: 2px solid var(--cx-hero-secondary); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(30px); animation: cx-ripple 3s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
.cx-pulse-1 { animation-delay: 0s; }
.cx-pulse-2 { animation-delay: 1.5s; }
.cx-brain-synapse { position: absolute; width: 40px; height: 4px; background: rgba(255,255,255,0.5); transform-origin: left center; top: 50%; left: 50%; }
.cx-synapse-1 { transform: rotate(0deg) translateX(60px) translateZ(40px); animation: cx-flash 2s infinite; }
.cx-synapse-2 { transform: rotate(120deg) translateX(60px) translateZ(10px); animation: cx-flash 2s infinite 0.6s; }
.cx-synapse-3 { transform: rotate(240deg) translateX(60px) translateZ(-20px); animation: cx-flash 2s infinite 1.2s; }

/* 5. Automation Gears */
.cx-obj-auto { position: relative; width: 100%; height: 100%; border-radius: 50%; background: rgba(10, 10, 15, 0.75); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); transform-style: preserve-3d; }
.cx-gear { position: absolute; background: transparent; border: 10px dashed var(--cx-hero-primary); border-radius: 50%; box-shadow: inset 0 0 20px rgba(26,86,255,0.5); }
.cx-gear::after { content: ''; position: absolute; inset: 20%; background: rgba(10,10,15,0.9); border-radius: 50%; border: 4px solid var(--cx-hero-secondary); }
.cx-gear-main { width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(20px); animation: cx-hero-spin 10s linear infinite; }
.cx-gear-small-1 { width: 120px; height: 120px; top: 25%; left: 25%; border-color: var(--cx-hero-secondary); transform: translate(-50%, -50%) translateZ(40px); animation: cx-hero-spin 6s linear infinite reverse; }
.cx-gear-small-2 { width: 100px; height: 100px; bottom: 25%; right: 25%; border-color: rgba(26, 86, 255, 0.5); transform: translate(50%, 50%) translateZ(60px); animation: cx-hero-spin 5s linear infinite reverse; }

/* 6. 3D Cube */
.cx-obj-cube { position: relative; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; animation: cx-hero-rotate-3d 15s linear infinite; }
.cx-cube-face { position: absolute; width: 200px; height: 200px; border: 2px solid var(--cx-hero-primary); background: rgba(26, 86, 255, 0.1); backdrop-filter: blur(5px); box-shadow: inset 0 0 20px rgba(26, 86, 255, 0.5); }
.cx-cube-front  { transform: translateZ(100px); }
.cx-cube-back   { transform: rotateY(180deg) translateZ(100px); border-color: var(--cx-hero-secondary); }
.cx-cube-right  { transform: rotateY(90deg) translateZ(100px); }
.cx-cube-left   { transform: rotateY(-90deg) translateZ(100px); border-color: var(--cx-hero-secondary); }
.cx-cube-top    { transform: rotateX(90deg) translateZ(100px); }
.cx-cube-bottom { transform: rotateX(-90deg) translateZ(100px); border-color: var(--cx-hero-secondary); }

/* 7. 3D Pyramid */
.cx-obj-pyramid { position: relative; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; animation: cx-hero-rotate-3d 10s linear infinite reverse; }
.cx-pyramid-face { position: absolute; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid rgba(26, 86, 255, 0.2); transform-origin: bottom; }
.cx-pyramid-front  { transform: translateZ(100px) rotateX(30deg); border-bottom-color: rgba(26, 86, 255, 0.3); }
.cx-pyramid-back   { transform: translateZ(-100px) rotateX(-30deg); border-bottom-color: rgba(136, 136, 160, 0.3); }
.cx-pyramid-right  { transform: rotateY(90deg) translateZ(100px) rotateX(30deg); border-bottom-color: rgba(26, 86, 255, 0.2); }
.cx-pyramid-left   { transform: rotateY(-90deg) translateZ(100px) rotateX(30deg); border-bottom-color: rgba(136, 136, 160, 0.2); }
.cx-pyramid-bottom { width: 200px; height: 200px; background: rgba(10, 10, 15, 0.8); border: 2px solid var(--cx-hero-primary); transform: rotateX(90deg) translateZ(-100px); }

/* 8. Data Stream */
.cx-obj-data { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cx-data-ring { position: absolute; top: 50%; left: 50%; border: 2px dashed var(--cx-hero-primary); border-radius: 50%; transform-style: preserve-3d; }
.cx-data-ring-1 { width: 300px; height: 300px; transform: translate(-50%, -50%) rotateX(60deg) rotateY(20deg); animation: cx-hero-spin 8s linear infinite; }
.cx-data-ring-2 { width: 200px; height: 200px; border-color: var(--cx-hero-secondary); border-style: dotted; transform: translate(-50%, -50%) rotateX(40deg) rotateY(-30deg); animation: cx-hero-spin 5s linear infinite reverse; }
.cx-data-ring-3 { width: 400px; height: 400px; border-color: rgba(26, 86, 255, 0.5); transform: translate(-50%, -50%) rotateX(80deg) rotateY(10deg); animation: cx-hero-spin 12s linear infinite; }
.cx-data-core { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background: var(--cx-hero-text-primary); border-radius: 50%; box-shadow: 0 0 40px var(--cx-hero-text-primary); transform: translate(-50%, -50%); animation: cx-hero-pulse 2s infinite alternate; }

/* 9. Solar System */
.cx-obj-solar { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cx-sun { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: var(--cx-hero-primary); border-radius: 50%; box-shadow: 0 0 60px var(--cx-hero-primary); transform: translate(-50%, -50%); }
.cx-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(70deg); }
.cx-orbit-1 { width: 160px; height: 160px; animation: cx-hero-spin 4s linear infinite; }
.cx-orbit-2 { width: 280px; height: 280px; animation: cx-hero-spin 8s linear infinite; }
.cx-orbit-3 { width: 420px; height: 420px; animation: cx-hero-spin 14s linear infinite; }
.cx-planet { position: absolute; top: 0; left: 50%; border-radius: 50%; transform: translate(-50%, -50%) rotateX(-70deg); /* Counter-rotate to stay upright */ }
.cx-planet-1 { width: 16px; height: 16px; background: var(--cx-hero-secondary); }
.cx-planet-2 { width: 24px; height: 24px; background: var(--cx-hero-text-primary); box-shadow: 0 0 10px var(--cx-hero-text-primary); }
.cx-planet-3 { width: 20px; height: 20px; background: rgba(26, 86, 255, 0.8); }

/* 10. Geometric Sphere */
.cx-obj-sphere { position: relative; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; animation: cx-hero-rotate-3d 12s linear infinite; }
.cx-sphere-circle { position: absolute; inset: 0; border: 2px solid var(--cx-hero-primary); border-radius: 50%; opacity: 0.5; }
.cx-sphere-c1 { transform: rotateY(0deg); }
.cx-sphere-c2 { transform: rotateY(30deg); border-color: var(--cx-hero-secondary); }
.cx-sphere-c3 { transform: rotateY(60deg); }
.cx-sphere-c4 { transform: rotateY(90deg); border-color: var(--cx-hero-secondary); }
.cx-sphere-c5 { transform: rotateY(120deg); }
.cx-sphere-c6 { transform: rotateY(150deg); border-color: var(--cx-hero-secondary); }


.cx-hero-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform-style: preserve-3d; pointer-events: none; }
.cx-hero-ring-1 { width: 600px; height: 600px; border: 1px solid var(--cx-hero-primary); opacity: 0.25; animation: cx-hero-orbit-1 8s linear infinite; }
.cx-hero-ring-2 { width: 700px; height: 700px; border: 1px solid var(--cx-hero-secondary); opacity: 0.15; animation: cx-hero-orbit-2 14s linear infinite reverse; }
.cx-hero-ring-3 { width: 550px; height: 550px; border: 1px dashed rgba(26, 86, 255, 0.5); opacity: 0.2; animation: cx-hero-orbit-3 11s linear infinite; }

.cx-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: inherit;
}

.cx-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cx-hero-secondary); opacity: 0.8; margin-bottom: 16px; }
.cx-hero-headline { font-size: 64px; font-weight: 700; color: var(--cx-hero-text-primary); line-height: 1.1; margin: 0 0 24px; background: linear-gradient(180deg, var(--cx-hero-text-primary) 0%, var(--cx-hero-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.cx-hero-subheadline { font-size: 18px; color: rgba(245, 244, 240, 0.65); max-width: 540px; margin: 0 0 40px 0; line-height: 1.6; }

.cx-hero-content-col[style*="center"] .cx-hero-subheadline { margin-left: auto; margin-right: auto; }
.cx-hero-content-col[style*="flex-end"] .cx-hero-subheadline { margin-left: auto; }

.cx-hero-actions { display: flex; gap: 16px; justify-content: inherit; margin-bottom: 40px; }
.cx-hero-btn { display: inline-block; padding: 14px 32px; border-radius: 8px; font-size: 15px; text-decoration: none; transition: all 0.25s ease; cursor: pointer; }
.cx-hero-btn-primary { background: var(--cx-hero-primary); color: #ffffff; font-weight: 600; box-shadow: 0 0 24px rgba(26, 86, 255, 0.5); }
.cx-hero-btn-primary:hover { filter: brightness(1.1); transform: scale(1.03); color: #ffffff; }
.cx-hero-btn-secondary { background: transparent; border: 1.5px solid rgba(245, 244, 240, 0.3); color: rgba(245, 244, 240, 0.8); font-weight: 500; }
.cx-hero-btn-secondary:hover { border-color: var(--cx-hero-primary); color: #ffffff; background: rgba(26, 86, 255, 0.1); }

.cx-hero-trust-bar { display: flex; justify-content: inherit; align-items: center; gap: 24px; }
.cx-hero-stat { display: flex; flex-direction: column; }
.cx-hero-stat-val { font-size: 20px; font-weight: 700; color: var(--cx-hero-text-primary); }
.cx-hero-stat-label { font-size: 12px; color: rgba(245, 244, 240, 0.55); }
.cx-hero-stat-divider { width: 1px; height: 30px; background: rgba(245, 244, 240, 0.15); }

.cx-hero-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.cx-hero-scroll-dot { width: 6px; height: 6px; background: var(--cx-hero-text-primary); border-radius: 50%; animation: cx-hero-bounce 2s infinite; }
.cx-hero-scroll-label { font-size: 11px; opacity: 0.5; color: var(--cx-hero-text-primary); text-transform: uppercase; letter-spacing: 0.1em; }

/* Animations */
@keyframes cx-hero-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes cx-hero-float { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } }
@keyframes cx-hero-orbit-1 { 0% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); } }
@keyframes cx-hero-orbit-2 { 0% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(45deg); } 100% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(-315deg); } }
@keyframes cx-hero-orbit-3 { 0% { transform: translate(-50%, -50%) rotateX(80deg) rotateZ(-30deg); } 100% { transform: translate(-50%, -50%) rotateX(80deg) rotateZ(330deg); } }
@keyframes cx-hero-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@keyframes cx-hero-pulse { 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }
@keyframes cx-hero-breathe { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }
@keyframes cx-hero-grid-move { 0% { background-position: 0 0; } 100% { background-position: 0 50px; } }
@keyframes cx-hero-star-scroll { from { transform: translateY(0); } to { transform: translateY(-100vh); } }
@keyframes cx-hero-aurora-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes cx-dash { to { stroke-dashoffset: -20; } }
@keyframes cx-grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cx-draw-line { to { stroke-dashoffset: 0; } }
@keyframes cx-fade-in { to { opacity: 1; } }
@keyframes cx-ripple { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; } }
@keyframes cx-flash { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; background: var(--cx-hero-secondary); } }
@keyframes cx-hero-rotate-3d { 0% { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg) rotateZ(180deg); } }
@keyframes cx-hero-wave-ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes cx-hero-binary-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* Responsive */
@media (max-width: 1024px) {
    .cx-hero-layout-wrapper { flex-direction: column !important; align-items: center; }
    .cx-hero-clock-col, .cx-hero-content-col { width: 100% !important; justify-content: center; text-align: center; }
    .cx-hero-content-col[style*="left"] .cx-hero-subheadline, 
    .cx-hero-content-col[style*="right"] .cx-hero-subheadline { margin-left: auto; margin-right: auto; }
    .cx-hero-clock-wrapper { transform: scale(0.8); }
    .cx-hero-ring { transform: translate(-50%, -50%) scale(0.8); }
    .cx-hero-headline { font-size: 48px; }
}

@media (max-width: 768px) {
    .cx-hero-clock-wrapper { width: 320px; height: 320px; }
    .cx-hero-clock-face { top: 20px; left: 20px; right: 20px; bottom: 20px; }
    .cx-hero-ring { display: none; }
    .cx-hero-headline { font-size: 36px; }
    .cx-hero-actions { flex-direction: column; align-items: stretch; padding: 0 20px; }
    .cx-hero-trust-bar { flex-direction: column; gap: 12px; }
    .cx-hero-stat-divider { width: 40px; height: 1px; }
}