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

/* ── THEME VARIABLES ── */
[data-theme="dark"] {
  --bg: #080b10;
  --surface: #0d1117;
  --surface2: #161b24;
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(255,255,255,0.07);
  --nav-bg: rgba(8,11,16,0.88);
  --shadow: rgba(0,0,0,0.4);
  --grid-color: rgba(0,201,167,0.03);
  --code-comment: #4a5568;
  --code-key: #63b3ed;
  --code-str: #f6a1c0;
  --code-punc: #68d391;
}
[data-theme="light"] {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface2: #eef2f7;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(0,0,0,0.09);
  --nav-bg: rgba(246,248,251,0.92);
  --shadow: rgba(0,0,0,0.07);
  --grid-color: rgba(0,201,167,0.05);
  --code-comment: #94a3b8;
  --code-key: #2563eb;
  --code-str: #be185d;
  --code-punc: #15803d;
}
:root {
  --cyan: #00c9a7;
  --cyan-dim: rgba(0,201,167,0.1);
  --cyan-glow: rgba(0,201,167,0.35);
  --orange: #ff6b35;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-weight: 300;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

/* Grid bg */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 5%;
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s, border-color 0.4s;
}
.nav-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow);
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.brand-name { font-family:'Syne',sans-serif; font-weight:700; font-size:1.05rem; color:var(--text); }

.nav-right { display:flex; align-items:center; gap:1.5rem; }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-links a {
  font-family:'DM Mono',monospace; font-size:0.72rem;
  color:var(--muted); text-decoration:none; letter-spacing:0.08em; transition:color 0.3s;
}
.nav-links a:hover { color:var(--cyan); }

/* Theme Toggle */
.theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--surface); cursor:pointer;
  color:var(--muted);
  transition:border-color 0.3s, color 0.3s, transform 0.3s, background 0.4s;
  flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--cyan); color:var(--cyan); transform:rotate(22deg); }
.theme-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-sun { display:none; }
.icon-moon { display:block; }
[data-theme="light"] .icon-sun { display:block; }
[data-theme="light"] .icon-moon { display:none; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { width:22px; height:1.5px; background:var(--text); transition:all 0.3s; display:block; }

/* ── HERO ── */
#hero {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:9rem 5% 5rem; position:relative; z-index:1;
}
.hero-tag {
  font-family:'DM Mono',monospace; font-size:0.76rem; color:var(--cyan);
  letter-spacing:0.12em; margin-bottom:1.5rem;
  animation:fadeUp 0.7s ease both; display:flex; align-items:center; gap:0.8rem;
}
.hero-tag::before { content:''; width:28px; height:1px; background:var(--cyan); display:block; }
.hero-name {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(3.2rem,9vw,7.5rem); line-height:0.95;
  letter-spacing:-0.02em; color:var(--text);
  animation:fadeUp 0.7s 0.1s ease both; margin-bottom:0.3rem;
}
.hero-name .outline { -webkit-text-stroke:2px var(--cyan); color:transparent; }
.hero-role {
  font-family:'Syne',sans-serif; font-weight:600;
  font-size:clamp(1.4rem,3.5vw,2.5rem); color:var(--cyan);
  animation:fadeUp 0.7s 0.2s ease both; margin-bottom:2rem;
}
.hero-desc {
  max-width:520px; font-size:1rem; line-height:1.85; color:var(--muted);
  animation:fadeUp 0.7s 0.3s ease both; margin-bottom:3rem;
}
.hero-desc strong { color:var(--text); font-weight:500; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; animation:fadeUp 0.7s 0.4s ease both; margin-bottom:5rem; }
.btn-glow {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.9rem 2rem; background:var(--cyan); color:#080b10;
  font-family:'DM Mono',monospace; font-size:0.78rem; letter-spacing:0.08em;
  text-decoration:none; border:none; cursor:pointer; font-weight:500;
  transition:box-shadow 0.3s, transform 0.2s;
}
.btn-glow:hover { box-shadow:0 0 30px var(--cyan-glow); transform:translateY(-2px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.9rem 2rem; background:transparent; color:var(--text);
  font-family:'DM Mono',monospace; font-size:0.78rem; letter-spacing:0.08em;
  text-decoration:none; border:1px solid var(--border);
  transition:border-color 0.3s, color 0.3s;
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); }
.hero-stats {
  display:flex; gap:4rem; flex-wrap:wrap;
  animation:fadeUp 0.7s 0.5s ease both;
  padding-top:2.5rem; border-top:1px solid var(--border);
}
.hero-stat-num { font-family:'Syne',sans-serif; font-size:2.5rem; font-weight:800; color:var(--text); line-height:1; }
.hero-stat-num span { color:var(--cyan); }
.hero-stat-label { font-family:'DM Mono',monospace; font-size:0.68rem; color:var(--muted); letter-spacing:0.1em; margin-top:0.4rem; }

