/* =========================================================
   Portfolio Stylesheet (Complete)
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root {
  --nav-height: 70px;
  --profile-size: clamp(160px, 18vw, 200px);

  --font-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;
  --color-text: #1e293b;
  --color-text-alt: #64748b;
  --color-primary: #2563eb;
  --color-primary-alt: #1d4ed8;
  --color-accent: #7c3aed;
  --color-border: #e2e8f0;
  --color-danger: #dc2626;
  --gradient-accent: linear-gradient(135deg,var(--color-primary),var(--color-accent));

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 22px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 40px rgba(37,99,235,0.20);

  --transition: .3s ease;
  --anchor-offset: calc(var(--nav-height) + 14px);
}

@media (max-width: 480px) {
  :root { --profile-size: 150px; }
}

/* ---------- Base Reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-stack);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, picture, video, canvas, svg { display:block; max-width:100%; }
video { height:auto; }
ul, ol { list-style:none; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
:focus-visible {
  outline:2px solid var(--color-primary);
  outline-offset:3px;
  border-radius:4px;
}
section { scroll-margin-top:var(--anchor-offset); }
.container { max-width:1200px; margin:0 auto; padding:0 20px; width:100%; }
::selection { background:var(--color-primary); color:#fff; }

/* ---------- Utilities ---------- */
.hidden { display:none !important; }
.text-center { text-align:center; }
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
.inline-link { color:var(--color-primary); text-decoration:none; position:relative; }
.inline-link::after {
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--color-primary); transition:width var(--transition);
}
.inline-link:hover::after,
.inline-link:focus-visible::after { width:100%; }

