/* =============================================
   ADEL AUDITOR — AI AUTOMATION SPECIALIST
   Premium Portfolio Stylesheet
   ============================================= */

/* ---------- CSS Custom Properties ---------- */
:root {
  --bg-primary:           #0a0e1a;
  --bg-secondary:         #0d1117;
  --bg-tertiary:          #111827;
  --card-bg:              rgba(13, 17, 35, 0.72);
  --glass-bg:             rgba(255, 255, 255, 0.03);
  --glass-border:         rgba(124, 58, 237, 0.18);
  --glass-border-hover:   rgba(124, 58, 237, 0.42);
  --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.4);
  --purple-primary:       #7c3aed;
  --purple-light:         #a855f7;
  --purple-pale:          #c084fc;
  --purple-gradient:      linear-gradient(135deg, #7c3aed, #a855f7);
  --purple-glow:          rgba(124, 58, 237, 0.22);
  --purple-glow-strong:   rgba(168, 85, 247, 0.45);
  --text-primary:         #f0f6ff;
  --text-secondary:       #94a3b8;
  --text-muted:           #64748b;
  --navbar-bg:            rgba(10, 14, 26, 0.55);
  --navbar-scrolled:      rgba(10, 14, 26, 0.93);
  --border-color:         rgba(124, 58, 237, 0.14);
  --radius-sm:            8px;
  --radius-md:            16px;
  --radius-lg:            24px;
  --radius-full:          9999px;
  --transition:           0.3s ease;
  --transition-fast:      0.15s ease;
  --nav-height:           70px;
}

[data-theme="light"] {
  --bg-primary:           #f5f7ff;
  --bg-secondary:         #edf0fb;
  --bg-tertiary:          #e4e8f8;
  --card-bg:              rgba(255, 255, 255, 0.78);
  --glass-bg:             rgba(255, 255, 255, 0.5);
  --glass-border:         rgba(124, 58, 237, 0.18);
  --glass-border-hover:   rgba(124, 58, 237, 0.4);
  --glass-shadow:         0 8px 32px rgba(124, 58, 237, 0.1);
  --purple-glow:          rgba(124, 58, 237, 0.12);
  --purple-glow-strong:   rgba(124, 58, 237, 0.35);
  --text-primary:         #1e293b;
  --text-secondary:       #475569;
  --text-muted:           #94a3b8;
  --navbar-bg:            rgba(245, 247, 255, 0.65);
  --navbar-scrolled:      rgba(245, 247, 255, 0.96);
  --border-color:         rgba(124, 58, 237, 0.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, button { font-family: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--purple-primary); border-radius: 99px; }
::selection { background: rgba(124,58,237,0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; border-radius: 4px; }

/* ---------- Utilities ---------- */
.text-accent { color: var(--purple-light); }

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-bottom: 18px;
}
.label-line { flex: 1; max-width: 70px; height: 1px; background: var(--purple-gradient); opacity: 0.45; }
.label-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purple-light);
}

.section-heading {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
.section-heading.centered { text-align: center; }

.section-subheading {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto 56px;
  text-align: center;
}

/* Glass Card */
.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.glass-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow), 0 0 40px var(--purple-glow);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--purple-gradient);
  color: #fff;
  box-shadow: 0 4px 18px var(--purple-glow);
}
.btn--primary:hover { box-shadow: 0 6px 28px var(--purple-glow-strong); transform: translateY(-2px); }
.btn--outline {
  border: 1.5px solid var(--glass-border-hover);
  color: var(--text-primary);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
}
.btn--outline:hover { border-color: var(--purple-light); color: var(--purple-light); background: var(--purple-glow); transform: translateY(-2px); }
.btn--full { width: 100%; justify-content: center; }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--navbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: var(--navbar-scrolled);
  border-color: var(--border-color);
  box-shadow: 0 4px 28px rgba(0,0,0,0.18);
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
}
.logo-bracket { color: var(--purple-light); }
.logo-text { color: var(--text-primary); font-size: 1rem; }
.logo-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-primary);
  margin-left: 4px;
  animation: logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.55; transform:scale(1.4); }
}

