/* ---------- ROOT + THEME ---------- */
:root{
  /* Core backgrounds */
  --bg:#050607;
  --bg-secondary:#0a0d0f;
  --panel:#0b0f12;
  --card:#0d1216;
  --card-hover:#111820;

  /* Text */
  --muted:#7a8491;
  --text:#e6fef1;
  --text-secondary:#9fbfb0;

  /* Futuristic green accents */
  --accent:#13533a;
  --accent2:#287f55;
  --accent3:#2e796a;
  --accent4:#237a43;

  /* Status */
  --success:#22ff88;
  --warning:#facc15;
  --error:#ff4d4d;

  /* Effects */
  --shadow:0 10px 40px rgba(0,0,0,.75);
  --shadow-lg:0 20px 70px rgba(0,0,0,.9);

  --glow:0 0 20px rgba(0,255,156,.45);
  --glow-lg:0 0 45px rgba(0,255,156,.75);

  /* Borders & radius */
  --border:rgba(0,255,156,.18);
  --radius:20px;
  --radius-sm:12px;

  /* Gradients */
  --gradient-1:linear-gradient(135deg,#307d60 0%,#00c853 100%);
  --gradient-2:linear-gradient(135deg,#00ff9c 0%,#2affd5 100%);
  --gradient-3:linear-gradient(135deg,#00c853 0%,#4ade80 100%);

  /* Images untouched */
  --profile-image:url('https://picsum.photos/seed/mohamedprofile/400/400.jpg');
  --project-image-1:url('https://picsum.photos/seed/vlanproject/600/400.jpg');
  --project-image-2:url('https://picsum.photos/seed/ospfproject/600/400.jpg');
  --project-image-3:url('https://picsum.photos/seed/ipv6project/600/400.jpg');
  --project-image-4:url('https://picsum.photos/seed/securityproject/600/400.jpg');
  --project-image-5:url('https://picsum.photos/seed/officeproject/600/400.jpg');
  --project-image-6:url('https://picsum.photos/seed/scriptproject/600/400.jpg');
  --google-image:url('https://picsum.photos/seed/googleproject/600/400.jpg');
}

[data-theme="light"]{
  --bg:#eef2f6;--bg-secondary:#f8fafc;--panel:#ffffff;--card:#ffffff;--card-hover:#ffffff;
  --muted:#64748b;--text:#0f172a;--text-secondary:#334155;--accent:#127b51;--accent2:#f59e0b;
  --accent3:#8b5cf6;--accent4:#ec4899;--success:#146d35;--warning:#f59e0b;--error:#ef4444;
  --shadow:0 10px 40px rgba(0,0,0,.08);--shadow-lg:0 20px 60px rgba(0,0,0,.12);
  --glow:0 0 20px rgba(14,165,233,.4);--glow-lg:0 0 40px rgba(14,165,233,.6);
  --border:rgba(148,163,184,.1);
  body{ font-family:'Inter',system-ui;background:var(--bg);color:var(--text); overflow-x:hidden;animation:fadeIn 1s ease-out; position:relative; } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui;background:var(--bg);color:var(--text);
  overflow-x:hidden;animation:fadeIn 1s ease-out;
  position:relative;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ---------- ENHANCED BACKGROUND ---------- */
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden}
.aurora div{position:absolute;width:900px;height:900px;border-radius:50%;filter:blur(120px);opacity:.3;animation:float 25s infinite ease-in-out}
.aurora .a1{background:radial-gradient(circle,var(--accent) 0%,transparent 65%);top:-250px;left:-200px}
.aurora .a2{background:radial-gradient(circle,var(--accent2) 0%,transparent 65%);bottom:-250px;right:-200px;animation-delay:10s}
.aurora .a3{background:radial-gradient(circle,var(--accent3) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:5s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(140px,-110px) scale(1.15)}66%{transform:translate(-160px,100px) scale(.9)}}

#networkCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none}
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ---------- LOADING SCREEN ---------- */
.loading-screen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 0.5s, visibility 0.5s}
.loading-screen.hidden{opacity:0;visibility:hidden}
.loader{width:60px;height:60px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- MAGNETIC EFFECT ---------- */
.magnetic{transition:transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);will-change:transform}

/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:200;height:80px;background:rgba(13,17,23,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;padding:0 32px;box-shadow:0 2px 20px rgba(0,0,0,0.05);animation:slideDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition:all 0.3s;border-bottom:1px solid var(--border)}
[data-theme="light"] header{background:rgba(255,255,255,0.7);border-bottom:none}
header.scrolled{height:70px;background:rgba(13,17,23,0.95);box-shadow:var(--shadow)}
[data-theme="light"] header.scrolled{background:rgba(255,255,255,0.9)}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.nav{flex:1;max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:900;font-size:1.5rem;background:var(--gradient-2);-webkit-background-clip:text;color:transparent;background-size:200% 200%;animation:shimmer 5s infinite ease-in-out;letter-spacing:-0.5px}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.links{display:flex;gap:8px}
.links a{color:var(--muted);position:relative;padding:12px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:0.95rem;transition:all 0.3s;overflow:hidden; text-decoration: none;}
.links a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(88,166,255,0.1),transparent);transition:left 0.5s}
.links a:hover::before{left:100%}
.links a:hover{color:var(--accent);background:rgba(88,166,255,0.1);transform:translateY(-2px)}
.links a.active{color:var(--accent);background:rgba(88,166,255,0.15)}
.theme-toggle{width:50px;height:50px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;transition:all 0.4s;position:relative;overflow:hidden}
.theme-toggle::before{content:'';position:absolute;inset:0;background:var(--gradient-2);opacity:0;transition:opacity 0.3s}
.theme-toggle:hover::before{opacity:0.1}
.theme-toggle:hover{transform:scale(1.1) rotate(180deg);box-shadow:var(--glow)}
.theme-toggle svg{width:24px;height:24px;stroke:var(--muted);fill:none;position:absolute;transition:all 0.4s;z-index:1}
.sun{opacity:0;transform:rotate(90deg)}.moon{opacity:1;transform:rotate(0deg)}
[data-theme="light"] .sun{opacity:1;transform:rotate(0deg)}
[data-theme="light"] .moon{opacity:0;transform:rotate(-90deg)}

