:root{

--black:#050505;
--card:#111111;
--red:#C41E3A;
--white:#F0EDE8;
--grey:#9A9690;

--font-display:'Bebas Neue',sans-serif;
--font-body:'Cormorant Garamond',serif;
--font-mono:'Space Mono',monospace;

}

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

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:var(--white);
font-family:var(--font-body);
overflow-x:hidden;
}

/* BG */

.hero-bg{
position:fixed;
inset:0;
z-index:-10;
overflow:hidden;
}

.hero-bg-img{
width:100%;
height:100%;
object-fit:cover;

filter:
brightness(.4)
contrast(1.15);

transform:scale(1.05);
}

.hero-bg::after{

content:"";

position:absolute;
inset:0;

background:

radial-gradient(
circle at top left,
rgba(196,30,58,.18),
transparent 35%
),

radial-gradient(
circle at bottom right,
rgba(196,30,58,.12),
transparent 40%
),

linear-gradient(
rgba(5,5,5,.6),
rgba(5,5,5,.92)
);

}

/* NAV */

.navbar{

position:fixed;
top:0;

width:100%;

padding:22px 7%;

display:flex;
justify-content:space-between;
align-items:center;

background:
rgba(5,5,5,.65);

backdrop-filter:blur(14px);

border-bottom:
1px solid rgba(255,255,255,.05);

z-index:1000;

}

.logo{

font-family:var(--font-display);
font-size:2rem;

color:var(--red);

letter-spacing:4px;

}

nav{

display:flex;
gap:28px;

}

nav a{

text-decoration:none;
color:var(--grey);

font-family:var(--font-mono);

transition:.3s;

}

nav a:hover{

color:white;

}

/* HERO */

.hero{

min-height:100vh;

padding:0 8%;

display:flex;
flex-direction:column;
justify-content:center;

position:relative;

}

.hero::before{

content:"ASSISTANT";

position:absolute;

right:-100px;
top:50%;

transform:translateY(-50%);

font-family:var(--font-display);

font-size:20rem;

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

pointer-events:none;

}

.hero-tag{

color:var(--red);

font-family:var(--font-mono);

letter-spacing:4px;

margin-bottom:20px;

}

.hero h1{

font-family:var(--font-display);

font-size:clamp(6rem,14vw,12rem);

line-height:.8;

}

.hero h1 span{

display:block;

color:transparent;

-webkit-text-stroke:
1px rgba(255,255,255,.35);

}

.hero p{

margin-top:20px;

max-width:650px;

font-size:1.2rem;

line-height:1.8;

color:var(--grey);

}

.hero-buttons{

display:flex;
gap:15px;

margin-top:40px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

padding:16px 30px;

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

text-decoration:none;

font-family:var(--font-mono);

transition:.3s;

}

.btn-primary{

background:var(--red);
color:white;

}

.btn-secondary{

color:white;

}

.btn-primary:hover,
.btn-secondary:hover{

transform:translateY(-4px);

}

/* PLATFORM */

.platform{

padding:140px 8%;

}

.section-head span{

font-family:var(--font-mono);
color:var(--red);

}

.section-head h2{

font-family:var(--font-display);

font-size:5rem;

margin-top:10px;

}

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:24px;

margin-top:60px;

}

.card{

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

backdrop-filter:blur(12px);

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

padding:35px;

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

border-color:
rgba(196,30,58,.4);

}

.card-icon{

font-size:2rem;
margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

}

.card p{

line-height:1.8;
color:var(--grey);

}

.badge{

display:inline-block;

margin-top:20px;

color:var(--red);

font-family:var(--font-mono);
font-size:.8rem;

}

.owner{

color:#ff5b5b;

}

/* STATUS */

.status{

padding:100px 8%;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:24px;

}

.status-card{

padding:40px;

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

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

}

.status-card span{

font-family:var(--font-mono);
color:var(--grey);

}

.status-card h3{

margin-top:15px;

font-family:var(--font-display);

font-size:3rem;

}

/* CTA */

.cta{

text-align:center;

padding:180px 8%;

}

.cta h2{

font-family:var(--font-display);

font-size:5rem;

line-height:.9;

}

.cta p{

margin-top:20px;

color:var(--grey);

}

/* FOOTER */

footer{

padding:50px;

text-align:center;

border-top:
1px solid rgba(255,255,255,.05);

}

footer p{

margin-top:10px;

color:var(--grey);

}

@media(max-width:768px){

nav{
display:none;
}

.hero::before{
font-size:8rem;
right:-20px;
}

.hero h1{
font-size:5rem;
}

.section-head h2,
.cta h2{
font-size:3.5rem;
}

  }