/* =========================================================================
   iOS app portfolio · "Springboard" design
   Single stylesheet shared by every page. Tokens live in :root.
   ========================================================================= */
:root{
  --bg:#0D0D10; --surface:#17171C; --surface-2:#1B1B21; --surface-3:#24242B; --line:#2A2A31; --line-2:#34343C;
  --text:#F4F3EE; --text-2:#C9C9D1; --muted:#A3A3AD; --faint:#8D8D97;
  --accent:#D7FF3D; --success:#3DDC84; --badge:#FF3B30; --ink:#0D0D10;
  --spring:cubic-bezier(.34,1.56,.64,1);
  /* gently damped spring (≈2% overshoot) for the island's size changes */
  --fluid:linear(0, 0.0225, 0.0799, 0.1594, 0.2511, 0.3476, 0.4432, 0.5341, 0.618, 0.6933, 0.7593, 0.816, 0.8638, 0.9032, 0.935, 0.9602, 0.9797, 0.9942, 1.0047, 1.0119, 1.0164, 1.0189, 1.0199, 1.0197, 1.0187, 1.0173, 1.0155, 1.0136, 1.0117, 1.0098, 1.0081, 1.0066, 1.0052, 1.004, 1.003, 1.0022, 1.0015, 1.0009, 1.0005, 1.0002, 1); --out:cubic-bezier(.2,.8,.2,1); --wipe:cubic-bezier(.7,0,.2,1);
  --font-display:'Bricolage Grotesque',Georgia,sans-serif; --font-body:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',ui-monospace,monospace;
}
body{margin:0;background:var(--bg)}
*{box-sizing:border-box}
a{color:var(--text)}a:hover{color:var(--accent)}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
img{max-width:100%}
.ph{display:inline-block;flex:none;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf{font-family:var(--font-body);color:var(--text);background:var(--bg);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.disp{font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-0.035em}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.mut{color:var(--muted)}
section[id],header[id],footer[id]{scroll-margin-top:80px}

/* dynamic island nav */
.island{position:fixed;top:14px;left:50%;z-index:50;background:#000;border-radius:999px;min-height:48px;display:flex;align-items:center;gap:10px;padding:6px;box-shadow:0 12px 36px rgba(0,0,0,.4);max-width:calc(100vw - 32px);transform:translateX(-50%);animation:islandIn 1.1s .1s var(--fluid) backwards}
.island>*{animation:islandContent .6s .45s var(--out) backwards}
.island.anim{overflow:hidden}
.island .links{display:flex;gap:2px;max-width:0;opacity:0;overflow:hidden;transition:max-width .75s var(--fluid),opacity .45s var(--out)}
.island:hover .links,.island:focus-within .links{max-width:360px;opacity:1}
.island .lk{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:0;background:none;cursor:pointer;text-decoration:none;font-size:14px;color:var(--text);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .4s var(--out),transform .6s var(--fluid),background .2s}
.island:hover .lk,.island:focus-within .lk,.island.open .lk{opacity:1;transform:none}
.island .lk:nth-child(2){transition-delay:.05s,.05s,0s}
.island .lk:nth-child(3){transition-delay:.1s,.1s,0s}
.island.closing .lk{opacity:0;transition-duration:.16s;transition-delay:0s}
.island .isl-icon{width:36px;height:36px;border-radius:50%;box-shadow:none}
.island .lk:hover{background:#26262C;color:var(--text)}
.island .who{min-width:0}
.island .who>span{white-space:nowrap}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 1.6s ease-out infinite;flex:none}
@keyframes islandIn{from{clip-path:inset(0 calc(50% - 24px) round 999px);opacity:0}20%{opacity:1}to{clip-path:inset(0 0 round 999px)}}
@keyframes islandContent{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}100%{box-shadow:0 0 0 9px rgba(61,220,132,0)}}

/* text motion */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .12em .18em;margin:-.04em -.12em -.18em}
.w>span{display:inline-block;animation:rise .95s cubic-bezier(.2,.9,.2,1.12) both}
@keyframes rise{from{transform:translateY(112%) rotate(7deg)}to{transform:none}}
.fu{animation:fadeUp .8s var(--out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.squig path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s 1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* app icons (squircle) */
.sq{position:relative;border-radius:23%;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 22px 40px -14px rgba(0,0,0,.65)}
.sq{container-type:inline-size}
.sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sqi{font-family:var(--font-display);font-weight:800;font-size:56cqw;line-height:1;color:var(--ink);letter-spacing:-0.04em}
.sq::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%);pointer-events:none}

/* hero icon cluster (large only) */
.cl{position:absolute;transition:transform .35s var(--out)}
.cl a,.dk,.app,.cardlink,.rowlink,.circ,.get{text-decoration:none}
.cl a{display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;border-radius:23%;animation:float 6s ease-in-out infinite}
.cl .sq{width:100%;height:100%;transition:transform .5s var(--spring)}
.cl a:hover .sq,.cl a:focus-visible .sq{transform:scale(1.12) rotate(-8deg)}
.cl .tip{position:absolute;left:50%;bottom:-34px;transform:translate(-50%,6px);opacity:0;background:var(--text);color:var(--ink);font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;white-space:nowrap;transition:all .35s var(--spring);pointer-events:none}
.cl a:hover .tip,.cl a:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.clbox{position:relative;width:min(520px,100%);aspect-ratio:1;margin-left:auto;animation:fadeUp 1s .3s var(--out) both}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-weight:600;font-size:16px;text-decoration:none;transition:transform .4s var(--spring),background .2s,color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px) scale(1.04)}
.btn:active{transform:scale(.95)}
.btn .arr{transition:transform .4s var(--spring)}
.btn:hover .arr{transform:translateX(5px)}
.btn.down:hover .arr{transform:translateY(4px)}
.btn.accent{background:var(--accent);color:var(--ink)}
.btn.accent:hover{color:var(--ink)}
.ghostbtn{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px #3A3A42}
.ghostbtn:hover{box-shadow:inset 0 0 0 1.5px var(--text);color:var(--text)}
.cnt{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:700}

/* marquee */
.mqwrap{overflow:hidden}
.mq{display:flex;width:max-content;animation:mq 34s linear infinite}
.mqwrap:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* segmented control */
.seg{position:relative;display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px}
.seg button{position:relative;z-index:1;border:0;background:none;height:44px;width:136px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);transition:color .35s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .thumb{position:absolute;top:4px;left:4px;width:136px;height:44px;border-radius:999px;background:var(--accent);transition:transform .55s var(--spring)}
.seg[data-value="grid"] .thumb{transform:translateX(100%)}

/* GET button (state machine: GET → progress ring → OPEN) */
.get{text-decoration:none;color:inherit;height:56px;border-radius:999px;border:0;background:var(--ink);font-weight:800;font-size:17px;letter-spacing:.08em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;flex:none;transition:width .55s var(--spring),transform .3s var(--spring),background .25s}
.get:hover{transform:scale(1.06)}
.get:active{transform:scale(.92)}
.getsm{height:40px;font-size:14px;background:var(--surface-3)}
.ring{animation:spin 1s linear infinite}
.ring circle.p{stroke-dasharray:63;stroke-dashoffset:63;animation:fill 1.6s cubic-bezier(.6,0,.3,1) forwards}
.chk{animation:popIn .45s .05s var(--spring) both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fill{to{stroke-dashoffset:0}}

/* featured cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{position:relative;background:var(--surface);border-radius:36px;overflow:hidden;display:flex;flex-direction:column;animation:fadeUp .8s var(--out) both;transition:transform .55s var(--spring)}
.card:hover{transform:translateY(-8px)}
.cardlink{position:absolute;inset:0;z-index:1;border:0;background:none;padding:0;cursor:pointer;border-radius:inherit}
.cbody{padding:0 28px 28px;display:flex;flex-direction:column;gap:18px}
.cardlink:focus-visible{outline:3px solid var(--text);outline-offset:-3px}
.card>*:not(.cardlink){position:relative;z-index:2;pointer-events:none}
.card .live{pointer-events:auto}
.art{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.artname{position:absolute;left:4cqw;bottom:-3.5cqw;font-size:16cqw;line-height:1;font-weight:800;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(13,13,16,.22);transition:transform 1s var(--out)}
.card:hover .artname{transform:translateX(-4cqw)}
.micon{position:absolute;right:10cqw;top:10cqw;width:24cqw;height:24cqw;transform:rotate(-10deg);transition:transform .6s var(--spring)}
.micon .sq{width:100%;height:100%;box-shadow:0 0 0 1.2cqw var(--ink),0 4cqw 8cqw -2cqw rgba(0,0,0,.5)}
.card:hover .micon{transform:rotate(6deg) scale(1.08)}
.cicon{width:84px;height:84px;margin-top:-42px;box-shadow:0 0 0 6px var(--surface),0 20px 30px -12px rgba(0,0,0,.6);transition:transform .55s var(--spring)}
.card:hover .cicon{transform:rotate(-8deg) scale(1.06)}

/* rows (all apps) */
.row{position:relative;display:grid;grid-template-columns:44px 72px minmax(0,1fr) auto auto 52px;align-items:center;gap:24px;padding:22px 20px;border-top:1px solid var(--line);color:var(--text);overflow:hidden;animation:fadeUp .7s var(--out) both;transition:color .35s}
.rowlink{position:absolute;inset:0;z-index:1;border:0;background:none;padding:0;cursor:pointer}
.row.nometa{grid-template-columns:44px 72px minmax(0,1fr) auto 52px}
.rowlink:focus-visible{outline:3px solid var(--text);outline-offset:-3px}
.row .wipe{position:absolute;inset:0;z-index:0;clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--wipe)}
.row>*:not(.rowlink):not(.wipe){position:relative;z-index:2;pointer-events:none}
.row .live{pointer-events:auto}
.row:hover .wipe,.row:focus-within .wipe{clip-path:inset(0 0 0 0)}
.row:hover,.row:focus-within{color:var(--ink)}
.row:hover .mut,.row:focus-within .mut{color:var(--ink);opacity:.75}
.row:hover .getsm,.row:focus-within .getsm{background:var(--ink)}
.row .sq{transition:transform .55s var(--spring)}
.row:hover .sq{transform:rotate(-10deg) scale(1.14)}
.row .nm{font-size:clamp(32px,4.4vw,64px);line-height:.95;font-weight:700;transition:transform .55s var(--spring)}
.row:hover .nm{transform:translateX(12px)}
.row .go{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #3A3A42;display:grid;place-items:center;transition:transform .55s var(--spring),background .3s,color .3s}
.row:hover .go{transform:rotate(-45deg);background:var(--ink);color:var(--text);box-shadow:none}
.fchip{height:44px;padding:0 8px 0 18px;border-radius:999px;border:0;cursor:pointer;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);color:var(--text);transition:transform .4s var(--spring),background .3s,color .3s}
.fchip .cnt{background:var(--line);color:var(--text-2)}
.fchip[aria-pressed="true"]{background:var(--accent);color:var(--ink)}
.fchip[aria-pressed="true"] .cnt{background:var(--ink);color:var(--accent)}
.fchip:hover{transform:translateY(-3px)}
.fchip:active{transform:scale(.94)}

/* springboard */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:48px 24px;padding:56px 0 24px}
.app{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:14px;border:0;background:none;cursor:pointer;color:var(--text);padding:8px;animation:pop .7s var(--spring) both}
.app .sq{width:132px;height:132px;transition:transform .45s var(--spring)}
.app:hover{color:var(--text)}
.board:hover .app .sq{animation:jiggle .26s ease-in-out infinite alternate}
.board:hover .app:nth-child(even) .sq{animation-delay:-.13s;animation-direction:alternate-reverse}
.board .app:hover .sq{animation:none;transform:scale(1.12) translateY(-6px)}
.badge{position:absolute;top:-8px;right:-8px;min-width:30px;height:30px;padding:0 9px;border-radius:999px;background:var(--badge);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px #141418;animation:bounce 2.4s var(--spring) infinite}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes jiggle{from{transform:rotate(-2.6deg)}to{transform:rotate(2.6deg)}}
@keyframes bounce{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25)}90%{transform:scale(.95)}}

