/* =========================================
   ROOT VARIABLES & RESET
   ========================================= */
   :root {
    --orange: #F97316;
    --orange-light: #FDBA74;
    --orange-dark: #EA580C;
    --dark: #0C0C0C;
    --dark-2: #141414;
    --dark-3: #1C1C1C;
    --dark-4: #242424;
    --white: #FFFFFF;
    --gray: #9CA3AF;
    --gray-light: #D1D5DB;
    --text: #E5E7EB;
    --radius: 16px;
    --radius-sm: 8px;
    --shadow: 0 4px 24px rgba(0,0,0,0.25);
    --shadow-orange: 0 8px 32px rgba(249,115,22,0.25);
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body { background: var(--dark); color: var(--text); font-family: var(--font-body); overflow-x: hidden; }
  img { max-width:100%; display:block; }
  a { text-decoration:none; color:inherit; }
  ul { list-style:none; }
  button { font-family: var(--font-body); cursor:pointer; border:none; }
  
  /* =========================================
     UTILITIES
     ========================================= */
  .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
  .section-head { text-align:center; margin-bottom: 56px; }
  .section-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--orange);
    background: rgba(249,115,22,0.1);
    border: 1px solid rgba(249,115,22,0.3);
    padding: 5px 18px;
    border-radius: 30px;
    margin-bottom: 14px;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
  }
  .section-title em { font-style: italic; color: var(--orange); }
  .section-sub { color: var(--gray); font-size: 16px; max-width: 520px; margin: 12px auto 0; line-height: 1.7; }
  
  /* Buttons */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    border: 2px solid var(--orange);
  }
  .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-2px); box-shadow: var(--shadow-orange); }
  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255,255,255,0.25);
    transition: var(--transition);
  }
  .btn-outline:hover { border-color: var(--orange); color: var(--orange); }
  .btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255,255,255,0.6);
    transition: var(--transition);
  }
  .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
  
  /* Scroll reveal */
  [data-reveal], [data-reveal-delay] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  [data-reveal-delay] { transition-delay: 0.15s; }
  [data-reveal].visible, [data-reveal-delay].visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* =========================================
     NAVBAR
     ========================================= */
  .navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    padding: 16px 5%;
    display: flex;
    align-items: center;
    background: rgba(12,12,12,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: var(--transition);
  }
  .navbar.scrolled { padding: 10px 5%; background: rgba(12,12,12,0.97); }
  .nav-inner { width:100%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
  .nav-logo img { height: 44px; }
  .logo-fallback { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--orange); }
  .nav-links { display:flex; align-items:center; gap:4px; }
  .nav-links li a {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-light);
    padding: 6px 12px;
    border-radius: 6px;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .nav-links li a:hover { color: var(--orange); }
  .nav-resume-btn {
    background: var(--orange) !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 8px 18px !important;
  }
  .nav-resume-btn:hover { background: var(--orange-dark) !important; }
  .nav-close-li { display:none; }
  .hamburger { display:none; flex-direction:column; gap:5px; background:none; padding:6px; }
  .hamburger span { width:24px; height:2px; background: var(--orange); border-radius:2px; display:block; transition: var(--transition); }
  
  /* =========================================
     HERO
     ========================================= */
  .hero {
    min-height: 100vh;
    padding: 120px 5% 80px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--dark);
  }
  .hero-bg-blob {
    position: absolute;
    top: -200px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 65%);
    pointer-events: none;
  }
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }
  .hero-text { flex: 1; max-width: 540px; }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--orange);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .hero-eyebrow::before { content:''; width:30px; height:2px; background: var(--orange); display:inline-block; }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .hero-title em { font-style: italic; color: var(--orange); }
  .hero-desc { color: var(--gray); font-size: 16px; line-height: 1.8; margin-bottom: 36px; max-width: 440px; }
  .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 48px; }
  .hero-stats { display:flex; align-items:center; gap:0; }
  .hstat { padding: 0 24px; }
  .hstat:first-child { padding-left:0; }
  .hstat-num { display:block; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--white); }
  .hstat-label { font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
  .hstat-div { width:1px; height:40px; background: rgba(255,255,255,0.1); }
  
  .hero-image { position:relative; flex-shrink:0; width:420px; height:480px; }
  .hero-img-ring {
    position:absolute; top:50%; left:50%;
    transform: translate(-50%, -50%);
    width:380px; height:380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, rgba(249,115,22,0.05) 60%, transparent 80%);
    animation: pulse-ring 4s ease-in-out infinite;
  }
  @keyframes pulse-ring {
    0%,100% { transform: translate(-50%,-50%) scale(1); opacity:0.7; }
    50% { transform: translate(-50%,-50%) scale(1.08); opacity:1; }
  }
  .hero-photo {
    width: 360px; height: 420px;
    object-fit: cover;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 20px 60px rgba(249,115,22,0.25);
    animation: float-hero 6s ease-in-out infinite;
  }
  @keyframes float-hero {
    0%,100% { transform: translate(-50%,-50%) translateY(0); }
    50% { transform: translate(-50%,-50%) translateY(-12px); }
  }
  .hero-badge {
    position:absolute;
    background: var(--dark-3);
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 12px;
    padding: 10px 16px;
    display:flex; align-items:center; gap:8px;
    font-size: 13px; font-weight:600; color: var(--white);
    box-shadow: var(--shadow);
    white-space: nowrap;
    animation: badge-float 5s ease-in-out infinite;
  }
  .hero-badge i { color: var(--orange); font-size:14px; }
  .hero-badge-top { top:10%; right:-10px; animation-delay: 0s; }
  .hero-badge-bot { bottom:15%; left:-20px; animation-delay: 1s; }
  @keyframes badge-float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  
  .hero-scroll-hint {
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size: 11px; letter-spacing:2px; text-transform:uppercase; color: var(--gray);
  }
  .scroll-line { width:1px; height:40px; background: linear-gradient(to bottom, var(--orange), transparent); }
  
  /* =========================================
     SERVICES
     ========================================= */
  .services-section { padding: 100px 0; background: var(--dark-2); }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .srv-card {
    background: var(--dark-3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 32px 24px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
  .srv-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    transform: scaleX(0);
    transition: var(--transition);
    transform-origin: left;
  }
  .srv-card:hover::before { transform: scaleX(1); }
  .srv-card:hover { transform: translateY(-8px); border-color: rgba(249,115,22,0.25); box-shadow: 0 16px 48px rgba(249,115,22,0.1); }
  .featured-srv {
    background: linear-gradient(135deg, var(--dark-3), rgba(249,115,22,0.06));
    border-color: rgba(249,115,22,0.2);
  }
  .srv-icon {
    width:52px; height:52px;
    background: rgba(249,115,22,0.12);
    border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 20px;
    transition: var(--transition);
  }
  .srv-icon i { font-size:20px; color: var(--orange); }
  .srv-card:hover .srv-icon { background: var(--orange); }
  .srv-card:hover .srv-icon i { color:#fff; }
  .srv-card h3 { font-size:18px; font-weight:700; color: var(--white); margin-bottom:12px; }
  .srv-card p { font-size:14px; color: var(--gray); line-height:1.7; margin-bottom:20px; }
  .srv-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--orange); transition: var(--transition); }
  .srv-link:hover { gap:10px; }
  
  /* =========================================
     EXPERIENCE
     ========================================= */
  .experience-section { padding: 100px 0; background: var(--dark); }
  .exp-inner { display:flex; gap:80px; align-items:flex-start; }
  .exp-left { flex: 0 0 360px; }
  .exp-intro { color: var(--gray); font-size:15px; line-height:1.8; margin-top:16px; }
  .exp-cv-btn { margin-top:24px; }
  .exp-timeline { flex:1; display:flex; flex-direction:column; gap:0; position:relative; }
  .exp-timeline::before {
    content:'';
    position:absolute; left:16px; top:0; bottom:0; width:2px;
    background: linear-gradient(to bottom, var(--orange), rgba(249,115,22,0.1));
  }
  .exp-item { display:flex; gap:32px; padding-bottom:36px; position:relative; }
  .exp-item:last-child { padding-bottom:0; }
  .exp-dot {
    width:32px; height:32px; border-radius:50%;
    background: var(--dark-2); border: 2px solid var(--orange);
    flex-shrink:0; position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center;
    margin-top:4px;
  }
  .exp-dot::after {
    content:''; width:10px; height:10px; border-radius:50%;
    background: var(--orange);
  }
  .exp-content { flex:1; padding-bottom:8px; }
  .exp-year { font-size:12px; font-weight:700; color: var(--orange); letter-spacing:1px; text-transform:uppercase; }
  .exp-content h4 { font-size:16px; font-weight:700; color: var(--white); margin:6px 0 4px; }
  .exp-content p { font-size:13px; color: var(--gray); line-height:1.6; }
  .exp-tag { display:inline-block; margin-top:8px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; background:rgba(249,115,22,0.1); color:var(--orange); border:1px solid rgba(249,115,22,0.2); letter-spacing:0.5px; }
  
  /* =========================================
     WHY HIRE ME — 3D GLOW DESIGN
     ========================================= */
  /* =========================================
   WHY HIRE ME — 3D GLOW DESIGN
   ========================================= */
