/* ================================================================
   portfolio-final.css — Clean Minimal Override (loads last)
   Beats design-v2.css !important rules on portfolio cards
   ================================================================ */

/* ── Body: quieter ── */
body {
  background:
    radial-gradient(ellipse 70% 40% at -4% -6%, rgba(88,28,235,.15), transparent),
    radial-gradient(ellipse 50% 36% at 106% 102%, rgba(22,193,255,.08), transparent),
    #020817 !important;
}
body::before { opacity: .38 !important; }
body::after  { display: none !important; }

/* ── Hero ── */
.page-hero {
  position: relative !important;
  min-height: 58vh !important;
  padding: 10rem 0 4.5rem !important;
  background: radial-gradient(circle at 18% 24%, rgba(97,218,251,.16), transparent 22rem),
    radial-gradient(circle at 82% 14%, rgba(167,139,250,.14), transparent 20rem),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 62%),
    #020817 !important;
  overflow: hidden !important;
}
.page-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 3.6rem 1.4rem 0 !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%) !important;
  pointer-events: none !important;
}
.page-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.008) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.008) 1px, transparent 1px);
  background-size: 80px 80px !important;
  opacity: .15 !important;
  pointer-events: none !important;
}
.page-hero .section-label {
  color: rgba(97,218,251,.92) !important;
  letter-spacing: .18em !important;
  font-size: .75rem !important;
}
.page-hero h1 {
  font-size: clamp(3rem, 5vw, 5.4rem) !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
}
.ph-inner {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 2rem !important;
}
.ph-inner > div:first-child {
  max-width: 720px !important;
}
.ph-actions {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-top: 2rem !important;
}
.ph-actions .btn-glow { min-width: 170px !important; }

