/* ===========================================
   HundredToCr
   Premium Fintech Theme
=========================================== */

:root{

--bg:#090909;
--bg2:#111111;
--card:#161616;
--gold:#C8A44D;
--gold2:#E0C57A;
--white:#ffffff;
--gray:#A5A5A5;
--line:#242424;

--radius:18px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

font-family:'Inter',sans-serif;

overflow-x:hidden;

}

/* ========================= */

.noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:.03;

background-image:
radial-gradient(circle,#fff 1px,transparent 1px);

background-size:12px 12px;

}

/* ========================= */

.container{

width:min(1200px,92%);

margin:auto;

}

/* ========================= */

a{

text-decoration:none;

color:white;

}

/* ========================= */

section{

padding:110px 0;

}

/* ========================= */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 6%;

z-index:999;

backdrop-filter:blur(14px);

background:rgba(9,9,9,.72);

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

}

.brand{

display:flex;

align-items:center;

gap:16px;

}

.logo{

width:52px;

}

.brand h2{

font-family:'Sora',sans-serif;

font-size:22px;

}

.brand span{

font-size:13px;

color:var(--gray);

}

/* ========================= */

.nav-links{

display:flex;

gap:34px;

align-items:center;

}

.nav-links a{

transition:.35s;

font-size:15px;

}

.nav-links a:hover{

color:var(--gold);

}

/* ========================= */

.subscribe{

padding:12px 24px;

background:var(--gold);

color:black!important;

border-radius:50px;

font-weight:700;

}

.subscribe:hover{

transform:translateY(-2px);

box-shadow:0 10px 30px rgba(200,164,77,.25);

}

/* ========================= */

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 420px;

align-items:center;

gap:80px;

width:min(1200px,92%);

margin:auto;

}

/* ========================= */

.hero-top{

letter-spacing:4px;

font-size:12px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:25px;

}

/* ========================= */

.hero h1{

font-family:'Sora',sans-serif;

font-size:74px;

line-height:1.1;

max-width:760px;

}

.hero span{

color:var(--gold);

}

/* ========================= */

.hero p{

margin-top:30px;

max-width:600px;

font-size:20px;

line-height:1.9;

color:var(--gray);

}

/* ========================= */

.hero-buttons{

display:flex;

gap:18px;

margin-top:45px;

}

.primary{

background:var(--gold);

color:black;

padding:18px 34px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.primary:hover{

transform:translateY(-3px);

box-shadow:0 18px 40px rgba(200,164,77,.35);

}

.secondary{

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

padding:18px 34px;

border-radius:50px;

transition:.35s;

}

.secondary:hover{

border-color:var(--gold);

}

/* ========================= */

.hero-logo{

display:flex;

justify-content:center;

align-items:center;

}

.hero-logo img{

width:340px;

filter:drop-shadow(0 0 60px rgba(200,164,77,.18));

animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0);

}

}

/* ========================= */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-family:'Sora';

font-size:48px;

margin-bottom:18px;

}

.section-title p{

max-width:700px;

margin:auto;

color:var(--gray);

line-height:1.9;

font-size:18px;

}

/* ========================= */

.about{

background:linear-gradient(
180deg,
transparent,
rgba(255,255,255,.02)
);

}

.about p{

max-width:820px;

margin:auto;

text-align:center;

font-size:19px;

line-height:2;

color:var(--gray);

}

/* ========================= */

.center{

text-align:center;

font-size:48px;

font-family:'Sora';

margin-bottom:80px;

}

/* ===========================================
   ROADMAP
=========================================== */

#roadmap{
    position:relative;
}

.timeline{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:70px;
    flex-wrap:wrap;
    gap:20px;

}

.line{

    flex:1;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

    min-width:60px;

}

.milestone{

    width:150px;

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

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

    backdrop-filter:blur(12px);

    border-radius:18px;

    padding:25px;

    transition:.35s;

    text-align:center;

}

