.platform-tab-list { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid rgba(120, 186, 195, .4); background: rgba(5, 15, 24, .55); }
.platform-tab { min-height: 47px; padding: 10px 22px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.platform-tab:hover { color: var(--white); background: rgba(112, 239, 229, .12); }
.platform-tab[aria-selected="true"] { color: #07121b; background: linear-gradient(105deg, var(--lime), var(--aqua)); box-shadow: 0 0 22px rgba(111, 239, 204, .18); }
.platform-tab:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.platform-tab-panel[hidden] { display: none; }
.platform-tab-panel:not([hidden]) { animation: platform-panel-reveal .28s ease-out both; }
@keyframes platform-panel-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.sample-index { padding-top: 80px; }
.sample-index > .eyebrow { margin: 0 0 25px; }
.sample-index .platform-tab-list { margin-bottom: 24px; }
.sample-stage { position: relative; isolation: isolate; min-height: 440px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 5vw, 80px); border: 1px solid rgba(116, 189, 180, .4); border-top: 3px solid var(--aqua); background: radial-gradient(circle at 88% 50%, rgba(67, 202, 230, .14), transparent 36%), #101923; }
.sample-stage::before { content: ""; position: absolute; z-index: -1; width: min(55%, 550px); aspect-ratio: 1; right: -10%; top: -20%; border: 1px solid rgba(91, 217, 235, .32); border-radius: 50%; box-shadow: 0 0 0 65px rgba(91, 217, 235, .04), 0 0 0 130px rgba(91, 217, 235, .025); pointer-events: none; }
.sample-stage-mark { position: absolute; right: 7%; top: 10%; color: var(--aqua); font-size: clamp(80px, 15vw, 210px); line-height: 1; opacity: .18; }
.sample-stage-label { color: var(--aqua); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.sample-stage h2 { max-width: 740px; margin: 24px 0; font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(48px, 6vw, 84px); font-weight: 900; line-height: .98; letter-spacing: -.07em; text-transform: uppercase; }
.sample-stage p { max-width: 560px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.sample-card{overflow:hidden;border:1px solid rgba(116,189,180,.4);background:#101923}.sample-card>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.sample-card-copy{padding:28px}.sample-card-label{color:var(--aqua);font-size:11px;font-weight:900;letter-spacing:.14em}.sample-card h2{margin:14px 0;font-size:clamp(26px,3vw,40px);line-height:1.05;text-transform:uppercase}.sample-card strong{display:block;color:var(--white)}.sample-card p{color:var(--muted);line-height:1.6}.sample-card a{display:inline-block;margin-top:12px;color:var(--lime);font-size:12px;font-weight:900;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}.sample-card a:hover{text-decoration:underline}

.work-index { padding-top: 80px; }
.work-index-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 25px; }
.work-index-heading .eyebrow { margin: 0; }
.work-index-heading > p { max-width: 400px; margin: 0; color: var(--muted); line-height: 1.6; }
.work-index > .platform-tabs > .platform-tab-list { margin-bottom: 34px; }
.platform-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.platform-details-link { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.platform-details-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.work-index .work-honesty { max-width: 74ch; margin: 32px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.work-index .section-more { margin-top: 28px; }

:root[data-theme="light"] .platform-tab-list { border-color: #95b5b6; background: #dcece8; }
:root[data-theme="light"] .platform-tab { color: #31525c; }
:root[data-theme="light"] .platform-tab:hover { color: #12333a; background: #c9e5dc; }
:root[data-theme="light"] .platform-tab[aria-selected="true"] { color: #071c24; }
:root[data-theme="light"] .sample-stage { border-color: #9fc8cb; border-top-color: #188c9b; background: radial-gradient(circle at 88% 50%, rgba(67, 202, 230, .18), transparent 36%), #eaf4f3; }
:root[data-theme="light"] .sample-stage-label { color: #117b89; }
:root[data-theme="light"] .sample-stage p { color: #4a6469; }
:root[data-theme="light"] .sample-card{background:#eaf4f3;border-color:#9fc8cb}
:root[data-theme="light"] .platform-details-link { color: #31525c; }
:root[data-theme="light"] .platform-details-link:hover { color: #102b34; }

@media (max-width: 620px) { .sample-index { padding-top: 60px; } .sample-index .platform-tab-list, .work-index > .platform-tabs > .platform-tab-list { display: grid; width: 100%; } .platform-tab { padding-inline: 10px; font-size: 10px; } .sample-stage { min-height: 370px; padding: 30px; } .sample-stage h2 { font-size: clamp(42px, 10vw, 58px); } .sample-stage p { font-size: 15px; } .sample-grid{grid-template-columns:1fr}.sample-card-copy{padding:22px}.work-index-heading { display: block; } .work-index-heading > p { margin-top: 17px; } }
@media (prefers-reduced-motion: reduce) { .platform-tab { transition: none; } .platform-tab-panel:not([hidden]) { animation: none; } }