.ph-stat {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  padding: 1.35rem 1.4rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.ph-stat strong {
  display: block !important;
  font-size: 1.95rem !important;
  color: #fff !important;
  margin-bottom: .4rem !important;
}
.ph-stat span {
  color: rgba(241,245,249,.6) !important;
  font-family: var(--font-mono) !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.ph-stats {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding-top: 1.75rem !important;
  margin-top: 0 !important;
}

.portfolio-proof {
  max-width: 1280px !important;
  margin: 0 auto 3rem !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
.portfolio-proof div {
  padding: 1.25rem 1.35rem !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.portfolio-proof strong {
  display: block !important;
  font-family: var(--font-head) !important;
  font-size: 1.75rem !important;
  line-height: 1.05 !important;
  background: linear-gradient(135deg, #fff, rgba(167,139,250,.9)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: .4rem !important;
}
.portfolio-proof span {
  color: rgba(241,245,249,.54) !important;
  font-size: .8rem !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* ── Cards — flat dark, no glass ── */
.port-card {
  position: relative !important;
  background: #08111f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.18) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.port-card:hover {
  background: #08111f !important;
  border-color: rgba(139,92,246,.3) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.32) !important;
}
.port-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at top left, rgba(97,218,251,.08), transparent 24%),
    radial-gradient(circle at bottom right, rgba(167,139,250,.06), transparent 26%) !important;
  opacity: .23 !important;
  pointer-events: none !important;
}

/* ── Card image area ── */
.port-img {
  height: 260px !important;
  background: linear-gradient(158deg,#0d1628 0%,#06101d 100%) !important;
  filter: none !important;
  position: relative !important;
}
.port-img::after { display: none !important; }
.port-img::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 20%, rgba(97,218,251,.05), transparent 28%) !important;
  pointer-events: none !important;
}

/* ── Stack layer diagram ── */
.port-stack-vis {
  padding: 2rem 1.4rem 1.4rem !important;
  gap: .46rem !important;
}
.psv-layer {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid rgba(255,255,255,.07) !important;
  border-radius: 0 5px 5px 0 !important;
  padding: .28rem .68rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.psv-layer:hover { border-left-color: rgba(255,255,255,.18) !important; }
.psv-tier { color: rgba(255,255,255,.28) !important; font-size: .55rem !important; }

/* tier accent colors — keep but subtler */
.psv-layer.l-frontend { border-left-color: rgba(97,218,251,.35) !important; }
.psv-layer.l-backend  { border-left-color: rgba(53,114,165,.45) !important; }
.psv-layer.l-ai       { border-left-color: rgba(255,153,0,.35)  !important; }
.psv-layer.l-infra    { border-left-color: rgba(139,92,246,.4)  !important; }
.psv-layer.l-data     { border-left-color: rgba(34,211,238,.38) !important; }
.psv-layer.l-security { border-left-color: rgba(52,211,153,.38) !important; }
.psv-layer.l-mobile   { border-left-color: rgba(245,158,11,.38) !important; }

/* ── Card body ── */
.port-body {
  padding: 1.35rem 1.5rem 1.6rem !important;
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.port-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
  color: rgba(255,255,255,.96) !important;
  margin-bottom: .7rem !important;
}
.port-desc {
  font-size: .84rem !important;
  line-height: 1.75 !important;
  color: rgba(241,245,249,.64) !important;
  margin-bottom: 1.2rem !important;
}
.port-card:hover .port-desc { color: rgba(241,245,249,.82) !important; }

.port-stat-chip {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: .63rem !important;
  font-weight: 600 !important;
}
.port-stat-chip.green { color: rgba(34,211,238,.88) !important; }
.port-stat-chip.gold  { color: rgba(251,191,36,.88)  !important; }
.port-stat-chip       { color: rgba(167,139,250,.88) !important; }

/* ── Tech tags ── */
.ptag {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .57rem !important;
  padding: .15rem .46rem !important;
  border-radius: 4px !important;
}

/* ── Category badge ── */
.port-cat {
  background: rgba(6,9,18,.82) !important;
  border-color: rgba(255,255,255,.09) !important;
  color: rgba(241,245,249,.55) !important;
  font-size: .6rem !important;
}
.port-year { color: rgba(241,245,249,.28) !important; }

/* ── Case study toggle ── */
.port-case-toggle {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(241,245,249,.58) !important;
}
.port-case-toggle:hover,
.port-case-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(241,245,249,.92) !important;
}
.pct-arrow { color: inherit !important; }

.port-case {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  margin-top: 1rem !important;
}
.port-case.open { max-height: 1000px !important; }
.case-inner { padding: 1.35rem !important; }
.case-arch {
  background: rgba(255,255,255,.03) !important;
  border-radius: 14px !important;
  padding: .85rem 1rem !important;
}
.case-block {
  background: rgba(255,255,255,.015) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
}
.case-block:not(:last-child) {
  margin-bottom: 1rem !important;
}
.case-block-label { color: rgba(97,218,251,.9) !important; }
.case-block-text { color: rgba(241,245,249,.62) !important; }

/* ── Port link ── */
.port-link {
  color: rgba(241,245,249,.62) !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  transition: color .2s ease, transform .2s ease !important;
}
.port-card:hover .port-link { color: rgba(255,255,255,.92) !important; gap: .55rem !important; transform: translateX(2px) !important; }

.ptag {
  color: rgba(241,245,249,.62) !important;
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.03) !important;
}

/* ── Gallery / wide cards ── */
.port-img--gallery {
  height: clamp(360px, 44vw, 580px) !important;
  cursor: pointer !important;
  filter: none !important;
  position: relative !important;
}
.port-img--gallery::after { display: none !important; }
.port-img--gallery::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 20% 20%, rgba(97,218,251,.08), transparent 26%) !important;
  pointer-events: none !important;
}
.port-img { position: relative !important; }
.port-img::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at top left, rgba(97,218,251,.08), transparent 28%) !important;
  pointer-events: none !important;
}
.pg-slide {
  object-fit: cover !important;
  object-position: top !important;
}
.pg-dots {
  gap: .45rem !important;
}
.pg-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.28) !important;
}
.pg-dot.active { background: #fff !important; }
.pg-btn {
  background: rgba(8,17,31,.8) !important;
  border-color: rgba(255,255,255,.1) !important;
  backdrop-filter: none !important;
}
.pg-btn:hover {
  background: rgba(8,17,31,.95) !important;
  border-color: rgba(255,255,255,.24) !important;
}

/* click hint — remove it */
.port-img::after { display: none !important; }

/* wide card body */
.port-body--wide {
  background: #08111f !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.po-val {
  font-size: 1.6rem !important;
  background: linear-gradient(135deg,#fff,rgba(167,139,250,.88)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.po-lbl { color: rgba(241,245,249,.32) !important; }
.ptag { /* already above */ }

/* ── Filter ── */
.filter-row {
  background: rgba(6,9,18,.78) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.18) !important;
  padding: 6px !important;
  border-radius: 16px !important;
  gap: .35rem !important;
  margin-bottom: 2.5rem !important;
  justify-content: center !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ftab {
  font-size: .7rem !important;
  letter-spacing: .085em !important;
  padding: .55rem 1rem !important;
  min-height: 38px !important;
  color: rgba(241,245,249,.58) !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  transition: all .2s ease !important;
}
.ftab:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.ftab.active {
  background: linear-gradient(135deg, rgba(139,92,246,.92), rgba(34,211,238,.95)) !important;
  color: #060810 !important;
  box-shadow: 0 18px 40px rgba(34,211,238,.2) !important;
  border-color: transparent !important;
}

/* ── Section intro ── */
.port-section-intro {
  margin-bottom: 2.5rem !important;
  padding-bottom: 2.25rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.port-section-intro .section-label {
  margin-bottom: 1rem !important;
}
.port-sec-title {
  font-size: clamp(2rem,3.8vw,2.8rem) !important;
  letter-spacing: -.035em !important;
  margin-bottom: .6rem !important;
}
.port-sec-sub {
  color: rgba(241,245,249,.58) !important;
  font-size: .95rem !important;
  line-height: 1.8 !important;
  max-width: 650px !important;
}

/* ── Grid ── */
.port-grid { gap: 1.25rem !important; }

/* ── mobile ── */
@media (max-width: 1024px) {
  .portfolio-proof { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .port-img--gallery { height: clamp(220px,48vw,340px) !important; }
  .ph-stats {
    border-top: none !important;
    padding-top: 0 !important;
  }
  .ph-actions {
    justify-content: flex-start !important;
  }
  .portfolio-proof { grid-template-columns: 1fr !important; }
  .portfolio-proof div { text-align: left !important; }
}

/* Portfolio visual refresh */
.page-hero {
  min-height: 0 !important;
  padding: 9.25rem 0 4.25rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(34, 211, 238, .14), transparent 24rem),
    radial-gradient(circle at 82% 10%, rgba(139, 92, 246, .22), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 66%),
    #020817 !important;
}

.page-hero::before {
  inset: 5.6rem 1.4rem 1.1rem !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 36%),
    linear-gradient(180deg, rgba(8, 17, 31, .28), rgba(8, 17, 31, .05)) !important;
}

.ph-inner {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1fr) !important;
  grid-template-areas:
    "copy visual"
    "stats visual"
    "actions visual" !important;
  gap: 1.65rem 3rem !important;
  align-items: center !important;
}

.ph-copy {
  grid-area: copy !important;
  max-width: 720px !important;
}

.page-hero h1 {
  max-width: 760px !important;
  font-size: clamp(3.2rem, 6.2vw, 6.2rem) !important;
  line-height: .9 !important;
  letter-spacing: -.052em !important;
}

.page-hero p {
  max-width: 590px !important;
  color: rgba(241, 245, 249, .7) !important;
}

.ph-kickers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  margin-top: 1.4rem !important;
}

.ph-kickers span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: .25rem .68rem !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: rgba(241, 245, 249, .68) !important;
  font-family: var(--font-mono) !important;
  font-size: .64rem !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.ph-showcase {
  grid-area: visual !important;
  position: relative !important;
  min-height: 500px !important;
  isolation: isolate !important;
}

.ph-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 2rem 1.2rem 3.3rem 5.4rem !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(34, 211, 238, .22), transparent 26%),
    radial-gradient(circle at 78% 82%, rgba(139, 92, 246, .24), transparent 32%),
    rgba(255, 255, 255, .055) !important;
  filter: blur(.2px) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36) !important;
  z-index: -2 !important;
}

.ph-screen {
  position: absolute !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 18px !important;
  background: #07101e !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.ph-screen::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 28px !important;
  background:
    radial-gradient(circle at 18px 14px, rgba(248, 113, 113, .9) 0 4px, transparent 4.5px),
    radial-gradient(circle at 34px 14px, rgba(251, 191, 36, .9) 0 4px, transparent 4.5px),
    radial-gradient(circle at 50px 14px, rgba(34, 197, 94, .9) 0 4px, transparent 4.5px),
    rgba(2, 8, 23, .82) !important;
  z-index: 2 !important;
}

.ph-screen img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
  display: block !important;
  padding-top: 28px !important;
}

.ph-screen-main {
  inset: 2.5rem 3.2rem 2.2rem 2.2rem !important;
  z-index: 1 !important;
}

.ph-screen-top {
  width: 42% !important;
  height: 34% !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
}

.ph-screen-bottom {
  width: 38% !important;
  height: 34% !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

.ph-showcase-card {
  position: absolute !important;
  right: 1rem !important;
  bottom: 1.1rem !important;
  z-index: 4 !important;
  width: 168px !important;
  padding: .95rem 1rem !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 16px !important;
  background: rgba(6, 9, 18, .78) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .36) !important;
}

.ph-showcase-card strong {
  display: block !important;
  font-family: var(--font-head) !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  color: #fff !important;
}

