/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── Variables ─────────────────────────────────── */
:root {
    --p:        #8b5cf6;
    --p-dark:   #7c3aed;
    --p-glow:   rgba(139,92,246,.35);
    --a:        #22d3ee;
    --a-glow:   rgba(34,211,238,.25);
    --bg:       #03030a;
    --bg2:      #07070f;
    --surf:     rgba(255,255,255,.025);
    --surf2:    rgba(255,255,255,.05);
    --bdr:      rgba(139,92,246,.15);
    --bdr2:     rgba(139,92,246,.4);
    --tx:       #f1f5f9;
    --tx2:      #94a3b8;
    --tx3:      #475569;
    --r:        12px;
    --mono:     'JetBrains Mono','Courier New',monospace;
    --sans:     'Inter',sans-serif;
    --t:        all .25s ease;
    --ts:       all .5s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior:smooth; }

body {
    font-family: var(--sans);
    background-color: var(--bg);
    color: var(--tx);
    line-height: 1.6;
    overflow-x: hidden;
    background-image:
        radial-gradient(ellipse at 0% 0%,   rgba(139,92,246,.07) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%,rgba(34,211,238,.04) 0%, transparent 55%),
        radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 100vw 100vh, 100vw 100vh, 36px 36px;
    background-attachment: fixed;
}