/* ---------- HERO ---------- */



.hero{max-width:1150px;margin:80px auto;padding:30px 24px;display:grid;grid-template-columns:1fr 340px;gap:50px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;text-align:center}}
.profile-container{width:230px;height:230px;margin:auto;position:relative;animation:floatSlow 5s infinite ease-in-out;z-index:10}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.profile-circle{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:5px solid var(--accent);box-shadow:0 25px 60px rgba(88,166,255,.45),0 0 0 10px rgba(88,166,255,.15);display:flex;align-items:center;justify-content:center;font-size:4.5rem;font-weight:bold;color:white;overflow:hidden;position:relative;transition:.4s;z-index:1}
.profile-circle:hover{transform:scale(1.06);box-shadow:0 32px 80px rgba(88,166,255,.6),0 0 0 14px rgba(88,166,255,.22)}
.profile-circle::before{content:'';position:absolute;inset:-20px;border-radius:50%;opacity:0;background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));animation:rotate 4s linear infinite;transition:.4s;z-index:0}
.profile-circle:hover::before{opacity:.7}
@keyframes rotate{to{transform:rotate(360deg)}}
.profile-img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1}
.status-badge{position:absolute;right:8px;bottom:10px;background:var(--card);padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:pulse 2s infinite;z-index:100}
.status-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:blink 1.8s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.hero-left h1{font-size:clamp(2.3rem,5vw,3.3rem);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent;margin-bottom:20px}
.hero-left p{color:var(--muted);font-size:1.15rem;margin-bottom:26px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- ENHANCED BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:16px 32px;font-weight:700;border-radius:var(--radius-sm);position:relative;overflow:hidden;transition:all 0.3s;box-shadow:0 4px 15px rgba(88,166,255,0.3);font-size:0.95rem;letter-spacing:0.5px}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn:hover::before{left:100%}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(88,166,255,0.4);background:var(--accent2)}
.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
.btn-outline:hover{background:var(--accent);color:#fff;box-shadow:0 8px 25px rgba(88,166,255,0.4)}

/* ---------- SECTIONS ---------- */
section{max-width:1200px;margin:0 auto 120px;padding:0 24px;position:relative}
.section-header{margin-bottom:60px;text-align:center}
h2{font-size:clamp(2rem,5vw,3rem);font-weight:900;margin-bottom:16px;display:inline-block;position:relative;background:var(--gradient-2);-webkit-background-clip:text;color:transparent;letter-spacing:-1px}
h2::after{content:'';position:absolute;left:50%;bottom:-12px;width:80px;height:4px;background:var(--gradient-2);border-radius:2px;transform:translateX(-50%)}
.section-subtitle{color:var(--text-secondary);font-size:1.1rem;margin-top:16px}

/* ---------- ENHANCED SKILLS ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.skill-card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);transition:all 0.4s;position:relative;overflow:hidden;border:1px solid var(--border)}
.skill-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--gradient-2);transform:translateX(-100%);transition:transform 0.5s}
.skill-card:hover::before{transform:translateX(0)}
.skill-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.skill-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.skill-name{font-weight:700;font-size:1.1rem;color:var(--text)}
.skill-percentage{font-weight:600;color:var(--accent);font-family:'JetBrains Mono',monospace}
.skill-bar{height:12px;background:var(--bg-secondary);border-radius:999px;overflow:hidden;position:relative}
.skill-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));border-radius:999px;width:0;transition:width 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);box-shadow:var(--glow)}
.skills-tags{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:24px;background:var(--bg-secondary);color:var(--text);font-weight:600;font-size:0.9rem;transition:all 0.3s;border:1px solid var(--border);position:relative;overflow:hidden}
.pill::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient-2);opacity:0.1;transition:left 0.5s}
.pill:hover::before{left:100%}
.pill:hover{background:var(--accent);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(88,166,255,0.3);border-color:var(--accent)}

/* ---------- EDUCATION & CERTIFICATIONS ---------- */
.education-section{max-width:1200px;margin:0 auto 120px;padding:60px 24px;position:relative}
.education-container{display:flex;flex-direction:column;gap:40px}
.education-item{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:center;opacity:0;transform:translateY(40px);animation:fadeInUp 0.8s ease-out forwards}
.education-item:nth-child(1){animation-delay:0.2s}
.education-item:nth-child(2){animation-delay:0.4s}
.education-item:nth-child(3){animation-delay:0.6s}
@media(max-width:968px){.education-item{grid-template-columns:1fr;text-align:center}}
.education-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.education-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--card);box-shadow:var(--shadow);animation:iconPulse 3s infinite ease-in-out}
.education-icon svg{width:40px;height:40px}
.education-title h3{font-size:2rem;font-weight:800;background:var(--gradient-2);-webkit-background-clip:text;color:transparent;margin:0}
.education-content p{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:24px}
.education-content p:last-child{margin-bottom:0}
.ccna-progress{background:var(--card);padding:24px;border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid var(--border);margin-top:20px;position:relative;overflow:hidden}
.ccna-progress::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--gradient-2);opacity:0.05;transform:translateX(-100%);transition:transform 0.8s ease-out}
.ccna-progress:hover::before{transform:translateX(0)}
.ccna-progress-title{font-weight:700;font-size:1.2rem;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.progress-bar{height:10px;background:var(--bg-secondary);border-radius:999px;overflow:hidden;margin-bottom:12px;position:relative}
.progress-fill{height:100%;background:var(--gradient-2);border-radius:999px;width:0;animation:progressFill 3s ease-out forwards;animation-delay:1s;box-shadow:var(--glow)}
.ccna-progress-text{font-size:0.9rem;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center}
.ccna-progress-stats{display:flex;gap:16px;margin-top:8px}
.ccna-progress-stat{background:var(--bg-secondary);padding:8px 12px;border-radius:8px;font-size:0.8rem;font-weight:600;color:var(--accent)}
.education-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
.education-feature{background:var(--card);padding:20px;border-radius:var(--radius-sm);box-shadow:var(--shadow);transition:all 0.3s;border:1px solid var(--border);opacity:0;transform:translateY(20px);animation:fadeInUp 0.6s ease-out forwards}
.education-feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.education-feature-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.education-feature-icon svg{width:24px;height:24px;stroke:var(--accent)}
.education-feature-title{font-weight:700;font-size:1.1rem;color:var(--text);margin-bottom:8px}
.education-feature-desc{font-size:0.9rem;color:var(--text-secondary);line-height:1.5}
.education-image{position:relative;opacity:0;transform:translateY(40px);animation:fadeInUp 0.8s ease-out forwards}
.education-image-wrapper{position:relative;width:100%;max-width:500px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);transform:perspective(1000px) rotateY(5deg);transition:transform 0.5s}
.education-image-wrapper:hover{transform:perspective(1000px) rotateY(0deg)}
.education-image-wrapper::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0.1;z-index:1}
.education-image img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.education-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0;transition:opacity 0.3s;z-index:2}
.education-image-wrapper:hover .education-image-overlay{opacity:0.1}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes progressFill{from{width:0}to{width:70%}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ---------- ENHANCED PROJECTS ---------- */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px}
.project{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);transition:all 0.5s;cursor:pointer;border:1px solid var(--border);overflow:hidden;position:relative}
.project::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0;transition:opacity 0.3s;z-index:1}
.project:hover::before{opacity:0.03}
.project:hover{transform:translateY(-12px) scale(1.02);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.project-image-wrapper{position:relative;width:100%;height:200px;overflow:hidden}
.project-image{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.project:hover .project-image{transform:scale(1.1) rotate(2deg)}
.project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.7) 100%);opacity:0;transition:opacity 0.3s}
.project:hover .project-overlay{opacity:1}
.project-content{padding:28px;position:relative;z-index:2}
.project-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:12px}
.project h3{font-size:1.3rem;font-weight:800;margin-bottom:8px;color:var(--text);transition:color 0.3s}
.project:hover h3{color:var(--accent)}
.project p{color:var(--text-secondary);font-size:0.95rem;line-height:1.6;margin-bottom:16px}
.project-tags{display:flex;flex-wrap:wrap;gap:8px}
.project-tag{padding:6px 12px;background:var(--bg-secondary);color:var(--accent);border-radius:16px;font-size:0.8rem;font-weight:600;border:1px solid var(--border);transition:all 0.3s}
.project-tag:hover{background:var(--accent);color:#fff;transform:scale(1.05)}
.project-link{position:absolute;top:20px;right:20px;width:40px;height:40px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:all 0.3s;box-shadow:var(--shadow)}
.project:hover .project-link{opacity:1;transform:translateY(0)}
.project-link:hover{background:var(--accent);color:#fff;transform:scale(1.1)}

/* ---------- PROJECT MODAL ---------- */
.project-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 0.3s}
.project-modal.active{opacity:1;visibility:visible}
.project-modal-content{background:var(--card);border-radius:var(--radius);max-width:900px;width:90%;max-height:90vh;overflow-y:auto;position:relative;transform:scale(0.8) translateY(50px);transition:all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);box-shadow:var(--shadow-lg)}
.project-modal.active .project-modal-content{transform:scale(1) translateY(0)}
.project-modal-header{position:relative;padding:30px 30px 0;border-bottom:1px solid var(--border)}
.project-modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;border:1px solid var(--border);z-index:10}
.project-modal-close:hover{background:var(--accent);color:#fff;transform:rotate(90deg)}
.project-modal-title{font-size:2rem;font-weight:900;background:var(--gradient-2);-webkit-background-clip:text;color:transparent;margin-bottom:20px}
.project-modal-body{padding:30px}
.project-modal-image{width:100%;height:400px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:30px;box-shadow:var(--shadow)}
.project-modal-description{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:30px}
.project-modal-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}
.project-modal-detail{background:var(--bg-secondary);padding:20px;border-radius:var(--radius-sm);transition:all 0.3s}
.project-modal-detail:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.project-modal-detail-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.project-modal-detail-icon svg{width:24px;height:24px;stroke:var(--accent)}
.project-modal-detail-title{font-weight:700;font-size:1.1rem;color:var(--text);margin-bottom:8px}
.project-modal-detail-desc{font-size:0.9rem;color:var(--text-secondary);line-height:1.5}
.project-modal-tech{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.project-modal-tech-item{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--accent);color:#fff;border-radius:20px;font-weight:600;font-size:0.9rem;animation:slideIn 0.5s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.project-modal-links{display:flex;gap:16px;flex-wrap:wrap}
.project-modal-link{display:inline-flex;align-items:center;gap:8px;background:var(--card);color:var(--accent);padding:12px 20px;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:all 0.3s;border:2px solid var(--accent)}
.project-modal-link:hover{background:var(--accent);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow)}

