*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#101010;--s1:#191919;--s2:#202020;--s3:#242424;--s4:#2E2E2E;--s5:#323232;--tx:#F5F5F5;--t2:#ACACAC;--t3:#C9C9C9;--mut:#8F8F8F;--blue:#2F7BF6;--tile:#F0EEEB;--hd:"Aeonik","Inter Display","Inter",system-ui,sans-serif;--sh:0 16px 40px -16px rgba(0,0,0,.5)}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
.scroller{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:transparent}
.brand{display:flex;align-items:center;gap:9px;font:600 17px/1 Inter}.flower{width:22px;height:22px}
.pillnav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(16,16,16,.35);backdrop-filter:blur(12px)}
.pillnav a{font-size:13px;color:var(--t3);padding:8px 14px;border-radius:999px;transition:background .25s,color .25s}.pillnav a:hover{background:rgba(255,255,255,.07);color:var(--tx)}
.nav-r{display:flex;align-items:center;gap:20px}.login{font-size:15px;color:var(--t3)}
.cta{display:inline-flex;align-items:center;justify-content:center;background:#F5F5F5;color:#181818;font:500 15px/1 Inter;padding:12px 22px;border-radius:999px;box-shadow:var(--sh);transition:transform .25s,background .25s}.cta:hover{background:#fff;transform:translateY(-1px)}
.cta40{height:40px;padding:0 22px}
/* cast */
.cast{position:fixed;inset:0;z-index:1;pointer-events:none}
.tile{position:absolute;left:0;top:0;width:56px;height:70px;margin:-35px 0 0 -28px;will-change:transform,opacity;pointer-events:auto}
.tile .f{width:100%;height:100%;border-radius:12px;background:var(--tile);overflow:hidden;box-shadow:var(--sh);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile:hover{z-index:5}.tile:hover .f{transform:translateY(-8px) scale(1.25);box-shadow:0 24px 44px -14px rgba(0,0,0,.7)}
.tile .tip{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translate(-50%,6px);white-space:nowrap;background:var(--s4);color:var(--tx);font:500 12px/1.25 Inter;padding:7px 11px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--sh);text-align:center}
.tile .tip small{display:block;color:var(--mut);font-weight:400;font-size:11px}
.tile:hover .tip{opacity:1;transform:translate(-50%,0)}
/* hero */
section,footer{position:relative;z-index:2}.hero,.manifesto{pointer-events:none}.hero a,.hero .works{pointer-events:auto}
@media(hover:none){.tile{pointer-events:none!important}}
.hero{height:100vh;height:100svh;min-height:560px;position:relative;display:grid;place-items:center;text-align:center}
.hero-c{display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 24px}
h1{font:500 clamp(43px,3.9vw,56px)/1.12 var(--hd);letter-spacing:-.025em}
.chaton{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);margin-top:-8px}.chaton svg{width:16px;height:16px}
.works{position:absolute;right:28px;bottom:26px;display:flex;align-items:center;gap:14px;color:var(--mut);font-size:12px}.works svg{width:16px;height:16px;color:#8F8F8F;transition:color .25s}.works svg:hover{color:#F5F5F5}.works .more{color:var(--t2)}
/* manifesto */
.manifesto{height:260vh;position:relative}
.m-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding:0 24px}
.statement{position:relative;z-index:3;max-width:820px;font:500 34px/1.3 var(--hd);letter-spacing:-.015em;text-align:center}
.statement .w{color:#4A4A4A;transition:color .25s}.statement .w.lit{color:#F5F5F5}
/* chat */
.chat{height:340vh;position:relative}
.c-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,420px) 300px;justify-content:center;align-items:center;gap:clamp(48px,10vw,160px);padding:0 28px}
.c-left h3{font:500 32px/1.15 var(--hd);letter-spacing:-.02em}
.chips{display:flex;gap:8px;margin:22px 0 20px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 8px;border-radius:999px;background:var(--s4);font:500 13px Inter;color:var(--t3);cursor:pointer;transition:background .35s,color .35s,box-shadow .35s}
.chip svg{width:15px;height:15px}.chip.on{background:#F5F5F5;color:#181818}
.body{font-size:15px;line-height:1.55;color:var(--t2);max-width:360px}
.learn{display:inline-flex;align-items:center;height:36px;padding:0 16px;margin-top:26px;border-radius:999px;background:var(--s5);font:600 12px/1 Inter;text-transform:uppercase;letter-spacing:.04em}
.phone{position:relative;width:300px;height:620px;border-radius:44px;background:#050505;padding:10px;box-shadow:0 0 0 1.5px #2a2a2a,var(--sh),0 40px 80px -30px rgba(0,0,0,.8)}
.island{position:absolute;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:999px;background:#000;z-index:5}
.screen{position:absolute;inset:10px;border-radius:35px;overflow:hidden;opacity:0;transition:opacity .6s ease;display:flex;flex-direction:column;font-size:13px}
.screen.on{opacity:1}
.sb{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 0;height:44px;font:600 13px Inter}.sb i{width:24px;height:11px;border-radius:3px;border:1.2px solid currentColor;opacity:.8}
/* imessage */
.s-imsg{background:#000;color:#fff}
.im-head{position:relative;display:flex;justify-content:center;padding:6px 0 10px;border-bottom:1px solid #1c1c1e;background:#0e0e0f}
.im-head .back{position:absolute;left:12px;top:14px;color:var(--blue);font-size:28px;line-height:1}
.im-head div{display:flex;flex-direction:column;align-items:center;gap:4px}.im-head img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--tile)}.im-head small{font-size:11px;color:#ddd}
.im-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 12px;justify-content:flex-end}
.bub{max-width:78%;padding:8px 12px;border-radius:18px;line-height:1.32;font-size:14px}
.bub.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.bub.them{align-self:flex-start;background:#26252A;color:#fff;border-bottom-left-radius:6px}
.deliv{align-self:flex-end;font-size:10.5px;color:#8e8e93;margin:-2px 4px 4px}
.typing{display:flex;gap:4px;padding:12px 14px}.typing i{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:dot 1.2s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.im-input{display:flex;align-items:center;gap:8px;padding:8px 12px 22px}.im-input span{width:30px;height:30px;border-radius:50%;background:#1c1c1e;display:grid;place-items:center;color:#8e8e93;font-size:18px}.im-input div{flex:1;height:32px;border-radius:999px;border:1px solid #2c2c2e;color:#5a5a5e;padding:0 14px;display:flex;align-items:center}
/* slack */
.s-slack{background:#1A1D21;color:#D1D2D3}
.sl-head{padding:8px 16px 12px;border-bottom:1px solid #2b2e33}.sl-head b{display:block;color:#fff;font-size:16px}.sl-head small{color:#9a9b9e;font-size:11.5px}
.sl-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:18px}
.msg{display:flex;gap:10px}.msg img{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--tile);flex:none}
.msg p{line-height:1.4;font-size:13.5px}.who{color:#fff;font-weight:700;margin-bottom:2px}.who time{color:#8a8b8e;font-weight:400;font-size:11px;margin-left:4px}
.app{font-size:9.5px;font-weight:600;background:#35383c;color:#bbb;padding:1px 4px;border-radius:3px;vertical-align:1px}
.reacts{display:flex;gap:6px;margin-top:7px}.reacts span{font-size:12px;padding:3px 8px;border-radius:999px;background:#22262b;border:1px solid #1d6fa5;color:#cfe8fb}.reacts span+span{border-color:#3a3d42;color:#ccc}
.sl-input{margin:0 12px 22px;border:1px solid #3a3d42;border-radius:10px;padding:12px;color:#7d7e81}
/* mail */
.s-mail{background:#fff;color:#111}
.s-mail .sb{color:#111}
.ml-head{padding:6px 16px 10px;color:var(--blue);font-size:16px}
.ml-body{padding:6px 18px;display:flex;flex-direction:column;gap:12px}
.from{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid #eee}.from img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--tile)}.from b{display:block;font-size:14px}.from small{color:#8a8a8e;font-size:11.5px}
.ml-body h4{font:600 18px/1.25 Inter;letter-spacing:-.01em}
.ml-body p{font-size:13.5px;line-height:1.5;color:#3a3a3c}
.att{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:#F2F2F7;margin-top:4px}.pdf{width:34px;height:40px;border-radius:6px;background:#E5484D;color:#fff;font:700 10px/40px Inter;text-align:center}.att b{display:block;font-size:12.5px}.att small{color:#8a8a8e;font-size:11.5px}
.end{height:30vh;display:grid;place-items:center;color:var(--mut);font-size:12px;position:relative;z-index:3}
/* mobile */
@media(max-width:900px){
  .pillnav,.login{display:none}.nav{padding:14px 16px}.nav .cta{font-size:13px;padding:10px 16px}
  .tile{width:44px;height:55px;margin:-27.5px 0 0 -22px}
  .works{left:16px;right:16px;justify-content:center;flex-wrap:wrap;gap:12px}
  .statement{font-size:24px}
  .c-sticky{grid-template-columns:1fr;justify-items:center;align-content:center;gap:22px;padding:64px 20px 0;text-align:center}
  .c-left h3{font-size:28px}.chips{justify-content:center;margin:14px 0 12px}.body{font-size:14px;margin:0 auto}.learn{margin-top:14px}
  .phone{text-align:left;transform:scale(.72);transform-origin:50% 0;margin-bottom:-174px}
}
@media(max-height:760px) and (min-width:901px){.phone{transform:scale(.86)}}
@media(max-width:900px){h1{font-size:43px}}