@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;700&family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap');

:root {
    --bg-dark: #050a14;
    --card-bg: rgba(30, 41, 59, 0.6); /* See-through glass */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #00f3ff; /* Cyberpunk Cyan */
    --accent-glow: rgba(0, 243, 255, 0.4);
    --success: #00ff41; /* Hacker Green */
    --border: rgba(148, 163, 184, 0.15);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.8;
    overflow-x: hidden;
}

/* === GLITCH TEXT EFFECT (Hacking Movie Style) === */
.glitch {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3.5rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
    animation: glitch 725ms infinite;
}
.glitch span { position: absolute; top: 0; left: 0; }
@keyframes glitch {
    0% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
    15% { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
    16% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; }
    49% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; }
    50% { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; }
    99% { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; }
    100% { text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00; }
}

/* BACKGROUND GRID */
.cyber-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2;
    background-image: linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

/* NAVIGATION */
nav {
    background: rgba(5, 10, 20, 0.8);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    position: sticky; top: 0; z-index: 100;
}
.nav-container {
    max-width: 1100px; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.shining-logo {
    font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 900;
    text-decoration: none; letter-spacing: 2px; color: white;
    text-shadow: 0 0 10px var(--accent);
}
.nav-links a { color: var(--text-muted); text-decoration: none; margin-left: 25px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.nav-links a:hover { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }

/* LAYOUT */
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.hero { text-align: center; padding: 100px 0 80px; }
.hero p { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; margin: 20px auto 0; font-family: 'JetBrains Mono'; }

/* GLASSMORPHISM CARDS (Less Boxy) */
.featured-card, .card, .contact-box {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px; /* Rounded Corners */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: 0.4s ease;
}
.featured-card:hover, .card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
}

/* FEATURED CARD LAYOUT */
.featured-card { display: flex; margin-bottom: 50px; flex-direction: row; }
.f-content { padding: 50px; flex: 1.5; }
.f-image-container { flex: 1; position: relative; min-height: 300px; }
.f-image-container img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; mix-blend-mode: luminosity; transition: 0.3s; }
.featured-card:hover .f-image-container img { mix-blend-mode: normal; opacity: 1; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card { padding: 30px; display:flex; flex-direction:column; justify-content:space-between; }

/* TYPOGRAPHY & BADGES */
.badge {
    background: rgba(0, 243, 255, 0.1); 
    color: var(--accent); 
    padding: 6px 14px; 
    border-radius: 50px; /* Pill shape */
    font-size: 0.75rem; font-weight: bold; 
    border: 1px solid var(--accent); 
    text-transform: uppercase; letter-spacing: 2px;
    box-shadow: 0 0 10px var(--accent-glow);
}
.btn { 
    display: inline-block; background: var(--accent); color: #000; 
    padding: 14px 30px; border-radius: 50px; /* Pill shape */
    text-decoration: none; font-weight: 900; margin-top: 25px; 
    text-transform: uppercase; letter-spacing: 1px;
    font-family: 'Orbitron';
}
.btn:hover { box-shadow: 0 0 25px var(--accent); background: white; }

/* BLOG CONTENT STYLES */
.step-box {
    background: rgba(0,0,0,0.3);
    border-left: 4px solid var(--accent);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 10px 10px 0;
}
.step-num { font-family: 'Orbitron'; color: var(--accent); font-size: 1.2rem; margin-bottom: 10px; display: block; }

/* FOOTER & ADS */
footer { text-align: center; margin-top: 100px; padding: 40px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.9rem; }
.ad-slot { background: #000; border: 1px dashed #333; padding: 30px; margin: 40px 0; text-align: center; font-family: 'Share Tech Mono'; color: #555; display: none; }

/* MOBILE */
@media (max-width: 768px) {
    .featured-card { flex-direction: column; }
    .glitch { font-size: 2.5rem; }
    .hero { padding: 60px 0; }
}

/* FIXED ALIGNMENT FOR CONTACT BOX */
.contact-box {
    max-width: 800px;        /* Limits width so it doesn't stretch too far */
    margin: 60px auto 0 auto; /* Centers the box horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;      /* Centers the text/button inside */
    justify-content: center;
}

/* FIXED CONTACT SECTION */
.contact-box {
    max-width: 700px;
    margin: 80px auto 40px auto; /* Centers it horizontally */
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--accent);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
}

.contact-email {
    display: inline-block;
    margin-top: 15px;
    color: #ffffff !important; /* Forces White Color */
    background: var(--accent);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-shadow: none;
    border: none;
}

.contact-email:hover {
    background: #ffffff;
    color: #000 !important;
    box-shadow: 0 0 15px var(--accent-glow);
}