/* ---------- ENHANCED INTRODUCTION ---------- */
.intro-section{max-width:1200px;margin:0 auto 120px;padding:60px 24px;position:relative}
.intro-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:968px){.intro-container{grid-template-columns:1fr;text-align:center}}
.intro-greeting{font-size:1.2rem;font-weight:600;color:var(--accent2);margin-bottom:10px;letter-spacing:1px;opacity:0;animation:fadeInUp 0.8s ease-out forwards}
.intro-greeting .wave-emoji{font-size:2.5rem;display:inline-block;animation:wave 2s infinite;transform-origin:70% 70%;}
@keyframes wave{0%,100%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}}
.intro-name{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:900;margin-bottom:16px;background:var(--gradient-2);-webkit-background-clip:text;color:transparent;letter-spacing:-1px;opacity:0;animation:fadeInUp 0.8s ease-out 0.2s forwards}
.intro-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--text);margin-bottom:40px;opacity:0;animation:fadeInUp 0.8s ease-out 0.4s forwards}
.intro-content{opacity:0;animation:fadeInUp 0.8s ease-out 0.6s forwards}
.intro-content p{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:24px}
.intro-content p:last-child{margin-bottom:0}
.intro-image{position:relative;opacity:0;animation:fadeInUp 0.8s ease-out 0.8s forwards}
.intro-image-wrapper{position:relative;width:100%;max-width:450px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);transform:perspective(1000px) rotateY(-5deg);transition:transform 0.5s}
.intro-image-wrapper:hover{transform:perspective(1000px) rotateY(0deg)}
.intro-image-wrapper::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0.1;z-index:1}
.intro-image img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.intro-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0;transition:opacity 0.3s;z-index:2}
.intro-image-wrapper:hover .intro-image-overlay{opacity:0.1}
.intro-image-decoration{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--gradient-2);filter:blur(40px);opacity:0.3;z-index:-1}
.intro-image-decoration.one{top:-20px;right:-20px}
.intro-image-decoration.two{bottom:-20px;left:-20px;background:var(--gradient-3)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.intro-tech-stack{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.intro-tech-item{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);color:var(--text);border-radius:20px;font-weight:600;font-size:0.9rem;transition:all 0.3s;border:1px solid var(--border)}
.intro-tech-item:hover{background:var(--accent);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(88,166,255,0.3);border-color:var(--accent)}

/* ---------- ENHANCED BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px}
.post{background:var(--card);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow);transition:all 0.4s;cursor:pointer;border:1px solid var(--border);position:relative;overflow:hidden}
.post::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:var(--gradient-2);transform:translateY(-100%);transition:transform 0.5s}
.post:hover::before{transform:translateY(0)}
.post:hover{transform:translateX(12px) translateY(-4px);box-shadow:var(--shadow-lg)}
.post-date{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:0.85rem;font-weight:600;margin-bottom:12px}
.post h3{font-size:1.3rem;font-weight:800;margin-bottom:12px;color:var(--text);transition:color 0.3s}
.post:hover h3{color:var(--accent)}
.post p{color:var(--text-secondary);line-height:1.6}
.read-more{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;margin-top:16px;transition:gap 0.3s}
.post:hover .read-more{gap:12px}

/* ---------- BLOG MODAL ---------- */
.blog-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 0.3s}
.blog-modal.active{opacity:1;visibility:visible}
.blog-modal-content{background:var(--card);border-radius:var(--radius);max-width:900px;width:90%;max-height:90vh;overflow-y:auto;position:relative;transform:scale(0.8) translateY(50px);transition:all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);box-shadow:var(--shadow-lg)}
.blog-modal.active .blog-modal-content{transform:scale(1) translateY(0)}
.blog-modal-header{position:relative;padding:30px 30px 0;border-bottom:1px solid var(--border)}
.blog-modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;border:1px solid var(--border);z-index:10}
.blog-modal-close:hover{background:var(--accent);color:#fff;transform:rotate(90deg)}
.blog-modal-title{font-size:2rem;font-weight:900;background:var(--gradient-2);-webkit-background-clip:text;color:transparent;margin-bottom:20px}
.blog-meta{display:flex;gap:16px;margin-bottom:20px}
.blog-modal-date{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:0.85rem;font-weight:600}
.blog-modal-author{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:0.85rem;font-weight:600}
.blog-modal-body{padding:30px}
.blog-modal-image{width:100%;height:400px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:30px;box-shadow:var(--shadow)}
.blog-modal-content-text{font-size:1.1rem;line-height:1.8;color:var(--text-secondary);margin-bottom:30px}
.blog-modal-content-text p{margin-bottom:16px}
.blog-modal-content-text h3{font-size:1.4rem;font-weight:700;color:var(--text);margin:24px 0 16px}
.blog-modal-content-text ul, .blog-modal-content-text ol{margin-left:24px;margin-bottom:16px}
.blog-modal-content-text li{margin-bottom:8px}
.blog-modal-content-text blockquote{border-left:4px solid var(--accent);padding-left:16px;margin:24px 0;font-style:italic;color:var(--text-secondary)}
.blog-modal-tags{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.blog-modal-tag{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-secondary);color:var(--accent);border-radius:20px;font-weight:600;font-size:0.9rem}
.blog-modal-footer{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--border)}
.blog-modal-share{display:flex;gap:12px}
.blog-modal-share-button{width:40px;height:40px;border-radius:50%;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.blog-modal-share-button:hover{background:var(--accent);color:#fff}

/* ---------- ENHANCED CONTACT ---------- */
.contact-wrapper{display:grid;grid-template-columns:1fr 380px;gap:40px}
@media(max-width:968px){.contact-wrapper{grid-template-columns:1fr}}
.contact-form{background:var(--card);padding:40px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.form-group{margin-bottom:24px}
.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text)}
.form-group input,.form-group textarea{width:100%;background:var(--bg-secondary);border:2px solid var(--border);padding:16px;border-radius:var(--radius-sm);color:var(--text);font-family:inherit;transition:all 0.3s;font-size:0.95rem}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(88,166,255,0.1);transform:translateY(-2px)}
.form-group .error-message{color:var(--error);font-size:0.85rem;margin-top:8px;display:none}
.form-group.error input, .form-group.error textarea{border-color:var(--error)}
.form-group.error .error-message{display:block}
.form-submit{display:flex;justify-content:space-between;align-items:center}
.contact-info{display:flex;flex-direction:column;gap:20px}
.info-card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);transition:all 0.3s}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.info-card h4{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:var(--text)}
.info-item{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:var(--text-secondary);transition:color 0.3s}
.info-item:hover{color:var(--accent)}
.info-item a{color:inherit;text-decoration:none}
.info-item a:hover{text-decoration:underline}

