/* ---------------------------
GLOBAL RESET
--------------------------- */

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

html,body{
height:100%;
}

body{
font-family:system-ui, Arial, Helvetica, sans-serif;
background:#0F1E3A;
color:#F8F4EC;
overflow-x:hidden;
}


/* ---------------------------
COLOR VARIABLES
--------------------------- */

:root{

--navy-main:#0F1E3A;
--navy-light:#1A2E55;

--gold:#D4A63C;
--gold-hover:#C18F2F;

--off-white:#F8F4EC;

--red-accent:#B22234;

--soft-white:rgba(248,244,236,.85);

--line:rgba(248,244,236,.14);

--shadow:0 20px 45px rgba(0,0,0,.35);

}


/* ---------------------------
MAIN CONTAINER
--------------------------- */

.coming-soon{
position:relative;
min-height:100vh;
padding:80px 25px;
background:linear-gradient(
180deg,
#0F1E3A 0%,
#09172d 100%
);
}


/* ---------------------------
HELPERS
--------------------------- */

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}


/* ---------------------------
VIDEO BACKGROUND
--------------------------- */

.video-background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
overflow:hidden;
}

.video-background video{
width:100%;
height:100%;
object-fit:cover;
}

.video-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
linear-gradient(
180deg,
rgba(15,30,58,.45) 0%,
rgba(15,30,58,.68) 45%,
rgba(9,23,45,.9) 100%
);
}


/* ---------------------------
MASTHEAD
--------------------------- */

.site-header{
position:relative;
z-index:2;
text-align:center;
margin-bottom:50px;
}

.site-title{
font-size:clamp(3rem,6vw,4.5rem);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:#F8F4EC;
border-bottom:2px solid rgba(212,166,60,.6);
padding-bottom:14px;
max-width:900px;
margin:auto;
text-shadow:0 0 15px rgba(212,166,60,.25);
}


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

.hero{
position:relative;
z-index:2;
max-width:900px;
margin:auto;
text-align:center;
padding:44px 40px;
border-radius:26px;
background:rgba(10,20,39,.45);
border:1px solid var(--line);
backdrop-filter:blur(8px);
box-shadow:var(--shadow);
margin-bottom:40px;
}

.hero-kicker{
display:inline-block;
margin-bottom:14px;
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(212,166,60,.35);
background:rgba(212,166,60,.08);
color:var(--gold);
font-size:.8rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
}

.hero-headline{
font-size:clamp(2.2rem,4vw,3.4rem);
font-weight:700;
line-height:1.15;
margin-bottom:16px;
}

.hero-headline span{
display:block;
font-size:.58em;
margin-top:10px;
color:var(--gold);
letter-spacing:.04em;
}

.subtext{
max-width:720px;
margin:auto;
font-size:1.05rem;
line-height:1.8;
color:var(--soft-white);
}

.launch-badge{
display:inline-block;
margin-bottom:18px;
padding:8px 14px;
border-radius:999px;
background:rgba(178,34,52,.18);
border:1px solid rgba(178,34,52,.28);
color:#f8d8dc;
font-size:.85rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}


/* ---------------------------
BUTTON
--------------------------- */

.hero-actions{
margin-top:28px;
}

.contact-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 26px;
border-radius:999px;
background:var(--gold);
color:var(--navy-main);
text-decoration:none;
font-weight:700;
transition:.25s;
box-shadow:0 12px 25px rgba(212,166,60,.25);
}

.contact-btn:hover{
background:var(--gold-hover);
transform:translateY(-2px);
}


/* ---------------------------
SIGNUP SECTION
--------------------------- */

.signup-section{
margin-top:32px;
padding:26px 22px;
border-radius:22px;
background:rgba(255,255,255,.04);
border:1px solid rgba(248,244,236,.12);
max-width:760px;
margin-left:auto;
margin-right:auto;
}

.signup-title{
font-size:1.35rem;
margin-bottom:8px;
color:var(--off-white);
}

.signup-note{
font-size:.98rem;
line-height:1.6;
color:var(--soft-white);
margin-bottom:18px;
}

.signup-note a{
color:var(--gold);
text-decoration:none;
}

.signup-note a:hover{
color:var(--gold-hover);
text-decoration:underline;
}

.form-note{
font-size:.9rem;
line-height:1.6;
color:var(--soft-white);
margin-top:14px;
}


/* ---------------------------
SIGNUP FORM
--------------------------- */

