/* OxaCode Premium Portfolio — page-specific styles */
.portfolio-hero,
.portfolio-library,
.portfolio-capabilities { position: relative; z-index: 1; }

.portfolio-hero {
  overflow: hidden;
  padding: 155px 0 78px;
}
.portfolio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(45,140,255,.08), transparent 35%),
    radial-gradient(circle at 50% 76%, rgba(138,63,252,.07), transparent 42%);
  pointer-events: none;
}
.portfolio-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,139,255,.24), rgba(138,63,252,.22), transparent);
}
.portfolio-hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, 1040px);
  margin-inline: auto;
  text-align: center;
}
.portfolio-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.35rem;
  padding: .48rem .95rem;
  color: #ab98ff;
  background: rgba(111,66,255,.075);
  border: 1px solid rgba(138,63,252,.2);
  border-radius: 999px;
}
.portfolio-hero h1 {
  max-width: 1000px;
  margin: 0 auto 1.45rem;
  color: var(--text-100);
  font-size: clamp(2.9rem,5vw,5.15rem);
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -.055em;
}
.portfolio-hero h1 span { display: block; }
.portfolio-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-70);
  font-size: 1.01rem;
  line-height: 1.8;
}
.portfolio-hero__meta {
  width: min(100%,860px);
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 2.8rem auto 0;
  padding: .72rem;
  background: linear-gradient(135deg,rgba(255,255,255,.042),rgba(255,255,255,.014));
  border: 1px solid rgba(129,151,199,.14);
  border-radius: 20px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 55px rgba(0,3,18,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
.portfolio-hero__meta-item {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: .95rem 1.1rem;
  text-align: start;
}
.portfolio-hero__meta-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  width: 1px;
  height: 44px;
  transform: translateY(-50%);
  background: linear-gradient(180deg,transparent,rgba(143,180,255,.2),transparent);
}
.portfolio-hero__meta-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aeb9ff;
  background: linear-gradient(145deg,rgba(45,140,255,.12),rgba(138,63,252,.1));
  border: 1px solid rgba(111,126,255,.18);
  border-radius: 13px;
}
.portfolio-hero__meta-item strong {
  display: block;
  margin-bottom: .18rem;
  color: var(--text-100);
  font-size: .98rem;
}
.portfolio-hero__meta-item div span {
  display: block;
  color: var(--text-50);
  font-size: .69rem;
}
.portfolio-hero__glow { position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; }
.portfolio-hero__glow--blue { top:-210px; right:15%; width:520px; height:520px; background:rgba(45,140,255,.13); }
.portfolio-hero__glow--purple { left:18%; bottom:-280px; width:560px; height:560px; background:rgba(138,63,252,.1); }