.milestone:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:0 25px 60px rgba(200,164,77,.08);

}

.milestone span{

    color:var(--gold);

    font-weight:700;

    letter-spacing:2px;

    font-size:13px;

}

.milestone h3{

    margin-top:18px;

    font-size:34px;

    font-family:Sora;

}

.milestone p{

    margin-top:10px;

    color:var(--gray);

}

/* ===========================================
   QUOTE
=========================================== */

.quote{

    padding:170px 0;

    text-align:center;

}

.quote h2{

    font-size:64px;

    font-family:Sora;

    max-width:900px;

    margin:auto;

    line-height:1.3;

    color:white;

}

.quote h2::after{

    content:"";

    display:block;

    width:140px;

    height:3px;

    margin:45px auto;

    background:var(--gold);

}

/* ===========================================
   VIDEOS
=========================================== */

#videos{

    background:#0d0d0d;

}

#featured-video{

    margin-bottom:60px;

}

.featured{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    align-items:center;

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

    border-radius:24px;

    overflow:hidden;

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

}

.featured iframe{

    width:100%;
    height:420px;
    border:none;

}

.featured-info{

    padding:40px;

}

.featured-info h2{

    font-family:Sora;

    margin-bottom:20px;

}

.featured-info p{

    color:var(--gray);

    line-height:1.8;

}

#video-grid{

    display:grid;

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

    gap:35px;

}

.video-card{

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

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

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

}

.video-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}

.video-card img{

    width:100%;

    display:block;

}

.video-card h3{

    padding:22px;

    font-size:19px;

}

.video-card p{

    padding:0 22px 25px;

    color:var(--gray);

}

/* ===========================================
   CTA
=========================================== */

.cta{

    text-align:center;

}

.cta h2{

    font-family:Sora;

    font-size:56px;

}

.cta p{

    color:var(--gray);

    margin:20px auto 40px;

    max-width:600px;

    font-size:18px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.youtube{

    padding:18px 34px;

    background:#FF0000;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.youtube:hover{

    transform:translateY(-3px);

}

.instagram{

    padding:18px 34px;

    background:linear-gradient(
        135deg,
        #833AB4,
        #FD1D1D,
        #FCAF45
    );

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.instagram:hover{

    transform:translateY(-3px);

}

/* ===========================================
   FAQ
=========================================== */

#faq{

    background:#0c0c0c;

}

#faq h2{

    text-align:center;

    font-family:Sora;

    font-size:48px;

    margin-bottom:60px;

}

.faq{

    display:grid;

    gap:25px;

}

.faq div{

    padding:35px;

    border-radius:18px;

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

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

}

.faq h3{

    margin-bottom:15px;

    font-size:22px;

}

.faq p{

    color:var(--gray);

    line-height:1.9;

}

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

footer{

    padding:80px 0;

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

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:30px;

}

.footer-logo{

    width:55px;

    margin-bottom:15px;

}

.footer h3{

    font-family:Sora;

    margin-bottom:12px;

}

.footer p{

    color:var(--gray);

}

.footer a{

    display:block;

    margin:10px 0;

    color:var(--gray);

    transition:.3s;

}

.footer a:hover{

    color:var(--gold);

}

/* ===========================================
   RESPONSIVE
=========================================== */

@media(max-width:1000px){

.hero{

    grid-template-columns:1fr;
    text-align:center;
    padding-top:130px;

}

.hero-logo{

    order:-1;

}

.hero p{

    margin:auto;
    margin-top:30px;

}

.hero-buttons{

    justify-content:center;

}

.featured{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.nav-links{

    display:none;

}

.hero h1{

    font-size:48px;

}

.section-title h2,
.center,
#faq h2,
.cta h2{

    font-size:36px;

}

.quote h2{

    font-size:40px;

}

.timeline{

    flex-direction:column;

}

.line{

    width:2px;
    height:60px;

}

.footer{

    text-align:center;
    justify-content:center;

}

}