:root {
  --bg-main: #080810;
  --bg-secondary: #10111e;
  --bg-card: #13141f;
  --text-primary: #f0f4ff;
  --text-secondary: #94a3b8;
  --text-muted: #4b5577;
  --accent-primary: hsl(225, 90%, 60%);
  --accent-secondary: hsl(200, 95%, 50%);
  --accent-tertiary: hsl(215, 80%, 55%);
  --accent-glow: rgba(0, 160, 255, 0.2);
  --border-color: rgba(255,255,255,0.06);
  --glass-bg: rgba(16, 17, 30, 0.65);
  --glass-border: rgba(255,255,255,0.12);
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --container-width: 1280px;
  --section-padding: 6rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.4,0,0.2,1);
}

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

html { scroll-behavior:smooth; scroll-padding-top:80px; }

/* Hide Scrollbar Globally */
::-webkit-scrollbar { display: none; }
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Neural Sync Loader */
.loader-wrapper {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s;
}
.loader-wrapper.fade-out { opacity: 0; visibility: hidden; }
.loader-content { position: relative; width: 80px; height: 80px; }
.loader-circle {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(80, 140, 255, 0.1);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loader-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--text-primary);
  font-size: 1.2rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

/* Ambient Background Glows */
body::before, body::after {
  content: '';
  position: fixed;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(160px);
  z-index: -1;
  opacity: 0.10;
  pointer-events: none;
}
body::before {
  top: -15%; left: -15%;
  background: var(--accent-primary);
  animation: drift 25s infinite alternate ease-in-out;
}
body::after {
  bottom: -15%; right: -15%;
  background: var(--accent-secondary);
  animation: drift 30s infinite alternate-reverse ease-in-out;
}

@keyframes drift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(12%, 12%) scale(1.15) rotate(15deg); }
}

.container { max-width: var(--container-width); margin:0 auto; padding:0 2rem; }
.section-padding { padding: var(--section-padding) 0; }
.section-sub { color: var(--text-secondary); margin-top:-1.5rem; margin-bottom:3rem; font-size:1.05rem; }

/* Background */
.bg-mesh { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; overflow:hidden; pointer-events:none; }
.mesh-blob { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.25; animation:blobFloat 22s infinite ease-in-out alternate; }
.blob-1 { width:700px; height:700px; background:radial-gradient(circle, hsl(225,90%,55%), transparent 65%); top:-200px; right:-100px; }
.blob-2 { width:600px; height:600px; background:radial-gradient(circle, hsl(200,95%,50%), transparent 65%); bottom:-150px; left:-200px; animation-delay:-11s; }
.blob-3 { width:400px; height:400px; background:radial-gradient(circle, hsl(215,80%,45%), transparent 65%); top:40%; left:40%; animation-delay:-6s; opacity:0.15; }
@keyframes blobFloat { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-60px,60px) scale(1.1);} }

/* Typography */
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.2; }
.gradient-text { background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.muted { color:var(--text-muted); font-family:var(--font-sans); font-size:1rem; font-weight:400; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; width:100%; background:rgba(10,10,18,0.4); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); border-bottom:1px solid rgba(255,255,255,0.08); z-index:1000; padding:0.6rem 0; transition:var(--transition-normal); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
.navbar.scrolled { background:rgba(10,10,18,0.8); border-bottom-color: var(--accent-primary); }
.nav-container { max-width:var(--container-width); margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:0; font-family:var(--font-display); font-weight:900; font-size:1.45rem; color:var(--text-primary); text-decoration:none; letter-spacing:-0.03em; }
.logo-img { height: 26px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.2)); transform: translateY(1px); margin-right: 6px; }
.nav-links { display:flex; list-style:none; gap:1.5rem; align-items:center; }
.nav-links a { color:var(--text-secondary); text-decoration:none; font-size:0.88rem; font-weight:500; transition:var(--transition-fast); letter-spacing:0.01em; }
.nav-links a:hover { color:var(--text-primary); }
.nav-links a.active { color:var(--accent-primary); }
.nav-cta { background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary))!important; color:#fff!important; padding:0.5rem 1.1rem; border-radius:var(--radius-md); }
.nav-cta:hover { opacity:0.9; transform:translateY(-1px); }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text-primary); font-size:1.7rem; cursor:pointer; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 1.75rem; border-radius:var(--radius-md); font-family:var(--font-sans); font-weight:600; font-size:0.95rem; text-decoration:none; cursor:pointer; transition:var(--transition-normal); border:none; }
.btn-primary { background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color:#fff; box-shadow:0 4px 20px var(--accent-glow); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 35px var(--accent-glow); }
.btn-secondary { background:transparent; color:var(--text-primary); border:1px solid var(--glass-border); }
.btn-secondary:hover { background:rgba(255,255,255,0.06); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-color); }
.btn-ghost:hover { color:var(--text-primary); border-color:var(--glass-border); }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-container { display:grid; grid-template-columns:1.2fr 0.8fr; gap:4rem; align-items:center; width:100%; }
.hero-text { position:relative; z-index:10; }