/* Nav links */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: 7px 15px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover { color: var(--text-primary); background: var(--purple-glow); }
.nav-link.active { color: var(--purple-light); background: var(--purple-glow); }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--glass-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.theme-toggle:hover { border-color: var(--purple-light); color: var(--purple-light); background: var(--purple-glow); }
.toggle-icon { position: absolute; transition: opacity var(--transition-fast), transform var(--transition); }
.toggle-icon--light { opacity: 0; transform: rotate(90deg) scale(0.5); }
.toggle-icon--dark  { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .toggle-icon--light { opacity:1; transform:rotate(0) scale(1); }
[data-theme="light"] .toggle-icon--dark  { opacity:0; transform:rotate(-90deg) scale(0.5); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--glass-bg);
  align-items: center; justify-content: center;
  transition: all var(--transition);
}
.hamburger:hover { border-color: var(--purple-light); background: var(--purple-glow); }
.hamburger-line {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition);
}
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s ease;
  border-top: 1px solid transparent;
  background: var(--navbar-scrolled);
  backdrop-filter: blur(20px);
}
.mobile-menu.active { max-height: 380px; border-color: var(--border-color); }
.mobile-nav-links { display: flex; flex-direction: column; padding: 14px 24px 22px; gap: 2px; }
.mobile-nav-link {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-nav-link:hover { color: var(--purple-light); background: var(--purple-glow); }

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 120px 24px 80px;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg::before {
  content:'';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,.18) 0%, transparent 70%),
    radial-gradient(ellipse 55% 40% at 85% 80%, rgba(168,85,247,.1) 0%, transparent 60%),
    var(--bg-primary);
}

/* Orbs */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: orbFloat linear infinite;
}
.orb--1 { width:650px;height:650px;top:-220px;left:-130px;background:radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 70%);animation-duration:26s; }
.orb--2 { width:500px;height:500px;top:30%;right:-100px;background:radial-gradient(circle,rgba(168,85,247,.14) 0%,transparent 70%);animation-duration:32s;animation-direction:reverse; }
.orb--3 { width:400px;height:400px;bottom:-80px;left:28%;background:radial-gradient(circle,rgba(124,58,237,.11) 0%,transparent 70%);animation-duration:21s;animation-delay:-10s; }
.orb--4 { width:280px;height:280px;top:55%;left:55%;background:radial-gradient(circle,rgba(192,132,252,.08) 0%,transparent 70%);animation-duration:36s;animation-delay:-5s; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  25% { transform:translate(32px,-28px) scale(1.05); }
  50% { transform:translate(-18px,18px) scale(0.96); }
  75% { transform:translate(18px,28px) scale(1.02); }
}

/* Grid */
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.04) 1px,transparent 1px);
  background-size: 60px 60px;
}

/* Circuit SVG */
.circuit-svg { position:absolute;inset:0;width:100%;height:100%;opacity:.22; }
.circuit-path { fill:none;stroke-width:1;stroke-dasharray:8 14;animation:circuitDash 9s linear infinite; }
.circuit-path--1 { stroke:var(--purple-light);animation-duration:11s; }
.circuit-path--2 { stroke:var(--purple-primary);animation-duration:15s;animation-direction:reverse; }
.circuit-path--3 { stroke:var(--purple-pale);animation-duration:13s;animation-delay:-4s; }
.circuit-node { fill:var(--purple-light);animation:nodeGlow 3s ease-in-out infinite; }
.circuit-node:nth-child(odd) { animation-delay:-1.5s; }
@keyframes circuitDash { to { stroke-dashoffset:-80; } }
@keyframes nodeGlow { 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* Hero content */
.hero-content { position:relative;z-index:1;max-width:780px;text-align:center; }

.hero-badge {
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 18px;border-radius:var(--radius-full);
  border:1px solid var(--glass-border-hover);
  background:var(--purple-glow);
  font-size:.82rem;font-weight:500;
  color:var(--purple-pale);margin-bottom:26px;
  backdrop-filter:blur(10px);
}
.badge-pulse {
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:badgePulse 2s ease-out infinite;
}
@keyframes badgePulse {
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}
}

.hero-heading { font-size:clamp(2.3rem,6vw,4.4rem);font-weight:900;line-height:1.1;margin-bottom:18px; }
.hero-name {
  display:block;
  background:var(--purple-gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:6px;
}
.hero-title-wrapper { display:block;font-size:.64em;color:var(--text-primary);font-weight:700; }
.hero-title-prefix { color:var(--text-secondary);font-weight:400; }
.hero-typed-wrapper { display:inline-flex;align-items:center;gap:1px; }
.typed-text { color:var(--purple-light); }
.typed-cursor { display:inline-block;color:var(--purple-light);animation:cursorBlink .8s ease-in-out infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1}50%{opacity:0} }

