body.modern-security-mode .coin-front {
opacity: 0;
animation: none;
}

body.modern-security-mode .coin-back {
opacity: 1;
transform: scale(1);
animation: none;
}

body.modern-security-mode .coin-back {
background: var(--profile-photo) var(--profile-photo-position) / cover no-repeat;
}

body.modern-security-mode {
--bg: #060816;
--card: rgba(13, 16, 32, 0.72);
--blue: #4f46e5;
--cyan: #8b5cf6;
--text: #ffffff;
--muted: #a6adbd;
--border: rgba(255, 255, 255, 0.08);
--particle: rgba(139, 92, 246, 0.82);
--particle-line: 139, 92, 246;
--particle-mouse: rgba(0, 255, 136, 0.34);
--profile-photo: url("/assets/img/rahman-Cinematic_portrait_with_dramatic_lighting.png");
--profile-photo-position: center top;
background:
radial-gradient(ellipse at 78% 14%, rgba(139, 92, 246, 0.32), transparent 38%),
radial-gradient(ellipse at 18% 60%, rgba(79, 70, 229, 0.22), transparent 36%),
linear-gradient(145deg, #060816 0%, #090b1d 48%, #050711 100%);
}

body.modern-security-mode::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}

body.modern-security-mode header {
background: rgba(6, 8, 22, 0.72);
border-bottom-color: rgba(139, 92, 246, 0.20);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.20);
}

body.modern-security-mode .logo {
color: #ffffff;
}

body.modern-security-mode .logo span,
body.modern-security-mode nav a:hover,
body.modern-security-mode .title span,
body.modern-security-mode .card i,
body.modern-security-mode .project-img i,
body.modern-security-mode .tools-source i,
body.modern-security-mode .tools-source a {
color: #8b5cf6;
}

body.modern-security-mode nav a {
color: #d1d5db;
}

body.modern-security-mode .hero {
gap: 42px;
}

body.modern-security-mode .hero h1,
body.modern-security-mode .title h2,
body.modern-security-mode .card h3 {
color: #ffffff;
}

body.modern-security-mode .hero h1 span {
background: linear-gradient(90deg, #ffffff 0%, #bfa7ff 48%, #7d94ff 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.modern-security-mode .hero h2 {
background: linear-gradient(90deg, #a78bfa, #6d7dff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.modern-security-mode .hero p,
body.modern-security-mode .card p,
body.modern-security-mode .about-text p,
body.modern-security-mode .contact-box p,
body.modern-security-mode .tools-intro,
body.modern-security-mode .tools-source {
color: #a6adbd;
}

body.modern-security-mode .badge {
background: rgba(0, 255, 136, 0.045);
border-color: rgba(0, 255, 136, 0.28);
color: #00ff88;
box-shadow: 0 0 28px rgba(0, 255, 136, 0.06);
}

body.modern-security-mode .badge i {
color: #00ff88;
filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.45));
}

body.modern-security-mode .btn {
color: #dfe4ee;
background: rgba(255, 255, 255, 0.035);
border-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
}

body.modern-security-mode .btn.primary {
position: relative;
overflow: hidden;
color: #ffffff;
background: linear-gradient(135deg, #8b5cf6, #4f46e5);
box-shadow: 0 14px 42px rgba(79, 70, 229, 0.38);
}

body.modern-security-mode .btn.primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
transition: left .7s ease;
}

body.modern-security-mode .btn.primary:hover::before {
left: 100%;
}

body.modern-security-mode .btn:hover {
box-shadow: 0 18px 42px rgba(79, 70, 229, 0.24);
border-color: rgba(139, 92, 246, 0.42);
}

body.modern-security-mode .hero-card,
body.modern-security-mode .card,
body.modern-security-mode .contact-box,
body.modern-security-mode .tools-source {
background: rgba(13, 16, 32, 0.72);
border-color: rgba(255, 255, 255, 0.075);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
0 24px 70px rgba(0, 0, 0, 0.28);
}

body.modern-security-mode .hero-card {
min-height: 500px;
border-radius: 32px;
overflow: visible;
backdrop-filter: blur(18px);
}

body.modern-security-mode .hero-card::before {
inset: -1px;
border: 1px solid transparent;
border-radius: inherit;
background:
linear-gradient(rgba(13, 16, 32, 0.70), rgba(13, 16, 32, 0.70)) padding-box,
linear-gradient(135deg, rgba(139, 92, 246, 0.58), transparent 45%, rgba(79, 70, 229, 0.48)) border-box;
}

body.modern-security-mode .hero-card::after {
width: 620px;
height: 620px;
left: 50%;
top: 50%;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.28), transparent 68%);
filter: blur(42px);
transform: translate(-50%, -50%);
animation: modernSecurityGlow 5.5s ease-in-out infinite;
}