.hero-visual { position:relative; min-height:600px; display:flex; justify-content:center; align-items:center; width:100%; }
.pure-code-display { 
  width:100%; 
  max-width:600px; 
  background:transparent; 
  padding:1rem; 
  z-index:2;
}
.pure-code-display pre { 
  font-family:'Fira Code', monospace; 
  font-size:0.95rem; 
  line-height:1.7; 
  color:var(--text-secondary);
  text-shadow:0 0 20px rgba(80,140,255,0.1); 
}
.pure-code-display code { background:none; padding:0; }

/* Hero Badge */
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(80,140,255,0.08); border:1px solid rgba(80,140,255,0.2); padding:0.5rem 1.1rem; border-radius:50px; font-size:0.85rem; font-weight:600; color:var(--accent-primary); margin-bottom:1.5rem; letter-spacing:0.02em; }
.hero-badge i { font-size:1rem; }

.greeting { color:var(--accent-primary); font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom:1rem; letter-spacing:0.04em; }
.main-title { font-size:clamp(2.8rem,5.5vw,5rem); margin-bottom:0.75rem; font-weight:900; letter-spacing:-0.03em; }
.tagline { font-size:1.15rem; color:var(--accent-tertiary); margin-bottom:1.25rem; font-family:var(--font-display); font-weight:600; letter-spacing:0.02em; }
.hero-desc { font-size:1.1rem; color:var(--text-secondary); max-width:640px; margin-bottom:2rem; }
.hero-stats { display:flex; gap:2.5rem; margin-bottom:2.5rem; }
.hstat { display:flex; flex-direction:column; }
.hstat-num { font-family:var(--font-display); font-size:2rem; font-weight:900; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.hstat-label { font-size:0.8rem; color:var(--text-muted); margin-top:0.25rem; text-transform:uppercase; letter-spacing:0.05em; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Section Header */
.section-header { display:flex; align-items:center; gap:1.5rem; margin-bottom:3rem; }
.section-header h2 { font-size:2rem; display:flex; align-items:baseline; gap:0.75rem; }
.section-header .line { flex:1; height:1px; background:linear-gradient(to right, var(--border-color), transparent); max-width:400px; }

/* About */
.about-grid { display:grid; grid-template-columns:3fr 2fr; gap:4rem; align-items:start; }
.about-text p { color:var(--text-secondary); margin-bottom:1.25rem; font-size:1.05rem; }
.about-tags { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem; }
.tag { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,0.04); border:1px solid var(--border-color); padding:0.4rem 0.9rem; border-radius:50px; font-size:0.85rem; color:var(--text-secondary); transition:var(--transition-fast); }
.tag:hover { border-color:var(--accent-primary); color:var(--accent-primary); }
.about-stats { display:grid; gap:1.25rem; }
.stat-card { background:var(--bg-card); border:1px solid var(--border-color); padding:1.5rem; border-radius:var(--radius-lg); transition:var(--transition-normal); }
.stat-card:hover { border-color:var(--glass-border); transform:translateY(-4px); }
.stat-icon { width:44px; height:44px; background:rgba(80,140,255,0.1); border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--accent-primary); font-size:1.3rem; margin-bottom:1rem; }
.stat-card h3 { color:var(--accent-primary); margin-bottom:0.5rem; font-size:1rem; }
.stat-card p { color:var(--text-secondary); font-size:0.9rem; }

