/* =====================================================
   ULTRA-PROFESSIONAL PORTFOLIO — DESIGN SYSTEM
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ===== DESIGN TOKENS ===== */
:root {
  --accent:        #f43f5e;
  --accent-glow:   rgba(244,63,94,0.25);
  --bg:            #04020f;
  --bg-2:          #070516;
  --border:        rgba(255,255,255,0.07);
  --border-2:      rgba(255,255,255,0.14);
  --border-accent: rgba(124,58,237,0.4);
  --ease:          cubic-bezier(0.16,1,0.3,1);
  --ease-fast:     cubic-bezier(0.4,0,0.2,1);
  --font-body:     'Inter', sans-serif;
  --font-head:     'Space Grotesk', sans-serif;
  --gold:          #f59e0b;
  --nav-bg:        rgba(4,2,15,0.80);
  --primary:       #7c3aed;
  --primary-glow:  rgba(124,58,237,0.35);
  --primary-light: #a855f7;
  --radius-full:   9999px;
  --radius-lg:     32px;
  --radius-md:     20px;
  --radius-sm:     12px;
  --radius-xl:     48px;
  --secondary:     #06b6d4;
  --secondary-glow:rgba(6,182,212,0.25);
  --surface:       rgba(255,255,255,0.03);
  --surface-2:     rgba(255,255,255,0.06);
  --surface-3:     rgba(255,255,255,0.10);
  --t-fast:        0.2s;
  --t-med:         0.4s;
  --t-slow:        0.7s;
  --text:          #f8fafc;
  --text-faint:    #475569;
  --text-muted:    #94a3b8;
}

/* Light mode */
html[data-theme="light"] {
  --bg:            #f4f4f8;
  --bg-2:          #ededf4;
  --border:        rgba(0,0,0,0.07);
  --border-2:      rgba(0,0,0,0.13);
  --nav-bg:        rgba(244,244,248,0.85);
  --primary:       #6d28d9;
  --primary-glow:  rgba(109,40,217,0.15);
  --primary-light: #7c3aed;
  --secondary:     #0891b2;
  --secondary-glow:rgba(8,145,178,0.15);
  --surface:       rgba(0,0,0,0.03);
  --surface-2:     rgba(0,0,0,0.06);
  --surface-3:     rgba(0,0,0,0.09);
  --text:          #0f0a2a;
  --text-faint:    #9ca3af;
  --text-muted:    #6b7280;
}

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

html {
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body { 
  line-height:1.65; 
  min-height:100vh; 
}
ul   { 
  list-style:none; 
}
a    { 
  color:inherit; 
  display:inline-block; 
  text-decoration:none; 
}
button { 
  background:none; 
  border:none; 
  cursor:pointer; 
  font-family:inherit; 
}
img  { 
  display:block; 
  max-width:100%; 
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { 
  width:5px; 
}
::-webkit-scrollbar-track { 
  background: var(--bg); 
}
::-webkit-scrollbar-thumb { 
  background: var(--primary); 
  border-radius:99px; 
}

/* ===== BACKGROUND ===== */
.bg-wrapper {
  background: var(--bg); 
  inset:0; 
  overflow:hidden;
  position:fixed; 
  z-index:-10;
}

.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  inset:0; 
  opacity:0.03;
  pointer-events:none;
  position:absolute; 
  z-index:3;
}

.grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 20%, black 40%, transparent 100%);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  inset:0; 
  mask-image: radial-gradient(ellipse 80% 80% at 50% 20%, black 40%, transparent 100%);
  position:absolute; 
  z-index:1;
}