.why-section {
  padding: 110px 0;
  background: var(--dark-2);
  overflow: hidden;
  position: relative;
}

.why-section::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: ambient-pulse 6s ease-in-out infinite;
}

.why-section::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(249,115,22,0.07) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes ambient-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%       { transform: scale(1.15); opacity: 1; }
}

.why-inner {
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 1;
}

/* ── Image Column ── */
.why-image-col {
  flex: 0 0 420px;
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinning outer ring — perfectly centered on photo */
.why-image-col::before {
  content: '';
  position: absolute;
  width: 390px; height: 390px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(249,115,22,0.9) 0%,
    rgba(249,115,22,0.05) 30%,
    rgba(249,115,22,0.9) 60%,
    rgba(249,115,22,0.05) 80%,
    rgba(249,115,22,0.9) 100%
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px));
  animation: spin-ring 8s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* Inner pulsing glow ring */
.why-image-col::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(249,115,22,0.0)  45%,
    rgba(249,115,22,0.22) 65%,
    rgba(249,115,22,0.07) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 0 2px rgba(249,115,22,0.12),
    0 0 50px rgba(249,115,22,0.4),
    0 0 90px rgba(249,115,22,0.2),
    0 0 140px rgba(249,115,22,0.08);
  animation: glow-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes spin-ring {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

/* Ground glow shadow */
.why-img-bg {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 50px;
  background: radial-gradient(ellipse,
    rgba(249,115,22,0.55) 0%,
    rgba(249,115,22,0.18) 55%,
    transparent 80%
  );
  filter: blur(16px);
  border-radius: 50%;
  pointer-events: none;
  animation: shadow-breathe 4s ease-in-out infinite;
  z-index: 0;
}

@keyframes shadow-breathe {
  0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 0.7; }
  50%       { transform: translateX(-50%) scaleX(1.2); opacity: 1; }
}