.hero-description { font-size:1.1rem;color:var(--text-secondary);max-width:580px;margin:0 auto 32px;line-height:1.75; }
.hero-actions { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:44px; }

.hero-tech-stack { display:flex;gap:9px;flex-wrap:wrap;justify-content:center; }
.tech-tag {
  padding:5px 15px;border-radius:var(--radius-full);font-size:.78rem;font-weight:600;
  border:1px solid var(--glass-border);color:var(--text-muted);background:var(--glass-bg);
  letter-spacing:.4px;transition:all var(--transition-fast);
}
.tech-tag:hover { border-color:var(--purple-light);color:var(--purple-light); }

/* Scroll indicator */
.hero-scroll-indicator {
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;z-index:1;
}
.scroll-text { font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted); }
.scroll-line { width:1px;height:48px;background:linear-gradient(to bottom,var(--purple-primary),transparent);position:relative;overflow:hidden; }
.scroll-dot { width:3px;height:13px;background:var(--purple-light);border-radius:2px;position:absolute;top:0;left:-1px;animation:scrollDrop 2s ease-in-out infinite; }
@keyframes scrollDrop { 0%{top:-13px;opacity:0}30%{opacity:1}100%{top:48px;opacity:0} }

/* =============================================
   ABOUT
   ============================================= */
.about { padding: 100px 0; background: var(--bg-secondary); }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; }
.about-text { color:var(--text-secondary);margin-bottom:18px;font-size:1.02rem;line-height:1.8; }
.about-links { display:flex;gap:14px;flex-wrap:wrap;margin-top:28px; }
.about-link {
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;
  border-radius:var(--radius-full);border:1.5px solid var(--glass-border-hover);
  color:var(--text-secondary);font-size:.88rem;font-weight:500;background:var(--glass-bg);
  transition:all var(--transition);
}
.about-link:hover { color:var(--purple-light);border-color:var(--purple-light);background:var(--purple-glow);transform:translateY(-2px); }

/* Stats */
.stats-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.stat-card { padding:26px 22px;text-align:center; }
.stat-icon { font-size:1.5rem;color:var(--purple-light);margin-bottom:10px; }
.stat-number { display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:5px; }
.stat-counter {
  font-size:2.4rem;font-weight:900;
  background:var(--purple-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-family:'Space Mono',monospace;
}
.stat-plus { font-size:1.4rem;font-weight:700;color:var(--purple-light); }
.stat-label { font-size:.8rem;color:var(--text-muted);font-weight:500; }

/* =============================================
   SERVICES
   ============================================= */
.services { padding: 100px 0; background: var(--bg-primary); }
.services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.service-card {
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.service-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--purple-gradient);opacity:0;transition:opacity var(--transition);
}
.service-card:hover { transform:translateY(-6px);border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow),0 18px 55px var(--purple-glow); }
.service-card:hover::before { opacity:1; }
.service-card--featured {
  border-color:rgba(168,85,247,.32);
  background:linear-gradient(135deg,rgba(124,58,237,.09) 0%,rgba(168,85,247,.04) 100%),var(--card-bg);
}
.service-card--featured::before { opacity:1; }

.service-icon-wrap {
  width:52px;height:52px;border-radius:var(--radius-md);background:var(--purple-glow);
  border:1px solid var(--glass-border-hover);display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;color:var(--purple-light);margin-bottom:18px;transition:all var(--transition);
}
.service-card:hover .service-icon-wrap { background:var(--purple-gradient);color:#fff;box-shadow:0 8px 22px var(--purple-glow-strong); }
.service-title { font-size:1.1rem;font-weight:700;margin-bottom:10px; }
.service-description { font-size:.88rem;color:var(--text-secondary);line-height:1.7;margin-bottom:18px; }
.service-features { display:flex;flex-direction:column;gap:7px; }
.service-features li { display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--text-secondary); }
.service-features li i { color:var(--purple-light);font-size:.72rem;flex-shrink:0; }
.service-tag {
  position:absolute;top:14px;right:14px;padding:3px 11px;border-radius:var(--radius-full);
  font-size:.7rem;font-weight:700;letter-spacing:.5px;
  background:var(--purple-glow);border:1px solid var(--glass-border-hover);color:var(--purple-pale);
}
.service-tag--featured { background:var(--purple-gradient);color:#fff;border:none; }

/* =============================================
   SKILLS
   ============================================= */
.skills { padding: 100px 0; background: var(--bg-secondary); }
.skills-wrapper { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; }
.skills-grid { display:flex;flex-direction:column;gap:26px; min-height:60px; }
.skill-item { width:100%; }
.skill-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:9px; }
.skill-name { display:flex;align-items:center;gap:8px;font-size:.93rem;font-weight:600; }
.skill-name i { color:var(--purple-light); }
.skill-percent { font-size:.82rem;font-weight:700;color:var(--purple-light);font-family:'Space Mono',monospace; }
.skill-bar { height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden; }
.skill-fill {
  height:100%;width:0;background:var(--purple-gradient);border-radius:var(--radius-full);
  transition:width 1.4s cubic-bezier(.4,0,.2,1);position:relative;
}
.skill-fill::after {
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;background:var(--purple-pale);border-radius:50%;
  box-shadow:0 0 8px var(--purple-glow-strong);
}

