/* ---------- HERO ---------- */
.path-hero{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:center;
  gap:3rem;
  padding:10rem 1.5rem 6rem;
  max-width:1200px;
  margin-inline:auto;
}
.path-hero img{
  width:100%;
  max-height:360px;
  object-fit:cover;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.path-hero h1{
  font-size:clamp(2.4rem,6vw,4rem);
  line-height:1.1;
  margin-bottom:1rem;
}
.path-hero p{font-size:1.05rem;line-height:1.6;margin-bottom:2rem}

/* ---------- CTA BUTTON ---------- */
.btn-primary{
  background:var(--accent);
  color:#000;
  padding:.75rem 2rem;
  border:none;
  font-family:var(--font-display);
  font-weight:700;
  cursor:pointer;
  transition:filter .25s,transform .25s;
}
.btn-primary:hover{filter:brightness(1.15);transform:translateY(-2px)}

/* ---------- SECTIONS ---------- */
.lp-section{
  padding:4rem 1.5rem 0;
  max-width:1100px;
  margin-inline:auto;
}
.lp-section:not(:first-of-type){margin-top:6rem}
.lp-section h2{
  font-size:1.4rem;
  letter-spacing:.05em;
  color:var(--accent);
  margin-bottom:1.75rem;
  display:flex;
  align-items:center;
}
.lp-section h2::after{
  content:\"\";flex:1;height:1px;background:var(--grid-line);margin-left:1rem;
}

/* ---------- OVERVIEW GRID ---------- */
.overview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;text-align:center;
}
.overview-item{
  background:var(--acrylic-dark);
  border:1px solid var(--acrylic-border);
  backdrop-filter:blur(6px);
  padding:2rem 1.25rem;
}
.overview-item strong{
  font-family:var(--font-display);
  font-size:1.75rem;
}
.overview-item span{display:block;margin-top:.25rem;font-size:.85rem;opacity:.8}

/* ---------- TECH STACK ---------- */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.5rem;
}
.tech-grid .tech{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1.25rem;border:1px solid var(--acrylic-border);
  background:var(--surface-1);
  direction: ltr;
}
.tech-grid img{width:48px;height:48px;object-fit:contain}
.tech-grid .tech span{font-size:.9rem}

/* ---------- MODULES TIMELINE ---------- */
.modules-list{
  counter-reset:step;display:grid;gap:3rem;position:relative;
}
.modules-list::before{
  content:\"\";position:absolute;left:16px;top:0;height:100%;width:2px;background:var(--grid-line);
}
.module-item{position:relative;padding-left:3.5rem}
.module-item::before{
  counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  width:32px;height:32px;background:var(--accent);color:#000;
  font-family:var(--font-display);font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--neon-glow);
}

/* ---------- PROJECT GALLERY ---------- */
.project-gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;
}
.project-card{
  display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--acrylic-border);box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.project-card img{width:100%;height:180px;object-fit:cover}
.project-card .proj-body{padding:1rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1}

/* ---------- RESPONSIBILITIES: GRID CARDS ---------- */
.responsibilities-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}

.resp-card{
  position:relative;
  padding:2.25rem 1.5rem 2rem;
  background:var(--surface-1);
  border:1px solid var(--acrylic-border);
  transition:transform .3s ease, box-shadow .3s ease;
}

.resp-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}

.resp-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#000;
  box-shadow:var(--neon-glow);
  margin-top:-3.5rem;   /* pull icon upward */
  margin-bottom:1rem;
}

.resp-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  margin-bottom:.5rem;
}

.resp-card p{
  font-size:.9rem;
  line-height:1.65;
}

/* make RTL friendly */
body[dir=\"rtl\"] .resp-card{text-align:right}


/* ---------- CTA BLOCK ---------- */
.cta-block{
  background:var(--acrylic-dark);border:1px solid var(--acrylic-border);
  backdrop-filter:blur(6px);padding:2.5rem;text-align:center;margin-top:6rem;
}
.cta-block p{margin-bottom:1.5rem;font-size:1.05rem}

/* ---------- MEDIA ---------- */
@media(max-width:640px){
  .path-hero{grid-template-columns:1fr;padding-top:8rem}
  .lp-section:not(:first-of-type){margin-top:4rem}
}