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

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

/* =========================
   BODY
========================= */

body{

font-family:Arial,sans-serif;

background:
linear-gradient(
-45deg,
#0f172a,
#111827,
#1e3a8a,
#0f172a
);

background-size:400% 400%;

animation:bgMove 12s ease infinite;

color:#fff;

line-height:1.7;

overflow-x:hidden;

}

/* BACKGROUND ANIMATION */

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* =========================
   CONTAINER
========================= */

.container{
width:90%;
max-width:1200px;
margin:auto;
position:relative;
z-index:2;
}

/* =========================
   HEADER
========================= */

header{

background:rgba(17,24,39,.75);

backdrop-filter:blur(14px);

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

box-shadow:
0 0 25px rgba(37,99,235,.15);

padding:20px 0;

position:sticky;

top:0;

z-index:1000;

}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
}

/* =========================
   LOGO
========================= */

.logo{

font-size:32px;

font-weight:bold;

color:#fff;

text-shadow:
0 0 15px rgba(37,99,235,.5);

}

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

nav a{

color:#fff;

text-decoration:none;

margin-left:18px;

font-weight:bold;

position:relative;

transition:.3s;

}

nav a:hover{

color:#60a5fa;

text-shadow:
0 0 10px rgba(96,165,250,.8),
0 0 25px rgba(96,165,250,.5);

}

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

.hero{

background:url('https://info24jam.icu/image/ChatGPT-Image-Mar-11-2026-11_48_13-AM.webp') center/cover no-repeat;

position:relative;

padding:180px 0;

overflow:hidden;

}

.overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.55),
rgba(0,0,0,.8)
);

}

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

.hero-content{

position:relative;

z-index:2;

color:#fff;

max-width:750px;

animation:fadeUp 1s ease;

}

.hero h1{

font-size:64px;

margin-bottom:20px;

line-height:1.1;

text-shadow:

0 0 15px rgba(255,255,255,.25),

0 0 40px rgba(37,99,235,.35),

0 0 80px rgba(37,99,235,.25);

}

.hero p{

font-size:22px;

margin-bottom:35px;

color:#d1d5db;

}

/* HERO ANIMATION */

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(30px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

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

.btn{

display:inline-block;

background:linear-gradient(
90deg,
#2563eb,
#3b82f6
);

color:#fff;

padding:15px 32px;

border-radius:14px;

text-decoration:none;

font-weight:bold;

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:
0 0 20px rgba(37,99,235,.35);

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transition:.6s;

}

.btn:hover::before{

left:100%;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:
0 0 30px rgba(37,99,235,.5),
0 0 60px rgba(37,99,235,.25);

}

/* =========================
   SECTION
========================= */

.section{
padding:90px 0;
position:relative;
}

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

.cards{

display:grid;

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

gap:28px;

margin-top:45px;

}

/* =========================
   CARD STYLE GLOW
========================= */

.card{

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

padding:28px;

border-radius:18px;

backdrop-filter:blur(10px);

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

position:relative;

overflow:hidden;

transition:all .35s ease;

animation:floatCard 4s ease-in-out infinite;

box-shadow:

0 0 15px rgba(37,99,235,.12),

0 0 35px rgba(37,99,235,.08),

0 10px 30px rgba(0,0,0,.08);

}

/* FLOATING EFFECT */

@keyframes floatCard{

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

50%{
transform:translateY(-8px);
}

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

}

/* GLOW EFFECT */

.card::before{

content:"";

position:absolute;

top:-120px;
left:-120px;

width:250px;
height:250px;

background:radial-gradient(
circle,
rgba(59,130,246,.25) 0%,
transparent 70%
);

transition:.4s ease;

opacity:0;

}

/* BORDER GLOW */

.card::after{

content:"";

position:absolute;

inset:-2px;

border-radius:18px;

padding:2px;

background:linear-gradient(
45deg,
#2563eb,
#60a5fa,
#2563eb
);

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

opacity:.45;

animation:borderRotate 4s linear infinite;

}

/* BORDER ANIMATION */

@keyframes borderRotate{

0%{
filter:hue-rotate(0deg);
}

100%{
filter:hue-rotate(360deg);
}

}

/* CARD HOVER */

.card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:

0 0 25px rgba(37,99,235,.35),

0 0 60px rgba(37,99,235,.18),

0 25px 60px rgba(0,0,0,.15);

}

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

/* CARD TITLE */

.card h3{

font-size:30px;

margin-bottom:15px;

color:#111827;

}

/* CARD PARAGRAPH */

.card p{

font-size:18px;

line-height:1.8;

color:#374151;

}

/* =========================
   DARK SECTION
========================= */

.dark{

background:rgba(17,24,39,.7);

backdrop-filter:blur(12px);

}

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

.dark-card{

background:rgba(31,41,55,.95);

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

box-shadow:

0 0 20px rgba(59,130,246,.18),

0 0 45px rgba(59,130,246,.12),

0 15px 40px rgba(0,0,0,.35);

}

.dark-card h3{
color:#fff;
}

.dark-card p{
color:#d1d5db;
}

.dark-card:hover{

transform:translateY(-10px) scale(1.03);

box-shadow:

0 0 35px rgba(59,130,246,.4),

0 0 80px rgba(59,130,246,.25),

0 30px 70px rgba(0,0,0,.45);

}

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

.article-card{

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

box-shadow:

0 0 18px rgba(16,185,129,.12),

0 0 40px rgba(16,185,129,.08),

0 10px 30px rgba(0,0,0,.08);

}

.article-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 30px rgba(16,185,129,.35),

0 0 70px rgba(16,185,129,.18),

0 25px 60px rgba(0,0,0,.15);

}

/* =========================
   RELATED LINK
========================= */

.related{
margin-top:30px;
}

.related a{

display:inline-block;

margin-right:15px;

margin-bottom:12px;

color:#60a5fa;

font-weight:bold;

transition:.3s;

}

.related a:hover{

transform:translateY(-2px);

text-shadow:
0 0 15px rgba(96,165,250,.6);

}

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

footer{

background:#020617;

color:#fff;

text-align:center;

padding:35px;

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

}

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

@media(max-width:768px){

header .container{
flex-direction:column;
}

nav{
margin-top:15px;
}

.hero{
padding:120px 0;
}

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

.hero p{
font-size:18px;
}

.card{
padding:22px;
}

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

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

}