/* ---------- Navigation ---------- */
.navbar {
  position:fixed; inset:0 0 auto 0; height:var(--nav-height);
  background:var(--color-surface); border-bottom:1px solid rgba(0,0,0,0.08);
  z-index:1000; backdrop-filter:saturate(180%) blur(12px);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; justify-content:space-between; align-items:center; height:100%;
}
.nav-logo a {
  font-size:1.45rem; font-weight:700; letter-spacing:.5px;
  background:linear-gradient(45deg,var(--color-primary),var(--color-accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-menu { display:flex; gap:2rem; }
.nav-link {
  position:relative; font-weight:500; color:#334155; padding:.35rem 0;
  transition:color var(--transition);
}
.nav-link::after {
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--color-primary); transition:width var(--transition);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { width:100%; }
.nav-toggle { display:none; flex-direction:column; gap:6px; background:none; border:0; }
.nav-toggle span { width:26px; height:3px; background:#334155; transition:var(--transition); border-radius:2px; }

/* ---------- Hero ---------- */
.hero {
  min-height:calc(100dvh - var(--nav-height));
  padding:var(--nav-height) 0 3rem;
  display:flex; align-items:center; position:relative;
  background:var(--color-bg); overflow:hidden;
}
.hero::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(to right,transparent,#dbe2ea,transparent);
}
.hero-container {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  max-width:1200px; margin:0 auto; padding:0 20px; width:100%;
}
.hero-title { font-size:clamp(2.4rem,5vw,3.5rem); font-weight:700; line-height:1.15; margin-bottom:1rem; }
@media (min-width:1024px){ .hero-title { white-space:nowrap; } }
.highlight {
  background:linear-gradient(45deg,var(--color-primary),var(--color-accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-subtitle { font-size:1.5rem; font-weight:500; margin-bottom:1rem; opacity:.9; }
.hero-description { font-size:1.05rem; margin-bottom:2rem; opacity:.85; line-height:1.6; }
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.btn {
  display:inline-block; padding:12px 30px; border-radius:50px;
  font-weight:600; text-decoration:none; border:2px solid transparent;
  transition:var(--transition); position:relative;
}
.btn-primary {
  background:var(--color-primary); color:#fff;
  box-shadow:0 4px 15px rgba(37,99,235,.30);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background:var(--color-primary-alt); transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(37,99,235,.40);
}
.btn-secondary {
  background:transparent; color:var(--color-primary); border:2px solid var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background:var(--color-primary); color:#fff; transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(37,99,235,.30);
}

/* Profile Image Card */
.profile-card {
  background:rgba(255,255,255,0.85); backdrop-filter:blur(20px);
  border:1px solid rgba(37,99,235,0.20);
  border-radius:var(--radius-xl);
  padding:2rem; text-align:center;
  box-shadow:0 8px 32px rgba(37,99,235,0.15);
  align-self:center;
}
.profile-img-container {
  width:var(--profile-size); height:var(--profile-size);
  overflow:hidden; margin:0 auto; position:relative;
  border-radius:50%;
}
.profile-img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  border:3px solid rgba(255,255,255,0.3);
  box-shadow:0 6px 24px rgba(37,99,235,0.30);
  transition:var(--transition);
  border-radius:50%;
}
.profile-img:hover { transform:scale(1.05); box-shadow:0 8px 30px rgba(37,99,235,0.40); }

/* ---------- Generic Section Layout ---------- */
section:not(.hero) { padding:5rem 0; }
.section-title {
  text-align:center; font-size:2.4rem; font-weight:700;
  margin-bottom:3rem; color:#1f2937; position:relative; line-height:1.15;
}
.section-title::after {
  content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:80px; height:3px; background:linear-gradient(45deg,var(--color-primary),var(--color-accent));
  border-radius:2px;
}

/* ---------- About ---------- */
.about { background:var(--color-bg); padding-top:4rem; }
.about-content { 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); 
  gap:3rem 4rem; 
  align-items:start; 
}
.about-text p {
  font-size:1.05rem; margin-bottom:1.5rem;
  color:var(--color-text-alt); line-height:1.75;
}
.about-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.5rem; margin-top:2rem;
}
.stat {
  text-align:center; padding:1.5rem; background:var(--color-surface);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
}
.stat h3 { font-size:2rem; font-weight:700; color:var(--color-primary); margin-bottom:.4rem; }
.stat p { color:var(--color-text-alt); font-weight:500; font-size:.8rem; letter-spacing:.5px; }

/* About Actions (Books + Resume buttons inline) */
.about-actions {
  margin-top:1.75rem;
  display:flex;
  gap:1rem;
  flex-wrap:nowrap;
  align-items:center;
}
.about-actions__btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.75rem;
  padding:.65rem 1.2rem;
  white-space:nowrap;
}
.about-actions__btn i { font-size:.9rem; }

/* About Video Resume */
.about-video { 
  margin-top:0; 
  text-align:center; 
  align-self:start; 
}
.about-video__title { font-size:1.6rem; font-weight:600; margin-bottom:1rem; color:var(--color-text); }
.about-video__player {
  position:relative; max-width:680px; margin:0 auto;
  aspect-ratio:16 / 9; background:#000;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid #0f172a;
}
.about-video__media { width:100%; height:100%; object-fit:cover; display:block; }
.about-video__caption {
  font-size:.9rem; color:var(--color-text-alt);
  margin:.75rem auto 1.2rem; max-width:620px; line-height:1.4;
}

/* ---------- Skills ---------- */
.skills-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
}
.skill-category {
  background:var(--color-surface); padding:2rem;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
  display:flex; flex-direction:column; gap:1.2rem; min-height:100%;
}
.skill-category h3 {
  font-size:1.25rem; font-weight:600; margin:0 0 .5rem;
  text-align:center; line-height:1.2; color:var(--color-text);
}
.skill-items {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
}
.skill-item {
  display:flex; flex-direction:column; align-items:center;
  padding:1rem .75rem; background:var(--color-bg);
  border-radius:var(--radius-md); cursor:pointer; transition:var(--transition);
  text-align:center; box-shadow:var(--shadow-xs);
}
.skill-item:hover,
.skill-item:focus-visible {
  transform:translateY(-5px); background:var(--color-primary); color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,0.10);
}
.skill-item i {
  font-size:2rem; margin-bottom:.5rem; color:var(--color-primary); transition:var(--transition);
}
.skill-item:hover i,
.skill-item:focus-visible i { color:#fff; }
.skill-item span { font-size:.8rem; font-weight:500; text-align:center; line-height:1.15; }

/* Skills Resource Buttons */
.skills__actions {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.75rem; margin:2rem auto 0; max-width:780px;
}
.btn--chip {
  --chip-bg: var(--color-surface);
  --chip-border: var(--color-border);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  padding:.55rem 1.05rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--color-text);
  display:inline-flex; align-items:center; gap:.45rem; line-height:1;
  transition:var(--transition); box-shadow:var(--shadow-xs); text-decoration:none;
}
.btn--chip i { font-size:.85rem; color:var(--color-primary); transition:var(--transition); }
.btn--chip:hover,
.btn--chip:focus-visible {
  background:var(--color-primary); color:#fff;
  border-color:var(--color-primary); transform:translateY(-2px);
}
.btn--chip:hover i,
.btn--chip:focus-visible i { color:#fff; }

/* ---------- Training & Certifications ---------- */
.training { padding:4rem 0; }
.cards-grid {
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.mini-card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  padding:1rem .95rem;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  display:flex; flex-direction:column; gap:.4rem; min-height:130px;
}
.mini-card:hover,
.mini-card:focus-within {
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary);
}
.mini-card__title { font-size:.9rem; font-weight:600; line-height:1.25; }
.mini-card__meta { font-size:.7rem; color:var(--color-text-alt); line-height:1.25; }

/* ---------- Books (Standalone Section) ---------- */
.books { padding:4rem 0; }
.books-grid {
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.book {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:1rem .95rem;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  display:flex; flex-direction:column; gap:.4rem; min-height:130px;
}
.book:hover,
.book:focus-within {
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary);
}
.book__title { font-size:.9rem; font-weight:600; line-height:1.25; }
.book__tagline { font-size:.7rem; line-height:1.2; color:var(--color-text-alt); }

/* ---------- Projects ---------- */
.projects-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem;
}
.project-card {
  background:var(--color-surface); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm); position:relative; transition:var(--transition);
  display:flex; flex-direction:column;
}
.project-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-md); }
.project-image {
  height:200px; background:var(--gradient-accent);
  display:flex; align-items:center; justify-content:center;
}
.project-img-placeholder { font-size:3rem; color:#fff; }
.project-content { padding:2rem; display:flex; flex-direction:column; gap:1rem; flex-grow:1; }
.project-content h3 { font-size:1.35rem; font-weight:600; }
.project-content p { color:var(--color-text-alt); line-height:1.55; font-size:.95rem; }
.project-tech { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; }
.project-tech span {
  background:#e2e8f0; color:#475569; padding:.25rem .7rem;
  border-radius:20px; font-size:.7rem; font-weight:600; letter-spacing:.5px;
}

/* ---------- Contact ---------- */
.contact-content { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h3 { font-size:2rem; font-weight:600; margin-bottom:1rem; }
.contact-info p { color:var(--color-text-alt); line-height:1.6; margin-bottom:2rem; }
.contact-item { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; color:var(--color-text-alt); font-size:.9rem; }
.contact-item i { width:20px; color:var(--color-primary); font-size:1rem; }
.social-links { display:flex; gap:1rem; }
.social-link {
  width:50px; height:50px; background:var(--color-surface-alt); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#64748b; text-decoration:none; transition:var(--transition); box-shadow:var(--shadow-xs);
}
.social-link:hover,
.social-link:focus-visible {
  background:var(--color-primary); color:#fff; transform:translateY(-3px);
}
.contact-form {
  background:var(--color-surface); padding:2rem; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--color-border);
}
.form-group { margin-bottom:1.5rem; }
.form-group input,
.form-group textarea {
  width:100%; padding:1rem; border:2px solid var(--color-border);
  border-radius:var(--radius-md); font:inherit; background:var(--color-bg);
  transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--color-primary); background:#fff;
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-hint { font-size:.75rem; }

/* ---------- Footer ---------- */
.footer {
  background:#1e293b; color:#fff; text-align:center; padding:2rem 0;
  font-size:.85rem; letter-spacing:.3px;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .hero-container { gap:3rem; }
  .skills-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
}

@media (max-width:900px) {
  .hero-container { grid-template-columns:1fr; gap:2.5rem; text-align:center; }
  .hero-buttons { justify-content:center; }
  .about-content { grid-template-columns:1fr; gap:2rem; }
  .contact-content { grid-template-columns:1fr; gap:2.5rem; }
  .skills-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
}

@media (max-width:860px) {
  .about-content { grid-template-columns:1fr; }
  .about-video { margin-top:2.2rem; }
}

@media (max-width:768px) {
  .nav-menu {
    position:fixed; top:var(--nav-height); left:-100%; width:100%;
    flex-direction:column; background:#fff; text-align:center;
    transition:var(--transition); box-shadow:0 10px 27px rgba(0,0,0,0.05);
    padding:2rem 0;
  }
  .nav-menu.active { left:0; }
  .nav-toggle { display:flex; }
  .hero-title { font-size:2.4rem; }
  .projects-grid { grid-template-columns:1fr; }
  .skills-grid { grid-template-columns:1fr; }
  .cards-grid,
  .books-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
}

@media (max-width:600px) {
  .skills__actions { margin-top:1.5rem; }
  .btn--chip { font-size:.65rem; padding:.5rem .85rem; }
  .cards-grid,
  .books-grid { gap:.9rem; }
  .about-video__title { font-size:1.35rem; }
  .about-video__player { border-radius:12px; }
}

@media (max-width:520px) {
  .about-actions { flex-wrap:wrap; justify-content:center; }
}

@media (max-width:480px) {
  .container { padding:0 15px; }
  .hero-title { font-size:2.05rem; }
  .hero-subtitle { font-size:1.2rem; }
  .section-title { font-size:2rem; }
  .skill-items { grid-template-columns:repeat(2,1fr); }
  .about-stats { grid-template-columns:repeat(2,1fr); }
  .stat h3 { font-size:1.5rem; }
}

/* ---------- Motion Reduction ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  .skill-item:hover,
  .project-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover { transform:none !important; }
}

/* End Styles */