/* ==========================================================
   BRIBE
   VERSION 3
==========================================================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Bebas+Neue&display=swap");

/* ===========================
   RESET
=========================== */

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

html{
scroll-behavior:smooth;
}

body{

background:#050505;
color:#f5f5f5;

font-family:Inter,sans-serif;

overflow-x:hidden;

}

/* ===========================
   VARIABLES
=========================== */

:root{

--bg:#050505;
--surface:#0d0d0d;

--text:#f5f5f5;
--muted:#8b8b8b;

--red:#98131d;
--redGlow:#d61d28;

--border:#1a1a1a;

--radius:18px;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:var(--red);

}

::-webkit-scrollbar-track{

background:#080808;

}

/* ===========================
   SELECTION
=========================== */

::selection{

background:var(--red);

color:white;

}

/* ===========================
   BACKGROUND
=========================== */

.noise{

position:fixed;
inset:0;

pointer-events:none;

opacity:.04;

background-image:
url("https://grainy-gradients.vercel.app/noise.svg");

z-index:1000;

}

.glow{

position:fixed;

width:900px;
height:900px;

left:-300px;
top:-250px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(214,29,40,.20),

transparent 70%);

filter:blur(120px);

pointer-events:none;

animation:glowMove 18s ease-in-out infinite alternate;

}

@keyframes glowMove{

100%{

transform:

translate(250px,140px);

}

}

.smoke{

position:fixed;

width:700px;
height:700px;

border-radius:50%;

filter:blur(120px);

opacity:.08;

pointer-events:none;

}

.smoke-left{

background:#781018;

left:-350px;
top:30%;

}

.smoke-right{

background:#42080d;

right:-250px;
bottom:-150px;

}

/* ===========================
   NAVBAR
=========================== */

nav{

position:fixed;

top:0;
left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:26px 7vw;

z-index:999;

transition:.3s;

}

nav.scrolled{

backdrop-filter:blur(18px);

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

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

}

.logo{

font-family:"Bebas Neue";

font-size:40px;

letter-spacing:5px;

color:white;

text-decoration:none;

}

.nav-links{

display:flex;

gap:34px;

}

.nav-links a{

color:#9d9d9d;

text-decoration:none;

transition:.25s;

font-size:15px;

}

.nav-links a:hover{

color:white;

}

.nav-buttons{

display:flex;

gap:14px;

}

.nav-button{

padding:12px 22px;

border:1px solid #262626;

text-decoration:none;

color:white;

transition:.25s;

font-size:14px;

}

.nav-button:hover{

border-color:var(--redGlow);

}

.invite{

background:var(--red);

border-color:var(--red);

}

.invite:hover{

background:#b91621;

}

/* ===========================
   HERO
=========================== */

.hero{

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

padding:0 7vw;

position:relative;

}

.hero-top{

font-size:13px;

letter-spacing:6px;

text-transform:uppercase;

color:#777;

margin-bottom:18px;

}

.hero h1{

font-family:"Bebas Neue";

font-size:220px;

letter-spacing:8px;

line-height:.85;

}

.hero p{

font-size:22px;

color:#bdbdbd;

margin-top:20px;

max-width:650px;

line-height:1.7;

}

/* ===========================
   BUTTONS
=========================== */

.hero-buttons{

display:flex;

gap:18px;

margin-top:55px;

flex-wrap:wrap;

}

.button{

padding:17px 34px;

text-decoration:none;

transition:.3s;

font-weight:600;

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

}

.primary{

background:var(--red);

border-color:var(--red);

color:white;

}

.primary:hover{

background:#b41621;

box-shadow:

0 0 30px rgba(214,29,40,.35);

}

.secondary{

background:transparent;

color:white;

}

.secondary:hover{

border-color:var(--redGlow);

}

/* ===========================
   HERO STATS
=========================== */

.hero-stats{

display:grid;

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

gap:28px;

margin-top:90px;

}

.stat{

padding:28px 0;

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

}

.stat h2{

font-family:"Bebas Neue";

font-size:78px;

font-weight:400;

line-height:.9;

}

.stat span{

display:block;

margin-top:10px;

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

color:#7f7f7f;

}
/* ===========================
   SECTIONS
=========================== */

section{

padding:140px 7vw;

position:relative;

}

.section-title{

display:block;

font-size:12px;

letter-spacing:7px;

text-transform:uppercase;

color:#777;

margin-bottom:25px;

}

section h2{

font-family:"Bebas Neue";

font-size:90px;

font-weight:400;

letter-spacing:3px;

line-height:.95;

max-width:900px;

margin-bottom:30px;

}

section>p{

max-width:700px;

font-size:19px;

line-height:1.8;

color:#a0a0a0;

}


/* ===========================
   FEATURES
=========================== */

.feature-list{

margin-top:80px;

display:grid;

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

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

}

.feature-list div{

padding:45px 0;

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

}

.feature-list div:nth-child(odd){

padding-right:50px;

}

.feature-list div:nth-child(even){

padding-left:50px;

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

}

.feature-list h3{

font-family:"Bebas Neue";

font-size:52px;

font-weight:400;

letter-spacing:2px;

margin-bottom:12px;

}

.feature-list p{

color:#888;

font-size:16px;

}


/* ===========================
   COMMAND SEARCH
=========================== */

#commandSearch{

width:100%;

margin-top:50px;

padding:22px 0;

background:none;

border:none;

border-bottom:1px solid #252525;

outline:none;

color:white;

font-size:22px;

font-family:Inter,sans-serif;

}

#commandSearch::placeholder{

color:#555;

}


/* ===========================
   COMMAND TABS
=========================== */

.command-tabs{

display:flex;

gap:12px;

flex-wrap:wrap;

margin:45px 0;

}

