* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary:#0066ff;
  --primary-dark:#0052cc;
  --accent:#00c9ff;
  --secondary:#1e40af;
  --navy:#0f172a;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --bg:#f8fafc;
  --text:#0f172a;
  --gray:#64748b;
  --gray-light:#94a3b8;
  --border:#e2e8f0;
  --white:#ffffff;
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  line-height:1.6;
}

/* ============ WELCOME POPUP ============ */
.welcome-popup {
  display:none; position:fixed; top:0; left:0;
  width:100%; height:100%;
  background:rgba(15,23,42,0.75); backdrop-filter:blur(10px);
  z-index:10000; justify-content:center; align-items:center;
  padding:20px; animation:welcomeFade 0.4s ease;
}
.welcome-popup.active { display:flex; }
@keyframes welcomeFade { from{opacity:0;} to{opacity:1;} }
.welcome-content {
  background:white; padding:50px 40px; border-radius:24px;
  width:100%; max-width:500px; text-align:center;
  position:relative; box-shadow:0 40px 100px rgba(0,102,255,0.3);
  animation:welcomeSlide 0.5s cubic-bezier(0.34,1.56,0.64,1);
  max-height:90vh; overflow-y:auto;
}
@keyframes welcomeSlide { from{transform:scale(0.7) translateY(50px);opacity:0;} to{transform:scale(1) translateY(0);opacity:1;} }
.welcome-close {
  position:absolute; top:15px; right:20px;
  font-size:32px; color:var(--gray); cursor:pointer;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:all 0.3s; line-height:1;
}
.welcome-close:hover { background:var(--bg); color:var(--danger); transform:rotate(90deg); }
.welcome-icon { font-size:70px; margin-bottom:15px; animation:iconBounce 1s ease infinite; }
@keyframes iconBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.welcome-content h2 {
  font-size:28px; margin-bottom:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.welcome-content > p { color:var(--gray); font-size:15px; margin-bottom:25px; }
.welcome-features { display:flex; flex-direction:column; gap:12px; margin-bottom:25px; text-align:left; }
.welcome-feature-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--bg);
  border-radius:12px; font-size:14px; transition:all 0.3s;
}
.welcome-feature-item:hover { background:rgba(0,102,255,0.08); transform:translateX(5px); }
.welcome-feature-item .feat-emoji { font-size:22px; }
.welcome-checkbox { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:20px; font-size:13px; color:var(--gray); cursor:pointer; }

/* ============ BACKGROUNDS ============ */
.bg-grid {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background-image:
    linear-gradient(rgba(0,102,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,0.03) 1px, transparent 1px);
  background-size:50px 50px; z-index:-2;
  animation:gridMove 20s linear infinite;
}
@keyframes gridMove { from{background-position:0 0;} to{background-position:50px 50px;} }

