/* ================= GLOBAL ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#060b16;
color:white;
overflow-x:hidden;
}

a{
text-decoration:none;
}

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

.navbar{
padding:16px 5%;
background:rgba(7,12,22,.95);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.06);
position:sticky;
top:0;
z-index:999;
width:100%;
}

.nav-wrap{
max-width:1300px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.logo{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}

.logo-icon{
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#ff1744,#ff7b00);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:800;
color:white;
box-shadow:0 12px 30px rgba(255,90,0,.35);
}

.logo-text h2{
font-size:26px;
font-weight:800;
line-height:1;
color:white;
}

.logo-text span{
font-size:12px;
color:#94a3b8;
}

.nav-links{
display:flex;
align-items:center;
gap:22px;
}

.nav-links a{
color:#dbe4ff;
font-weight:500;
transition:.3s;
}

.nav-links a:hover{
color:white;
}

.sell-btn{
background:linear-gradient(90deg,#ff1744,#ff7b00);
padding:12px 22px;
border-radius:14px;
color:white !important;
font-weight:700;
box-shadow:0 10px 25px rgba(255,90,0,.25);
}

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

.menu-btn{
display:none;
cursor:pointer;
flex-direction:column;
gap:5px;
}

.menu-btn span{
width:24px;
height:3px;
background:white;
border-radius:20px;
}

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

.hero{
max-width:1200px;
margin:auto;
padding:80px 20px 60px;
text-align:center;
position:relative;
}

.hero::before{
content:'';
position:absolute;
top:-180px;
left:50%;
transform:translateX(-50%);
width:650px;
height:650px;
background:
radial-gradient(
circle,
rgba(255,80,0,.16),
transparent 70%
);
z-index:-1;
}

.hero-badge{
display:inline-block;
padding:12px 22px;
border-radius:999px;
background:#13203a;
border:1px solid rgba(255,255,255,.05);
font-size:14px;
font-weight:600;
margin-bottom:30px;
}

.hero h1{
font-size:68px;
font-weight:800;
line-height:1.15;
margin-bottom:18px;
}

.gradient{
background:
linear-gradient(
90deg,
#ff0000,
#ff4fd8,
#1877f2
);

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


.hero-buttons{
display:flex;
justify-content:center;
gap:16px;
margin-top:35px;
flex-wrap:wrap;
}

.hero-btn{
padding:15px 30px;
border-radius:16px;
font-weight:700;
transition:.3s;
}

.hero-btn:hover{
transform:translateY(-3px);
}

.primary-btn{
background:#2563eb;
color:white;
}

.secondary-btn{
background:white;
color:black;
}

/* ================= TRUST BOX ================= */

.trusted{
max-width:1200px;
margin:auto;
padding:0 20px 60px;
}

.trust-box{
background:
linear-gradient(
180deg,
#121c2f,
#0b1322
);

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

border-radius:30px;

padding:28px;

display:grid;
grid-template-columns:repeat(4,1fr);

gap:18px;
}

.trust-card{
background:#182338;
padding:24px;
border-radius:22px;
text-align:center;
}

.trust-card h3{
font-size:28px;
font-weight:800;
margin-bottom:8px;
}

.trust-card p{
font-size:14px;
color:#94a3b8;
}

/* ================= SECTIONS ================= */

.section{
max-width:1200px;
margin:auto;
padding:40px 20px;
}

.section-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:25px;
}

.section-title{
font-size:42px;
font-weight:800;
margin-bottom:8px;
}

.section-sub{
color:#94a3b8;
line-height:1.8;
}

.view-btn{
padding:12px 18px;
border-radius:14px;
background:#182338;
color:white;
font-weight:600;
}

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

.card-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

/* ================= CARD ================= */

.card{
background:
linear-gradient(
180deg,
#121c2f,
#0b1322
);

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

border-radius:28px;

padding:28px;

position:relative;

transition:.3s;
}

.card:hover{
transform:translateY(-5px);
border-color:rgba(255,255,255,.12);
}

.verify-badge{
position:absolute;
top:18px;
right:18px;

padding:8px 14px;

background:
linear-gradient(
135deg,
#22c55e,
#16a34a
);

border-radius:999px;

font-size:12px;
font-weight:700;
}

.card-title{
font-size:30px;
font-weight:800;
margin-top:20px;
margin-bottom:20px;
padding-right:90px;
}

/* ================= STATS ================= */

.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-bottom:18px;
}

.stat{
background:#182338;
padding:18px;
border-radius:18px;
text-align:center;
}

.stat h3{
font-size:24px;
font-weight:800;
margin-bottom:6px;
}

.stat p{
font-size:13px;
color:#94a3b8;
}

/* ================= DETAILS ================= */