/* Radar */
.skills-visual { display:flex;align-items:center;justify-content:center; }
.radar-placeholder { width:290px;height:290px;position:relative; }
.radar-ring {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:1px solid var(--glass-border-hover);border-radius:50%;
  animation:radarPulse 3s ease-in-out infinite;
}
.radar-ring--outer { width:100%;height:100%;animation-delay:0s; }
.radar-ring--mid { width:66%;height:66%;animation-delay:.5s; }
.radar-ring--inner { width:33%;height:33%;animation-delay:1s; }
@keyframes radarPulse {
  0%,100%{border-color:rgba(124,58,237,.18);}
  50%{border-color:rgba(168,85,247,.5);box-shadow:0 0 18px rgba(124,58,237,.12);}
}
.radar-center {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;background:var(--purple-gradient);border-radius:50%;
  box-shadow:0 0 18px var(--purple-glow-strong);
}
.radar-spoke { position:absolute;top:50%;left:50%;width:1px;height:50%;transform-origin:top;background:linear-gradient(to bottom,var(--purple-primary) 0%,transparent 100%);opacity:.3; }
.radar-spoke--1{transform:rotate(0deg)}.radar-spoke--2{transform:rotate(120deg)}.radar-spoke--3{transform:rotate(240deg)}
.radar-label { position:absolute;font-size:.68rem;font-weight:600;color:var(--text-muted);letter-spacing:.4px; }
.radar-label--1{top:2px;left:50%;transform:translateX(-50%)}
.radar-label--2{top:28%;right:3px}
.radar-label--3{bottom:28%;right:3px}
.radar-label--4{bottom:2px;left:50%;transform:translateX(-50%)}
.radar-label--5{bottom:28%;left:3px}
.radar-label--6{top:28%;left:3px}

/* =============================================
   PROJECTS
   ============================================= */
