.projects-page { background: #f6f7fb; }
.portfolio-hero { position: relative; min-height: 610px; display: flex; align-items: center; padding: 105px 0 82px; background: linear-gradient(145deg,#f9faff,#f2f4fa); overflow: hidden; isolation: isolate; }
.portfolio-hero__grid { position: absolute; z-index: -2; inset: 0; opacity: .62; background-image: linear-gradient(rgba(15,29,67,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,29,67,.045) 1px,transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(180deg,#000,transparent 92%); }
.portfolio-hero__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.portfolio-hero__glow--one { width: 520px; height: 520px; top: -320px; left: -180px; background: radial-gradient(circle,rgba(240,82,63,.14),transparent 68%); }
.portfolio-hero__glow--two { width: 580px; height: 580px; right: -280px; bottom: -390px; background: radial-gradient(circle,rgba(124,58,237,.13),transparent 68%); }
.portfolio-hero__layout { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 90px; }
.portfolio-hero h1 { max-width: 810px; margin: 22px 0 0; font: 600 clamp(58px,7vw,94px)/.98 "Manrope"; letter-spacing: -6px; }
.portfolio-hero h1 em { color: var(--blue); font-style: normal; }
.portfolio-hero__aside { padding-bottom: 8px; }
.portfolio-hero__aside > p { color: #5d6680; font-size: 16px; line-height: 1.7; }
.portfolio-hero__summary { display: flex; gap: 36px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #d9deea; }
.portfolio-hero__summary > span { display: flex; flex-direction: column; gap: 5px; }
.portfolio-hero__summary strong { font: 600 28px "Manrope"; }
.portfolio-hero__summary small { color: #788199; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.portfolio-hero__foot { position: absolute; left: 50%; bottom: 25px; display: flex; justify-content: space-between; color: #81899d; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transform: translateX(-50%); }

.portfolio-list { padding: 120px 0; background: #fff; }
.portfolio-card { padding: 0 0 82px; }
.portfolio-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid #dfe3ec; }
.portfolio-card__number { color: var(--blue); font: 700 11px "Manrope"; letter-spacing: .1em; }
.portfolio-card__meta > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.portfolio-card__meta > div span { padding: 7px 10px; border: 1px solid #dde1eb; border-radius: 999px; color: #667088; background: #fafbfe; font-size: 9px; }
.portfolio-card__heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin: 24px 0 27px; }
.portfolio-card__heading h2 { margin: 0 0 7px; font: 600 clamp(35px,4vw,57px)/1 "Manrope"; letter-spacing: -3px; }
.portfolio-card__heading p { max-width: 530px; margin: 0; color: #697288; font-size: 14px; line-height: 1.55; }
.portfolio-card__heading > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid #cdd2df; color: #182341; font-size: 12px; font-weight: 700; transition: color .25s ease,border-color .25s ease; }
.portfolio-card__heading > a:hover { color: var(--blue); border-color: var(--blue); }
.portfolio-card__media { position: relative; display: block; height: min(690px,58vw); border: 1px solid #d9deea; border-radius: 28px; background: #edf0f5; box-shadow: 0 28px 75px rgba(15,27,61,.14); overflow: hidden; isolation: isolate; }
.portfolio-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 62%,rgba(4,13,36,.2)); opacity: 0; transition: opacity .4s ease; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease-out),filter .45s ease; }
.portfolio-card__media > span { position: absolute; z-index: 2; right: 25px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: #111c3b; background: rgba(255,255,255,.82); box-shadow: 0 13px 30px rgba(8,18,46,.16); backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(10px); transition: opacity .35s ease,transform .45s var(--ease-out); }
.portfolio-card__media > span i { font-style: normal; }
.portfolio-card__media:hover img { transform: scale(1.035); filter: saturate(.92) brightness(.92); }
.portfolio-card__media:hover::after,.portfolio-card__media:hover > span,.portfolio-card__media:focus-visible > span { opacity: 1; }
.portfolio-card__media:hover > span,.portfolio-card__media:focus-visible > span { transform: none; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 95px 46px; }
.portfolio-grid .portfolio-card { padding-bottom: 0; }
.portfolio-grid .portfolio-card__heading { min-height: 98px; align-items: flex-start; }
.portfolio-grid .portfolio-card__heading h2 { font-size: clamp(29px,3vw,40px); letter-spacing: -2px; }
.portfolio-grid .portfolio-card__heading > a { display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border: 1px solid #d9deea; border-radius: 50%; font-size: 17px; }
.portfolio-grid .portfolio-card__media { height: min(450px,39vw); border-radius: 23px; box-shadow: 0 22px 55px rgba(15,27,61,.11); }

.portfolio-cta { padding: 0 0 110px; background: #fff; }
.portfolio-cta__card { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: end; padding: 62px 65px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 100% 0%,rgba(124,58,237,.23),transparent 38%),linear-gradient(135deg,#07122e,#111b3e); box-shadow: 0 30px 75px rgba(7,18,46,.2); overflow: hidden; }
.portfolio-cta__card::after { content: ""; position: absolute; width: 300px; height: 300px; right: -170px; top: -210px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.portfolio-cta .section-label { color: #ff9d8c; }
.portfolio-cta h2 { margin: 17px 0 0; font: 600 clamp(38px,4.5vw,58px)/1.05 "Manrope"; letter-spacing: -3px; }
.portfolio-cta__card > div:last-child { position: relative; z-index: 1; }
.portfolio-cta__card p { color: #a9b4cc; font-size: 14px; line-height: 1.65; }
.portfolio-cta__card .button { margin-top: 10px; }

@media (max-width: 980px) {
  .portfolio-hero { min-height: 570px; padding-top: 85px; }
  .portfolio-hero__layout,.portfolio-cta__card { grid-template-columns: 1fr; gap: 38px; }
  .portfolio-hero__aside { max-width: 650px; }
  .portfolio-grid { gap: 75px 30px; }
}
@media (max-width: 700px) {
  .portfolio-hero { min-height: 620px; padding: 70px 0 90px; }
  .portfolio-hero h1 { letter-spacing: -3.7px; }
  .portfolio-list { padding: 80px 0; }
  .portfolio-card { padding-bottom: 70px; }
  .portfolio-card__heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .portfolio-card__media,.portfolio-grid .portfolio-card__media { height: 63vw; min-height: 290px; border-radius: 19px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 70px; }
  .portfolio-grid .portfolio-card__heading { min-height: 0; flex-direction: row; }
  .portfolio-card__media > span { right: 14px; bottom: 14px; opacity: 1; transform: none; }
  .portfolio-cta { padding-bottom: 75px; }
  .portfolio-cta__card { padding: 42px 26px; border-radius: 23px; }
}