body.modern-security-mode .profile-frame {
width: 312px;
height: 312px;
padding: 8px;
background: linear-gradient(135deg, #8b5cf6, #4f46e5);
box-shadow:
0 0 34px rgba(139, 92, 246, 0.42),
0 28px 90px rgba(0, 0, 0, 0.34);
}

body.modern-security-mode .profile-frame::before {
inset: -24px;
border-color: rgba(139, 92, 246, 0.28);
box-shadow: 0 0 60px rgba(139, 92, 246, 0.18);
}

body.modern-security-mode .profile-frame::after {
content: ">_  Automate  Secure  Deploy";
position: absolute;
left: -108px;
top: 38px;
z-index: 4;
width: 162px;
padding: 16px 18px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(13, 16, 32, 0.78);
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1.6;
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(18px);
}

body.modern-security-mode .coin-face {
background: #0d1020;
}

body.modern-security-mode .coin-back {
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

body.modern-security-mode .coin-back img {
filter: contrast(1.08) saturate(1.08);
}

body.modern-security-mode .card {
position: relative;
overflow: hidden;
border-radius: 28px;
}

body.modern-security-mode .card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.46), transparent 45%, rgba(79, 70, 229, 0.38));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}

body.modern-security-mode .card:hover {
transform: translateY(-8px);
border-color: rgba(139, 92, 246, 0.42);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

body.modern-security-mode .about-photo,
body.modern-security-mode .project-img {
background:
radial-gradient(circle at top right, rgba(139, 92, 246, 0.34), transparent 45%),
linear-gradient(135deg, rgba(79, 70, 229, 0.20), rgba(13, 16, 32, 0.78));
border-color: rgba(139, 92, 246, 0.26);
box-shadow: inset 0 0 48px rgba(139, 92, 246, 0.06);
}

body.modern-security-mode .skill,
body.modern-security-mode .tool-tags span {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.08);
color: #dfe4ee;
}

body.modern-security-mode .socials a,
body.modern-security-mode .theme-toggle {
color: #dfe4ee;
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}

body.modern-security-mode .socials a:hover,
body.modern-security-mode .theme-toggle:hover {
color: #ffffff;
background: rgba(139, 92, 246, 0.20);
box-shadow: 0 18px 44px rgba(139, 92, 246, 0.20);
}

body.modern-security-mode .blob.one {
background: radial-gradient(circle, rgba(139, 92, 246, 0.48), transparent 65%);
filter: blur(60px);
}

body.modern-security-mode .blob.two {
background: radial-gradient(circle, rgba(79, 70, 229, 0.36), transparent 65%);
filter: blur(72px);
}

body.modern-security-mode footer {
background: rgba(6, 8, 22, 0.62);
border-top-color: rgba(255, 255, 255, 0.06);
color: #7f8798;
}

body.modern-security-mode {
--theme-menu-bg: rgba(6, 8, 22, 0.94);
--theme-menu-hover: rgba(139, 92, 246, 0.10);
--theme-menu-active: rgba(139, 92, 246, 0.16);
}

@media (max-width: 768px) {
body.modern-security-mode .hero-card {
min-height: 390px;
}

}

@media (max-width: 768px) {
body.modern-security-mode .profile-frame {
width: 250px;
height: 250px;
}

}

@media (max-width: 768px) {
body.modern-security-mode .profile-frame::after {
display: none;
}

}

body.modern-security-mode {
font-family: "Inter", "Poppins", sans-serif;
background:
radial-gradient(circle at 62% 24%, rgba(92, 39, 230, .24), transparent 32%),
radial-gradient(circle at 86% 27%, rgba(21, 78, 180, .18), transparent 28%),
linear-gradient(180deg, #02050c 0%, #050914 48%, #03060d 100%);
color: #ffffff;
}

body.modern-security-mode > canvas,
body.modern-security-mode > header,
body.modern-security-mode > section,
body.modern-security-mode > footer {
display: none;
}

body.modern-security-mode .ms-header-right .theme-picker {
position: relative;
margin-left: 0;
}

body.modern-security-mode .modern-security-page {
display: block;
position: relative;
z-index: 2;
width: min(1168px, calc(100% - 88px));
margin: 0 auto;
padding: 28px 0 24px;
color: #ffffff;
}

body.modern-security-mode .modern-security-page * {
box-sizing: border-box;
}

@media (max-width: 1100px) {
body.modern-security-mode .modern-security-page {
width: min(100% - 32px, 1060px);
}

}

@media (max-width: 520px) {
body.modern-security-mode .modern-security-page {
width: calc(100% - 24px);
padding-top: 18px;
}

}