.projects { padding: 100px 0; background: var(--bg-primary); }
.projects-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:38px;min-height:120px; }
.data-load-error { grid-column:1/-1;text-align:center;color:var(--text-secondary);padding:24px;font-size:.9rem; }
[data-loading="true"]::after { content:"Loading…"; color:var(--text-secondary); font-size:.9rem; grid-column:1/-1; }
.project-card { display:flex;flex-direction:column;overflow:hidden;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.project-card:hover { transform:translateY(-6px);box-shadow:var(--glass-shadow),0 18px 55px var(--purple-glow); }
.project-card--featured { border-color:rgba(168,85,247,.32);background:linear-gradient(135deg,rgba(124,58,237,.09) 0%,rgba(168,85,247,.04) 100%),var(--card-bg); }
.project-card-header { display:flex;align-items:flex-start;justify-content:space-between;padding:22px 22px 0; }
.project-icon { width:46px;height:46px;border-radius:var(--radius-md);background:var(--purple-glow);border:1px solid var(--glass-border-hover);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--purple-light); }
.project-status { display:flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--radius-full);font-size:.73rem;font-weight:600; }
.project-status--live { background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e; }
.status-dot { width:6px;height:6px;border-radius:50%;background:#22c55e;animation:badgePulse 2s ease-out infinite; }
.project-card-body { padding:18px 22px;flex:1; }
.project-title { font-size:1.08rem;font-weight:700;margin-bottom:9px; }
.project-description { font-size:.88rem;color:var(--text-secondary);line-height:1.7;margin-bottom:14px; }
.project-tags { display:flex;flex-wrap:wrap;gap:7px; }
.project-tag { padding:3px 11px;border-radius:var(--radius-full);font-size:.73rem;font-weight:600;background:var(--purple-glow);border:1px solid var(--glass-border);color:var(--purple-pale); }
.project-card-footer { padding:14px 22px 22px;border-top:1px solid var(--border-color);display:flex;gap:14px; }
.project-link { display:inline-flex;align-items:center;gap:7px;font-size:.83rem;font-weight:600;color:var(--text-secondary);transition:color var(--transition-fast); }
.project-link:hover { color:var(--purple-light); }
.projects-cta { display:flex;justify-content:center; }

/* =============================================
   WORKFLOW
   ============================================= */
.workflow { padding: 100px 0; background: var(--bg-secondary); }
.workflow-diagram { display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:6px;margin-top:16px; }
.flow-step { display:flex;align-items:center;flex:1;min-width:170px; }
.flow-node {
  flex:1;padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:transform var(--transition),border-color var(--transition);
}
.flow-node:hover { transform:translateY(-4px);border-color:var(--glass-border-hover); }
.flow-node--ai {
  border-color:rgba(168,85,247,.42);
  background:linear-gradient(135deg,rgba(124,58,237,.12) 0%,rgba(168,85,247,.06) 100%),var(--card-bg);
  box-shadow:0 0 28px rgba(124,58,237,.18);
}
.flow-node-icon {
  width:50px;height:50px;border-radius:50%;background:var(--purple-glow);
  border:2px solid var(--glass-border-hover);display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;color:var(--purple-light);
}
.flow-node--ai .flow-node-icon {
  background:var(--purple-gradient);color:#fff;border:none;
  box-shadow:0 4px 18px var(--purple-glow-strong);animation:aiPulse 2.5s ease-in-out infinite;
}
@keyframes aiPulse {
  0%,100%{box-shadow:0 4px 18px var(--purple-glow-strong)}
  50%{box-shadow:0 4px 38px var(--purple-glow-strong),0 0 55px rgba(168,85,247,.28)}
}
.flow-node-num { font-family:'Space Mono',monospace;font-size:.68rem;color:var(--text-muted);letter-spacing:1px; }
.flow-node-title { font-size:.92rem;font-weight:700; }
.flow-node-desc { font-size:.76rem;color:var(--text-secondary);line-height:1.5; }
.flow-node-tags { display:flex;gap:4px;flex-wrap:wrap;justify-content:center; }
.flow-node-tags span { padding:2px 7px;border-radius:var(--radius-full);font-size:.66rem;font-weight:600;background:var(--purple-glow);border:1px solid var(--glass-border);color:var(--text-muted); }

/* Arrow */
.flow-arrow { display:flex;align-items:center;position:relative;padding:0 6px;color:var(--purple-light);flex-shrink:0; }
.flow-arrow-line { width:28px;height:1px;background:linear-gradient(to right,var(--purple-primary),var(--purple-light));position:relative;overflow:hidden; }
.flow-arrow-pulse { position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(to right,transparent,rgba(168,85,247,.8),transparent);animation:arrowPulse 2s linear infinite; }
@keyframes arrowPulse { to{left:100%} }
.flow-arrow-head { font-size:.68rem;margin-left:1px; }
.workflow-footer-note { display:flex;align-items:center;justify-content:center;gap:9px;margin-top:36px;font-size:.83rem;color:var(--text-muted); }
.workflow-footer-note i { color:var(--purple-light); }

/* =============================================
   CONTACT
   ============================================= */
.contact { padding: 100px 0; background: var(--bg-primary); }
.contact-wrapper { display:grid;grid-template-columns:1fr 1.55fr;gap:44px;align-items:start; }
.contact-info { display:flex;flex-direction:column;gap:14px; }
.contact-info-item { display:flex;align-items:center;gap:14px;padding:18px; }
.contact-info-icon { width:42px;height:42px;border-radius:var(--radius-md);background:var(--purple-glow);border:1px solid var(--glass-border-hover);display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--purple-light);flex-shrink:0; }
.contact-info-label { display:block;font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:3px; }
.contact-info-value { font-size:.92rem;font-weight:600;transition:color var(--transition-fast);word-break:break-all; }
.contact-info-value:hover { color:var(--purple-light); }
.contact-availability { display:flex;align-items:center;gap:13px;padding:16px 18px; }
.availability-dot { display:block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.4);animation:badgePulse 2s ease-out infinite; }
.availability-text { font-size:.88rem;color:var(--text-secondary); }
.availability-text strong { color:var(--text-primary); }

