@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";
:root {
  --bg-primary:#fff;
  --bg-secondary:#f5f5f5;
  --bg-card:#fff;
  --text-primary:#0a0a0a;
  --text-secondary:#525252;
  --accent-primary:#ff6500;
  --accent-secondary:#e55b00;
  --accent-gradient:#ff6500;
  --border-color:#e5e5e5;
  --border-color-dark:#a3a3a3;
  --shadow-sm:0 1px 2px 0 #0000000d;
  --shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --glass-bg:#fffffff2;
  --glass-border:#e5e5e5;
  --nav-height:72px;
  --max-width:1200px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-full:9999px;
  --transition-fast:.15s ease-in-out;
  --transition-normal:.25s ease-in-out;
  --transition-slow:.4s ease-in-out
}

[data-theme=dark] {
  --bg-primary:#0a0a0a;
  --bg-secondary:#171717;
  --bg-card:#171717;
  --text-primary:#fff;
  --text-secondary:#a3a3a3;
  --accent-primary:#ff6500;
  --accent-secondary:#e55b00;
  --accent-gradient:#ff6500;
  --border-color:#262626;
  --border-color-dark:#404040;
  --shadow-sm:0 1px 2px 0 #0000004d;
  --shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0006;
  --shadow-lg:0 10px 15px -3px #00000080, 0 4px 6px -4px #00000080;
  --glass-bg:#0a0a0af2;
  --glass-border:#262626
}

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

html {
  scroll-behavior:smooth
}

