:root{
  --bg:#ffffff;--text:#111;--muted:#666;--accent:#000;--container:1280px;--gray: #27272A;
  --zinc1:#D4D4D8; --zinc2: #71717A;
  --radius:12px;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
p {line-height: 24px;}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.site-header {position: relative;
  width: 100%;
  background-color: var(--bg);
  transition: all 0.3s ease;
  box-shadow: none;}
.site-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.logo a{font-weight:800;text-decoration:none;color:var(--text); font-size:24px;}
.primary-nav .menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.primary-nav .menu li a{color:var(--text);text-decoration:none;font-weight:600}
.btn-resume{background:#000;color:var(--bg);padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600; border: 0; cursor: pointer;}

.nav-toggle{display:none;background:none;border:0}
.hero{padding:80px 0}
.hero-grid{display:grid;grid-template-columns:1fr 645px;gap:40px;align-items:center; position: relative;}
.hero-title{font-size:40px;margin:6px 0}
.hero-title i {font-weight: normal; font-style: normal;}
.hero-title .muted {text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;color: white;font-weight: normal;}
.hero-title .muted strong {text-shadow: none; color: #000;}
.hero-sub{font-size:20px;color:var(--muted);margin-bottom:14px}
.hero-right img {max-width: 100%;}
.hero-right {margin-left: -12rem;}
.lead{color:var(--zinc2);max-width:540px}

.social-row a{display:inline-block;margin-right:12px;color:var(--text);text-decoration:none;font-size:18px; border-radius: 4px; border: 2px solid var(--accent); padding: 1rem; width: 56px; height: 56px; text-align: center;}
.social-row a:hover{background:var(--accent);color:var(--bg);transition:all .25s}
.hero-left .social-row {position: absolute; bottom: -1rem;}

/* skills */
.section-title{font-size:48px;text-align:center;margin:12px 0 60px; font-weight: normal;}
.skills-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px; margin-bottom: 60px;}
.skill-card{border:2px solid var(--accent);padding:20px;border-radius:4px;text-align:center;transition:all .25s; width: 186px;height: 186px;display: flex; flex-flow: column; justify-content: center;}
.skill-card:hover{background:var(--accent);color:var(--bg);transform:translateY(-6px)}
.skill-card.inview{transform:translateY(0)}
.skill-icon{font-size:56px;margin-bottom:8px}
.skill-title {font-size: 20px; font-weight: bold;}

/* dark section */
.section-dark{background:#080808;color: var(--bg);padding:60px 0}
.experience-list{display:flex;flex-direction:column;gap:32px}
.exp-card{padding:30px 24px;border-radius:12px; border: 1px solid var(--muted);}
.exp-card:nth-child(even) {background: var(--gray); border: none;}
.exp-card p {margin: 0; line-height: 24px; color: var(--zinc2);}
.exp-fromto {display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px;}
.exp-role {font-size: 24px; font-weight: 600; display: flex;
  align-items: center;
  gap: 18px;}
.exp-role img {width: 50px;}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:60px 0}
.about-grid p {line-height: 24px; color: var(--zinc2);}
.about-grid img {max-width: 100%;}

/* projects */
.projects-grid{display:grid;gap:100px}
.projects-grid h3{font-size:32px; margin: 28px 0;}
.project-item{display:flex;gap:100px;align-items:center}
.project-item:nth-child(even){flex-direction:row-reverse}
.project-thumb img{max-width:530px;object-fit:cover;border-radius:18px; height: 400px;}
.project-meta p{color: var(--zinc2);}
.project-meta a{ color: var(--bg);}
.project-number {font-size: 48px; font-weight: 800;}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:var(--bg);padding:20px;border-radius:14px;box-shadow:0 6px 18px rgba(17,17,17,0.06);text-align:center}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:108px;padding:60px 0}

/* footer */
.site-footer{padding:30px 0;background:#111;color:var(--bg)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.contact-details h2 {font-size: 48px; line-height: 56px;}
.contact-details i {text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  color: white;
  font-weight: 800; font-style: normal;}
.contact-details p {font-size: 28px; font-weight: 600;}
.contact-form input, .contact-form textarea{border: 2px solid var(--accent); padding: 16px 24px; width: 100%; font-size: 16px; line-height: 20px; border-radius: 4px;}
.contact-form p {margin-bottom: 20px;}
.contact-form p+div {display: flex; gap: 24px;}
.contact-form [type="submit"] {background: #000; color: var(--bg); padding: 18px 20px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 20px; border: 0; cursor: pointer; font-family: "Sora";}
.contact-form .social-row>p {display: flex; justify-content: space-between; gap: 24px;}
.contact-form .social-row>p br {display: none;}
.contact-form .social-row a {margin-right: 0;}

/* responsive */
@media (max-width: 767px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .skills-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .projects-grid {
    grid-template-columns: 1fr
  }

  .about-grid {
    grid-template-columns: 1fr
  }

  .testi-grid {
    grid-template-columns: 1fr
  }

  .primary-nav .menu {
    height: 0;
    display: flex;
    overflow: hidden;
    flex-flow: column;
  }

  .nav-toggle {
    display: block
  }

  .primary-nav.open .menu {
    background: var(--bg);
    padding: 10px;
    border-radius: 8px;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: .3s height ease-in-out;
  }
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .logo a {
    white-space: nowrap;
  }

  #primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: white;

    i {
      font-size: 30px;
    }
  }

  .hamburger {
    margin-left: auto;
    display: block;
    position: relative;
    transition: all 0.3s ease;
  }

  .hero-right {
    margin-left: -2rem;
  }
  .hero-left .social-row {
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }

  .skills-grid {
    width: 100vw;
    overflow-y: scroll;
    grid-template-columns: repeat(20,1fr) !important;
  }

  .project-thumb img {
    max-width: 100% !important;
  }
  .project-item,
  .project-item:nth-child(2n) {
    flex-flow: column !important;
  }

  #skills .container {
    overflow: hidden;
    max-width: calc(100% - 20px);
  }
}

@media (min-width: 768px) and (max-width: 990px) {
  .primary-nav__menu-link {
    font-size: 1rem !important;
  }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-left .social-row {
    bottom: -4rem;
  }
  .hero-right {
    margin-left: -5rem;
  }
  .skills-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 991px) and (max-width: 1024px) {
  .primary-nav__menu-link {
    font-size: 1.3rem !important;
  }
  .skills-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 991px) and (max-width: 1140px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-left .social-row {
    bottom: -4rem;
  }
  .hero-right {
    margin-left: -5rem;
  }
}

/* simple inview animation */
.section, .skill-card, .project-item, .testi-card, .exp-card {opacity:0; transform:translateY(20px); transition:all .6s ease}
.inview {opacity:1; transform:none}
/* Utility classes */