/* ===============================
   Pro Theme – Mobile-first, polished & enhanced
   =============================== */
:root{
  --accent:#2563eb;         /* Blue 600 */
  --accent-2:#7c3aed;       /* Violet 600 */
  --accent-3:#0ea5e9;       /* Sky 500 */
  --success:#059669;        /* Green 600 */
  --warning:#d97706;        /* Orange 600 */
  --error:#dc2626;          /* Red 600 */
  --ink:#0f172a;            /* Slate 900 */
  --muted:#64748b;          /* Slate 500 */
  --bg:#ffffff;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
  --radius:16px;
  --focus:#f59e0b;          /* Amber 500 */
  --gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1120;           /* Navy dark */
    --card:#0f172a;
    --ink:#e2e8f0;
    --muted:#94a3b8;
    --border:#1e293b;
    --shadow: 0 8px 28px rgba(0,0,0,0.55);
    --shadow-lg: 0 24px 56px rgba(0,0,0,0.7);
    --accent:#60a5fa;
    --accent-2:#a78bfa;
    --accent-3:#38bdf8;
    --focus:#fbbf24;
  }
}

*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;padding:10px 12px;background:var(--accent);color:#fff;border-radius:12px;z-index:9999}

/* Focus */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid var(--focus); outline-offset:2px}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:saturate(140%) blur(6px);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--border);
  transition: all 0.3s ease;
}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;transition: transform 0.2s ease;}
.brand:hover{transform: translateY(-1px);}
.logo{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--gradient);
  color:#fff;font-weight:800;letter-spacing:.3px;box-shadow:var(--shadow);
  font-size: 18px;
  position: relative;
  overflow: hidden;
}
.logo::before{
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.logo:hover::before{opacity: 1;}
.logo.small{width:34px;height:34px;border-radius:10px;font-size:14px}
.brand .name{font:700 20px/1 'Poppins', system-ui;color:var(--ink)}

nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
nav a{
  text-decoration:none;color:var(--muted);padding:12px 16px;border-radius:12px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}
nav a::before{
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
nav a:hover::before,
nav a.active::before{opacity: 1;}
nav a.active,nav a:hover{color:var(--accent);transform: translateY(-1px);}

/* Gradient ribbon under header */
.ribbon{height:4px;background:var(--gradient);animation: shimmer 3s ease-in-out infinite;}
@keyframes shimmer{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Main spacing */
main{padding:28px 0 60px}

/* Footer */
.footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);margin-top: 60px;}
.footer-grid{display:grid;gap:16px;grid-template-columns:1fr auto;align-items:center}
.foot-name{font-weight:700;margin:6px 0}
.foot-links{display:flex;gap:14px;flex-wrap:wrap}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--accent)}

/* Enhanced Hero */
.hero{
  display:grid;gap:40px;grid-template-columns:1.2fr .8fr;
  padding:60px 0;align-items:center;min-height:70vh;
  position: relative;
}
.hero::before{
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}
@media (max-width: 900px){ .hero{grid-template-columns:1fr;padding:60px 0 40px;text-align:center;} }
.hero h1{margin:0 0 24px 0;font:800 clamp(2.5rem, 5vw, 3.5rem)/1.1 'Poppins', system-ui;
         background: linear-gradient(135deg, var(--ink), var(--accent));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;}
.hero p.lead{color:var(--muted);margin:0 0 32px 0;font-size: 1.25rem;max-width: 600px;}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin:32px 0;justify-content:flex-start;}
@media (max-width: 900px){.stats{justify-content:center;}}
.stat{
  padding:16px 20px;border:1px solid var(--border);border-radius:16px;background:var(--card);
  box-shadow:var(--shadow);font-weight:600;color:var(--ink);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.stat::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient);
}
.stat:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced Buttons */
.cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px;}
@media (max-width: 900px){.cta{justify-content:center;}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;border-radius:16px;border:1px solid var(--border);
  background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;box-shadow:var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn.primary{background:var(--gradient);color:#fff;border-color:transparent}
.btn.primary::before{background: linear-gradient(135deg, var(--accent-2), var(--accent-3));}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn.primary:hover::before,
.btn:hover::before{opacity: 1;}
.btn span{position: relative;z-index: 1;}
@media (max-width:480px){ .cta .btn{flex: 1;min-width: 200px;} }

/* Enhanced Hero Card */
.hero-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  box-shadow:var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
}

/* Sections & Cards */
h2{color:var(--ink);margin:60px 0 16px;font:700 2.5rem/1.2 'Poppins', system-ui;position:relative;text-align:center;}
h2:after{content:"";display:block;width:80px;height:4px;background:var(--gradient);border-radius:6px;margin:16px auto 0;}
h3{color:var(--ink);margin:24px 0 12px;font:600 1.5rem/1.3 'Poppins', system-ui;}
.section-subtitle{text-align:center;font-size:1.25rem;color:var(--muted);margin-bottom:60px;}
.card{border:1px solid var(--border);background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);
      transition: all 0.3s ease;position: relative;overflow: hidden;}
