:root{
  --text:#111;
  --muted:#666;
  --line:#e8e8e8;
  --red1:#ff1a1a;
  --red2:#d60000;
  --navH: 66px;
  --radius: 999px;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:#fff;
}

/* top note */
.top-note{
  font-size: 12px;
  color:#666;
  text-align:center;
  padding: 10px 12px;
}
.top-note .flag{ margin: 0 6px; }

/* navbar */
.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.nav{
  max-width: 1180px;
  margin: 0 auto;
  height: var(--navH);
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  background: rgba(255,255,255,.82);
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color:var(--text);
  font-weight: 700;
  letter-spacing: .08em;
}
.brand .logo{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: #f3f4f6;
}
.brand-text{ font-size: 14px; }

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
.nav-links a,
.dd-btn{
  font-size: 14px;
  color:#222;
  text-decoration:none;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}
.nav-links a:hover,
.dd-btn:hover{
  background: #f3f4f6;
}
.has-dd{ position: relative; }
.dd-btn{ display:flex; align-items:center; gap: 6px; }
.chev{ font-size: 12px; opacity: .7; }

.dropdown{
  position:absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display:none;
}
.dropdown a{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
}
.dropdown a:hover{ background:#f3f4f6; }

.nav-cta{
  text-decoration:none;
  color:#222;
  font-weight: 500;
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--radius);
  background:#fff;
}
.nav-cta:hover{ background:#f7f7f7; }

.hamburger{
  display:none;
  border:none;
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  cursor:pointer;
}

/* hero (smaller) */
.hero{
  position: relative;
  padding: 44px 16px 56px; /* আগে 66 / 86 ছিল */
  overflow:hidden;
}

.hero-inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  position: relative;
  z-index: 2;
}
.hero-title{
  margin: 0;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-size: clamp(26px, 3.6vw, 52px); /* আগে 70px max ছিল */
}
.hero-sub{
  margin: 14px auto 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 15px; /* আগে 18 ছিল */
  line-height: 1.6;
}

/* underline wave */
.under-wave{
  position: relative;
  display:inline-block;
  padding-bottom: 16px;
}
.wave{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  width: min(540px, 86%);
  height: 26px;
}

/* red spark on right */
.spark{
  display:inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  transform: translate(10px, -18px);
}
.spark::before,
.spark::after{
  content:"";
  position:absolute;
  background: var(--red2);
  border-radius: 99px;
}
.spark::before{ width:2px; height:18px; left:8px; top:0; transform: rotate(20deg); }
.spark::after{ width:18px; height:2px; left:0; top:8px; transform: rotate(-10deg); }

/* button */
.hero-btn{
  margin-top: 24px;
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration:none;

  background: #fff;
  color: var(--red1);          
  font-weight: 600;
  font-size: 14px;

  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  overflow: hidden;

  transition: color .45s ease, box-shadow .35s ease, transform .15s ease;
  z-index: 0;                  
}


.hero-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, var(--red1), var(--red2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
  z-index: -1;                 
}

/* hover fill */
.hero-btn:hover::before{
  transform: scaleX(1);
}

/* hover text color */
.hero-btn:hover{
  color:#000;                  /* black text */
  box-shadow: 0 22px 44px rgba(214,0,0,.28);
  transform: translateY(-1px);
}

.hero-btn .ext{
  font-weight: 700;
}

.ext{ font-weight: 700; }

/* background blur blobs */
.bg{
  position:absolute;
  inset: -40px;
  z-index: 1;
}
.blob{
  position:absolute;
  filter: blur(22px);
  opacity: .55;
  border-radius: 999px;
}
.b1{
  width: 520px; height: 240px;
  left: -80px; top: 90px;
  background: radial-gradient(circle at 30% 30%, rgba(255,210,220,.95), rgba(255,210,220,.0) 60%);
}
.b2{
  width: 540px; height: 260px;
  right: -110px; top: 70px;
  background: radial-gradient(circle at 40% 40%, rgba(205,235,255,.95), rgba(205,235,255,.0) 62%);
}
.b3{
  width: 560px; height: 260px;
  left: 50%; bottom: -120px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 40% 40%, rgba(240,240,240,.95), rgba(240,240,240,.0) 62%);
}