/* Code card */
.hero-code {
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:1.5rem 2rem; font-family:'DM Mono',monospace; font-size:0.8rem; line-height:1.9;
  max-width:370px; animation:fadeUp 0.9s 0.6s ease both;
  box-shadow:0 20px 60px var(--shadow);
  transition:background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.code-bar { display:flex; gap:6px; margin-bottom:1.2rem; }
.code-bar span { width:10px; height:10px; border-radius:50%; }
.code-bar .r{background:#ff5f56;} .code-bar .y{background:#ffbd2e;} .code-bar .g{background:#27c93f;}
.c-comment { color:var(--code-comment); font-style:italic; }
.c-key { color:var(--code-key); }
.c-fn { color:var(--cyan); }
.c-str { color:var(--code-str); }
.c-num { color:var(--orange); }
.c-punc { color:var(--code-punc); }

/* ── SECTIONS ── */
section { padding:8rem 5%; position:relative; z-index:1; }
section + section { border-top:1px solid var(--border); }
.section-tag {
  font-family:'DM Mono',monospace; font-size:0.7rem; color:var(--cyan);
  letter-spacing:0.18em; margin-bottom:1rem; display:flex; align-items:center; gap:0.7rem;
}
.section-tag::after { content:''; width:35px; height:1px; background:var(--cyan); }
.section-title {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(2rem,4vw,3rem); line-height:1.1;
  letter-spacing:-0.02em; color:var(--text); margin-bottom:1.5rem;
}

/* ── ABOUT ── */
#about { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.about-body p { font-size:0.97rem; line-height:1.9; color:var(--muted); margin-bottom:1.2rem; }
.about-body strong { color:var(--text); font-weight:500; }
.skills-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.7rem; margin-top:2.5rem; }
.skill-chip {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.65rem 1rem;
  background:var(--surface); border:1px solid var(--border);
  font-family:'DM Mono',monospace; font-size:0.73rem; color:var(--text);
  transition:border-color 0.3s, background 0.3s, color 0.3s;
}
.skill-chip::before { content:'▸'; color:var(--cyan); font-size:0.6rem; }
.skill-chip:hover { border-color:var(--cyan); background:var(--cyan-dim); color:var(--cyan); }

.about-card {
  background:var(--surface); border:1px solid var(--border);
  padding:2.5rem; position:relative; overflow:hidden;
  box-shadow:0 10px 40px var(--shadow);
  transition:background 0.4s, border-color 0.4s;
}
.about-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
}
.stack-label { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--muted); letter-spacing:0.2em; margin-bottom:1.8rem; }
.stack-bar { margin-bottom:1.3rem; }
.stack-bar-top { display:flex; justify-content:space-between; font-family:'DM Mono',monospace; font-size:0.74rem; color:var(--text); margin-bottom:0.5rem; }
.stack-bar-top span { color:var(--cyan); }
.bar-track { height:4px; background:var(--surface2); border-radius:2px; overflow:hidden; }
.bar-fill { height:100%; background:linear-gradient(90deg,var(--cyan),var(--orange)); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.availability {
  display:flex; align-items:center; gap:0.8rem;
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border);
  font-family:'DM Mono',monospace; font-size:0.73rem; color:var(--muted);
}
.avail-dot { width:8px; height:8px; border-radius:50%; background:#22d3ee; box-shadow:0 0 8px #22d3ee; animation:blink 2s infinite; flex-shrink:0; }

/* ── SERVICES ── */
.services-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; flex-wrap:wrap; gap:2rem; }
.services-header p { max-width:360px; font-size:0.95rem; color:var(--muted); line-height:1.8; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.svc-card {
  background:var(--bg); padding:3rem 2.5rem;
  position:relative; overflow:hidden; transition:background 0.4s;
}
.svc-card:hover { background:var(--surface); }
.svc-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--cyan-dim),transparent 60%); opacity:0; transition:opacity 0.4s; pointer-events:none; }
.svc-card:hover::after { opacity:1; }
.svc-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; }
.svc-card:hover::before { transform:scaleX(1); }
.svc-num { position:absolute; top:1.5rem; right:2rem; font-family:'Syne',sans-serif; font-size:4rem; font-weight:800; color:var(--muted); opacity:0.07; line-height:1; pointer-events:none; }
.svc-icon { font-size:1.8rem; margin-bottom:1.5rem; color:var(--cyan); opacity:0.8; }
.svc-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1.15rem; color:var(--text); margin-bottom:0.8rem; }
.svc-desc { font-size:0.88rem; line-height:1.8; color:var(--muted); }
.svc-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1.5rem; }
.svc-tag { font-family:'DM Mono',monospace; font-size:0.63rem; padding:0.22rem 0.55rem; background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,201,167,0.25); }

