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

html{
scroll-behavior:smooth;
}

body{
margin:0;
padding:0;

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

background:#020617;
color:white;

overflow-x:hidden;
}

/* ====================================
   PARTICLES
==================================== */

#particles-js{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

z-index:1;

pointer-events:none;
}

#particles-js canvas{
pointer-events:none !important;
}

/* ====================================
   CONTENT LAYERS
==================================== */

.blog-hero,
.featured-section,
.category-section,
.newsletter-section,
footer{
position:relative;
z-index:2;
}

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

.blog-hero{
position:relative;

min-height:100vh;

padding:
220px
20px
140px;

background:
radial-gradient(
circle at top,
#081c3a,
#020617 70%
);

overflow:hidden;
}

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

background:
linear-gradient(
180deg,
rgba(0,234,255,.08),
transparent
);
}

.blog-content{
position:relative;
z-index:2;

max-width:900px;

margin:auto;

text-align:center;
}

.blog-badge{
display:inline-block;

padding:
12px
24px;

margin-bottom:30px;

border-radius:50px;

background:
rgba(0,234,255,.08);

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

color:#00eaff;

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

letter-spacing:1px;

box-shadow:
0 0 15px
rgba(0,234,255,.15);
}

.blog-content h1{
font-size:78px;
line-height:1.1;

margin-bottom:30px;

background:
linear-gradient(
90deg,
#ffffff,
#00eaff
);

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

.blog-content p{
font-size:22px;
line-height:1.8;

max-width:760px;
margin:auto;

opacity:.85;
}

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

.blog-buttons{
margin-top:50px;

display:flex;
justify-content:center;
gap:20px;

flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
display:inline-block;

padding:
18px
40px;

border-radius:12px;

font-size:16px;
font-weight:700;

text-decoration:none;

transition:all .3s ease;
}

.primary-btn{
background:
linear-gradient(
90deg,
#00eaff,
#00bfff
);

color:#02111f;

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

.primary-btn:hover{
transform:translateY(-4px);

box-shadow:
0 0 30px
rgba(0,234,255,.45);
}

.secondary-btn{
background:
rgba(255,255,255,.04);

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

color:white;
}

.secondary-btn:hover{
background:
rgba(255,255,255,.08);

transform:translateY(-4px);
}

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

.featured-section,
.category-section,
.newsletter-section{
padding:
120px
20px;
}

.section-heading{
max-width:850px;

margin:
0 auto 80px;

text-align:center;
}

.mini-title{
display:inline-block;

margin-bottom:20px;

color:#00eaff;

font-size:13px;
font-weight:700;

letter-spacing:2px;
text-transform:uppercase;
}

.section-heading h2{
font-size:58px;

margin:
0 0 25px;
}

.section-heading p{
font-size:20px;
line-height:1.8;

opacity:.8;
}

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

.featured-grid{
max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
2fr 1fr 1fr;

gap:30px;
}

.featured-card{
background:
rgba(255,255,255,.04);

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

border-radius:24px;

padding:40px;

backdrop-filter:blur(10px);

transition:all .35s ease;
}

.featured-card:hover{
transform:
translateY(-10px);

box-shadow:
0 0 35px
rgba(0,234,255,.12);
}

.large-card{
min-height:340px;
}

.card-tag{
display:inline-block;

padding:
8px
18px;

margin-bottom:25px;

border-radius:30px;

background:
rgba(0,234,255,.08);

color:#00eaff;

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

letter-spacing:1px;
}

.featured-card h3{
font-size:32px;
line-height:1.5;

margin-bottom:20px;
}

.featured-card p{
line-height:1.8;

opacity:.8;

margin-bottom:30px;
}

.featured-card a{
color:#00eaff;

font-weight:600;

text-decoration:none;
}

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

.category-grid{
max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;
}

.category-card{
background:
rgba(255,255,255,.04);

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

border-radius:24px;

padding:
50px
30px;

text-align:center;

transition:all .3s ease;
}

.category-card:hover{
transform:
translateY(-8px);

box-shadow:
0 0 30px
rgba(0,234,255,.12);
}

.category-card span{
display:block;

font-size:48px;

margin-bottom:20px;
}

.category-card h3{
font-size:26px;

margin-bottom:15px;
}

.category-card p{
line-height:1.7;

opacity:.8;
}

/* ====================================
   NEWSLETTER
==================================== */

.newsletter-box{
max-width:950px;

margin:auto;

padding:
90px
50px;

border-radius:30px;

background:
linear-gradient(
180deg,
rgba(0,234,255,.08),
rgba(255,255,255,.03)
);

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

text-align:center;
}

.newsletter-box h2{
font-size:56px;

margin:
20px 0;
}

.newsletter-box p{
font-size:20px;
line-height:1.8;

max-width:700px;

margin:auto;

opacity:.85;
}

.newsletter-form{
margin-top:45px;

display:flex;
justify-content:center;
gap:15px;

flex-wrap:wrap;
}

.newsletter-form input{
width:360px;

padding:18px;

border:none;
outline:none;

border-radius:14px;

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

color:white;

font-size:16px;
}

.newsletter-form button{
padding:
18px
34px;

border:none;

border-radius:14px;

background:
linear-gradient(
90deg,
#00eaff,
#00bfff
);

color:#02111f;

font-size:16px;
font-weight:700;

cursor:pointer;

transition:all .3s ease;
}

.newsletter-form button:hover{
transform:translateY(-4px);

box-shadow:
0 0 25px
rgba(0,234,255,.4);
}

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

@media(max-width:992px){

.blog-content h1{
font-size:58px;
}

.section-heading h2,
.newsletter-box h2{
font-size:44px;
}

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

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

}

@media(max-width:600px){

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

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

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

.section-heading h2,
.newsletter-box h2{
font-size:34px;
}

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

.newsletter-box{
padding:
60px
25px;
}

.newsletter-form input{
width:100%;
}

}