/* --- Modern PM Portfolio — Spacious Refinement (Optimized) --- */

/* 1. Global Reset & Variables */
*{box-sizing:border-box}
:root{
  /* Dark Theme */
  --bg:#0b1220; --panel:rgba(255,255,255,.06); --ink:#e6edf3; --muted:#a3adb8; --line:rgba(255,255,255,.12);
  --accent:#5eead4; --accent-2:#60a5fa; --chip:#111827; --shadow:0 14px 36px rgba(0,0,0,.28);
  --text-primary: var(--ink);
  --text-secondary: #aaa;
  --bg-primary: var(--bg);
  --bg-secondary: #2a2a2a;
}
:root.light{
  /* Light Theme */
  --bg:#ffffff; --panel:#f7f9fc; --ink:#0b1220; --muted:#4b5563; --line:#e5e7eb;
  --accent:#0ea5e9; --accent-2:#22c55e; --chip:#eef2ff; --shadow:0 14px 36px rgba(2,6,23,.08);
  --text-primary: var(--ink);
  --text-secondary: #555;
  --bg-primary: var(--bg);
  --bg-secondary: #f0f0f0;
}
html,body{height:100%}
body{
  margin:0; font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg); background-attachment: fixed;
}

/* 💥 SMOOTH SCROLLING ADDED HERE 💥 */
html {
  scroll-behavior: smooth;
}
/* ---------------------------------- */

/* 2. Typography & Layout */
h1,h2,h3{font-family:'Plus Jakarta Sans', 'Inter', sans-serif; margin:0 0 16px}
h1{font-size:46px; line-height:1.12; letter-spacing:-.5px}
h2{font-size:30px}
h3{font-size:18px; color:var(--muted)}
p{color:var(--muted); line-height:1.85; margin-bottom:10px}
a{color:var(--accent)}
.lead{font-size:18px}
.container{max-width:1160px; margin:0 auto; padding:0 24px}

/* 3. Background Effects */
.bg .blob{position:fixed; filter:blur(68px); opacity:.33; z-index:-1; pointer-events:none}
.blob-1{width:600px;height:600px; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); top:-80px; left:-100px; animation:float 14s ease-in-out infinite alternate}
.blob-2{width:720px;height:720px; background:radial-gradient(circle at 70% 60%, var(--accent-2), transparent 60%); bottom:-160px; right:-160px; animation:float 16s ease-in-out infinite alternate-reverse}
@keyframes float{to{transform:translateY(30px) translateX(20px)}}

/* 4. Navigation (Nav) */
.nav{
  position:fixed; top:0; z-index:1000; width:100%;
  backdrop-filter:saturate(1.2) blur(10px);
  background-color: rgba(11, 18, 32, 0.95);
  border-bottom:1px solid var(--line);
}
:root.light .nav{background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.95))}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand-group {
  display: flex; flex-direction: column; align-items: flex-start;
}
.brand-group .brand {
  margin-bottom: 2px; line-height: 1.2;
}
.brand{font-weight:800; font-size:20px; letter-spacing:.5px; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent)}
.links {
  display: flex; /* Ensure links container is visible by default */
  align-items: center;
}
.links a{
  font-size: 0.9rem; color:var(--muted);
  margin:0 12px; text-decoration:none;
  padding:8px 0;
}
.links a:hover{color:var(--ink)}
.actions{display:flex; gap:12px}
.tag {font-weight: 900;}

/* Hide Nav links below 950px */
@media (max-width: 950px) {
  .links {
    display: none; /* Hides the navigation links */
  }
}

/* 5. Utility & Components */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px;
  border:1px solid var(--line); color:var(--ink);
  text-decoration:none; background:transparent;
  transition:transform .2s ease;
}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1220; border-color:transparent; box-shadow:var(--shadow); font-weight:800}
.btn.outline{background:transparent}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-1px)}

.btn.fancy {
  position: relative; overflow: hidden;
  padding: 0.6rem 1.2rem; font-size: 0.9rem; font-weight: 600;
  width: 100%; margin-top: 1rem; color: #fff;
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  border: none; border-radius: 0.5rem; cursor: pointer;
  transition: background 0.3s ease;
}
.btn.fancy::before {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: rgba(255,255,255,0.25);
  transform: skewX(-20deg); transition: all 0.4s ease;
}
.btn.fancy:hover::before {left: 100%;}
.btn.fancy span {position: relative; z-index: 1;}

.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow)}
.glass{backdrop-filter: blur(12px) saturate(120%)}

.chip{padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.chip.active{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1220; border-color:transparent}

.pill{padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel)}