.details{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.detail{
background:#182338;
padding:16px;
border-radius:18px;
}

.detail span{
display:block;
font-size:12px;
color:#94a3b8;
margin-bottom:6px;
}

.detail h4{
font-size:15px;
font-weight:600;
}

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


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

.footer{
padding:45px 5%;
border-top:1px solid rgba(255,255,255,.06);
margin-top:60px;
background:#070d18;
}

.footer-wrap{
max-width:1300px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer-left h3{
font-size:26px;
font-weight:800;
margin-bottom:10px;
}

.footer-left p{
color:#94a3b8;
font-size:14px;
max-width:520px;
line-height:1.8;
}

.footer-links{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.footer-links a{
color:#dbe4ff;
transition:.3s;
}

.footer-links a:hover{
color:white;
}

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

.footer{
margin-top:80px;
padding:70px 5% 30px;
background:#070d18;
border-top:1px solid rgba(255,255,255,.06);
}

.footer-wrap{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
}

.footer-logo{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
}

.footer-logo .logo-icon{
width:50px;
height:50px;
}

.footer-about p{
color:#94a3b8;
line-height:1.9;
font-size:14px;
max-width:500px;
}

.footer-title{
font-size:18px;
font-weight:700;
margin-bottom:18px;
color:white;
}

.footer-links{
display:flex;
flex-direction:column;
gap:12px;
}

.footer-links a{
text-decoration:none;
color:#94a3b8;
transition:.3s;
font-size:14px;
}

.footer-links a:hover{
color:white;
padding-left:4px;
}

.footer-bottom{
margin-top:50px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.06);
text-align:center;
color:#64748b;
font-size:14px;
}

/* ================= TABLET ================= */

@media(max-width:900px){

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

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

.section-title{
font-size:34px;
}

}

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

@media(max-width:600px){

.navbar{
padding:14px 16px;
}

.logo-icon{
width:44px;
height:44px;
font-size:17px;
border-radius:14px;
}

.logo-text h2{
font-size:20px;
}

.logo-text span{
font-size:11px;
}

.menu-btn{
display:flex;
}

.nav-links{
display:none;
position:absolute;
top:78px;
left:0;
width:100%;
background:#0b1322;
padding:20px;
flex-direction:column;
gap:16px;
border-top:1px solid rgba(255,255,255,.05);
}

.nav-links.active{
display:flex;
}

.hero{
padding:60px 16px;
}

.hero h1{
font-size:38px;
}


.hero-buttons{
flex-direction:column;
}

.hero-btn{
width:100%;
}

.trust-box{
grid-template-columns:1fr 1fr;
padding:16px;
gap:10px;
border-radius:24px;
}

.trust-card{
padding:16px;
border-radius:18px;
}

.trust-card h3{
font-size:20px;
}

.trust-card p{
font-size:12px;
}

.section{
padding:35px 16px;
}

.section-title{
font-size:28px;
}

.section-head{
flex-direction:column;
align-items:flex-start;
}

.card{
padding:20px;
border-radius:22px;
}

.card-title{
font-size:22px;
padding-right:0;
}

.stats,
.details{
gap:10px;
}

.stat,
.detail{
padding:12px;
}

.btns{
flex-direction:column;
}

.footer{
padding:40px 16px;
}

.footer-wrap{
flex-direction:column;
align-items:flex-start;
}

}


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

.navbar{
position:sticky;
top:0;
z-index:999;
width:100%;
padding:16px 5%;
background:rgba(7,12,22,.95);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-container{
max-width:1300px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.logo-wrap{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}

.logo-icon{
width:56px;
height:56px;
border-radius:18px;
background:linear-gradient(135deg,#ff1744,#ff7b00);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:800;
color:#fff;
box-shadow:0 15px 35px rgba(255,90,0,.35);
}

.logo-text h2{
font-size:28px;
font-weight:800;
line-height:1;
color:#fff;
}

.logo-text span{
font-size:12px;
color:#94a3b8;
}

.nav-links{
display:flex;
align-items:center;
gap:25px;
}

.nav-links a{
color:#dbe4ff;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.nav-links a:hover{
color:white;
}

.sell-btn{
background:linear-gradient(90deg,#1877f2,#2563eb);
padding:13px 22px;
border-radius:14px;
font-weight:700;
color:#fff !important;
box-shadow:0 12px 25px rgba(37,99,235,.25);
}

.sell-btn:hover{
transform:translateY(-2px);
}

/* Mobile Menu */

.menu-btn{
display:none;
cursor:pointer;
flex-direction:column;
gap:5px;
}

.menu-btn span{
width:28px;
height:3px;
background:white;
border-radius:20px;
}

@media(max-width:900px){

.footer-wrap{
grid-template-columns:1fr;
gap:35px;
}

.nav-links{
display:none;
position:absolute;
top:85px;
left:0;
width:100%;
background:#0f172a;
padding:20px;
flex-direction:column;
border-top:1px solid rgba(255,255,255,.08);
}

.nav-links.active{
display:flex;
}

.menu-btn{
display:flex;
}

.logo-text h2{
font-size:22px;
}

.logo-icon{
width:48px;
height:48px;
font-size:18px;
}

}


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html,
body{
overflow-x:hidden;
}

body{
background:#060b16;
color:white;
min-height:100vh;
}

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

.bg-blur{
position:fixed;
top:-200px;
left:50%;
transform:translateX(-50%);
width:700px;
height:700px;
background:radial-gradient(circle,rgba(255,90,0,.15),transparent 70%);
z-index:-1;
}

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

.navbar{
padding:16px 5%;
background:rgba(7,12,22,.94);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.06);
position:sticky;
top:0;
z-index:999;
}

.nav-container{
max-width:1300px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo-wrap{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}

.logo-icon{
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#ff1744,#ff7b00);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:800;
color:white;
box-shadow:0 12px 30px rgba(255,90,0,.35);
}

.logo-text h2{
font-size:24px;
font-weight:800;
line-height:1;
color:white;
}

.logo-text span{
font-size:12px;
color:#94a3b8;
}

.back-home{
background:#111c2f;
border:1px solid rgba(255,255,255,.08);
padding:12px 18px;
border-radius:14px;
text-decoration:none;
color:white;
font-weight:600;
transition:.3s;
}

.back-home:hover{
background:#1b2940;
}

/* ================= WRAPPER ================= */

.wrapper{
max-width:1250px;
margin:auto;
padding:50px 20px 70px;
display:flex;
flex-direction:column;
gap:28px;
}

/* ================= CARDS ================= */

.card{
background:linear-gradient(180deg,#121c2f,#0b1322);
border:1px solid rgba(255,255,255,.06);
border-radius:32px;
padding:32px;
position:relative;
overflow:hidden;
}

.card::before{
content:'';
position:absolute;
top:-80px;
right:-80px;
width:180px;
height:180px;
background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);
}

/* ================= FORM ================= */

.form-title{
font-size:42px;
font-weight:800;
margin-bottom:12px;
}

.form-sub{
color:#94a3b8;
margin-bottom:30px;
font-size:16px;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.input{
width:100%;
background:#172235;
border:1px solid rgba(255,255,255,.06);
padding:17px 18px;
border-radius:18px;
outline:none;
color:white;
font-size:15px;
transition:.3s;
}

.input:focus{
border-color:#ff6b00;
box-shadow:0 0 0 3px rgba(255,107,0,.12);
}

textarea{
height:130px;
resize:none;
grid-column:span 2;
}

.buy-btn{
width:100%;
margin-top:10px;
padding:18px;
border:none;
border-radius:22px;
font-size:18px;
font-weight:700;
background:linear-gradient(90deg,#ff1744,#ff7b00);
color:white;
cursor:pointer;
transition:.3s;
box-shadow:0 14px 30px rgba(255,90,0,.25);
}

.buy-btn:hover{
transform:translateY(-3px);
}

.note{
margin-top:24px;
background:#172235;
padding:22px;
border-radius:22px;
line-height:2;
color:#dbe4ff;
border:1px solid rgba(255,255,255,.05);
}

/* ================= PROFILE ================= */

.profile-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:25px;
flex-wrap:wrap;
}

.badge{
background:#2563eb;
padding:10px 16px;
border-radius:40px;
font-size:13px;
font-weight:700;
}

.price-tag{
background:linear-gradient(90deg,#ff1744,#ff7b00);
padding:14px 22px;
border-radius:18px;
font-size:22px;
font-weight:800;
box-shadow:0 12px 25px rgba(255,90,0,.22);
}

.title{
font-size:38px;
font-weight:800;
line-height:1.3;
margin-bottom:26px;
}

.stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:20px;
}

.stat{
background:#172235;
padding:24px;
border-radius:22px;
text-align:center;
}

.stat h3{
font-size:34px;
font-weight:800;
margin-bottom:8px;
}

.stat p{
color:#cbd5e1;
font-size:14px;
}

.details{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:10px;
}

.detail{
background:#172235;
padding:18px;
border-radius:20px;
}

.detail span{
display:block;
font-size:13px;
color:#94a3b8;
margin-bottom:8px;
}

.detail h4{
font-size:18px;
font-weight:700;
word-break:break-word;
}

.detail a{
color:#60a5fa;
text-decoration:none;
}

/* ================= TRUST ================= */

.trust-strip{
margin-top:22px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}

.trust-box{
background:#172235;
padding:18px 12px;
border-radius:18px;
text-align:center;
border:1px solid rgba(255,255,255,.04);
}

.trust-box h5{
font-size:16px;
font-weight:700;
margin-bottom:5px;
}

.trust-box p{
font-size:12px;
color:#94a3b8;
}

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

@media(max-width:900px){

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

textarea{
grid-column:span 1;
}

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

.trust-strip{
grid-template-columns:1fr 1fr;
}

.form-title{
font-size:34px;
}

.title{
font-size:30px;
}

}

@media(max-width:600px){

.navbar{
padding:14px 16px;
}

.wrapper{
padding:30px 14px 60px;
gap:20px;
}

.card{
padding:20px;
border-radius:24px;
}

.logo-icon{
width:44px;
height:44px;
font-size:17px;
border-radius:14px;
}

.logo-text h2{
font-size:20px;
}

.logo-text span{
font-size:11px;
}

.back-home{
padding:10px 14px;
font-size:13px;
}

.form-title{
font-size:28px;
}

.form-sub{
font-size:14px;
}

.input{
padding:15px;
font-size:14px;
border-radius:15px;
}

.buy-btn{
padding:16px;
font-size:16px;
border-radius:18px;
}

.title{
font-size:24px;
margin-bottom:18px;
}


.price-tag{
font-size:18px;
padding:12px 18px;
}

.stats{
gap:10px;
}

.stat{
padding:16px 10px;
border-radius:16px;
}

.stat h3{
font-size:22px;
}

.stat p{
font-size:12px;
}

.details{
gap:10px;
}

.detail{
padding:14px;
border-radius:16px;
}

.detail h4{
font-size:14px;
}

.detail span{
font-size:11px;
}

.trust-strip{
gap:10px;
}

.trust-box{
padding:14px 8px;
border-radius:14px;
}

.trust-box h5{
font-size:13px;
}

.trust-box p{
font-size:11px;
}

.note{
padding:18px;
font-size:14px;
border-radius:18px;
line-height:1.9;
}

}

body{
    font-family:'Poppins',sans-serif;
    color:#fff;

    background:
    radial-gradient(
    circle at top center,
    rgba(255,80,0,.08),
    transparent 40%
    ),

    linear-gradient(
    180deg,
    #08111f 0%,
    #0d1628 50%,
    #08111f 100%
    );

    min-height:100vh;
}

.hero{
    max-width:1200px;
    margin:auto;
    padding:50px 20px 80px;
    text-align:center;
}

.hero-badge{
    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

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

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

    color:#dbe4ff;

    font-size:14px;
    font-weight:600;

    margin-bottom:25px;
}

.hero h1{
    font-size:72px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:22px;
}

.gradient{
background:
linear-gradient(
90deg,
#ff0000,
#ff7b00,
#1877f2
);

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

.hero p{
    max-width:850px;
    margin:auto;
    color:#9fb0cb;
    line-height:1.9;
}

.trusted{
    max-width:1250px;
    margin:auto;
    padding:0 20px 70px;
}

.trust-box{

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

    border-radius:32px;

    padding:25px;

    display:grid;


    gap:20px;

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

.trust-card{

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

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

    border-radius:24px;

    padding:28px 20px;

    text-align:center;

    transition:.3s;
}

.trust-card:hover{

    transform:
    translateY(-6px);

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

.trust-card h3{

    font-size:34px;

    font-weight:800;

    margin-bottom:8px;

    color:white;
}

.trust-card p{

    color:#9fb0cb;

    font-size:14px;
}

.section{
    max-width:1250px;
    margin:auto;
    padding:0 20px 80px;
}

.section-head{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:35px;
}

.section-title{

    font-size:34px;

    font-weight:800;

    margin-bottom:10px;
}

.section-sub{

    color:#94a3b8;

    font-size:15px;
}

.view-btn{

    background:#121d32;

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

    padding:14px 22px;

    border-radius:16px;

    color:white;

    text-decoration:none;

    font-weight:600;
}

.card{

    position:relative;

    background:
    linear-gradient(
    180deg,
    #141f35,
    #0c1527
    );

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

    border-radius:30px;

    padding:28px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    height:100%;

    transition:.35s;
}

.card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(255,255,255,.12);

    box-shadow:
    0 20px 40px rgba(0,0,0,.25);
}

.verify-badge{

    position:absolute;

    right:20px;
    top:42px;

    padding:8px 16px;

    border-radius:50px;

    background:
    rgba(34,197,94,.15);

    border:
    1px solid rgba(34,197,94,.25);

    color:#4ade80;

    font-size:12px;

    font-weight:700;
}

.card-title{

    font-size:28px;

    font-weight:800;

    margin-top:18px;

    margin-bottom:24px;

    padding-right:80px;
}

.stats{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:14px;

margin-bottom:18px;
}

.stat{

background:#19253d;

padding:20px;

border-radius:18px;

text-align:center;
}

.stat h3{

font-size:26px;
font-weight:800;
}

.stat p{

font-size:13px;
color:#9fb0cb;
}

.details{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:14px;

margin-bottom:24px;
}

.detail{

background:#19253d;

padding:16px;

border-radius:18px;
}

.detail span{

display:block;

font-size:12px;

color:#94a3b8;

margin-bottom:6px;
}

.detail h4{

font-size:15px;

font-weight:600;
}

.btns{

display:flex;

gap:12px;

margin-top:auto;
}

.buy-btn,
.visit-btn{

flex:1;

height:54px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

border-radius:16px;

font-weight:700;

transition:.3s;
}

.buy-btn{

background:
linear-gradient(
90deg,
#ff1744,
#ff7b00
);

color:white;
}

.visit-btn{

background:#19253d;

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

color:white;
}

.visit-btn{

background:#19253d;

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

color:white;
}


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

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

body{
background:#060b16;
color:white;
}

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

.navbar{
padding:16px 5%;
background:rgba(7,12,22,.95);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.06);
position:sticky;
top:0;
z-index:999;
width:100%;
}

.nav-container{
max-width:1300px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.logo-wrap{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}

.logo-icon{
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg,#ff1744,#ff7b00);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:800;
color:white;
box-shadow:0 12px 30px rgba(255,90,0,.35);
}

.logo-text h2{
font-size:26px;
font-weight:800;
line-height:1;
color:white;
}

.logo-text span{
font-size:12px;
color:#94a3b8;
}

.nav-links{
display:flex;
align-items:center;
gap:22px;
}

.nav-links a{
color:#dbe4ff;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.nav-links a:hover{
color:white;
}

.home-btn-nav{
background:linear-gradient(90deg,#ff1744,#ff7b00);
padding:12px 22px;
border-radius:14px;
color:white !important;
font-weight:700;
box-shadow:0 10px 25px rgba(255,90,0,.25);
}

/* ================= PAGE ================= */

.page{
max-width:1200px;
margin:auto;
padding:70px 20px;
}

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

.heading{
text-align:center;
margin-bottom:45px;
position:relative;
}

.heading::before{
content:'';
position:absolute;
top:-140px;
left:50%;
transform:translateX(-50%);
width:600px;
height:600px;
background:radial-gradient(circle,rgba(255,80,0,.18),transparent 70%);
z-index:-1;
}

.heading h1{
font-size:60px;
font-weight:800;
line-height:1.2;
margin-bottom:16px;
}

.gradient{
background:linear-gradient(90deg,#ff1744,#ff7b00);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.heading p{
color:#94a3b8;
font-size:18px;
max-width:720px;
margin:auto;
line-height:1.8;
}

/* ================= TRUST BOX ================= */

.trusted-box{
background:linear-gradient(180deg,#121c2f,#0b1322);
border:1px solid rgba(255,255,255,.06);
border-radius:30px;
padding:28px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-bottom:40px;
}

.trust-item{
background:#182338;
padding:24px;
border-radius:22px;
text-align:center;
}

.trust-item h3{
font-size:28px;
font-weight:800;
margin-bottom:8px;
}

.trust-item p{
font-size:14px;
color:#94a3b8;
}

/* ================= POLICY CARDS ================= */

.card{
background:linear-gradient(180deg,#121c2f,#0b1322);
border:1px solid rgba(255,255,255,.06);
border-radius:30px;
padding:34px;
margin-bottom:24px;
transition:.3s;
}

.card:hover{
transform:translateY(-4px);
border-color:rgba(255,255,255,.12);
}

.card-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
}

.card-icon{
width:56px;
height:56px;
border-radius:18px;
background:linear-gradient(135deg,#ff1744,#ff7b00);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
flex-shrink:0;
}

.card h2{
font-size:30px;
font-weight:800;
}

.card p{
color:#cbd5e1;
line-height:1.9;
margin-bottom:18px;
font-size:15px;
}

.card ul{
padding-left:18px;
color:#cbd5e1;
line-height:1.9;
}

.card li{
margin-bottom:10px;
}

.highlight{
color:#ff8c42;
font-weight:700;
}

/* ================= SUPPORT BOX ================= */

.support-box{
background:linear-gradient(90deg,#ff1744,#ff7b00);
padding:35px;
border-radius:30px;
text-align:center;
margin-top:10px;
}

.support-box h2{
font-size:36px;
font-weight:800;
margin-bottom:14px;
}

.support-box p{
font-size:16px;
line-height:1.8;
max-width:700px;
margin:auto;
margin-bottom:24px;
}

.support-buttons{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
}

.support-btn{
background:white;
color:black;
padding:15px 24px;
border-radius:16px;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.support-btn:hover{
transform:translateY(-3px);
}

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

.footer{
padding:45px 5%;
border-top:1px solid rgba(255,255,255,.06);
margin-top:60px;
background:#070d18;
}

.footer-wrap{
max-width:1300px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.footer-left h3{
font-size:26px;
font-weight:800;
margin-bottom:10px;
}

.footer-left p{
color:#94a3b8;
font-size:14px;
max-width:520px;
line-height:1.8;
}

.footer-right{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.footer-right a{
color:#dbe4ff;
text-decoration:none;
transition:.3s;
}

.footer-right a:hover{
color:white;
}

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

@media(max-width:900px){

.heading h1{
font-size:44px;
}

.trusted-box{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.navbar{
padding:14px 16px;
}

.page{
padding:50px 16px;
}

.heading h1{
font-size:34px;
}

.heading p{
font-size:15px;
}

.logo-icon{
width:44px;
height:44px;
font-size:17px;
border-radius:14px;
}

.logo-text h2{
font-size:20px;
}

.logo-text span{
font-size:11px;
}

.nav-links{
display:none;
}

.trusted-box{
grid-template-columns:1fr 1fr;
padding:16px;
gap:10px;
border-radius:24px;
}

.trust-item{
padding:16px 10px;
border-radius:18px;
}

.trust-item h3{
font-size:20px;
}

.trust-item p{
font-size:12px;
}

.card{
padding:22px;
border-radius:24px;
}

.card-head{
align-items:flex-start;
}

.card-icon{
width:48px;
height:48px;
font-size:20px;
border-radius:14px;
}

.card h2{
font-size:24px;
}

.card p,
.card li{
font-size:14px;
}

.support-box{
padding:24px;
border-radius:24px;
}

.support-box h2{
font-size:28px;
}

.support-box p{
font-size:14px;
}

.support-buttons{
flex-direction:column;
}

.support-btn{
width:100%;
}

.footer{
padding:40px 16px;
}

.footer-wrap{
flex-direction:column;
align-items:flex-start;
}

}



*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#060b16;
color:white;
overflow-x:hidden;
}

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

.bg-glow{
position:fixed;
width:900px;
height:900px;
background:
radial-gradient(
circle,
rgba(255,100,0,.15),
transparent 70%
);
top:-350px;
left:50%;
transform:translateX(-50%);
z-index:-1;
}

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

.blog-hero{
max-width:1100px;
margin:auto;
padding:100px 20px 70px;
text-align:center;
}

.blog-badge{
display:inline-block;
padding:12px 22px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
margin-bottom:25px;
font-size:14px;
font-weight:600;
}

.blog-hero h1{
font-size:72px;
font-weight:800;
line-height:1.1;
margin-bottom:20px;
}

.blog-hero h1 span{
background:
linear-gradient(
90deg,
#ff1744,
#ff7b00
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.blog-hero p{
max-width:800px;
margin:auto;
font-size:18px;
line-height:1.9;
color:#94a3b8;
}

/* ================= BLOG GRID ================= */

.container{
max-width:1400px;
margin:auto;
padding:0 20px 100px;
}

.blog-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(380px,1fr));
gap:35px;
}

/* ================= CARD ================= */

.blog-card{
background:
linear-gradient(
180deg,
rgba(18,28,47,.95),
rgba(11,19,34,.95)
);

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

border-radius:28px;

overflow:hidden;

transition:.4s;

backdrop-filter:blur(15px);
}

.blog-card:hover{
transform:translateY(-10px);
border-color:rgba(255,255,255,.15);

box-shadow:
0 20px 50px rgba(0,0,0,.35);
}

.blog-image{
position:relative;
aspect-ratio:16/9;
overflow:hidden;
}

.blog-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.5s;
}

.blog-card:hover img{
transform:scale(1.08);
}

.blog-overlay{
position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.55),
transparent
);
}

.blog-content{
padding:28px;
}

.blog-date{
font-size:14px;
color:#94a3b8;
margin-bottom:15px;
}

.blog-content h2{
font-size:28px;
font-weight:700;
line-height:1.4;
margin-bottom:15px;
}

.blog-content p{
color:#cbd5e1;
line-height:1.8;
margin-bottom:22px;
}

/* ================= BUTTON ================= */

.read-btn{
display:inline-flex;
align-items:center;
gap:8px;

padding:14px 22px;

border-radius:14px;

background:
linear-gradient(
90deg,
#ff1744,
#ff7b00
);

color:white;
text-decoration:none;
font-weight:700;

transition:.3s;
}

.read-btn:hover{
transform:translateY(-3px);
}

/* ================= PAGINATION ================= */

.pagination{
margin-top:70px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.pagination a{
width:52px;
height:52px;

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

text-decoration:none;

border-radius:14px;

background:#121c2f;

color:white;

font-weight:700;

transition:.3s;
}

.pagination a:hover{
background:#ff6b00;
}

.active-page{
background:
linear-gradient(
90deg,
#ff1744,
#ff7b00
)!important;
}

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

@media(max-width:768px){

.blog-hero{
padding-top:70px;
}

.blog-hero h1{
font-size:42px;
}

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

.blog-content h2{
font-size:22px;
}

}


/* ================= BLOG PAGE ================= */

.blog-hero{
max-width:1200px;
margin:auto;
padding:90px 20px 70px;
text-align:center;
position:relative;
}

.blog-hero::before{
content:'';
position:absolute;
left:50%;
top:-220px;
transform:translateX(-50%);
width:900px;
height:900px;
background:
radial-gradient(circle,
rgba(255,0,0,.12),
transparent 70%);
z-index:-1;
}

.blog-badge{
display:inline-block;
padding:12px 22px;
border-radius:50px;
background:#111827;
border:1px solid rgba(255,255,255,.08);
margin-bottom:22px;
font-weight:600;
font-size:14px;
}

.blog-hero h1{
font-size:64px;
font-weight:800;
line-height:1.15;
margin-bottom:18px;
}

.blog-hero h1 span{
background:
linear-gradient(
90deg,
#ff0000,
#ff4fd8,
#1877f2
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.blog-hero p{
max-width:800px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#94a3b8;
}

.container{
max-width:1300px;
margin:auto;
padding:0 20px 80px;
}

.blog-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(340px,1fr));
gap:28px;
}

.blog-card{
background:#111827;
border:1px solid rgba(255,255,255,.06);
border-radius:28px;
overflow:hidden;
transition:.35s;
}

.blog-card:hover{
transform:translateY(-6px);
border-color:rgba(255,255,255,.14);
}

.blog-image{
height:240px;
position:relative;
overflow:hidden;
}

.blog-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}

.blog-card:hover img{
transform:scale(1.06);
}

.blog-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent,
rgba(0,0,0,.45)
);
}

.blog-content{
padding:24px;
}

.blog-date{
font-size:13px;
color:#94a3b8;
margin-bottom:12px;
}

.blog-content h2{
font-size:26px;
font-weight:700;
line-height:1.4;
margin-bottom:12px;
color:white;
}

.blog-content p{
color:#cbd5e1;
line-height:1.8;
font-size:15px;
margin-bottom:20px;
}

.read-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 22px;
border-radius:14px;
background:
linear-gradient(
90deg,
#ff0000,
#ff4fd8,
#1877f2
);
text-decoration:none;
font-weight:700;
color:white;
transition:.3s;
}

.read-btn:hover{
transform:translateY(-2px);
}

.pagination{
margin-top:50px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.pagination a{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:#111827;
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
text-decoration:none;
color:white;
font-weight:600;
transition:.3s;
}

.pagination a:hover{
background:#1e293b;
}

.active-page{
background:
linear-gradient(
90deg,
#ff0000,
#ff4fd8,
#1877f2
) !important;
border:none !important;
}

/* MOBILE */

@media(max-width:768px){

.blog-hero{
padding:70px 16px 50px;
}

.blog-hero h1{
font-size:38px;
}

.blog-hero p{
font-size:15px;
}

.blog-grid{
grid-template-columns:1fr;
gap:18px;
}

.blog-image{
height:210px;
}

.blog-content{
padding:18px;
}

.blog-content h2{
font-size:21px;
}

.blog-content p{
font-size:14px;
}

.pagination a{
width:42px;
height:42px;
font-size:14px;
}

}


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#060b16;
color:#fff;
overflow-x:hidden;
}

/* Background */

.bg-glow{
position:fixed;
width:900px;
height:900px;
background:
radial-gradient(
circle,
rgba(255,120,0,.15),
transparent 70%
);
top:-350px;
left:50%;
transform:translateX(-50%);
z-index:-1;
pointer-events:none;
}

/* Hero */

.hero{
max-width:1100px;
margin:auto;
padding:90px 20px 50px;
text-align:center;
}

.blog-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 22px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
margin-bottom:25px;
font-size:14px;
font-weight:600;
color:#dbe4ff;
}

.hero h1{
font-size:60px;
font-weight:800;
line-height:1.2;
margin-bottom:25px;
max-width:950px;
margin-left:auto;
margin-right:auto;
}

.hero-meta{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
color:#94a3b8;
font-size:14px;
}

/* Main */

.container{
max-width:1100px;
margin:auto;
padding:0 20px 80px;
}

/* Back Button */

.back-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 24px;
border-radius:14px;
background:#121c2f;
color:white;
text-decoration:none;
font-weight:600;
margin-bottom:30px;
transition:.3s;
}

.back-btn:hover{
background:#1b2a45;
}

/* Featured Image */

.featured-image{
width:100%;
height:550px;
overflow:hidden;
border-radius:30px;
border:1px solid rgba(255,255,255,.08);
margin-bottom:40px;
box-shadow:
0 20px 50px rgba(0,0,0,.35);
}

.featured-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* Article */

.article{
background:
linear-gradient(
180deg,
rgba(18,28,47,.95),
rgba(11,19,34,.95)
);

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

border-radius:30px;

padding:55px;

line-height:2;
}

.article p{
font-size:18px;
line-height:2;
color:#dbe4f0;
margin-bottom:24px;
}

.article h2{
font-size:34px;
margin-top:40px;
margin-bottom:20px;
font-weight:700;
}

.article h3{
font-size:28px;
margin-top:35px;
margin-bottom:15px;
font-weight:700;
}

.article img{
max-width:100%;
border-radius:20px;
margin:25px 0;
}

.article ul,
.article ol{
padding-left:25px;
margin-bottom:25px;
}

.article li{
margin-bottom:12px;
}

/* Related */

.related-section{
margin-top:90px;
}

.related-title{
font-size:42px;
font-weight:800;
margin-bottom:35px;
}

.related-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.related-card{
background:
linear-gradient(
180deg,
#121c2f,
#0b1322
);

border-radius:28px;
overflow:hidden;

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

transition:.35s;
}

.related-card:hover{
transform:translateY(-8px);
border-color:
rgba(255,255,255,.15);
}

.related-card img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

.related-content{
padding:24px;
}

.related-content h3{
font-size:22px;
line-height:1.5;
margin-bottom:15px;
}

.related-content a{
display:inline-block;
padding:13px 20px;
border-radius:12px;

background:
linear-gradient(
90deg,
#ff1744,
#ff7b00
);

color:white;
text-decoration:none;
font-weight:700;
}

/* Mobile */

@media(max-width:768px){

.hero{
padding:70px 20px 40px;
}

.hero h1{
font-size:36px;
}

.featured-image{
height:260px;
border-radius:20px;
}

.article{
padding:25px;
border-radius:20px;
}

.article p{
font-size:16px;
}

.article h2{
font-size:26px;
}

.article h3{
font-size:22px;
}

.related-title{
font-size:30px;
}

}

.hero{
max-width:1200px;
margin:auto;
padding:90px 20px 60px;
text-align:center;
position:relative;
}

.hero::before{
content:'';
position:absolute;
left:50%;
top:-250px;
transform:translateX(-50%);
width:900px;
height:900px;
background:
radial-gradient(circle,
rgba(255,0,0,.10),
transparent 70%);
z-index:-1;
}

.blog-badge{
display:inline-block;
padding:12px 22px;
background:#111827;
border:1px solid rgba(255,255,255,.08);
border-radius:50px;
margin-bottom:20px;
font-size:14px;
font-weight:600;
}

.hero h1{
font-size:58px;
font-weight:800;
line-height:1.2;
max-width:900px;
margin:auto;
margin-bottom:18px;
}

.hero-meta{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
color:#94a3b8;
font-size:14px;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px 80px;
}

.back-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 20px;
background:#111827;
border-radius:14px;
text-decoration:none;
color:white;
font-weight:600;
margin-bottom:25px;
}

.featured-image{
overflow:hidden;
border-radius:28px;
margin-bottom:30px;
}

.featured-image img{
width:100%;
display:block;
}

.article{
background:#111827;
border:1px solid rgba(255,255,255,.06);
padding:40px;
border-radius:30px;
line-height:2;
font-size:17px;
color:#e5e7eb;
}

.article h2{
font-size:34px;
font-weight:800;
margin-top:35px;
margin-bottom:18px;
}

.article h3{
font-size:28px;
font-weight:700;
margin-top:30px;
margin-bottom:16px;
}

.article p{
margin-bottom:18px;
}

.article ul{
padding-left:20px;
margin-bottom:20px;
}

.article li{
margin-bottom:10px;
}

.related-section{
margin-top:60px;
}

.related-title{
font-size:36px;
font-weight:800;
margin-bottom:25px;
}

.related-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));
gap:25px;
}

.related-card{
background:#111827;
border:1px solid rgba(255,255,255,.06);
border-radius:24px;
overflow:hidden;
transition:.3s;
}

.related-card:hover{
transform:translateY(-5px);
}

.related-card img{
width:100%;
height:220px;
object-fit:cover;
}

.related-content{
padding:20px;
}

.related-content h3{
font-size:22px;
font-weight:700;
margin-bottom:15px;
}

.related-content a{
display:inline-block;
padding:12px 18px;
border-radius:12px;
text-decoration:none;
background:
linear-gradient(
90deg,
#ff0000,
#ff4fd8,
#1877f2
);
color:white;
font-weight:700;
}

@media(max-width:768px){

.hero{
padding:70px 16px 40px;
}

.hero h1{
font-size:34px;
}

.article{
padding:22px;
font-size:15px;
}

.article h2{
font-size:26px;
}

.article h3{
font-size:22px;
}

.related-title{
font-size:28px;
}

}

/* =========================
   BLOG DETAILS PAGE
========================= */

body{
    background:#0f172a;
    color:#fff;
}

/* HERO */

.hero{
    padding:90px 20px 60px;
    text-align:center;
}

.hero-content{
    max-width:900px;
    margin:auto;
}

.article-category{
    display:inline-block;
    padding:8px 18px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#94a3b8;
    margin-bottom:25px;
}

.hero h1{
    font-size:48px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:25px;
}

.hero-meta{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    color:#94a3b8;
    font-size:15px;
}

/* CONTAINER */

.container{
    max-width:900px;
    margin:auto;
    padding:0 20px 80px;
}

/* BACK BUTTON */

.back-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:25px;
    color:#cbd5e1;
    text-decoration:none;
}

.back-btn:hover{
    color:#fff;
}

/* FEATURE IMAGE */

.featured-image{
    margin-bottom:40px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:
    0 20px 60px rgba(0,0,0,.4);
}

.featured-image img{
    width:100%;
    display:block;
}

/* ARTICLE */

.article{
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:45px;
    line-height:1.9;
    color:#e5e7eb;
}

/* Fix overflow issue */

.article *{
    max-width:100%;
    word-wrap:break-word;
    overflow-wrap:break-word;
}

/* Headings */

.article h1,
.article h2,
.article h3,
.article h4,
.article h5{
    color:#fff;
    margin-top:35px;
    margin-bottom:15px;
    line-height:1.3;
}

.article h2{
    font-size:32px;
}

.article h3{
    font-size:26px;
}

/* Paragraph */

.article p{
    margin-bottom:20px;
}

/* Lists */

.article ul,
.article ol{
    padding-left:25px;
    margin-bottom:25px;
}

.article li{
    margin-bottom:10px;
}

/* Images */

.article img{
    width:100%;
    height:auto;
    border-radius:14px;
    margin:25px 0;
}

/* Links */

.article a{
    color:#60a5fa;
}

.article a:hover{
    text-decoration:underline;
}

/* Tables */

.article table{
    width:100%;
    overflow:auto;
    display:block;
    margin:20px 0;
}

.article td,
.article th{
    border:1px solid rgba(255,255,255,.15);
    padding:12px;
}

/* Blockquote */

.article blockquote{
    border-left:4px solid #3b82f6;
    padding-left:20px;
    margin:25px 0;
    color:#cbd5e1;
}

/* RELATED */

.related-section{
    margin-top:70px;
}

.related-title{
    font-size:32px;
    margin-bottom:25px;
}

.related-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.related-card{
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
}

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

.related-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.related-content{
    padding:20px;
}

.related-content h3{
    margin-bottom:15px;
    font-size:18px;
    line-height:1.5;
}

.related-content a{
    color:#60a5fa;
    text-decoration:none;
}

/* MOBILE */

@media(max-width:768px){

.hero{
    padding:60px 20px 40px;
}

.hero h1{
    font-size:32px;
}

.article{
    padding:25px;
}

.related-title{
    font-size:26px;
}

}


/* =====================================
   BLOG DETAILS PAGE
===================================== */

.blog-container{
    max-width:1200px;
    margin:50px auto;
    padding:0 20px;
}

/* Back Button */

.back-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#64748b;
    font-size:14px;
    margin-bottom:30px;
    transition:.3s;
}

.back-btn:hover{
    color:#0f172a;
}

/* Main Blog Card */

.single-blog-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:
    0 10px 40px rgba(0,0,0,.06);
}

/* Meta */

.blog-meta{
    padding:40px 60px 0;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    color:#64748b;
    font-size:14px;
}

/* Title */

.single-blog-title{
    padding:15px 60px 35px;
    font-size:54px;
    line-height:1.15;
    font-weight:800;
    color:#0f172a;
    letter-spacing:-1px;
}

/* Featured Image */

.single-blog-image img{
    width:100%;
    display:block;
    max-height:600px;
    object-fit:cover;
}

/* Content */

.single-blog-content{
    padding:60px;
    color:#334155;
    font-size:18px;
    line-height:1.9;
}

/* Universal Fix */

.single-blog-content *,
.single-blog-content *::before,
.single-blog-content *::after{
    max-width:100% !important;
    box-sizing:border-box;
}

/* Text Overflow Fix */

.single-blog-content p,
.single-blog-content div,
.single-blog-content span,
.single-blog-content li,
.single-blog-content td,
.single-blog-content th{
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Headings */

.single-blog-content h1,
.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4{
    color:#0f172a;
    font-weight:700;
    line-height:1.3;
}

.single-blog-content h2{
    margin-top:50px;
    margin-bottom:18px;
    font-size:36px;
}

.single-blog-content h3{
    margin-top:40px;
    margin-bottom:15px;
    font-size:28px;
}

/* Paragraph */

.single-blog-content p{
    margin-bottom:24px;
}

/* Lists */

.single-blog-content ul,
.single-blog-content ol{
    padding-left:25px;
    margin-bottom:24px;
}

.single-blog-content li{
    margin-bottom:10px;
}

/* Images */

.single-blog-content img{
    display:block;
    max-width:100% !important;
    width:auto !important;
    height:auto !important;
    margin:35px auto;
    border-radius:16px;
}

/* Links */

.single-blog-content a{
    color:#2563eb;
    text-decoration:none;
}

.single-blog-content a:hover{
    text-decoration:underline;
}

/* Tables */

.single-blog-content table{
    width:100%;
    display:block;
    overflow-x:auto;
    margin:30px 0;
    border-collapse:collapse;
}

.single-blog-content td,
.single-blog-content th{
    border:1px solid #e2e8f0;
    padding:12px;
}

/* Code */

.single-blog-content pre{
    overflow-x:auto;
    background:#0f172a;
    color:#fff;
    padding:20px;
    border-radius:12px;
}

/* Blockquote */

.single-blog-content blockquote{
    border-left:4px solid #2563eb;
    padding-left:20px;
    margin:30px 0;
    color:#475569;
}

/* Related */

.related-posts{
    margin-top:80px;
}

.related-title{
    font-size:34px;
    font-weight:700;
    margin-bottom:30px;
    color:#0f172a;
}

.related-posts-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}

.related-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:
    0 8px 30px rgba(0,0,0,.05);
    transition:.3s;
}

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

.related-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.related-content{
    padding:25px;
}

.related-content h3{
    font-size:20px;
    line-height:1.5;
    margin-bottom:15px;
    color:#0f172a;
}

.related-content a{
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
}

/* Mobile */

@media(max-width:768px){

.blog-container{
    padding:0 15px;
}

.single-blog-title{
    font-size:34px;
    padding:15px 25px 25px;
}

.blog-meta{
    padding:25px 25px 0;
}

.single-blog-content{
    padding:25px;
    font-size:16px;
}

.related-posts-grid{
    grid-template-columns:1fr;
}

}

/* ==========================
   BLOG DETAILS PAGE
========================== */

.blog-page{
    background:#f8fafc;
    min-height:100vh;
    padding:50px 0 90px;
}

.blog-layout{
    width:100%;
    max-width:1100px;
    margin:auto;
    padding:0 20px;
}

/* Back */

.back-link{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    color:#64748b;
    margin-bottom:30px;
    font-size:15px;
    transition:.3s;
}

.back-link:hover{
    color:#0f172a;
}

/* Main Article */

.blog-post{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:
    0 10px 40px rgba(15,23,42,.08);
}

/* Header */

.post-header{
    padding:60px 70px 40px;
}

.post-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    color:#64748b;
    font-size:14px;
    margin-bottom:25px;
}

