@font-face{font-family:"TikTok Sans";font-weight:400;font-display:swap;src:url("assets/fonts/tiktok-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"TikTok Sans";font-weight:500;font-display:swap;src:url("assets/fonts/tiktok-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"TikTok Sans";font-weight:600;font-display:swap;src:url("assets/fonts/tiktok-sans-latin-600-normal.woff2") format("woff2")}
/* Shared look for both sites: black and white, a quiet star field, and a floating dock. */
:root{color-scheme:dark;--bg:#0a0a0a;--card:#161616;--card2:#242424;--hair:rgba(255,255,255,.1);--hair2:rgba(255,255,255,.22);--fg:#f5f5f5;--fg2:#a3a3a3;--inv:#f2f2f2;--on-inv:#141414;--glass:rgba(38,38,38,.72);--font:"TikTok Sans",system-ui,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#f6f6f5;--card:#fff;--card2:#ececea;--hair:rgba(0,0,0,.1);--hair2:rgba(0,0,0,.24);--fg:#141414;--fg2:#5f5f5c;--inv:#141414;--on-inv:#f6f6f5;--glass:rgba(255,255,255,.75)}
html{background:var(--bg)}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.logo-dark{display:block}.logo-light{display:none}
:root[data-theme=light] .logo-dark{display:none}:root[data-theme=light] .logo-light{display:block}
.dock{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 16px)}
.dock-group,.dock-round{display:flex;align-items:center;gap:2px;height:52px;padding:4px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--hair2);border-radius:26px}
.dock a.icon,.dock button.icon{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--fg2);cursor:pointer;transition:background-color .15s,color .15s;text-decoration:none}
.dock a.icon:hover,.dock button.icon:hover{color:var(--fg)}
.dock a.icon[aria-current]{background:var(--card2);color:var(--fg)}
.dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:4px 20px 4px 4px;border:0;border-radius:26px;background:var(--inv);color:var(--on-inv);font:500 15px/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.dock-cta i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--on-inv);color:var(--inv);font-style:normal}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--fg)!important;outline-offset:2px}
@media (max-width:640px){
 .dock{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:6px}
 .dock-group,.dock-round{height:56px;border-radius:28px}
 .dock-cta{height:56px;border-radius:28px;padding:4px 16px 4px 4px;font-size:14px}.dock-cta i{width:48px;height:48px}
 .dock-round{display:none}
 .dock a.icon,.dock button.icon{width:46px;height:46px}
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:transparent;color:var(--fg);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}ul,ol{list-style:none}a{color:inherit}img{max-width:100%;display:block}button,a{touch-action:manipulation}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;background:var(--inv);color:var(--on-inv);padding:12px 16px;border-radius:12px;z-index:9;text-decoration:none}.skip:focus{top:16px}
.muted{color:var(--fg2)}
.kicker{display:block;font-size:14px;color:var(--fg2)}
section,footer>div{padding-left:max(clamp(20px,4vw,56px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,4vw,56px),env(safe-area-inset-right,0px))}
main,footer{max-width:1360px;margin-inline:auto}
/* hero */
.hero-grid{min-height:100svh;display:grid;grid-template-columns:1fr minmax(0,420px) 1fr;gap:32px;align-items:center;padding-block:96px 48px}
#role{display:block;transition:opacity .3s,filter .3s}#role.out{opacity:0;filter:blur(8px)}
h1{font:600 clamp(40px,4.4vw,60px)/1.05 var(--font);letter-spacing:-.03em;min-height:2.1em;display:flex;align-items:flex-end;margin-bottom:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:24px;background:var(--card);border:1px solid var(--hair2);color:var(--fg);font:500 15px/1 var(--font);text-decoration:none;transition:background-color .15s}
.pillbtn:hover{background:var(--card2)}
.pillbtn--line{background:none}
.hero-mark{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--card);border:1px solid var(--hair)}
.hero-mark img{width:44%;height:auto}
.hero-right{display:grid;gap:14px;font-size:17px;line-height:1.45;max-width:340px;justify-self:end}
.hero-right .strong{font-weight:500}
/* statement */
.statement{padding-block:96px 120px}
.statement p{font:500 clamp(32px,5vw,68px)/1.12 var(--font);letter-spacing:-.03em;max-width:21em}
/* sections */
.section{padding-block:72px;scroll-margin-top:72px}
h2{font:600 clamp(36px,4vw,52px)/1.08 var(--font);letter-spacing:-.03em;margin-bottom:32px}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:40px}.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;min-height:44px;padding:0 20px;border-radius:22px;border:1px solid var(--hair2);background:none;color:var(--fg);font:500 15px/1 var(--font);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--inv);color:var(--on-inv);border-color:var(--inv)}
#projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.soon{min-height:260px;background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.soon:first-child{grid-column:1/-1;min-height:340px}
.soon-num{font:600 18px/1 var(--font);color:var(--fg)}
.soon-text{color:var(--fg2)}
.case{grid-column:1/-1;padding-block:48px}
.case-title{font:500 clamp(28px,3.4vw,44px)/1.14 var(--font);letter-spacing:-.025em;max-width:24em;margin-bottom:10px}
.case-tags{color:var(--fg2);font-size:14px;margin-bottom:40px}
.case-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px}
.case-media{background:var(--card);border:1px solid var(--hair);border-radius:28px;overflow:hidden;min-height:440px}.case-media img{width:100%;height:100%;object-fit:cover}
.case-side{background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px}
.case-role{color:var(--fg2);margin-top:auto}
.case-side a{color:var(--fg);text-underline-offset:3px}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-top:16px}
.point{background:var(--card);border:1px solid var(--hair);border-radius:24px;padding:24px}.point h4{font:500 16px/1.3 var(--font);margin-bottom:8px}.point p{font-size:14px;line-height:1.45;color:var(--fg2)}
.roadmap{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:36px;text-decoration:none;transition:border-color .15s}
.roadmap:hover{border-color:var(--hair2)}
.roadmap strong{display:block;font:500 clamp(28px,3.6vw,44px)/1.15 var(--font);letter-spacing:-.025em;margin:8px 0}
.arrow{font-size:32px;line-height:1;flex:none}
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.bio{display:grid;gap:18px;color:var(--fg2);font-size:17px;line-height:1.55}
.bio-lead{font:500 clamp(24px,2.6vw,32px)/1.2 var(--font);letter-spacing:-.02em;color:var(--fg)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:24px;display:grid;gap:10px;align-content:start;min-height:190px}
.tile--wide{grid-column:1/-1;min-height:250px}.tile h3{font:500 24px/1.2 var(--font);letter-spacing:-.02em}
.minor{font:500 26px/1.2 var(--font);letter-spacing:-.02em;margin:72px 0 20px;scroll-margin-top:72px}
.journey li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 80px;gap:16px;padding-block:18px;border-top:1px solid var(--hair)}
.journey strong{font-weight:500}.journey span{color:var(--fg2)}.journey span:last-child{text-align:right}
.stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stack>div{background:var(--card);border:1px solid var(--hair);border-radius:28px;padding:24px;display:grid;gap:8px;align-content:start}
.stack .kicker{margin-bottom:6px}
footer{margin-top:64px}
.foot-top{padding-block:96px 72px;display:grid;gap:28px;justify-items:start}
.foot-top h2{font-size:clamp(44px,7.4vw,96px);line-height:1;margin:0;max-width:11em}
.foot-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-block:32px;border-top:1px solid var(--hair)}
.foot-brand{display:grid;gap:12px;align-content:start}.foot-brand img{height:26px;width:auto}
.foot-links ul{display:flex;flex-wrap:wrap;gap:4px 28px}.foot-links a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}.foot-links a:hover{color:var(--fg2)}
.foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:18px 28px;font-size:14px;color:var(--fg2)}
@media (max-width:980px){
 .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:96px 48px;gap:28px}
 .hero-mark{width:min(62vw,300px);justify-self:center;order:-1}
 .hero-right{justify-self:start;max-width:none}
 h1{min-height:1.1em;margin-bottom:24px}
 .about-grid,.case-grid{grid-template-columns:minmax(0,1fr)}
 .case-media{min-height:260px}
}
@media (max-width:640px){
 body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .hero-grid{padding-block:40px 32px}
 h1{font-size:clamp(38px,11vw,48px);min-height:2.1em}
 .actions .pillbtn{flex:1 1 40%}
 .statement{padding-block:48px 56px}.section{padding-block:48px}
 #projects{grid-template-columns:minmax(0,1fr);gap:12px}.soon,.soon:first-child{grid-column:auto;min-height:190px;border-radius:24px;padding:22px}
 .tiles{grid-template-columns:minmax(0,1fr)}.tile,.tile--wide{min-height:0;border-radius:24px}
 .stack{grid-template-columns:minmax(0,1fr)}.stack>div{border-radius:24px}
 .roadmap{padding:24px;border-radius:24px}
 .journey li{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}.journey span:nth-child(2){grid-row:2;grid-column:1}.journey span:last-child{grid-column:2;grid-row:1}
 .foot-top{padding-block:56px 48px}
}
@media (max-width:640px){.dock-cta{font-size:0;gap:0;padding:4px}}