.portfolio-library { padding: 110px 0 0; }
.portfolio-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  text-align: center;
}
.portfolio-toolbar__copy { width:min(100%,760px); margin-inline:auto; }
.portfolio-toolbar__label {
  display:block;
  margin-bottom:.75rem;
  color:var(--glow-purple);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
}
.portfolio-toolbar h2 {
  margin:0;
  color:var(--text-100);
  font-size:clamp(2.15rem,3.8vw,3.65rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.045em;
}
.portfolio-toolbar__description {
  max-width:650px;
  margin:1rem auto 0;
  color:var(--text-50);
  font-size:.88rem;
  line-height:1.75;
}
.portfolio-filters {
  width:min(100%,1240px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.65rem;
  margin-inline:auto;
}
.portfolio-filter {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.7rem 1rem;
  color:var(--text-70);
  background:rgba(255,255,255,.025);
  border:1px solid var(--card-border);
  border-radius:999px;
  font-size:.76rem;
  font-weight:600;
  white-space:nowrap;
  transition:.25s ease;
}
.portfolio-filter i { color:#aeb9ff; font-size:.78rem; }
.portfolio-filter:hover {
  color:var(--text-100);
  background:rgba(255,255,255,.045);
  border-color:rgba(111,126,255,.3);
  transform:translateY(-2px);
}
.portfolio-filter.is-active {
  color:#fff;
  background:linear-gradient(135deg,var(--grad-blue),var(--grad-purple));
  border-color:transparent;
  box-shadow:0 10px 28px rgba(111,66,255,.28);
}
.portfolio-filter.is-active i { color:#fff; }

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.portfolio-project {
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--card-border);
  border-radius:1.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:opacity .28s ease,transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.portfolio-project:hover {
  transform:translateY(-7px);
  border-color:rgba(111,126,255,.25);
  box-shadow:0 26px 58px rgba(0,3,16,.28),inset 0 1px 0 rgba(255,255,255,.05);
}
.portfolio-project.is-filtering-out { opacity:0; transform:translateY(14px) scale(.98); }
.portfolio-project__media {
  position:relative;
  height:235px;
  display:block;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(45,140,255,.12),rgba(138,63,252,.13));
}
.portfolio-project__image {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.portfolio-project:hover .portfolio-project__image { transform:scale(1.055); filter:saturate(1.08) contrast(1.03); }
.portfolio-project__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,5,18,.02) 5%,rgba(3,5,18,.12) 58%,rgba(3,5,18,.58) 100%);
}
.portfolio-project__index,
.portfolio-project__open {
  position:absolute;
  top:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(5,8,25,.58);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.portfolio-project__index {
  inset-inline-start:1rem;
  min-width:42px;
  height:29px;
  padding-inline:.65rem;
  border-radius:999px;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.1em;
}
.portfolio-project__open {
  inset-inline-end:1rem;
  width:39px;
  height:39px;
  border-radius:50%;
  font-size:.7rem;
  opacity:0;
  transform:translateY(-5px);
  transition:.3s ease;
}
.portfolio-project:hover .portfolio-project__open {
  opacity:1;
  transform:translateY(0);
  background:linear-gradient(135deg,var(--grad-blue),var(--grad-purple));
}
.portfolio-project__content {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:1.45rem;
}
.portfolio-project__meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
}
.portfolio-project__meta span {
  color:var(--glow-blue);
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.portfolio-project__meta time { color:var(--text-50); font-size:.66rem; }
.portfolio-project h3 {
  margin:0 0 .65rem;
  color:var(--text-100);
  font-size:1.08rem;
  font-weight:700;
  line-height:1.3;
}
.portfolio-project p { margin:0; color:var(--text-50); font-size:.78rem; line-height:1.7; }
.portfolio-project__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:auto;
  padding-top:1.15rem;
  border-top:1px solid var(--why-divider);
}
.portfolio-project__tech { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.portfolio-project__tech span {
  min-height:27px;
  display:inline-flex;
  align-items:center;
  padding:.28rem .62rem;
  color:var(--text-70);
  background:rgba(255,255,255,.03);
  border:1px solid var(--card-border);
  border-radius:999px;
  font-size:.61rem;
  font-weight:600;
}
.portfolio-project__actions { flex-shrink:0; display:flex; align-items:center; gap:.45rem; }
.portfolio-project__action {
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-70);
  background:rgba(255,255,255,.025);
  border:1px solid var(--card-border);
  border-radius:50%;
  font-size:.68rem;
  transition:.25s ease;
}
.portfolio-project__action:hover {
  color:var(--text-100);
  background:rgba(255,255,255,.065);
  border-color:rgba(111,126,255,.32);
  transform:translateY(-2px);
}
.portfolio-project__action--primary {
  color:#fff;
  background:linear-gradient(135deg,var(--grad-blue),var(--grad-purple));
  border-color:transparent;
  box-shadow:0 8px 22px rgba(111,66,255,.22);
}
.portfolio-project__action--primary:hover {
  color:#fff;
  transform:translateY(-2px) rotate(-6deg);
  box-shadow:0 11px 28px rgba(111,66,255,.36);
}
.portfolio-project__action.is-disabled { cursor:not-allowed; opacity:.42; pointer-events:none; }

.portfolio-empty {
  margin-top:1.25rem;
  padding:4rem 1.5rem;
  text-align:center;
  background:rgba(255,255,255,.02);
  border:1px solid var(--card-border);
  border-radius:1.35rem;
}
.portfolio-empty__icon {
  width:54px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
  color:var(--glow-blue);
  background:rgba(45,140,255,.08);
  border:1px solid rgba(45,140,255,.18);
  border-radius:16px;
}
.portfolio-empty h3 { margin:0 0 .5rem; color:var(--text-100); font-size:1.1rem; }
.portfolio-empty p { margin:0; color:var(--text-50); font-size:.82rem; }

.portfolio-capabilities { padding:130px 0 0; }
.portfolio-capabilities__head {
  width:min(100%,760px);
  margin:0 auto 2.6rem;
  text-align:center;
}
.portfolio-capabilities__head .section-title { font-size:clamp(2.1rem,3.7vw,3.6rem); line-height:1.08; }
.portfolio-capabilities__grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
}
.portfolio-capabilities__grid article {
  min-width:0;
  padding:2rem 1.5rem;
  border-inline-end:1px solid var(--card-border);
  transition:.3s ease;
}
.portfolio-capabilities__grid article:last-child { border-inline-end:0; }
.portfolio-capabilities__grid article:hover { background:rgba(255,255,255,.025); transform:translateY(-4px); }
.portfolio-capabilities__grid article > span {
  display:block;
  margin-bottom:2rem;
  color:var(--text-50);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
}
.portfolio-capabilities__grid i { margin-bottom:1.1rem; color:#aab7ff; font-size:1.25rem; }
.portfolio-capabilities__grid h3 { margin:0 0 .65rem; color:var(--text-100); font-size:1rem; }
.portfolio-capabilities__grid p { margin:0; color:var(--text-50); font-size:.76rem; line-height:1.7; }

@media (max-width:1199.98px) {
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-capabilities__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  .portfolio-hero { padding-top:140px; padding-bottom:68px; }
  .portfolio-hero__meta { grid-template-columns:1fr; }
  .portfolio-hero__meta-item:not(:last-child)::after {
    top:auto;
    bottom:0;
    left:50%;
    width:70%;
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(143,180,255,.2),transparent);
  }
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-project__media { height:245px; }
  .portfolio-capabilities__grid { grid-template-columns:1fr; }
  .portfolio-capabilities__grid article { border-inline-end:0; border-bottom:1px solid var(--card-border); }
}
@media (max-width:575.98px) {
  .portfolio-hero h1 { font-size:clamp(2.6rem,13vw,4rem); }
  .portfolio-filter { min-height:40px; padding-inline:.8rem; }
  .portfolio-project__media { height:215px; }
}