/* ── PROJECTS ── */
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3.5rem; }
.project-card {
  background:var(--surface); border:1px solid var(--border);
  padding:2.5rem; position:relative; overflow:hidden;
  transition:border-color 0.4s, transform 0.4s, box-shadow 0.4s;
  cursor:pointer;
}
.project-card:hover { border-color:rgba(0,201,167,0.35); transform:translateY(-4px); box-shadow:0 20px 40px var(--shadow); }
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; }
.project-card:hover::before { transform:scaleX(1); }
.project-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.project-type { font-family:'DM Mono',monospace; font-size:0.63rem; color:var(--cyan); letter-spacing:0.15em; }
.project-year { font-family:'DM Mono',monospace; font-size:0.63rem; color:var(--muted); }
.project-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1.35rem; color:var(--text); margin-bottom:0.7rem; }
.project-desc { font-size:0.88rem; line-height:1.8; color:var(--muted); margin-bottom:1.3rem; }
.project-stack { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.8rem; }
.stack-tag { font-family:'DM Mono',monospace; font-size:0.63rem; padding:0.2rem 0.5rem; background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.project-link { display:inline-flex; align-items:center; gap:0.5rem; font-family:'DM Mono',monospace; font-size:0.72rem; color:var(--cyan); text-decoration:none; letter-spacing:0.06em; transition:gap 0.3s; }
.project-link:hover { gap:0.9rem; }
.project-link::after { content:'→'; }

/* ── CONTACT ── */
.contact-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; align-items:start; }
.contact-email-link {
  font-family:'Syne',sans-serif; font-size:clamp(1rem,2.5vw,1.6rem);
  font-weight:700; color:var(--cyan); text-decoration:none; display:block;
  margin-bottom:2rem; letter-spacing:-0.01em; transition:opacity 0.3s; word-break:break-all;
}
.contact-email-link:hover { opacity:0.7; }
.contact-list { list-style:none; margin-top:2rem; }
.contact-list li { display:flex; align-items:center; gap:1rem; padding:0.95rem 0; border-bottom:1px solid var(--border); }
.contact-list li:first-child { border-top:1px solid var(--border); }
.c-label { font-family:'DM Mono',monospace; font-size:0.67rem; color:var(--muted); letter-spacing:0.12em; min-width:90px; flex-shrink:0; }
.c-val { font-size:0.88rem; color:var(--text); }
.contact-list a { color:var(--text); text-decoration:none; transition:color 0.3s; display:inline-flex; align-items:center; gap:0.5rem; font-size:0.88rem; }
.contact-list a:hover { color:var(--cyan); }
.contact-list a svg { width:14px; height:14px; fill:currentColor; flex-shrink:0; }

