/* Start custom CSS for html, class: .elementor-element-c161156 *//* ====================================
CONTENT COMMAND HERO
==================================== */
.content-command-hero{
background:#030c15;
padding:140px 7%;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
position:relative;
}
.command-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
width:100%;
}
/* TAG */
.command-tag{
display:inline-block;
padding:12px 22px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
/* TITLE */
.command-title{
display:flex;
flex-direction:column;
font-size:82px;
font-weight:800;
line-height:.92;
margin-bottom:25px;
}
.command-title span{
color:white;
}
.gradient-text{
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* DESC */
.command-desc{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
max-width:650px;
margin-bottom:40px;
}
/* BUTTONS */
.command-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.command-btn{
padding:18px 34px;
border-radius:60px;
font-weight:700;
text-decoration:none;
transition:.4s;
}
.primary-btn{
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
color:#fff !important;
}
.secondary-btn{
border:1px solid rgba(255,255,255,.15);
color:#fff !important;
}
.command-btn:hover{
transform:translateY(-5px);
}
/* VISUAL */
.content-visual{
position:relative;
height:600px;
display:flex;
align-items:center;
justify-content:center;
}
/* CORE */
.content-core{
width:260px;
height:260px;
border-radius:50%;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(20px);
position:relative;
z-index:5;
}
/* WORDS */
.content-word-slider{
position:relative;
width:100%;
height:100px;
display:flex;
align-items:center;
justify-content:center;
}
.content-word-slider span{
position:absolute;
font-size:30px;
font-weight:800;
opacity:0;
color:white;
text-align:center;
animation:contentWords 15s infinite;
}
.content-word-slider span:nth-child(1){
animation-delay:0s;
}
.content-word-slider span:nth-child(2){
animation-delay:3s;
}
.content-word-slider span:nth-child(3){
animation-delay:6s;
}
.content-word-slider span:nth-child(4){
animation-delay:9s;
}
.content-word-slider span:nth-child(5){
animation-delay:12s;
}
/* ORBITS */
.orbit{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(255,86,86,.12);
}
.orbit1{
width:320px;
height:320px;
animation:rotate 12s linear infinite;
}
.orbit2{
width:420px;
height:420px;
animation:rotateReverse 18s linear infinite;
}
.orbit3{
width:520px;
height:520px;
animation:rotate 25s linear infinite;
}
/* ANIMATION */
@keyframes contentWords{
0%{
opacity:0;
transform:translateY(30px);
}
8%{
opacity:1;
transform:translateY(0);
}
20%{
opacity:1;
}
25%{
opacity:0;
transform:translateY(-30px);
}
100%{
opacity:0;
}
}
@keyframes rotate{
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
@keyframes rotateReverse{
100%{
transform:translate(-50%,-50%) rotate(-360deg);
}
}
/* TABLET */
@media(max-width:991px){
.command-grid{
grid-template-columns:1fr;
gap:60px;
}
.command-title{
font-size:56px;
text-align:center;
}
.command-desc{
text-align:center;
margin:auto;
}
.command-buttons{
justify-content:center;
}
}
/* MOBILE */
@media(max-width:576px){
.content-command-hero{
padding:90px 20px;
}
.command-title{
font-size:42px;
}
.command-desc{
font-size:16px;
}
.command-buttons{
flex-direction:column;
}
.command-btn{
width:100%;
text-align:center;
}
.content-visual{
height:320px;
}
.content-core{
width:180px;
height:180px;
}
.content-word-slider span{
font-size:20px;
}
.orbit2,
.orbit3{
display:none;
}
.orbit1{
width:240px;
height:240px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2bd5d6c */.attention-factory{
padding:160px 7%;
background:#04111d;
position:relative;
overflow:hidden;
}
.factory-header{
max-width:850px;
margin:auto;
text-align:center;
margin-bottom:120px;
}
.factory-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
.factory-header h2{
font-size:72px;
line-height:.95;
color:white;
margin-bottom:25px;
}
.factory-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
}
/* TRACK */
.factory-track{
position:relative;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;
max-width:1400px;
margin:auto;
}
.track-line{
position:absolute;
left:0;
right:0;
top:55px;
height:2px;
background:rgba(255,255,255,.08);
}
.content-pulse{
position:absolute;
left:0;
top:45px;
width:22px;
height:22px;
border-radius:50%;
background:#ff5656;
box-shadow:
0 0 30px #ff5656;
z-index:10;
animation:pulseMove 8s linear infinite;
}
/* STAGES */
.factory-stage{
position:relative;
text-align:center;
padding-top:90px;
}
.stage-icon{
width:70px;
height:70px;
margin:auto;
margin-bottom:25px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
backdrop-filter:blur(15px);
position:relative;
z-index:2;
}
.factory-stage h3{
font-size:24px;
color:white;
margin-bottom:12px;
}
.factory-stage p{
font-size:15px;
line-height:1.8;
color:#cfd8e3;
max-width:220px;
margin:auto;
}
/* ANIMATION */
@keyframes pulseMove{
100%{
left:100%;
transform:translateX(-100%);
}
}
/* TABLET */
@media(max-width:991px){
.factory-header h2{
font-size:54px;
}
.factory-track{
grid-template-columns:1fr;
gap:40px;
}
.track-line,
.content-pulse{
display:none;
}
.factory-stage{
padding-top:0;
}
}
/* MOBILE */
@media(max-width:576px){
.attention-factory{
padding:90px 20px;
}
.factory-header h2{
font-size:40px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-203a149 */.content-ecosystem{
padding:160px 7%;
background:#030c15;
position:relative;
overflow:hidden;
}
.ecosystem-header{
max-width:900px;
margin:auto;
text-align:center;
margin-bottom:120px;
}
.ecosystem-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
.ecosystem-header h2{
font-size:72px;
line-height:.95;
color:white;
margin-bottom:25px;
}
.ecosystem-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
}
/* NETWORK */
.ecosystem-network{
position:relative;
height:850px;
max-width:1100px;
margin:auto;
}
/* CORE */
.ecosystem-core{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:240px;
height:240px;
border-radius:50%;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
z-index:10;
backdrop-filter:blur(20px);
}
.core-text{
font-size:26px;
font-weight:800;
color:white;
text-align:center;
}
.core-pulse{
position:absolute;
inset:-20px;
border-radius:50%;
border:1px solid rgba(255,86,86,.2);
animation:pulseHub 4s infinite;
}
/* NODES */
.content-node{
position:absolute;
padding:18px 24px;
border-radius:60px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:white;
font-weight:700;
backdrop-filter:blur(15px);
animation:nodeFloat 5s ease-in-out infinite;
}
.node1{top:0;left:50%;transform:translateX(-50%);}
.node2{top:18%;right:0;}
.node3{top:42%;right:0;}
.node4{bottom:18%;right:0;}
.node5{bottom:0;left:50%;transform:translateX(-50%);}
.node6{bottom:18%;left:0;}
.node7{top:42%;left:0;}
.node8{top:18%;left:0;}
/* FLOW LINES */
.flow-line{
position:absolute;
left:50%;
top:50%;
width:2px;
height:350px;
background:linear-gradient(
180deg,
transparent,
rgba(255,86,86,.5),
transparent
);
animation:flowGlow 3s infinite;
}
.line2{
transform:rotate(45deg);
}
.line3{
transform:rotate(90deg);
}
.line4{
transform:rotate(135deg);
}
/* ANIMATION */
@keyframes pulseHub{
50%{
transform:scale(1.15);
opacity:.5;
}
}
@keyframes nodeFloat{
50%{
transform:translateY(-10px);
}
}
@keyframes flowGlow{
50%{
box-shadow:
0 0 25px rgba(255,86,86,.8);
}
}
/* TABLET */
@media(max-width:991px){
.ecosystem-header h2{
font-size:54px;
}
}
/* MOBILE */
@media(max-width:767px){
.content-ecosystem{
padding:90px 20px;
}
.ecosystem-header h2{
font-size:40px;
}
.ecosystem-network{
height:auto;
display:flex;
flex-direction:column;
gap:15px;
}
.ecosystem-core{
position:relative;
left:auto;
top:auto;
transform:none;
margin:auto;
margin-bottom:25px;
}
.flow-line{
display:none;
}
.content-node{
position:relative;
top:auto!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
transform:none!important;
width:100%;
text-align:center;
animation:none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bf1215b */.influence-engine{
padding:160px 7%;
background:#04111d;
position:relative;
overflow:hidden;
}
.influence-header{
max-width:850px;
margin:auto;
text-align:center;
margin-bottom:120px;
}
.influence-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
.influence-header h2{
font-size:72px;
line-height:.95;
color:white;
margin-bottom:25px;
}
.influence-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
}
/* SYSTEM */
.influence-system{
max-width:1000px;
margin:auto;
}
.energy-track{
position:relative;
display:flex;
flex-direction:column;
gap:80px;
align-items:center;
}
.energy-line{
position:absolute;
top:0;
bottom:0;
width:2px;
background:rgba(255,255,255,.08);
}
.energy-pulse{
position:absolute;
top:0;
width:22px;
height:22px;
border-radius:50%;
background:#ff5656;
box-shadow:
0 0 30px #ff5656;
animation:energyMove 6s linear infinite;
z-index:10;
}
.influence-stage{
position:relative;
max-width:600px;
text-align:center;
padding:0 30px;
}
.stage-circle{
width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:800;
color:white;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(15px);
}
.influence-stage h3{
font-size:34px;
color:white;
margin-bottom:12px;
}
.influence-stage p{
font-size:16px;
line-height:1.8;
color:#cfd8e3;
}
/* ANIMATION */
@keyframes energyMove{
100%{
top:100%;
transform:translateY(-100%);
}
}
/* TABLET */
@media(max-width:991px){
.influence-header h2{
font-size:54px;
}
}
/* MOBILE */
@media(max-width:576px){
.influence-engine{
padding:90px 20px;
}
.influence-header h2{
font-size:40px;
}
.influence-stage h3{
font-size:26px;
}
.stage-circle{
width:65px;
height:65px;
font-size:16px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-42645e4 *//* ==========================================
STORY VAULT
========================================== */
.story-vault{
padding:160px 7%;
background:#030c15;
position:relative;
overflow:hidden;
}
.vault-header{
max-width:900px;
margin:auto;
text-align:center;
margin-bottom:100px;
}
.vault-tag{
display:inline-block;
padding:12px 20px;
border-radius:50px;
background:rgba(255,86,86,.08);
border:1px solid rgba(255,86,86,.15);
color:#ff5656;
font-size:12px;
font-weight:700;
letter-spacing:2px;
margin-bottom:25px;
}
.vault-header h2{
font-size:78px;
line-height:.95;
color:#fff;
margin-bottom:25px;
}
.vault-header p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
max-width:800px;
margin:auto;
}
/* LAYOUT */
.story-layout{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;
}
/* FILES */
.story-files{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
.story-file{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:28px;
backdrop-filter:blur(20px);
opacity:0;
transform:translateY(50px);
animation:fileReveal .8s forwards;
transition:.4s;
}
.story-file:nth-child(1){
animation-delay:.1s;
}
.story-file:nth-child(2){
animation-delay:.3s;
}
.story-file:nth-child(3){
animation-delay:.5s;
}
.story-file:nth-child(4){
animation-delay:.7s;
}
.story-file:nth-child(5){
animation-delay:.9s;
}
.story-file:hover{
transform:translateY(-8px);
border-color:rgba(255,86,86,.4);
}
.story-file.full{
grid-column:span 2;
}
.file-id{
font-size:11px;
letter-spacing:2px;
font-weight:700;
color:#ff5656;
margin-bottom:15px;
}
.story-file h3{
font-size:22px;
color:white;
line-height:1.3;
margin-bottom:12px;
}
.story-file p{
color:#cfd8e3;
line-height:1.8;
font-size:15px;
}
/* RIGHT SIDE */
.story-core-wrap{
text-align:center;
}
/* CORE */
.story-core{
position:relative;
width:350px;
height:350px;
margin:auto;
margin-bottom:50px;
display:flex;
align-items:center;
justify-content:center;
}
.story-core:before{
content:'';
position:absolute;
width:140px;
height:140px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(255,86,86,.35),
transparent
);
animation:corePulse 4s infinite;
}
/* WORDS */
.story-word-slider{
position:relative;
width:100%;
height:120px;
display:flex;
align-items:center;
justify-content:center;
z-index:5;
}
.story-word-slider span{
position:absolute;
font-size:50px;
font-weight:900;
opacity:0;
letter-spacing:-2px;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:storyWords 15s infinite;
}
.story-word-slider span:nth-child(1){
animation-delay:0s;
}
.story-word-slider span:nth-child(2){
animation-delay:3s;
}
.story-word-slider span:nth-child(3){
animation-delay:6s;
}
.story-word-slider span:nth-child(4){
animation-delay:9s;
}
.story-word-slider span:nth-child(5){
animation-delay:12s;
}
/* RINGS */
.core-ring{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(255,86,86,.15);
}
.ring1{
width:220px;
height:220px;
animation:rotateClock 12s linear infinite;
}
.ring2{
width:300px;
height:300px;
animation:rotateAnti 18s linear infinite;
}
.ring3{
width:380px;
height:380px;
animation:rotateClock 25s linear infinite;
}
/* CTA */
.story-core-wrap h3{
font-size:62px;
line-height:.95;
color:white;
margin-bottom:20px;
}
.story-core-wrap p{
font-size:18px;
line-height:1.9;
color:#cfd8e3;
max-width:550px;
margin:auto;
margin-bottom:35px;
}
.story-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:20px 40px;
border-radius:60px;
background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);
color:white !important;
text-decoration:none;
font-weight:700;
transition:.4s;
}
.story-btn:hover{
transform:translateY(-6px);
}
/* ANIMATIONS */
@keyframes storyWords{
0%{
opacity:0;
transform:translateY(40px);
}
8%{
opacity:1;
transform:translateY(0);
}
20%{
opacity:1;
}
25%{
opacity:0;
transform:translateY(-40px);
}
100%{
opacity:0;
}
}
@keyframes rotateClock{
100%{
transform:
translate(-50%,-50%)
rotate(360deg);
}
}
@keyframes rotateAnti{
100%{
transform:
translate(-50%,-50%)
rotate(-360deg);
}
}
@keyframes corePulse{
50%{
transform:scale(1.3);
opacity:.5;
}
}
@keyframes fileReveal{
to{
opacity:1;
transform:translateY(0);
}
}
/* TABLET */
@media(max-width:991px){
.story-layout{
grid-template-columns:1fr;
gap:60px;
}
.vault-header h2{
font-size:54px;
}
.story-core-wrap h3{
font-size:44px;
}
}
/* MOBILE */
@media(max-width:576px){
.story-vault{
padding:90px 20px;
}
.vault-header h2{
font-size:40px;
}
.story-files{
grid-template-columns:1fr;
}
.story-file.full{
grid-column:auto;
}
.story-core{
width:250px;
height:250px;
}
.story-word-slider span{
font-size:28px;
}
.ring2,
.ring3{
display:none;
}
.story-core-wrap h3{
font-size:34px;
}
.story-btn{
width:100%;
}
}/* End custom CSS */