/* Start custom CSS for html, class: .elementor-element-366a7e5 *//* ==========================================
   BRANDING HERO SECTION
========================================== */

.brand-spotlight-hero{
    background:#030c15;
    min-height:100vh;
    padding:140px 7%;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.spotlight-grid{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

/* LEFT CONTENT */

.brand-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;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:25px;
}

.brand-title{
    display:flex;
    flex-direction:column;
    font-size:82px;
    line-height:.92;
    font-weight:800;
    margin-bottom:25px;
}

.brand-title span{
    color:#fff;
}

.gradient-text{
    background:linear-gradient(
        135deg,
        #ff5656,
        #ff3f84
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.brand-desc{
    color:#cfd8e3;
    font-size:18px;
    line-height:1.9;
    max-width:650px;
    margin-bottom:40px;
}

.brand-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.brand-btn{
    padding:18px 34px;
    border-radius:60px;
    font-weight:700;
    text-decoration:none;
    transition:.4s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.primary-btn{
    background:linear-gradient(
        135deg,
        #ff5656,
        #ff3f84
    );
    color:#fff !important;
}

.secondary-btn{
    border:1px solid rgba(255,255,255,.15);
    color:#fff !important;
}

.brand-btn:hover{
    transform:translateY(-6px);
}

/* VISUAL */

.spotlight-stage{
    position:relative;
    height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.spotlight-stage:before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,86,86,.15),
        transparent 70%
    );

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

/* SPOTLIGHT */

.spotlight-beam{
    position:absolute;
    top:-250px;
    left:50%;
    transform:translateX(-50%);
    width:260px;
    height:850px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.16),
        rgba(255,255,255,.05),
        transparent
    );

    clip-path:polygon(
        42% 0%,
        58% 0%,
        100% 100%,
        0% 100%
    );

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

/* WORDS */

.brand-word-slider{
    position:relative;
    width:100%;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.brand-word-slider span{
    position:absolute;
    font-size:clamp(42px,8vw,90px);
    font-weight:900;
    letter-spacing:-2px;
    line-height:1;
    opacity:0;
    white-space:nowrap;
    color:#fff;

    animation:brandWords 15s infinite;
}

.brand-word-slider span:nth-child(1){
    animation-delay:0s;
}

.brand-word-slider span:nth-child(2){
    animation-delay:3s;
}

.brand-word-slider span:nth-child(3){
    animation-delay:6s;
}

.brand-word-slider span:nth-child(4){
    animation-delay:9s;
}

.brand-word-slider span:nth-child(5){
    animation-delay:12s;
}

.brand-word-slider span:nth-child(3),
.brand-word-slider span:nth-child(4),
.brand-word-slider span:nth-child(5){

    background:linear-gradient(
        135deg,
        #ff5656,
        #ff3f84
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* RINGS */

.brand-rings{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(255,86,86,.12);
}

.ring1{
    width:220px;
    height:220px;
    animation:rotateRing 15s linear infinite;
}

.ring2{
    width:340px;
    height:340px;
    animation:rotateRingReverse 25s linear infinite;
}

.ring3{
    width:480px;
    height:480px;
    animation:rotateRing 35s linear infinite;
}

/* ANIMATIONS */

@keyframes brandWords{

    0%{
        opacity:0;
        transform:translateY(40px) scale(.9);
    }

    8%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    20%{
        opacity:1;
    }

    25%{
        opacity:0;
        transform:translateY(-40px) scale(1.05);
    }

    100%{
        opacity:0;
    }
}

@keyframes beamMove{
    50%{
        transform:translateX(-50%) rotate(8deg);
    }
}

@keyframes rotateRing{
    100%{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes rotateRingReverse{
    100%{
        transform:translate(-50%,-50%) rotate(-360deg);
    }
}

@keyframes glowPulse{
    50%{
        transform:scale(1.25);
        opacity:.6;
    }
}

/* TABLET */

@media(max-width:991px){

    .spotlight-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .brand-title{
        font-size:56px;
        text-align:center;
    }

    .brand-desc{
        text-align:center;
        margin:auto;
    }

    .brand-buttons{
        justify-content:center;
    }
}

/* MOBILE */

@media(max-width:576px){

    .brand-spotlight-hero{
        padding:90px 20px;
    }

    .brand-title{
        font-size:42px;
    }

    .brand-desc{
        font-size:16px;
    }

    .brand-buttons{
        flex-direction:column;
    }

    .brand-btn{
        width:100%;
    }

    .spotlight-stage{
        height:320px;
    }

    .brand-word-slider span{
        font-size:34px;
        white-space:normal;
        max-width:90%;
        text-align:center;
    }

    .ring2,
    .ring3{
        display:none;
    }

    .ring1{
        width:180px;
        height:180px;
    }

    .spotlight-beam{
        width:160px;
        height:450px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4fac893 */.brand-dna{

padding:160px 7%;

background:#04111d;

position:relative;

overflow:hidden;

}

.dna-header{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:120px;

}

.dna-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;

letter-spacing:2px;

font-weight:700;

margin-bottom:25px;

}

.dna-header h2{

font-size:72px;

line-height:.95;

color:#fff;

margin-bottom:25px;

}

.dna-header p{

font-size:18px;

line-height:1.9;

color:#cfd8e3;

}

/* SYSTEM */

.dna-system{

position:relative;

height:850px;

max-width:1000px;

margin:auto;

}

/* CORE */

.dna-core{

position:absolute;

left:50%;

top:50%;

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

width:260px;

height:260px;

z-index:10;

}

.core-glow{

position:absolute;

inset:0;

border-radius:50%;

background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);

filter:blur(40px);

opacity:.5;

animation:dnaPulse 4s infinite;

}

.core-content{

position:absolute;

left:50%;

top:50%;

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

width:180px;

height:180px;

border-radius:50%;

background:#081420;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:24px;

font-weight:800;

text-align:center;

}

/* NODES */

.dna-node{

position:absolute;

padding:18px 24px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:60px;

color:white;

font-weight:700;

backdrop-filter:blur(20px);

animation:nodeFloat 6s infinite ease-in-out;

}

.node1{top:0;left:50%;transform:translateX(-50%);}
.node2{top:15%;right:0;}
.node3{top:40%;right:0;}
.node4{bottom:15%;right:0;}
.node5{bottom:0;left:50%;transform:translateX(-50%);}
.node6{bottom:15%;left:0;}
.node7{top:40%;left:0;}
.node8{top:15%;left:0;}

/* LINES */

.dna-line{

position:absolute;

left:50%;

top:50%;

width:2px;

height:340px;

background:linear-gradient(
180deg,
transparent,
rgba(255,86,86,.5),
transparent
);

animation:lineGlow 3s infinite;

}

.line2{
transform:rotate(45deg);
}

.line3{
transform:rotate(90deg);
}

.line4{
transform:rotate(135deg);
}

/* ANIMATIONS */

@keyframes dnaPulse{

50%{

transform:scale(1.15);

opacity:.8;

}

}

@keyframes nodeFloat{

50%{

transform:translateY(-10px);

}

}

@keyframes lineGlow{

50%{

box-shadow:0 0 25px #ff5656;

}

}

/* MOBILE */

@media(max-width:767px){

.brand-dna{

padding:90px 20px;

}

.dna-header h2{

font-size:40px;

}

.dna-system{

height:auto;

display:flex;

flex-direction:column;

gap:15px;

}

.dna-core{

position:relative;

left:auto;

top:auto;

transform:none;

margin:auto;

margin-bottom:30px;

}

.dna-line{

display:none;

}

.dna-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-b4810f1 */.perception-engine{

padding:160px 7%;

background:#030c15;

overflow:hidden;

position:relative;

}

.engine-header{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:120px;

}

.engine-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;

}

.engine-header h2{

font-size:72px;

line-height:.95;

color:white;

margin-bottom:25px;

}

.engine-header p{

font-size:18px;

line-height:1.9;

color:#cfd8e3;

}

/* TRACK */

.perception-track{

position:relative;

display:grid;

grid-template-columns:repeat(5,1fr);

gap:25px;

max-width:1400px;

margin:auto;

}

.track-line{

position:absolute;

left:0;

right:0;

top:45px;

height:2px;

background:rgba(255,255,255,.08);

}

.signal{

position:absolute;

top:35px;

left:0;

width:20px;

height:20px;

border-radius:50%;

background:#ff5656;

box-shadow:
0 0 25px #ff5656;

animation:signalMove 8s linear infinite;

z-index:10;

}

.stage{

position:relative;

text-align:center;

padding-top:80px;

}

.stage-dot{

width:18px;

height:18px;

border-radius:50%;

background:#ff5656;

margin:auto;

margin-bottom:25px;

position:relative;

z-index:2;

}

.stage h3{

font-size:28px;

color:white;

margin-bottom:12px;

}

.stage p{

font-size:15px;

line-height:1.8;

color:#cfd8e3;

max-width:220px;

margin:auto;

}

.stage5 h3{

background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ANIMATION */

@keyframes signalMove{

100%{

left:100%;

transform:translateX(-100%);

}

}

/* MOBILE */

@media(max-width:991px){

.engine-header h2{

font-size:54px;

}

.perception-track{

grid-template-columns:1fr;

gap:40px;

}

.track-line,
.signal{

display:none;

}

.stage{

padding-top:0;

}

}

@media(max-width:576px){

.perception-engine{

padding:90px 20px;

}

.engine-header h2{

font-size:40px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f26db19 */.brand-constellation{

padding:160px 7%;

background:#04111d;

position:relative;

overflow:hidden;

}

.constellation-header{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:120px;

}

.constellation-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;

}

.constellation-header h2{

font-size:72px;

line-height:.95;

color:white;

margin-bottom:25px;

}

.constellation-header p{

font-size:18px;

line-height:1.9;

color:#cfd8e3;

}

/* SYSTEM */

.constellation-system{

position:relative;

height:900px;

max-width:1000px;

margin:auto;

}

/* CORE */

.brand-star-core{

position:absolute;

left:50%;

top:50%;

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

width:260px;

height:260px;

z-index:10;

}

.star-glow{

position:absolute;

inset:0;

border-radius:50%;

background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);

filter:blur(40px);

opacity:.5;

animation:starPulse 4s infinite;

}

.star-core-text{

position:absolute;

left:50%;

top:50%;

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

width:180px;

height:180px;

border-radius:50%;

background:#081420;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

font-size:22px;

font-weight:800;

}

/* STARS */

.star{

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(20px);

animation:starFloat 6s infinite ease-in-out;

}

.star1{top:0;left:50%;transform:translateX(-50%);}
.star2{top:15%;right:0;}
.star3{top:40%;right:0;}
.star4{bottom:15%;right:0;}
.star5{bottom:0;left:50%;transform:translateX(-50%);}
.star6{bottom:15%;left:0;}
.star7{top:40%;left:0;}
.star8{top:15%;left:0;}

/* LINES */

.constellation-line{

position:absolute;

left:50%;

top:50%;

width:2px;

height:360px;

background:linear-gradient(
180deg,
transparent,
rgba(255,86,86,.4),
transparent
);

animation:lineFlow 4s infinite;

}

.line2{
transform:rotate(45deg);
}

.line3{
transform:rotate(90deg);
}

.line4{
transform:rotate(135deg);
}

/* ANIMATION */

@keyframes starPulse{

50%{

transform:scale(1.15);

opacity:.8;

}

}

@keyframes starFloat{

50%{

transform:translateY(-10px);

}

}

@keyframes lineFlow{

50%{

box-shadow:0 0 25px #ff5656;

}

}

/* MOBILE */

@media(max-width:767px){

.brand-constellation{

padding:90px 20px;

}

.constellation-header h2{

font-size:40px;

}

.constellation-system{

height:auto;

display:flex;

flex-direction:column;

gap:15px;

}

.brand-star-core{

position:relative;

left:auto;

top:auto;

transform:none;

margin:auto;

margin-bottom:30px;

}

.constellation-line{

display:none;

}

.star{

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-887933c *//* ==========================================
   LEGACY VAULT
========================================== */

.legacy-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 */

.vault-layout{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}

/* FILES */

.brand-files{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.file-card{

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:28px;

backdrop-filter:blur(20px);

transition:.4s;

opacity:0;

transform:translateY(50px);

animation:fileReveal .8s forwards;

}

.file-card:nth-child(1){
animation-delay:.1s;
}

.file-card:nth-child(2){
animation-delay:.3s;
}

.file-card:nth-child(3){
animation-delay:.5s;
}

.file-card:nth-child(4){
animation-delay:.7s;
}

.file-card:nth-child(5){

grid-column:span 2;

animation-delay:.9s;

}

.file-card:hover{

transform:translateY(-10px);

border-color:rgba(255,86,86,.4);

}

.file-label{

font-size:11px;

letter-spacing:2px;

font-weight:700;

color:#ff5656;

margin-bottom:15px;

}

.file-card h3{

font-size:22px;

color:white;

line-height:1.3;

margin-bottom:12px;

}

.file-card p{

color:#cfd8e3;

line-height:1.8;

font-size:15px;

}

/* CORE */

.legacy-core-wrap{

text-align:center;

}

.legacy-core{

position:relative;

width:350px;

height:350px;

margin:auto;

margin-bottom:50px;

display:flex;

align-items:center;

justify-content:center;

}

.legacy-word-slider{

position:relative;

width:100%;

height:120px;

display:flex;

align-items:center;

justify-content:center;

z-index:5;

}

.legacy-word-slider span{

position:absolute;

font-size:52px;

font-weight:900;

opacity:0;

letter-spacing:-2px;

background:linear-gradient(
135deg,
#ff5656,
#ff3f84
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:legacyWords 15s infinite;

}

.legacy-word-slider span:nth-child(1){
animation-delay:0s;
}

.legacy-word-slider span:nth-child(2){
animation-delay:3s;
}

.legacy-word-slider span:nth-child(3){
animation-delay:6s;
}

.legacy-word-slider span:nth-child(4){
animation-delay:9s;
}

.legacy-word-slider span:nth-child(5){
animation-delay:12s;
}

/* RINGS */

.legacy-ring{

position:absolute;

left:50%;

top:50%;

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

border-radius:50%;

border:1px solid rgba(255,86,86,.15);

}

.ring-one{

width:220px;

height:220px;

animation:rotateClock 12s linear infinite;

}

.ring-two{

width:300px;

height:300px;

animation:rotateAnti 18s linear infinite;

}

.ring-three{

width:380px;

height:380px;

animation:rotateClock 25s linear infinite;

}

.legacy-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;

}

/* CTA */

.legacy-core-wrap h3{

font-size:62px;

line-height:.95;

color:white;

margin-bottom:20px;

}

.legacy-core-wrap p{

font-size:18px;

line-height:1.9;

color:#cfd8e3;

margin-bottom:35px;

max-width:550px;

margin-left:auto;

margin-right:auto;

}

.legacy-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;

font-weight:700;

text-decoration:none;

transition:.4s;

}

.legacy-btn:hover{

transform:translateY(-6px);

}

/* ANIMATIONS */

@keyframes legacyWords{

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){

.vault-layout{

grid-template-columns:1fr;

gap:60px;

}

.vault-header h2{

font-size:54px;

}

.legacy-core-wrap h3{

font-size:44px;

}

}

/* MOBILE */

@media(max-width:576px){

.legacy-vault{

padding:90px 20px;

}

.vault-header h2{

font-size:40px;

}

.brand-files{

grid-template-columns:1fr;

}

.file-card:nth-child(5){

grid-column:auto;

}

.legacy-core{

width:250px;

height:250px;

}

.legacy-word-slider span{

font-size:30px;

}

.ring-two,
.ring-three{

display:none;

}

.legacy-core-wrap h3{

font-size:34px;

}

.legacy-btn{

width:100%;

}

}/* End custom CSS */