.mesh-gradient {
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(124,58,237,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 85% 75%, rgba(6,182,212,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 45%, rgba(244,63,94,0.07) 0%, transparent 60%);
  filter:blur(60px);
  inset:0; 
  position:absolute; 
  z-index:2;
}

.orb {
  animation: orbFloat 25s infinite alternate ease-in-out;
  border-radius:50%; 
  filter:blur(120px);
  opacity:0.45; 
  pointer-events:none;
  position:absolute; 
  z-index:2; 
}
.orb-1 { 
  background:var(--primary);   
  height:700px; 
  left:-200px; 
  top:-200px; 
  width:700px; 
}
.orb-2 { 
  animation-delay:-8s; 
  background:var(--secondary);  
  bottom:-100px; 
  height:500px; 
  right:-100px; 
  width:500px; 
}
.orb-3 { 
  animation-delay:-16s; 
  background:var(--accent);     
  height:350px; 
  left:55%; 
  top:35%; 
  width:350px; 
}

@keyframes orbFloat {
  0%   { 
    transform:translate(0,0) scale(1); 
  }
  100% { 
    transform:translate(80px,60px) scale(1.15); 
  }
}

/* ===== GLASS UTILITY ===== */
.glass {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow:hidden;
  position:relative; 
}
.glass::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  content:'';
  inset:0; 
  pointer-events:none; 
  position:absolute; 
  z-index:0;
}

/* ===== SPOT GLOW ON CARDS ===== */
.glow-card {
  overflow:hidden;
  position:relative; 
}
.glow-card::before {
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--primary-glow) 0%, transparent 55%);
  content:'';
  inset:0; 
  opacity:0; 
  pointer-events:none; 
  position:absolute; 
  transition:opacity var(--t-med) var(--ease-fast);
  z-index:0; 
}
.glow-card:hover::before { 
  opacity:1; 
}

/* ===== NAVIGATION ===== */
.navbar {
  -webkit-backdrop-filter:blur(20px);
  align-items:center; 
  backdrop-filter:blur(20px); 
  background: var(--nav-bg);
  border:1px solid var(--border-2);
  border-radius:var(--radius-full);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  display:flex; 
  justify-content:space-between; 
  left:50%; 
  max-width:1260px;
  padding:14px 32px;
  position:fixed; 
  top:20px; 
  transform:translateX(-50%);
  transition: all var(--t-med) var(--ease);
  width:92%; 
  z-index:10000;
}

.navbar.scrolled {
  background: rgba(4,2,15,0.95);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  padding:12px 28px;
  top:12px; 
}

html[data-theme="light"] .navbar.scrolled { 
  background: rgba(244,244,248,0.97); 
}

.logo {
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary-light) 100%);
  background-clip:text;
  font-family: var(--font-head);
  font-size:1.45rem; 
  font-weight:700;
  letter-spacing:-0.04em;
}

.logo-dot { 
  -webkit-text-fill-color:var(--primary); 
  color:var(--primary); 
}

.nav-links { 
  display:flex; 
  gap:4px; 
}
.nav-links a {
  border-radius:var(--radius-full);
  color:var(--text-muted);
  font-size:0.875rem; 
  font-weight:500;
  padding:8px 16px; 
  transition: color var(--t-fast) var(--ease-fast), background var(--t-fast) var(--ease-fast);
}
.nav-links a:hover { 
  background:var(--surface-2); 
  color:var(--text); 
}

.nav-right { 
  align-items:center; 
  display:flex; 
  gap:10px; 
}

.nav-icon-btn, .theme-toggle {
  align-items:center; 
  background:var(--surface-2); 
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text);
  display:flex; 
  height:38px; 
  justify-content:center;
  transition: all var(--t-fast) var(--ease-fast);
  width:38px; 
}
.nav-icon-btn:hover { 
  background:var(--surface-3); 
  border-color:var(--border-2); 
  transform:scale(1.08); 
}
.theme-toggle:hover { 
  background:var(--surface-3); 
  transform:rotate(20deg); 
}
.material-symbols-outlined { 
  font-size:20px; 
}

/* CTA button in nav */
.btn-nav-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:var(--radius-full);
  box-shadow: 0 4px 16px var(--primary-glow);
  color:#fff; 
  font-size:0.875rem; 
  font-weight:600;
  padding:9px 22px;
  transition: all var(--t-fast) var(--ease-fast);
}
.btn-nav-cta:hover { 
  box-shadow: 0 8px 24px var(--primary-glow); 
  transform:translateY(-2px); 
}

/* ===== SEARCH OVERLAY ===== */
.search-overlay {
  -webkit-backdrop-filter:blur(16px);
  align-items:center; 
  backdrop-filter:blur(16px); 
  background:rgba(4,2,15,0.92);
  display:flex; 
  inset:0; 
  justify-content:center;
  opacity:0; 
  pointer-events:none;
  position:fixed; 
  transition: opacity var(--t-med) var(--ease-fast);
  z-index:500000;
}
.search-overlay.active { 
  opacity:1; 
  pointer-events:all; 
}

.close-search {
  color:var(--text-muted); 
  position:absolute; 
  right:28px;
  top:28px; 
  transition: all var(--t-fast) var(--ease-fast);
}
.close-search:hover { 
  color:var(--text); 
  transform:rotate(90deg); 
}

.search-content { 
  display:flex; 
  justify-content:center; 
  padding:0 24px; 
  width:100%; 
}
.search-inner {
  align-items:center; 
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  display:flex; 
  gap:16px;
  max-width:620px;
  padding:16px 28px;
  transform:scale(0.94) translateY(12px);
  transition: transform var(--t-med) var(--ease);
  width:100%; 
}
.search-overlay.active .search-inner { 
  transform:scale(1) translateY(0); 
}

.search-icon-main { 
  color:var(--primary); 
  font-size:1.4rem; 
}

#searchInput {
  background:none; 
  border:none;
  color:var(--text); 
  flex:1; 
  font-family:inherit;
  font-size:1.1rem; 
  font-weight:500; 
}
#searchInput::placeholder { 
  color:var(--text-faint); 
}
#searchInput:focus { 
  outline:none; 
}

/* ===== HERO ===== */
.hero {
  align-items:center;
  display:flex; 
  flex-direction:column;
  justify-content:center; 
  min-height:100vh;
  padding:160px 5% 120px;
  position:relative;
  text-align:center; 
}

.hero-badge {
  align-items:center; 
  background:var(--surface-2);
  border:1px solid var(--border-accent);
  border-radius:var(--radius-full);
  color:var(--primary-light);
  display:inline-flex; 
  font-size:0.8rem; 
  font-weight:600;
  gap:8px;
  letter-spacing:0.04em; 
  margin-bottom:36px;
  opacity:0; 
  padding:8px 20px; 
  text-transform:uppercase;
  transform:translateY(16px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.hero-badge .dot {
  animation: pulseDot 2s infinite;
  background:var(--primary-light);
  border-radius:50%;
  height:7px; 
  width:7px; 
}
@keyframes pulseDot {
  0%,100% { 
    opacity:1; 
    transform:scale(1); 
  }
  50%      { 
    opacity:0.4; 
    transform:scale(0.7); 
  }
}
.hero.active .hero-badge { 
  opacity:1; 
  transform:translateY(0); 
}

.headline {
  font-family: var(--font-head);
  font-size: clamp(3.4rem, 11vw, 8rem);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.05;
  margin-bottom:28px;
  position:relative; 
  z-index:10;
}

.headline span {
  display:block;
  opacity:0; 
  padding-bottom:0.06em;
  transform:translateY(50px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.hero.active .headline span               { 
  opacity:1; 
  transform:translateY(0); 
}
.hero.active .headline span:nth-child(2) { 
  transition-delay:0.1s; 
}
.hero.active .headline span:nth-child(3) { 
  transition-delay:0.2s; 
}

.gradient-text {
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  background: linear-gradient(125deg, var(--primary-light) 0%, var(--secondary) 60%, var(--primary) 100%);
  background-clip:text;
}

.hero-desc {
  color:var(--text-muted);
  font-size:1.1rem; 
  line-height:1.75; 
  margin-bottom:52px;
  max-width:560px; 
  opacity:0; 
  transform:translateY(20px);
  transition: all var(--t-slow) var(--ease); 
  transition-delay:0.3s;
}
.hero.active .hero-desc { 
  opacity:1; 
  transform:translateY(0); 
}

.cta-group {
  display:flex; 
  flex-wrap:wrap; 
  gap:14px; 
  justify-content:center;
  opacity:0; 
  transform:translateY(20px);
  transition: all var(--t-slow) var(--ease); 
  transition-delay:0.45s;
}
.hero.active .cta-group { 
  opacity:1; 
  transform:translateY(0); 
}

/* ===== BUTTONS ===== */
.btn {
  align-items:center; 
  border-radius:var(--radius-full);
  display:inline-flex; 
  font-size:0.9rem;
  font-weight:600; 
  gap:10px;
  overflow:hidden;
  padding:14px 30px; 
  position:relative; 
  transition: all var(--t-med) var(--ease-fast);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 6px 28px var(--primary-glow);
  color:#fff;
}
.btn-primary::before {
  background:linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  content:''; 
  inset:0;
  opacity:0; 
  position:absolute; 
  transition:opacity var(--t-fast);
}
.btn-primary:hover { 
  box-shadow:0 14px 40px var(--primary-glow); 
  transform:translateY(-3px); 
}
.btn-primary:hover::before { 
  opacity:1; 
}
.btn-primary.success { 
  background:linear-gradient(135deg,#10b981,#059669); 
  box-shadow:0 6px 28px rgba(16,185,129,0.4); 
}

.btn-ghost {
  backdrop-filter:blur(10px);
  background:transparent;
  border:1px solid var(--border-2);
  color:var(--text);
}
.btn-ghost:hover { 
  background:var(--surface-2); 
  border-color:var(--border-accent); 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform:translateY(-2px); 
}

.btn-sm { 
  font-size:0.82rem; 
  padding:9px 20px; 
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mouse {
  width: 26px;
  height: 42px;
  border: 1.5px solid var(--text-muted);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  opacity: 0.7;
}
.wheel {
  width: 2px;
  height: 6px;
  background: var(--primary-light);
  border-radius: 2px;
  animation: scrollWheel 2s infinite ease-in-out;
}
@keyframes scrollWheel {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* ===== STATS BAR ===== */
.hero-stats {
  backdrop-filter:blur(20px);
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  display:flex; 
  gap:0; 
  margin-top:88px; 
  max-width:680px;
  opacity:0; 
  overflow:hidden;
  transform:translateY(24px);
  transition: all var(--t-slow) var(--ease); 
  transition-delay:0.55s;
  width:100%;
}
.hero.active .hero-stats { 
  opacity:1; 
  transform:translateY(0); 
}

.stat-item {
  border-right:1px solid var(--border);
  flex:1; 
  padding:28px 24px; 
  position:relative;
  text-align:center;
}
.stat-item:last-child { 
  border-right:none; 
}
.stat-item::after {
  background:var(--primary);
  bottom:0; 
  content:''; 
  height:2px; 
  left:50%;
  position:absolute; 
  transform:translateX(-50%);
  transition: width var(--t-med) var(--ease);
  width:0; 
}
.stat-item:hover::after { 
  width:100%; 
}

.stat-val {
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary-light) 100%);
  background-clip:text;
  display:block;
  font-family:var(--font-head);
  font-size:2.5rem; 
  font-weight:700; 
  letter-spacing:-0.03em;
  line-height:1; 
}
.stat-label {
  color:var(--text-muted);
  display:block;
  font-size:0.75rem; 
  letter-spacing:0.06em; 
  margin-top:8px; 
  text-transform:uppercase; 
}

/* ===== MARQUEE ===== */
.marquee-section {
  border-bottom:1px solid var(--border);
  border-top:1px solid var(--border); 
  overflow:hidden; 
  padding:40px 0; 
  position:relative;
}
.marquee-section::before, .marquee-section::after {
  bottom:0; 
  content:''; 
  position:absolute; 
  top:0; 
  width:160px; 
  z-index:2; 
}
.marquee-section::before { 
  background:linear-gradient(90deg, var(--bg), transparent); 
  left:0; 
}
.marquee-section::after  { 
  background:linear-gradient(-90deg, var(--bg), transparent); 
  right:0; 
}

.marquee-track {
  animation: marqueeScroll 35s linear infinite;
  display:flex; 
  gap:48px; 
  width:max-content;
}
.marquee-item {
  align-items:center; 
  color:var(--text-faint);
  display:flex; 
  font-size:1rem; 
  font-weight:600; 
  gap:12px;
  transition:color var(--t-fast);
  white-space:nowrap; 
}
.marquee-item:hover { 
  color:var(--text-muted); 
}
.marquee-item .material-symbols-outlined { 
  color:var(--primary); 
  font-size:1.2rem; 
}
.marquee-sep { 
  background:var(--border-2); 
  border-radius:50%; 
  height:4px; 
  width:4px; 
}

@keyframes marqueeScroll {
  0%   { 
    transform:translateX(0); 
  }
  100% { 
    transform:translateX(-50%); 
  }
}

/* ===== SECTIONS ===== */
section { 
  padding:120px 0; 
  position:relative; 
  scroll-margin-top:100px;
  z-index:1; 
}

.container {
  margin:0 auto; 
  max-width:1280px; 
  padding:0 5%;
}

.section-eyebrow {
  align-items:center; 
  color:var(--primary-light); 
  display:inline-flex; 
  font-size:0.75rem; 
  font-weight:700;
  gap:10px;
  letter-spacing:0.1em;
  margin-bottom:20px;
  text-transform:uppercase; 
}
.section-eyebrow::before {
  background:var(--primary);
  content:''; 
  height:1.5px; 
  width:24px; 
}

.section-title {
  font-family:var(--font-head);
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:700; 
  letter-spacing:-0.04em;
  line-height:1.1; 
  margin-bottom:56px;
}

.section-title em {
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  background:linear-gradient(125deg, var(--primary-light), var(--secondary));
  background-clip:text;
  font-style:normal;
}

/* ===== EXPERTISE CARDS ===== */
.expertise-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
}

.expertise-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:48px 40px;
  position:relative; 
  transition: all var(--t-med) var(--ease);
}
.expertise-card::before {
  background:linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  content:''; 
  inset:0; 
  pointer-events:none;
  position:absolute; 
}
.expertise-card:hover {
  border-color:var(--border-accent);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3), 0 0 0 1px var(--border-accent);
  transform:translateY(-6px);
}

.card-number {
  color:var(--border-2); 
  font-family: var(--font-head);
  font-size:5rem; 
  font-weight:700; 
  letter-spacing:-0.05em;
  line-height:1;
  position:absolute; 
  right:32px;
  top:24px; 
  transition:color var(--t-med);
}
.expertise-card:hover .card-number { 
  color:var(--primary-glow); 
}

.expertise-icon {
  align-items:center; 
  background:linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
  border:1px solid var(--border-accent);
  border-radius:var(--radius-md);
  display:flex; 
  height:56px; 
  justify-content:center;
  margin-bottom:28px;
  width:56px; 
}
.expertise-icon .material-symbols-outlined { 
  color:var(--primary-light); 
  font-size:26px; 
}

.expertise-card h3 {
  font-family:var(--font-head);
  font-size:1.4rem; 
  font-weight:700;
  letter-spacing:-0.02em; 
  margin-bottom:14px;
}
.expertise-card p { 
  color:var(--text-muted); 
  font-size:0.95rem; 
  line-height:1.7; 
}

.expertise-tags { 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
  margin-top:28px; 
}
.expertise-tag {
  background:var(--surface-2); 
  border:1px solid var(--border); 
  border-radius:var(--radius-full);
  color:var(--text-muted);
  font-size:0.72rem; 
  font-weight:600; 
  letter-spacing:0.05em;
  padding:5px 12px; 
  text-transform:uppercase; 
}

/* ===== SKILLS SECTION ===== */
.skills-layout {
  display:grid; 
  gap:24px; 
  grid-template-columns:1fr 1fr 1fr; 
}

.skill-column {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg); 
  padding:40px;
  transition:border-color var(--t-med);
}
.skill-column:hover { 
  border-color:var(--border-2); 
}

.skill-col-header {
  align-items:center; 
  display:flex; 
  gap:12px; 
  margin-bottom:36px;
}
.skill-col-dot {
  border-radius:50%;
  height:10px; 
  width:10px; 
}
.skill-col-title {
  color:var(--text-muted);
  font-family:var(--font-head);
  font-size:0.8rem; 
  font-weight:700;
  letter-spacing:0.1em; 
  text-transform:uppercase; 
}

.skill-item { 
  margin-bottom:28px; 
}
.skill-item:last-child { 
  margin-bottom:0; 
}

.skill-row {
  align-items:center; 
  display:flex; 
  justify-content:space-between; 
  margin-bottom:10px;
}
.skill-name {
  align-items:center; 
  color:var(--text);
  display:flex; 
  font-size:0.88rem; 
  font-weight:600; 
  gap:10px;
}
.skill-name .material-symbols-outlined { 
  color:var(--text-muted); 
  font-size:17px; 
}
.skill-pct { 
  color:var(--primary-light); 
  font-size:0.78rem; 
  font-weight:700; 
}

.progress-track {
  background:var(--surface-3);
  border-radius:99px; 
  height:4px; 
  overflow:hidden;
}
.progress-fill {
  border-radius:99px;
  height:100%; 
  transition: width 1.6s cubic-bezier(0.34,1.4,0.64,1);
  width:0; 
}
.progress-fill.col-1 { 
  background:linear-gradient(90deg, var(--primary), var(--primary-light)); 
}
.progress-fill.col-2 { 
  background:linear-gradient(90deg, var(--secondary), #38bdf8); 
}
.progress-fill.col-3 { 
  background:linear-gradient(90deg, var(--accent), #fb923c); 
}

/* ===== WORKS SECTION ===== */
.works-section { 
  background:var(--bg-2); 
}

.works-grid {
  display:grid;
  gap:20px;
  grid-template-columns:1.2fr 0.8fr;
  grid-template-rows:auto auto;
}

.work-card {
  border:1px solid var(--border);
  border-radius:var(--radius-lg); 
  cursor:pointer;
  overflow:hidden;
  position:relative; 
  transition: all var(--t-med) var(--ease);
}
.work-card:hover { 
  border-color:var(--border-2); 
  transform:scale(1.012); 
}
.work-card:hover .work-img { 
  transform:scale(1.06); 
}
.work-card:nth-child(1) { 
  grid-row:span 2; 
  min-height:560px; 
}
.work-card:nth-child(2), .work-card:nth-child(3) { 
  min-height:268px; 
}

.work-img {
  filter:brightness(0.5);
  height:100%;
  inset:0; 
  object-fit:cover; 
  position:absolute; 
  transition:transform 0.8s var(--ease);
  width:100%; 
}
.work-img.contain-img {
  object-fit:contain;
  background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 70%), var(--bg);
  padding: 40px;
  filter: brightness(1) drop-shadow(0 0 20px rgba(6,182,212,0.3));
}
.work-card:hover .work-img { 
  filter:brightness(0.65); 
}
.work-card:hover .contain-img {
  filter: brightness(1.1) drop-shadow(0 0 30px rgba(6,182,212,0.5)) scale(1.05);
}

.work-overlay {
  background:linear-gradient(to top, rgba(4,2,15,0.95) 0%, rgba(4,2,15,0.3) 50%, transparent 100%);
  inset:0;
  position:absolute; 
  z-index:1;
}

.work-info {
  bottom:0; 
  color: #f8fafc; /* Forces readable white text against dark overlay even in light mode */
  left:0; 
  padding:32px; 
  position:absolute; 
  right:0;
  z-index:2;
}
.work-cat {
  background:rgba(124,58,237,0.15); 
  border:1px solid rgba(124,58,237,0.3);
  border-radius:var(--radius-full);
  color:var(--primary-light); 
  display:inline-block;
  font-size:0.7rem; 
  font-weight:700; 
  letter-spacing:0.08em;
  margin-bottom:10px;
  padding:4px 12px; 
  text-transform:uppercase; 
}
.work-title {
  font-family:var(--font-head);
  font-size:1.4rem; 
  font-weight:700; 
  letter-spacing:-0.02em;
  line-height:1.25;
}
.work-card:nth-child(n+2) .work-title { 
  font-size:1.15rem; 
}

.work-arrow {
  -webkit-backdrop-filter:blur(8px);
  align-items:center; 
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,0.1); 
  border:1px solid rgba(255,255,255,0.15);
  border-radius:50%;
  display:flex; 
  height:40px; 
  justify-content:center;
  opacity:0; 
  position:absolute; 
  right:24px; 
  top:24px; 
  transform:translateY(8px);
  transition:all var(--t-fast) var(--ease-fast);
  width:40px; 
  z-index:2;
}
.work-card:hover .work-arrow { 
  opacity:1; 
  transform:translateY(0); 
}

/* ===== ABOUT / PROCESS SECTION ===== */
.process-steps {
  background:var(--border);
  border:1px solid var(--border); 
  border-radius:var(--radius-lg); 
  display:grid; 
  gap:1px; 
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
}
.process-step {
  background:var(--bg); 
  padding:40px 32px;
  transition:background var(--t-fast);
}
.process-step:hover { 
  background:var(--surface); 
}
.process-num {
  color:var(--primary); 
  display:block;
  font-family:var(--font-head);
  font-size:0.75rem; 
  font-weight:700; 
  letter-spacing:0.1em;
  margin-bottom:24px; 
}
.process-step h4 {
  font-family:var(--font-head);
  font-size:1.05rem; 
  font-weight:700; 
  letter-spacing:-0.01em;
  margin-bottom:12px; 
}
.process-step p { 
  color:var(--text-muted); 
  font-size:0.88rem; 
  line-height:1.65; 
}

/* ===== CONTACT SECTION ===== */
.contact-section { 
  background:var(--bg-2); 
}

.contact-layout {
  align-items:start;
  display:grid; 
  gap:80px; 
  grid-template-columns:1fr 1.2fr; 
}

.contact-lede {
  color:var(--text-muted); 
  font-size:1rem; 
  line-height:1.75; 
  margin-bottom:40px;
}

.contact-detail {
  align-items:center; 
  border-bottom:1px solid var(--border);
  display:flex; 
  font-size:0.9rem;
  gap:14px;
  padding:16px 0; 
}
.contact-detail:first-of-type { 
  border-top:1px solid var(--border); 
}
.contact-detail .material-symbols-outlined { 
  color:var(--primary); 
  font-size:18px; 
}
.contact-detail a:hover { 
  color:var(--primary-light); 
}

.avail-badge {
  align-items:center; 
  background:rgba(16,185,129,0.1); 
  border:1px solid rgba(16,185,129,0.3);
  border-radius:var(--radius-full);
  color:#10b981;
  display:inline-flex; 
  font-size:0.8rem; 
  font-weight:600; 
  gap:8px; 
  margin-top:32px;
  padding:10px 20px; 
}
.avail-badge .pulse {
  animation:pulseDot 2s infinite;
  background:#10b981;
  border-radius:50%; 
  height:8px; 
  width:8px; 
}

.contact-form {
  background:var(--surface); 
  border:1px solid var(--border);
  border-radius:var(--radius-xl); 
  padding:48px;
}

.form-row { 
  display:grid; 
  gap:20px; 
  grid-template-columns:1fr 1fr; 
}

.form-group { 
  margin-bottom:20px; 
}
.form-group.full { 
  grid-column:1/-1; 
}

.form-group label {
  color:var(--text-muted); 
  display:block; 
  font-size:0.75rem; 
  font-weight:700;
  letter-spacing:0.08em;
  margin-bottom:10px;
  text-transform:uppercase; 
}

.form-group input,
.form-group textarea,
.form-group select {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--text); 
  font-family:inherit; 
  font-size:0.9rem;
  padding:14px 18px;
  resize:none;
  transition: all var(--t-fast) var(--ease-fast);
  width:100%; 
}
.form-group input:focus,
.form-group textarea:focus {
  background:var(--surface);
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
  outline:none; 
}
.form-group textarea { 
  min-height:130px; 
}