.bg-gradient { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.blob {
  position:absolute; border-radius:50%;
  filter:blur(120px); opacity:0.4;
  animation:blobFloat 20s infinite alternate ease-in-out;
}
.b1 { width:500px; height:500px; background:linear-gradient(135deg,#0066ff,#00c9ff); top:-150px; left:-150px; }
.b2 { width:600px; height:600px; background:linear-gradient(135deg,#1e40af,#0066ff); top:50%; right:-200px; animation-delay:-7s; }
.b3 { width:400px; height:400px; background:linear-gradient(135deg,#00c9ff,#0066ff); bottom:-100px; left:40%; animation-delay:-14s; }
@keyframes blobFloat {
  0% { transform:translate(0,0) scale(1); }
  50% { transform:translate(80px,60px) scale(1.15); }
  100% { transform:translate(-60px,80px) scale(0.95); }
}

/* ⭐ FLOATING CODE PARTICLES */
.code-particles {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.code-particles span {
  position:absolute;
  color:rgba(0,102,255,0.15);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  font-weight:700;
  animation:floatUp linear infinite;
  white-space:nowrap;
}
.code-particles span:nth-child(1) { left:5%; animation-duration:15s; animation-delay:0s; font-size:20px; }
.code-particles span:nth-child(2) { left:15%; animation-duration:20s; animation-delay:-3s; font-size:16px; }
.code-particles span:nth-child(3) { left:25%; animation-duration:18s; animation-delay:-6s; font-size:18px; }
.code-particles span:nth-child(4) { left:35%; animation-duration:22s; animation-delay:-9s; font-size:14px; }
.code-particles span:nth-child(5) { left:45%; animation-duration:17s; animation-delay:-12s; font-size:16px; }
.code-particles span:nth-child(6) { left:55%; animation-duration:19s; animation-delay:-2s; font-size:18px; }
.code-particles span:nth-child(7) { left:65%; animation-duration:21s; animation-delay:-5s; font-size:16px; }
.code-particles span:nth-child(8) { left:75%; animation-duration:16s; animation-delay:-8s; font-size:20px; }
.code-particles span:nth-child(9) { left:85%; animation-duration:23s; animation-delay:-11s; font-size:14px; }
.code-particles span:nth-child(10) { left:95%; animation-duration:20s; animation-delay:-14s; font-size:16px; }

@keyframes floatUp {
  from { transform:translateY(110vh) rotate(0deg); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  to { transform:translateY(-20vh) rotate(360deg); opacity:0; }
}

/* ============ NAVBAR ============ */
.navbar {
  position:sticky; top:0;
  padding:18px 60px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  z-index:100; animation:slideDown 0.6s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
.logo {
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:700; color:var(--text);
  text-decoration:none;
}
.logo b { color:var(--primary); }
.logo-icon {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:white;
  box-shadow:0 8px 20px rgba(0,102,255,0.3);
  flex-shrink:0; overflow:hidden;
  animation:logoPulse 3s ease infinite;
}
@keyframes logoPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
.logo-icon img { width:100%; height:100%; object-fit:contain; }
.logo-image-mode { background:transparent !important; box-shadow:none !important; width:auto !important; height:45px !important; padding:0; animation:none; }
.logo-image-mode img { max-height:45px; width:auto; }

.nav-links { display:flex; list-style:none; gap:8px; }
.nav-links a {
  padding:9px 16px; color:var(--gray);
  text-decoration:none; font-weight:500; font-size:14px;
  border-radius:8px; transition:all 0.3s;
}
.nav-links a:hover { color:var(--primary); background:rgba(0,102,255,0.08); }
.nav-links a.active { color:var(--primary); background:rgba(0,102,255,0.1); }

.mobile-menu-btn {
  display:none; background:transparent; border:none;
  font-size:26px; color:var(--text); cursor:pointer;
  padding:5px 12px; border-radius:8px;
}
.mobile-menu-btn:hover { background:var(--bg); }

/* ============ BUTTONS ============ */
.btn-primary {
  padding:14px 28px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white; border:none; border-radius:10px;
  font-weight:600; font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; transition:all 0.3s;
  box-shadow:0 10px 25px rgba(0,102,255,0.3);
  font-family:'Inter',sans-serif;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 15px 35px rgba(0,102,255,0.45); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-primary span { transition:transform 0.3s; }
.btn-primary:hover span { transform:translateX(4px); }
.btn-primary.full { width:100%; justify-content:center; }
.btn-secondary {
  padding:14px 28px; background:white; color:var(--text);
  border:2px solid var(--border); border-radius:10px;
  font-weight:600; font-size:14px; cursor:pointer;
  text-decoration:none; transition:all 0.3s;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',sans-serif;
}
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.btn-danger {
  padding:14px 28px; background:var(--danger); color:white;
  border:none; border-radius:10px; font-weight:600; font-size:14px;
  cursor:pointer; transition:all 0.3s; font-family:'Inter',sans-serif;
}
.btn-danger:hover { background:#dc2626; transform:translateY(-2px); }

/* ============ HERO ============ */
.hero {
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  padding:60px 60px 80px;
  min-height:calc(100vh - 76px);
  position:relative;
}
.hero-left { animation:fadeInLeft 0.8s ease; }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-40px);} to{opacity:1;transform:translateX(0);} }
.badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; background:white;
  border:1px solid var(--border); border-radius:30px;
  font-size:13px; font-weight:500; color:var(--gray);
  margin-bottom:24px; box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
.pulse-dot {
  width:8px; height:8px; background:var(--success);
  border-radius:50%; animation:pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { box-shadow:0 0 0 0 rgba(16,185,129,0.7); }
  70% { box-shadow:0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
.hero h1 {
  font-size:56px; font-weight:800; line-height:1.1;
  margin-bottom:20px; letter-spacing:-2px;
}
.gradient-text {
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.typing-effect {
  display:inline-block;
  animation:glowText 3s ease-in-out infinite;
}
@keyframes glowText {
  0%,100% { filter:drop-shadow(0 0 0 rgba(0,201,255,0)); }
  50% { filter:drop-shadow(0 0 15px rgba(0,201,255,0.5)); }
}
.hero p { font-size:17px; color:var(--gray); line-height:1.7; max-width:520px; margin-bottom:36px; }
.hero-btns { display:flex; gap:14px; margin-bottom:50px; flex-wrap:wrap; }
.stats { display:flex; gap:50px; padding-top:30px; border-top:1px solid var(--border); flex-wrap:wrap; }
.stat h3 { font-size:34px; font-weight:800; color:var(--primary); margin-bottom:4px; }
.stat p { color:var(--gray); font-size:14px; }

/* ============ ⭐ DEVOPS ANIMATION SCENE ============ */
.hero-right { animation:fadeInRight 0.8s ease; position:relative; height:520px; }
@keyframes fadeInRight { from{opacity:0;transform:translateX(40px);} to{opacity:1;transform:translateX(0);} }

.devops-scene {
  position:relative;
  width:100%;
  height:100%;
}

/* Kubernetes Cluster Animation */
.k8s-cluster {
  position:absolute;
  top:0; right:20px;
  width:180px; height:160px;
}
.k8s-node {
  position:relative;
  width:100%; height:100%;
  background:linear-gradient(135deg,rgba(0,102,255,0.15),rgba(0,201,255,0.15));
  border:2px dashed rgba(0,102,255,0.4);
  border-radius:20px;
  padding:15px;
  animation:k8sFloat 4s ease-in-out infinite;
}
@keyframes k8sFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-15px); }
}
.k8s-icon {
  position:absolute;
  top:-25px; left:50%;
  transform:translateX(-50%);
  font-size:35px;
  background:white;
  padding:5px 15px;
  border-radius:30px;
  box-shadow:0 8px 20px rgba(0,102,255,0.2);
}
.pod {
  width:35px; height:35px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:50%;
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:18px;
  box-shadow:0 5px 15px rgba(0,102,255,0.4);
  animation:podPulse 2s ease-in-out infinite;
}
.pod::before {
  content:'📦';
  font-size:18px;
}
.pod-1 { top:30px; left:20px; animation-delay:0s; }
.pod-2 { top:30px; right:20px; animation-delay:0.5s; }
.pod-3 { bottom:20px; left:50%; transform:translateX(-50%); animation-delay:1s; }

@keyframes podPulse {
  0%,100% { transform:scale(1); box-shadow:0 5px 15px rgba(0,102,255,0.4); }
  50% { transform:scale(1.1); box-shadow:0 10px 25px rgba(0,102,255,0.6); }
}
.pod-3 { transform:translateX(-50%) scale(1); }
@keyframes podPulse3 {
  0%,100% { transform:translateX(-50%) scale(1); }
  50% { transform:translateX(-50%) scale(1.1); }
}

/* CI/CD Pipeline Animation */
.cicd-pipeline {
  position:absolute;
  top:180px; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px;
  animation:pipelineFade 1s ease 0.5s backwards;
}
@keyframes pipelineFade { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

.pipeline-node {
  display:flex; flex-direction:column; align-items:center;
  padding:12px 8px;
  background:white;
  border:2px solid var(--border);
  border-radius:12px;
  min-width:65px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  transition:all 0.3s;
  position:relative;
}
.pipeline-node .node-icon {
  font-size:22px; margin-bottom:5px;
  animation:nodeBlink 3s ease infinite;
}
.pipeline-node.commit .node-icon { animation-delay:0s; }
.pipeline-node.build .node-icon { animation-delay:0.75s; }
.pipeline-node.test .node-icon { animation-delay:1.5s; }
.pipeline-node.deploy .node-icon { animation-delay:2.25s; }

@keyframes nodeBlink {
  0%,100% { transform:scale(1); filter:brightness(1); }
  25% { transform:scale(1.2); filter:brightness(1.5); }
}
.pipeline-node span {
  font-size:10px; font-weight:600; color:var(--gray);
  text-transform:uppercase; letter-spacing:0.5px;
}
.pipeline-line {
  flex:1; height:3px;
  background:linear-gradient(90deg,var(--border),var(--primary),var(--border));
  background-size:200% 100%;
  animation:lineFlow 2s linear infinite;
  border-radius:2px;
  margin:0 -5px;
  position:relative;
  top:5px;
}
@keyframes lineFlow {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* Docker Ship Animation */
.docker-ship {
  position:absolute;
  bottom:100px; left:20px;
  animation:shipFloat 3s ease-in-out infinite;
}
@keyframes shipFloat {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50% { transform:translateY(-10px) rotate(2deg); }
}
.ship-body {
  font-size:60px;
  filter:drop-shadow(0 10px 20px rgba(0,102,255,0.3));
}
.container {
  position:absolute;
  font-size:24px;
  animation:containerBounce 2s ease infinite;
}
.container-1 { top:-25px; left:15px; animation-delay:0s; }
.container-2 { top:-45px; left:25px; animation-delay:0.3s; }
.container-3 { top:-25px; right:15px; animation-delay:0.6s; }
@keyframes containerBounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}

/* Mini Terminal */
.terminal-mini {
  position:absolute;
  bottom:0; right:0;
  width:280px;
  background:var(--navy);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(15,23,42,0.3);
  animation:terminalGlow 4s ease-in-out infinite;
}
@keyframes terminalGlow {
  0%,100% { box-shadow:0 20px 50px rgba(15,23,42,0.3); }
  50% { box-shadow:0 20px 50px rgba(0,201,255,0.3); }
}
.terminal-header-mini {
  background:#1e293b;
  padding:8px 12px;
  display:flex; align-items:center; gap:10px;
}
.terminal-btns { display:flex; gap:5px; }
.terminal-btns span { width:10px; height:10px; border-radius:50%; }
.terminal-btns span:nth-child(1) { background:#ef4444; }
.terminal-btns span:nth-child(2) { background:#f59e0b; }
.terminal-btns span:nth-child(3) { background:#10b981; }
.terminal-title-mini { color:#94a3b8; font-family:'JetBrains Mono',monospace; font-size:11px; flex:1; text-align:center; }
.terminal-body-mini {
  padding:15px 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#e2e8f0;
  min-height:100px;
}
.terminal-body-mini .terminal-line { margin-bottom:6px; }
.terminal-body-mini .prompt { color:var(--accent); margin-right:5px; }
.terminal-body-mini .output { color:#94a3b8; padding-left:12px; font-size:10px; }
.terminal-body-mini .output.success { color:var(--success); }
.typing-text {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  animation:typing 3s steps(30, end) infinite;
  width:0;
}
@keyframes typing {
  0% { width:0; }
  40%,60% { width:100%; }
  100% { width:0; }
}
.cursor-blink { animation:blink 1s infinite; color:var(--accent); }
@keyframes blink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} }

/* ============ SECTIONS ============ */
section { padding:100px 60px; position:relative; }
.section-head { text-align:center; margin-bottom:60px; }
.section-tag {
  display:inline-block; padding:6px 14px;
  background:rgba(0,102,255,0.1); color:var(--primary);
  border-radius:6px; font-weight:600; font-size:12px;
  letter-spacing:1.5px; margin-bottom:16px;
}
.section-head h2 { font-size:44px; font-weight:800; margin-bottom:14px; letter-spacing:-1px; }
.section-head p { color:var(--gray); font-size:17px; max-width:600px; margin:0 auto; }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; max-width:1300px; margin:0 auto; }
.service-card {
  background:white; padding:34px 28px;
  border-radius:16px; border:1px solid var(--border);
  transition:all 0.4s;
  animation:fadeInUp 0.6s ease backwards;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
.service-card:hover { transform:translateY(-8px); box-shadow:0 25px 50px rgba(0,102,255,0.15); border-color:var(--primary); }
.service-icon {
  width:56px; height:56px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:white; font-size:28px; margin-bottom:20px;
  box-shadow:0 10px 25px rgba(0,102,255,0.3);
  transition:transform 0.4s;
}
.service-card:hover .service-icon { transform:rotate(-10deg) scale(1.1); }
.service-card h3 { font-size:20px; font-weight:700; margin-bottom:12px; }
.service-card p { color:var(--gray); font-size:14px; margin-bottom:18px; line-height:1.7; }
.service-features { list-style:none; }
.service-features li {
  padding:6px 0; color:var(--text); font-size:13px;
  padding-left:22px; position:relative;
}
.service-features li::before {
  content:'✓'; position:absolute; left:0;
  color:var(--success); font-weight:700;
}

/* Tools Marquee */
.tools-section { padding:80px 0; }
.tools-marquee {
  overflow:hidden; padding:20px 0;
  mask-image:linear-gradient(90deg,transparent,white 10%,white 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,white 10%,white 90%,transparent);
}
.tools-track {
  display:flex; gap:20px;
  animation:scroll 30s linear infinite;
  width:max-content;
}
@keyframes scroll { to { transform:translateX(-50%); } }
.tool-badge {
  padding:16px 28px; background:white;
  border:1px solid var(--border); border-radius:12px;
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:15px; white-space:nowrap;
  transition:all 0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
.tool-badge:hover { border-color:var(--primary); color:var(--primary); transform:scale(1.05) translateY(-3px); }
.tool-badge span { font-size:22px; }

/* Freelance CTA */
.freelance-cta { padding:80px 60px; }
.cta-container {
  max-width:1200px; margin:0 auto;
  background:linear-gradient(135deg,var(--primary),var(--accent),var(--secondary));
  border-radius:32px; padding:60px;
  display:grid; grid-template-columns:2fr 1fr;
  gap:40px; align-items:center;
  color:white; position:relative; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,102,255,0.35);
}
.cta-container::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation:ctaShine 10s infinite linear;
}
@keyframes ctaShine { to { transform:rotate(360deg); } }
.cta-content { position:relative; z-index:2; }
.cta-content .section-tag { background:rgba(255,255,255,0.2); color:white; }
.cta-content h2 { font-size:36px; margin-bottom:16px; font-weight:800; }
.cta-content p { font-size:17px; margin-bottom:24px; opacity:0.95; }
.cta-content .btn-primary { background:white; color:var(--primary); box-shadow:0 15px 40px rgba(0,0,0,0.2); }
.cta-visual { position:relative; height:200px; z-index:2; }
.floating-icon {
  position:absolute; font-size:50px;
  background:rgba(255,255,255,0.2); backdrop-filter:blur(10px);
  padding:20px; border-radius:20px;
  animation:floatIcon 4s infinite ease-in-out;
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}
.f1 { top:0; left:10%; animation-delay:0s; }
.f2 { top:20%; right:10%; animation-delay:-1s; }
.f3 { bottom:20%; left:20%; animation-delay:-2s; }
.f4 { bottom:0; right:20%; animation-delay:-3s; }
@keyframes floatIcon { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-15px) rotate(10deg);} }

/* Pipeline */
.pipeline-flow { display:flex; justify-content:center; align-items:center; gap:0; flex-wrap:wrap; max-width:1200px; margin:0 auto; }
.pipe-step {
  background:white; padding:24px 20px; border-radius:14px;
  text-align:center; min-width:130px; border:1px solid var(--border);
  transition:all 0.3s; animation:fadeInUp 0.6s ease backwards;
}
.pipe-step:nth-child(1) { animation-delay:0s; }
.pipe-step:nth-child(3) { animation-delay:0.1s; }
.pipe-step:nth-child(5) { animation-delay:0.2s; }
.pipe-step:nth-child(7) { animation-delay:0.3s; }
.pipe-step:nth-child(9) { animation-delay:0.4s; }
.pipe-step:nth-child(11) { animation-delay:0.5s; }
.pipe-step:hover { transform:translateY(-6px); border-color:var(--primary); box-shadow:0 15px 30px rgba(0,102,255,0.15); }
.pipe-icon { font-size:36px; margin-bottom:10px; animation:iconWiggle 3s ease infinite; }
@keyframes iconWiggle {
  0%,100% { transform:rotate(0deg); }
  25% { transform:rotate(-5deg); }
  75% { transform:rotate(5deg); }
}
.pipe-step h4 { font-size:15px; font-weight:700; }
.pipe-connector {
  width:40px; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  position:relative;
}
.pipe-connector::after {
  content:''; position:absolute; right:-1px; top:-4px;
  border-left:8px solid var(--accent);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  animation:arrowPulse 2s ease infinite;
}
@keyframes arrowPulse {
  0%,100% { opacity:1; transform:translateX(0); }
  50% { opacity:0.5; transform:translateX(5px); }
}

/* Contact */
.contact { padding:100px 60px; }
.contact-box {
  max-width:1200px; margin:0 auto;
  background:white; padding:60px;
  border-radius:24px; border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,102,255,0.08);
}
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:50px; margin-top:20px; }
.contact-info { display:flex; flex-direction:column; gap:20px; }
.contact-item {
  display:flex; align-items:center; gap:16px;
  padding:16px; background:var(--bg); border-radius:12px;
  transition:all 0.3s;
}
.contact-item:hover { background:rgba(0,102,255,0.05); transform:translateX(5px); }
.ci-icon {
  width:44px; height:44px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.contact-item h4 { font-size:13px; color:var(--gray); font-weight:500; margin-bottom:2px; }
.contact-item p { font-size:15px; font-weight:600; word-break:break-word; }
.contact-form { display:flex; flex-direction:column; gap:14px; }
.contact-form input, .contact-form textarea {
  padding:14px 18px; background:var(--bg);
  border:1px solid var(--border); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14px;
  transition:all 0.3s; outline:none; width:100%;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color:var(--primary); background:white;
  box-shadow:0 0 0 4px rgba(0,102,255,0.1);
}

/* Footer */
footer { background:var(--navy); color:white; padding:60px 60px 30px; margin-top:80px; position:relative; z-index:1; }
.footer-content { max-width:1300px; margin:0 auto; }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:40px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  margin-bottom:30px;
}
.footer-brand .logo { color:white; margin-bottom:16px; }
.footer-brand p { color:var(--gray-light); font-size:14px; max-width:300px; }
.footer-links h4 { margin-bottom:16px; font-size:16px; }
.footer-links a {
  display:block; color:var(--gray-light);
  text-decoration:none; padding:6px 0;
  font-size:14px; transition:color 0.3s;
}
.footer-links a:hover { color:var(--accent); padding-left:5px; }
.footer-bottom { text-align:center; color:var(--gray-light); font-size:13px; }

/* Blog Page */
.blog-hero { text-align:center; padding:60px 60px 40px; }
.blog-hero h1 { font-size:52px; font-weight:800; margin-bottom:14px; letter-spacing:-1.5px; }
.blog-hero p { color:var(--gray); font-size:17px; margin-bottom:35px; }
.blog-search { max-width:600px; margin:0 auto 30px; position:relative; }
.blog-search svg { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--gray); }
.blog-search input {
  width:100%; padding:16px 20px 16px 55px;
  background:white; border:1px solid var(--border);
  border-radius:12px; font-family:'Inter',sans-serif;
  font-size:14px; outline:none; transition:all 0.3s;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}
.blog-search input:focus { border-color:var(--primary); box-shadow:0 8px 25px rgba(0,102,255,0.15); }
.blog-filters { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:0 20px; }
.filter-btn {
  padding:9px 20px; background:white;
  border:1px solid var(--border); border-radius:8px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:13px;
  color:var(--text); cursor:pointer; transition:all 0.3s;
}
.filter-btn:hover { border-color:var(--primary); color:var(--primary); }
.filter-btn.active {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white; border-color:transparent;
  box-shadow:0 8px 20px rgba(0,102,255,0.3);
}

.loader { text-align:center; padding:80px 20px; }
.loader-spinner {
  width:50px; height:50px;
  border:4px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%; margin:0 auto 20px;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.blog-container { padding:20px 60px 80px; max-width:1300px; margin:0 auto; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.blog-card {
  background:white; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); transition:all 0.4s;
  cursor:pointer; animation:cardAppear 0.5s ease backwards;
}
@keyframes cardAppear { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.blog-card:hover { transform:translateY(-8px); box-shadow:0 25px 50px rgba(0,102,255,0.15); border-color:var(--primary); }
.blog-thumb {
  height:160px;
  background:linear-gradient(135deg,var(--primary),var(--accent),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-size:60px; position:relative; overflow:hidden;
}
.blog-thumb::before {
  content:''; position:absolute; top:0; left:0;
  width:100%; height:100%;
  background:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15), transparent 50%);
}
.blog-body { padding:22px; }
.blog-category-tag {
  display:inline-block; padding:4px 12px;
  background:rgba(0,102,255,0.1); color:var(--primary);
  border-radius:6px; font-size:11px; font-weight:600;
  letter-spacing:0.5px; margin-bottom:12px; text-transform:uppercase;
}
.blog-card h3 { font-size:18px; margin-bottom:10px; font-weight:700; line-height:1.4; }
.blog-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--gray); margin-bottom:12px; flex-wrap:wrap; }
.blog-excerpt {
  color:var(--gray); font-size:14px; line-height:1.6;
  margin-bottom:16px; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-read-more { color:var(--primary); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.empty-state { text-align:center; padding:80px 20px; }
.empty-icon { font-size:60px; margin-bottom:16px; }
.empty-state h3 { font-size:22px; margin-bottom:8px; }
.empty-state p { color:var(--gray); }

/* Modal */
.modal {
  display:none; position:fixed; top:0; left:0;
  width:100%; height:100%;
  background:rgba(15,23,42,0.7); backdrop-filter:blur(8px);
  z-index:1000; justify-content:center; align-items:center;
  padding:20px; animation:modalFade 0.3s ease;
}
@keyframes modalFade { from{opacity:0;} to{opacity:1;} }
.modal.active { display:flex; }
.modal-content {
  background:white; padding:40px;
  border-radius:20px; width:100%; max-width:600px;
  max-height:90vh; overflow-y:auto; position:relative;
  animation:modalSlide 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalSlide { from{transform:scale(0.9);opacity:0;} to{transform:scale(1);opacity:1;} }
.modal-content h2 { margin-bottom:20px; font-size:24px; }
.close, .close-view {
  position:absolute; top:15px; right:20px;
  font-size:28px; color:var(--gray); cursor:pointer;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:all 0.3s; line-height:1;
}
.close:hover, .close-view:hover { background:var(--bg); color:var(--danger); transform:rotate(90deg); }
.view-modal { max-width:800px; }
.view-modal-thumb {
  height:200px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:80px; margin-bottom:24px;
}
.view-modal h1 { font-size:32px; margin:15px 0; line-height:1.3; }
.view-modal .meta {
  display:flex; align-items:center; gap:12px;
  color:var(--gray); font-size:14px;
  margin-bottom:24px; padding-bottom:20px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.view-modal .content-body { color:var(--text); font-size:15px; line-height:1.8; white-space:pre-wrap; }

/* Resume Page */
.resume-hero { text-align:center; padding:60px 60px 40px; }
.resume-hero h1 { font-size:52px; font-weight:800; margin-bottom:30px; letter-spacing:-1.5px; }
.resume-container { padding:20px 60px 80px; max-width:1000px; margin:0 auto; }
.resume-card {
  background:white; border-radius:20px; padding:60px;
  border:1px solid var(--border);
  box-shadow:0 25px 60px rgba(0,102,255,0.08);
}
.resume-header {
  text-align:center; padding-bottom:40px;
  border-bottom:2px solid var(--border); margin-bottom:40px;
}
.resume-avatar {
  width:100px; height:100px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; color:white; margin:0 auto 20px;
  box-shadow:0 15px 35px rgba(0,102,255,0.3);
  animation:avatarPulse 3s ease infinite;
}
@keyframes avatarPulse {
  0%,100% { box-shadow:0 15px 35px rgba(0,102,255,0.3); }
  50% { box-shadow:0 15px 45px rgba(0,102,255,0.5); }
}
.resume-header h1 { font-size:36px; font-weight:800; margin-bottom:8px; }
.resume-header .title { color:var(--primary); font-size:18px; font-weight:600; margin-bottom:20px; }
.resume-contacts { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; font-size:14px; color:var(--gray); }
.resume-contacts span { display:flex; align-items:center; gap:6px; }
.resume-section { margin-bottom:40px; }
.resume-section h2 {
  font-size:22px; color:var(--primary);
  margin-bottom:20px; padding-bottom:10px;
  border-bottom:2px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.resume-item { margin-bottom:24px; }
.resume-item-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:6px; gap:15px; flex-wrap:wrap;
}
.resume-item h3 { font-size:16px; font-weight:700; }
.resume-item .company { color:var(--primary); font-weight:600; font-size:14px; }
.resume-item .period {
  background:var(--bg); padding:4px 12px;
  border-radius:6px; font-size:12px; color:var(--gray); white-space:nowrap;
}
.resume-item p { color:var(--gray); font-size:14px; line-height:1.7; margin-top:6px; }
.resume-skills, .resume-certs { display:flex; flex-wrap:wrap; gap:8px; }
.skill-badge {
  padding:6px 14px;
  background:linear-gradient(135deg,rgba(0,102,255,0.1),rgba(0,201,255,0.1));
  color:var(--primary); border-radius:20px;
  font-size:13px; font-weight:500;
  border:1px solid rgba(0,102,255,0.2);
  transition:all 0.3s;
}
.skill-badge:hover { transform:scale(1.05); border-color:var(--primary); }

/* Freelance Page */
.freelance-hero { text-align:center; padding:60px 60px 30px; }
.freelance-hero h1 { font-size:56px; font-weight:800; margin-bottom:14px; letter-spacing:-1.5px; }
.freelance-hero p { color:var(--gray); font-size:17px; max-width:600px; margin:0 auto 30px; }
.freelance-highlights {
  display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  margin-top:30px;
}
.highlight-item {
  display:flex; align-items:center; gap:10px;
  background:white; padding:12px 24px;
  border-radius:30px; border:1px solid var(--border);
  font-weight:600; font-size:14px;
  box-shadow:0 4px 12px rgba(0,102,255,0.06);
  transition:all 0.3s;
}
.highlight-item:hover { transform:translateY(-3px); border-color:var(--primary); }
.hi-icon { font-size:22px; }

/* Freelance Services */
.freelance-services-section { padding:80px 60px; }
.fl-services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; max-width:1300px; margin:0 auto; }
.fl-service-card {
  background:white; padding:35px 30px;
  border-radius:20px; border:2px solid var(--border);
  transition:all 0.4s; position:relative; overflow:hidden;
  animation:cardAppear 0.6s ease backwards;
}
.fl-service-card::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:100%;
  background:linear-gradient(180deg,var(--primary),var(--accent));
  transform:scaleY(0); transform-origin:top;
  transition:transform 0.4s;
}
.fl-service-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,102,255,0.15); border-color:var(--primary); }
.fl-service-card:hover::before { transform:scaleY(1); }
.fl-service-card.featured {
  border-color:var(--primary);
  background:linear-gradient(135deg,white,rgba(0,102,255,0.02));
  box-shadow:0 20px 50px rgba(0,102,255,0.15);
}
.fl-service-card.featured::after {
  content:'⭐ FEATURED'; position:absolute; top:15px; right:15px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white; padding:5px 12px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:1px;
  box-shadow:0 4px 12px rgba(0,102,255,0.3);
}
.fl-service-icon {
  font-size:50px; margin-bottom:20px; display:inline-block;
  transition:transform 0.4s;
}
.fl-service-card:hover .fl-service-icon { transform:scale(1.1) rotate(-5deg); }
.fl-service-card h3 { font-size:22px; font-weight:700; margin-bottom:12px; color:var(--text); }
.fl-service-card > p { color:var(--gray); font-size:14px; line-height:1.7; margin-bottom:20px; }
.fl-service-includes {
  list-style:none; margin-bottom:20px;
  padding:15px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.fl-service-includes li {
  padding:8px 0; padding-left:28px; position:relative;
  font-size:13px; color:var(--text); line-height:1.5;
}
.fl-service-includes li::before {
  content:'✓'; position:absolute; left:0; top:8px;
  width:18px; height:18px;
  background:var(--success); color:white;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.fl-service-delivery {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--primary); font-weight:600;
  margin-bottom:15px;
}
.fl-service-delivery::before { content:'⏱️'; font-size:16px; }
.fl-service-cta {
  display:block; width:100%; padding:12px; text-align:center;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white; text-decoration:none; border-radius:10px;
  font-weight:600; font-size:14px; transition:all 0.3s;
  box-shadow:0 8px 20px rgba(0,102,255,0.25);
}
.fl-service-cta:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,102,255,0.35); }

/* Why Choose Me */
.why-choose-me { padding:80px 60px; background:rgba(0,102,255,0.02); }
.benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:1300px; margin:0 auto; }
.benefit-card {
  background:white; padding:35px 25px;
  border-radius:16px; border:1px solid var(--border);
  text-align:center; transition:all 0.4s;
  animation:cardAppear 0.6s ease backwards;
}
.benefit-card:hover { transform:translateY(-8px); box-shadow:0 25px 50px rgba(0,102,255,0.15); border-color:var(--primary); }
.benefit-icon-wrap {
  width:70px; height:70px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; margin:0 auto 20px;
  box-shadow:0 15px 30px rgba(0,102,255,0.3);
  transition:transform 0.4s;
}
.benefit-card:hover .benefit-icon-wrap { transform:rotate(-10deg) scale(1.1); }
.benefit-card h3 { font-size:20px; font-weight:700; margin-bottom:12px; }
.benefit-card p { color:var(--gray); font-size:14px; line-height:1.6; }

/* How It Works */
.how-it-works { padding:80px 60px; }
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; max-width:1200px; margin:0 auto; }
.step-card {
  background:white; padding:30px 25px;
  border-radius:16px; border:1px solid var(--border);
  text-align:center; position:relative; transition:all 0.3s;
}
.step-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,102,255,0.1); border-color:var(--primary); }
.step-number {
  position:absolute; top:-15px; right:20px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white; padding:6px 14px; border-radius:20px;
  font-size:14px; font-weight:800;
  box-shadow:0 8px 20px rgba(0,102,255,0.3);
}
.step-icon { font-size:40px; margin-bottom:15px; }
.step-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; }
.step-card p { color:var(--gray); font-size:14px; }

