:root{--acid:#5cf1ba;--bg:#090b0b;--navH:68px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
.topbar{position:fixed;z-index:100;left:0;right:0;top:0;height:var(--navH);padding:0 38px;display:flex;align-items:center;gap:30px;background:rgba(5,8,8,.92);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 12px 32px rgba(0,0,0,.34);backdrop-filter:blur(22px) saturate(125%)}
.brand,.topbar a{color:#fff;text-decoration:none}.brand{font-size:15px;font-weight:800;letter-spacing:.16em}.topbar nav{display:flex;gap:26px}.topbar nav a{font-size:12px;font-weight:600;letter-spacing:.11em;color:rgba(255,255,255,.54);transition:.25s}.topbar nav a:hover,.topbar nav a.active{color:#fff;text-shadow:0 0 13px rgba(92,241,186,.38)}
.private{margin-left:auto;font-size:10px;letter-spacing:.15em;color:rgba(255,255,255,.38)}
.progress{width:150px;height:1px;background:rgba(255,255,255,.14)}.progress b{display:block;height:100%;width:0;background:var(--acid);box-shadow:0 0 10px var(--acid)}
.portfolio-section{width:100vw;min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}
.section-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:100vh;overflow:hidden;background:#0c0e0e}
.svg-object{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:.68;filter:brightness(.90);transform:scale(1.001);transition:opacity .65s,filter .65s,transform .3s ease-out}
.portfolio-section.is-active .svg-object{opacity:1;filter:brightness(1)}
.cursor-field{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.cursor-field i{position:absolute;width:360px;height:360px;border-radius:50%;left:0;top:0;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(circle,rgba(92,241,186,.12),rgba(92,241,186,.035) 35%,transparent 70%);filter:blur(8px);transition:opacity .3s}.portfolio-section:hover .cursor-field i{opacity:1}.cursor-field b{display:none}
.case-footer{min-height:620px;padding:90px 7vw 34px;background:#242525;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;justify-content:space-between}
.footer-kicker{font-size:11px;letter-spacing:.16em;color:var(--acid)}
.footer-title{font-size:clamp(52px,8vw,126px);font-weight:500;line-height:.9;letter-spacing:-.055em;max-width:1100px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:28px;padding-top:36px;border-top:1px solid rgba(255,255,255,.12)}
.footer-grid div{display:flex;flex-direction:column;gap:12px}.footer-grid span{font-size:10px;letter-spacing:.14em;color:#777}.footer-grid strong,.footer-grid a{font-size:16px;color:#ddd;text-decoration:none;font-weight:500}
.footer-bottom{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#666;padding-top:34px}
@media(max-width:900px){:root{--navH:54px}.topbar{padding:0 18px}.topbar nav,.progress,.private{display:none}.brand{font-size:13px}.portfolio-section{min-height:auto}.section-stage{aspect-ratio:16/9}.case-footer{min-height:480px}.footer-grid{grid-template-columns:1fr}.footer-title{font-size:52px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* V3.1 — visible interaction feedback */
.svg-object{z-index:5}
.cursor-field{z-index:4} /* do not sit above the SVG object and steal pointer events */
.portfolio-section{cursor:default}