.dot{
    opacity:.4;
}

.post-title{
    font-size:58px;
    line-height:1.1;
    font-weight:800;
    color:#0f172a;
    margin-bottom:25px;
    letter-spacing:-1.5px;
}

.post-excerpt{
    font-size:20px;
    color:#64748b;
    line-height:1.8;
    max-width:850px;
}

/* Featured Image */

.post-cover{
    padding:0 40px;
}

.post-cover img{
    width:100%;
    display:block;
    border-radius:20px;
    object-fit:cover;
}

/* Content */

.post-content{
    max-width:850px;
    margin:auto;
    padding:60px;
    color:#334155;
    font-size:18px;
    line-height:1.95;
}

/* Overflow Protection */

.post-content *,
.post-content *::before,
.post-content *::after{
    max-width:100% !important;
    box-sizing:border-box;
}

.post-content p,
.post-content div,
.post-content span,
.post-content li,
.post-content td,
.post-content th{
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Headings */

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4{
    color:#0f172a;
    font-weight:700;
    line-height:1.3;
}

.post-content h2{
    margin-top:55px;
    margin-bottom:20px;
    font-size:38px;
}

.post-content h3{
    margin-top:40px;
    margin-bottom:16px;
    font-size:30px;
}

/* Paragraph */

.post-content p{
    margin-bottom:24px;
}

/* Lists */

.post-content ul,
.post-content ol{
    margin-bottom:24px;
    padding-left:25px;
}

.post-content li{
    margin-bottom:10px;
}

/* Images */

.post-content img{
    display:block;
    max-width:100% !important;
    width:auto !important;
    height:auto !important;
    margin:35px auto;
    border-radius:16px;
}

/* Tables */

.post-content table{
    width:100%;
    display:block;
    overflow-x:auto;
    margin:30px 0;
}

.post-content td,
.post-content th{
    border:1px solid #e2e8f0;
    padding:12px;
}

/* Code */

.post-content pre{
    overflow:auto;
    padding:20px;
    border-radius:12px;
    background:#0f172a;
    color:#fff;
}

.post-content iframe{
    max-width:100%;
}

/* Links */

.post-content a{
    color:#2563eb;
    text-decoration:none;
}

.post-content a:hover{
    text-decoration:underline;
}

/* Related */

.related-posts{
    margin-top:80px;
}

.section-heading h2{
    font-size:34px;
    color:#0f172a;
    margin-bottom:30px;
}

.related-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}

