/* =======================================================
   CELERITY LEGACY 1
   UWASKY STUDIO
======================================================= */

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

body{

background:#090909;

color:#ffffff;

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

overflow-x:hidden;

line-height:1.8;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

/* ===========================
   NAVIGATION
=========================== */

.studio-top-nav{

position:fixed;

top:0;

left:0;

width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(8,8,8,.95);

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(255,0,60,.25);

z-index:9999;

}

.nav-logo-text{

font-size:30px;

font-weight:bold;

letter-spacing:4px;

color:#ff003c;

}

.nav-links{

display:flex;

gap:35px;

}

.nav-links a{

color:white;

font-weight:bold;

transition:.35s;

}

.nav-links a:hover{

color:#ff003c;

}

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

.hero-section{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:140px 10% 80px;

background:linear-gradient(to bottom,#050505,#101010);

}

.hero-content{

max-width:900px;

}

.hero-content h1{

font-size:75px;

letter-spacing:5px;

color:#ff003c;

margin-bottom:20px;

}

.hero-tagline{

font-size:24px;

letter-spacing:8px;

font-weight:bold;

color:#d7d7d7;

margin-bottom:20px;

text-transform:uppercase;

}

.hero-content h2{

font-size:42px;

margin-bottom:30px;

text-transform:uppercase;

}

.hero-description{

font-size:20px;

color:#bdbdbd;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.primary-btn{

background:#ff003c;

padding:18px 45px;

border-radius:6px;

color:white;

font-weight:bold;

transition:.35s;

}

.primary-btn:hover{

background:#ff295d;

transform:translateY(-5px);

}

.secondary-btn{

border:2px solid #ff003c;

padding:18px 45px;

border-radius:6px;

color:#ff003c;

font-weight:bold;

transition:.35s;

}

.secondary-btn:hover{

background:#ff003c;

color:white;

transform:translateY(-5px);

}
/* =======================================================
   PART 2 - COVER • ABOUT • NOVA CITY
======================================================= */

.cover-section,
.about-section,
.city-section{
padding:100px 8%;
text-align:center;
}

.cover-section h2,
.about-section h2,
.city-section h2{

font-size:48px;

color:#ff003c;

margin-bottom:25px;

letter-spacing:3px;

text-transform:uppercase;

}

.cover-image{

width:100%;

max-width:850px;

margin:40px auto;

border-radius:12px;

border:2px solid rgba(255,0,60,.35);

box-shadow:0 0 40px rgba(255,0,60,.25);

transition:.4s;

}

.cover-image:hover{

transform:scale(1.02);

box-shadow:0 0 60px rgba(255,0,60,.45);

}

.about-container{

max-width:950px;

margin:auto;

}

.about-subtitle{

font-size:24px;

color:#ff003c;

font-weight:bold;

letter-spacing:5px;

margin-bottom:30px;

text-transform:uppercase;

}

.about-container p{

font-size:19px;

color:#c9c9c9;

margin-bottom:25px;

line-height:2;

}

.city-section p{

font-size:19px;

color:#c9c9c9;

margin-bottom:35px;

}

.city-image{

width:100%;

max-width:1100px;

margin:auto;

border-radius:12px;

border:2px solid rgba(255,0,60,.30);

box-shadow:0 0 35px rgba(255,0,60,.20);

transition:.4s;

}

.city-image:hover{

transform:scale(1.02);

box-shadow:0 0 60px rgba(255,0,60,.45);

}
/* =======================================================
   PART 3 - GAME FEATURES + ALPHA WAITLIST
======================================================= */

.features-section,
.waitlist-section{
padding:100px 8%;
text-align:center;
}

.features-section h2,
.waitlist-section h2{
font-size:48px;
color:#ff003c;
margin-bottom:50px;
text-transform:uppercase;
letter-spacing:3px;
}

.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:50px;
}

.feature-card{
background:#141414;
border:1px solid rgba(255,0,60,.25);
border-radius:12px;
padding:30px;
transition:.35s;
}

.feature-card:hover{
transform:translateY(-8px);
border-color:#ff003c;
box-shadow:0 0 25px rgba(255,0,60,.35);
}

.feature-card h3{
color:#ff003c;
margin-bottom:15px;
font-size:24px;
}

.feature-card p{
color:#cfcfcf;
font-size:17px;
line-height:1.8;
}

.waitlist-subtitle{
font-size:22px;
color:#d6d6d6;
margin-bottom:20px;
}

.waitlist-section p{
color:#bdbdbd;
margin-bottom:25px;
}

.waitlist-input{
width:100%;
max-width:500px;
padding:18px;
font-size:18px;
background:#181818;
border:2px solid #333;
border-radius:8px;
color:#fff;
margin-bottom:20px;
}

.waitlist-input:focus{
outline:none;
border-color:#ff003c;
}

.waitlist-btn{
background:#ff003c;
color:white;
border:none;
padding:18px 45px;
font-size:18px;
font-weight:bold;
border-radius:8px;
cursor:pointer;
transition:.35s;
}

.waitlist-btn:hover{
background:#ff295d;
transform:translateY(-4px);
box-shadow:0 0 20px rgba(255,0,60,.4);
}

.waitlist-note{
margin-top:25px;
font-size:15px;
color:#999;
}
/* =======================================================
   PART 4 - SOCIALS • CONTACT • FOOTER • MOBILE
======================================================= */

.studio-socials-section,
.contact-section{
padding:100px 8%;
text-align:center;
}

.studio-socials-section h2,
.contact-section h2{
font-size:46px;
color:#ff003c;
margin-bottom:20px;
text-transform:uppercase;
}

.studio-socials-section p,
.contact-section p{
color:#c8c8c8;
margin-bottom:35px;
font-size:18px;
}

.social-links-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.social-card{
background:#151515;
border:1px solid rgba(255,0,60,.25);
border-radius:12px;
padding:30px;
color:white;
transition:.35s;
}

.social-card:hover{
transform:translateY(-8px);
border-color:#ff003c;
box-shadow:0 0 25px rgba(255,0,60,.35);
}

.social-card span{
font-size:36px;
display:block;
margin-bottom:15px;
}

.social-card h3{
color:#ff003c;
margin-bottom:10px;
}

footer{
padding:40px 20px;
text-align:center;
background:#050505;
border-top:1px solid rgba(255,0,60,.25);
color:#888;
margin-top:50px;
}

/* MOBILE */

@media(max-width:768px){

.hero-content h1{
font-size:48px;
}

.hero-content h2{
font-size:28px;
}

.hero-description{
font-size:18px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.nav-links{
display:none;
}

.cover-section h2,
.about-section h2,
.city-section h2,
.features-section h2,
.waitlist-section h2,
.studio-socials-section h2,
.contact-section h2{
font-size:34px;
}

}
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-content {
    flex: 1;
    min-width: 300px;
}

.hero-logo {
    width: 200px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px #ff6600); /* makes it glow like your game */
}

@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
    }
    .hero-logo {
        width: 150px;
        margin-top: 20px;
    }
}
.studio-present {
    font-size: 14px;
    letter-spacing: 4px;
    color: #ccc;
    text-transform: uppercase;
    margin-bottom: 10px;
    animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.studio-present {
    font-size: 20px; /* bigger */
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
    
    /* rainbow glowing animation */
    background: linear-gradient(
        90deg,
        #ff0000, /* red */
        #ff6600, /* orange */
        #ffd700, /* gold */
        #ffff00, /* yellow */
        #00ff00, /* green */
        #00ffff, /* light blue */
        #0000ff, /* blue */
        #800080, /* purple */
        #ff00ff, /* pink */
        #ffa500, /* amber */
        #ffffff, /* white */
        #000  /* black */
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    animation: rainbowGlow 6s linear infinite, fadeIn 2s ease-in;
    
    /* glow effect */
    text-shadow: 
        0 0 10px #ff6600,
        0 0 20px #ff0000,
        0 0 30px #00ffff;
}

@keyframes rainbowGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.studio-present {
    font-size: 48px; /* SAME SIZE AS CELERITY */
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 30px;
    
    /* rainbow glowing animation */
    background: linear-gradient(
        90deg,
        #ff0000, /* red */
        #ff6600, /* orange */
        #ffa500, /* amber */
        #ffd700, /* gold */
        #ffff00, /* yellow */
        #00ff00, /* green */
        #00ffff, /* light blue */
        #800080, /* purple */
        #ff00ff, /* pink */
        #ffffff, /* white */
        #000000  /* black */
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    animation: rainbowGlow 5s linear infinite, fadeIn 2s ease-in;
    
    /* MASSIVE GLOW */
    text-shadow: 
        0 0 15px #ff6600,
        0 0 30px #ff0000,
        0 0 45px #00ffff,
        0 0 60px #ffd700;
}

@keyframes rainbowGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Make it responsive on mobile */
@media (max-width: 768px) {
    .studio-present {
        font-size: 32px; /* still big on phone */
        letter-spacing: 4px;
    }
}
.hero-section h1 {
    font-size: 28px; /* was probably 48px before */
    color: #ff0000;
    letter-spacing: 3px;
    margin: 5px 0;
    text-shadow: 0 0 10px #ff0000; /* keep the red glow but smaller */
}

/* Mobile version */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 22px;
        letter-spacing: 2px;
    }
}
.hero-section {
    padding: 40px 20px 20px 20px; /* less padding top/bottom */
    gap: 10px; /* reduce space between elements */
}

.studio-present {
    margin-bottom: 5px; /* was 30px before */
    padding-top: 10px; /* was 30px before */
}

.hero-section h1 {
    font-size: 28px;
    color: #ff0000;
    letter-spacing: 3px;
    margin: 2px 0; /* was 5px before - brings CELERITY and LEGACY closer */
    text-shadow: 0 0 10px #ff0000;
}

.hero-section h2, 
.hero-section h3 {
    margin-top: 8px; /* less space before "SPEED IS POWER" */
}
.hero-section h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    margin: 2px 0;
    
    /* rainbow glow for CELERITY LEGACY 1 */
    background: linear-gradient(
        90deg,
        #ff0000, /* red */
        #00ffff, /* light blue */
        #ffffff, /* white */
        #ffff00, /* yellow */
        #00ff00  /* green */
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    animation: celerityGlow 4s linear infinite;
    
    /* multi-color glow */
    text-shadow: 
        0 0 10px #ff0000,
        0 0 20px #00ffff,
        0 0 30px #ffff00,
        0 0 40px #00ff00;
}

@keyframes celerityGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 22px;
        letter-spacing: 2px;
    }
}
/* 1. MAKE "SPEED IS POWER" SMALLER */
.hero-section p:first-of-type {
    font-size: 14px; /* smaller */
    letter-spacing: 6px;
    color: #cccccc;
    margin: 8px 0 15px 0;
    text-transform: uppercase;
}

/* 2. MAKE "THE FIRST CINEMATIC SPEEDSTER SUPERHERO GAME" RED */
.hero-section h2 {
    font-size: 20px;
    color: #ff0000; /* red */
    letter-spacing: 1.5px;
    line-height: 1.4;
    margin: 10px 0;
    text-shadow: 0 0 8px #ff0000; /* red glow */
    font-weight: 700;
}

/* Mobile version */
@media (max-width: 768px) {
    .hero-section p:first-of-type {
        font-size: 12px;
        letter-spacing: 4px;
    }
    .hero-section h2 {
        font-size: 16px;
    }
}