/* ---------- FORM NOTIFICATION ---------- */
.form-notification{position:fixed;top:100px;right:20px;background:var(--card);padding:16px 24px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:1000;display:flex;align-items:center;gap:12px;transform:translateX(120%);transition:transform 0.3s ease-out}
.form-notification.show{transform:translateX(0)}
.form-notification.success{border-left:4px solid var(--success)}
.form-notification.error{border-left:4px solid var(--error)}
.form-notification-icon{width:24px;height:24px}
.form-notification.success .form-notification-icon{color:var(--success)}
.form-notification.error .form-notification-icon{color:var(--error)}
.form-notification-text{font-weight:600;color:var(--text)}

/* ---------- ENHANCED FOOTER ---------- */
footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border)}
.footer-content{max-width:1200px;margin:auto}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:24px}
.footer-links a{color:var(--muted);transition:color 0.3s}
.footer-links a:hover{color:var(--accent)}
.copyright{color:var(--text-secondary);font-size:0.9rem}
.back-to-top{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--accent);font-weight:600;transition:all 0.3s}
.back-to-top:hover{gap:16px}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--gradient-2);transform-origin:left;transform:scaleX(0);z-index:300;transition:transform 0.2s}

/* ---------- CURSOR EFFECT ---------- */
.cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:opacity 0.3s}