.related-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:
    0 8px 30px rgba(15,23,42,.06);
    transition:.3s;
}

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

.related-image img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.related-body{
    padding:24px;
}

.related-body h3{
    font-size:20px;
    line-height:1.5;
    color:#0f172a;
    margin-bottom:15px;
}

.read-more{
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
}

/* Mobile */

@media(max-width:768px){

.blog-page{
    padding:25px 0 60px;
}

.post-header{
    padding:30px 25px;
}

.post-title{
    font-size:34px;
}

.post-excerpt{
    font-size:16px;
}

.post-cover{
    padding:0 15px;
}

.post-content{
    padding:30px 25px;
    font-size:16px;
}

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

}

/* Force normal text wrapping */

.post-title,
.post-content,
.post-content p,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.related-body h3{

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    display: block !important;
    width: 100%;

    line-height: 1.8;
}

/* Paragraph spacing */

.post-content p{
    margin-bottom: 20px;
}

/* Headings */

.post-content h2{
    margin: 35px 0 15px;
}

.post-content h3{
    margin: 30px 0 12px;
}

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

.navbar{
    width:100%;
    position:sticky;
    top:0;
    z-index:999;
    background:#0f172a;
}

.nav-wrap{
    max-width:1200px;
    margin:auto;
    padding:15px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo-icon{
    width:45px;
    height:45px;
    border-radius:12px;
    background:#ff6b00;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.logo-text h2{
    color:#fff;
    font-size:18px;
    margin:0;
}

.logo-text span{
    color:#94a3b8;
    font-size:12px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:25px;
}

.nav-links a{
    color:#fff;
    text-decoration:none;
}

.sell-btn{
    background:#ff6b00;
    padding:10px 16px;
    border-radius:10px;
}

/* Hamburger */

.menu-btn{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    flex-direction:column;
    gap:5px;
}

.menu-btn span{
    width:28px;
    height:3px;
    background:#fff;
    display:block;
    border-radius:5px;
}

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

@media(max-width:768px){

    .menu-btn{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:75px;
        left:0;
        right:0;

        background:#0f172a;

        display:none;
        flex-direction:column;
        gap:18px;

        padding:25px;

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

    .nav-links.active{
        display:flex;
    }

}


/* Desktop */

.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
}

/* Hamburger */

.hamburger{
    display:none;
    width:46px;
    height:46px;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:0;
    position:relative;
}

.hamburger span{
    display:block;
    width:28px;
    height:3px;
    background:#ffffff;
    border-radius:20px;
    margin:5px auto;
    transition:.3s ease;
}

/* Animation */

.hamburger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* Mobile */

@media (max-width:768px){

    .hamburger{
        display:block;
    }

    .nav-links{

        position:absolute;
        top:100%;
        left:0;
        width:100%;

        background:#0f172a;

        display:flex;
        flex-direction:column;

        gap:15px;

        padding:25px;

        border-radius:0 0 16px 16px;

        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);

        transition:.3s ease;

        z-index:999;
    }

    .nav-links.show{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav-links a{
        width:100%;
        display:block;
        color:#fff;
        text-decoration:none;
        padding:10px 0;
    }
}


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

.hamburger{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
}

.hamburger span{
    display:block;
    width:28px;
    height:3px;
    background:#fff;
    margin:5px 0;
    border-radius:20px;
    transition:.3s ease;
}

/* Animation */

.hamburger.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* Mobile Only */

@media(max-width:768px){

    .hamburger{
        display:block;
    }

    .nav-links{
        display:none;
    }

    .nav-links.show{
        display:flex;
    }
}



*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#060b16;
color:white;
overflow-x:hidden;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#ff6b00;
border-radius:20px;
}

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