/* Form */
.contact-form { padding:36px; }
.form-group { margin-bottom:22px; }
.form-label { display:block;font-size:.83rem;font-weight:600;color:var(--text-secondary);margin-bottom:7px; }
.form-input-wrap { position:relative; }
.form-input-icon { position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.88rem;pointer-events:none;transition:color var(--transition-fast); }
.form-input-icon--textarea { top:17px;transform:none; }
.form-input {
  width:100%;padding:13px 15px 13px 42px;background:var(--bg-tertiary);border:1.5px solid var(--border-color);
  border-radius:var(--radius-md);color:var(--text-primary);font-size:.92rem;outline:none;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:none;
}
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus { border-color:var(--purple-primary);box-shadow:0 0 0 3px var(--purple-glow); }
.form-input:focus ~ .form-input-icon,
.form-input-wrap:focus-within .form-input-icon { color:var(--purple-light); }
.form-textarea { resize:vertical;min-height:125px;padding-top:13px; }
.form-error { display:block;font-size:.78rem;color:#ef4444;margin-top:5px;min-height:16px; }
.form-input.invalid { border-color:#ef4444; }
.btn-loading { display:none; }
.btn.loading .btn-text { display:none; }
.btn.loading .btn-loading { display:inline-flex;align-items:center;gap:7px; }
.form-success { display:none;align-items:center;gap:11px;margin-top:18px;padding:14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:var(--radius-md);color:#22c55e;font-size:.88rem;font-weight:500; }
.form-success[aria-hidden="false"] { display:flex; }

/* =============================================
   FOOTER
   ============================================= */
.footer { background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:56px 0 28px; }
.footer-container { max-width:1200px;margin:0 auto;padding:0 24px; }
.footer-top { display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:44px; }
.footer-logo { display:inline-flex;align-items:center;gap:2px;font-family:'Space Mono',monospace;font-size:1.25rem;font-weight:700;margin-bottom:14px; }
.footer-tagline { font-size:.88rem;color:var(--text-muted);line-height:1.7;max-width:260px; }
.footer-nav-title { font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:18px; }
.footer-nav-links { display:flex;flex-direction:column;gap:11px; }
.footer-link { font-size:.88rem;color:var(--text-secondary);transition:color var(--transition-fast); }
.footer-link:hover { color:var(--purple-light); }
.social-links { display:flex;gap:10px; }
.social-link {
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border-color);
  display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.92rem;
  transition:all var(--transition);
}
.social-link:hover { border-color:var(--purple-light);color:var(--purple-light);background:var(--purple-glow);transform:translateY(-2px); }
.footer-bottom { border-top:1px solid var(--border-color);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; }
.footer-copy,.footer-stack { font-size:.83rem;color:var(--text-muted); }
.footer-stack i { color:#ef4444;margin:0 2px; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid { gap:36px; }
  .skills-wrapper { gap:36px; }
}

@media (max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .hero { padding:95px 20px 65px; }
  .hero-actions { flex-direction:column;align-items:center; }
  .hero-actions .btn { width:100%;max-width:270px;justify-content:center; }
  .about-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:1fr; }
  .skills-wrapper { grid-template-columns:1fr; }
  .skills-visual { display:none; }
  .projects-grid { grid-template-columns:1fr; }
  .workflow-diagram { flex-direction:column;align-items:stretch; }
  .flow-step { flex-direction:column; }
  .flow-arrow { flex-direction:column;padding:7px 0; }
  .flow-arrow-line { width:1px;height:22px;background:linear-gradient(to bottom,var(--purple-primary),var(--purple-light)); }
  .flow-arrow-head { transform:rotate(90deg); }
  .contact-wrapper { grid-template-columns:1fr; }
  .contact-form { padding:24px 18px; }
  .footer-top { grid-template-columns:1fr;gap:28px; }
  .footer-bottom { flex-direction:column;text-align:center; }
}

@media (max-width:480px) {
  .stats-grid { gap:10px; }
  .stat-card { padding:18px 14px; }
  .stat-counter { font-size:2rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}

.logo {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
     border:2px solid var(--glass-border-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);

    width:50px;height:50px;border-radius:50%;background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.5);
    animation:badgePulse 2s ease-out infinite;
}