/* responsive nav */
@media (max-width: 860px){
  .hamburger{ display:block; margin-left: auto; }
  .nav-cta{ display:none; }
  .nav-links{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--navH) + 10px);
    width: min(520px, calc(100% - 28px));
    background:#fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 10px;
    display:none;
    flex-direction: column;
    gap: 6px;
  }
  .nav-links.open{ display:flex; }
  .nav{ position: relative; }
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#fff;color:#111}

.work-slider{padding:42px 14px 46px}
.ws-container{max-width:1220px;margin:0 auto}

/* ===== Slider ===== */
.ws-viewport{
  position:relative;
  padding: 10px 46px;
}

.ws-track{
  display:flex;
  gap:22px;
  overflow:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding: 8px 2px;
}

.ws-card{
  flex: 0 0 auto;
  width: clamp(220px, 19vw, 260px);
  height: clamp(320px, 24vw, 360px);
  border-radius: 18px;
  overflow:hidden;
  background:#f3f4f6;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  scroll-snap-align:center;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  opacity: .92;
}

.ws-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ws-card.is-active{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
  opacity: 1;
}

/* Buttons */
.ws-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #e7e7e7;
  background: rgba(255,255,255,.9);
  cursor:pointer;
  font-size: 24px;
  line-height: 1;
  display:grid;
  place-items:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
}
.ws-btn:hover{background:#fff}
.ws-btn.prev{left:0}
.ws-btn.next{right:0}

/* Dots */
.ws-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top: 12px;
}
.ws-dot{
  width:8px;height:8px;border-radius:999px;
  background:#d7d7d7;
  border:none;
  cursor:pointer;
}
.ws-dot.active{background:#d60000; transform: scale(1.12);}

/* ===== Stats ===== */
.stats{
  margin-top: 34px;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap: 18px;
}

.stat{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  justify-content:center;
}

.stat-num{
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stat-num .count{
  display:inline-block;
  min-width: 90px;
}

.stat-text{
  color:#777;
  line-height: 1.15;
  font-size: 14px;
  margin-top: 8px;
}

.star{color:#f5b400;font-size: 18px;margin-left:6px;vertical-align: middle}

.vline{
  width:1px;
  height:52px;
  background:#e9e9e9;
  justify-self:center;
}

/* Responsive */
@media (max-width: 980px){
  .ws-viewport{padding: 10px 40px}
  .stats{
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
  }
  .vline{display:none}
  .stat{justify-content:flex-start}
}

@media (max-width: 520px){
  .ws-btn{display:none}
  .ws-viewport{padding:0}
  .ws-track{gap:14px}
  .stat-num{font-size:38px}
}
/* Section */
.ux-problems{
  padding: 64px 16px;
  background: #fff;
}

.ux-container{
  max-width: 1200px;
  margin: 0 auto;
}

/* Title */
.ux-title{
  text-align: center;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 46px;
}

.wave-wrap{
  position: relative;
  display: inline-block;
}

.wave-wrap::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    -5deg,
    #d60000 0,
    #d60000 12px,
    transparent 12px,
    transparent 20px
  );
  opacity: .9;
  border-radius: 6px;
}

/* Grid */
.ux-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  background: #fff5f2;
  padding: 28px;
  border-radius: 22px;
}

/* Card */
.ux-card{
  background: #fff;
  border-radius: 16px;
  padding: 22px 22px 26px;
  border: 1px solid #f0e3df;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ux-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}

.ux-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff5f2;
  color: #d60000;
  font-size: 18px;
  margin-bottom: 14px;
}