/* Project Method Chips (for Nav/Hero) */
.method-chips {display:flex; gap: 8px; margin-bottom: 1rem;}
.chip-item {
    padding: 6px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.chip-item.agile {background: var(--accent); color: var(--bg);}
.chip-item.hybrid {background: var(--accent-2); color: var(--bg);}
.chip-item.waterfall {background: #f97316; color: white;}

/* 6. Sections */
.hero{display:grid; grid-template-columns:1.2fr .9fr; gap:40px; padding:86px 0 48px; margin-top: 2rem;}
.eyebrow{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:12px; margin:6px 0 12px}
.cta-row{display:flex; gap:14px; margin:20px 0 16px; flex-wrap:wrap}
.stats{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px}
.stats div{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 16px; text-align:center}
.stats strong{font-size:18px; display:block; color:var(--ink)}
.stats span{font-size:12px; color:var(--muted)}
.hero-right{padding:20px}
.roomy > li{margin-bottom:10px}

.section{padding:70px 0}
.section-head{margin-bottom:24px}
.muted{color:var(--muted)}

.filters{display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 26px}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.two-l{display:grid; grid-template-columns:1.2fr 1fr; gap:26px}

/* 7. Project Cards */
.card.project{position:relative; overflow:hidden;}
.ribbon{position:absolute; top:16px; left:16px; padding:7px 12px; border-radius:999px; font-size:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1220; font-weight:800}
.media{
  aspect-ratio:16/9; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-weight:700;
  border-radius:12px; border:1px solid var(--line);
}
.body{padding:18px 18px 8px}
.body .title{font-weight:800; font-size:20px; letter-spacing:-.2px}
.meta{font-size:13px; color:var(--muted); margin:4px 0 12px}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.pills .pill{font-size:12px; padding:6px 10px; border:1px solid var(--line); background:var(--panel)}

/* Compact Project Card */
.project.compact{
  display:grid; grid-template-columns:120px 1fr; gap:12px;
  padding:12px; height:220px; align-items:start;
}
.project.compact .media.small{
  width:120px; height:196px; border-radius:12px;
  overflow:hidden; border:1px solid var(--line); background:var(--panel);
  grid-column:1; grid-row:1 / span 3;
}
.project.compact .media.small img{width:100%; height:100%; object-fit:cover}
.project.compact .body{display:flex; flex-direction:column; min-width:0; height:100%}
.project.compact .title.sm{
  font-size:1rem; font-weight:800; margin:2px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.6em;
}
.project.compact .meta{
  font-size:.9rem; color:var(--muted); margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height:1.2em;
}
.project.compact .kv{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;
  flex:0 0 48px; overflow:hidden;
}
.project.compact .actions{margin-top:auto; display:flex; gap:8px}
.project.compact .pill{font-size:.75rem; padding:2px 8px;}


/* Stacked Project Card */
.card.project.stacked {
  display: flex; flex-direction: column; align-items: center;
  border-radius: 12px; padding: 1rem;
  width: 100%; max-width: 500px; margin: 1rem auto;
  text-align: center; overflow: hidden;
}
.card-header {
  width: 100%; border-bottom: 1px solid var(--line);
  padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.card-header .title {
  color: var(--muted); font-weight: 600; font-size: 1.1rem;
  margin-bottom: 0.4rem; transition: color 0.3s ease;
}
.card.project.stacked .media {
  width: 100%; max-width: 480px; height: 180px;
  overflow: hidden; border-radius: 10px;
  margin-bottom: 1rem; background: var(--panel);
  aspect-ratio: auto;
}
.card.project.stacked .media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center; border-radius: 10px;
  transition: transform 0.3s ease;
}
.card.project.stacked .media img:hover {transform: scale(1.03);}
.card.project.stacked .body {width: 100%; padding:0;}
.card.project.stacked .meta {color: var(--muted); margin-bottom: 0.8rem; font-size: 0.95rem;}
.card.project.stacked .kv {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.4rem; margin-bottom: 1rem; font-size: 0.9rem;
}

.card .kv-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.6rem; padding: 0.3rem 0;
  font-size: 0.9rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.card .kv-row .kv-item {
  flex: 1; color: var(--text-secondary);
}
.card .kv-row .kv-item strong {
  color: var(--text-primary); font-weight: 600;
}
.light .card .kv-row {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.light .card .kv-row .kv-item {color: #555;}
.light .card .kv-row .kv-item strong {color: #222;}


/* 8. Details & Utility Sections */
.sectioned{display:grid; gap:14px; padding:0 18px 18px}
.block{padding:14px; border:1px dashed var(--line); border-radius:12px; background:rgba(255,255,255,.02)}
.block h4{margin:0 0 8px; font-size:14px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink)}
.block ul{margin:0; padding-left:18px}
.block li{margin:6px 0; color:var(--muted); line-height:1.65}

.about .kv{display:grid; gap:12px}
.kv div{display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center}
.pill-row{display:flex; flex-wrap:wrap; gap:10px}

.tight{padding-left:18px; margin:6px 0}
.pad-24{padding:24px}
.mb-8{margin-bottom:8px}

.contact-grid{display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px}

.footer{border-top:1px solid var(--line); padding:22px 0; margin-top:22px}
.copy{font-size:13px; color:var(--muted)}

.prominent-role {
  display: block; font-size: 1.1rem;
  font-weight: 500; color: var(--ink);
  letter-spacing: 0.05em;
}

.methods-tools {
  display: flex; flex-direction: column;
  gap: 1rem; margin-top: 1.2rem;
  font-size: 0.95rem; line-height: 1.6;
}
.methods-tools .tool-group h4 {
  font-size: 1rem; font-weight: 600; margin: 0; color: var(--muted)
}
.methods-tools .tool-group p {
  margin: 0.4rem 0 0 0; color: var(--muted);
}

/* 9. Testimonial Slider */
.testimonial-heading {text-align: center; font-size: 2rem; margin-bottom: 20px; color: var(--ink);}
.testimonial-slider {
  position: relative; margin: 0 auto; overflow: hidden;
  padding: 40px 0; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
}
.testimonial-track {
  display: flex; flex-direction: row; transition: transform 0.5s ease;
}
.testimonial {
  flex: 0 0 50%; box-sizing: border-box;
  padding: 20px; text-align: center;
}
.testimonial img {
  width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px;
}
.testimonial .text {width: 95%; margin: 0 auto;}
.name {margin-bottom: -15px;}
.designation {font-size: 0.8rem;}

.dots {text-align: center; margin-top: 20px;}
.dot {
  display: inline-block; width: 12px; height: 12px; margin: 0 5px;
  background-color: #ccc; border-radius: 50%; cursor: pointer;
}
.dot.active {background-color: var(--ink);}

/* 10. Modal (Fixed Size with Scrollable Content) */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000}
.modal.show{display:flex}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px)}
:root:not(.light) .modal-backdrop {background: rgba(0,0,0,0.9);}

.modal-dialog{
  position:relative; width:920px; max-width:92vw;
  height:80vh; max-height:80vh;
  display:flex; flex-direction:column;
  overflow:hidden; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:20px;
}
.modal-close{position:absolute; top:10px; right:14px; font-size:26px; line-height:1; background:transparent; border:none; color:var(--ink); cursor:pointer}
.modal-header{flex:0 0 auto}
.modal-header h3{margin:0}
.modal-meta{color:var(--muted); margin:6px 0 4px}
.modal-tabs{flex:0 0 auto; display:flex; gap:8px; margin:6px 0 8px}
.tab-btn{
  border:1px solid var(--line); background:transparent;
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:700;
  color: var(--ink);
}
.tab-btn[aria-selected="true"]{background:var(--accent); color:#fff; border-color:transparent}

/* Dark mode tab text fix */
:root:not(.light) .tab-btn {color: #ddd; border-color: #555;}
:root:not(.light) .tab-btn:hover {color: #fff; border-color: #888;}
:root:not(.light) .tab-btn[aria-selected="true"] {background: var(--accent); color: #fff; border-color: transparent;}

.modal-body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.modal-media{flex:0 0 auto; margin:6px 0 14px}
.modal-media img{width:100%; height:240px; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.modal-content{flex:1 1 auto; min-height:0; overflow:auto; padding-right:6px; line-height: 1.8; margin-top:8px}
.modal-content p {margin-bottom: 10px;}
.modal-content ul, .modal-content ol {margin:0; padding-left:18px}
.modal-content li {margin-bottom: 8px; line-height: 1.7; margin-top: 0.2rem;}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.modal-grid h4{margin:8px 0}

/* 11. Card Flip */
.project-card {
  width: 350px; height: 250px; perspective: 1000px;
  margin: 20px auto;
}
.card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.8s; transform-style: preserve-3d;
}
.project-card:hover .card-inner {transform: rotateY(180deg);}
.card-front, .card-back {
  position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden; border-radius: 12px; overflow: hidden;
}
.card-front {
  background: var(--panel); display: flex; flex-direction: column;
  justify-content: center; align-items: center; padding: 20px;
  box-shadow: var(--shadow);
}
.card-back {
  transform: rotateY(180deg); background: var(--bg-secondary);
  box-shadow: var(--shadow);
}
.card-back img {width: 100%; height: 100%; object-fit: cover;}

/* 12. Media Queries (Responsive Design) */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .two-l{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .modal-dialog{max-height: 90vh; padding:16px; height:86vh; width:95vw;}
  .modal-grid{grid-template-columns:1fr}

  .project.compact{grid-template-columns:1fr; height:auto}
  .project.compact .media.small{width:100%; height:140px; grid-row:auto; grid-column:auto}
  .project.compact .kv{grid-template-columns:1fr; flex:0 0 auto}
}
@media (max-width:700px){
  .grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 600px) {
  .prominent-role {font-size: 0.95rem; line-height: 1.2;}
  .card.project.stacked {max-width: 95%;}
  .card.project.stacked .media {height: 150px;}
}
@media (max-width: 468px) {
  .testimonial-track {flex-direction: column; transform: none !important;}
  .testimonial {flex: 0 0 auto; width: 100%; padding: 15px 10px;}
  .dots {display: none;}
}