:root{
    --red:#c91824;
    --dark:#070a10;
    --panel:#101722;
    --text:#ffffff;
    --muted:#9ca6b8;
    --border:rgba(255,255,255,.1);
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    background:
    radial-gradient(circle at top right,
    rgba(201,24,36,.18),
    transparent 35%),
    var(--dark);

    color:white;

    font-family:
    Inter,
    Arial,
    sans-serif;

    overflow-x:hidden;

}


.container{

    width:min(1200px,90%);
    margin:auto;

}


/* GLOBAL ANIMATION */

.fade-up{

    opacity:0;
    transform:translateY(40px);

    transition:
    1s ease;

}


.fade-up.show{

    opacity:1;
    transform:none;

}


/* BUTTON */

.btn{

    display:inline-flex;

    padding:16px 34px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #e52b39,
    #a30f18
    );

    color:white;

    font-weight:700;

    transition:.4s;

    box-shadow:
    0 20px 50px rgba(201,24,36,.35);

}


.btn:hover{

    transform:
    translateY(-6px);

}


/* HERO */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}


.hero:before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-250px;

    background:
    radial-gradient(
    circle,
    rgba(201,24,36,.45),
    transparent 70%
    );

    animation:
    pulse 8s infinite alternate;

}



.hero h1{

    font-size:
    clamp(48px,7vw,90px);

    line-height:1;

    letter-spacing:-4px;

}


.hero h1 span{

    color:var(--red);

}


.hero p{

    max-width:650px;

    margin:30px 0;

    font-size:20px;

    line-height:1.8;

    color:var(--muted);

}


/* SECTION */

section{

    padding:120px 0;

}


.section-title{

    font-size:
    clamp(38px,5vw,60px);

    letter-spacing:-2px;

}


.section-title span{

    color:var(--red);

}


/* CARDS */

.grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}



.card{

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

    border:
    1px solid var(--border);

    border-radius:28px;

    padding:35px;

    transition:.5s;

    position:relative;

    overflow:hidden;

}



.card:hover{

    transform:
    translateY(-12px);

    border-color:
    rgba(201,24,36,.7);

}


.card:before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:
    rgba(201,24,36,.25);

    filter:blur(70px);

    right:-80px;

    top:-80px;

}


.card h3{

    font-size:26px;

    margin-bottom:15px;

}


.card p{

    color:var(--muted);

    line-height:1.7;

}


/* CTA */

.cta{

    background:

    linear-gradient(
    135deg,
    rgba(201,24,36,.25),
    rgba(255,255,255,.04)
    );

    border-radius:40px;

    padding:70px;

    text-align:center;

}


/* ANIMATION */

@keyframes pulse{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.35);
    }

}



@media(max-width:900px){

.grid{

    grid-template-columns:1fr;

}


.cta{

    padding:40px 20px;

}


}
/* ==========================================
   REDTAIL PREMIUM MOTION UPGRADE
========================================== */


/* Larger page breathing space */

.hero{

    min-height:110vh;

}


.hero .container{

    position:relative;
    z-index:5;

}


.hero h1{

    animation:
    titleReveal 1.4s ease forwards;

}



.hero p{

    animation:
    textReveal 1.8s ease forwards;

}



/* Animated background particles */

body:before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(
    circle at 20% 30%,
    rgba(201,24,36,.12),
    transparent 25%
    ),

    radial-gradient(
    circle at 80% 70%,
    rgba(255,255,255,.05),
    transparent 20%
    );

    animation:
    backgroundFloat 15s infinite alternate;

    z-index:-1;

}



/* Section movement */

section{

    position:relative;

    overflow:hidden;

}



section:after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(201,24,36,.12),
    transparent 70%
    );

    right:-250px;

    bottom:-250px;

    animation:
    slowPulse 10s infinite alternate;

}



/* Bigger premium cards */

.card{

    min-height:260px;

    transform-style:preserve-3d;

}



.card:hover{

    transform:

    translateY(-20px)

    rotateX(5deg)

    rotateY(-5deg);

}



/* Animated button energy */

.btn{

    position:relative;

    overflow:hidden;

}



.btn:before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
    );

    transform:
    translateX(-120%);

    transition:.8s;

}



.btn:hover:before{

    transform:
    translateX(120%);

}



/* Fade timing upgrades */

.fade-up:nth-child(1){

    transition-delay:.1s;

}


