:root {
--bg:#0b0e13;
--panelL1:#10152b; --panelL2:#0d1b2a;
--panelR1:#0e1f24; --panelR2:#243b55;
--accent:#ff7b87; --muted:#a7b1bf;
--surface:#151922; --card:#1b2130; --white:#fff;
}
* { box-sizing:border-box; margin:0; padding:0 }
html, body { height:100% }
body {
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background:var(--bg); color:var(--white); overflow-x:hidden;
}
/* NAV */
.nav {
position:fixed; top:16px; left:50%; transform:translateX(-50%);
width:min(1100px,94vw); display:flex; justify-content:space-between; align-items:center;
padding:10px 14px; border-radius:14px; z-index:10;
background:rgba(12,14,20,.6); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
}
.brand { text-decoration:none; color:#cfe0ff; font-weight:800; font-size:18px; letter-spacing:2px }
.nav-links a { color:#dfe7ff; text-decoration:none; margin-left:14px; font-weight:600; opacity:.9 }
.nav-links a.pill { background:#2b3143; padding:8px 12px; border-radius:999px }
.nav-links a:hover { opacity:1 }
/* HERO */
.hero { position:relative; display:flex; min-height:100vh; isolation:isolate; padding-top:70px; }
.panel {
position:relative; flex:1; display:flex; align-items:center; justify-content:center;
padding:6rem 2rem 6.5rem; transition:flex 600ms ease, filter 400ms ease; overflow:hidden;
}
.panel.left { background:radial-gradient(80% 120% at 20% 50%, #1a2749 0,var(--panelL1) 50%,var(--panelL2) 100%) }
.panel.right { background:radial-gradient(80% 120% at 80% 50%, #17434e 0,var(--panelR1) 50%,var(--panelR2) 100%) }
.hero:hover .panel { filter:grayscale(25%) opacity(.92) }
.hero .panel:hover { flex:1.25; filter:none }
/* center divider */
.hero::before {
content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:2;
background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22),transparent);
}
/* grid overlay */
.grid-overlay {
position:absolute; inset:0; z-index:1; pointer-events:none;
background-image:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(90% 80% at 50% 50%, #000 60%, transparent 100%);
}
/* Role headings & subs like ref */
.role-heading {
position:absolute; top:18%; z-index:3; font-weight:800;
font-size:clamp(30px,5.4vw,60px); color:#fff;
}
.role-sub {
position:absolute; top:8%; z-index:3; color:var(--muted);
font-size:clamp(14px,1.7vw,18px);
}
.panel.left .role-heading { left:8%; text-align:left }
.panel.left .role-sub { left:8%; text-align:left }
.panel.right .role-heading { right:8%; text-align:right }
.panel.right .role-sub { right:8%; text-align:right }
/* Thematic overlays */
.panel.left::after {
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat:no-repeat,no-repeat;
background-position: 18% 38%, 78% 72%;
background-size: 240px 240px, 140px 170px;
}
.panel.right::after {
content:" { CSS } function solve(){ return true }";
position:absolute; inset:0; pointer-events:none; z-index:1;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size:clamp(16px,3vw,28px); color:rgba(255,255,255,.08);
display:flex; align-items:center; justify-content:center; text-align:center; white-space:pre;
}
/* ✅ EXTRA snippet block below coding section */
.panel.right .grid-overlay::after {
content: "\A{ CSS }\Afunction solve(){ return true }\A.card:hover { transform: translateY(-6px); }";
position: absolute;
left: 8%;
right: 8%;
bottom: 18%;
z-index: 2;
white-space: pre;
text-align: center;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: clamp(12px, 1.8vw, 18px);
line-height: 1.7;
color: rgba(255,255,255,0.12);
pointer-events: none;
}
/* Portrait */
.portrait {
position:absolute; left:50%; top:66.1%;
transform:translate(-50%,-55%);
width:min(50vw, 620px); max-width:92vw; z-index:4;
filter: drop-shadow(0 20px 40px rgba(0,0,0,.55));
}
/* Overlay CTAs */
.hero-cta {
position:absolute; top:83%; left:50%; transform:translateX(-50%);
z-index:5; display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.btn {
display:inline-block; text-decoration:none; font-weight:700; border-radius:12px;
padding:12px 16px; transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn.primary { background:var(--accent); color:#120b0b }
.btn.primary:hover { transform:translateY(-2px) }
.btn.ghost { background:#2a2f3f; color:#d9e1ff }
.btn.ghost:hover { transform:translateY(-2px) }
/* Blog button styled like primary but with black text */
.btn.blog {
background:var(--accent);
color:#000;
}
.btn.blog:hover {
transform:translateY(-2px);
background:#e84118;
color:#000;
}
/* Name */
.name {
position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
font-size:clamp(34px,5vw,56px); font-weight:800; z-index:5;
text-align:center; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45);
}
/* Sections */
.section { padding:88px 20px; background:var(--surface) }
.section.dark { background:#0f141e }
.container { max-width:1100px; margin:0 auto }
.section h2 { font-size:clamp(28px,4vw,40px); margin-bottom:14px }
.section p { color:#c7d0dc; max-width:900px; line-height:1.7 }
.cards { display:grid; gap:18px; margin-top:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.card {
background:var(--card); border:1px solid rgba(255,255,255,.06);
border-radius:14px; padding:20px; transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.35) }
.card h3 { margin-bottom:8px }
.card .tags { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap }
.card .tags span {
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
padding:4px 8px; border-radius:999px; font-size:12px; color:#dfe7ff;
}
.links { list-style:none; display:flex; gap:18px; margin-top:18px; flex-wrap:wrap }
.links a { color:var(--accent); text-decoration:none; font-weight:700 }
.links a:hover { text-decoration:underline }
/* Accent color for blog Read later links */
.card a.mini.accent {
color: var(--accent);
font-weight: 600;
text-decoration: none;
transition: color .2s ease;
}
.card a.mini.accent:hover {
text-decoration: underline;
color: #ff5160; /* brighter hover */
}
.footer { padding:28px 20px; background:#0b0f18; color:#9fb0c8 }
.footer .container { max-width:1100px; margin:0 auto }
/* ==== AI & Cybersecurity floating particles (LEFT panel only) ==== */
.panel.left .grid-overlay::before{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
opacity:.45;
background-image:
radial-gradient(rgba(124,152,255,.45) 2px, transparent 3px),
radial-gradient(rgba(184,255,239,.45) 1.5px, transparent 3px);
background-size: 120px 120px, 180px 180px;
background-position: 0 0, 60px 90px;
animation: leftParticlesUp1 22s linear infinite;
mix-blend-mode: screen;
}
.panel.left .grid-overlay::after{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
opacity:.30;
background-image:
radial-gradient(rgba(168,214,255,.35) 3px, transparent 4px),
radial-gradient(rgba(150,255,230,.30) 2px, transparent 4px);
background-size: 220px 220px, 260px 260px;
background-position: 40px 120px, 120px 40px;
animation: leftParticlesUp2 36s linear infinite reverse;
mix-blend-mode: screen;
}
@keyframes leftParticlesUp1{
from { background-position: 0 0, 60px 90px; }
to { background-position: 0 -600px, 60px -540px; }
}
@keyframes leftParticlesUp2{
from { background-position: 40px 120px, 120px 40px; }
to { background-position: 40px -720px, 120px -660px; }
}
/* === Section badass backgrounds === */
.section {
position: relative;
overflow: hidden;
}
/* force text above animations */
.section .container,
.section h2,
.section p,
.section .cards,
.section .links {
position: relative;
z-index: 5;
}
.section::before,
.section::after {
z-index: 0;
}
/* Animated gradient layer */
.section::before {
content:"";
position:absolute;
inset:0;
background:linear-gradient(-45deg,#1a2749,#0d1b2a,#243b55,#0e1f24);
background-size:400% 400%;
animation: sectionGradient 18s ease infinite;
opacity:.7;
}
.section::after {
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:60px 60px;
animation: gridScroll 40s linear infinite;
opacity:.25;
}
/* Floating cyber orbs */
.section .orb {
position:absolute;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 70%);
animation: floatOrb 26s ease-in-out infinite;
mix-blend-mode:screen;
z-index:2;
}
.section .orb.one { width:160px; height:160px; top:20%; left:10%; animation-delay:0s; }
.section .orb.two { width:100px; height:100px; bottom:15%; right:15%; animation-delay:6s; }
.section .orb.three { width:140px; height:140px; top:65%; left:60%; animation-delay:12s; }
@keyframes sectionGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gridScroll {
from{background-position:0 0,0 0}
to{background-position:200px 600px,600px 200px}
}
@keyframes floatOrb {
0%{transform:translateY(0) translateX(0) scale(1)}
50%{transform:translateY(-60px) translateX(40px) scale(1.1)}
100%{transform:translateY(0) translateX(0) scale(1)}
}
/* ===== Responsive for tablets and phones ===== */
@media (max-width: 980px) {
.hero { flex-direction: column; padding-top: 60px; }
.panel { min-height: 50vh; padding: 4rem 1rem; }
.portrait { width: min(70vw, 420px); top: 50%; transform: translate(-50%, -55%); }
.hero-cta { top: 78%; gap: 10px; flex-wrap: wrap; }
.role-heading { top: 12%; font-size: clamp(26px, 6vw, 40px); }
.role-sub { top: 22%; font-size: 14px; }
/* lighten overlays on smaller screens */
.panel.right::after { opacity: .06; font-size: clamp(12px, 3.5vw, 18px); }
.panel.left .grid-overlay::before,
.panel.left .grid-overlay::after { opacity: .28; }
}
/* ===== Smaller phones ===== */
@media (max-width: 540px) {
.portrait { width: min(80vw, 340px); top: 40.2%; }
.name { bottom: 70px; font-size: 22px; }
.cards { grid-template-columns: 1fr; gap: 14px; }
.card { padding: 16px; }
.section { padding: 64px 16px; }
.section h2 { font-size: 24px; }
.hero-cta { top: 68%; }
}