.card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.card:hover::before{transform: translateX(0);}
.card:hover{transform: translateY(-4px);box-shadow: var(--shadow-lg);}

/* Grid */
.grid{display:grid;gap:24px;grid-template-columns:repeat(12,1fr)}
.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width: 900px){ .col-4,.col-6,.col-8{grid-column:span 12} }

/* Enhanced Stats Section */
.quick-stats{
  background: var(--light);
  padding: 60px 0;
  margin: 60px 0;
  border-radius: 32px;
  text-align: center;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.stat-item{
  background: var(--card);
  padding: 32px 20px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.stat-item:hover{transform: translateY(-4px);}
.stat-number{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--accent);
  display: block;
}
.stat-label{
  color: var(--muted);
  font-weight: 500;
  margin-top: 8px;
}

/* Skills Grid */
.skills-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.skill-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.skill-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.skill-card:hover::before{transform: translateX(0);}
.skill-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.skill-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gradient);
  display: grid;
  place-items: center;
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}
.skill-card h3{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--ink);
}
.skill-list{
  list-style: none;
  padding: 0;
}
.skill-list li{
  padding: 8px 0;
  color: var(--muted);
  position: relative;
  padding-left: 20px;
}
.skill-list li::before{
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

/* Lists */
ul{padding-left:20px;margin:8px 0} 
li{margin:6px 0}
.feature-list{list-style: none;padding: 0;}
.feature-list li{
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  position: relative;
  padding-left: 24px;
}
.feature-list li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: bold;
}
.feature-list li:last-child{border-bottom: none;}

/* Forms */
.form{display:grid;gap:20px;max-width:680px;margin: 0 auto;}
.form-group{display: grid;gap: 8px;}
.form-group label{font-weight: 600;color: var(--ink);}
.input,textarea{
  width:100%;padding:16px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);color:var(--ink);outline:none;font-size: 16px;
  transition: all 0.2s ease;
}
textarea{min-height:140px;resize:vertical;font-family: inherit;}
.input:focus,textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Alerts */
.alert{
  padding:16px 20px;border:1px solid var(--border);border-radius:12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color:var(--ink);margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.alert::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}
.alert.success{
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.alert.success::before{background: var(--success);}
.alert.error{
  background: color-mix(in srgb, var(--error) 8%, transparent);
}
.alert.error::before{background: var(--error);}

/* Testimonials */
.testimonial{display:flex;gap:16px;align-items:flex-start;}
.avatar{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--gradient);color:#fff;font-weight:700;box-shadow:var(--shadow);
  font-size: 18px;
}
.quote{font-size:16px;line-height: 1.6;}
.sig{color:var(--muted);margin-top:8px;font-size: 14px;}

/* Case Studies – responsive grid/cards */
.case-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
}
.case-card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.case-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.case-card:hover::before{transform: translateX(0);}
.case-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.case-card h3{
  margin:8px 0 12px;
  font:700 1.25rem/1.3 'Poppins', system-ui;
  color:var(--ink);
}
.case-meta{ 
  color:var(--accent); 
  margin:0 0 16px;
  font-weight: 600;
  font-size: 15px;
}
.case-icon{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--gradient);
  color:#fff; font-size:24px; box-shadow:var(--shadow);
  margin-bottom: 16px;
}