body {
  background-color:var(--bg-primary);
  color:var(--text-primary);
  transition:background-color var(--transition-normal), color var(--transition-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:Outfit,sans-serif;
  line-height:1.5
}

a {
  color:inherit;
  transition:color var(--transition-fast);
  text-decoration:none
}

a:hover {
  color:var(--accent-primary)
}

ul {
  list-style:none
}

button {
  cursor:pointer;
  background:0 0;
  border:none;
  font-family:inherit
}

.heading-1 {
  letter-spacing:-.02em;
  font-size:clamp(2.5rem,5vw,4.5rem);
  font-weight:800;
  line-height:1.1
}

.heading-2 {
  letter-spacing:-.01em;
  margin-bottom:2rem;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  line-height:1.2
}

.text-accent {
  color:var(--accent-primary)
}

.container {
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 2rem
}

.preload,.preload * {
  -o-transition:none!important;
  transition:none!important
}

@keyframes fadeIn {
  0% {
    opacity:0;
    transform:translateY(20px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

  
}

.animate-fade-in {
  opacity:0;
  animation:fadeIn .8s var(--transition-normal) both
}

.section-header {
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-bottom:4rem;
  display:flex
}

.section-subtitle {
  color:var(--accent-primary);
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-bottom:.75rem;
  font-size:.875rem;
  font-weight:700;
  display:block
}

.section-title {
  color:var(--text-primary);
  margin:0;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800
}

.navbar {
  height:var(--nav-height);
  z-index:100;
  background:var(--bg-card);
  border-bottom:1px solid var(--border-color);
  transition:all var(--transition-normal);
  align-items:center;
  display:flex;
  position:fixed;
  top:0;
  left:0;
  right:0
}

.nav-container {
  justify-content:space-between;
  align-items:center;
  width:100%;
  display:flex
}

.logo {
  color:var(--text-primary);
  align-items:center;
  gap:.75rem;
  font-size:1.25rem;
  font-weight:700;
  text-decoration:none;
  display:flex
}

.logo-circle {
  background:var(--accent-primary);
  color:#fff;
  width:40px;
  height:40px;
  box-shadow:var(--shadow-sm);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:1.1rem;
  font-weight:800;
  display:flex
}

.nav-links {
  align-items:center;
  gap:2rem;
  display:flex
}

.nav-link {
  color:var(--text-secondary);
  padding:.5rem 0;
  font-weight:500;
  position:relative
}

.nav-link:hover,.nav-link.active {
  color:var(--text-primary)
}

.nav-link:after {
  content:"";
  background:var(--accent-primary);
  width:0;
  height:2px;
  transition:width var(--transition-normal);
  border-radius:2px;
  position:absolute;
  bottom:0;
  left:0
}

.nav-link:hover:after,.nav-link.active:after {
  width:100%
}

.theme-toggle {
  background:var(--bg-secondary);
  width:40px;
  height:40px;
  color:var(--text-primary);
  transition:all var(--transition-fast);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  display:flex
}

.theme-toggle:hover {
  background:var(--bg-card);
  box-shadow:var(--shadow-sm);
  transform:scale(1.05)
}

.mobile-menu-btn {
  color:var(--text-primary);
  display:none
}

@media (width<=768px) {
  .nav-links {
    background:var(--bg-card);
    border-bottom:1px solid var(--border-color);
    box-shadow:var(--shadow-md);
    opacity:0;
    visibility:hidden;
    transition:all var(--transition-normal);
    z-index:-1;
    flex-direction:column;
    gap:1.25rem;
    padding:1.5rem;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    transform:translateY(-100%)
  }

  .nav-links.open {
    opacity:1;
    visibility:visible;
    display:flex;
    transform:translateY(0)
  }

  .mobile-menu-btn {
    cursor:pointer;
    background:0 0;
    border:none;
    display:block
  }

  
}

.hero {
  min-height:100vh;
  padding-top:var(--nav-height);
  align-items:center;
  display:flex;
  position:relative;
  overflow:hidden
}

.hero-container {
  z-index:10;
  justify-content:space-between;
  align-items:center;
  gap:4rem;
  display:flex;
  position:relative
}

.hero-content {
  flex-direction:column;
  flex:1;
  justify-content:center;
  max-width:650px;
  display:flex
}

.hero-subtitle {
  color:var(--accent-primary);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:1rem;
  font-size:1.25rem;
  font-weight:600
}

.hero-description {
  color:var(--text-secondary);
  max-width:600px;
  margin-top:1.5rem;
  margin-bottom:2.5rem;
  font-size:1.25rem;
  line-height:1.6
}

.hero-socials {
  flex-wrap:wrap;
  gap:1rem;
  display:flex
}

.social-btn {
  border-radius:var(--radius-full);
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-fast);
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  font-weight:500;
  display:flex
}

.social-btn:hover {
  box-shadow:var(--shadow-md);
  border-color:var(--accent-primary);
  color:var(--accent-primary);
  transform:translateY(-2px)
}

.social-btn.primary {
  background:var(--accent-gradient);
  color:#fff;
  border:none
}

.social-btn.primary:hover {
  box-shadow:0 10px 20px -10px var(--accent-primary);
  color:#fff
}

.hero-image-wrapper {
  flex:1;
  justify-content:flex-end;
  align-items:center;
  display:flex
}

.hero-image-container {
  aspect-ratio:1;
  border-radius:50%;
  width:100%;
  max-width:400px;
  padding:1rem;
  position:relative
}

.hero-image {
  object-fit:cover;
  z-index:2;
  width:100%;
  height:100%;
  box-shadow:var(--shadow-lg);
  border:4px solid var(--text-primary);
  border-radius:50%;
  position:relative
}

.hero-image-glow {
  background:var(--accent-gradient);
  filter:blur(20px);
  opacity:.6;
  z-index:1;
  border-radius:50%;
  width:100%;
  height:100%;
  animation:10s linear infinite rotateGlow;
  position:absolute;
  top:0;
  left:0
}

@keyframes rotateGlow {
  0% {
    transform:rotate(0)
  }

  to {
    transform:rotate(360deg)
  }

  
}

@media (width<=992px) {
  .hero-container {
    text-align:center;
    flex-direction:column-reverse;
    gap:3rem
  }

  .hero-content {
    align-items:center
  }

  .hero-description {
    text-align:center
  }

  .hero-socials,.hero-image-wrapper {
    justify-content:center
  }

  .hero-image-container {
    max-width:300px
  }

  
}

.about-section {
  background:var(--bg-primary);
  padding:6rem 0
}

.about-container {
  grid-template-columns:1fr 1fr;
  gap:4rem;
  display:grid
}

.about-content {
  flex-direction:column;
  display:flex
}

.about-title {
  color:var(--accent-primary);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.5rem;
  font-weight:600
}

.about-heading {
  margin-bottom:1.5rem
}

.about-text {
  color:var(--text-secondary);
  margin-bottom:1.5rem;
  line-height:1.7
}

.about-buttons {
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.5rem;
  display:flex
}

.resume-btn {
  background:var(--accent-primary);
  color:#fff;
  border-radius:var(--radius-md);
  white-space:nowrap;
  width:fit-content;
  transition:all var(--transition-fast);
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.25rem;
  font-size:.95rem;
  font-weight:600;
  display:inline-flex
}

.resume-btn:hover {
  background:var(--accent-secondary);
  box-shadow:var(--shadow-md);
  color:#fff;
  transform:translateY(-2px)
}

.social-btn {
  background:var(--bg-secondary);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  white-space:nowrap;
  width:fit-content;
  transition:all var(--transition-fast);
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.25rem;
  font-size:.95rem;
  font-weight:600;
  display:inline-flex
}

.social-btn:hover {
  border-color:var(--accent-primary);
  color:var(--accent-primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px)
}

.timeline-container {
  flex-direction:column;
  gap:2rem;
  display:flex
}

.timeline-item {
  border-left:2px solid var(--border-color);
  padding-left:2rem;
  position:relative
}

.timeline-item:before {
  content:"";
  background:var(--accent-primary);
  border:2px solid var(--bg-primary);
  border-radius:50%;
  width:12px;
  height:12px;
  position:absolute;
  top:0;
  left:-7px
}

.timeline-title {
  color:var(--text-primary);
  margin-bottom:.25rem;
  font-size:1.125rem;
  font-weight:700
}

.timeline-subtitle {
  color:var(--accent-primary);
  margin-bottom:.5rem;
  font-size:.875rem;
  font-weight:500
}

.timeline-desc {
  color:var(--text-secondary);
  font-size:.875rem
}

@media (width<=992px) {
  .about-container {
    grid-template-columns:1fr;
    gap:3rem
  }

  
}

.skills-section {
  background:var(--bg-secondary);
  padding:6rem 0
}

.skills-header {
  text-align:center;
  margin-bottom:4rem
}

.skills-grid {
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  display:grid
}

.skill-category {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  transition:all var(--transition-normal);
  box-shadow:var(--shadow-sm);
  padding:2rem
}

.skill-category:hover {
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-primary);
  transform:translateY(-5px)
}

.category-title {
  color:var(--text-primary);
  align-items:center;
  gap:.75rem;
  margin-bottom:1.5rem;
  font-size:1.25rem;
  font-weight:700;
  display:flex
}

.category-icon {
  color:var(--accent-primary)
}

.skills-list {
  flex-direction:column;
  gap:.75rem;
  margin:0;
  padding:0;
  list-style-type:none;
  display:flex
}

.skill-item {
  color:var(--text-secondary);
  align-items:center;
  gap:.5rem;
  font-size:1rem;
  display:flex
}

.skill-item:before {
  content:"•";
  color:var(--accent-primary);
  font-weight:700
}

@media (width<=1200px) {
  .skills-grid {
    grid-template-columns:repeat(2,1fr)
  }

  
}

@media (width<=768px) {
  .skills-grid {
    grid-template-columns:1fr
  }

  
}

.projects-section {
  background:var(--bg-primary);
  padding:6rem 0
}

.projects-header {
  text-align:center;
  margin-bottom:4rem
}

.projects-tabs {
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-bottom:3rem;
  display:flex
}

.tab-btn {
  background:var(--bg-secondary);
  color:var(--text-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-full);
  cursor:pointer;
  transition:all var(--transition-normal);
  padding:.75rem 1.5rem;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600
}

.tab-btn:hover {
  border-color:var(--accent-primary);
  color:var(--text-primary)
}

.tab-btn.active {
  background:var(--accent-primary);
  color:#fff;
  border-color:var(--accent-primary);
  box-shadow:0 4px 14px #ff650040
}

.projects-grid {
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2.5rem;
  display:grid
}

.project-card {
  background:var(--bg-card);
  border:1px solid var(--border-color-dark);
  border-radius:var(--radius-lg);
  transition:all var(--transition-normal);
  flex-direction:column;
  height:100%;
  display:flex;
  overflow:hidden
}

.project-card:hover {
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-primary);
  transform:translateY(-5px)
}