.signup-form{
margin:0 auto;
max-width:680px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

.signup-form input{
flex:1 1 200px;
min-height:52px;
padding:0 18px;
border-radius:999px;
border:1px solid rgba(248,244,236,.2);
background:rgba(255,255,255,.08);
color:var(--off-white);
outline:none;
font-size:1rem;
min-width:0;
}

.signup-form input::placeholder{
color:rgba(248,244,236,.62);
}

.signup-form input:focus{
border-color:rgba(212,166,60,.8);
box-shadow:0 0 0 4px rgba(212,166,60,.12);
}

.signup-form button{
min-height:52px;
padding:0 22px;
border:none;
border-radius:999px;
background:var(--gold);
color:var(--navy-main);
font-weight:700;
cursor:pointer;
transition:.25s;
white-space:nowrap;
}

.signup-form button:hover{
background:var(--gold-hover);
transform:translateY(-2px);
}


/* ---------------------------
FORM SUCCESS MESSAGE
--------------------------- */

.success-message{
font-size:1.1rem;
color:var(--gold);
font-weight:600;
margin-top:20px;
text-align:center;
}

.error-message{
font-size:1.1rem;
color:#f8d8dc;
font-weight:600;
margin-top:20px;
text-align:center;
}

/* ---------------------------
TOPICS SECTION
--------------------------- */

.topics-section,
.social-section{
position:relative;
z-index:2;
max-width:1100px;
margin:auto;
text-align:center;
}

.topics-section h2,
.social-section h2{
font-size:clamp(1.9rem,4vw,2.6rem);
margin-bottom:10px;
}

.topics-intro,
.social-intro{
color:var(--soft-white);
margin-bottom:34px;
}


/* ---------------------------
CARD GRID
--------------------------- */

.cards-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}


/* ---------------------------
FLIP CARDS
--------------------------- */

.flip-card{
perspective:1200px;
transition:transform .25s ease;
}

.flip-card:hover{
transform:translateY(-6px);
}

.flip-card-inner{
position:relative;
width:100%;
height:270px;
transform-style:preserve-3d;
transition:transform .8s;
}

.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner{
transform:rotateY(180deg);
}

.flip-card-face{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:22px;
padding:25px;
border:1px solid var(--line);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
backface-visibility:hidden;
box-shadow:var(--shadow);
}

.flip-card-front{
background:rgba(10,20,39,.5);
backdrop-filter:blur(8px);
}

.flip-card-back{
background:linear-gradient(
180deg,
rgba(26,46,85,.96),
rgba(15,30,58,.96)
);
transform:rotateY(180deg);
}


/* ---------------------------
ICON STYLING
--------------------------- */

.card-icon{
display:flex;
justify-content:center;
align-items:center;
width:70px;
height:70px;
margin-bottom:16px;
border-radius:50%;
background:rgba(212,166,60,.1);
border:1px solid rgba(212,166,60,.25);
box-shadow:0 0 20px rgba(212,166,60,.08);
}

.card-icon i{
font-size:32px;
color:var(--gold);
transition:.3s;
}

.flip-card:hover .card-icon i{
color:var(--gold-hover);
transform:scale(1.08);
}


/* ---------------------------
CARD TEXT
--------------------------- */

.flip-card h3{
margin-bottom:10px;
font-size:1.3rem;
}

.flip-card p{
color:var(--soft-white);
font-size:.97rem;
line-height:1.6;
}

.flip-card-back h3{
color:var(--gold);
}


/* ---------------------------
SOCIAL SECTION
--------------------------- */

.social-section{
margin-top:48px;
}

.social-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:16px;
}

.social-links a{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 18px;
border-radius:999px;
background:rgba(10,20,39,.45);
border:1px solid var(--line);
backdrop-filter:blur(8px);
color:var(--off-white);
text-decoration:none;
transition:.25s;
}

.social-links a:hover{
transform:translateY(-2px);
border-color:rgba(212,166,60,.45);
box-shadow:0 12px 24px rgba(0,0,0,.2);
}

.social-links i{
color:var(--gold);
}


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

.site-footer{
position:relative;
z-index:2;
margin-top:60px;
padding:22px;
background:rgba(10,20,39,.75);
border-top:2px solid var(--gold);
backdrop-filter:blur(6px);
}

.footer-inner{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
font-size:.9rem;
color:var(--soft-white);
}

.built-by a,
.serviss-note a{
color:var(--gold);
font-weight:600;
text-decoration:none;
transition:.25s;
}

.built-by a:hover,
.serviss-note a:hover{
color:var(--gold-hover);
text-decoration:underline;
}

.serviss-note{
width:100%;
text-align:center;
margin-top:6px;
font-size:.85rem;
color:var(--soft-white);
}


/* ---------------------------
RESPONSIVE
--------------------------- */

@media(max-width:1024px){
.cards-grid{
grid-template-columns:repeat(2,1fr);
}

.signup-form{
flex-direction:column;
}

.signup-form input,
.signup-form button{
width:100%;
}
}

@media(max-width:650px){
.hero{
padding:40px 25px;
}

.signup-section{
padding:22px 16px;
}

.cards-grid{
grid-template-columns:1fr;
}

.flip-card-inner{
height:250px;
}

.footer-inner{
flex-direction:column;
text-align:center;
}

.site-title{
font-size:clamp(2.3rem,9vw,3rem);
}
}