:root{--bg:#fff;--alt:#f5f5f7;--alt2:#ebebef;--ink:#1d1d1f;--dim:#6e6e73;--line:#d2d2d7;--blue:#0071e3;--blue2:#0077ed;--lnk:#0066cc;--nb:rgba(255,255,255,.8);--sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;--m:clamp(20px,5vw,48px);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#000;--alt:#1d1d1f;--alt2:#2a2a2d;--ink:#f5f5f7;--dim:#a1a1a6;--line:#424245;--blue:#0a84ff;--blue2:#409cff;--lnk:#2997ff;--nb:rgba(0,0,0,.8)}}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}
.w{max-width:1120px;margin:0 auto;padding:0 var(--m)}

/* navigation */
.nav{position:sticky;top:0;z-index:10;background:var(--nb);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav .w{display:flex;align-items:center;gap:28px;height:56px}
.mark{font-weight:600;font-size:17px;letter-spacing:-.01em;text-decoration:none;margin-right:auto}
.nav a:not(.mark):not(.btn){font-size:14px;color:var(--dim);text-decoration:none;transition:color .2s}
.nav a:not(.mark):not(.btn):hover,.nav a.on{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font:500 16px/1.2 var(--sans);text-decoration:none;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:980px;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--blue2);border-color:var(--blue2)}
.btn.o{background:transparent;color:var(--lnk);border-color:var(--lnk)}
.btn.o:hover{background:var(--lnk);color:var(--bg)}
.btn.s{padding:7px 16px;font-size:14px}
.nav .btn.s{color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* hero */
.hero{min-height:calc(88svh - 56px);display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 0}
h1{font-weight:700;font-size:clamp(56px,11vw,128px);line-height:1.03;letter-spacing:-.04em}
h1 span{display:block;overflow:hidden;padding-bottom:.06em}
h1 i{display:block;font-style:normal;transform:translateY(105%);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards}
h1 span+span i{animation-delay:.12s}
@keyframes up{to{transform:none}}
.hero .role{font-weight:600;font-size:clamp(24px,3.2vw,40px);line-height:1.2;letter-spacing:-.02em;margin-top:28px}
.hero p.sub{max-width:30em;margin:14px auto 0;color:var(--dim);font-size:clamp(18px,1.8vw,24px);line-height:1.4}
.hero .acts{justify-content:center;margin-top:32px}
.fade{opacity:0;animation:in .9s .5s ease forwards}
@keyframes in{to{opacity:1}}

/* sections */
.sec{padding:clamp(72px,9vw,128px) 0}
.tone{background:var(--alt)}
h2{font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.03em}
h3{font-weight:600;font-size:clamp(26px,3.2vw,40px);line-height:1.12;letter-spacing:-.025em}
h1.ph{font-size:clamp(44px,7vw,80px);line-height:1.05}
.phead{padding-top:clamp(64px,8vw,112px);padding-bottom:0}
.intro{max-width:34em;margin-top:18px;color:var(--dim);font-size:clamp(19px,1.9vw,24px);line-height:1.4}

/* products */
.ledger{margin-top:clamp(40px,5vw,72px)}
.item{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.item .l{align-self:start;position:sticky;top:88px}
.item .l p{margin-top:16px;max-width:26em;color:var(--dim)}
.item .l p.lead{color:var(--ink);font-weight:500;font-size:clamp(19px,1.8vw,23px);line-height:1.4;letter-spacing:-.01em}
.rows{list-style:none;background:var(--alt);border-radius:20px;padding:8px 28px}
.rows li,.rows div.r{display:grid;grid-template-columns:minmax(120px,.4fr) 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:16px}
.rows li:last-child,.rows div.r:last-child{border-bottom:0}
.rows b{color:var(--ink);font-weight:600}
.note{color:var(--ink)!important;font-size:15px;font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:20px}
.tags li{background:var(--bg);padding:6px 14px;font-size:14px;color:var(--dim);border-radius:980px}

/* websites */
.sites{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,80px) clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,72px)}
.shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 2px 24px rgba(0,0,0,.12);transition:transform .3s}
.shot:hover{transform:scale(1.015)}
.shot iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none}
.site h3{margin-top:24px;font-size:clamp(24px,2.6vw,32px)}
.site p{margin-top:10px;color:var(--dim);max-width:30em}
.site .acts{margin-top:20px}
.langs{display:flex;gap:20px;margin-top:18px;font-size:15px}
.langs a{color:var(--lnk);text-decoration:none}
.langs a:hover{text-decoration:underline}