/* The photo — circular with matching glow */
.why-photo {
  position: relative;
  z-index: 2;
  width: 320px;
  height: 320px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 3px solid rgba(249,115,22,0.45);
  box-shadow:
    0 0 0 8px rgba(249,115,22,0.06),
    0 0 35px rgba(249,115,22,0.55),
    0 0 70px rgba(249,115,22,0.28),
    0 0 120px rgba(249,115,22,0.1);
  animation: float-why 6s ease-in-out infinite;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

@keyframes float-why {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.why-image-col:hover .why-photo {
  border-color: rgba(249,115,22,0.75);
  box-shadow:
    0 0 0 10px rgba(249,115,22,0.1),
    0 0 50px rgba(249,115,22,0.75),
    0 0 95px rgba(249,115,22,0.4),
    0 0 150px rgba(249,115,22,0.15),
    inset 0 0 30px rgba(249,115,22,0.06);
}

@keyframes badge-float {
  0%, 100% { transform: translateY(calc(-50% + 0px)); }
  50%       { transform: translateY(calc(-50% - 8px)); }
}

.why-exp-pill {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #F97316, #EA580C);
  border-radius: 18px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow:
    0 8px 32px rgba(249,115,22,0.55),
    0 0 0 1px rgba(255,255,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.3);
  z-index: 4;
  animation: badge-float 5s ease-in-out infinite;
}

.why-exp-pill strong {
  font-family: var(--font-display);
  font-size: 30px;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.why-exp-pill span {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  text-align: center;
  margin-top: 5px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ── Content Side ── */
.why-content { flex: 1; }

.why-desc {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.8;
  margin-top: 16px;
  margin-bottom: 36px;
  max-width: 460px;
}

.why-stats-row { display: flex; gap: 20px; margin-bottom: 32px; }

.why-stat {
  text-align: center;
  padding: 22px 20px;
  background: var(--dark-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.why-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  transform: scaleX(0);
  transition: var(--transition);
}

.why-stat:hover::before { transform: scaleX(1); }

.why-stat:hover {
  border-color: rgba(249,115,22,0.3);
  box-shadow: 0 8px 32px rgba(249,115,22,0.1);
  transform: translateY(-4px);
}

.why-stat strong {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--orange);
  display: block;
  line-height: 1;
}

.why-stat span { font-size: 22px; color: var(--orange); font-weight: 700; }
.why-stat p    { font-size: 12px; color: var(--gray); margin-top: 8px; line-height: 1.4; }

.why-features { display: flex; flex-direction: column; gap: 14px; }

.why-feat {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--text);
  padding: 10px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.why-feat:hover {
  background: rgba(249,115,22,0.05);
  border-color: rgba(249,115,22,0.2);
  transform: translateX(4px);
}

.why-feat i {
  color: var(--orange);
  font-size: 11px;
  background: rgba(249,115,22,0.15);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(249,115,22,0.3);
}

.why-hire-btn { margin-top: 28px; display: inline-flex; }
  /* =========================================
     PORTFOLIO
     ========================================= */
  .portfolio-section { padding: 100px 0; background: var(--dark); }
  .portfolio-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:48px; flex-wrap:wrap; }
  .ptab {
    padding: 10px 24px; border-radius: 6px; font-size:13px; font-weight:600;
    background: var(--dark-3); color: var(--gray);
    border: 1px solid rgba(255,255,255,0.06);
    transition: var(--transition);
    text-transform: uppercase; letter-spacing:0.5px;
  }
  .ptab.active, .ptab:hover { background: var(--orange); color:#fff; border-color: var(--orange); }
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .pcard { position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio:4/3; cursor:pointer; transition: var(--transition); }
  .pcard img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
  .pcard:hover img { transform: scale(1.08); }
  .pcard-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(12,12,12,0.95) 0%, rgba(12,12,12,0.3) 60%, transparent 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:20px; opacity:0; transition: var(--transition);
  }
  .pcard:hover .pcard-overlay { opacity:1; }
  .pcard-cat { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color: var(--orange); background:rgba(249,115,22,0.15); padding:3px 8px; border-radius:4px; width:fit-content; margin-bottom:6px; }
  .pcard-overlay h4 { font-size:15px; font-weight:700; color: var(--white); margin-bottom:4px; }
  .pcard-overlay p { font-size:12px; color: var(--gray-light); line-height:1.5; margin-bottom:12px; }
  .pcard-link { width:36px; height:36px; border-radius:50%; background: var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; transition: var(--transition); }
  .pcard-link:hover { background: var(--orange-dark); transform:scale(1.1); }
  .pcard[data-cat].hidden { display:none; }
  
  /* =========================================
     MARQUEE
     ========================================= */
  .marquee-strip {
    background: var(--orange);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .marquee-track {
    display: inline-flex;
    gap: 0;
    animation: marquee-scroll 22s linear infinite;
  }
  .marquee-track span {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 20px;
  }
  .marquee-track .mx { color: rgba(255,255,255,0.5); padding: 0 4px; }
  @keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
  /* =========================================
     CERTIFICATES
     ========================================= */
  .certs-section { padding: 100px 0; background: var(--dark-2); }
  .certs-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
  .cert-card {
    background: var(--dark-3); border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.06);
    overflow:hidden; cursor:pointer; transition: var(--transition);
  }
  .cert-card:hover { transform: translateY(-6px); border-color: rgba(249,115,22,0.3); box-shadow: 0 12px 40px rgba(249,115,22,0.1); }
  .cert-card img { width:100%; height:180px; object-fit:cover; background: var(--dark-4); transition: transform 0.4s ease; }
  .cert-card:hover img { transform: scale(1.04); }
  .cert-info { padding: 16px 20px; }
  .cert-info h4 { font-size:14px; font-weight:700; color: var(--white); margin-bottom:4px; }
  .cert-info p { font-size:12px; color: var(--gray); }
  .hidden-cert { display:none; }
  
  /* Cert popup */
  .cert-popup { position:fixed; inset:0; background:rgba(0,0,0,0.88); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px; }
  .cert-popup.active { display:flex; }
  .cert-popup-inner { position:relative; max-width:800px; width:100%; background: var(--dark-3); border-radius: var(--radius); padding:20px; box-shadow: 0 20px 80px rgba(0,0,0,0.5); animation: popup-in 0.3s ease; }
  @keyframes popup-in { from { transform:scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; } }
  .cert-popup-inner img { width:100%; border-radius: var(--radius-sm); }
  .cert-popup-close { position:absolute; top:-16px; right:-16px; width:36px; height:36px; border-radius:50%; background: var(--orange); color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; }
  
  /* =========================================
     ACHIEVEMENTS
     ========================================= */
  .achieve-section { padding: 100px 0; background: var(--dark); }
  .achieve-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
  .ach-card {
    background: var(--dark-3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
    cursor: default;
  }
  .ach-card:hover { transform: translateY(-8px); border-color:rgba(249,115,22,0.25); box-shadow: 0 16px 40px rgba(249,115,22,0.08); }
  .ach-icon { font-size:36px; margin-bottom:16px; }
  .ach-card h4 { font-size:16px; font-weight:700; color: var(--white); margin-bottom:10px; }
  .ach-card p { font-size:13px; color: var(--gray); line-height:1.7; }
  
  /* =========================================
     GALLERY CAROUSEL
     ========================================= */
  .gallery-section { padding: 100px 0; background: var(--dark-2); }
  .carousel-wrap { position:relative; max-width:900px; margin:0 auto; border-radius: var(--radius); overflow:hidden; aspect-ratio:16/9; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
  .carousel { width:100%; height:100%; position:relative; }
  .c-slide { position:absolute; inset:0; opacity:0; transform:scale(0.96); transition: all 0.6s ease; z-index:0; }
  .c-slide.active { opacity:1; transform:scale(1); z-index:1; }
  .c-slide img { width:100%; height:100%; object-fit:cover; }
  .c-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.15); color:#fff; width:44px; height:44px; border-radius:50%; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: var(--transition); }
  .c-btn:hover { background: var(--orange); border-color: var(--orange); }
  .c-prev { left:16px; }
  .c-next { right:16px; }
  
  /* =========================================
     CTA BANNER
     ========================================= */
  .cta-banner {
    padding: 80px 5%;
    background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 50%, #fb923c 100%);
    position: relative; overflow:hidden;
  }
  .cta-banner::before {
    content:'';
    position:absolute; top:-80px; right:-80px;
    width:300px; height:300px;
    border-radius:50%;
    background: rgba(255,255,255,0.06);
    pointer-events:none;
  }
  .cta-banner::after {
    content:'';
    position:absolute; bottom:-60px; left:-60px;
    width:240px; height:240px;
    border-radius:50%;
    background: rgba(255,255,255,0.04);
    pointer-events:none;
  }
  .cta-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:40px; flex-wrap:wrap; position:relative; z-index:1;
  }
  .cta-text h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); color:#fff; line-height:1.2; }
  .cta-text h2 em { font-style:italic; }
  .cta-text p { color:rgba(255,255,255,0.8); font-size:15px; margin-top:10px; }
  .cta-actions { display:flex; gap:14px; flex-wrap:wrap; }
  .cta-actions .btn-primary { background:#fff; color: var(--orange-dark); border-color:#fff; }
  .cta-actions .btn-primary:hover { background: var(--dark); color:#fff; border-color: var(--dark); }
  
  /* =========================================
     CONTACT
     ========================================= */
  .contact-section { padding: 100px 0; background: var(--dark); }
  .contact-inner { display:flex; gap:80px; align-items:flex-start; }
  .contact-left { flex:0 0 380px; }
  .contact-desc { color: var(--gray); font-size:15px; line-height:1.8; margin-top:16px; margin-bottom:32px; }
  .contact-details { display:flex; flex-direction:column; gap:16px; margin-bottom:32px; }
  .cdetail { display:flex; align-items:center; gap:14px; }
  .cdetail i { color: var(--orange); font-size:16px; width:40px; height:40px; background:rgba(249,115,22,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cdetail span { font-size:14px; color: var(--text); }
  .social-row { display:flex; gap:12px; }
  .social-row a { width:42px; height:42px; border-radius:10px; background: var(--dark-3); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:16px; color: var(--gray); transition: var(--transition); }
  .social-row a:hover { background: var(--orange); color:#fff; border-color: var(--orange); transform:translateY(-3px); }
  
  .contact-right { flex:1; }
  .contact-form { display:flex; flex-direction:column; gap:16px; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .contact-form input,
  .contact-form textarea {
    background: var(--dark-3); border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm); padding: 14px 18px;
    color: var(--white); font-size:14px; font-family: var(--font-body);
    transition: var(--transition); outline:none; width:100%;
  }
  .contact-form input:focus, .contact-form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }
  .contact-form textarea { resize:vertical; min-height:120px; }
  .form-submit { align-self:flex-start; }
  #msg { font-size:14px; padding:10px 0; }
  
  /* =========================================
     FOOTER
     ========================================= */
  .footer { background: var(--dark-2); border-top: 1px solid rgba(255,255,255,0.05); padding-top:60px; }
  .footer-inner {
    max-width:1200px; margin:0 auto; padding:0 5% 48px;
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  }
  .footer-brand .footer-logo-img { height:44px; margin-bottom:16px; }
  .footer-brand p { font-size:13px; color: var(--gray); line-height:1.7; }
  .footer-links h5 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color: var(--white); margin-bottom:20px; }
  .footer-links a { display:block; font-size:13px; color: var(--gray); margin-bottom:10px; transition: var(--transition); }
  .footer-links a:hover { color: var(--orange); padding-left:4px; }
  .footer-bar { border-top:1px solid rgba(255,255,255,0.05); padding: 20px 5%; text-align:center; }
  .footer-bar p { font-size:13px; color: var(--gray); }
  .footer-bar i { color: var(--orange); }
  
  /* =========================================
     RESPONSIVE
     ========================================= */
  @media (max-width: 1100px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .achieve-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-inner { grid-template-columns:1fr 1fr; gap:36px; }
  }
  
  @media (max-width: 900px) {
    .hero-inner { flex-direction: column; text-align:center; gap:40px; }
    .hero-image { width:300px; height:340px; }
    .hero-photo { width:260px; height:300px; }
    .hero-stats { justify-content:center; }
    .hero-actions { justify-content:center; }
    .hero-eyebrow { justify-content:center; }
    .hero-desc { margin:0 auto 36px; }
    .hero-badge-top { right:auto; left:50%; transform:translateX(60px); }
    .hero-badge-bot { left:auto; right:50%; transform:translateX(60px); bottom:5%; }
    .exp-inner { flex-direction:column; gap:40px; }
    .exp-left { flex:none; width:100%; }
    .why-inner { flex-direction:column; gap:40px; }
    .why-image-col { flex:none; width:100%; max-width:360px; height:400px; margin:0 auto; }
    .contact-inner { flex-direction:column; gap:48px; }
    .contact-left { flex:none; width:100%; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .certs-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-inner { flex-direction:column; text-align:center; }
    .cta-actions { justify-content:center; }
  }
  
  @media (max-width: 768px) {
    .navbar { padding: 12px 5%; }
    .nav-links {
      position:fixed; top:0; right:-100%; width:260px; height:100vh;
      background: var(--dark-2); flex-direction:column; align-items:flex-start;
      padding:70px 28px 28px; gap:4px; z-index:99;
      border-left:1px solid rgba(255,255,255,0.05);
      transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
      box-shadow: -8px 0 40px rgba(0,0,0,0.4);
    }
    .nav-links.open { right:0; }
    .nav-links li { width:100%; }
    .nav-links li a { display:block; padding:10px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.04); }
    .nav-resume-btn { margin-top:12px; display:inline-flex !important; border-radius:6px; padding:10px 20px !important; }
    .nav-close-li { display:block; position:absolute; top:20px; right:20px; }
    .nav-close-li .nav-close { font-size:20px; color: var(--gray); cursor:pointer; }
    .hamburger { display:flex; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .achieve-grid { grid-template-columns: 1fr 1fr; }
    .portfolio-grid { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns:1fr 1fr; }
    .form-row { grid-template-columns:1fr; }
  }
  
  @media (max-width: 520px) {
    .hero { padding: 100px 5% 60px; }
    .hero-image { width:240px; height:280px; }
    .hero-photo { width:200px; height:240px; }
    .hero-badge { font-size:11px; padding:8px 12px; }
    .services-grid { grid-template-columns: 1fr; }
    .achieve-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr 1fr; gap:12px; }
    .certs-grid { grid-template-columns: 1fr; }
    .why-stats-row { flex-direction:column; gap:12px; }
    .footer-inner { grid-template-columns:1fr; gap:28px; }
    .hero-stats { gap:0; }
    .hstat { padding:0 16px; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:0.01ms !important;
      transition-duration:0.01ms !important;
      animation-iteration-count:1 !important;
    }
  }