.portfolio-page { padding: clamp(55px, 8vw, 98px) 24px clamp(65px, 9vw, 112px); background: radial-gradient(circle at 10% 12%, rgba(14, 180, 228, .2), transparent 31%), radial-gradient(circle at 92% 72%, rgba(88, 99, 255, .28), transparent 35%), var(--orbit-blue); color: #fff; }
.portfolio-hero, .portfolio-showcase, .portfolio-cta { width: min(1120px, 100%); margin-inline: auto; }
.portfolio-hero { text-align: center; }
.portfolio-kicker { display: inline-flex; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; color: #fff; font: 700 14px/1.2 "Archivo", sans-serif; }
.portfolio-hero h1 { margin: 21px 0 0; color: #fff; font: 800 clamp(43px, 8vw, 72px)/1 "Archivo", sans-serif; letter-spacing: -.05em; }
.portfolio-hero > p { max-width: 780px; margin: 22px auto 0; color: rgba(255, 255, 255, .88); font-size: clamp(17px, 2.3vw, 22px); line-height: 1.55; }
.portfolio-showcase { margin-top: clamp(44px, 7vw, 72px); padding: clamp(16px, 2.5vw, 26px); border: 2px solid rgba(255, 255, 255, .88); border-radius: 22px; background: rgba(5, 0, 185, .54); box-shadow: 0 28px 70px rgba(0, 0, 90, .35); }
.portfolio-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.portfolio-tab { min-height: 72px; padding: 11px 13px; display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, .82); border-radius: 12px; background: transparent; color: #fff; font-family: "Roboto", sans-serif; text-align: left; cursor: pointer; }
.portfolio-tab > i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .12); }
.portfolio-tab strong, .portfolio-tab small { display: block; }
.portfolio-tab strong { font: 700 15px/1.15 "Archivo", sans-serif; }
.portfolio-tab small { margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 11px; }
.portfolio-tab[aria-selected="true"] { border-color: #fff; background: #fff; color: var(--orbit-blue); box-shadow: 0 8px 18px rgba(0, 0, 80, .22); }
.portfolio-tab[aria-selected="true"] > i { background: #d8f2ff; }
.portfolio-tab[aria-selected="true"] small { color: #567091; }
.portfolio-tab:focus-visible { outline: 3px solid var(--orbit-cyan); outline-offset: 2px; }
.portfolio-panel { margin-top: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .6); border-radius: 16px; background: #fff; color: #1a2e4d; }
.portfolio-panel[hidden] { display: none; }
.portfolio-panel img { width: 100%; display: block; aspect-ratio: 2 / 1; object-fit: cover; background: var(--orbit-blue); }
.portfolio-panel > div { padding: clamp(24px, 4vw, 42px); text-align: center; }
.portfolio-panel-label { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: #d8f2ff; color: var(--orbit-blue); font: 700 12px/1.2 "Archivo", sans-serif; text-transform: uppercase; letter-spacing: .045em; }
.portfolio-panel h2 { max-width: 850px; margin: 15px auto 0; color: var(--orbit-blue); font: 800 clamp(27px, 4.5vw, 43px)/1.08 "Archivo", sans-serif; letter-spacing: -.035em; }
.portfolio-panel p { max-width: 800px; margin: 16px auto 0; color: #3c5778; font-size: clamp(16px, 2vw, 19px); line-height: 1.58; }
.portfolio-cta { margin-top: clamp(55px, 8vw, 88px); padding: clamp(34px, 6vw, 58px); border: 1px solid #9ecff0; border-radius: 22px; background: var(--orbit-pale); color: #1a2e4d; text-align: center; }
.portfolio-cta > span { color: var(--orbit-blue); font: 700 14px/1.2 "Archivo", sans-serif; }
.portfolio-cta h2 { max-width: 850px; margin: 13px auto 0; color: var(--orbit-blue); font: 800 clamp(29px, 5vw, 48px)/1.08 "Archivo", sans-serif; letter-spacing: -.035em; }
.portfolio-cta p { max-width: 680px; margin: 16px auto 0; color: #3c5778; font-size: 18px; line-height: 1.5; }
.portfolio-cta a { min-height: 54px; margin-top: 24px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; background: var(--orbit-blue); box-shadow: 0 7px 18px rgba(13, 39, 160, .22); color: #fff; font: 700 17px/1.2 "Archivo", sans-serif; text-decoration: none; }
.portfolio-cta a:hover, .portfolio-cta a:focus-visible { background: #061abf; outline: 3px solid var(--orbit-cyan); outline-offset: 2px; }
@media (max-width: 820px) { .portfolio-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .portfolio-page { padding: 42px 14px 70px; } .portfolio-showcase { padding: 11px; border-radius: 16px; } .portfolio-tabs { grid-template-columns: 1fr; } .portfolio-tab { min-height: 62px; } .portfolio-panel img { aspect-ratio: 1.45 / 1; } .portfolio-cta { padding: 31px 17px; border-radius: 17px; } }