/* Freelance Contact */
.freelance-contact { padding:100px 60px; }
.fl-contact-box {
  max-width:800px; margin:0 auto;
  background:white; padding:50px;
  border-radius:24px; border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,102,255,0.1);
}
.freelance-form { display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.freelance-form input, .freelance-form textarea, .freelance-form select {
  padding:14px 18px; background:var(--bg);
  border:1px solid var(--border); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:14px;
  transition:all 0.3s; outline:none; width:100%;
}
.freelance-form input:focus, .freelance-form textarea:focus, .freelance-form select:focus {
  border-color:var(--primary); background:white;
  box-shadow:0 0 0 4px rgba(0,102,255,0.1);
}

/* Admin */
.admin-page { background:var(--bg); }
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box {
  background:white; padding:50px 40px;
  border-radius:20px; width:100%; max-width:420px;
  box-shadow:0 30px 80px rgba(0,102,255,0.15);
  animation:modalSlide 0.5s ease;
}
.login-box h2 { text-align:center; margin-bottom:8px; font-size:26px; }
.login-box input {
  width:100%; padding:14px 18px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; font-family:'Inter',sans-serif;
  font-size:14px; margin-bottom:15px; outline:none; transition:all 0.3s;
}
.login-box input:focus { border-color:var(--primary); background:white; }
.admin-navbar {
  padding:15px 30px; background:white;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:100;
  gap:15px; flex-wrap:wrap;
}
.admin-nav-actions { display:flex; gap:12px; align-items:center; }
.admin-layout { display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - 70px); }
.admin-sidebar {
  background:white; border-right:1px solid var(--border);
  padding:24px 16px; overflow-y:auto;
}
.admin-menu { list-style:none; }
.admin-menu li {
  padding:12px 16px; margin-bottom:4px;
  border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:500;
  color:var(--gray); transition:all 0.3s;
}
.admin-menu li:hover { background:var(--bg); color:var(--text); }
.admin-menu li.active {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white; box-shadow:0 8px 20px rgba(0,102,255,0.3);
}
.admin-main { padding:40px; overflow-y:auto; }
.admin-tab { display:none; animation:fadeIn 0.3s ease; }
.admin-tab.active { display:block; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.admin-tab h2 { font-size:26px; margin-bottom:6px; }
.admin-tab h3 { font-size:18px; margin:25px 0 14px; color:var(--text); }
.admin-desc { color:var(--gray); font-size:14px; margin-bottom:24px; }
.form-group { margin-bottom:18px; }
.form-group label {
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:600; color:var(--text);
}
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:12px 16px;
  background:white; border:1px solid var(--border);
  border-radius:10px; font-family:'Inter',sans-serif;
  font-size:14px; outline:none; transition:all 0.3s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,102,255,0.1);
}
.form-group textarea { resize:vertical; min-height:80px; font-family:'Inter',sans-serif; }
.preview-box {
  padding:20px; background:var(--bg);
  border:2px dashed var(--border);
  border-radius:12px; margin:20px 0;
}
.preview-box label {
  color:var(--gray); font-size:12px;
  font-weight:600; text-transform:uppercase; letter-spacing:1px;
}
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
}
.admin-blog-list { margin-top:25px; display:flex; flex-direction:column; gap:12px; }
.admin-blog-item {
  background:white; padding:20px;
  border-radius:12px; border:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  transition:all 0.3s; gap:15px; flex-wrap:wrap;
}
.admin-blog-item:hover { border-color:var(--primary); }
.admin-blog-item .info { flex:1; min-width:200px; }
.admin-blog-item .info h4 { margin-bottom:4px; font-size:15px; }
.admin-blog-item .info p { font-size:12px; color:var(--gray); }
.admin-blog-item .actions { display:flex; gap:8px; flex-wrap:wrap; }
.admin-blog-item .actions button {
  padding:8px 14px; border:none; border-radius:8px;
  font-family:'Inter',sans-serif; font-size:12px;
  font-weight:600; cursor:pointer; transition:all 0.3s;
}
.admin-blog-item .edit-btn { background:rgba(0,102,255,0.1); color:var(--primary); }
.admin-blog-item .del-btn { background:rgba(239,68,68,0.1); color:var(--danger); }
.admin-blog-item .edit-btn:hover { background:var(--primary); color:white; }
.admin-blog-item .del-btn:hover { background:var(--danger); color:white; }
#logoImagePreview img { max-width:200px; max-height:60px; margin:10px 0; padding:10px; background:var(--bg); border-radius:8px; }
.status-msg {
  padding:14px 20px; border-radius:10px;
  font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.status-msg.success { background:rgba(16,185,129,0.1); color:var(--success); border:1px solid rgba(16,185,129,0.3); }
.status-msg.error { background:rgba(239,68,68,0.1); color:var(--danger); border:1px solid rgba(239,68,68,0.3); }

/* ============ 📱 RESPONSIVE ============ */
@media (max-width:1200px) {
  .hero { grid-template-columns:1fr 1fr; gap:40px; }
  .hero h1 { font-size:48px; }
  .hero-right { height:480px; }
  .k8s-cluster { width:150px; height:140px; }
  .terminal-mini { width:250px; }
}

@media (max-width:1024px) {
  .navbar { padding:15px 30px; }
  section { padding:80px 30px; }
  .hero { padding:40px 30px; gap:30px; }
  .contact, .freelance-cta, .freelance-contact { padding:80px 30px; }
  .contact-box, .cta-container, .fl-contact-box { padding:40px 30px; }
  footer { padding:50px 30px 30px; }
  .blog-hero, .resume-hero, .freelance-hero { padding:50px 30px 30px; }
  .blog-container, .resume-container { padding:20px 30px 60px; }
  .resume-card { padding:40px 30px; }
  .freelance-services-section, .why-choose-me, .how-it-works { padding:60px 30px; }
  .cta-container { grid-template-columns:1fr; text-align:center; }
  .cta-visual { display:none; }
}

@media (max-width:900px) {
  .mobile-menu-btn { display:block; }
  .navbar { padding:15px 20px; position:relative; }
  .nav-links {
    display:none; position:absolute;
    top:100%; left:0; right:0; background:white;
    flex-direction:column; padding:20px; gap:5px;
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
    border-bottom:1px solid var(--border);
    animation:slideDown 0.3s ease;
  }
  .nav-links.active { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; width:100%; padding:12px 16px; }
  
  .hero { grid-template-columns:1fr; text-align:center; padding:30px 20px 60px; min-height:auto; }
  .hero h1 { font-size:38px; }
  .hero p { margin-left:auto; margin-right:auto; }
  .stats { justify-content:center; gap:20px; }
  .hero-btns { justify-content:center; }
  
  /* Show simplified DevOps scene on mobile */
  .hero-right { height:400px; margin-top:20px; }
  .k8s-cluster { width:140px; height:130px; right:50%; transform:translateX(50%); top:0; }
  .cicd-pipeline { top:160px; padding:0 5px; }
  .pipeline-node { min-width:55px; padding:8px 4px; }
  .pipeline-node .node-icon { font-size:18px; }
  .pipeline-node span { font-size:8px; }
  .docker-ship { display:none; }
  .terminal-mini { width:calc(100% - 20px); left:10px; right:auto; bottom:0; }
  
  section { padding:60px 20px; }
  .section-head h2 { font-size:32px; }
  .section-head p { font-size:15px; }
  
  .contact { padding:60px 20px; }
  .contact-box { padding:30px 20px; }
  .contact-grid { grid-template-columns:1fr; gap:30px; }
  
  .cta-container { padding:40px 25px; gap:30px; }
  .cta-content h2 { font-size:28px; }
  
  footer { padding:40px 20px 25px; }
  .footer-top { grid-template-columns:1fr; gap:30px; text-align:center; }
  .footer-brand .logo { justify-content:center; margin-left:auto; margin-right:auto; }
  .footer-brand p { margin-left:auto; margin-right:auto; }
  
  .pipe-connector { display:none; }
  .pipeline-flow { gap:15px; }
  
  .blog-hero h1, .resume-hero h1, .freelance-hero h1 { font-size:36px; }
  .blog-container, .resume-container { padding:20px 20px 60px; }
  .resume-card { padding:30px 20px; }
  .resume-avatar { width:80px; height:80px; font-size:32px; }
  .resume-header h1 { font-size:28px; }
  .resume-contacts { gap:15px; font-size:13px; }
  .resume-item-head { flex-direction:column; align-items:flex-start; }
  
  .freelance-services-section, .why-choose-me, .how-it-works { padding:40px 20px; }
  .fl-contact-box { padding:30px 20px; }
  .form-row { grid-template-columns:1fr; }
  
  .admin-navbar { padding:12px 15px; }
  .admin-nav-actions { gap:8px; }
  .admin-nav-actions .btn-secondary, .admin-nav-actions .btn-primary { padding:8px 14px !important; font-size:12px !important; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar {
    position:fixed; top:70px; left:-280px;
    width:260px; height:calc(100vh - 70px);
    z-index:99; transition:left 0.3s ease;
    box-shadow:5px 0 20px rgba(0,0,0,0.1);
  }
  .admin-sidebar.open { left:0; }
  .admin-main { padding:20px; }
  .admin-tab h2 { font-size:22px; }
  
  .welcome-content { padding:35px 25px; }
  .welcome-content h2 { font-size:22px; }
  .welcome-icon { font-size:55px; }
  
  .modal-content { padding:30px 20px; }
  .view-modal-thumb { height:150px; font-size:60px; }
  .view-modal h1 { font-size:24px; }
}

@media (max-width:600px) {
  .hero-right { height:350px; }
  .k8s-cluster { width:120px; height:110px; }
  .k8s-icon { font-size:28px; }
  .pod { width:28px; height:28px; font-size:14px; }
  .pod::before { font-size:14px; }
  .cicd-pipeline { top:130px; }
  .terminal-mini { font-size:10px; }
  .terminal-body-mini { min-height:80px; padding:10px; }
  .terminal-body-mini .terminal-line { font-size:9px; }
}

@media (max-width:480px) {
  .hero h1 { font-size:30px; }
  .section-head h2 { font-size:24px; }
  .blog-hero h1, .resume-hero h1, .freelance-hero h1 { font-size:26px; }
  .stat h3 { font-size:24px; }
  .stat p { font-size:12px; }
  .btn-primary, .btn-secondary { padding:12px 20px; font-size:13px; }
  .logo { font-size:16px; }
  .logo-icon { width:32px; height:32px; font-size:15px; }
  .stats { gap:15px; }
  .stat { flex:1; min-width:80px; }
  .services-grid, .blog-grid, .fl-services-grid { grid-template-columns:1fr; }
  .contact-box { padding:25px 15px; }
  .resume-card { padding:25px 15px; }
  .welcome-content { padding:30px 20px; }
  .freelance-highlights { flex-direction:column; align-items:center; }
  .highlight-item { width:100%; max-width:280px; justify-content:center; }
  .code-particles span { font-size:10px !important; }
  
  .hero-right { height:320px; }
  .k8s-cluster { width:100px; height:100px; }
  .pipeline-node { min-width:45px; }
  .pipeline-node span { font-size:7px; }
  .terminal-title-mini { display:none; }
}

@media print {
  .bg-grid, .bg-gradient, .navbar, footer, .resume-hero, .welcome-popup, .code-particles { display:none !important; }
  .resume-container { padding:0; }
  .resume-card { box-shadow:none; border:none; padding:20px; }
  body { background:white; }
}