.elementor-794 .elementor-element.elementor-element-1246515{--display:flex;--min-height:69vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--background-transition:0.3s;--overlay-opacity:0.62;}.elementor-794 .elementor-element.elementor-element-1246515:not(.elementor-motion-effects-element-type-background), .elementor-794 .elementor-element.elementor-element-1246515 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#03164B;background-image:url("https://cstechnologiess.com/wp-content/uploads/2025/08/pexels-esan-2085998-scaled.jpg");background-size:cover;}.elementor-794 .elementor-element.elementor-element-1246515::before, .elementor-794 .elementor-element.elementor-element-1246515 > .elementor-background-video-container::before, .elementor-794 .elementor-element.elementor-element-1246515 > .e-con-inner > .elementor-background-video-container::before, .elementor-794 .elementor-element.elementor-element-1246515 > .elementor-background-slideshow::before, .elementor-794 .elementor-element.elementor-element-1246515 > .e-con-inner > .elementor-background-slideshow::before, .elementor-794 .elementor-element.elementor-element-1246515 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#05060F;--background-overlay:'';}.elementor-794 .elementor-element.elementor-element-1246515::before{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 10px ) hue-rotate( 0deg );}.elementor-794 .elementor-element.elementor-element-1246515, .elementor-794 .elementor-element.elementor-element-1246515::before{--border-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-1246515 > .elementor-shape-bottom .elementor-shape-fill, .elementor-794 .elementor-element.elementor-element-1246515 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#4E5E87;}.elementor-794 .elementor-element.elementor-element-1246515 > .elementor-shape-bottom svg, .elementor-794 .elementor-element.elementor-element-1246515 > .e-con-inner > .elementor-shape-bottom svg{height:80px;}.elementor-794 .elementor-element.elementor-element-087a0ff.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}body:not(.rtl) .elementor-794 .elementor-element.elementor-element-087a0ff{left:586.948px;}body.rtl .elementor-794 .elementor-element.elementor-element-087a0ff{right:586.948px;}.elementor-794 .elementor-element.elementor-element-087a0ff{top:75.99px;}.elementor-794 .elementor-element.elementor-element-087a0ff > .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-794 .elementor-element.elementor-element-2171ca0.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}body:not(.rtl) .elementor-794 .elementor-element.elementor-element-2171ca0{left:1032.962px;}body.rtl .elementor-794 .elementor-element.elementor-element-2171ca0{right:1032.962px;}.elementor-794 .elementor-element.elementor-element-2171ca0{top:298.993px;}.elementor-794 .elementor-element.elementor-element-2171ca0 > .elementor-widget-container{--e-transform-origin-x:right;--e-transform-origin-y:bottom;}.elementor-794 .elementor-element.elementor-element-2171ca0 img{width:63%;max-width:100%;}body:not(.rtl) .elementor-794 .elementor-element.elementor-element-9678e44{left:609.969px;}body.rtl .elementor-794 .elementor-element.elementor-element-9678e44{right:609.969px;}.elementor-794 .elementor-element.elementor-element-9678e44{top:375.969px;text-align:center;}.elementor-794 .elementor-element.elementor-element-9678e44 > .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-794 .elementor-element.elementor-element-9678e44 .elementor-heading-title{color:#FFFFFF;font-family:"Helvetica", Sans-serif;font-size:15px;font-weight:100;text-transform:uppercase;letter-spacing:10px;}.elementor-794 .elementor-element.elementor-element-588819b{--display:flex;--min-height:1440px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--background-transition:0.3s;--overlay-opacity:0.62;}.elementor-794 .elementor-element.elementor-element-588819b:not(.elementor-motion-effects-element-type-background), .elementor-794 .elementor-element.elementor-element-588819b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://cstechnologiess.com/wp-content/uploads/2025/08/pexels-esan-2085998-scaled.jpg");background-position:center center;background-size:cover;}.elementor-794 .elementor-element.elementor-element-588819b::before, .elementor-794 .elementor-element.elementor-element-588819b > .elementor-background-video-container::before, .elementor-794 .elementor-element.elementor-element-588819b > .e-con-inner > .elementor-background-video-container::before, .elementor-794 .elementor-element.elementor-element-588819b > .elementor-background-slideshow::before, .elementor-794 .elementor-element.elementor-element-588819b > .e-con-inner > .elementor-background-slideshow::before, .elementor-794 .elementor-element.elementor-element-588819b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-794 .elementor-element.elementor-element-588819b::before{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 10px ) hue-rotate( 0deg );}.elementor-794 .elementor-element.elementor-element-588819b, .elementor-794 .elementor-element.elementor-element-588819b::before{--border-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-588819b > .elementor-shape-top .elementor-shape-fill, .elementor-794 .elementor-element.elementor-element-588819b > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#4e5e87;}.elementor-794 .elementor-element.elementor-element-1dfb44a > .elementor-widget-container{--e-transform-flipX:-1;--e-transform-origin-x:right;--e-transform-origin-y:bottom;}.elementor-794 .elementor-element.elementor-element-1dfb44a.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}body:not(.rtl) .elementor-794 .elementor-element.elementor-element-1dfb44a{left:-1427.031px;}body.rtl .elementor-794 .elementor-element.elementor-element-1dfb44a{right:-1427.031px;}.elementor-794 .elementor-element.elementor-element-1dfb44a{top:179.953px;}.elementor-794 .elementor-element.elementor-element-1dfb44a img{width:63%;max-width:100%;}.elementor-794 .elementor-element.elementor-element-decad3f > .elementor-widget-container{margin:50px 50px 50px 50px;}.elementor-794 .elementor-element.elementor-element-decad3f.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-794 .elementor-element.elementor-element-decad3f .elementor-heading-title{color:#FFFFFF;font-family:"Helvetica", Sans-serif;font-size:99px;font-weight:100;text-transform:uppercase;font-style:normal;text-shadow:24px 0px 100px rgba(0, 0, 0, 0.98);}.elementor-794 .elementor-element.elementor-element-f958080{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-f958080:not(.elementor-motion-effects-element-type-background), .elementor-794 .elementor-element.elementor-element-f958080 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-794 .elementor-element.elementor-element-f958080, .elementor-794 .elementor-element.elementor-element-f958080::before{--border-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-25d378e{--display:flex;--min-height:100px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-25d378e:not(.elementor-motion-effects-element-type-background), .elementor-794 .elementor-element.elementor-element-25d378e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-794 .elementor-element.elementor-element-25d378e, .elementor-794 .elementor-element.elementor-element-25d378e::before{--border-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-42e4fe3{--display:flex;--overflow:hidden;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-95d637e > .elementor-widget-container{margin:0% -200% 0% -200%;}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(26px/2);}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(26px/2);}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(26px/2);margin-left:calc(26px/2);}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-26px/2);margin-left:calc(-26px/2);}body.rtl .elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-26px/2);}body:not(.rtl) .elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-26px/2);}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-794 .elementor-element.elementor-element-95d637e{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-icon{padding-right:33px;}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-item > a{font-family:"Inter Tight", Sans-serif;font-size:45px;font-weight:400;}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-794 .elementor-element.elementor-element-fded6a7{--display:flex;--min-height:100px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-fded6a7:not(.elementor-motion-effects-element-type-background), .elementor-794 .elementor-element.elementor-element-fded6a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-794 .elementor-element.elementor-element-fded6a7, .elementor-794 .elementor-element.elementor-element-fded6a7::before{--border-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-2af3e69{--display:flex;--overflow:hidden;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-e7a5d06 > .elementor-widget-container{margin:0% -200% 0% -200%;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(26px/2);}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(26px/2);}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(26px/2);margin-left:calc(26px/2);}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-26px/2);margin-left:calc(-26px/2);}body.rtl .elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-26px/2);}body:not(.rtl) .elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-26px/2);}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-794 .elementor-element.elementor-element-e7a5d06{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-icon{padding-right:33px;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-item > a{font-family:"Inter Tight", Sans-serif;font-size:45px;font-weight:400;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-794 .elementor-element.elementor-element-5e1c22c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-83f26c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-78dc254{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-794 .elementor-element.elementor-element-78dc254.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-794 .elementor-element.elementor-element-c8f1da2 > .elementor-widget-container{margin:50px 50px 50px 50px;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-794 .elementor-element.elementor-element-c8f1da2.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-794 .elementor-element.elementor-element-c8f1da2 .elementor-heading-title{color:#2C2C2C;font-family:"Helvetica", Sans-serif;font-size:52px;font-weight:100;text-transform:uppercase;font-style:normal;}@media(min-width:768px){.elementor-794 .elementor-element.elementor-element-83f26c9{--width:50%;}.elementor-794 .elementor-element.elementor-element-78dc254{--width:50.789%;}}@media(max-width:1024px){.elementor-794 .elementor-element.elementor-element-25d378e{--min-height:100px;}.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-item > a{font-size:25px;}.elementor-794 .elementor-element.elementor-element-fded6a7{--min-height:100px;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-item > a{font-size:25px;}}@media(max-width:767px){.elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-794 .elementor-element.elementor-element-95d637e .elementor-icon-list-item > a{font-size:8px;}.elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-794 .elementor-element.elementor-element-e7a5d06 .elementor-icon-list-item > a{font-size:8px;}}/* Start custom CSS for container, class: .elementor-element-1246515 *//* ==========================
Hero Section — CSS Only
(Full-screen, animated gradient/video fallback,
particle layer, 3D object holder, text reveal,
floating micro-animations)
Drop this into your stylesheet and add minimal HTML:
========================== */
/* --- Variables --- */
:root{
--bg-color-1: #0b1020;
--bg-color-2: #0a1b2e;
--accent-a: #6ee7b7; /* mint */
--accent-b: #7c5cff; /* purple */
--accent-c: #ff6b6b; /* coral */
--glass: rgba(255,255,255,0.04);
--max-width: 1200px;
}
/* --- Reset for hero area --- */
.hero{
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
display: grid;
place-items: center;
color: white;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
isolation: isolate; /* keep blend modes contained */
background: linear-gradient(180deg, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
}
/* --- Animated gradient (behind video fallback) --- */
.hero::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(1200px 600px at 10% 20%, rgba(124,92,255,0.12), transparent 8%),
radial-gradient(1000px 500px at 90% 80%, rgba(110,231,183,0.08), transparent 8%),
linear-gradient(90deg, rgba(10,12,20,0.55), rgba(10,20,30,0.65));
mix-blend-mode: screen;
animation: bgShift 16s linear infinite;
filter: blur(18px) saturate(120%);
}
@keyframes bgShift{
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-4%) rotate(2deg); }
100% { transform: translateY(0) rotate(0deg); }
}
/* --- Optional video element styling (place video inside .hero-video) --- */
.hero-video{
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
pointer-events: none;
mix-blend-mode: overlay;
transform: scale(1.02);
}
/* --- Soft particle system using many tiny pseudo elements ---
Works without JS (lightweight). For heavier particle control use a canvas/JS. */
.particles{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mask-image: radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,0.85) 55%, transparent 100%);
}
.particles::before,
.particles::after{
content: "";
position: absolute;
width: 200%;
height: 200%;
left: -50%;
top: -50%;
background-image:
radial-gradient(circle at 12% 20%, rgba(255,255,255,0.06) 0 2px, transparent 3px),
radial-gradient(circle at 40% 10%, rgba(255,255,255,0.04) 0 1.5px, transparent 2.5px),
radial-gradient(circle at 80% 30%, rgba(255,255,255,0.03) 0 2px, transparent 4px),
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.02) 0 3px, transparent 5px);
background-repeat: repeat;
transform-origin: center;
animation: particlesDrift 30s linear infinite;
opacity: 0.9;
filter: blur(1px);
}
.particles::after{
animation-duration: 46s;
opacity: 0.6;
transform: scale(1.2);
}
@keyframes particlesDrift{
0% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(-6%,4%,0) rotate(8deg); }
100% { transform: translate3d(0,0,0) rotate(0deg); }
}
/* --- Main content wrapper (centered) --- */
.hero-inner{
position: relative;
z-index: 5;
max-width: var(--max-width);
width: 100%;
padding: 6vh 4vw;
display: grid;
grid-template-columns: 1fr 520px; /* left text, right 3D object */
gap: 32px;
align-items: center;
}
/* Responsive: collapse on smaller screens */
@media (max-width: 980px){
.hero-inner{ grid-template-columns: 1fr; text-align: center; gap: 18px; padding-top: 12vh; }
}
/* --- Headline with text reveal --- */
.hero-title{
font-size: clamp(28px, 6vw, 56px);
line-height: 1.02;
letter-spacing: -0.02em;
font-weight: 800;
margin: 0 0 18px 0;
position: relative;
display: inline-block;
overflow: hidden;
-webkit-mask-image: linear-gradient(#000, transparent);
}
.hero-title .reveal{
display: inline-block;
transform: translateY(26%);
opacity: 0;
animation: revealUp 1s cubic-bezier(.2,.9,.23,1) 0.5s forwards;
}
@keyframes revealUp{
to { transform: translateY(0); opacity: 1; }
}
/* glowing gradient through text */
.hero-title .glow{
background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 8px 40px rgba(124,92,255,0.18));
animation: hueShift 6s linear infinite;
}
@keyframes hueShift{
0%{ filter: drop-shadow(0 8px 40px rgba(124,92,255,0.18)); }
50%{ filter: drop-shadow(0 10px 60px rgba(110,231,183,0.14)); }
100%{ filter: drop-shadow(0 8px 40px rgba(124,92,255,0.18)); }
}
/* --- Subheadline / paragraph --- */
.hero-sub{
font-size: clamp(14px, 1.6vw, 18px);
color: rgba(255,255,255,0.85);
max-width: 60ch;
margin-bottom: 24px;
animation: fadeIn .9s ease .9s both;
}
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }
/* --- CTA / Buttons --- */
.hero-cta{
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.btn{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 14px;
font-weight: 700;
cursor: pointer;
border: none;
background: linear-gradient(90deg, rgba(124,92,255,0.14), rgba(110,231,183,0.06));
backdrop-filter: blur(6px);
box-shadow: 0 6px 30px rgba(2,6,23,0.45);
color: white;
transition: transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform: translateY(1px) }
.btn.primary{
background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
color: #031018;
box-shadow: 0 18px 50px rgba(124,92,255,0.18);
}
/* --- 3D Object / Lottie / Spline placeholder --- */
.object-wrap{
position: relative;
display: grid;
place-items: center;
width: 100%;
justify-self: center;
align-self: center;
min-height: 380px;
}
.object-card{
position/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-588819b *//* ==========================
Hero Section — CSS Only
(Full-screen, animated gradient/video fallback,
particle layer, 3D object holder, text reveal,
floating micro-animations)
Drop this into your stylesheet and add minimal HTML:
========================== */
/* --- Variables --- */
:root{
--bg-color-1: #0b1020;
--bg-color-2: #0a1b2e;
--accent-a: #6ee7b7; /* mint */
--accent-b: #7c5cff; /* purple */
--accent-c: #ff6b6b; /* coral */
--glass: rgba(255,255,255,0.04);
--max-width: 1200px;
}
/* --- Reset for hero area --- */
.hero{
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
display: grid;
place-items: center;
color: white;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
isolation: isolate; /* keep blend modes contained */
background: linear-gradient(180deg, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
}
/* --- Animated gradient (behind video fallback) --- */
.hero::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(1200px 600px at 10% 20%, rgba(124,92,255,0.12), transparent 8%),
radial-gradient(1000px 500px at 90% 80%, rgba(110,231,183,0.08), transparent 8%),
linear-gradient(90deg, rgba(10,12,20,0.55), rgba(10,20,30,0.65));
mix-blend-mode: screen;
animation: bgShift 16s linear infinite;
filter: blur(18px) saturate(120%);
}
@keyframes bgShift{
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-4%) rotate(2deg); }
100% { transform: translateY(0) rotate(0deg); }
}
/* --- Optional video element styling (place video inside .hero-video) --- */
.hero-video{
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
pointer-events: none;
mix-blend-mode: overlay;
transform: scale(1.02);
}
/* --- Soft particle system using many tiny pseudo elements ---
Works without JS (lightweight). For heavier particle control use a canvas/JS. */
.particles{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mask-image: radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,0.85) 55%, transparent 100%);
}
.particles::before,
.particles::after{
content: "";
position: absolute;
width: 200%;
height: 200%;
left: -50%;
top: -50%;
background-image:
radial-gradient(circle at 12% 20%, rgba(255,255,255,0.06) 0 2px, transparent 3px),
radial-gradient(circle at 40% 10%, rgba(255,255,255,0.04) 0 1.5px, transparent 2.5px),
radial-gradient(circle at 80% 30%, rgba(255,255,255,0.03) 0 2px, transparent 4px),
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.02) 0 3px, transparent 5px);
background-repeat: repeat;
transform-origin: center;
animation: particlesDrift 30s linear infinite;
opacity: 0.9;
filter: blur(1px);
}
.particles::after{
animation-duration: 46s;
opacity: 0.6;
transform: scale(1.2);
}
@keyframes particlesDrift{
0% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(-6%,4%,0) rotate(8deg); }
100% { transform: translate3d(0,0,0) rotate(0deg); }
}
/* --- Main content wrapper (centered) --- */
.hero-inner{
position: relative;
z-index: 5;
max-width: var(--max-width);
width: 100%;
padding: 6vh 4vw;
display: grid;
grid-template-columns: 1fr 520px; /* left text, right 3D object */
gap: 32px;
align-items: center;
}
/* Responsive: collapse on smaller screens */
@media (max-width: 980px){
.hero-inner{ grid-template-columns: 1fr; text-align: center; gap: 18px; padding-top: 12vh; }
}
/* --- Headline with text reveal --- */
.hero-title{
font-size: clamp(28px, 6vw, 56px);
line-height: 1.02;
letter-spacing: -0.02em;
font-weight: 800;
margin: 0 0 18px 0;
position: relative;
display: inline-block;
overflow: hidden;
-webkit-mask-image: linear-gradient(#000, transparent);
}
.hero-title .reveal{
display: inline-block;
transform: translateY(26%);
opacity: 0;
animation: revealUp 1s cubic-bezier(.2,.9,.23,1) 0.5s forwards;
}
@keyframes revealUp{
to { transform: translateY(0); opacity: 1; }
}
/* glowing gradient through text */
.hero-title .glow{
background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 8px 40px rgba(124,92,255,0.18));
animation: hueShift 6s linear infinite;
}
@keyframes hueShift{
0%{ filter: drop-shadow(0 8px 40px rgba(124,92,255,0.18)); }
50%{ filter: drop-shadow(0 10px 60px rgba(110,231,183,0.14)); }
100%{ filter: drop-shadow(0 8px 40px rgba(124,92,255,0.18)); }
}
/* --- Subheadline / paragraph --- */
.hero-sub{
font-size: clamp(14px, 1.6vw, 18px);
color: rgba(255,255,255,0.85);
max-width: 60ch;
margin-bottom: 24px;
animation: fadeIn .9s ease .9s both;
}
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }
/* --- CTA / Buttons --- */
.hero-cta{
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.btn{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 14px;
font-weight: 700;
cursor: pointer;
border: none;
background: linear-gradient(90deg, rgba(124,92,255,0.14), rgba(110,231,183,0.06));
backdrop-filter: blur(6px);
box-shadow: 0 6px 30px rgba(2,6,23,0.45);
color: white;
transition: transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform: translateY(1px) }
.btn.primary{
background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
color: #031018;
box-shadow: 0 18px 50px rgba(124,92,255,0.18);
}
/* --- 3D Object / Lottie / Spline placeholder --- */
.object-wrap{
position: relative;
display: grid;
place-items: center;
width: 100%;
justify-self: center;
align-self: center;
min-height: 380px;
}
.object-card{
position/* End custom CSS */