.ux-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.ux-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* Responsive */
@media (max-width: 900px){
  .ux-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .ux-grid{
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

.svc-btn:hover{ background:#fff; }

/* RIGHT list */
.svc-right{display:flex;flex-direction:column;gap: 18px;}

/* ✅ IMPORTANT: base item */
.svc-item{
  position: relative;
  display:grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 16px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  cursor: pointer;
  background: transparent;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border .18s ease;
}

.svc-item:hover{
  background: rgba(253,238,238,.55);
}

/* numbers */
.svc-no{
  color:#888;
  font-size: 14px;
  padding-top: 6px;
}

.svc-body h3{
  margin:0 0 8px;
  font-size: 26px;
  font-weight: 500;
}

.svc-tags{
  color:#8a8a8a;
  font-size: 13px;
}

.svc-desc{
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 720px;
}

/* ✅ active card (screenshot style) */
.svc-item.is-active{
  background: var(--card) !important;
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(214,0,0,.08);
  transform: translateY(-1px);
}
.svc-item.is-active .svc-no{ color: var(--accent); }

/* ✅ reveal animation */
.reveal{
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateX(0);
}

/* responsive */
@media (max-width: 980px){
  .svc-wrap{grid-template-columns:1fr;gap:32px;}
  .svc-left{position:relative;top:auto;}
}
.approach{
  padding: 70px 16px;
  background:#fff;
}

.ap-container{
  max-width: 1200px;
  margin: 0 auto;
}

.ap-title{
  text-align:center;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 38px;
}

.ap-underline{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.ap-underline::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:6px;
  border-radius: 999px;
  background: #d60000;
  opacity:.85;
}

/* Grid like screenshot */
.ap-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.05fr;
  gap: 22px;
  align-items: stretch;
}

.ap-card{
  background: #f2fff4;
  border: 1px solid #7cc08a;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.ap-ic{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  font-size: 18px;
  margin-bottom: 14px;
}
.ap-ic.big{
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.ap-card h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
}

.ap-card p{
  margin: 0;
  color: #6b6b6b;
  line-height: 1.65;
  font-size: 14px;
}

/* Tall right card */
.ap-tall{
  grid-column: 3;
  grid-row: 1 / span 2;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 26px;
}
.ap-tall-text{
  margin-top: auto;
  padding-top: 120px;  /* screenshot-এর মত নিচে লেখা */
}

/* Responsive */
@media (max-width: 980px){
  .ap-grid{ grid-template-columns: 1fr 1fr; }
  .ap-tall{ grid-column: 1 / -1; grid-row:auto; }
  .ap-tall-text{ padding-top: 18px; }
}
@media (max-width: 560px){
  .ap-grid{ grid-template-columns: 1fr; }
}

/* ===== Scroll Animation ===== */
.reveal-left,
.reveal-right{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal-left{ transform: translate(-60px, 18px); }
.reveal-right{ transform: translate(60px, 18px); }

.reveal-show{
  opacity: 1;
  transform: translate(0, 0);
}
/* ========= SERVICES SECTION ========= */
.svc-sec{
  padding: 70px 16px;
  background:
    repeating-linear-gradient(135deg,#fafafa 0,#fafafa 16px,#f6f6f6 16px,#f6f6f6 32px);
}

.svc-wrap{
  max-width: 1200px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 60px;
  align-items:start;
}

@media (max-width: 980px){
  .svc-wrap{grid-template-columns:1fr;gap:32px;}
}

/* LEFT sticky */
.svc-left{ position: sticky; top: 90px; align-self:start; }
@media (max-width: 980px){ .svc-left{ position: relative; top:auto; } }

.svc-title{
  margin:0 0 16px;
  font-size: clamp(34px, 3.8vw, 60px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.svc-wave{
  position:relative;
  display:inline-block;
  padding-bottom: 12px;
}
.svc-wave::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:6px;
  border-radius:999px;
  background:#d60000;
}

/* spark */
.svc-spark{
  display:inline-block;
  width:16px;height:16px;
  position:relative;
  margin-left: 8px;
  transform: translateY(-14px);
}
.svc-spark::before,.svc-spark::after{
  content:"";
  position:absolute;
  background:#d60000;
  border-radius:999px;
}
.svc-spark::before{width:2px;height:16px;left:7px;top:0;transform:rotate(20deg);}
.svc-spark::after{width:16px;height:2px;left:0;top:7px;transform:rotate(-10deg);}

.svc-sub{
  margin:0 0 18px;
  color:#666;
  line-height: 1.65;
  max-width: 520px;
}

.svc-bullets{list-style:none;padding:0;margin:0 0 22px;}
.svc-bullets li{
  margin: 12px 0;
  padding-left: 18px;
  position:relative;
  font-size: 14px;
}
.svc-bullets li::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background:#d60000;
  position:absolute;left:0;top:7px;
}

.svc-btn{
  display:inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #222;
  text-decoration:none;
  color:#111;
  font-size: 14px;
}
.svc-btn:hover{ background:#fff; }

/* RIGHT list */
.svc-right{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

/* item base */
.svc-item{
  position: relative;
  display:grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  padding: 18px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  cursor: pointer;
  background: transparent;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border .18s ease;
}

.svc-no{
  color:#9a9a9a;
  font-size: 14px;
  padding-top: 6px;
}

.svc-body h3{
  margin:0 0 8px;
  font-size: 28px;
  font-weight: 500;
}

.svc-tags{
  color:#8a8a8a;
  font-size: 13px;
}

/* ✅ IMPORTANT: desc default hidden (screenshot like) */
.svc-desc{
  margin: 12px 0 0;
  color:#666;
  line-height: 1.65;
  max-width: 720px;

  display:none;         /* hide for all */
  opacity:0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}

/* hover feel (very light) */
.svc-item:hover{
  background: rgba(253,238,238,.35);
}

/* ✅ ACTIVE card highlight (pink box) */
.svc-item.is-active{
  background: #fdeeee !important;
  border: 1px solid rgba(214,0,0,.18);
  box-shadow: 0 14px 30px rgba(214,0,0,.08);
  transform: translateY(-1px);
}
.svc-item.is-active .svc-no{ color:#d60000; }

/* ✅ show desc only for active */
.svc-item.is-active .svc-desc{
  display:block;
  opacity:1;
  transform: translateY(0);
}

/* ✅ scroll reveal (right from) */
.reveal{
  opacity: 0;
  transform: translateX(70px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.show{
  opacity: 1;
  transform: translateX(0);
}
:root{
  --text:#111;
  --muted:#6b7280;
  --line:#ececec;
  --card:#fff;
  --pill:#d60000;
  --shadow: 0 18px 45px rgba(15,23,42,.08);
  --radius: 18px;
}

.process-sec{
  padding: 80px 16px 90px;
  background: #fff;
}

.process-wrap{
  max-width: 1180px;
  margin: 0 auto;
}

.process-title{
  text-align:center;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.02em;
  font-size: clamp(32px, 4vw, 56px);
  margin: 0 0 34px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.process-title .u{
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.u-line{
  position: absolute;
  left: 52%;
  transform: translateX(-50%);
  bottom: -2px;
  width: min(460px, 90%);
  height: 38px;
  pointer-events: none;
}

.process-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .process-grid{ grid-template-columns: 1fr; }
}

.reveal{
  opacity: 1;
  visibility: visible;
}


/* Card */
.p-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 18px 18px 20px;
  min-height: 170px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.p-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(circle at 15% 20%, rgba(214,0,0,.10), transparent 55%);
  opacity: .75;
  pointer-events:none;
}

.p-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(214,0,0,.18);
}

.p-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.p-ico{
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f6f7f9;
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.p-step{
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--pill);
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(214,0,0,.20);
}

.p-h{
  margin: 2px 0 8px;
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.p-p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
}

.reveal[data-anim="left"]{ transform: translateX(-26px); }
.reveal[data-anim="right"]{ transform: translateX(26px); }
.reveal[data-anim="up"]{ transform: translateY(26px); }

.reveal.show{
  opacity: 1;
  transform: translate(0,0);
  filter: blur(0);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
}

/* stagger feel (optional) */
.process-grid .p-card:nth-child(2).show{ transition-delay: .06s; }
.process-grid .p-card:nth-child(3).show{ transition-delay: .12s; }
.process-grid .p-card:nth-child(4).show{ transition-delay: .06s; }
.process-grid .p-card:nth-child(5).show{ transition-delay: .12s; }
.process-grid .p-card:nth-child(6).show{ transition-delay: .18s; }



/* =========================
   Projects Section (FULL CSS)
   ========================= */

.projects-sec{
  padding: 90px 16px;
  background: #fff;
}

.projects-wrap{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.projects-title{
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}

.u-wave{
  position: relative;
  display: inline-block;
}

.u-wave::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:120%;
  height:18px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q50 10 100 20 T200 20' fill='none' stroke='%23d60000' stroke-width='4'/%3E%3C/svg%3E") no-repeat center/contain;
}

.projects-sub{
  max-width: 760px;
  margin: 22px auto 60px;
  color:#6b7280;
  font-size: 16px;
  line-height: 1.6;
}

/* =========================
   Grid
   ========================= */
.projects-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
  text-align: left;
  align-items: stretch; /* ✅ equal height */
}

@media(max-width:820px){
  .projects-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Card (smaller + equal size)
   ========================= */
.p-card{
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 14px 36px rgba(15,23,42,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;              /* ✅ equal height */
  flex-direction: column;     /* ✅ */
  min-height: 420px;          /* ✅ both card equal */
}

.p-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(15,23,42,.14);
}

/* Image fixed height => both cards same */
.p-img{
  overflow:hidden;
  height: 260px;              /* ✅ size small + consistent */
  border-radius: 18px 18px 0 0;
}

.p-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.p-card:hover img{
  transform: scale(1.06);
}

/* Text */
.p-meta{
  padding: 12px 16px 0;
  font-size: 12px;
  color:#6b7280;
  display:flex;
  align-items:center;
  gap: 8px;
}

.p-title{
  padding: 6px 16px 8px;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color:#111;
}

.p-tags{
  padding: 0 16px 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto; /* ✅ tags bottom-ish */
}

.p-tags span{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background:#f3f4f6;
  color:#111;
}

/* Responsive tweaks */
@media(max-width:820px){
  .p-img{ height: 240px; }
  .p-card{ min-height: auto; }
}

/* =========================
   Reveal animation (optional)
   ========================= */
.reveal{
  opacity:0;
  transform: translateY(30px);
}

.reveal.show{
  opacity:1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}

/* =========================
   See more button
   ========================= */
.projects-actions{
  margin-top: 38px;
  text-align: center;
}

.see-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.see-more:hover{
  transform: translateY(-1px);
  background: #f9fafb;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

/* ================================
   HERO WRAPPER
================================ */
.kz-hero-wrap{
  width: 100%;
  background: #0b0f14;
}

.kz-hero{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ================================
   PANELS LAYOUT
================================ */
.kz-panels{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ================================
   PANEL BASE
================================ */
.kz-panel{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #0b0f14;
  transition: filter .55s ease, transform .55s ease;
}

/* Background image */
.kz-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: opacity .55s ease, transform .9s ease, filter .55s ease;
  z-index: 0;
}

/* Overlay (shadow) */
.kz-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.86));
  transition: opacity .55s ease;
  z-index: 1;
}

/* Content layer */
.kz-content{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Title - always visible (inactive faint) */
.kz-title{
  margin: 0 0 14px 0;
  font-size: 26px;
  letter-spacing: 1px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  opacity: .65;
  transform: translateY(6px);
  transition: opacity .55s ease, transform .55s ease;
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
}

/* List - only active visible */
.kz-list{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.kz-list p{
  margin: 6px 0;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

/* ================================
   ACTIVE / INACTIVE VISUALS
================================ */

/* Inactive: visible but dim */
.kz-panel:not(.is-active) .kz-bg{
  opacity: .22;
  filter: saturate(.9) contrast(.95) brightness(.92);
}

/* Inactive overlay darker */
.kz-panel:not(.is-active)::after{
  opacity: .78;
}

/* Active: fully visible */
.kz-panel.is-active .kz-bg{
  opacity: 1;
  transform: scale(1.02);
  filter: none;
}

.kz-panel.is-active::after{
  opacity: .55;
}

/* Active: title + list */
.kz-panel.is-active .kz-title{
  opacity: 1;
  transform: translateY(0);
}

.kz-panel.is-active .kz-list{
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   HOVER: inactive brighten a bit
================================ */
.kz-panel:not(.is-active):hover .kz-bg{
  opacity: .34;
  filter: saturate(.95) contrast(1) brightness(1);
}

.kz-panel:not(.is-active):hover::after{
  opacity: .70;
}

.kz-panel:not(.is-active):hover .kz-title{
  opacity: .88;
  transform: translateY(0);
}

/* Focus (keyboard) */
.kz-panel:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: -2px;
}

/* ================================
   MOBILE
================================ */
@media (max-width: 860px){
  .kz-hero{ height: 100svh; }

  .kz-panels{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .kz-title{ font-size: 22px; }
  .kz-content{ padding: 18px; }
}