/* Form */
.contact-form { display:flex; flex-direction:column; gap:1.2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field { display:flex; flex-direction:column; gap:0.45rem; }
.field label { font-family:'DM Mono',monospace; font-size:0.67rem; color:var(--muted); letter-spacing:0.15em; }
.field input, .field textarea, .field select {
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); padding:0.9rem 1.1rem;
  font-family:'DM Sans',sans-serif; font-size:0.92rem; font-weight:300;
  outline:none; resize:none; -webkit-appearance:none;
  transition:border-color 0.3s, background 0.4s, color 0.4s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,201,167,0.08); }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); opacity:0.45; }
.field select option { background:var(--surface); color:var(--text); }
.submit-btn {
  align-self:flex-start; display:inline-flex; align-items:center; gap:0.7rem;
  padding:1rem 2.5rem; background:var(--cyan); color:#080b10;
  font-family:'DM Mono',monospace; font-size:0.78rem; letter-spacing:0.1em;
  border:none; cursor:pointer; font-weight:500;
  transition:box-shadow 0.3s, transform 0.2s;
}
.submit-btn:hover { box-shadow:0 0 30px var(--cyan-glow); transform:translateY(-2px); }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--border); padding:2rem 5%;
  display:flex; justify-content:space-between; align-items:center;
  position:relative; z-index:1; flex-wrap:wrap; gap:1rem;
}
.footer-left { font-family:'DM Mono',monospace; font-size:0.72rem; color:var(--muted); }
.footer-left strong { color:var(--cyan); font-weight:400; }
.footer-socials { display:flex; gap:0.8rem; align-items:center; }
.footer-socials a {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--muted); text-decoration:none;
  transition:color 0.3s, border-color 0.3s, background 0.3s, transform 0.2s;
}
.footer-socials a:hover { color:var(--cyan); border-color:rgba(0,201,167,0.4); background:var(--cyan-dim); transform:translateY(-2px); }
.footer-socials a svg { width:17px; height:17px; fill:currentColor; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:translateY(0);} }
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Typing cursor blink */
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.typed-cursor { display:inline-block; width:2px; height:0.9em; background:var(--cyan); margin-left:3px; vertical-align:middle; animation:cursorBlink 0.85s infinite; }

/* ── PHOTO PLACEHOLDER ── */
.about-photo-wrap {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.about-photo {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 18px var(--cyan-glow);
  object-fit: cover;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.4rem;
  color: var(--cyan); flex-shrink: 0; overflow: hidden;
}
.about-photo-meta { display: flex; flex-direction: column; gap: 0.3rem; }
.about-photo-name { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; color:var(--text); }
.about-photo-tag { font-family:'DM Mono',monospace; font-size:0.68rem; color:var(--cyan); letter-spacing:0.1em; }

/* ── CURRENTLY BUILDING ── */
.currently-building {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: 1.5rem; padding: 0.6rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cyan);
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--muted);
}
.currently-building strong { color: var(--cyan); font-weight: 400; }