.bg-glow{
position:fixed;
width:700px;
height:700px;
background:radial-gradient(circle,rgba(255,90,0,.14),transparent 70%);
top:-250px;
left:50%;
transform:translateX(-50%);
z-index:-1;
}

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

.navbar{
padding:18px 30px;
border-bottom:1px solid rgba(255,255,255,.06);
background:rgba(8,12,22,.95);
backdrop-filter:blur(14px);
position:sticky;
top:0;
z-index:999;
}

.nav-wrap{
max-width:1450px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.logo{
display:flex;
align-items:center;
gap:14px;
}

.logo-icon{
width:56px;
height:56px;
border-radius:18px;
background:linear-gradient(135deg,#ff1744,#ff7b00);
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:20px;
box-shadow:0 12px 30px rgba(255,90,0,.35);
}

.logo-text h2{
font-size:20px;
font-weight:800;
}

.logo-text span{
font-size:12px;
color:#94a3b8;
}

.nav-right{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
}

.profile{
display:flex;
align-items:center;
gap:12px;
background:#121c2f;
padding:10px 16px;
border-radius:18px;
border:1px solid rgba(255,255,255,.06);
}

.profile-circle{
width:45px;
height:45px;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#3b82f6);
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:18px;
}

.logout-btn{
background:linear-gradient(90deg,#ff1744,#ff6b00);
padding:14px 22px;
border-radius:16px;
text-decoration:none;
color:white;
font-weight:700;
}

/* ================= WRAPPER ================= */

.wrapper{
max-width:1450px;
margin:auto;
padding:35px 20px;
}

/* ================= TOAST ================= */

.toast{
position:fixed;
top:25px;
right:25px;
background:linear-gradient(90deg,#16a34a,#22c55e);
padding:16px 24px;
border-radius:16px;
font-weight:700;
z-index:9999;
box-shadow:0 15px 40px rgba(34,197,94,.25);
animation:slideIn .5s ease;
}

@keyframes slideIn{

from{
opacity:0;
transform:translateX(100px);
}

to{
opacity:1;
transform:translateX(0);
}

}

/* ================= STATS ================= */

.stats-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-bottom:35px;
}

.stat-card{
background:linear-gradient(180deg,#121c2f,#0b1322);
padding:28px;
border-radius:28px;
border:1px solid rgba(255,255,255,.06);
}

.stat-card h3{
font-size:42px;
font-weight:800;
margin-bottom:8px;
}

.stat-card p{
color:#94a3b8;
font-size:15px;
}

/* ================= FORM ================= */

.form-box{
background:linear-gradient(180deg,#121c2f,#0b1322);
padding:35px;
border-radius:32px;
border:1px solid rgba(255,255,255,.06);
margin-bottom:35px;
}

.form-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:30px;
}

.form-head h2{
font-size:34px;
font-weight:800;
}

.form-head p{
color:#94a3b8;
}

.form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.form-group{
display:flex;
flex-direction:column;
gap:10px;
}

.form-group label{
font-size:14px;
font-weight:600;
color:#cbd5e1;
}

.input{
width:100%;
background:#1a2740;
border:1px solid rgba(255,255,255,.06);
padding:16px;
border-radius:18px;
outline:none;
color:white;
font-size:15px;
transition:.3s;
}

.input:focus{
border-color:#ff6b00;
box-shadow:0 0 0 4px rgba(255,107,0,.15);
}

.add-btn{
margin-top:30px;
background:linear-gradient(90deg,#ff1744,#ff6b00);
padding:18px 30px;
border:none;
border-radius:20px;
color:white;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.add-btn:hover{
transform:translateY(-3px);
}

/* ================= TABLE ================= */

.table-box{
overflow:auto;
border-radius:32px;
border:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,#121c2f,#0b1322);
}

table{
width:100%;
border-collapse:collapse;
min-width:1100px;
}

th{
background:#111b2d;
padding:22px;
text-align:left;
font-size:14px;
color:#94a3b8;
}

td{
padding:22px;
border-top:1px solid rgba(255,255,255,.06);
}

tr:hover{
background:rgba(255,255,255,.02);
}

.platform{
padding:8px 14px;
border-radius:999px;
font-size:12px;
font-weight:700;
display:inline-block;
}

.youtube{
background:#dc2626;
}

.instagram{
background:#db2777;
}

.facebook{
background:#2563eb;
}

.action-btn{
padding:12px 16px;
border-radius:14px;
text-decoration:none;
font-size:14px;
font-weight:700;
display:inline-block;
transition:.3s;
}

.edit-btn{
background:#2563eb;
color:white;
margin-right:8px;
}

.delete-btn{
background:#dc2626;
color:white;
}

.action-btn:hover{
transform:translateY(-2px);
}

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

@media(max-width:900px){

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

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

}

@media(max-width:600px){

.navbar{
padding:16px;
}

.wrapper{
padding:20px 16px;
}

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

.form-box{
padding:22px;
border-radius:24px;
}

.form-head h2{
font-size:26px;
}

.stat-card{
padding:22px;
border-radius:22px;
}

.stat-card h3{
font-size:34px;
}

.profile{
width:100%;
justify-content:center;
}

.logout-btn{
width:100%;
text-align:center;
}

.toast{
right:16px;
left:16px;
top:16px;
}

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#060b16;
color:white;
padding:30px;
}

.bg-glow{
position:fixed;
width:700px;
height:700px;
background:
radial-gradient(
circle,
rgba(255,90,0,.15),
transparent 70%
);
top:-250px;
left:50%;
transform:translateX(-50%);
z-index:-1;
}

.wrapper{
max-width:1100px;
margin:auto;
}

.card{
background:
linear-gradient(
180deg,
#121c2f,
#0b1322
);

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

border-radius:30px;

padding:35px;
}

.heading{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
flex-wrap:wrap;
gap:15px;
}

.heading h1{
font-size:36px;
font-weight:800;
}

.back-btn{
padding:14px 22px;
border-radius:15px;
background:#1a2740;
color:white;
text-decoration:none;
font-weight:600;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.form-group{
display:flex;
flex-direction:column;
gap:10px;
}

.form-group label{
font-size:14px;
font-weight:600;
color:#cbd5e1;
}

.input{
width:100%;
padding:16px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:#1a2740;
color:white;
outline:none;
}

.input:focus{
border-color:#ff6b00;
}

textarea.input{
resize:vertical;
}

.full{
grid-column:1/-1;
}

.submit-btn{
margin-top:25px;
padding:18px 30px;
border:none;
border-radius:18px;
background:
linear-gradient(
90deg,
#ff1744,
#ff6b00
);
color:white;
font-size:16px;
font-weight:700;
cursor:pointer;
}

.submit-btn:hover{
opacity:.95;
}

.note{
font-size:13px;
color:#94a3b8;
margin-top:5px;
}

@media(max-width:768px){

body{
padding:15px;
}

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

.heading h1{
font-size:28px;
}

.card{
padding:22px;
}

}


body{
background:#060b16;
font-family:Poppins,sans-serif;
color:white;
}

.box{
max-width:1000px;
margin:auto;
background:#121c2f;
padding:30px;
border-radius:25px;
}

.input{
width:100%;
padding:15px;
background:#1a2740;
border:none;
border-radius:12px;
color:white;
margin-top:8px;
margin-bottom:20px;
}

.btn{
background:#ff6b00;
padding:15px 25px;
border:none;
border-radius:12px;
font-weight:700;
color:white;
cursor:pointer;
}

img{
max-width:250px;
border-radius:15px;
margin-bottom:20px;
}


.btns{
display:flex;
gap:14px;
margin-top:22px;
}

.buy-btn,
.visit-btn{
flex:1;
padding:14px;
border-radius:14px;
text-align:center;
font-weight:700;
transition:.3s;
}

.buy-btn:hover,
.visit-btn:hover{
transform:translateY(-2px);
}

/* YouTube */
#youtube .buy-btn{
background:#ff0000;
color:white;
}

/* Instagram */
#instagram .buy-btn{
background:
linear-gradient(
90deg,
#ff00aa,
#ff7b00
);
color:white;
}

/* Facebook */
#facebook .buy-btn{
background:#1877f2;
color:white;
}

.visit-btn{
background:white;
color:black;
}


    *{
      font-family:'Poppins',sans-serif;
    }

    body{
      background:#060b16;
      color:white;
    }

    .glass{
      background:linear-gradient(180deg,#101828,#0b1220);
      border:1px solid rgba(255,255,255,0.08);
      box-shadow:0 20px 50px rgba(0,0,0,.45);
    }

    .input-style{
      width:100%;
      background:#172235;
      border:1px solid rgba(255,255,255,0.05);
      color:#fff;
      border-radius:16px;
      padding:16px 18px;
      outline:none;
      transition:.3s;
      font-size:15px;
    }

    .input-style:focus{
      border-color:#2563eb;
      box-shadow:0 0 0 4px rgba(37,99,235,.15);
    }

    .input-style::placeholder{
      color:#94a3b8;
    }

    .pay-btn{
      background:linear-gradient(90deg,#ff1f1f,#ff6b00);
      transition:.3s;
    }

    .pay-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 25px rgba(255,80,80,.25);
    }

    .topbar{
      background:#0f172a;
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .logo{
      font-size:24px;
      font-weight:800;
      background:linear-gradient(to right,#3b82f6,#06b6d4);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }