@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=DM+Sans:wght@400;600;700;800&family=Space+Grotesk:wght@400;600;700&family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Outfit:wght@400;600;700;800&family=Figtree:wght@400;600;700;800&family=Lexend:wght@400;600;700;800&family=Urbanist:wght@400;600;700;800&family=Onest:wght@400;600;700;800&family=Bricolage+Grotesque:wght@400;600;700;800&family=Red+Hat+Display:wght@400;600;700;800&display=swap');
/* Pack e-brand: Brand kits (.bk-), Logo reveals (.lr-), Thumbnails (.th-). Keyframes k-bk- / k-lr- / k-th-. */

/* ================= Brand kits ================= */
.bk-c{position:absolute;inset:0;display:flex;flex-direction:column;padding:96px 80px 70px;gap:50px}
.bk-info{display:flex;flex-direction:column;gap:44px}
.bk-head{display:flex;align-items:center;gap:40px}
.bk-head svg{flex:none}
.bk-name{font-size:104px;font-weight:800;letter-spacing:-.04em;line-height:1}
.bk-grp{font-size:34px;font-weight:600;color:var(--mute);margin-top:12px}
.bk-sws{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bk-sw i{display:block;height:150px;border-radius:28px}
.bk-sw b{display:block;font-size:26px;font-weight:700;margin-top:14px;text-transform:capitalize}
.bk-sw span{display:block;font:500 22px 'JetBrains Mono',monospace;color:var(--mute);margin-top:4px}
.bk-spec{display:flex;align-items:center;gap:40px;background:var(--card);border-radius:36px;padding:34px 44px}
.bk-aa{font-size:190px;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--ac)}
.bk-fn{font-size:48px;font-weight:800;letter-spacing:-.02em}
.bk-tag{font-size:34px;font-weight:500;margin-top:6px}
.bk-ratio{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font:600 22px 'JetBrains Mono',monospace;color:var(--mute)}
.bk-ratio svg{width:26px;height:26px}
.bk-vo{display:flex;gap:14px;flex-wrap:wrap}
.bk-vo span{font-size:28px;font-weight:700;padding:12px 24px;border-radius:999px;border:3px solid var(--line)}
.bk-scs{display:grid;grid-template-columns:470px 228px;gap:26px;justify-content:center;align-content:start;margin-top:auto}
.bk-sc{position:relative;overflow:hidden;border-radius:26px;box-shadow:var(--sh2)}
.bk-sc0{grid-row:1 / 3}
.bk-sc>.stage{position:absolute;left:0;top:0}
/* landscape */
.bk-l{flex-direction:row;padding:80px 80px;gap:70px;align-items:center}
.bk-l .bk-info{width:780px;flex:none;gap:40px}
.bk-l .bk-name{font-size:92px}
.bk-l .bk-sw i{height:110px;border-radius:22px}
.bk-l .bk-aa{font-size:150px}
.bk-l .bk-scs{margin:0;flex:1;grid-template-columns:1fr 1fr;gap:22px}
.bk-l .bk-sc0{grid-column:1 / 3;grid-row:auto}

/* ================= Logo reveals ================= */
.lr-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px;z-index:5}
.lr-lock{display:flex;flex-direction:column;align-items:center;gap:44px;position:relative}
.lr-lock.lr-row,.land .lr-lock{flex-direction:row;gap:48px}
.lr-lock svg{display:block;overflow:visible}
.lr-word{font-size:130px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink);white-space:nowrap}
.land .lr-word{font-size:150px}
.lr-fadeup{animation:k-lr-up .7s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes k-lr-up{from{opacity:0;transform:translateY(40px);filter:blur(6px)}}
@keyframes k-lr-show{to{opacity:1}}
@keyframes k-lr-out{to{opacity:0}}
@keyframes k-lr-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
.lr-mpop{animation:k-lr-pop .6s cubic-bezier(.2,.8,.2,1) backwards}
/* draw */
.lr-draw *{stroke:var(--ac);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;animation:k-lr-dash 1.2s cubic-bezier(.7,0,.2,1) forwards,k-lr-fill .5s ease forwards}
@keyframes k-lr-dash{to{stroke-dashoffset:0}}
@keyframes k-lr-fill{to{fill-opacity:1;stroke-width:0}}
/* wipe */
.lr-wipe{position:relative}
.lr-wipe-in{opacity:0;animation:k-lr-show 0s .55s forwards}
.lr-bar{position:absolute;inset:-30px -50px;background:var(--ac2);transform:scaleX(0);transform-origin:left;animation:k-lr-bar 1.1s cubic-bezier(.7,0,.2,1) forwards;border-radius:20px}
@keyframes k-lr-bar{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* assemble */
.lr-asm *{transform-box:fill-box;transform-origin:center;animation:k-lr-fly .8s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes k-lr-fly{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6)}}
/* converge */
.lr-conv{position:relative;display:flex;align-items:center;justify-content:center}
.lr-dots{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3}
.lr-dots i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;opacity:0;animation:k-lr-conv 1.15s cubic-bezier(.7,0,.2,1) forwards}
.lr-conv .lr-lock{margin-top:0}
.lr-conv .lr-mpop{animation-delay:1s}
@keyframes k-lr-conv{0%{transform:translate(var(--x),var(--y));opacity:0}20%{opacity:1}85%{transform:translate(0,-60px) scale(1);opacity:1}100%{transform:translate(0,-60px) scale(0);opacity:0}}
.land .lr-conv .lr-dots{left:130px}
/* spin */
.lr-spin{animation:k-lr-spin 1.1s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes k-lr-spin{0%{transform:rotate(-270deg) scale(0)}70%{transform:rotate(12deg) scale(1.08)}100%{transform:none}}
.lr-clip{overflow:hidden;padding:10px 0}
.lr-slidein{animation:k-lr-slin .7s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes k-lr-slin{from{transform:translateX(-105%)}}
.lr-spin .lr-word,.lr-row .lr-word{font-size:120px}
/* letters */
.lr-ch{display:inline-block;animation:k-lr-ch .5s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes k-lr-ch{from{opacity:0;transform:translateY(40px);filter:blur(8px)}}
/* split */
.lr-split{gap:36px!important;--half:250px}
.land .lr-split{--half:340px}
.lr-sm{position:relative;z-index:2;animation:k-lr-sm 1.2s cubic-bezier(.7,0,.2,1) backwards}
@keyframes k-lr-sm{0%{transform:translateX(var(--half)) scale(0)}35%{transform:translateX(var(--half)) scale(1)}100%{transform:none}}
.lr-split .lr-word{font-size:120px}
.land .lr-split .lr-word{font-size:170px}
.lr-sw{animation:k-lr-sw .8s cubic-bezier(.7,0,.2,1) .45s backwards}
@keyframes k-lr-sw{from{transform:translateX(-110%)}}
/* glitch */
.lr-gl{position:relative}
.lr-g1,.lr-g2{position:absolute;left:0;top:0;mix-blend-mode:screen;animation:k-lr-g1 1.1s steps(1) forwards}
.lr-g2{animation-name:k-lr-g2}
.lr-g0{position:relative;animation:k-lr-gm 1.1s steps(1) forwards}
@keyframes k-lr-g1{0%{transform:translate(-18px,6px)}20%{transform:translate(14px,-8px)}40%{transform:translate(-8px,-4px)}60%{transform:translate(10px,8px)}80%{transform:translate(-4px,2px)}100%{transform:none;opacity:0}}
@keyframes k-lr-g2{0%{transform:translate(16px,-4px)}20%{transform:translate(-12px,6px)}40%{transform:translate(8px,6px)}60%{transform:translate(-10px,-6px)}80%{transform:translate(4px,-2px)}100%{transform:none;opacity:0}}
@keyframes k-lr-gm{0%{clip-path:inset(0 0 60% 0)}25%{clip-path:inset(40% 0 10% 0)}50%{clip-path:inset(10% 0 30% 0)}75%,100%{clip-path:inset(0)}}
.lr-glw{animation:k-lr-glw 1.1s steps(1) forwards}
@keyframes k-lr-glw{0%{opacity:0}20%{opacity:1;transform:translateX(12px)}40%{opacity:.3;transform:translateX(-10px)}60%{opacity:1;transform:none}80%{opacity:.6}100%{opacity:1}}
/* liquid */
.lr-liq{position:absolute;left:50%;top:50%;width:2600px;height:2600px;margin:-1300px 0 0 -1300px;border-radius:50%;transform:scale(0);animation:k-lr-liq 1.1s cubic-bezier(.7,0,.2,1) .18s forwards;z-index:0}
.lr-liq2{animation-delay:0s}
@keyframes k-lr-liq{to{transform:scale(1)}}
.lr-fx-liquid .lr-lock{z-index:2}
/* morph */
.lr-morph{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center}
.land .lr-morph{width:260px;height:260px}
.lr-shape{position:absolute;width:240px;height:240px;border-radius:24px;animation:k-lr-morph 1.6s cubic-bezier(.7,0,.2,1) forwards}
@keyframes k-lr-morph{0%{transform:scale(0);border-radius:24px}30%{transform:scale(1) rotate(0);border-radius:24px}60%{transform:rotate(90deg);border-radius:50%}85%{opacity:1;transform:rotate(90deg) scale(1)}100%{opacity:0;transform:scale(1.2)}}
.lr-mfin{position:relative;animation:k-lr-pop .6s cubic-bezier(.2,.8,.2,1) 1.2s backwards}
/* end cards */
.lr-up{animation:k-lr-up .6s cubic-bezier(.2,.8,.2,1) backwards}
.lr-end{display:flex;flex-direction:column;align-items:center;gap:56px;text-align:center}
.lr-er{display:flex;align-items:center;gap:30px}
.lr-en{font-size:120px;font-weight:800;letter-spacing:-.04em}
.lr-eh{font-size:86px;font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:900px}
.land .lr-end{gap:40px}
.land .lr-eh{max-width:1400px}
.lr-btn{display:inline-flex;align-items:center;gap:18px;color:#fff;font-size:64px;font-weight:800;padding:40px 80px;border-radius:999px}
.lr-btn svg{width:52px;height:52px}
.lr-url{display:inline-flex;align-items:center;gap:14px;font-size:48px;font-weight:600;color:var(--mute)}
.lr-url svg{width:40px;height:40px}
.lr-soc{display:flex;align-items:center;gap:22px}
.lr-soc span{width:112px;height:112px;border-radius:50%;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.lr-soc svg{width:54px;height:54px}
.lr-soc b{font-size:46px;font-weight:700;margin-left:10px}
.lr-subw{position:relative}
.lr-sub{position:relative;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:70px;font-weight:800;height:160px;width:640px;border-radius:999px;animation:k-lr-press .3s ease 1.55s,k-lr-subbg 0s 1.7s forwards}
@keyframes k-lr-press{50%{transform:scale(.93)}}
@keyframes k-lr-subbg{to{background:#111113}}
.lr-sub span{position:absolute;display:inline-flex;align-items:center;gap:18px}
.lr-sub svg{width:56px;height:56px}
.lr-s1{animation:k-lr-out 0s 1.7s forwards}
.lr-s2{opacity:0;animation:k-lr-show 0s 1.7s forwards}
.lr-cur{position:absolute;right:40px;bottom:-70px;color:var(--ink);animation:k-lr-cur 1.1s cubic-bezier(.2,.8,.2,1) .5s backwards;z-index:3}
.lr-cur svg{width:90px;height:90px;fill:#fff;stroke-width:1.6}
@keyframes k-lr-cur{from{transform:translate(300px,260px);opacity:0}100%{transform:none;opacity:1}}
.lr-qrw{gap:50px}
.land .lr-qrw{flex-direction:row;gap:90px;text-align:left}
.land .lr-qrw .lr-qt{display:flex;flex-direction:column;gap:34px;align-items:flex-start}
.lr-qt{display:flex;flex-direction:column;gap:40px;align-items:center}
.lr-qr{position:relative;background:#fff;border-radius:44px;padding:40px;box-shadow:var(--sh)}
.lr-qrsvg{display:block;width:620px;height:620px}
.land .lr-qrsvg{width:520px;height:520px}
.lr-qm{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:12px;border-radius:24px}
.lr-qm svg{display:block}
.lr-scan{position:absolute;left:24px;right:24px;height:10px;border-radius:5px;opacity:0;animation:k-lr-scan 1.4s cubic-bezier(.7,0,.2,1) .7s both}
@keyframes k-lr-scan{0%{top:30px;opacity:1}90%{opacity:1}100%{top:calc(100% - 40px);opacity:0}}
.lr-qt .lr-eh{font-size:60px}
/* tagline */
.lr-tl{display:flex;flex-direction:column;align-items:center;gap:80px}
.lr-lock.lr-small{gap:36px}
.lr-small .lr-word{font-size:110px}
.lr-lines{display:flex;flex-direction:column;align-items:center;gap:6px}
.lr-ln{font-size:150px;font-weight:800;letter-spacing:-.05em;line-height:1.02;animation:k-lr-ln .6s cubic-bezier(.2,.8,.2,1) backwards}
.land .lr-tl{flex-direction:row;gap:120px}
.land .lr-lines{align-items:flex-start}
.land .lr-tl .lr-lock{flex-direction:column}
@keyframes k-lr-ln{from{opacity:0;transform:translateY(60px);clip-path:inset(0 0 100% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
/* fade */
.lr-fd{animation:k-lr-fd 1.4s ease backwards}
@keyframes k-lr-fd{from{opacity:0;filter:blur(20px);transform:scale(1.06)}}
.lr-fdw{color:#fff;font-weight:600;font-size:110px;letter-spacing:-.01em;animation:k-lr-fdw 1.6s ease .5s backwards}
.land .lr-fdw{font-size:130px}
@keyframes k-lr-fdw{from{opacity:0;letter-spacing:.4em}}

/* ================= Thumbnails ================= */
.th-c{position:absolute;inset:0;display:flex;flex-direction:column;padding:240px 70px 300px;gap:70px;animation:k-th-in .5s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes k-th-in{from{opacity:0;transform:scale(1.03)}}
.land .th-c{flex-direction:row;align-items:center;padding:80px 90px;gap:60px}
.th-txt{flex:none;position:relative;z-index:2}
.land .th-txt{width:960px}
.th-vis{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.th-t{font-size:160px;font-weight:800;line-height:.92;letter-spacing:-.045em;color:var(--ink)}
.land .th-t{font-size:158px}
.th-t em{font-style:normal;color:#fff;padding:0 .12em;border-radius:.14em;display:inline-block;line-height:1.02;margin-top:.06em}
.th-t u{text-decoration:none}
.th-k{display:inline-flex;align-items:center;gap:14px;font-size:48px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:26px}
.th-k svg{width:50px;height:50px}
/* bold */
.th-tile{width:380px;height:380px;border-radius:80px;display:flex;align-items:center;justify-content:center;color:#111113;transform:rotate(-8deg)}
.th-tile svg{width:220px;height:220px;stroke-width:2.4}
.th-tile2{position:absolute;width:230px;height:230px;border-radius:56px;color:#fff;right:120px;bottom:30px;transform:rotate(10deg)}
.th-tile2 svg{width:130px;height:130px}
.land .th-tile2{right:40px;bottom:120px}
/* ui card */
.th-ui{background:#fff;border-radius:40px;padding:40px;width:100%;max-width:820px;box-shadow:var(--sh);transform:rotate(-3deg);color:#111113}
.th-uih{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:700;color:#8A8A84;margin-bottom:30px}
.th-uih i{width:18px;height:18px;border-radius:50%;background:#E3E3DE}
.th-uih span{margin-left:12px}
.th-uik{display:flex;align-items:flex-end;justify-content:space-between}
.th-uik small{display:block;font-size:30px;color:#8A8A84;font-weight:600}
.th-uik b{font-size:110px;letter-spacing:-.04em;line-height:1}
.th-pill{color:#fff;font-size:40px;font-weight:800;padding:10px 24px;border-radius:999px}
.th-bars{display:flex;align-items:flex-end;gap:18px;height:240px;margin-top:34px}
.th-bars i{flex:1;border-radius:14px 14px 6px 6px;background:#E6E6E1}
/* number */
.th-big{font-size:430px;font-weight:800;letter-spacing:-.06em;line-height:.85}
.land .th-num .th-big{font-size:400px}
.th-mk{display:block}
/* split */
.th-ly-split{padding:0!important;gap:0!important}
.th-sp{position:absolute;inset:0;display:flex;flex-direction:column}
.land .th-sp{flex-direction:row}
.th-bf,.th-af{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:80px 90px}
.th-bf{background:#DADAD4;color:#6F6F68}
.th-af{color:#fff}
.th-lab{align-self:flex-start;font-size:44px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:#fff;color:#111113;padding:10px 26px;border-radius:14px}
.th-bf .th-lab{background:#111113;color:#fff}
.th-row{display:flex;align-items:center;gap:20px;font-size:64px;font-weight:800;letter-spacing:-.03em}
.th-row svg{width:62px;height:62px;stroke-width:3}
.th-bf .th-row{text-decoration:line-through;text-decoration-thickness:6px}
.th-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);background:#111113;color:#fff;font-size:88px;font-weight:800;letter-spacing:-.04em;padding:22px 44px;border-radius:26px;white-space:nowrap}
.land .th-mid{font-size:100px;top:90px;transform:translate(-50%,0) rotate(-3deg)}
.land .th-bf,.land .th-af{padding-top:230px}
/* face */
.th-fv{align-items:flex-end}
.th-face{width:100%;max-width:760px;height:auto;display:block}
.land .th-face{max-width:720px;margin-bottom:-80px}
.th-face{margin-bottom:-300px}
.land .th-fv .th-face{margin-bottom:-80px}
/* annotation */
.th-ui2{transform:none;max-width:760px}
.th-deal{display:flex;align-items:center;gap:20px;font-size:40px;font-weight:700;padding:18px 0;border-bottom:2px solid #EEEEEA}
.th-deal b{margin-left:auto}
.th-av{width:64px;height:64px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:30px}
.th-btns{display:flex;gap:18px;justify-content:flex-end;margin-top:34px}
.th-btns span{font-size:34px;font-weight:800;padding:20px 30px;border-radius:18px;background:#EFEFEB}
.th-btns .th-go{color:#fff}
.th-ann{position:absolute;left:50%;top:50%;width:900px;height:600px;margin:-300px 0 0 -450px;pointer-events:none;overflow:visible}
/* accent */
.th-ul{position:relative;display:inline-block}
.th-ul::after{content:'';position:absolute;left:0;right:0;bottom:-.02em;height:.12em;background:var(--u);border-radius:.06em}
.th-ring{width:460px;height:460px;border-radius:50%;border:18px solid;display:flex;align-items:center;justify-content:center}
.land .th-ring{width:520px;height:520px}
/* dark premium */
.th-ly-dark .th-t{font-weight:700;font-size:130px;letter-spacing:-.035em}
.land .th-ly-dark .th-t{font-size:124px}
.th-k2{display:flex;align-items:center;gap:22px;font-size:44px;font-weight:700;margin-bottom:34px}
.th-code{background:#17181C;border:2px solid #26272D;border-radius:32px;padding:40px 44px;font:600 52px/1.7 'JetBrains Mono',monospace;color:#F4F4F2;width:100%;max-width:900px}
.th-code svg{width:40px;height:40px;vertical-align:-6px;stroke-width:3}
.th-mu{color:#6E6F76}
/* versus */
.th-vsw{gap:40px}
.th-vt{display:flex;flex-direction:column;align-items:center;gap:26px;background:var(--card);border-radius:44px;padding:60px 30px;width:440px}
.th-vt b{font-size:52px;font-weight:800;letter-spacing:-.02em}
.th-sq{width:180px;height:180px;border-radius:36px;color:#fff;display:flex;align-items:center;justify-content:center}
.th-sq svg{width:90px;height:90px}
.th-vsd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:62px;font-weight:800;color:#111113;border:10px solid var(--bg);z-index:2}
.land .th-vsw{flex-direction:column;gap:40px}
.land .th-vt{flex-direction:row;width:640px;padding:36px 40px}
/* listicle */
.th-lst{display:flex;align-items:center;gap:40px}
.th-seven{font-size:560px}
.land .th-lst .th-seven{font-size:620px}
.th-lst .th-t{font-size:118px}
.land .th-lst .th-t{font-size:124px}
.th-icons{display:grid;grid-template-columns:repeat(3,180px);gap:28px;align-content:center;justify-content:center}
.land .th-icons{grid-template-columns:repeat(2,170px)}
.th-icons span{height:180px;border-radius:44px;color:#fff;display:flex;align-items:center;justify-content:center}
.land .th-icons span{height:170px}
.th-icons svg{width:90px;height:90px}
/* question */
.th-q{position:absolute;right:20px;top:-40px;font-size:420px;font-weight:800;line-height:1;transform:rotate(12deg)}
.land .th-q{right:-20px;top:-10px}
/* tutorial */
.th-time{display:inline-flex;align-items:center;gap:14px;font-size:54px;font-weight:800;color:#111113;padding:14px 30px;border-radius:999px;margin-bottom:34px}
.th-time svg{width:54px;height:54px}
.th-steps{flex-direction:column;align-items:stretch;gap:26px;justify-content:center}
.th-st{display:flex;align-items:center;gap:30px;background:var(--card);border-radius:30px;padding:30px 36px;font-size:56px;font-weight:800;letter-spacing:-.02em}
.th-st b{width:88px;height:88px;border-radius:24px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:50px;flex:none}
.th-cur{position:absolute;right:60px;bottom:0;color:#111113}
.th-cur svg{width:110px;height:110px;fill:#fff;stroke-width:1.6}