/* ── PROJECT SPOTLIGHT ── */
#testimonials { padding: 8rem 5%; position: relative; z-index: 1; border-top: 1px solid var(--border); }
.spotlight-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.spotlight-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 2rem; position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column; gap: 1rem;
}
.spotlight-card:hover { border-color: rgba(0,201,167,0.4); transform: translateY(-4px); box-shadow: 0 20px 40px var(--shadow); }
.spotlight-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; }
.spotlight-card:hover::before { transform:scaleX(1); }
.spotlight-index { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--cyan); letter-spacing:0.18em; margin-bottom:0.2rem; }
.spotlight-title { font-family:'Syne',sans-serif; font-weight:700; font-size:1.15rem; color:var(--text); }
.spotlight-desc { font-size:0.88rem; line-height:1.8; color:var(--muted); flex:1; }
.spotlight-outcome {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.85rem 1rem; background: var(--cyan-dim);
  border-left: 2px solid var(--cyan); font-size: 0.82rem; color: var(--text); line-height: 1.6;
}
.spotlight-outcome-icon { color: var(--cyan); font-size: 1rem; line-height: 1; flex-shrink: 0; margin-top: 0.05rem; }
.spotlight-stack { display:flex; flex-wrap:wrap; gap:0.4rem; }
.spotlight-tag { font-family:'DM Mono',monospace; font-size:0.63rem; padding:0.2rem 0.5rem; background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.spotlight-link { display:inline-flex; align-items:center; gap:0.5rem; font-family:'DM Mono',monospace; font-size:0.72rem; color:var(--cyan); text-decoration:none; letter-spacing:0.06em; transition:gap 0.3s; margin-top:0.3rem; }
.spotlight-link:hover { gap:0.9rem; }
.spotlight-link::after { content:'→'; }
@media(max-width:900px){ .spotlight-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .spotlight-grid{grid-template-columns:1fr;} }

/* Mobile Nav */
.mobile-nav {
  display:none; position:fixed; top:60px; left:0; right:0; z-index:400;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:2rem 5%; flex-direction:column; gap:1.5rem; transition:background 0.4s;
}
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:'DM Mono',monospace; font-size:0.9rem; color:var(--muted); text-decoration:none; letter-spacing:0.08em; transition:color 0.3s; }
.mobile-nav a:hover { color:var(--cyan); }

/* ── RESPONSIVE ── */
@media(max-width:1100px){ .hero-code{display:none;} }
@media(max-width:900px){
  #about{grid-template-columns:1fr; gap:3rem;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr; gap:3.5rem;}
  .services-header{flex-direction:column;}
}
@media(max-width:640px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .services-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .hero-stats{gap:2rem;}
  footer{flex-direction:column; align-items:flex-start;}
  section{padding:5rem 5%;}
}



/* *{
    margin: 0;
    padding: 0;
    font-family: poppins, sans-serif;
    box-sizing: border-box;
}

body{
    background: #080808;
    color: #fff;
}

#header{
    width: 100%;
    height: 100vh;
    background-image: url(images/pavel-marianov-0TVrZ5I0Et8-unsplash.jpg);
    background-size: cover;
    background-position: center;
}

.container{
    padding: 10px 10%;
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.logo{
    width: 100px;
}

nav ul li{
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}
nav ul li a::after{
    content:'';
    width: 0%;
    height: 3px;
    background: #ff004f;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: width 0.3s ease-in-out
}
nav ul li a:hover::after {
    width: 100%;
}
.header_text{
    margin-top: 5%;
    font-size: 20px;
    margin-left: 15px;
    
}
.header_text h1{
    font-size: 60px;
    margin-top: 20px;

}
.header_text h1 span{
    color: #ff004f;
}

#about{
    padding: 80px 0;
    color: #abbaba;
}
.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
.about-col-1{
    flex-basis: 35%;
}
.about-col-1 img{
    width: 70%;
    border-radius: 15px;
    margin-left: 40px;
}
.about-col-2{
    flex-basis: 60%;
}
.sub-title{
    font-size: 40px;
    font-weight: 600;
    color: #fff;
}

.tab-titles{
    display: flex;
    margin: 20px 0 40px;
}

.tab-links{
    margin-right: 50px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    position: relative;
}

.tab-links::after{
    content: '';
    width: 0;
    height: 3px;
    background: #ff004f;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: 0.5s;
}

.tab-links.active-links::after{
    width: 50%;

}

.tab-content ul li{
    list-style: none;
    margin: 10px 0;

}

.tab-content ul li span{
    color: #ff004f;
    font-size: 14px     ;
} */