/* wyrdly */
.panel{background:var(--alt);border-radius:28px;text-align:center;padding:clamp(56px,9vw,112px) var(--m)}
.panel h2{font-size:clamp(44px,8vw,104px)}
.panel p{max-width:30em;margin:20px auto 0;color:var(--dim);font-size:clamp(18px,1.8vw,22px);line-height:1.4}
.panel .acts{justify-content:center}

/* contact */
.mail{display:inline-block;margin:clamp(28px,4vw,48px) 0 28px;font-weight:600;font-size:clamp(28px,6vw,72px);line-height:1.1;letter-spacing:-.03em;text-decoration:none;word-break:break-all;direction:ltr;unicode-bidi:isolate;color:var(--lnk);transition:opacity .2s}
.mail:hover{opacity:.75}
.links{display:flex;flex-wrap:wrap;gap:24px;font-size:17px}
.links a{color:var(--lnk);text-decoration:none}
.links a:hover{text-decoration:underline}

/* explore tiles */
.gate{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:clamp(40px,5vw,72px)}
.gate a{display:flex;flex-direction:column;gap:8px;background:var(--alt);border-radius:24px;padding:clamp(28px,3.4vw,44px);text-decoration:none;transition:background .2s}
.tone .gate a{background:var(--bg)}
.gate a:hover{background:var(--alt2)}
.gate h3{font-size:clamp(26px,2.8vw,34px)}
.gate p{color:var(--dim);flex:1;margin-bottom:12px}
.gate span{color:var(--lnk);font-size:17px;font-weight:500}
.jump{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px;font-size:17px}
.jump a{color:var(--lnk);text-decoration:none}
.jump a:hover{text-decoration:underline}

footer{background:var(--alt);border-top:1px solid var(--line);padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px));color:var(--dim);font-size:13px}

/* language switcher */
.nav .lang{position:relative}
.nav .lang summary{list-style:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink);border:1px solid var(--line);padding:6px 14px;border-radius:980px;transition:border-color .2s}
.nav .lang summary::-webkit-details-marker{display:none}
.nav .lang summary:hover,.nav .lang[open] summary{border-color:var(--ink)}
.nav .lang div{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:170px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:8px 0;box-shadow:0 12px 40px rgba(0,0,0,.16)}
.nav .lang div a{display:block;padding:9px 18px;font-size:15px}
.nav .lang div a[aria-current]{color:var(--ink)!important;font-weight:600}

/* languages */
html[dir=rtl] .mark{margin-right:0;margin-left:auto}
html[lang=ar]{--sans:'Inter','Noto Sans Arabic',-apple-system,'Segoe UI',Tahoma,sans-serif}
html[lang=zh]{--sans:'Inter',-apple-system,'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif}
html[lang=hi]{--sans:'Inter','Noto Sans Devanagari',-apple-system,'Segoe UI',sans-serif}
html[lang=ar] *,html[lang=hi] *,html[lang=zh] *{letter-spacing:0!important}
html[lang=ar] body,html[lang=hi] body,html[lang=zh] body{line-height:1.8}
html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h1.ph,html[lang=hi] h2,html[lang=hi] h3,html[lang=hi] h1.ph,html[lang=zh] h2,html[lang=zh] h3,html[lang=zh] h1.ph,html[lang=ar] .role,html[lang=hi] .role,html[lang=zh] .role{line-height:1.35}

@media(max-width:860px){
 .item,.sites{grid-template-columns:1fr}
 .item .l{position:static}
 .rows{padding:4px 20px}
 .rows li,.rows div.r{grid-template-columns:1fr;gap:2px}
 .nav .w{height:auto;flex-wrap:wrap;gap:4px 18px;padding-top:12px;padding-bottom:12px}
 .nav .mark{width:100%}.nav .btn{display:none}
}
@media(prefers-reduced-motion:reduce){h1 i{animation:none;transform:none}.fade{animation:none;opacity:1}html{scroll-behavior:auto}}