/* Portfolio page */
.portfolio-page { background: var(--color-background); }
.portfolio-hero {
  position: relative;
  display: grid;
  min-height: 88svh;
  overflow: hidden;
  align-items: end;
  padding: clamp(9rem, 16vw, 13rem) 0 clamp(5rem, 10vw, 8rem);
  background: linear-gradient(120deg, #05070b 20%, #061126 62%, #08449f 135%);
}
.portfolio-hero__content { position: relative; z-index: 2; }
.portfolio-hero__back { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: clamp(3rem, 8vw, 6rem); color: #8998ad; font-size: .75rem; transition: color var(--transition); }
.portfolio-hero__back:hover { color: #fff; }
.portfolio-hero__title { max-width: 58rem; margin-bottom: 1.5rem; font-size: clamp(4rem, 12vw, 8rem); }
.portfolio-hero__title span { color: var(--color-primary-light); }
.portfolio-hero__intro { max-width: 44rem; font-size: clamp(1rem, 2vw, 1.2rem); }
.portfolio-hero__meta { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--color-border); }
.portfolio-hero__meta span { display: grid; gap: .15rem; }
.portfolio-hero__meta b { font-family: var(--font-heading); font-size: 2rem; line-height: 1; }
.portfolio-hero__meta small { color: #8998ad; font-size: .62rem; }
.portfolio-hero__glow { position: absolute; top: -25%; right: -18%; width: 75vw; height: 75vw; background: radial-gradient(circle, rgba(9,105,255,.48), transparent 65%); }
.portfolio-hero__polygon { position: absolute; right: -19rem; bottom: -15rem; width: 52rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.13); clip-path: polygon(25% 0,100% 0,75% 50%,100% 100%,25% 100%,0 50%); transform: rotate(7deg); }

.archive-toolbar { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 3rem; }
.archive-toolbar h2 span { color: var(--color-primary-light); }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.portfolio-filter { padding: .65rem 1rem; border: 1px solid var(--color-border); color: #8f9db0; background: rgba(255,255,255,.035); border-radius: 999px; font-size: .7rem; cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); }
.portfolio-filter:hover, .portfolio-filter.is-active { border-color: var(--color-primary); color: #fff; background: rgba(9,105,255,.16); }
.portfolio-grid { display: grid; gap: 1rem; }
.portfolio-card { overflow: hidden; border: 1px solid var(--color-border); background: rgba(255,255,255,.045); border-radius: var(--radius); transition: border-color var(--transition), transform var(--transition), opacity var(--transition); }
.portfolio-card:hover { border-color: rgba(47,124,255,.55); transform: translateY(-6px); }
.portfolio-card[hidden] { display: none; }
.portfolio-card__visual { position: relative; display: grid; min-height: 24rem; overflow: hidden; place-items: center; background: radial-gradient(circle at 45% 40%, rgba(9,105,255,.52), transparent 38%), linear-gradient(145deg,#0a162c,#05070b); }
.portfolio-card__visual::before { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size: 32px 32px; content: ""; }
.portfolio-card__visual--prompt { background: radial-gradient(circle at 62% 35%, rgba(9,105,255,.48), transparent 38%), linear-gradient(145deg,#071124,#05070b); }
.portfolio-card__orb { position: absolute; width: 19rem; aspect-ratio: 1; border: 1px solid rgba(85,148,255,.3); border-radius: 50%; box-shadow: 0 0 80px rgba(9,105,255,.12); }
.mini-phone { position: relative; z-index: 2; width: 10rem; height: 20rem; padding: .4rem; border: 1px solid rgba(255,255,255,.38); background: #04060a; border-radius: 1.6rem; box-shadow: 0 25px 60px rgba(0,0,0,.5); transform: rotate(5deg); }
.mini-phone--prompt { width: 11rem; transform: rotate(-5deg); }
.mini-phone__top { position: absolute; z-index: 2; top: .8rem; left: 50%; width: 2.7rem; height: .23rem; background: #181e29; border-radius: 1rem; transform: translateX(-50%); }
.mini-phone__screen { display: grid; width: 100%; height: 100%; place-items: center; background: #081426; border-radius: 1.3rem; }
.mini-qr { position: relative; display: grid; width: 6.5rem; height: 6.5rem; place-items: center; }
.mini-qr i { position: absolute; width: 1.2rem; height: 1.2rem; border-color: #5f9dff; border-style: solid; }
.mini-qr i:nth-child(1) { top:0;left:0;border-width:2px 0 0 2px }.mini-qr i:nth-child(2) { top:0;right:0;border-width:2px 2px 0 0 }.mini-qr i:nth-child(3) { bottom:0;left:0;border-width:0 0 2px 2px }.mini-qr i:nth-child(4) { right:0;bottom:0;border-width:0 2px 2px 0 }
.mini-qr b { font-size: 2.8rem; font-weight: 400; }
.visual-chip { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; padding: .45rem .7rem; border: 1px solid var(--color-border); background: rgba(4,8,15,.75); border-radius: 999px; color: #b8c6db; font-size: .55rem; backdrop-filter: blur(10px); }
.mini-lines { display: grid; width: 75%; gap: .6rem; }
.mini-lines i { height: .4rem; background: #4f5e72; border-radius: 1rem; }.mini-lines i:nth-child(even) { width: 78%; }.mini-lines i.is-active { background: #fff; box-shadow: 0 0 15px rgba(255,255,255,.3); }
.mini-phone--prompt .mini-phone__screen b { position: absolute; bottom: 2rem; display: grid; width: 2.5rem; height: 2.5rem; place-content: center; background: var(--color-primary); border-radius: 50%; font-size: .7rem; }
.portfolio-card__body { padding: clamp(1.5rem, 4vw, 2.3rem); }
.portfolio-card__topline { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; color: #65748a; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.portfolio-card h3 { font-size: clamp(2.1rem, 5vw, 3rem); }.portfolio-card h3 span { color: var(--color-primary-light); }
.portfolio-card__body > p { min-height: 5.1rem; font-size: .85rem; }
.portfolio-card__link { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: .75rem; font-weight: 600; }
.portfolio-card__link span:last-child { transition: transform var(--transition); }.portfolio-card__link:hover span:last-child { transform: translate(3px,-3px); }
.portfolio-empty { padding: 3rem; border: 1px dashed var(--color-border); text-align: center; border-radius: var(--radius); }

.portfolio-cta__panel { display: grid; gap: 2rem; padding: clamp(2rem,6vw,4.5rem); background: linear-gradient(125deg,#004ed4,#0969ff 60%,#2f7cff); border-radius: clamp(1.3rem,3vw,2.2rem); }
.portfolio-cta__panel h2 { max-width: 45rem; }.portfolio-cta__panel h2 span { color: #c6dcff; }.portfolio-cta__panel p { max-width: 38rem; color: rgba(255,255,255,.8); }
.portfolio-cta__actions { display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }

@media (min-width: 700px) {
  .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .archive-toolbar { flex-direction: row; align-items: end; justify-content: space-between; }
  .portfolio-cta__actions { flex-direction: row; }
}
@media (min-width: 960px) {
  .portfolio-hero__meta { gap: 4rem; }
  .portfolio-cta__panel { grid-template-columns: 1.5fr .7fr; align-items: end; }
  .portfolio-cta__actions { justify-content: flex-end; }
}
@media (max-width: 374px) {
  .portfolio-hero__title { font-size: 3.55rem; }
  .portfolio-filter { padding-inline: .8rem; }
}