/* ===== FOOTER ===== */
footer {
  border-top:1px solid var(--border);
  padding:64px 5% 40px;
}
.footer-inner {
  align-items:center; 
  display:flex; 
  flex-direction:column; 
  gap:32px;
  margin:0 auto;
  max-width:1280px; 
}
.footer-logo {
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  background:linear-gradient(135deg, var(--text), var(--primary-light));
  background-clip:text;
  font-family:var(--font-head);
  font-size:1.6rem; 
  font-weight:700; 
  letter-spacing:-0.04em;
}
.footer-links { 
  display:flex; 
  gap:32px; 
}
.footer-links a {
  color:var(--text-muted);
  font-size:0.85rem; 
  transition:color var(--t-fast);
}
.footer-links a:hover { 
  color:var(--text); 
}

.social-links { 
  display:flex; 
  gap:12px; 
}
.social-link {
  align-items:center; 
  background:var(--surface-2); 
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-muted);
  display:flex; 
  font-size:0.8rem; 
  font-weight:600; 
  height:42px; 
  justify-content:center;
  transition:all var(--t-fast) var(--ease-fast);
  width:42px; 
}
.social-link:hover {
  background:var(--primary-glow); 
  border-color:var(--border-accent);
  color:var(--primary-light); 
  transform:translateY(-3px);
}

.footer-copy { 
  color:var(--text-faint); 
  font-size:0.78rem; 
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  opacity:0; 
  transform:translateY(32px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.active { 
  opacity:1; 
  transform:translateY(0); 
}
.reveal.delay-1 { 
  transition-delay:0.1s; 
}
.reveal.delay-2 { 
  transition-delay:0.2s; 
}
.reveal.delay-3 { 
  transition-delay:0.3s; 
}
.reveal.delay-4 { 
  transition-delay:0.4s; 
}

/* ===== MOBILE NAV ===== */
.hamburger {
  align-items:center; 
  background:var(--surface-2); 
  border:1px solid var(--border);
  border-radius:50%;
  display:none; 
  flex-direction:column; 
  gap:5px;
  height:38px; 
  justify-content:center;
  width:38px; 
}
.hamburger span { 
  background:var(--text); 
  border-radius:2px; 
  display:block; 
  height:1.5px; 
  transition:all var(--t-fast); 
  width:18px; 
}

.mobile-menu {
  -webkit-backdrop-filter:blur(20px);
  align-items:center; 
  backdrop-filter:blur(20px);
  background:rgba(4,2,15,0.97); 
  display:none; 
  flex-direction:column; 
  gap:28px;
  inset:0; 
  justify-content:center; 
  position:fixed; 
  z-index:9999;
}
.mobile-menu.open { 
  display:flex; 
}
.mobile-menu a { 
  color:var(--text-muted); 
  font-family:var(--font-head); 
  font-size:2rem; 
  font-weight:700; 
  transition:color var(--t-fast); 
}
.mobile-menu a:hover { 
  color:var(--text); 
}
.mobile-close { 
  color:var(--text-muted); 
  position:absolute; 
  right:28px; 
  top:28px; 
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .expertise-grid { 
    grid-template-columns:1fr 1fr; 
  }
  .skills-layout  { 
    grid-template-columns:1fr 1fr; 
  }
  .works-grid     { 
    grid-template-columns:1fr; 
  }
  .work-card:nth-child(1) { 
    grid-row:1; 
    min-height:380px; 
  }
  .process-steps  { 
    grid-template-columns:1fr 1fr; 
  }
  .contact-layout { 
    gap:48px; 
    grid-template-columns:1fr; 
  }
}

@media (max-width:768px) {
  .navbar { 
    padding:12px 20px; 
    top:12px; 
    width:96%; 
  }
  .nav-links, .nav-right .btn-nav-cta { 
    display:none; 
  }
  .hamburger { 
    display:flex; 
  }
  .hero { 
    padding:130px 5% 40px; 
  }
  .headline { 
    font-size:clamp(2.4rem, 11vw, 4.2rem); 
  }
  .hero-stats { 
    flex-direction:column; 
    gap:0; 
    max-width:320px; 
  }
  .stat-item { 
    border-bottom:1px solid var(--border); 
    border-right:none; 
  }
  .stat-item:last-child { 
    border-bottom:none; 
  }
  .expertise-grid { 
    grid-template-columns:1fr; 
  }
  .skills-layout  { 
    grid-template-columns:1fr; 
  }
  .process-steps  { 
    grid-template-columns:1fr 1fr; 
  }
  .contact-form   { 
    padding:32px 24px; 
  }
  .form-row       { 
    grid-template-columns:1fr; 
  }
  section { 
    padding:70px 0; 
  }
}

@media (max-width:480px) {
  .headline {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .cta-group {
    flex-direction: column;
    width: 100%;
  }
  .cta-group .btn {
    width: 100%;
    justify-content: center;
  }
  .nav-right {
    gap: 8px;
  }
  .nav-icon-btn, .theme-toggle, .hamburger {
    width: 36px;
    height: 36px;
  }
  .scroll-indicator {
    display: none; /* Hide mouse scroll icon on very small screens to save vertical space */
  }
  .process-steps  { 
    grid-template-columns:1fr; 
  }
  .works-grid     { 
    grid-template-columns:1fr; 
  }
  .hero-stats     { 
    max-width:100%; 
  }
}