.project-image {
  object-fit:contain;
  border-bottom:1px solid var(--border-color-dark);
  width:100%;
  height:220px;
  transition:transform var(--transition-slow);
  background-color:#fff;
  padding:1rem
}

.project-card:hover .project-image {
  transform:scale(1.05)
}

.project-image-wrapper {
  width:100%;
  overflow:hidden
}

.project-content {
  flex-direction:column;
  flex-grow:1;
  padding:2rem;
  display:flex
}

.project-card.startup-project {
  border:1px solid var(--accent-primary);
  position:relative;
  box-shadow:0 0 15px #ff650033
}

.project-card.startup-project:hover {
  box-shadow:0 0 25px #ff650066
}

.startup-badge {
  background:var(--accent-primary);
  color:#fff;
  border-radius:var(--radius-full);
  text-transform:uppercase;
  letter-spacing:.05em;
  z-index:10;
  box-shadow:var(--shadow-sm);
  padding:.25rem .75rem;
  font-size:.75rem;
  font-weight:700;
  position:absolute;
  top:1rem;
  right:1rem
}

.project-header {
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:1rem;
  display:flex
}

.project-header-links {
  align-items:center;
  gap:.75rem;
  display:flex
}

.project-title {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:700
}

.project-desc {
  color:var(--text-secondary);
  flex-grow:1;
  margin-bottom:1.5rem;
  line-height:1.6
}