.ph-showcase-card span {
  display: block !important;
  margin-top: .35rem !important;
  color: rgba(241, 245, 249, .55) !important;
  font-family: var(--font-mono) !important;
  font-size: .62rem !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

.ph-stats {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}

.ph-actions {
  grid-area: actions !important;
}

.portfolio-proof {
  margin-top: -1.35rem !important;
  margin-bottom: 4.5rem !important;
  border-radius: 14px !important;
  background: rgba(6, 9, 18, .72) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .24) !important;
}

.portfolio-proof div {
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    rgba(8, 17, 31, .86) !important;
}

.port-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    #071120 !important;
  border-color: rgba(255, 255, 255, .09) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 52px rgba(0, 0, 0, .18) !important;
}

.port-card:hover {
  border-color: rgba(34, 211, 238, .28) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .36), 0 0 0 1px rgba(34, 211, 238, .04) !important;
}

.port-img {
  height: 270px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(34, 211, 238, .16), transparent 30%),
    radial-gradient(circle at 86% 82%, rgba(139, 92, 246, .18), transparent 34%),
    linear-gradient(158deg, #0b1728 0%, #040b16 100%) !important;
}

.port-stack-vis {
  padding: 3.1rem 1.25rem 1.35rem !important;
}

.psv-layer {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-left-width: 3px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.psv-layer:hover {
  background: rgba(255, 255, 255, .055) !important;
  transform: translateX(2px) !important;
}

.port-body {
  padding: 1.55rem !important;
}

.port-title {
  font-size: 1.14rem !important;
}

.port-desc {
  color: rgba(241, 245, 249, .68) !important;
}

.port-stats-row {
  gap: .5rem .75rem !important;
}

.port-stat-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: .18rem .54rem !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .035) !important;
}

.port-img--gallery {
  height: clamp(420px, 48vw, 640px) !important;
  padding: 1.15rem !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .16), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(139, 92, 246, .18), transparent 32%),
    #050b15 !important;
}

.pg-track {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.pg-slide {
  object-fit: contain !important;
  object-position: center top !important;
  background: rgba(3, 7, 18, .72) !important;
}

.pg-btn {
  width: 44px !important;
  height: 44px !important;
  background: rgba(3, 7, 18, .76) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .28) !important;
}

.pg-prev { left: 1.7rem !important; }
.pg-next { right: 1.7rem !important; }

.pg-dot {
  width: 22px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .24) !important;
}

.pg-dot.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .95), rgba(167, 139, 250, .95)) !important;
}

.port-body--wide {
  padding: 2rem 2.2rem 2.1rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
    #071120 !important;
}

.port-outcomes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
  gap: .75rem !important;
}

.port-outcome {
  min-height: 82px !important;
  padding: .9rem 1rem !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .035) !important;
  text-align: left !important;
}

.po-val {
  font-size: 1.55rem !important;
}

.case-block {
  background: rgba(255, 255, 255, .028) !important;
}