::selection { background:var(--p); color:#fff; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--p); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--p-dark); }

/* ── Helpers ────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.mono { font-family:var(--mono); }

/* ── Header ─────────────────────────────────────── */
.header {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(3,3,10,.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--bdr);
    transition:var(--t);
}
.header.scrolled {
    background:rgba(3,3,10,.97);
    box-shadow:0 0 40px rgba(0,0,0,.6);
}
.nav {
    display:flex; align-items:center; justify-content:space-between;
    max-width:1200px; margin:0 auto; padding:1.1rem 1.5rem;
    position:relative;
}
.nav-brand {
    font-family:var(--mono); font-size:1.3rem; font-weight:700;
    color:var(--p); letter-spacing:1px; user-select:none;
}
.bracket { color:var(--a); font-weight:400; }
.nav-menu { display:flex; list-style:none; gap:.25rem; align-items:center; }
.nav-link {
    text-decoration:none; color:var(--tx2); font-size:.875rem; font-weight:500;
    padding:.5rem .9rem; border-radius:6px; transition:var(--t);
    display:flex; gap:.3rem; align-items:center;
}
.nav-num { font-family:var(--mono); color:var(--p); font-size:.75rem; }
.nav-link:hover { color:var(--tx); background:var(--surf2); }
.nav-cta { color:var(--p); border:1px solid var(--bdr2); margin-left:.5rem; }
.nav-cta:hover { background:var(--p); color:#fff; border-color:var(--p); box-shadow:0 0 20px var(--p-glow); }
.nav-toggle { display:none; flex-direction:column; cursor:pointer; gap:5px; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--tx2); border-radius:2px; transition:var(--t); }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── Buttons ─────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.75rem 1.5rem; border-radius:8px; font-weight:600;
    font-size:.9rem; text-decoration:none; border:none; cursor:pointer;
    transition:var(--t); white-space:nowrap; letter-spacing:.3px;
}
.btn-primary { background:var(--p); color:#fff; }
.btn-primary:hover { background:var(--p-dark); transform:translateY(-2px); box-shadow:0 8px 25px var(--p-glow); }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost { background:transparent; color:var(--tx2); border:1px solid var(--bdr); }
.btn-ghost:hover { border-color:var(--p); color:var(--p); background:rgba(139,92,246,.05); transform:translateY(-2px); }
.btn-block { width:100%; justify-content:center; }
.btn.enabled { background:var(--p); box-shadow:0 0 20px var(--p-glow); }

/* ── Section commons ─────────────────────────────── */
section { padding:100px 0; }
.section-label { font-size:.8rem; color:var(--p); letter-spacing:1px; margin-bottom:.75rem; }
.section-title { font-size:clamp(2rem,5vw,3rem); font-weight:800; color:var(--tx); margin-bottom:.75rem; letter-spacing:-.5px; line-height:1.15; }
.section-sub { color:var(--tx2); font-size:1.05rem; margin-bottom:3.5rem; }

/* ── Hero ────────────────────────────────────────── */
.hero {
    min-height:100vh; display:flex; align-items:center;
    padding:120px 0 80px; position:relative; overflow:hidden;
}
.hero-content {
    display:grid; grid-template-columns:1.1fr .9fr; gap:4rem;
    align-items:center; max-width:1200px; margin:0 auto;
    padding:0 24px; position:relative; z-index:2;
}
.hero-left { display:flex; flex-direction:column; gap:1.5rem; }
.hero-greeting { font-size:1rem; color:var(--p); letter-spacing:1px; }
.hero-name {
    font-size:clamp(2.5rem,6vw,4.5rem); font-weight:900; line-height:1.05; letter-spacing:-1px;
    background:linear-gradient(135deg,#f1f5f9 30%,var(--p) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-role {
    font-family:var(--mono); font-size:1.3rem; color:var(--a);
    font-weight:500; display:flex; align-items:center; gap:.5rem; min-height:2rem;
}
.role-arrow { color:var(--p); opacity:.7; }
.cursor-blink { animation:blink 1s step-end infinite; color:var(--a); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-desc { color:var(--tx2); font-size:1.05rem; line-height:1.75; max-width:500px; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Terminal */
.terminal {
    background:rgba(0,0,0,.7); border:1px solid var(--bdr2);
    border-radius:var(--r); overflow:hidden;
    box-shadow:0 0 40px rgba(139,92,246,.12),0 20px 60px rgba(0,0,0,.5);
    font-family:var(--mono); font-size:.84rem;
    backdrop-filter:blur(10px);
}
.terminal-bar {
    display:flex; align-items:center; gap:.75rem;
    padding:.7rem 1rem; background:rgba(255,255,255,.03);
    border-bottom:1px solid var(--bdr);
}
.t-dots { display:flex; gap:6px; }
.dot { width:12px; height:12px; border-radius:50%; }
.dot.red { background:#ff5f57; }
.dot.yellow { background:#febc2e; }
.dot.green { background:#28c840; }
.t-title { color:var(--tx3); font-size:.78rem; flex:1; text-align:center; }
.terminal-body { padding:1rem 1.25rem; min-height:160px; color:#e2e8f0; line-height:1.9; overflow-y:auto; max-height:220px; }
.t-line { display:flex; align-items:flex-start; gap:.5rem; }
.t-prompt { color:var(--p); user-select:none; flex-shrink:0; }
.t-cmd { color:#f1f5f9; }
.t-out { color:var(--tx2); padding-left:1.1rem; font-size:.8rem; }
.t-out.success { color:#4ade80; }
.t-out.accent { color:var(--a); }

/* Hero decorative glows */
.hero-glow { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:1; }
.glow-1 { width:500px; height:500px; background:rgba(139,92,246,.06); top:-100px; right:-100px; }
.glow-2 { width:400px; height:400px; background:rgba(34,211,238,.04); bottom:-50px; left:0; }

/* Profile card */
.profile-card {
    background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r);
    padding:2.5rem 2rem; text-align:center; backdrop-filter:blur(10px);
    position:relative; overflow:hidden; transition:var(--ts);
}
.profile-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(139,92,246,.05) 0%,transparent 60%);
    pointer-events:none;
}
.profile-card:hover { border-color:var(--bdr2); box-shadow:0 0 60px rgba(139,92,246,.15); transform:translateY(-4px); }
.profile-avatar { position:relative; display:inline-block; margin-bottom:1.5rem; }
.profile-video {
    width:160px; height:200px; border-radius:50%; object-fit:cover;
    border:3px solid var(--p); display:block; position:relative; z-index:1;
}
.avatar-ring {
    position:absolute; inset:-8px; border-radius:50%;
    background:conic-gradient(var(--p),var(--a),var(--p));
    z-index:0; opacity:.45; animation:spin-ring 6s linear infinite; filter:blur(2px);
}
@keyframes spin-ring { to { transform:rotate(360deg); } }
.profile-card h3 { font-size:1.5rem; font-weight:700; margin-bottom:.35rem; }
.profile-role { color:var(--tx2); font-size:.9rem; margin-bottom:1rem; }
.profile-location { display:flex; align-items:center; justify-content:center; gap:.4rem; color:var(--tx2); font-size:.85rem; margin-bottom:.75rem; }
.profile-location i { color:var(--p); font-size:.8rem; }
.profile-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    background:rgba(74,222,128,.08); color:#4ade80;
    border:1px solid rgba(74,222,128,.2); padding:.35rem .9rem;
    border-radius:20px; font-size:.8rem; font-weight:500; margin-bottom:1.5rem;
}
.badge-dot { width:7px; height:7px; background:#4ade80; border-radius:50%; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.social-links { display:flex; justify-content:center; gap:.75rem; }
.social-link {
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; background:var(--surf2); color:var(--tx2); text-decoration:none;
    border:1px solid var(--bdr); transition:var(--t); font-size:.95rem;
}
.social-link:hover { background:var(--p); color:#fff; border-color:var(--p); transform:translateY(-3px); box-shadow:0 5px 15px var(--p-glow); }

/* ── About ───────────────────────────────────────── */
.about { background:rgba(7,7,15,.7); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); }
.about-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:4rem; align-items:start; margin-bottom:4rem; }
.about-text p { color:var(--tx2); margin-bottom:1.25rem; font-size:1.05rem; line-height:1.8; }
.about-text strong { color:var(--tx); }
.info-table { background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; margin-top:1.5rem; }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:.85rem 1.25rem; border-bottom:1px solid var(--bdr); font-size:.9rem; transition:var(--t); }
.info-row:last-child { border-bottom:none; }
.info-row:hover { background:var(--surf2); }
.info-key { color:var(--tx2); display:flex; align-items:center; gap:.5rem; font-size:.85rem; }
.info-key i { color:var(--p); width:14px; }
.info-val { color:var(--tx); font-weight:500; font-size:.85rem; }
.stats-col { display:grid; gap:1rem; }
.stat-card {
    background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r);
    padding:1.75rem 1.5rem; position:relative; overflow:hidden; transition:var(--ts);
}
.stat-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--p); opacity:.7; }
.stat-card:hover { border-color:var(--bdr2); background:var(--surf2); box-shadow:0 0 30px rgba(139,92,246,.1); transform:translateX(4px); }
.stat-num { font-size:2.5rem; font-weight:900; font-family:var(--mono); color:var(--p); line-height:1; }
.stat-plus { font-size:1.5rem; font-weight:700; color:var(--a); margin-left:2px; }
.stat-label { color:var(--tx2); font-size:.85rem; margin-top:.35rem; text-transform:uppercase; letter-spacing:.5px; }

/* Tech Stack */
.tech-section { border-top:1px solid var(--bdr); padding-top:3rem; }
.tech-heading { font-size:1.1rem; color:var(--tx2); margin-bottom:1.75rem; font-weight:500; }
.tech-heading .mono { color:var(--p); }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.75rem; }
.tech-item {
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    padding:1rem .5rem; background:var(--surf); border:1px solid var(--bdr);
    border-radius:var(--r); font-size:.78rem; color:var(--tx2);
    cursor:default; transition:var(--t); text-align:center;
}
.tech-item:hover { background:var(--surf2); transform:translateY(-4px); border-color:var(--bdr2); color:var(--tx); }
.tech-item i { font-size:1.75rem; transition:var(--t); }
.tech-item:hover i { filter:drop-shadow(0 0 8px currentColor); }
.ti-js     { color:#f7df1e; }
.ti-php    { color:#777bb4; }
.ti-node   { color:#68a063; }
.ti-db     { color:#00758f; }
.ti-react  { color:#61dafb; }
.ti-python { color:#3776ab; }
.ti-html   { color:#e34f26; }
.ti-css    { color:#1572b6; }
.ti-git    { color:#f05032; }
.ti-linux  { color:#fcc624; }
.ti-wp     { color:#21759b; }
.ti-docker { color:#2496ed; }

/* ── Projects ────────────────────────────────────── */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.5rem; margin-top:3rem; }
.project-card {
    background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r);
    padding:2rem; position:relative; overflow:hidden; transition:var(--ts);
    display:flex; flex-direction:column; gap:1rem;
}
.project-card::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--p),var(--a));
    transform:scaleX(0); transition:var(--ts); transform-origin:left;
}
.project-card:hover { border-color:var(--bdr2); background:var(--surf2); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px rgba(139,92,246,.1); }
.project-card:hover::after { transform:scaleX(1); }
.project-num { font-size:.75rem; color:var(--tx3); letter-spacing:1px; }
.project-icon {
    font-size:2rem; color:var(--p); width:50px; height:50px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(139,92,246,.1); border-radius:10px;
    border:1px solid rgba(139,92,246,.2); transition:var(--t);
}
.project-card:hover .project-icon { background:rgba(139,92,246,.2); box-shadow:0 0 20px var(--p-glow); }
.project-card h3 { font-size:1.15rem; font-weight:700; color:var(--tx); }
.project-card p { color:var(--tx2); font-size:.9rem; line-height:1.65; flex:1; }
.project-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.project-tags span {
    background:rgba(139,92,246,.08); color:var(--p);
    border:1px solid rgba(139,92,246,.2);
    padding:.25rem .65rem; border-radius:20px;
    font-size:.75rem; font-family:var(--mono); font-weight:500;
}
.project-links { display:flex; gap:.75rem; margin-top:auto; }
.plink {
    display:inline-flex; align-items:center; gap:.4rem; color:var(--tx2);
    font-size:.85rem; text-decoration:none; padding:.4rem .85rem;
    border:1px solid var(--bdr); border-radius:6px; transition:var(--t); font-weight:500;
}
.plink:hover { color:var(--p); border-color:var(--p); background:rgba(139,92,246,.05); }
.plink-ghost { border-color:transparent; color:var(--tx3); }
.plink-ghost:hover { border-color:var(--bdr); color:var(--tx2); background:var(--surf); }

/* ── Blog ────────────────────────────────────────── */
.blog { background:rgba(7,7,15,.7); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin-top:3rem; }

/* Skeleton */
.blog-skeleton { background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; animation:sk-pulse 1.8s ease-in-out infinite; }
@keyframes sk-pulse { 0%,100%{opacity:.7} 50%{opacity:.4} }
.sk-img { height:140px; background:rgba(255,255,255,.04); position:relative; overflow:hidden; }
.sk-img::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:shimmer 1.8s infinite; }
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.sk-body { padding:1.25rem; }
.sk-line { height:13px; background:rgba(255,255,255,.05); border-radius:6px; margin-bottom:.65rem; }
.w100{width:100%} .w80{width:80%} .w60{width:60%}

/* Blog cards (from JS) */
.blog-card {
    background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r);
    overflow:hidden; position:relative; transition:var(--ts);
    opacity:0; transform:translateY(20px);
    display:flex; flex-direction:column;
}
.blog-card.show { opacity:1; transform:translateY(0); }
.blog-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--a),var(--p)); z-index:2; }
.blog-card:hover { border-color:var(--bdr2); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 30px rgba(34,211,238,.08); }
.blog-image {
    height:140px; background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(34,211,238,.1));
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:var(--p); overflow:hidden; position:relative;
}
.blog-img { width:100%; height:100%; object-fit:cover; transition:var(--ts); }
.blog-card:hover .blog-img { transform:scale(1.05); }
.blog-overlay {
    position:absolute; inset:0; background:rgba(3,3,10,.75);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:var(--t);
}
.blog-card:hover .blog-overlay { opacity:1; }
.blog-overlay-details { text-align:center; color:#fff; }
.blog-overlay-details h5 { font-size:.9rem; font-weight:600; margin-bottom:.3rem; padding:0 1rem; }
.blog-overlay-details span { font-size:.75rem; color:var(--a); font-family:var(--mono); }
.blog-content { padding:1.35rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.blog-meta { display:flex; gap:.75rem; align-items:center; }
.blog-category { font-family:var(--mono); font-size:.72rem; color:var(--a); font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.blog-content h3 { font-size:1rem; font-weight:700; color:var(--tx); line-height:1.4; }
.blog-content p { color:var(--tx2); font-size:.875rem; line-height:1.6; flex:1; }
.read-more { color:var(--p); font-size:.85rem; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; transition:var(--t); align-self:flex-start; }
.read-more:hover { color:var(--a); gap:.6rem; }
.blog-cta { text-align:center; margin-top:3rem; }
.blog-error { grid-column:1/-1; text-align:center; padding:3rem; color:var(--tx2); }
.blog-error i { font-size:2rem; color:#ef4444; margin-bottom:1rem; display:block; }
.blog-error p { margin-bottom:1.5rem; }

/* ── Contact ─────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:3.5rem; margin-top:3rem; }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.contact-item {
    display:flex; align-items:center; gap:1rem; padding:1.25rem;
    background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r); transition:var(--t);
}
.contact-item:hover { border-color:var(--bdr2); background:var(--surf2); transform:translateX(6px); box-shadow:-4px 0 20px rgba(139,92,246,.1); }
.c-icon {
    width:44px; height:44px; background:rgba(139,92,246,.1);
    border:1px solid rgba(139,92,246,.2); border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:var(--p); font-size:1rem; flex-shrink:0; transition:var(--t);
}
.contact-item:hover .c-icon { background:var(--p); color:#fff; box-shadow:0 0 15px var(--p-glow); }
.contact-item h4 { font-size:.8rem; color:var(--tx3); text-transform:uppercase; letter-spacing:.5px; font-weight:500; margin-bottom:.2rem; }
.contact-item p { color:var(--tx); font-size:.9rem; }
.avail-box {
    display:flex; align-items:flex-start; gap:1rem; padding:1.25rem;
    background:rgba(74,222,128,.04); border:1px solid rgba(74,222,128,.15);
    border-radius:var(--r); margin-top:.5rem;
}
.avail-dot { width:10px; height:10px; background:#4ade80; border-radius:50%; flex-shrink:0; margin-top:4px; box-shadow:0 0 8px #4ade80; animation:pulse-avail 2s ease-in-out infinite; }
@keyframes pulse-avail { 0%,100%{box-shadow:0 0 8px #4ade80} 50%{box-shadow:0 0 16px #4ade80,0 0 30px rgba(74,222,128,.3)} }
.avail-box strong { display:block; color:#4ade80; font-size:.9rem; margin-bottom:.2rem; }
.avail-box p { color:var(--tx2); font-size:.82rem; line-height:1.4; }

/* Form */
.contact-form {
    background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r);
    padding:2rem; display:grid; gap:1.25rem; transition:var(--t);
}
.contact-form:hover { border-color:var(--bdr2); }
.form-group { display:flex; flex-direction:column; gap:.5rem; }
.form-group label { font-size:.82rem; color:var(--tx2); font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.form-group input,
.form-group textarea {
    background:rgba(0,0,0,.3); border:1px solid var(--bdr); border-radius:8px;
    padding:.85rem 1rem; color:var(--tx); font-size:.9rem; font-family:var(--sans);
    transition:var(--t); resize:vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--tx3); }
.form-group input:focus,
.form-group textarea:focus { outline:none; border-color:var(--p); box-shadow:0 0 0 3px rgba(139,92,246,.1); background:rgba(0,0,0,.5); }
.form-group input:valid:not(:placeholder-shown) { border-color:rgba(74,222,128,.4); }

/* Captcha */
.captcha-step-2 { opacity:0; transform:translateY(10px); transition:all .4s ease; }
.captcha-step-2.show { opacity:1; transform:translateY(0); }
.captcha-label {
    display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem;
    background:rgba(0,0,0,.3); border:1px solid var(--bdr); border-radius:8px;
    cursor:pointer; transition:var(--t);
}
.captcha-label:hover { border-color:var(--bdr2); background:var(--surf2); }
.captcha-checkbox { display:none; }
.checkmark { width:22px; height:22px; border:2px solid var(--bdr2); border-radius:5px; background:transparent; position:relative; transition:var(--t); flex-shrink:0; }
.captcha-checkbox:checked + .checkmark { background:var(--p); border-color:var(--p); }
.captcha-checkbox:checked + .checkmark::after {
    content:'✓'; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); color:#fff; font-size:13px; font-weight:700; line-height:1;
}
.captcha-text { color:var(--tx2); font-size:.875rem; }
.captcha-advanced { border:1px solid var(--bdr); border-radius:8px; overflow:hidden; }
.captcha-hint { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:rgba(0,0,0,.2); color:var(--tx3); font-size:.78rem; border-top:1px solid var(--bdr); }
.captcha-hint i { color:var(--p); }

/* ── Footer ──────────────────────────────────────── */
.footer { background:rgba(0,0,0,.9); border-top:1px solid var(--bdr); padding:3.5rem 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo { font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--p); margin-bottom:.75rem; }
.footer-brand p { color:var(--tx2); font-size:.875rem; line-height:1.6; }
.footer-tag { color:var(--tx3) !important; font-size:.78rem !important; margin-top:.5rem; }
.footer-nav h4,
.footer-social h4 { color:var(--tx); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:1rem; }
.footer-nav ul { list-style:none; }
.footer-nav a { color:var(--tx2); text-decoration:none; font-size:.875rem; display:block; padding:.25rem 0; transition:var(--t); }
.footer-nav a:hover { color:var(--p); padding-left:6px; }
.footer-social-links { display:flex; gap:.5rem; flex-wrap:wrap; }
.footer-social-links a {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--bdr); border-radius:7px; color:var(--tx2);
    text-decoration:none; font-size:.9rem; transition:var(--t);
}
.footer-social-links a:hover { border-color:var(--p); color:var(--p); background:rgba(139,92,246,.08); }
.footer-bottom {
    border-top:1px solid rgba(255,255,255,.05); padding-top:1.5rem;
    display:flex; justify-content:space-between; align-items:center;
    color:var(--tx3); font-size:.82rem;
}

/* ── Notifications ───────────────────────────────── */
.notification {
    position:fixed; top:24px; right:24px; padding:.9rem 1.5rem;
    border-radius:10px; color:#fff; font-weight:500; font-size:.875rem;
    z-index:10000; transform:translateX(120%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    max-width:320px; box-shadow:0 8px 24px rgba(0,0,0,.4); backdrop-filter:blur(10px);
}
.notification.show { transform:translateX(0); }
.notification-success { background:rgba(16,185,129,.9); border:1px solid rgba(52,211,153,.3); }
.notification-error   { background:rgba(239,68,68,.9);  border:1px solid rgba(252,129,129,.3); }
.notification-info    { background:rgba(59,130,246,.9); border:1px solid rgba(99,166,246,.3); }

/* ── Fade-in ─────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width:900px) {
    .hero-content { grid-template-columns:1fr; gap:3rem; }
    .hero-right { display:flex; justify-content:center; }
    .profile-card { max-width:320px; }
    .about-grid { grid-template-columns:1fr; gap:2.5rem; }
    .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
    .footer-brand { grid-column:1/-1; }
}
@media (max-width:768px) {
    .nav-menu {
        position:absolute; top:100%; left:0; right:0;
        background:rgba(3,3,10,.98); border-bottom:1px solid var(--bdr);
        padding:1rem 1.5rem 1.5rem; flex-direction:column; align-items:stretch; gap:.25rem;
        opacity:0; pointer-events:none; transform:translateY(-8px);
        transition:opacity .25s ease, transform .25s ease;
        z-index:999;
    }
    .nav-menu.active { opacity:1; pointer-events:all; transform:translateY(0); }
    .nav-menu .nav-link { padding:.75rem 1rem; border-radius:8px; width:100%; }
    .nav-toggle { display:flex; }
    .nav-cta { margin-left:0; margin-top:.5rem; justify-content:center; }
    section { padding:70px 0; }
    .hero-actions { flex-direction:column; }
    .hero-actions .btn { justify-content:center; }
    .projects-grid { grid-template-columns:1fr; }
    .blog-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:1.5rem; }
    .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; }
    .tech-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
}
@media (max-width:480px) {
    .container { padding:0 16px; }
    .hero { padding:100px 0 60px; }
    .hero-name { font-size:2.5rem; }
    .section-title { font-size:1.75rem; }
    .terminal { font-size:.78rem; }
    .stats-col { grid-template-columns:1fr 1fr; }
}