.fade-up:nth-child(2){

    transition-delay:.25s;

}


.fade-up:nth-child(3){

    transition-delay:.4s;

}


/* Animations */


@keyframes titleReveal{

from{

opacity:0;

transform:
translateY(80px)
scale(.95);

}


to{

opacity:1;

transform:none;

}

}



@keyframes textReveal{

from{

opacity:0;

transform:
translateY(40px);

}


to{

opacity:1;

transform:none;

}

}



@keyframes backgroundFloat{

from{

transform:
translate(0,0)
scale(1);

}


to{

transform:
translate(-40px,30px)
scale(1.15);

}

}



@keyframes slowPulse{

from{

transform:
scale(1);

}


to{

transform:
scale(1.5);

}

}
/* ==========================================
   REDTAIL CINEMATIC INVESTMENT ENVIRONMENT
========================================== */


body{

background:
radial-gradient(
circle at 20% 10%,
rgba(201,24,36,.25),
transparent 30%
),
radial-gradient(
circle at 80% 80%,
rgba(120,0,0,.20),
transparent 35%
),
#05070d;

}



/* MOVING FINANCIAL GRID */


body:before{

content:"";

position:fixed;

inset:-200px;

background-image:

linear-gradient(
rgba(255,255,255,.04) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.04) 1px,
transparent 1px
);


background-size:
80px 80px;


animation:
marketGrid 25s linear infinite;


z-index:-5;


}



@keyframes marketGrid{

0%{

transform:
translateY(0);

}


100%{

transform:
translateY(80px);

}

}




/* MOVING RED MARKET ENERGY */


body:after{

content:"";

position:fixed;

width:900px;

height:900px;


top:-300px;

right:-300px;


background:

radial-gradient(
circle,
rgba(201,24,36,.35),
transparent 65%
);


filter:
blur(30px);


animation:

energyPulse 12s infinite alternate;


z-index:-4;


}



@keyframes energyPulse{


from{

transform:
scale(1)
rotate(0deg);

opacity:.5;

}


to{

transform:
scale(1.4)
rotate(40deg);

opacity:1;

}


}




/* PREMIUM SECTION ATMOSPHERE */


section{

position:relative;

overflow:hidden;

}



section:before{


content:"";


position:absolute;


width:500px;

height:500px;


border-radius:50%;


background:

radial-gradient(
circle,
rgba(201,24,36,.12),
transparent 70%
);


animation:

floatingGlow 14s infinite alternate;


pointer-events:none;


}



@keyframes floatingGlow{


from{

transform:
translate(
-100px,
0
);

}


to{

transform:
translate(
100px,
120px
);

}


}





/* GLASS INVESTMENT PANELS */


.card,
.cta{


background:

linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.025)
);


backdrop-filter:
blur(25px);


border:

1px solid
rgba(255,255,255,.12);


box-shadow:

0 30px 80px
rgba(0,0,0,.35);


}





/* CARD 3D MOTION */


.card{

transform-style:
preserve-3d;


}



.card:hover{


transform:

translateY(-20px)
rotateX(8deg)
rotateY(-8deg);


}





/* TEXT REVEAL */


.fade-up{


opacity:0;


transform:

translateY(70px);


transition:

1.2s cubic-bezier(.2,.8,.2,1);


}


.fade-up.show{


opacity:1;


transform:

translateY(0);


}




/* BUTTON ENERGY */


.btn{


position:relative;

overflow:hidden;


}



.btn:after{


content:"";


position:absolute;


top:0;

left:-100%;


width:60%;


height:100%;


background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.5),

transparent

);


animation:

buttonSweep 4s infinite;


}



@keyframes buttonSweep{


0%{

left:-100%;

}


30%{

left:150%;

}


100%{

left:150%;

}


}




/* FLOATING DATA PARTICLES */


.hero:after{


content:"";


position:absolute;


width:100%;

height:100%;


background-image:

radial-gradient(
circle,
rgba(255,255,255,.7)
2px,
transparent 3px
);


background-size:

120px 120px;


opacity:.15;


animation:

particles 20s linear infinite;


}



@keyframes particles{


from{

transform:
translateY(0);

}


to{

transform:
translateY(-300px);

}


}
/* ==========================================
   REDTAIL PREMIUM EXPERIENCE ENGINE
========================================== */