/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.75rem; }
.skill-category { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; transition:var(--transition-normal); }
.skill-category:hover { border-color:var(--glass-border); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.category-icon { width:52px; height:52px; background:rgba(80,140,255,0.1); border-radius:var(--radius-md); display:grid; place-items:center; color:var(--accent-primary); font-size:1.6rem; margin-bottom:1.5rem; }
.skill-category h3 { margin-bottom:1.5rem; font-size:1.2rem; }
.skill-list { list-style:none; }
.skill-list li { color:var(--text-secondary); margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; }
.skill-list li::before { content:"▹"; color:var(--accent-primary); flex-shrink:0; }

/* Projects Grid */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.75rem; }
.project-card-new { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; display:flex; flex-direction:column; gap:1rem; transition:var(--transition-normal); animation-delay:var(--delay,0s); }
.project-card-new:hover { border-color:rgba(80,140,255,0.35); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(80,140,255,0.1); }
.pc-icon, .fc-icon { width:52px; height:52px; background:linear-gradient(135deg, rgba(80,140,255,0.15), rgba(160,90,255,0.15)); border-radius:var(--radius-md); display:grid; place-items:center; font-size:1.6rem; color:var(--accent-primary); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
.feature-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; transition:var(--transition-normal); }
.feature-card:hover { border-color:var(--glass-border); transform:translateY(-6px); }
.feature-card h3 { margin:1.25rem 0 0.75rem; font-size:1.2rem; }
.feature-card p { color:var(--text-secondary); font-size:0.95rem; line-height:1.6; }
.pc-label { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent-secondary); }
.pc-title { font-size:1.3rem; font-weight:800; }
.pc-desc { color:var(--text-secondary); font-size:0.93rem; flex:1; }
.pc-tech { display:flex; flex-wrap:wrap; gap:0.5rem; list-style:none; }
.pc-tech li { background:rgba(255,255,255,0.04); border:1px solid var(--border-color); padding:0.25rem 0.75rem; border-radius:50px; font-size:0.78rem; color:var(--text-muted); }
.pc-links { display:flex; gap:1.25rem; padding-top:0.5rem; border-top:1px solid var(--border-color); }
.pc-links a { color:var(--text-secondary); text-decoration:none; display:flex; align-items:center; gap:0.4rem; font-size:0.88rem; font-weight:600; transition:var(--transition-fast); }
.pc-links a:hover { color:var(--accent-primary); }

/* Services Strip */
.services-strip { background:var(--bg-secondary); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
.strip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.strip-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:0.75rem; transition:var(--transition-normal); position:relative; overflow:hidden; }
.strip-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(80,140,255,0.05), rgba(160,90,255,0.05)); opacity:0; transition:var(--transition-normal); }
.strip-card:hover { border-color:rgba(80,140,255,0.35); transform:translateY(-6px); }
.strip-card:hover::before { opacity:1; }
.strip-card > i { font-size:2rem; color:var(--accent-primary); }
.strip-card h3 { font-size:1.1rem; font-weight:800; }
.strip-card p { color:var(--text-secondary); font-size:0.9rem; flex:1; }
.strip-arrow { align-self:flex-end; color:var(--accent-primary); font-size:1.2rem; transition:var(--transition-fast); }
.strip-card:hover .strip-arrow { transform:translateX(4px); }