.project-tech {
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.5rem;
  display:flex
}

.tech-badge {
  background:var(--bg-secondary);
  color:var(--text-secondary);
  border-radius:var(--radius-sm);
  border:1px solid var(--border-color);
  padding:.25rem .5rem;
  font-size:.75rem;
  font-weight:600
}

.project-links {
  gap:1rem;
  margin-top:auto;
  display:flex
}

.project-link {
  color:var(--text-primary);
  transition:color var(--transition-fast);
  align-items:center;
  gap:.5rem;
  font-size:.875rem;
  font-weight:600;
  display:inline-flex
}

.project-link:hover {
  color:var(--accent-primary)
}

.experience-section {
  background:var(--bg-secondary);
  padding:6rem 0
}

.experience-header {
  text-align:center;
  margin-bottom:4rem
}

.experience-timeline {
  max-width:1100px;
  margin:0 auto;
  position:relative
}

.experience-timeline:before {
  content:"";
  background:var(--border-color);
  width:2px;
  position:absolute;
  top:0;
  bottom:0;
  left:24px
}

.exp-item {
  margin-bottom:3rem;
  padding-left:5rem;
  position:relative
}

.exp-item:last-child {
  margin-bottom:0
}

.exp-icon {
  background:var(--bg-card);
  border:2px solid var(--accent-primary);
  width:50px;
  height:50px;
  color:var(--accent-primary);
  z-index:2;
  box-shadow:var(--shadow-sm);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-weight:700;
  display:flex;
  position:absolute;
  top:0;
  left:0
}

.exp-content {
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-normal);
  padding:2rem
}

.exp-content:hover {
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-primary);
  transform:translateY(-5px)
}

.exp-title-row {
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.5rem;
  display:flex
}

.exp-role {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:700
}

.exp-date {
  color:var(--accent-primary);
  border-radius:var(--radius-full);
  background:#ff65001a;
  padding:.25rem .75rem;
  font-size:.875rem;
  font-weight:600
}