/* GLOBAL ATMOSPHERE */

body {

background:
radial-gradient(
circle at 15% 15%,
rgba(201,24,36,.18),
transparent 35%
),

radial-gradient(
circle at 85% 80%,
rgba(180,0,20,.15),
transparent 40%
),

#05070c;

}



/* ANIMATED FINANCIAL GRID */


body::before {

content:"";

position:fixed;

inset:0;


background-image:

linear-gradient(
rgba(255,255,255,.035) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.035) 1px,
transparent 1px
);


background-size:

70px 70px;


animation:

gridMove 30s linear infinite;


pointer-events:none;

z-index:-10;

}



@keyframes gridMove {


from {

transform:
translateY(0);

}


to {

transform:
translateY(70px);

}


}






/* MOVING MARKET LIGHT */


body::after {


content:"";

position:fixed;


width:900px;

height:900px;


top:-250px;

right:-250px;


background:

radial-gradient(
circle,
rgba(201,24,36,.35),
transparent 65%
);


filter:

blur(60px);


animation:

marketGlow 12s infinite alternate;


pointer-events:none;

z-index:-9;


}



@keyframes marketGlow {


0% {

transform:
scale(1)
rotate(0deg);

}


100% {

transform:
scale(1.5)
rotate(45deg);

}


}







/* HEADER PREMIUM EFFECT */


header {


transition:.5s;


}



.nav-links a {


position:relative;


}



.nav-links a::after {


content:"";


position:absolute;


bottom:-8px;

left:0;


width:0;


height:2px;


background:#c91824;


transition:.4s;


}



.nav-links a:hover::after {


width:100%;


}





/* LOGO */


.logo-text {


font-size:25px;

font-weight:800;

letter-spacing:2px;


line-height:.8;


}



.logo-text span {


color:white;


}



.logo-text small {


font-size:10px;

letter-spacing:4px;

color:#c91824;


}






/* HERO DEPTH */


.hero {


position:relative;


min-height:100vh;


display:flex;

align-items:center;


}



.hero:before {


content:"";


position:absolute;


width:600px;

height:600px;


border-radius:50%;


background:

radial-gradient(
circle,
rgba(201,24,36,.2),
transparent 70%
);



right:10%;

top:20%;


animation:

heroFloat 10s infinite alternate;


}



@keyframes heroFloat {


from {

transform:
translateY(0);

}


to {

transform:
translateY(80px);

}


}







/* PREMIUM CARDS */


.card {


position:relative;


overflow:hidden;


}



.card::before {


content:"";


position:absolute;


width:150%;

height:150%;


background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.12),
transparent
);



top:-120%;

left:-120%;


transition:.8s;


}



.card:hover::before {


top:120%;

left:120%;


}



.card:hover {


border-color:

rgba(201,24,36,.6);


}





/* CTA BOX */


.cta {


position:relative;

overflow:hidden;


}



.cta::after {


content:"";


position:absolute;


width:300px;

height:300px;


background:

radial-gradient(
circle,
rgba(201,24,36,.3),
transparent 70%
);


right:-100px;

bottom:-100px;


animation:

ctaPulse 8s infinite alternate;


}



@keyframes ctaPulse {


from {

transform:
scale(1);

}


to {

transform:
scale(1.5);

}


}






/* BUTTON ADVANCED ANIMATION */


.btn {


position:relative;

overflow:hidden;


}



.btn::before {


content:"";


position:absolute;


top:0;

left:-100%;


height:100%;

width:80%;


background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);



animation:

buttonLight 5s infinite;


}



@keyframes buttonLight {


0% {

left:-100%;

}


25% {

left:150%;

}


100% {

left:150%;

}


}







/* MOBILE MENU */


.mobile-menu {


display:none;


}


.mobile-menu.active {


display:flex;

flex-direction:column;

gap:25px;


padding:30px;


background:

rgba(5,7,12,.95);


border-radius:20px;


}






.mobile-menu-button {


background:none;

border:none;


}



.mobile-menu-button span {


display:block;

width:30px;

height:3px;

background:white;

margin:6px;


}





@media(min-width:901px){


.mobile-menu-button {

display:none;

}


}






/* SCROLL REVEAL */


.fade-up {


opacity:0;


transform:

translateY(60px);


transition:

1s ease;


}



.fade-up.show {


opacity:1;


transform:

translateY(0);


}