/* About Section */
.about-grid{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  margin: 40px 0;
}
@media (max-width: 768px){
  .about-grid{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
}
.profile-image{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--border);
}
@media (max-width: 768px){
  .profile-image{
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
}

/* Resume Timeline */
.timeline{
  position: relative;
  padding-left: 32px;
}
.timeline::before{
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gradient);
}
.timeline-item{
  position: relative;
  margin-bottom: 40px;
}
.timeline-item::before{
  content: '';
  position: absolute;
  left: -38px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid var(--bg);
  box-shadow: var(--shadow);
}
.timeline-date{
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Animations */
@keyframes fadeInUp{
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in{animation: fadeInUp 0.6s ease forwards;}

/* Contact Form */
.contact-section{
  background: var(--light);
  padding: 60px 0;
  margin: 60px 0;
  border-radius: 32px;
}

/* Mobile Navigation */
@media (max-width: 768px){
  .navbar{
    flex-direction: column;
    gap: 16px;
  }
  nav{
    width: 100%;
    justify-content: center;
  }
  .container{
    padding: 0 16px;
  }
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark){
  .case-card h3,
  .skill-card h3,
  h2, h3{ color: var(--ink); }
  .quick-stats{
    background: var(--light);
  }
  .contact-section{
    background: var(--light);
  }
}

<h2>Case Studies</h2>
<p style="text-align: center; font-size: 1.1rem; color: var(--muted); margin-bottom: 40px;">
  Real-world examples of how strategic HR initiatives drive measurable business results
</p>

<div class="grid">
  <article class="card col-6">
    <div style="width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: white; font-size: 24px; margin-bottom: 20px;">🎓</div>
    <h3>Virtual Onboarding Program</h3>
    <p style="color: var(--accent); font-weight: 600; margin-bottom: 16px;"><strong>Result:</strong> Turnover reduced to 14% over ~2½ years</p>
    
    <p style="margin-bottom: 16px; color: var(--muted);">
      Redesigned the entire onboarding experience for a distributed team environment, creating a comprehensive program that ensured consistent training regardless of location.
    </p>
    
    <ul style="margin: 16px 0;">
      <li>Role-specific ramp plans and playbooks</li>
      <li>Peer shadowing + mentorship tracks</li>
      <li>30/60/90 milestones with data-driven coaching</li>
      <li>Virtual training modules with assessments</li>
    </ul>
    
    <div style="background: color-mix(in srgb, var(--success) 10%, transparent); padding: 12px; border-radius: 8px; border-left: 4px solid var(--success); margin-top: 16px;">
      <strong>Impact:</strong> Achieved industry-leading retention rates while maintaining quality standards.
    </div>
  </article>

  <article class="card col-6">
    <div style="width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: white; font-size: 24px; margin-bottom: 20px;">📈</div>
    <h3>FCR & CSAT Improvement</h3>
    <p style="color: var(--accent); font-weight: 600; margin-bottom: 16px;"><strong>Result:</strong> FCR +18%, CSAT +12%</p>
    
    <p style="margin-bottom: 16px; color: var(--muted);">
      Implemented comprehensive quality improvement program that transformed customer interactions through systematic analysis and targeted interventions.
    </p>
    
    <ul style="margin: 16px 0;">
      <li>Refined QA standards and scorecards</li>
      <li>Targeted coaching with call-pattern analysis</li>
      <li>Knowledge base updates &amp; call flows</li>
      <li>Real-time feedback systems</li>
    </ul>
    
    <div style="background: color-mix(in srgb, var(--success) 10%, transparent); padding: 12px; border-radius: 8px; border-left: 4px solid var(--success); margin-top: 16px;">
      <strong>Impact:</strong> Significant improvements in efficiency and customer satisfaction.
    </div>
  </article>

  <article class="card col-6">
    <div style="width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: white; font-size: 24px; margin-bottom: 20px;">🔄</div>
    <h3>Onboarding Redesign</h3>
    <p style="color: var(--accent); font-weight: 600; margin-bottom: 16px;"><strong>Result:</strong> Ramp-up −30%; retention +24–25%</p>
    
    <p style="margin-bottom: 16px; color: var(--muted);">
      Completely reimagined the new hire experience, moving from ad-hoc training to a structured, measurable program.
    </p>
    
    <ul style="margin: 16px 0;">
      <li>Structured curriculum with weekly checkpoints</li>
      <li>Live practice labs for edge cases</li>
      <li>Manager playbook for consistent feedback</li>
      <li>Peer mentoring and buddy systems</li>
    </ul>
    
    <div style="background: color-mix(in srgb, var(--success) 10%, transparent); padding: 12px; border-radius: 8px; border-left: 4px solid var(--success); margin-top: 16px;">
      <strong>Impact:</strong> Faster time-to-productivity with improved retention rates.
    </div>
  </article>

  <article class="card col-6">
    <div style="width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: white; font-size: 24px; margin-bottom: 20px;">🛡️</div>
    <h3>Revenue Protection</h3>
    <p style="color: var(--accent); font-weight: 600; margin-bottom: 16px;"><strong>Result:</strong> Fraud losses reduced by ~20%</p>
    
    <p style="margin-bottom: 16px; color: var(--muted);">
      Developed comprehensive fraud prevention protocols that protected company revenue while maintaining excellent customer experience.
    </p>
    
    <ul style="margin: 16px 0;">
      <li>Verification workflows + training modules</li>
      <li>Dashboard for escalation visibility</li>
      <li>Rapid feedback loop with policy team</li>
      <li>Agent training on fraud detection</li>
    </ul>
    
    <div style="background: color-mix(in srgb, var(--success) 10%, transparent); padding: 12px; border-radius: 8px; border-left: 4px solid var(--success); margin-top: 16px;">
      <strong>Impact:</strong> Substantial reduction in fraud while maintaining customer trust.
    </div>
  </article>
</div>

<section style="background: var(--light); padding: 40px; margin: 60px 0; border-radius: 20px; text-align: center;">
  <h2 style="margin-top: 0;">Ready to Transform Your Team?</h2>
  <p style="font-size: 1.1rem; color: var(--muted); margin-bottom: 32px;">
    These results aren't accidents—they're the outcome of strategic, systematic approaches to people operations.
  </p>
  <div>
    <a href="/resume" class="btn primary" style="margin-right: 16px;">View Full Experience</a>
    <a href="/testimonials" class="btn">Read Testimonials</a>
  </div>
</section>