:root{
  --bg:#071029; --card:#071426; --muted:#98a6b6; --accent:#7c3aed; --accent-2:#06b6d4; --glass: rgba(255,255,255,0.035);
  --accent-rgb:124,58,237; --accent-2-rgb:6,182,212;
  --radius:14px; --container:1140px; --glass-2: rgba(255,255,255,0.02);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(13,27,57,0.22), transparent), linear-gradient(180deg,#041021 0%, #031022 100%);
  color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* prevent tiny horizontal overflow on mobile */
html,body{overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding:56px 24px}

/* -------------------------------
   Custom scrollbar (Chromium + Firefox)
   Matches site accent, subtle glass track
   ------------------------------- */
html{
  scrollbar-width:thin; /* Firefox */
  scrollbar-color: rgba(var(--accent-rgb),0.95) rgba(255,255,255,0.02);
}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent;border-radius:12px}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-2-rgb),0.95));
  border-radius:12px;
  border:3px solid rgba(15, 43, 167, 0.55); /* inner padding look */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:box-shadow 180ms ease, transform 120ms ease;
}
::-webkit-scrollbar-thumb:hover{box-shadow: inset 0 1px 10px rgba(0,0,0,0.35), 0 8px 30px rgba(var(--accent-rgb),0.12);transform:scale(1.02)}
::-webkit-scrollbar-corner{background:transparent}

.nav-wrap{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav{display:flex;align-items:center;gap:12px}
.brand{font-weight:800;letter-spacing:-0.02em;color:var(--accent);text-decoration:none;font-size:1.15rem}
.brand .dot{color:var(--accent-2)}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.02)}
#nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:20px}
.cta{margin-left:auto;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:8px 12px;border-radius:10px;color:#fff;text-decoration:none;font-weight:700}
.btn{display:inline-block;padding:8px 12px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent),#4d09ee);border:0;color:#fff}
.btn.outline{border:1px solid rgba(255,255,255,0.06)}
.section{padding:140px 0}
.section-head{display:flex;align-items:baseline;gap:24px;justify-content:space-between}

/* Vertical/expanded sections to emphasize content (introduction, clients, contact) */
#about, #testimonials, #contact{
  min-height:640px;
  display:block;
  padding-top:12px;
  padding-bottom:12px;
}
#about .container, #testimonials .container, #contact .container{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
#about .split{grid-template-columns:1fr;gap:36px;align-items:center;text-align:left}