.exp-company {
  color:var(--text-secondary);
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  font-size:1rem;
  font-weight:600;
  display:flex
}

.exp-type {
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  padding:.15rem .5rem;
  font-size:.75rem;
  font-weight:700
}

.exp-desc {
  color:var(--text-secondary);
  line-height:1.6
}

@media (width<=768px) {
  .experience-timeline:before {
    left:20px
  }

  .exp-icon {
    width:40px;
    height:40px;
    font-size:.875rem;
    left:0
  }

  .exp-item {
    padding-left:4rem
  }

  .exp-content {
    padding:1.5rem
  }

  
}

.achievements-section {
  background:var(--bg-primary);
  padding:6rem 0
}

.achievements-header {
  text-align:center;
  margin-bottom:4rem
}

.achievements-grid {
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:2.5rem;
  display:grid
}

.achievement-card {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  transition:all var(--transition-normal);
  box-shadow:var(--shadow-sm);
  flex-direction:column;
  padding:2.5rem;
  display:flex;
  position:relative;
  overflow:hidden
}

.achievement-card:hover {
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-primary);
  transform:translateY(-5px)
}

.achievement-icon {
  width:50px;
  height:50px;
  color:var(--accent-primary);
  background:#ff65001a;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  margin-bottom:1.5rem;
  font-size:1.5rem;
  display:flex
}

.achievement-card:hover .achievement-icon {
  background:var(--accent-primary);
  color:#fff;
  transition:all var(--transition-normal);
  transform:scale(1.1)rotate(10deg)
}

.achievement-title {
  color:var(--text-primary);
  margin-bottom:1rem;
  font-size:1.25rem;
  font-weight:700
}

.achievement-desc {
  color:var(--text-secondary);
  flex-grow:1;
  margin-bottom:2rem;
  line-height:1.6
}

.certificate-link {
  color:var(--accent-primary);
  transition:all var(--transition-fast);
  align-items:center;
  gap:.5rem;
  width:fit-content;
  font-size:.875rem;
  font-weight:600;
  display:inline-flex
}

.certificate-link:hover {
  color:var(--text-primary);
  text-decoration:underline
}

@media (width<=768px) {
  .achievements-grid {
    grid-template-columns:1fr
  }

  .achievement-card {
    padding:1.5rem
  }

  
}

.contact-section {
  background:var(--bg-secondary);
  padding:6rem 0
}

.contact-header {
  text-align:center;
  margin-bottom:4rem
}

.contact-container {
  justify-content:center;
  max-width:900px;
  margin:0 auto;
  display:flex
}

.contact-info-grid {
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:3rem;
  width:100%;
  display:grid
}

.contact-item {
  align-items:flex-start;
  gap:1.5rem;
  display:flex
}

.contact-icon {
  background:var(--bg-card);
  width:50px;
  height:50px;
  color:var(--accent-primary);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border-color);
  transition:all var(--transition-normal);
  border-radius:50%;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  font-size:1.25rem;
  display:flex
}

.contact-item:hover .contact-icon {
  background:var(--accent-primary);
  color:#fff;
  border-color:var(--accent-primary);
  transform:scale(1.1)
}

.contact-details h3 {
  color:var(--text-primary);
  margin-bottom:.25rem;
  font-size:1.125rem;
  font-weight:700
}

.contact-details p,.contact-details a {
  color:var(--text-secondary);
  transition:color var(--transition-fast);
  font-size:1rem;
  line-height:1.5
}

.contact-details a:hover {
  color:var(--accent-primary);
  text-decoration:underline
}

@media (width<=992px) {
  .contact-info-grid {
    gap:2rem
  }

  
}

.app {
  flex-direction:column;
  min-height:100vh;
  display:flex
}

main {
  flex:1
}

.footer {
  text-align:center;
  border-top:1px solid var(--border-color);
  color:var(--text-secondary);
  padding:2rem 0;
  font-size:.875rem
}