.hero-section{position:relative;z-index:1;padding:1.25rem 2rem 3.5rem;max-width:1440px;margin:0 auto;width:100%}.hero-container{display:flex;flex-direction:column;align-items:center;position:relative}.hero-stage-viewport{width:100%;display:flex;justify-content:center;align-items:center;padding:1rem 0 2rem;position:relative}.hero-display-assembly,.hero-device-stage{position:relative;display:flex;justify-content:center;align-items:center;transform:none!important;perspective:none!important}.hero-glass-device{--glass-pad: 9px;--screen-radius: 18px}.display-viewport-916{position:relative;height:clamp(560px,72vh,820px);width:auto;aspect-ratio:9 / 16;border-radius:var(--screen-radius);overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;transform:none!important;perspective:none!important;z-index:3}.hero-preview-video{width:100%;height:100%;object-fit:contain;display:block;transform:none!important}.display-action-overlay{position:absolute;inset:0;z-index:5;background:#12131633;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast),background var(--transition-fast);cursor:pointer}.hero-device-stage:hover .display-action-overlay,.display-viewport-916:hover .display-action-overlay{opacity:1;background:#12131659}.play-action-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;background:#fffffff2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);box-shadow:0 4px 16px #0003;transform:translateY(3px);transition:transform var(--transition-fast)}.hero-device-stage:hover .play-action-pill,.display-viewport-916:hover .play-action-pill{transform:translateY(0)}.play-action-pill svg{width:10px;height:10px;fill:currentColor}.floating-card{position:absolute;background:#ffffff9e;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 2px #14161c0a,0 12px 28px -18px #14161c2e;border-radius:14px;padding:.65rem .95rem;display:flex;flex-direction:column;gap:.2rem;pointer-events:auto;z-index:6;white-space:nowrap}.floating-card-header{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}.floating-card-sub{font-family:var(--font-sans);font-size:.75rem;color:var(--text-secondary)}.card-dot{width:6px;height:6px;border-radius:50%;background-color:var(--accent-emerald)}.panel-top-left{top:14%;right:calc(100% + 28px)}.panel-top-right{top:18%;left:calc(100% + 28px)}.panel-bottom-left{bottom:22%;right:calc(100% + 32px)}.panel-bottom-right{bottom:18%;left:calc(100% + 32px)}.mobile-pills-row{display:none}.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:640px;margin:1rem auto 0;gap:.9rem}.hero-meta-label{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.hero-title{font-family:var(--font-sans);font-size:clamp(2.25rem,4vw,3.5rem);font-weight:650;line-height:1.04;letter-spacing:-.04em;color:var(--text-primary)}.hero-project-name{display:block;font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:450;letter-spacing:-.015em;color:var(--text-secondary);margin-top:.45rem}.hero-description{font-size:1rem;line-height:1.55;color:var(--text-secondary);max-width:500px}.hero-cta-group{display:flex;align-items:center;gap:.9rem;margin-top:.35rem}.hero-specs-row{display:flex;align-items:center;gap:.9rem;margin-top:.75rem;padding-top:.85rem;border-top:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.hero-spec-item{display:inline-flex;align-items:center;gap:.35rem}.spec-divider{color:var(--border-medium)}@media (max-width: 768px){.hero-section{padding:1rem 1rem 2.5rem}.hero-stage-viewport{perspective:none;padding:.5rem 0 1rem}.hero-display-assembly,.hero-device-stage{transform:none!important;perspective:none!important}.hero-glass-device{--glass-pad: 7px;--screen-radius: 15px}.display-viewport-916{height:clamp(380px,58vh,480px);width:auto;aspect-ratio:9 / 16}.floating-card{display:none}.mobile-pills-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.75rem 0 .5rem;width:100%}.mobile-pills-row .footer-tag{font-size:.625rem;padding:.3rem .6rem}.hero-content{margin-top:.5rem;gap:.75rem}.hero-title{font-size:2.1rem}.hero-project-name{font-size:1.15rem}.hero-description{font-size:.9375rem}.hero-cta-group{flex-direction:column;width:100%;max-width:320px;gap:.65rem}.hero-cta-group .btn-primary,.hero-cta-group .btn-secondary{width:100%}.hero-specs-row{flex-wrap:wrap;justify-content:center;gap:.6rem}.spec-divider{display:none}}.selected-work-section{position:relative;z-index:1;width:100%;padding:6rem 2.5rem 6.5rem;border-top:1px solid var(--border-subtle)}.section-surface-alt{background:linear-gradient(180deg,#ffffffb8,#ffffff61)}.section-inner{max-width:1240px;margin:0 auto}.section-header{display:flex;flex-direction:column;gap:.65rem;margin-bottom:3rem;max-width:720px}.section-index{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.section-title{font-family:var(--font-sans);font-size:clamp(1.9rem,3.4vw,2.75rem);font-weight:650;letter-spacing:-.03em;line-height:1.1;color:var(--text-primary)}.section-category-prototype{color:#2f5fb8}.project-item{display:grid;grid-template-columns:1fr;gap:2rem;padding:3rem 0}.project-item+.project-item{border-top:1px solid var(--border-subtle)}.project-visual{height:clamp(560px,70vh,680px);padding:2.5rem}.project-visual>.glass-device{z-index:1;height:100%}.project-device{--glass-pad: 7px;--screen-radius: 16px}.project-device .glass-screen{height:100%;width:auto}.project-info{display:flex;flex-direction:column;gap:1.1rem;max-width:560px}.project-meta-line{display:flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.project-index{color:var(--text-primary);padding-right:.7rem;border-right:1px solid var(--border-medium)}.project-category{color:var(--accent-emerald)}.project-heading{font-family:var(--font-sans);font-size:clamp(2rem,3.2vw,2.9rem);font-weight:650;letter-spacing:-.035em;line-height:1.05;color:var(--text-primary)}.project-summary{font-size:1.0625rem;line-height:1.55;color:var(--text-secondary)}.project-tags{display:flex;flex-wrap:wrap;gap:.4rem}.project-tag{display:inline-block;padding:.3rem .6rem;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);background:#fff9;border:1px solid var(--border-subtle);border-radius:var(--radius-pill)}.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:.75rem}.showcase-stage-col{display:none}.reveal-armed [data-reveal]{transition:opacity .7s cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.16,1,.3,1)}.reveal-armed [data-reveal]:not(.is-revealed){opacity:0;translate:0 18px}@media (min-width: 1024px){.showcase{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(3rem,5vw,5.5rem);align-items:start}.showcase-stage-col{display:block;height:100%}.showcase-sticky{position:sticky;top:76px;height:calc(100vh - 100px);max-height:860px;display:flex;flex-direction:column;gap:1rem}.showcase-stage{position:relative;flex:1;min-height:0;padding:2rem}.showcase-tint{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 42%,var(--ambient) 0%,rgba(255,255,255,0) 70%);opacity:0;transition:opacity .45s ease;pointer-events:none}.showcase-tint.is-active{opacity:1}.showcase-device{--glass-pad: 7px;--screen-radius: 16px;z-index:1;height:100%}.showcase-screen{height:100%;width:auto}.glass-screen>.showcase-video{position:absolute;inset:0;opacity:0;transition:opacity .28s ease}.glass-screen>.showcase-video.is-active{opacity:1}.showcase-live{position:absolute;inset:0;z-index:2;pointer-events:none}.showcase-live iframe{width:100%;height:100%;border:0;display:block;background:#000;opacity:0;transition:opacity .28s ease;pointer-events:auto}.showcase-live iframe.is-loaded{opacity:1}.showcase-stage.is-live .showcase-video.is-active{opacity:0}.showcase-exit{position:absolute;top:1rem;right:1rem;z-index:3;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .85rem;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);background:#ffffffdb;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:0 1px 2px #0000000f;cursor:pointer;transition:background var(--transition-fast)}.showcase-exit[hidden]{display:none}.showcase-exit:hover{background:#fff}.showcase-rail{position:relative;border-top:1px solid var(--border-subtle)}.showcase-rail ol{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}.rail-marker{position:absolute;top:-1px;left:0;height:1px;width:var(--rail-w, 0px);translate:var(--rail-x, 0px) 0;background:var(--text-primary);transition:translate .42s cubic-bezier(.16,1,.3,1),width .42s cubic-bezier(.16,1,.3,1)}.rail-item{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem .9rem .2rem 0;margin-right:.9rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);background:none;border:0;cursor:pointer;transition:color .3s ease}.rail-item:hover,.rail-item.is-active{color:var(--text-primary)}.rail-dot{width:6px;height:6px;border-radius:50%;border:1px solid currentColor;transition:background .3s ease}.rail-item.is-active .rail-dot{background:currentColor}.showcase-narratives .project-item{min-height:min(calc(100vh - 100px),860px);display:flex;align-items:center;padding:0;border-top:0}.showcase-narratives .project-visual{display:none}.showcase-narratives .project-info{opacity:.32;transition:opacity .32s ease}.showcase-narratives .project-item.is-active .project-info{opacity:1}.reveal-armed .showcase-narratives [data-reveal]:not(.is-revealed){opacity:1;translate:none}}@media (max-width: 768px){.selected-work-section{padding:3.5rem 1rem 3rem}.section-header{margin-bottom:1.5rem}.project-item{padding:2rem 0 2.5rem;gap:1.4rem}.project-visual{height:min(560px,68vh);padding:1.5rem;border-radius:22px}.project-device{--glass-pad: 6px;--screen-radius: 13px}.project-info{gap:.85rem;padding:0 .25rem}.project-heading{font-size:2rem}.project-summary{font-size:1rem}.project-actions{margin-top:.4rem}.project-actions .btn-primary{width:100%}}@media (prefers-reduced-motion: reduce){.reveal-armed [data-reveal],.showcase-tint,.glass-screen>.showcase-video,.showcase-live iframe,.rail-marker,.showcase-narratives .project-info{transition:none}}