/* Contact */
.contact-wrapper { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; }
.contact-heading { font-size:2.2rem; margin-bottom:1.25rem; }
.contact-info p { color:var(--text-secondary); margin-bottom:2rem; font-size:1.05rem; }
/* Social Links Unified */
.footer-social-grid, .social-links { display:flex !important; gap:1.2rem !important; flex-wrap:nowrap !important; align-items:center !important; }
.social-link { 
  width:48px !important; height:48px !important; border-radius:12px !important; background:rgba(255,255,255,0.03) !important; 
  border:1px solid var(--border-color) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:var(--text-secondary) !important; font-size:1.5rem !important; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 
  text-decoration:none !important; outline:none !important; -webkit-tap-highlight-color: transparent !important;
}
.social-link i { line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; }
.social-link:hover, .social-link:focus { 
  color:var(--accent-primary); background:rgba(80,140,255,0.1); 
  border-color:var(--accent-primary); transform:translateY(-4px); 
  box-shadow: 0 10px 20px rgba(80,140,255,0.25), 0 0 15px rgba(80,140,255,0.2); 
}
.social-link:active { transform:scale(0.95); }
.glass-panel { background:var(--glass-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:2.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; margin-bottom:0.5rem; font-size:0.88rem; font-weight:600; color:var(--text-secondary); letter-spacing:0.03em; }
.form-group input, .form-group textarea { width:100%; background:rgba(0,0,0,0.25); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:0.9rem 1rem; color:var(--text-primary); font-family:var(--font-sans); font-size:0.95rem; transition:var(--transition-fast); }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--accent-primary); background:rgba(0,0,0,0.4); box-shadow:0 0 0 3px rgba(80,140,255,0.1); }
.form-group textarea { resize:vertical; min-height:130px; }
.submit-btn { width:100%; margin-top:0.5rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; }
.contact-info { padding-right:2rem; }
.contact-heading { font-size:2.8rem; font-weight:900; margin-bottom:1.5rem; line-height:1.1; }
.contact-text { color:var(--text-secondary); margin-bottom:2.5rem; font-size:1.1rem; line-height:1.6; }
.contact-methods { display:grid; gap:1.5rem; }
.contact-method { display:flex; align-items:center; gap:1.25rem; text-decoration:none; color:inherit; background:var(--bg-card); border:1px solid var(--border-color); padding:1.25rem; border-radius:var(--radius-lg); transition:var(--transition-normal); }
.contact-method:hover { border-color:var(--accent-primary); transform:translateX(8px); }
.cm-icon { width:52px; height:52px; background:rgba(80,140,255,0.1); border-radius:var(--radius-md); display:grid; place-items:center; color:var(--accent-primary); font-size:1.6rem; }
.contact-method h4 { font-size:0.85rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem; }
.contact-method p { font-weight:700; font-size:1.05rem; }
.contact-form-container { background:var(--bg-card); border:1px solid var(--border-color); padding:3rem; border-radius:var(--radius-xl); box-shadow:var(--glass-shadow); }

.btn-loader { width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-radius:50%; border-top-color:#fff; animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none!important; }

/* Neural Sync Agent Widget */
.chat-widget { position: fixed; bottom: 30px; right: 30px; z-index: 1000; font-family: var(--font-sans); padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: none; color: #fff; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(80, 140, 255, 0.4); position: relative; transition: var(--transition-normal); }
.chat-toggle i { transition: var(--transition-normal); }
.chat-toggle:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 15px 40px rgba(80, 140, 255, 0.6); }
.chat-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-primary); animation: chatPulse 2s infinite; }
@keyframes chatPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }

.chat-window { position: absolute; bottom: 80px; right: 0; width: 360px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.6); overflow: hidden; display: flex; flex-direction: column; animation: slideInUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
@keyframes slideInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.chat-header { background: rgba(255,255,255,0.03); padding: 1.25rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.chat-header-info { display: flex; align-items: center; gap: 0.75rem; }
.chat-avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-primary); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 0.9rem; }
.chat-header-info h4 { font-size: 1rem; font-weight: 700; margin: 0; }
.chat-status { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 10px #00ff88; }
.chat-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; transition: var(--transition-fast); }
.chat-close:hover { color: #fff; }

.chat-body { flex: 1; padding: 1.25rem; overflow-y: auto; max-height: 400px; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: none; }
.chat-body::-webkit-scrollbar { display: none; }
.chat-message { max-width: 85%; padding: 0.85rem 1.1rem; border-radius: 18px; font-size: 0.93rem; line-height: 1.5; }
.chat-message.agent { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); border-bottom-left-radius: 4px; color: var(--text-primary); }
.chat-message.user { align-self: flex-end; background: var(--accent-primary); border-bottom-right-radius: 4px; color: #fff; }
.chat-message p { margin: 0; }

.chat-suggestions { padding: 0.5rem 1.25rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.suggestion-btn { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: 50px; font-size: 0.8rem; cursor: pointer; transition: var(--transition-fast); }
.suggestion-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(80,140,255,0.05); }

.chat-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border-color); display: flex; gap: 0.75rem; }
.chat-footer input { flex: 1; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 50px; padding: 0.6rem 1.25rem; color: #fff; font-size: 0.9rem; outline: none; transition: var(--transition-fast); }
.chat-footer input:focus { border-color: var(--accent-primary); }
.chat-footer button { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-primary); border: none; color: #fff; cursor: pointer; transition: var(--transition-fast); display: grid; place-items: center; }
.chat-footer button:hover { transform: scale(1.1); background: var(--accent-secondary); }

@media (max-width: 480px) {
    .chat-widget { bottom: 20px; right: 20px; }
    .chat-window { position: fixed; inset: 0; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 0; animation: none; }
    .chat-window.hidden { display: none; }
    .chat-toggle { width: 50px; height: 50px; }
}
.form-status { margin-top:1rem; padding:1rem; border-radius:var(--radius-md); font-size:0.9rem; text-align:center; }
.status-success { background:rgba(16,185,129,0.1); color:#10b981; border:1px solid rgba(16,185,129,0.2); }
.status-error { background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.2); }

/* Footer */
.site-footer { background:rgba(8,8,16,0.5); border-top:1px solid var(--border-color); padding:5rem 0 2rem; position:relative; overflow:hidden; }
.site-footer::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:1px; background:linear-gradient(to right, transparent, var(--accent-primary), transparent); opacity:0.3; }

.footer-main { display:grid; grid-template-columns:1fr 2fr; gap:4rem; margin-bottom:4rem; }
.footer-brand { max-width:320px; }
.footer-logo { font-size:1.8rem; font-family:var(--font-display); font-weight:900; display:flex; align-items:center; gap:0.4rem; margin-bottom:1rem; }
.footer-logo .logo-icon-text { color:var(--accent-primary); }
.footer-tag { color:var(--text-secondary); font-size:0.95rem; line-height:1.6; }

