@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root{--bg:#f4f6f9!important;--surface:#fefefc!important;--ink:#11161d!important;--muted:#657081!important;--rule:rgba(17,22,29,.14)!important;--accent:#2e5bc8!important;--accent-dark:#1d3f95!important;--px:70%;--py:16%;--ease-spring:cubic-bezier(.2,.8,.2,1)}
html{scroll-padding-top:6.5rem}
body{background:radial-gradient(circle at var(--px) var(--py),rgba(46,91,200,.1),transparent 24rem),var(--bg);letter-spacing:-.006em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.23;background-image:radial-gradient(rgba(17,22,29,.16) .55px,transparent .55px);background-size:5px 5px;mix-blend-mode:multiply}
main{overflow:clip}.wrap{width:min(calc(100% - 2.5rem),82rem)}
.site-header{background:rgba(244,246,249,.86)!important;border-color:rgba(17,22,29,.1)!important}.nav{min-height:5.4rem!important}.brand{letter-spacing:-.035em}.brand-mark{border-radius:.55rem!important;box-shadow:0 10px 28px rgba(46,91,200,.22);transform:rotate(-3deg);transition:transform .45s var(--ease-spring)}.brand:hover .brand-mark{transform:rotate(3deg) scale(1.04)}
.nav-links{gap:1.15rem!important}.nav-links>a:not(.button):not(.nav-cta){font:500 .72rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.04em}.nav-cta,.button{border-radius:.65rem!important;box-shadow:0 12px 32px rgba(46,91,200,.18);transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-spring),background .2s ease!important}.nav-cta:hover,.button:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(46,91,200,.26)}.nav-cta:active,.button:active{transform:translateY(1px) scale(.985)}
.hero{min-height:min(52rem,calc(100dvh - 5.4rem))!important;padding-block:clamp(5rem,10vw,9rem)!important;position:relative}.hero:after{content:"TPI / APPLIED INTELLIGENCE / HONG KONG";position:absolute;right:0;bottom:1.3rem;color:var(--muted);font:500 .65rem "DM Mono",monospace;letter-spacing:.14em}.eyebrow,.kicker,.product-tag,.service-num,.category-label span{font-family:"DM Mono",monospace!important}.hero h1{font-size:clamp(4rem,8vw,8.1rem)!important;max-width:8.5ch!important;line-height:.84!important;font-weight:600!important}.hero h1 span{position:relative}.hero h1 span:after{content:"";position:absolute;left:.05em;right:.08em;bottom:-.08em;height:.08em;background:var(--accent);transform:scaleX(.28);transform-origin:left;animation:tpi-line 2.2s var(--ease-spring) infinite alternate}
.system-map{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(231,236,248,.88))!important;border-color:rgba(46,91,200,.22)!important;border-radius:1rem!important;box-shadow:0 42px 90px rgba(17,22,29,.12)!important;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s var(--ease-spring)}.system-map:after{content:"";position:absolute;inset:12%;border:1px solid rgba(46,91,200,.12);border-radius:50%;animation:tpi-orbit 16s linear infinite}.map-core{width:10.5rem!important;height:10.5rem!important;animation:tpi-breathe 4s ease-in-out infinite}.map-node{border-radius:.6rem!important;font-family:"DM Mono",monospace!important;text-transform:uppercase;letter-spacing:.04em}.map-line{background:linear-gradient(90deg,var(--accent),transparent)!important;animation:tpi-signal 3s ease-in-out infinite}
.signal-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:-1px;border:1px solid var(--rule);background:rgba(254,254,252,.82);backdrop-filter:blur(14px)}.signal-metric{padding:1.7rem 2rem;border-right:1px solid var(--rule)}.signal-metric:last-child{border-right:0}.signal-metric strong{display:block;color:var(--accent);font:500 clamp(2.8rem,6vw,5.8rem)/.88 "DM Mono",monospace;letter-spacing:-.08em}.signal-metric span{display:block;margin-top:.75rem;color:var(--muted);font:500 .72rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.section{position:relative}.section:nth-of-type(even){background:linear-gradient(90deg,rgba(255,255,255,.42),transparent 70%)}.section-head{grid-template-columns:3fr 9fr!important}.section h2{font-size:clamp(2.8rem,6.4vw,6.2rem)!important;max-width:10ch!important;font-weight:600}.manifesto-lead,.opc-lead{font-weight:500}.service{grid-template-columns:1fr 4fr 7fr!important;transition:padding .35s var(--ease-spring),background .35s ease}.service:hover{padding-inline:1rem;background:rgba(46,91,200,.04)}
.opc-grid{border-radius:1rem;overflow:hidden;box-shadow:0 28px 70px rgba(17,22,29,.08)}.opc-card,.product-card,.model,.network article,.invest-card{position:relative;transform:perspective(900px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .32s var(--ease-spring),border-color .25s ease,box-shadow .25s ease!important}.opc-card:after,.product-card:after,.model:after,.network article:after,.invest-card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(28rem circle at var(--spot-x,50%) var(--spot-y,50%),rgba(46,91,200,.12),transparent 42%);opacity:0;transition:opacity .25s ease}.opc-card:hover:after,.product-card:hover:after,.model:hover:after,.network article:hover:after,.invest-card:hover:after{opacity:1}
.catalog{gap:7rem!important}.catalog-group{grid-template-columns:4fr 8fr!important}.product-grid{gap:0!important}.product-card{padding:1.9rem!important;min-height:13rem!important;background:transparent!important}.product-card:hover{background:rgba(254,254,252,.9)!important;box-shadow:0 22px 55px rgba(17,22,29,.08);z-index:2}.portfolio-link{border-radius:.65rem!important;box-shadow:0 24px 60px rgba(46,91,200,.2)}
.experience-playground{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,7vw,7rem);align-items:stretch}.playground-copy{padding-block:1rem}.playground-copy h2{margin:.7rem 0 1.4rem}.playground-copy>p{color:var(--muted);max-width:43rem}.mode-controls{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:2rem}.mode-control{min-height:2.8rem;padding:.65rem .9rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink);font:500 .72rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.mode-control[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.playground-stage{min-height:29rem;padding:clamp(1.5rem,4vw,3.2rem);border:1px solid rgba(46,91,200,.24);border-radius:1rem;background:linear-gradient(145deg,#fff,rgba(223,231,249,.72));box-shadow:0 38px 80px rgba(17,22,29,.1);position:relative;overflow:hidden}.playground-stage:before{content:"";position:absolute;width:22rem;height:22rem;border:1px solid rgba(46,91,200,.2);border-radius:50%;right:-7rem;bottom:-8rem;animation:tpi-orbit 18s linear infinite}.playground-status{position:relative;color:var(--accent);font:500 .7rem "DM Mono",monospace;letter-spacing:.12em}.playground-stage h3{position:relative;margin:8rem 0 1rem;font-size:clamp(2.4rem,5vw,5rem);line-height:.9;letter-spacing:-.05em}.playground-stage p,.playground-stage ul{position:relative;color:var(--muted);max-width:34rem}.playground-stage ul{padding-left:1.15rem}.playground-stage li+li{margin-top:.4rem}
.capture-placeholder{background:linear-gradient(145deg,#fff,#e3e9f6)!important}.capture-placeholder:before{border-color:rgba(46,91,200,.28)!important}.visual{border-radius:1rem!important}.product:nth-child(odd) .visual{transform:rotate(-.7deg)}.product:nth-child(even) .visual{transform:rotate(.7deg)}
.contact,.closing-card,.invest-card.lead{background:#11161d!important;border-radius:1rem!important;position:relative;overflow:hidden}.contact:after,.closing-card:after,.invest-card.lead:after{content:"";position:absolute;right:-12rem;top:-15rem;width:31rem;height:31rem;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.reveal{transition-duration:.8s!important;transition-timing-function:var(--ease-spring)!important}
@keyframes tpi-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
@keyframes tpi-orbit{to{transform:rotate(360deg)}}
@keyframes tpi-signal{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes tpi-line{to{transform:scaleX(1)}}
@media(max-width:800px){.wrap{width:min(calc(100% - 1.5rem),82rem)}.hero:after{display:none}.hero h1{font-size:clamp(3.7rem,17vw,5.8rem)!important}.signal-metrics,.experience-playground{grid-template-columns:1fr}.signal-metric{border-right:0;border-bottom:1px solid var(--rule)}.signal-metric:last-child{border-bottom:0}.catalog-group{grid-template-columns:1fr!important}.service{grid-template-columns:3rem 1fr!important}.service p{grid-column:2}.playground-stage{min-height:25rem}.nav-links{top:5rem!important}.system-map{transform:none}.product:nth-child(n) .visual{transform:none}.section-head{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.hero h1 span:after,.system-map:after,.map-core,.map-line,.playground-stage:before{animation:none!important}.system-map,.opc-card,.product-card,.model,.network article,.invest-card{transform:none!important}}