.tab{

background:transparent;

color:#999;

border:1px solid #222;

padding:12px 24px;

font-family:Inter,sans-serif;

cursor:pointer;

transition:.25s;

}

.tab:hover{

color:white;

border-color:#555;

}

.tab.active{

background:var(--red);

border-color:var(--red);

color:white;

}


/* ===========================
   COMMAND CONTAINER
=========================== */

#commandContainer{

max-width:900px;

}


/* ===========================
   COMMAND CATEGORY
=========================== */

.command-category{

display:none;

}

.command-category.active{

display:block;

}


/* ===========================
   COMMAND CARD
=========================== */

.command-card{

padding:35px 0;

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

animation:commandFade .35s ease;

}

@keyframes commandFade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}

}


.command-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}


.command-header h3{

font-family:"Bebas Neue";

font-size:48px;

font-weight:400;

letter-spacing:2px;

}


.badge{

font-size:11px;

text-transform:uppercase;

letter-spacing:2px;

padding:8px 14px;

border:1px solid #351014;

color:#d61d28;

}


.command-description{

margin-top:15px;

font-size:17px;

color:#aaa;

}


/* ===========================
   COMMAND INFO
=========================== */

.command-info{

margin-top:30px;

padding:25px;

background:#090909;

border:1px solid #181818;

}


.command-info h4{

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

color:#777;

margin-bottom:12px;

}


.command-info code{

display:block;

font-family:monospace;

color:#eee;

font-size:15px;

background:#050505;

padding:16px;

margin-bottom:25px;

border-left:2px solid var(--red);

overflow-x:auto;

}


/* ===========================
   INVITE SECTION
=========================== */

.invite-section{

text-align:center;

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

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

}


.invite-section h2{

margin-left:auto;

margin-right:auto;

}


.invite-section p{

margin:0 auto;

}


/* ===========================
   FOOTER
=========================== */

footer{

padding:90px 7vw 50px;

display:flex;

flex-wrap:wrap;

justify-content:space-between;

gap:40px;

}


.footer-logo{

font-family:"Bebas Neue";

font-size:110px;

letter-spacing:8px;

}


.footer-links{

display:flex;

gap:30px;

align-items:center;

flex-wrap:wrap;

}


.footer-links a{

text-decoration:none;

color:#888;

text-transform:uppercase;

letter-spacing:3px;

font-size:12px;

transition:.25s;

}


.footer-links a:hover{

color:white;

}


footer p{

width:100%;

padding-top:30px;

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

color:#555;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

}
/* ===========================
   ANIMATIONS
=========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}


.reveal{

opacity:0;

}


.reveal.show{

animation:fadeUp .8s ease forwards;

}


/* ===========================
   HOVER POLISH
=========================== */

.command-card{

transition:.3s ease;

}


.command-card:hover{

border-color:rgba(214,29,40,.35);

}


.command-card:hover .command-header h3{

color:#d61d28;

}


.stat{

transition:.3s ease;

}


.stat:hover h2{

color:#d61d28;

}


/* ===========================
   CUSTOM CURSOR
=========================== */

#cursor{

position:fixed;

width:16px;

height:16px;

background:#d61d28;

border-radius:50%;

pointer-events:none;

z-index:999999;

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

box-shadow:

0 0 20px rgba(214,29,40,.8);

transition:

width .2s,

height .2s;

}


#cursor.big{

width:35px;

height:35px;

}


/* ===========================
   MOBILE
=========================== */

@media(max-width:1100px){


.hero h1{

font-size:160px;

}


.hero-stats{

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

}


section h2{

font-size:70px;

}


}


@media(max-width:850px){


nav{

padding:22px 25px;

}


.nav-links{

display:none;

}


.nav-button{

padding:10px 15px;

}


.hero{

padding:0 25px;

}


.hero h1{

font-size:100px;

}


.hero p{

font-size:18px;

}


.hero-stats{

grid-template-columns:1fr;

margin-top:60px;

}


.stat h2{

font-size:65px;

}


section{

padding:90px 25px;

}


section h2{

font-size:55px;

}


.feature-list{

grid-template-columns:1fr;

}


.feature-list div:nth-child(even){

padding-left:0;

border-left:none;

}


.feature-list div:nth-child(odd){

padding-right:0;

}


.feature-list h3{

font-size:42px;

}


.command-header{

align-items:flex-start;

flex-direction:column;

}


.command-header h3{

font-size:40px;

}


.invite-section .hero-buttons{

justify-content:center;

}


.footer-logo{

font-size:75px;

}


footer{

padding:70px 25px 40px;

}


}


@media(max-width:500px){


.logo{

font-size:32px;

}


.nav-buttons .nav-button:first-child{

display:none;

}


.hero h1{

font-size:78px;

letter-spacing:3px;

}


.hero-top{

letter-spacing:3px;

}


.hero-buttons{

flex-direction:column;

}


.button{

width:100%;

text-align:center;

}


section h2{

font-size:42px;

}


.command-tabs{

gap:8px;

}


.tab{

padding:10px 15px;

font-size:13px;

}


.command-info{

padding:18px;

}


.footer-links{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}


/* ===========================
   RED TEXT EFFECT
=========================== */

.primary,
.invite{

position:relative;

overflow:hidden;

}


.primary::after,
.invite::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.15),

transparent

);

transform:translateX(-100%);

transition:.6s;

}


.primary:hover::after,
.invite:hover::after{

transform:translateX(100%);

}


/* ===========================
   SMOOTH BODY
=========================== */

body{

animation:pageLoad 1s ease;

}


@keyframes pageLoad{

from{

opacity:0;

}

to{

opacity:1;

}

}