:root{--color-bg:#0d0e12;--color-bg-alt:#13141a;--color-surface:#191b22;--color-surface-hover:#21242d;--color-line:#ffffff14;--color-line-bright:#ff5a1f66;--color-orange:#ff5a1f;--color-orange-glow:#ff5a1f40;--color-amber:#ffb627;--color-text:#f3f4f6;--color-text-muted:#9ca3af;--color-text-faint:#6b7280;--font-display:"Fraunces", Georgia, serif;--font-head:"Space Grotesk", sans-serif;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", monospace;--ease-out:cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;position:relative;overflow-x:hidden}.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.5rem)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.bg-ambient{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(140px);opacity:.15;border-radius:50%;position:absolute}.bg-orb-1{background:var(--color-orange);width:50vw;height:50vw;top:-10%;right:15%}.bg-orb-2{background:var(--color-amber);width:40vw;height:40vw;bottom:10%;left:-10%}.hero-bg-grid{pointer-events:none;z-index:0;background-image:linear-gradient(90deg,#ffffff0b 1px,#0000 1px),linear-gradient(#ffffff0b 1px,#0000 1px);background-size:56px 56px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 80%,#000 30%,#0000 90%);mask-image:radial-gradient(80% 80%,#000 30%,#0000 90%)}.nav-wrap{z-index:100;justify-content:center;padding-inline:clamp(1.2rem,4vw,2.5rem);display:flex;position:fixed;top:clamp(.75rem,2vw,1.25rem);left:0;right:0}nav{border:1px solid var(--color-line);-webkit-backdrop-filter:blur(14px)saturate(140%);background:#121214b8;border-radius:999px;justify-content:space-between;align-items:center;gap:clamp(.75rem,2vw,2rem);width:100%;max-width:1180px;padding:.6em clamp(.6em,2vw,1.4em);display:flex;box-shadow:0 10px 30px #0006}.logo{font-family:var(--font-head);color:var(--color-text);flex-shrink:0;align-items:center;gap:.6em;font-size:clamp(.95rem,.6vw + .8rem,1.15rem);font-weight:700;display:flex}.logo .mark{width:clamp(1.5rem,2vw,1.9rem);height:clamp(1.5rem,2vw,1.9rem)}.logo .studio-word{color:var(--color-text-muted);font-weight:500}.port-badge{font-family:var(--font-mono);color:var(--color-amber);letter-spacing:.08em;background:#ffb62714;border:1px solid #ffb6274d;border-radius:999px;margin-left:.2em;padding:.2em .6em;font-size:.65rem}.nav-actions{align-items:center;gap:clamp(.6rem,1.4vw,1.1rem);display:flex}.lang-toggle-btn{background:var(--color-surface);border:1px solid var(--color-line);cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;border-radius:999px;flex-shrink:0;align-items:center;gap:.3em;padding:.45em .85em;font-size:.72rem;font-weight:500;transition:border-color .3s,background .3s;display:inline-flex}.lang-toggle-btn .lang-opt{color:var(--color-text-faint);transition:color .3s}.lang-toggle-btn .lang-opt.active{color:var(--color-orange);font-weight:700}.lang-toggle-btn .lang-divider{color:var(--color-line)}.btn{font-family:var(--font-head);transition:all .25s var(--ease-out);cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:.65rem 1.3rem;font-size:.9rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--color-orange);color:#fff;box-shadow:0 6px 20px var(--color-orange-glow);border:1px solid #0000}.btn-primary:hover{background:#ff733b;transform:translateY(-2px);box-shadow:0 10px 28px #ff5a1f66}.btn-secondary{border:1px solid var(--color-line);color:var(--color-text);background:#ffffff0f}.btn-secondary:hover{border-color:var(--color-line-bright);background:#ffffff1f}.hero-section{text-align:center;border-bottom:1px solid var(--color-line);z-index:2;padding-top:calc(clamp(3.5rem,8vw,6rem) + 4.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}.label{font-family:var(--font-mono);color:var(--color-amber);letter-spacing:.1em;text-transform:uppercase;font-size:.76rem}.hero-section h1{font-family:var(--font-display);letter-spacing:-.015em;color:#fff;margin-top:.8rem;font-size:clamp(2.4rem,4.5vw + .8rem,4.2rem);font-weight:600;line-height:1.08}.hero-section h1 em{color:var(--color-orange);font-style:italic;font-weight:500}.hero-sub{margin-top:1.2rem;max-width:62ch;color:var(--color-text-muted);margin-inline:auto;font-size:clamp(1rem,.3vw + .95rem,1.15rem);line-height:1.6}.controls-section{z-index:2;margin-top:-1.8rem;position:relative}.controls-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:20px;padding:.8rem;box-shadow:0 20px 50px #00000080}.search-box{width:100%;position:relative}.search-icon{color:var(--color-text-faint);pointer-events:none;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-input{border:1px solid var(--color-line);color:#fff;width:100%;font-family:var(--font-sans);background:#0d0e12b3;border-radius:14px;outline:none;padding:.95rem 1.2rem .95rem 2.8rem;font-size:.98rem;transition:border-color .25s,box-shadow .25s}.search-input:focus{border-color:var(--color-orange);box-shadow:0 0 0 3px var(--color-orange-glow)}.directory-section{z-index:2;padding-block:clamp(3rem,6vw,5rem);position:relative}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:clamp(1.8rem,3vw,2.5rem);display:grid}.project-card{background:var(--color-surface);border:1px solid var(--color-line);transition:transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;border-radius:20px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 16px 45px #0006}.project-card:hover{border-color:var(--color-line-bright);transform:translateY(-8px);box-shadow:0 26px 70px #000000a6}.project-visual{border-bottom:1px solid var(--color-line);justify-content:center;align-items:center;height:250px;padding:1.5rem;display:flex;position:relative;overflow:hidden}.project-visual img{object-fit:contain;max-width:100%;max-height:100%;transition:transform .35s var(--ease-out);border-radius:10px;box-shadow:0 10px 30px #0000004d}.project-card:hover .project-visual img{transform:scale(1.05)}.project-body{flex-direction:column;flex-grow:1;justify-content:space-between;padding:2rem;display:flex}.project-category{font-family:var(--font-mono);color:var(--color-amber);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.4rem;font-size:.72rem}.project-body h3{font-family:var(--font-display);color:#fff;margin-bottom:.6rem;font-size:1.6rem;font-weight:600}.project-body p{color:var(--color-text-muted);margin-bottom:1.5rem;font-size:.92rem;line-height:1.6}.project-tags{flex-wrap:wrap;gap:.5em;margin-bottom:1.8rem;display:flex}.project-tags span{font-family:var(--font-mono);color:var(--color-text-faint);border:1px solid var(--color-line);border-radius:999px;padding:.4em .8em;font-size:.7rem}.visit-link{color:var(--color-amber);font-family:var(--font-head);align-items:center;gap:.5rem;width:fit-content;margin-top:auto;font-size:.95rem;font-weight:600;transition:gap .25s,color .25s;display:inline-flex}.visit-link:hover{color:var(--color-orange);gap:.75rem}.no-results{text-align:center;color:var(--color-text-muted);grid-column:1/-1;padding:4rem 1rem;font-size:1.1rem}.cta-section{z-index:2;background:var(--color-bg-alt);border-top:1px solid var(--color-line);text-align:center;padding-block:clamp(4rem,8vw,6rem);position:relative}.cta-section h2{font-family:var(--font-display);color:#fff;margin-bottom:1.8rem;font-size:clamp(2rem,3.5vw,3.2rem)}.cta-section h2 em{color:var(--color-orange);font-style:italic}.port-footer{z-index:2;border-top:1px solid var(--color-line);color:var(--color-text-faint);padding-block:2.5rem;font-size:.85rem;position:relative}.footer-wrap{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;display:flex}@media (width<=768px){.projects-grid{grid-template-columns:1fr}nav{gap:.5rem;padding:.5em .8em}.nav-studio-btn{display:none}.btn{padding:.5em .9em;font-size:.8rem}}@media (width<=480px){.logo span{font-size:.9rem}.lang-toggle-btn{padding:.35em .6em;font-size:.68rem}.btn{padding:.45em .75em;font-size:.75rem}}