/* Footer Additions */
.footer-status { display:inline-flex; align-items:center; gap:0.6rem; margin-top:1.5rem; padding:0.5rem 1rem; background:rgba(16,185,129,0.05); border:1px solid rgba(16,185,129,0.15); border-radius:50px; }
.status-dot { width:8px; height:8px; background:#10b981; border-radius:50%; box-shadow:0 0 10px #10b981; animation:pulse 2s infinite; }
.footer-status-text { color:#10b981; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }

.footer-newsletter { margin-top:2.5rem; }
.footer-newsletter h4 { font-size:0.9rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-primary); margin-bottom:1rem; }
.newsletter-form { display:flex; gap:0.5rem; }
.newsletter-input { flex:1; background:rgba(0,0,0,0.3); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:0.8rem 1rem; color:#fff; font-size:0.9rem; outline:none; transition:var(--transition-fast); }
.newsletter-input:focus { border-color:var(--accent-primary); box-shadow:0 0 15px var(--accent-glow); }
.newsletter-btn { background:var(--accent-primary); border:none; border-radius:var(--radius-sm); width:45px; display:flex; justify-content:center; align-items:center; color:#fff; cursor:pointer; transition:var(--transition-fast); }
.newsletter-btn:hover { background:var(--accent-secondary); transform:translateY(-2px); }

@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(16,185,129,0.4); } 70% { box-shadow:0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow:0 0 0 0 rgba(16,185,129,0); } }

.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer-col h4 { font-size:0.9rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:1.5rem; }
.footer-col a { display:block; color:var(--text-secondary); text-decoration:none; margin-bottom:0.75rem; font-size:0.92rem; transition:var(--transition-fast); }
.footer-col a:hover { color:var(--text-primary); transform:translateX(4px); }

.footer-social-grid { display:flex; gap:1rem; }
.social-link:hover { background:var(--accent-primary); color:#fff!important; border-color:var(--accent-primary); transform:translateY(-4px); box-shadow:0 10px 20px var(--accent-glow); }

.footer-bottom { border-top:1px solid var(--border-color); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; color:var(--text-muted); font-size:0.85rem; }

.footer-email { 
  display: flex!important; 
  align-items: center; 
  gap: 0.5rem; 
  color: var(--text-primary)!important; 
  font-weight: 600; 
  margin-bottom: 1.5rem!important; 
  transition: var(--transition-fast);
}
.footer-email:hover { color: var(--accent-primary)!important; }
.footer-email i { color: var(--accent-primary); font-size: 1.1rem; }
.footer-motto { font-style:italic; opacity:0.6; }

@media (max-width:1024px) {
  .footer-main { grid-template-columns:1fr; gap:3rem; }
  .footer-nav { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .footer-nav { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
}

/* Animations */

/* Code DNA Section */
.code-dna { position:relative; overflow:hidden; }
.code-dna .container { position:relative; z-index:2; }
.code-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(450px, 1fr)); 
  gap:2.5rem; 
  margin-top:4rem; 
  perspective:2000px; /* Enable 3D space */
}

.code-window { 
  background:rgba(10, 11, 20, 0.7); 
  backdrop-filter:blur(24px); 
  border:1px solid rgba(255,255,255,0.1); 
  border-radius:16px; 
  overflow:hidden; 
  box-shadow:0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); 
  transition:transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease, box-shadow 0.3s ease; 
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}

/* 3D Gloss Shine Effect */
.code-window::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,0.08), transparent 50%);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}

.code-window:hover { 
  border-color:rgba(80,140,255,0.5); 
  box-shadow:0 40px 80px rgba(0,0,0,0.7), 0 0 20px rgba(80,140,255,0.1); 
}
.code-window:hover::after { opacity:1; }