/* widgets */
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.wg{background:var(--surface);border-radius:32px;padding:26px;min-height:230px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:16px;transition:transform .55s var(--spring);animation:fadeUp .8s var(--out) both}
.wg:hover{transform:translateY(-6px) rotate(-1.2deg)}
.wg:nth-child(even):hover{transform:translateY(-6px) rotate(1.2deg)}
.mbar{flex:1;border-radius:4px;transform-origin:bottom;animation:grow .9s var(--spring) both}
.qr{position:relative;display:block;width:120px;height:120px;flex:none;padding:7px;background:#fff;border-radius:14px}
.qr svg{display:block;width:100%;height:100%}
.scan{position:absolute;left:5px;right:5px;height:2px;border-radius:2px;animation:scan 2.6s ease-in-out infinite}
@keyframes scan{0%,100%{top:8px}50%{top:110px}}
.stars{position:relative;display:inline-flex;gap:3px}
.starfill{position:absolute;left:0;top:0;bottom:0;overflow:hidden;display:flex;gap:3px;width:0;transition:width 1.3s var(--out)}
.starfill svg{flex:none}

/* detail */
.hero-d{position:relative;overflow:hidden;color:var(--ink);padding:96px 0 0}
.ghost{position:absolute;bottom:-2vw;left:0;display:flex;width:max-content;white-space:nowrap;font-size:24vw;line-height:.8;font-weight:800;color:transparent;-webkit-text-stroke:2px rgba(13,13,16,.22);pointer-events:none;animation:mq 46s linear infinite}
.hgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:end}
.hgrid.solo{grid-template-columns:minmax(0,1fr)}
.hgrid.solo .htext{padding-bottom:104px !important}
.dname{font-size:clamp(68px,11.5vw,176px);line-height:.86;margin:0;font-weight:800}
.back{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 12px;border-radius:999px;border:0;background:var(--ink);color:var(--text);cursor:pointer;font-weight:600;font-size:14px;text-decoration:none;transition:transform .4s var(--spring)}
.back:hover{color:var(--text);transform:scale(1.05)}
.back svg{transition:transform .4s var(--spring)}
.back:hover svg{transform:translateX(-4px)}
.circ{width:44px;height:44px;border-radius:50%;border:0;background:rgba(13,13,16,.1);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .4s var(--spring),background .2s}
.circ:hover{background:var(--ink);color:var(--text);transform:scale(1.1)}
.phone{width:300px;height:620px;border-radius:54px;background:var(--ink);padding:11px;box-shadow:0 50px 90px -20px rgba(0,0,0,.5),inset 0 0 0 2px #2B2B31}
.phonein{animation:phoneIn 1.1s .1s cubic-bezier(.2,.9,.2,1.08) both}
.bob{animation:bob 7s ease-in-out infinite}
@keyframes phoneIn{from{transform:translateY(160px) rotate(10deg);opacity:0}to{transform:translateY(0) rotate(-4deg);opacity:1}}
.scr{width:100%;height:100%;border-radius:44px;background:#121216;overflow:hidden;position:relative;color:var(--text)}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* .orb positions and pops in; the pill itself (.o) bobs, so the whole capsule floats */
.orb{position:absolute;display:inline-flex}
.orb1{animation:popIn .7s .9s var(--spring) both}
.orb2{animation:popIn .7s 1.1s var(--spring) both}
.orb .o{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--text);color:var(--ink);font-size:13px;font-weight:600;box-shadow:0 14px 30px -10px rgba(0,0,0,.35);white-space:nowrap;animation:bob 5s ease-in-out infinite}
.bigicon{position:absolute;width:128px;height:128px;animation:popIn .8s .45s var(--spring) both}
.bigicon .sq{width:100%;height:100%;box-shadow:0 0 0 8px var(--ink),0 30px 60px -18px rgba(0,0,0,.55)}
.bigicon .in{animation:float 6s ease-in-out infinite}
/* edges fade out on whichever side has more to scroll to (ui.js sets data-scroll) */
@property --fl{syntax:'<length>';inherits:false;initial-value:0px}
@property --fr{syntax:'<length>';inherits:false;initial-value:0px}
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 0 28px;scrollbar-width:none;--fade:56px;--fl:0px;--fr:var(--fade);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);transition:--fl .35s var(--out),--fr .35s var(--out)}
.shots[data-scroll~="left"]{--fl:var(--fade)}
.shots[data-scroll]:not([data-scroll~="right"]){--fr:0px}
.shot{flex:none;height:560px;border-radius:32px;overflow:hidden;background:var(--surface);scroll-snap-align:start;animation:fadeUp .8s var(--out) both;transition:transform .5s var(--out),box-shadow .5s var(--out)}
.shot:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(0,0,0,.8)}
.shot img,.shot video{display:block;height:100%;width:auto;aspect-ratio:auto 9 / 19.5}
.ft{background:var(--surface);border-radius:32px;padding:32px;display:flex;flex-direction:column;gap:18px;min-height:300px;transition:transform .55s var(--spring);animation:fadeUp .8s var(--out) both}
.ft:hover{transform:translateY(-8px)}
.ft .fi{color:var(--ink);width:64px;height:64px;border-radius:20px;display:grid;place-items:center;transition:transform .6s var(--spring)}
.ft:hover .fi{transform:rotate(-14deg) scale(1.12)}
.ft.noicon .ftop{justify-content:flex-end !important}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prose p{margin:0 0 1em}.prose p:last-child{margin-bottom:0}.prose a{color:var(--accent)}
.fhead{max-width:60%}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:15px;font-weight:500;transition:transform .4s var(--spring),background .25s,color .25s}
.chip:hover{transform:translateY(-4px) rotate(-3deg);background:var(--text);color:var(--ink)}
.soc{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-2);text-decoration:none;animation:popIn .6s var(--spring) both;transition:transform .45s var(--spring),background .25s,color .25s,box-shadow .25s}
.soc svg{transition:transform .5s var(--spring)}
.soc:hover{transform:translateY(-5px) scale(1.08);background:var(--text);color:var(--ink);box-shadow:none}
.soc:hover svg{transform:rotate(-12deg) scale(1.1)}
.soc:active{transform:scale(.9)}
.prom{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:20px;font-weight:500;animation:fadeUp .7s var(--out) both;transition:transform .45s var(--spring)}
.prom:hover{transform:translateX(8px)}
.prom .ck{color:var(--ink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;animation:popIn .6s var(--spring) both}
.ns{position:relative;display:flex;flex-direction:column;gap:16px;outline-offset:6px;border-radius:26px}
.nt{position:relative;min-height:72px;background:#202027;border-radius:26px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);overflow-wrap:anywhere}
.nt.n1{z-index:3}.nt.n2{z-index:2}.nt.n3{z-index:1}
.ns.ready{display:block;height:var(--hc);transition:height .6s var(--fluid)}
.ns.ready .nt{position:absolute;left:0;right:0;top:0;height:var(--h0);overflow:hidden;transform:translateY(var(--cy)) scale(var(--cs));opacity:var(--co);transition:transform .6s var(--fluid),height .6s var(--fluid),opacity .4s}
.ns.ready:hover,.ns.ready:focus-within{height:var(--he)}
.ns.ready:hover .nt,.ns.ready:focus-within .nt{height:var(--h);transform:translateY(var(--ey));opacity:1}
.ns.measure .nt{height:auto !important;transition:none !important}
.cta .sq{width:120px;height:120px}
.cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:36px;align-items:center;background:var(--surface);border-radius:44px;padding:48px 56px;animation:fadeUp .8s var(--out) both}
.cta .sq{animation:float 6s ease-in-out infinite}
.nx{display:block;width:100%;border:0;cursor:pointer;text-align:left;color:var(--ink);padding:72px 0 80px;position:relative;overflow:hidden;text-decoration:none}
.nx:hover{color:var(--ink)}
.nx .nxn{font-size:clamp(68px,13vw,210px);line-height:.86;font-weight:800;display:inline-block;transition:transform .8s var(--spring)}
.nx:hover .nxn{transform:translateX(28px) skewX(-6deg)}
.nx .nxa{width:clamp(72px,9vw,128px);height:clamp(72px,9vw,128px);border-radius:50%;background:var(--ink);color:var(--text);display:grid;place-items:center;flex:none;transition:transform .7s var(--spring)}
.nx:hover .nxa{transform:rotate(-45deg) scale(1.08)}

/* launch transition overlay (circle grows from the click point in the app's tint) */
.launch{position:fixed;inset:0;z-index:100;pointer-events:none;transition:clip-path .55s var(--wipe),opacity .45s ease}

/* responsive-only pieces (hidden on large) */
.menub{display:none;position:relative;width:36px;height:36px;border-radius:50%;border:0;background:#1E1E24;cursor:pointer;flex:none}
.menub span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--text);transition:transform .45s var(--spring)}
.menub .mb1{top:14px}.menub .mb2{top:20px}
.island.open .mb1{transform:translateY(3px) rotate(45deg)}
.island.open .mb2{transform:translateY(-3px) rotate(-45deg)}
.dock{display:none;align-self:flex-start;gap:12px;padding:12px;border-radius:30px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);animation:fadeUp .8s .85s var(--out) both}
.dk{display:block;border:0;background:none;padding:0;cursor:pointer;border-radius:23%;animation:float 6s ease-in-out infinite}
.dk .sq{width:64px;height:64px;transition:transform .45s var(--spring)}
.dk:hover .sq{transform:translateY(-8px) scale(1.14)}
.dk:active .sq{transform:scale(.86)}
.swipehint{display:none;margin:0 0 12px;font-size:12px;color:var(--faint);align-items:center;gap:8px}

