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

body {
    font-family: 'Inter', sans-serif;
    background: #0b0b0b;
    color: #fff;
}

/* ---------- GENERAL ---------- */

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.btn {
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
}

.btn-red {
    background: #b00000;
}

.btn-red:hover {
    background: #e60000;
}

.btn-green {
    background: #1fbf00;
    color: #000;
}

.btn-green:hover {
    background: #35e000;
}

.btn-blue {
    background: #5865F2;
}

.btn-outline {
    border: 2px solid #b00000;
    color: #b00000;
}

.btn-outline:hover {
    background: #b00000;
    color: #fff;
}

/* ---------- HEADER ---------- */

.header{

position:sticky;

top:0;

z-index:1000;

background:rgba(0,0,0,0.8);

backdrop-filter:blur(8px);

border-bottom:1px solid #111;

}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}

.logo {
    font-weight: 800;
    font-size: 3.14rem;
}

.logo-red {
    color: #e60000;
}

.nav a {
    margin-left: 18px;
    font-size: 0.95rem;
}

/* ---------- HERO ---------- */

.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at center, #1a0000, #000);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1{

font-size:3.6rem;

line-height:1.2;

margin-bottom:20px;

font-weight:800;

}

.hero h1 span {
    color: #2a2ee9;
}
.hero h1 span:nth-child(2) {
    color: #e60000;
}

.hero p{

max-width:650px;

font-size:1.05rem;

color:#ddd;

margin-bottom:30px;

line-height:1.6;

}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ip-info {
    display: block;
    margin-top: 15px;
    color: #1fbf00;
    font-size: 0.9rem;
}

/* ---------- SECTIONS ---------- */

.section {
    padding: 80px 0;
    text-align: center;
}

.section.dark {
    background: #070707;
}

.section h2 {
    font-size: 2.2rem;
    margin-bottom: 25px;
}

.section-text {
    max-width: 700px;
    margin: 0 auto 40px;
    color: #bbb;
}

/* ---------- ACTIONS ---------- */

.titan-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ---------- COMMUNITY LOGOS ---------- */

.section-community {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.community-logo {
    max-width: 140px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.6));
}

@media (max-width: 600px) {
    .community-logo {
        max-width: 110px;
    }
}

/* ---------- CTA ---------- */

.cta {
    background: linear-gradient(90deg, #2a0000, #120000);
    padding: 60px 0;
    text-align: center;
}

/* ---------- FOOTER ---------- */

.footer {
    background: #000;
    padding: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: #777;
}
/* ---------- HERO SHADOW ---------- */

.hero h1{
    text-shadow:2px 2px 8px rgba(0,0,0,0.7);
}



/* ---------- GALERIA GRID ---------- */

.gallery{

display:grid;

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

gap:20px;

margin-top:40px;

}
.gallery video{

width:100%;
height:100%;

object-fit:cover;

border-radius:12px;

box-shadow:0 6px 18px rgba(0,0,0,0.6);

}
.gallery video{

transition:0.3s;

}

.gallery video:hover{

transform:scale(1.05);

}


/* ---------- EXTRA SHADOW UI ---------- */

.btn{

    box-shadow:0 4px 10px rgba(0,0,0,0.4);

}
.btn{

transition:all 0.25s ease;

}

.btn:hover{

transform:translateY(-2px);

box-shadow:0 6px 16px rgba(0,0,0,0.6);

}

.section h2{

    text-shadow:1px 1px 6px rgba(0,0,0,0.5);

}
.video-wrapper{

margin-top:40px;

border-radius:12px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,0.7);

}

.video-wrapper video{

width:100%;

height:450px;

object-fit:cover;

display:block;

}
/* HERO BACKGROUND VIDEO */

.hero{
position:relative;
overflow:hidden;
}

.hero-video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:0;

opacity:0.55;

}

/* overlay encima del video */

.hero-overlay{

position:absolute;
inset:0;

background:rgba(0,0,0,0.55);

z-index:1;

}

/* contenido por encima */

.hero-content{

animation:heroFade 1.2s ease forwards;

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* ---------- RESPONSIVE HERO ---------- */

@media (max-width:768px){

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

.hero p{
font-size:0.95rem;
}

}