.window-header { 
  background:rgba(255,255,255,0.03); 
  padding:0.75rem 1.25rem; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  border-bottom:1px solid rgba(255,255,255,0.06); 
  transform:translateZ(20px); /* Lift header in 3D */
}
.window-controls { display:flex; gap:8px; }
.control { width:12px; height:12px; border-radius:50%; }
.close { background:#ff5f56; }
.minimize { background:#ffbd2e; }
.maximize { background:#27c93f; }
.window-title { font-size:0.75rem; color:var(--text-muted); font-family:monospace; letter-spacing:0.05em; }

.code-content { 
  padding:1.5rem; 
  font-family:'Fira Code', monospace; 
  font-size:0.9rem; 
  line-height:1.6; 
  overflow-x:auto; 
  transform:translateZ(10px); /* Lift code in 3D */
}
.code-content pre { margin:0; }

/* Syntax Colors (Extreme Level) */
.c-keyword { color:#c678dd; } /* purple */
.c-func { color:#61afef; }    /* blue */
.c-string { color:#98c379; }  /* green */
.c-comment { color:#5c6370; font-style:italic; }
.c-attr { color:#d19a66; }    /* orange */
.c-type { color:#e5c07b; }    /* yellow */
.c-const { color:#56b6c2; }   /* cyan */

.aurora-glow {
  position:absolute; width:400px; height:400px; 
  background:radial-gradient(circle, var(--glow-color), transparent 70%);
  filter:blur(80px); opacity:0.15; pointer-events:none; z-index:1;
  animation:auroraPulse 10s infinite alternate ease-in-out;
}
@keyframes auroraPulse { 0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.3) translate(50px, -30px);} }

/* Particle Emitter System */
#particle-container {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
}
.particle {
  position:absolute;
  width:16px;
  height:16px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(4px);
  border-radius:4px;
  pointer-events:none;
  transform-style:preserve-3d;
  box-shadow:0 10px 20px rgba(0,0,0,0.3);
  will-change:transform, opacity;
}

/* Animations */
.fade-in { opacity:0; transition:opacity 0.8s ease-out; }
.fade-in.visible { opacity:1; }
.fade-in-up { opacity:0; transform:translateY(32px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; transition-delay:var(--delay,0s); }
.fade-in-up.visible { opacity:1; transform:translateY(0); }

/* Page Hero (sub-pages) */
.page-hero { padding:9rem 0 5rem; text-align:center; }
.page-hero .hero-badge { margin:0 auto 1.5rem; }
.page-hero h1 { font-size:clamp(2.2rem,4.5vw,3.8rem); margin-bottom:1rem; }
.page-hero p { font-size:1.1rem; color:var(--text-secondary); max-width:640px; margin:0 auto 2rem; }

/* Feature Cards */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.75rem; }
.feature-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; transition:var(--transition-normal); }
.feature-card:hover { border-color:rgba(80,140,255,0.3); transform:translateY(-6px); }
.feature-card .fc-icon { width:56px; height:56px; background:linear-gradient(135deg,rgba(80,140,255,0.15),rgba(160,90,255,0.15)); border-radius:var(--radius-md); display:grid; place-items:center; font-size:1.8rem; color:var(--accent-primary); margin-bottom:1.25rem; }
.feature-card h3 { font-size:1.15rem; margin-bottom:0.75rem; }
.feature-card p { color:var(--text-secondary); font-size:0.93rem; }

/* Process Steps */
.process-list { display:grid; gap:1.5rem; counter-reset:step; }
.process-step { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem 2rem 2rem 5rem; position:relative; transition:var(--transition-normal); counter-increment:step; }
.process-step::before { content:counter(step, decimal-leading-zero); position:absolute; left:1.5rem; top:1.75rem; font-family:var(--font-display); font-size:2rem; font-weight:900; background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.process-step:hover { border-color:rgba(80,140,255,0.3); transform:translateX(6px); }
.process-step h3 { font-size:1.1rem; margin-bottom:0.5rem; }
.process-step p { color:var(--text-secondary); font-size:0.93rem; }

/* Testimonial */
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.75rem; }
.testimonial-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; }
.testimonial-card .quote { color:var(--text-secondary); font-size:0.95rem; font-style:italic; margin-bottom:1.25rem; }
.testimonial-card .author { display:flex; align-items:center; gap:0.75rem; }
.author-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff; }
.author-name { font-weight:700; font-size:0.95rem; }
.author-title { color:var(--text-muted); font-size:0.82rem; }

/* Menu Overlay */
.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity 0.5s ease; z-index:998; }
.menu-overlay.active { opacity:1; pointer-events:auto; }

/* Back to Top */
.back-to-top { 
  position:fixed; 
  bottom:2rem; 
  left:2rem; 
  width:50px; 
  height:50px; 
  background:var(--accent-primary); 
  color:#fff; 
  border-radius:12px; 
  display:grid; 
  place-items:center; 
  font-size:1.5rem; 
  cursor:pointer; 
  opacity:0; 
  visibility:hidden; 
  transform:translateY(20px); 
  transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  z-index:900; 
  box-shadow:0 10px 20px var(--accent-glow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.back-to-top.active { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-5px); background:var(--accent-secondary); }

/* Responsive */
@media (max-width:1024px) {
  .hero-container { grid-template-columns:1fr; text-align:center; gap:3rem; }
  .hero-desc { margin-left:auto; margin-right:auto; }
  .hero-stats { justify-content:center; }
  .hero-actions { justify-content:center; }
  .hero-visual { min-height:auto; }
  .pure-code-display { max-width:100%; }
  
  .about-grid, .contact-wrapper, .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .contact-info { padding-right:0; }
  .contact-heading { font-size:2.2rem; }
}
@media (max-width:768px) {
  .nav-links { 
    display:flex; 
    flex-direction:column; 
    position:fixed; 
    top:0; right:-100%; 
    width:70%; height:100vh; 
    background:rgba(10, 11, 20, 0.98); 
    backdrop-filter:blur(30px); 
    -webkit-backdrop-filter:blur(30px);
    padding:5rem 2.5rem; 
    gap:1.2rem; 
    transition:right 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    z-index:999;
    box-shadow:-15px 0 50px rgba(0,0,0,0.8);
    align-items: flex-start;
  }
  .nav-links.open { right:0; }
  
  .nav-links a { 
    font-size:1.35rem; 
    font-weight:700; 
    font-family:var(--font-display);
    color:var(--text-primary); 
    width:100%; 
    padding:0.4rem 0;
    opacity:0;
    transform:translateX(30px);
    transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .nav-links.open a { opacity:1; transform:translateX(0); }
  .nav-links.open a:nth-child(1) { transition-delay: 0.1s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.15s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.2s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.25s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.3s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.35s; }
  .nav-links.open a:nth-child(7) { transition-delay: 0.4s; }
  .nav-links.open .nav-cta { transition-delay: 0.45s; }

  .nav-links a:hover { color:var(--accent-primary); padding-left:0.5rem; }
  
  .nav-cta { 
    width:100%; 
    text-align:center; 
    margin-top:1.5rem; 
    padding:1rem!important; 
    font-size:1rem!important; 
    opacity:0;
    transform:translateY(20px);
    transition:all 0.5s ease;
  }
  .nav-links.open .nav-cta { opacity:1; transform:translateY(0); }
  
  .mobile-menu-btn { display:block; position:relative; z-index:1001; background:rgba(255,255,255,0.05); width:44px; height:44px; border-radius:10px; display:grid; place-items:center; border:1px solid rgba(255,255,255,0.1); }
  
  .main-title { font-size:2.2rem; }
  .hero-stats { gap:1.5rem; }
  .section-padding { padding:6rem 0 3rem; } /* Increased top padding to clear navbar */
  .footer-content { flex-direction:column; align-items:flex-start; }
  .projects-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .pure-code-display pre { 
    font-size:0.75rem; 
    line-height:1.5; 
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
  }
  .contact-form-container { padding:1.75rem; }
  .page-hero { padding:7rem 0 3rem; }
  .page-hero h1 { font-size:1.8rem; }
  .strip-grid { grid-template-columns:1fr; }
  
  /* Prevent header overlap */
  section { scroll-margin-top: 80px; }
}

/* Small Mobile */
@media (max-width:480px) {
  .container { padding:0 1.25rem; }
  .main-title { font-size:1.8rem; }
  .hero-stats { flex-direction:column; gap:1rem; align-items:center; }
  .hero-actions { flex-direction:column; width:100%; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .section-header { flex-direction:column; align-items:flex-start; gap:0.75rem; }
  .section-header h2 { font-size:1.5rem; }
  .contact-heading { font-size:1.6rem; }
  .contact-form-container { padding:1.25rem; }
  .process-step { padding:1.5rem 1.5rem 1.5rem 4rem; }
  .process-step::before { left:1rem; font-size:1.5rem; }
  .skill-category { padding:1.5rem; }
  .feature-card { padding:1.5rem; }
  .about-tags { justify-content:center; }
  .footer-main { gap:2rem; }
}

/* iOS-specific touch & safe area */
@supports (-webkit-touch-callout: none) {
  body { -webkit-text-size-adjust: 100%; }
  .btn { -webkit-tap-highlight-color: transparent; }
  .chat-widget { bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  .back-to-top { bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}