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

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

html{
scroll-behavior:smooth;
overflow-x:hidden;
}

body{
font-family:'Inter',sans-serif;
background:#090909;
color:#fff;
overflow-x:hidden;
width:100%;
}

/* =========================
   COLORS
========================= */

:root{
--gold:#FFD54A;
--gold-light:#FFF1A8;
--dark:#090909;
--card:#141414;
--border:rgba(255,213,74,.12);
}

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

.bg{
position:fixed;
inset:0;
z-index:-3;

background:
radial-gradient(circle at 20% 20%,
rgba(255,213,74,.12),
transparent 30%),

radial-gradient(circle at 80% 70%,
rgba(255,213,74,.08),
transparent 35%);
}

/* =========================
   FLOATING ORBS
========================= */

.orb{
position:fixed;
border-radius:50%;
filter:blur(120px);
pointer-events:none;
z-index:-2;
animation:float 10s ease-in-out infinite;
}

.orb1{
width:300px;
height:300px;
background:#FFD54A;
top:-100px;
left:-100px;
opacity:.10;
}

.orb2{
width:350px;
height:350px;
background:#FFD54A;
bottom:-100px;
right:-100px;
opacity:.07;
animation-delay:2s;
}

@keyframes float{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(30px);
}

}

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

nav{
position:fixed;
top:20px;
left:50%;

transform:translateX(-50%);

width:min(95%,1100px);

padding:15px 20px;

display:flex;
align-items:center;
justify-content:space-between;

background:rgba(10,10,10,.78);

backdrop-filter:blur(25px);

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

border-radius:22px;

z-index:999;

transition:.4s;
}

nav.hide{
transform:translate(-50%,-120px);
}

.logo{
font-size:1.15rem;
font-weight:800;

color:var(--gold);

text-shadow:
0 0 15px rgba(255,213,74,.3);
}

/* =========================
   HAMBURGER
========================= */

#checkbox{
display:none;
}

.toggle{

width:42px;
height:42px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

gap:6px;

cursor:pointer;

transition:.4s;
}

.bars{

width:28px;
height:3px;

background:var(--gold);

border-radius:999px;

transition:.4s;
}

#checkbox:checked + .toggle #bar1{
transform:
translateY(9px)
rotate(45deg);
}

#checkbox:checked + .toggle #bar2{
opacity:0;
}

#checkbox:checked + .toggle #bar3{
transform:
translateY(-9px)
rotate(-45deg);
}

#checkbox:checked + .toggle{
transform:rotate(180deg);
}

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

.mobile-menu{

position:absolute;

top:85px;
right:0;

width:280px;

padding:12px;

display:flex;
flex-direction:column;
gap:8px;

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

backdrop-filter:
blur(30px);

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

border-radius:24px;

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

opacity:0;
visibility:hidden;

transform:
translateY(-20px)
scale(.95);

transition:.35s ease;
}

#checkbox:checked ~ .mobile-menu{

opacity:1;
visibility:visible;

transform:
translateY(0)
scale(1);
}

.mobile-menu a{

display:flex;
align-items:center;
gap:12px;

padding:15px;

border-radius:16px;

text-decoration:none;

font-weight:600;

color:white;

transition:.3s;
}

.mobile-menu a span{
color:var(--gold);
font-size:1.1rem;
}

.mobile-menu a:hover{

background:
rgba(255,213,74,.08);

color:var(--gold);

transform:
translateX(8px);
}

.menu-btn-gold{

justify-content:center;

background:
linear-gradient(
135deg,
#FFD54A,
#ffb300
);

color:black !important;

font-weight:800;
}

.menu-btn-gold:hover{

transform:
translateY(-3px) !important;

box-shadow:
0 0 25px
rgba(255,213,74,.25);
}

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

.hero{

position:relative;

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

padding:20px;
}

.hero::before{

content:"";

position:absolute;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(255,213,74,.12),
transparent 70%
);

filter:blur(100px);

z-index:-1;
}

.hero-content{
max-width:850px;
}

.badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:
rgba(255,213,74,.08);

border:
1px solid rgba(255,213,74,.15);

color:var(--gold);

margin-bottom:25px;
}

.hero h1{

font-size:
clamp(3rem,8vw,6rem);

font-weight:900;

line-height:1.05;

margin-bottom:20px;
}

.hero h1 span{

background:
linear-gradient(
135deg,
#FFD54A,
#FFF1A8
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{

max-width:700px;

margin:auto;

font-size:1.1rem;

line-height:1.8;

color:#a5a5a5;
}

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

.buttons{

display:flex;
justify-content:center;
align-items:center;

gap:15px;

flex-wrap:wrap;

margin-top:35px;
}

.btn{

padding:14px 26px;

border-radius:14px;

font-weight:600;

text-decoration:none;

transition:.3s;
}

.primary{

background:
linear-gradient(
135deg,
#FFD54A,
#ffb300
);

color:black;
}

.primary:hover{

transform:
translateY(-4px);

box-shadow:
0 0 30px
rgba(255,213,74,.25);
}

.secondary{

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

color:white;
}

.secondary:hover{

border-color:var(--gold);

background:
rgba(255,213,74,.05);
}

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

.grid{

max-width:1100px;

margin:auto;

padding:80px 20px;

display:grid;

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

gap:25px;
}

.card{

background:#121212;

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

padding:30px;

border-radius:22px;

transition:.35s;

position:relative;

overflow:hidden;
}

.card::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
transparent,
rgba(255,213,74,.03)
);

opacity:0;

transition:.3s;
}

.card:hover::before{
opacity:1;
}

.card:hover{

transform:
translateY(-10px);

border-color:var(--gold);

box-shadow:
0 0 40px
rgba(255,213,74,.12);
}

.card h3{

font-size:1.1rem;

margin-bottom:12px;
}

.card p{

color:#9d9d9d;

line-height:1.7;
}

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

@media(max-width:768px){

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

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

.mobile-menu{
width:250px;
}

.buttons{
flex-direction:column;
}

.btn{
width:100%;
max-width:260px;
}

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

.footer{
    margin-top:80px;
    padding:40px 20px;

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

    background:rgba(10,10,10,.4);

    backdrop-filter:blur(20px);
}

.footer-content{
    max-width:1100px;

    margin:auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    gap:12px;
}

.footer-logo{
    font-size:1.2rem;
    font-weight:800;

    color:var(--gold);

    text-shadow:
    0 0 15px rgba(255,213,74,.25);
}

.footer p{
    color:#9d9d9d;
    font-size:.95rem;
}

.footer span{
    color:#666;
    font-size:.85rem;
}