/* About card (improved typography & layout) */
.about-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.01));
  padding:28px;border-radius:16px;border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 20px 60px rgba(2,6,23,0.45); max-width:920px; margin:0 auto;
}
#about h2{font-size:2.05rem;margin-bottom:8px;letter-spacing:-0.02em}
.about-lead{font-size:1.08rem;color:#dbe9fb;line-height:1.75;margin-bottom:20px;max-width:70ch}
#about .about-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 22px;list-style:none;padding:0}
#about .about-list li{background:transparent;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);display:flex;gap:12px;align-items:flex-start}
#about .about-list li::before{content:'';width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-top:6px;flex:0 0 10px}
#about .about-list strong{color:#fff}
#about .timeline{margin-top:28px;max-width:780px;margin-left:auto;margin-right:auto}
#testimonials .testimonials{grid-template-columns:1fr;gap:22px}
#testimonials blockquote{font-size:1.05rem;padding:28px;border-left:6px solid rgba(255,255,255,0.03);background:var(--glass);border-radius:12px}
#contact .contact-grid{grid-template-columns:1fr;gap:28px;align-items:center;text-align:center}
#contact .card-form{width:100%;max-width:820px;margin:0 auto;padding:28px;border-radius:14px}
#contact .contact-info{display:inline-block;text-align:left;padding-right:12px} 
.hero{padding:96px 0 140px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;text-align:center;justify-items:center}
.hero-content{max-width:900px}
.hero-visual{max-width:420px;width:100%}
.hero-visual .card-glass{margin:0 auto}
.hero-content h1{font-size:2.6rem;line-height:1.03;margin:8px 0 16px;letter-spacing:-0.01em} 
.eyebrow{color:var(--accent-2);font-weight:700}
.lead{color:var(--muted);max-width:60ch}
.skill-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;padding:0;list-style:none}
.skill-chips li{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:6px 10px;border-radius:999px;font-weight:700;color:var(--muted);font-size:0.85rem}
.meta-cards{display:flex;gap:18px;margin-top:22px}
.meta-cards div{background:var(--glass);padding:12px 16px;border-radius:12px;text-align:center;min-width:120px}
.hero-visual .card-glass{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.avatar{width:72px;height:72px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:20px;margin-bottom:12px}
.project-stats{display:flex;gap:18px;margin-top:12px}
.project-stats small{display:block;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:start}
.timeline{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.timeline-item{padding:12px 0;border-bottom:1px dashed rgba(255,255,255,0.02)}
.timeline-item:last-child{border-bottom:0}
.timeline-item h4{margin:0}
.muted{color:var(--muted)}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:32px}
.skill-card{background:var(--glass);padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);overflow:visible}
.skill-card h3{margin-top:0;font-size:1.05rem}
.skill-tiles{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:18px;margin-top:18px}
.skill-tile{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px 22px;border-radius:16px;display:flex;align-items:flex-start;gap:14px;font-weight:800;color:var(--muted);font-size:1.02rem;min-height:96px;border-left:8px solid rgba(255,255,255,0.06);backdrop-filter: blur(10px);transition:transform 320ms cubic-bezier(.2,.9,.2,1),box-shadow 320ms,color 200ms;transform:translateY(18px);opacity:0;white-space:normal;word-break:break-word;overflow-wrap:anywhere;box-sizing:border-box;max-width:100%}
.skill-card.in .skill-tile{transform:none;opacity:1}
.skill-card.in .skill-tile:nth-child(1){transition-delay:0.04s}
.skill-card.in .skill-tile:nth-child(2){transition-delay:0.08s}
.skill-card.in .skill-tile:nth-child(3){transition-delay:0.12s}
.skill-card.in .skill-tile:nth-child(4){transition-delay:0.16s}
.skill-card.in .skill-tile:nth-child(5){transition-delay:0.20s}
.skill-card.in .skill-tile:nth-child(6){transition-delay:0.24s}
.skill-card.in .skill-tile:nth-child(7){transition-delay:0.28s}
.skill-card.in .skill-tile:nth-child(8){transition-delay:0.32s}
.skill-tile:hover{transform:translateY(-16px) scale(1.05);box-shadow:0 36px 100px rgba(2,6,23,0.78);color:#fff}
.skill-tile:focus{outline:none;transform:translateY(-16px) scale(1.05);box-shadow:0 38px 110px rgba(2,6,23,0.82);color:#fff}
.skill-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;margin-right:14px;font-size:20px;flex:0 0 30px}
.skill-icon svg{width:30px;height:30px;display:block;stroke:currentColor;fill:none}
.skill-label{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word}
@media (max-width:980px){.skill-tiles{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))} .skill-tile{min-height:84px;padding:16px 18px}}
@media (max-width:480px){.skill-tiles{grid-template-columns:1fr} .skill-tile{min-height:80px;padding:14px}}
/* skill color tokens (visible borders + subtle tint) */
.c-html{border-left-color:#f97316;background:linear-gradient(90deg, rgba(249,115,22,0.05), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(249,115,22,0.06)}
.c-css{border-left-color:#2563eb;background:linear-gradient(90deg, rgba(37,99,235,0.04), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(37,99,235,0.06)}
.c-js{border-left-color:#facc15;background:linear-gradient(90deg, rgba(250,204,21,0.04), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(250,204,21,0.06)}
.c-ts{border-left-color:#2176ff;background:linear-gradient(90deg, rgba(33,118,255,0.035), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(33,118,255,0.06)}
.c-react{border-left-color:#61dafb;background:linear-gradient(90deg, rgba(97,218,251,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(97,218,251,0.06)}
.c-next{border-left-color:#7c3aed;background:linear-gradient(90deg, rgba(124,58,237,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(124,58,237,0.06)}
.c-tailwind{border-left-color:#06b6d4;background:linear-gradient(90deg, rgba(6,182,212,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(6,182,212,0.06)}
.c-bootstrap{border-left-color:#6f42c1;background:linear-gradient(90deg, rgba(111,66,193,0.025), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(111,66,193,0.06)}
.c-node{border-left-color:#22c55e;background:linear-gradient(90deg, rgba(34,197,94,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(34,197,94,0.06)}
.c-express{border-left-color:#159957;background:linear-gradient(90deg, rgba(21,153,87,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(21,153,87,0.06)}
.c-python{border-left-color:#ffd43b;background:linear-gradient(90deg, rgba(255,212,59,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(255,212,59,0.06)}
.c-sql{border-left-color:#06b6d4;background:linear-gradient(90deg, rgba(6,182,212,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(6,182,212,0.06)}
.c-graphql{border-left-color:#e535ab;background:linear-gradient(90deg, rgba(229,53,171,0.025), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(229,53,171,0.06)}
.c-devops{border-left-color:#64748b;background:linear-gradient(90deg, rgba(100,116,139,0.02), rgba(255,255,255,0.008));box-shadow:0 8px 30px rgba(100,116,139,0.05)}
.c-security{border-left-color:#ef4444;background:linear-gradient(90deg, rgba(239,68,68,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(239,68,68,0.06)}
.c-forensics{border-left-color:#7dd3fc;background:linear-gradient(90deg, rgba(125,211,252,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(125,211,252,0.06)}
.c-threat{border-left-color:#fb923c;background:linear-gradient(90deg, rgba(251,146,60,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(251,146,60,0.06)}
.c-automation{border-left-color:#a78bfa;background:linear-gradient(90deg, rgba(167,139,250,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 40px rgba(167,139,250,0.06)}
.c-compliance{border-left-color:#94a3b8;background:linear-gradient(90deg, rgba(148,163,184,0.02), rgba(255,255,255,0.008));box-shadow:0 8px 30px rgba(148,163,184,0.05)}
.c-reporting{border-left-color:#60a5fa;background:linear-gradient(90deg, rgba(96,165,250,0.03), rgba(255,255,255,0.008));box-shadow:0 8px 30px rgba(96,165,250,0.05)}
/* interactive card base */
.interactive-card{will-change:transform;transition:transform 260ms cubic-bezier(.2,.9,.2,1),box-shadow 260ms ease,filter 260ms}
.interactive-card:hover{transform:translateY(-6px);filter:brightness(1.03);box-shadow:0 20px 50px rgba(2,6,23,0.6)}
.project-card{transition:transform 320ms cubic-bezier(.2,.9,.2,1),box-shadow 320ms}
.project-card:hover{transform:translateY(-12px) rotate(-0.6deg);box-shadow:0 30px 80px rgba(2,6,23,0.7)}
.service{transition:transform 260ms,box-shadow 260ms}
.service:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(2,6,23,0.55)}
.testimonials blockquote{transition:transform 260ms,box-shadow 260ms}
.testimonials blockquote:hover{transform:translateY(-6px) rotate(-0.2deg);box-shadow:0 20px 60px rgba(2,6,23,0.6)}
.timeline-item{transition:transform 240ms,box-shadow 240ms}
.timeline-item:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(2,6,23,0.5)}
.card-glass.interactive-card{transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms}
.card-glass.interactive-card:hover{transform:translateY(-8px) rotate(-0.4deg);box-shadow:0 30px 80px rgba(109,40,217,0.08)}
/* keep legacy skill/bar styles (unused) */
.skill{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.bar{height:8px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:12px;box-sizing:border-box;max-width:100%}
.project-card .card-top{font-size:0.85rem;color:var(--muted)}
.project-card .tags{display:flex;gap:8px;flex-wrap:wrap}
.project-card .tags span{background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:8px;font-weight:700;color:var(--muted);font-size:0.75rem}
.card-actions{margin-top:auto;display:flex;gap:8px}
.project-card.emphasize{border:1px solid rgba(109,40,217,0.25);box-shadow:0 10px 30px rgba(109,40,217,0.06)}
.bg-light{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01))}
.bg-contrast{background:linear-gradient(180deg, rgba(6,10,26,0.7), rgba(2,6,23,0.7));border-top:1px solid rgba(255,255,255,0.02)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.service{background:var(--glass);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.testimonials blockquote{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);margin:0}
.card-form{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card-form label{display:block;margin-bottom:12px}
.card-form span{display:block;margin-bottom:6px;color:var(--muted);font-weight:700}
.card-form input,.card-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.form-actions{display:flex;gap:8px;margin-top:6px}
.contact-grid{align-items:start}
.contact-info{list-style:none;padding:0;margin:18px 0}
.contact-info li{margin-bottom:8px}
.socials a{display:inline-block;margin-right:8px;color:var(--muted);text-decoration:none}
.site-footer{padding:26px 0;border-top:1px solid rgba(255,255,255,0.03)}
.footer-grid{display:flex;justify-content:space-between;align-items:center}
.small{font-size:0.85rem}
.muted.small{color:var(--muted)}
@media (max-width:1024px){.projects-grid{grid-template-columns:repeat(2,1fr)}.skills-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr 320px}
}
@media (max-width:720px){
  /* mobile nav */
  .nav-links{display:none}
  #nav-toggle{display:block}
  #nav-links.open{display:flex;flex-direction:column;position:fixed;right:12px;top:64px;background:var(--card);padding:12px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.7);width:calc(100% - 32px);max-width:360px;z-index:60}
  #nav-links.open a{padding:10px 12px}

  /* hero stacks vertically on small screens */
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-content{padding:0 6px;text-align:center}
  .hero-visual{max-width:360px;width:100%}
  .hero-visual .card-glass{margin:0 auto}

  /* stacked meta cards */
  .meta-cards{flex-direction:column;align-items:center}
  .meta-cards div{min-width:unset;width:100%}

  /* simplify grids */
  .projects-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}

  /* skill tiles full-width */
  .skill-tiles{grid-template-columns:1fr}
  .skill-tile{min-height:84px;padding:16px 18px}

  .about-card{padding:18px}
  /* Improve About layout on small screens: single-column list, allow wrapping, avoid overflow */
  #about .about-list{grid-template-columns:1fr;gap:10px;margin:14px 0 18px}
  #about .about-list li{padding:10px 12px;border-radius:10px;min-width:0;align-items:flex-start}
  #about .about-list li::before{margin-top:4px}
  #about .about-list li strong{display:inline-block;min-width:0;margin-right:8px}
  .about-lead{font-size:1rem;line-height:1.5;max-width:60ch}
  .about-card{max-width:100%;width:100%;box-sizing:border-box}
  .about-card .btn.primary{width:100%;display:inline-block;text-align:center;margin-top:12px}
  .timeline{width:100%;box-sizing:border-box}
  .timeline{max-width:100%}
  .testimonials{grid-template-columns:1fr}

  /* form + containers */
  .container{padding:18px 12px}
  .card-form{padding:16px}

  .avatar{width:64px;height:64px;font-size:18px}
  .project-card{padding:14px}

  /* footer stack */
  .footer-grid{flex-direction:column;gap:12px;text-align:center}
}
@media (max-width:420px){
  #about h2{font-size:1.6rem}
  .about-lead{font-size:0.98rem}
  .about-card{padding:12px;border-radius:12px}
  #about .about-list li{padding:10px}
  .container{padding:14px 10px}
}
/* little entrance animations */
[data-animate]{opacity:0;transform:translateY(8px);transition:opacity 520ms cubic-bezier(.2,.9,.2,1),transform 520ms cubic-bezier(.2,.9,.2,1)}
[data-animate].in{opacity:1;transform:none}