/* ---------- UTILITIES ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.reveal.show{opacity:1;transform:translateY(0)}
.glass-effect{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.text-gradient{background:var(--gradient-2);-webkit-background-clip:text;color:transparent}

/* ---------- MOBILE RESPONSIVENESS ---------- */
@media (max-width: 768px) {
  /* Header adjustments */
  header {
    padding: 0 16px;
    height: 70px;
  }
  
  .logo {
    font-size: 1.2rem;
  }
  
  .links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--card);
    flex-direction: column;
    padding: 20px;
    box-shadow: var(--shadow);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  
  .links.active {
    display: flex;
  }
  
  .links a {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
  }
  
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
  
  /* Hero section adjustments */
  .hero {
    padding: 20px 16px;
    margin-top: 70px;
  }
  
  .hero-left h1 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }
  
  .hero-left p {
    font-size: 1rem;
  }
  
  .profile-container {
    width: 180px;
    height: 180px;
    margin-top: 30px;
  }
  
  .btn {
    padding: 14px 24px;
    font-size: 0.9rem;
  }
  
  /* Section adjustments */
  section {
    padding: 0 16px;
    margin-bottom: 80px;
  }
  
  .section-header {
    margin-bottom: 40px;
  }
  
  h2 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
  
  /* Skills section adjustments */
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .skill-card {
    padding: 20px;
  }
  
  .skills-tags {
    gap: 8px;
  }
  
  .pill {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  
  /* Education section adjustments */
  .education-section {
    padding: 40px 16px;
  }
  
  .education-item {
    gap: 30px;
  }
  
  .education-features {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .education-feature {
    padding: 15px;
  }
  
  /* Projects section adjustments */
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .project-content {
    padding: 20px;
  }
  
  .project h3 {
    font-size: 1.2rem;
  }
  
  /* Introduction section adjustments */
  .intro-section {
    padding: 40px 16px;
  }
  
  .intro-container {
    gap: 40px;
  }
  
  .intro-name {
    font-size: clamp(2rem, 5vw, 2.8rem);
  }
  
  .intro-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
  }
  
  .intro-content p {
    font-size: 1rem;
  }
  
  .intro-tech-stack {
    gap: 8px;
  }
  
  .intro-tech-item {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  /* Blog section adjustments */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .post {
    padding: 24px;
  }
  
  .post h3 {
    font-size: 1.2rem;
  }
  
  /* Contact section adjustments */
  .contact-form {
    padding: 30px 20px;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 14px;
  }
  
  /* Footer adjustments */
  footer {
    padding: 30px 16px;
  }
  
  .footer-links {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  /* Modal adjustments */
  .project-modal-content,
  .blog-modal-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .project-modal-header,
  .blog-modal-header {
    padding: 20px 20px 0;
  }
  
  .project-modal-body,
  .blog-modal-body {
    padding: 20px;
  }
  
  .project-modal-image,
  .blog-modal-image {
    height: 250px;
  }
  
  .project-modal-details {
    grid-template-columns: 1fr;
  }
  
  /* Form notification adjustments */
  .form-notification {
    right: 10px;
    left: 10px;
    top: 80px;
  }
  
  /* Adjustments for smaller screens */
  @media (max-width: 480px) {
    .profile-container {
      width: 150px;
      height: 150px;
    }
    
    .btn {
      padding: 12px 20px;
      font-size: 0.85rem;
    }
    
    .skill-card {
      padding: 16px;
    }
    
    .project-content {
      padding: 16px;
    }
    
    .education-feature {
      padding: 12px;
    }
    
    .contact-form {
      padding: 20px 16px;
    }
  }
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
}
 /* ---------- FORM NOTIFICATION STYLES ---------- */
    .form-notification {
      position: fixed;
      top: 100px;
      right: 20px;
      background: var(--card);
      padding: 16px 24px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-lg);
      z-index: 1000;
      transform: translateX(120%);
      transition: transform 0.3s ease-out;
      max-width: 350px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .form-notification.show {
      transform: translateX(0);
    }
    
    .form-notification.success {
      border-left: 4px solid var(--success);
    }
    
    .form-notification.error {
      border-left: 4px solid var(--error);
    }
    
    .form-notification.loading {
      border-left: 4px solid var(--accent);
    }
    
    .form-notification.loading::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    /* Form button loading state */
    .btn.loading {
      pointer-events: none;
      opacity: 0.7;
    }
    
    .btn.loading::after {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top-color: currentColor;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-left: 8px;
    }