/* ---------- MEDIUM · 700–1099px (iPad) ---------- */
@media (max-width:1099px){
.wrap{padding:0 32px}
.hgrid2{grid-template-columns:1fr !important}
.hhero{padding:128px 0 48px !important}
.clbox{display:none}
.dock{display:flex}
.island:not(.open):hover .links,.island:not(.open):focus-within .links{max-width:0;opacity:0}
.island:not(.open):hover .lk,.island:not(.open):focus-within .lk{opacity:0;transform:translateX(-8px)}
.island.open .lk{transform:none}
.island.open .lk:nth-child(1){transition-delay:.14s,.14s,0s}
.island.open .lk:nth-child(2){transition-delay:.2s,.2s,0s}
.island.open .lk:nth-child(3){transition-delay:.26s,.26s,0s}
.island.closing .lk{transition-delay:0s !important}
.fhead{max-width:80%}
.menub{display:block}
.island.open{flex-wrap:wrap;width:min(380px,calc(100vw - 32px));border-radius:30px;padding:8px 8px 10px}
.island.open .links{flex-basis:100%;max-width:none;opacity:1;flex-direction:column;gap:2px;padding-top:8px;margin-top:6px;border-top:1px solid #26262C}
.island.open .lk{height:48px;font-size:17px;justify-content:flex-start;padding:0 14px;width:100%}
.island .who{flex:1;min-width:0}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card .cname{font-size:30px !important}
.card .plat{display:none}
.board{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 16px}
.app .sq{width:108px;height:108px}
.wgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.wnum{font-size:80px !important}
.row,.row.nometa{grid-template-columns:64px minmax(0,1fr) auto 48px;gap:18px;padding:20px 12px}
.row .idx,.row .meta{display:none}
.row .sq{width:64px !important;height:64px !important}
.row .go{width:48px;height:48px}
.hgrid{grid-template-columns:1fr;gap:0}
.htext{padding-bottom:16px !important}
.dstage{height:560px !important}
.qrw,.qronly{display:none !important}
.ft.noicon{display:flex}
.awardw{grid-column:1/-1;min-height:0 !important}
.fgrid{grid-template-columns:1fr}
.ft{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;column-gap:24px;min-height:0;padding:26px}
.ft .fnum{display:none}
.ft .fbody{margin-top:0 !important}
.ns.ready,.ns.ready:hover{height:var(--he)}
.ns.ready .nt{height:var(--h);transform:translateY(var(--ey));opacity:1}
.nshint{display:none}
.cta{padding:40px;gap:28px}
.bigicon{width:104px;height:104px}
}

/* ---------- SMALL · under 700px (iPhone) ---------- */
@media (max-width:699px){
.wrap{padding:0 16px}
.fhead{max-width:none}
.shots{--fade:32px}
.shot{height:440px;border-radius:26px}
.hhero{padding:108px 0 28px !important}
.htitle{font-size:clamp(46px,14.5vw,60px) !important}
.heroctas>*{flex:1 1 100%;justify-content:center}
.dock{align-self:stretch;justify-content:space-between;gap:6px;padding:10px;border-radius:26px}
.dk .sq{width:46px;height:46px}
.tick{font-size:24px !important;gap:18px !important;padding-right:18px !important}
.cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:4px 16px 24px;scrollbar-width:none}
.card{flex:none;width:86%;scroll-snap-align:center;border-radius:30px}
.card:hover{transform:none}
.swipehint{display:flex}
.seg button,.seg .thumb{width:112px}
.boardwrap{padding:4px 10px 20px !important;border-radius:32px !important}
.board{gap:22px 4px;padding:24px 0 12px}
.app{padding:4px;gap:8px}
.app .sq{width:60px;height:60px}
.app .lbl{font-size:12px !important}
.badge{min-width:22px;height:22px;padding:0 6px;font-size:10px;top:-6px;right:-6px}
.wgrid{gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.wg{min-height:150px;padding:18px;border-radius:24px}
.wnum{font-size:54px !important}
.wnum2{font-size:60px !important}
.row,.row.nometa{grid-template-columns:52px minmax(0,1fr) auto;gap:12px;padding:16px 4px}
.row .go{display:none}
.row .sq{width:52px !important;height:52px !important}
.row .nm{font-size:28px}
.chipsrow{flex-wrap:nowrap !important;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 6px;scrollbar-width:none}
.fchip{flex:none}
.dname{font-size:clamp(46px,14vw,68px)}
.dstage{height:540px !important}
.bigicon{width:84px;height:84px}
.bigicon .sq{box-shadow:0 0 0 6px var(--ink),0 30px 60px -18px rgba(0,0,0,.55)}
.orb .o{height:34px;padding:0 12px;font-size:12px}
.ft{grid-template-columns:52px minmax(0,1fr);padding:22px;column-gap:18px;border-radius:26px}
.ft .fi{width:52px;height:52px;border-radius:16px}
.cta{grid-template-columns:1fr;padding:28px;gap:20px;border-radius:32px}
.cta .sq{width:96px;height:96px}
.hgrid.solo .htext{padding-bottom:72px !important}
.ctarow>*{flex:1 1 100%;justify-content:center}
.nx{padding:48px 0 56px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}}