@media (max-width: 1080px) {
  .ph-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "visual"
      "stats"
      "actions" !important;
  }

  .ph-showcase {
    min-height: 430px !important;
    max-width: 760px !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .page-hero {
    padding: 8rem 0 3.25rem !important;
  }

  .page-hero h1 {
    font-size: clamp(2.85rem, 16vw, 4.25rem) !important;
  }

  .ph-showcase {
    min-height: 320px !important;
  }

  .ph-screen-main {
    inset: 1.9rem 1rem 2.4rem 1rem !important;
  }

  .ph-screen-top {
    width: 48% !important;
    height: 30% !important;
    right: .2rem !important;
  }

  .ph-screen-bottom {
    width: 46% !important;
    height: 30% !important;
    left: .1rem !important;
  }

  .ph-showcase-card {
    width: 138px !important;
    right: .35rem !important;
    bottom: .45rem !important;
    padding: .72rem .78rem !important;
  }

  .ph-showcase-card strong {
    font-size: 1.55rem !important;
  }

  .ph-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .port-img {
    height: 235px !important;
  }

  .port-img--gallery {
    height: clamp(260px, 70vw, 380px) !important;
    padding: .7rem !important;
  }

  .port-wide-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .port-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

html.light-mode .page-hero,
body.light-mode .page-hero {
  background:
    radial-gradient(circle at 14% 12%, rgba(37, 99, 235, .12), transparent 24rem),
    radial-gradient(circle at 82% 10%, rgba(15, 118, 110, .12), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(238, 243, 248, .52)) !important;
}

html.light-mode .page-hero::before,
body.light-mode .page-hero::before {
  border-color: rgba(15, 23, 42, .1) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .36)),
    rgba(255, 255, 255, .58) !important;
}

html.light-mode .page-hero p,
body.light-mode .page-hero p {
  color: rgba(15, 23, 42, .68) !important;
}

html.light-mode .ph-kickers span,
body.light-mode .ph-kickers span,
html.light-mode .ph-stat,
body.light-mode .ph-stat,
html.light-mode .portfolio-proof,
body.light-mode .portfolio-proof,
html.light-mode .portfolio-proof div,
body.light-mode .portfolio-proof div,
html.light-mode .port-card,
body.light-mode .port-card,
html.light-mode .port-body--wide,
body.light-mode .port-body--wide,
html.light-mode .port-outcome,
body.light-mode .port-outcome,
html.light-mode .case-block,
body.light-mode .case-block {
  border-color: rgba(15, 23, 42, .11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .76)),
    #fff !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .1) !important;
}

html.light-mode .ph-kickers span,
body.light-mode .ph-kickers span,
html.light-mode .ph-showcase-card span,
body.light-mode .ph-showcase-card span,
html.light-mode .po-lbl,
body.light-mode .po-lbl {
  color: rgba(15, 23, 42, .56) !important;
}

html.light-mode .ph-stat strong,
body.light-mode .ph-stat strong,
html.light-mode .ph-showcase-card strong,
body.light-mode .ph-showcase-card strong,
html.light-mode .port-title,
body.light-mode .port-title,
html.light-mode .case-block-text,
body.light-mode .case-block-text {
  color: #0f172a !important;
  -webkit-text-fill-color: initial !important;
}

html.light-mode .port-desc,
body.light-mode .port-desc,
html.light-mode .port-sec-sub,
body.light-mode .port-sec-sub {
  color: rgba(15, 23, 42, .66) !important;
}

html.light-mode .ph-showcase::before,
body.light-mode .ph-showcase::before,
html.light-mode .ph-showcase-card,
body.light-mode .ph-showcase-card,
html.light-mode .ph-screen,
body.light-mode .ph-screen,
html.light-mode .port-img,
body.light-mode .port-img,
html.light-mode .port-img--gallery,
body.light-mode .port-img--gallery,
html.light-mode .pg-track,
body.light-mode .pg-track {
  border-color: rgba(15, 23, 42, .12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(239, 246, 255, .72)),
    #eef3f8 !important;
}

html.light-mode .pg-slide,
body.light-mode .pg-slide {
  background: #f8fafc !important;
}