/* logos: one tile size for every client; each mark is sized by its shape so wide wordmarks, standard logos and square marks look equally weighted */
.track span { width:229px; height:94px; padding:12px 18px; border-radius:18px; }
.track img { width:auto; height:auto; max-width:100%; object-fit:contain; }
.track img.w { max-height:47px; } .track img.m { max-height:60px; max-width:166px; } .track img.sq { max-height:73px; max-width:83px; }
.track span.dk { padding:10px 16px; }
/* review fixes: readable text and comfortable phone tap sizes */
.talk .lead { color:#fff; } .talk .kicker { color:#fff !important; } .talk .mail-copy { background:rgba(5,10,28,.26); } .mail-copy button { color:#1a3fd0; }
:root[data-theme="light"] .g-chip:not(.warn), :root[data-theme="light"] .g-verdict:not(.warn) b { color:#0a7350; } :root[data-theme="light"] .g-chip.warn, :root[data-theme="light"] .g-verdict.warn b { color:#8f5400; }
@media (max-width:640px) { .ftr ul { gap:2px; } .ftr a, .crumb a, .arrow-link { display:inline-flex; align-items:center; min-height:36px; } .ftr .brand { min-height:0; } }
:root{--s-awpoolpros:url(../../img/gen/1ec49b50c7a3.jpg);--s-onlyfreshfood:url(../../img/gen/9c19208b6383.jpg);--s-sb1:url(../../img/gen/be4cd16c488f.jpg);--s-sb2:url(../../img/gen/cce85b7c9bd4.jpg);}
/* ================= SERVICES PAGE ================= */
@keyframes bxIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.sv-c { position:relative; border-radius:24px; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08); }
.sv-tg { display:flex; flex-wrap:wrap; gap:6px; } .sv-tg i { font-style:normal; font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; background:color-mix(in srgb, var(--blue) 9%, transparent); color:var(--at); }
.ab-dh .hdr.solid { color:#fff; border-bottom-color:rgba(157,180,255,.14); box-shadow:none; } .ab-dh .hdr.solid::before { background:rgba(5,10,28,.72); box-shadow:none; } .ab-dh .hdr.solid .brand small { color:var(--mist); }
@media (min-width:1001px) { .band { padding-block:128px; } .sec-head { margin-bottom:64px; } }

/* hero */
.sv-hero h1 { font-size:clamp(46px, 5.6vw, 82px); line-height:1; } .sv-hero h1 em { display:block; }
.sv-or { --r:208px; position:relative; width:100%; max-width:540px; aspect-ratio:1; justify-self:center; }
.sv-ring { position:absolute; left:50%; top:50%; width:calc(var(--r) * 2); height:calc(var(--r) * 2); margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius:50%; border:1px dashed rgba(157,180,255,.3); }
.sv-lens { position:absolute; left:50%; top:50%; width:270px; height:270px; margin:-135px 0 0 -135px; display:grid; place-content:center; justify-items:center; gap:6px; padding:26px; text-align:center; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 46%, rgba(255,255,255,.06)), rgba(16,26,60,.5); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(127,150,255,.18), 0 30px 70px rgba(0,0,0,.35); }
.sv-lens small { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); } .sv-lens b { font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.12; color:#fff; } .sv-lens p { color:var(--mist); font-size:14.5px; line-height:1.4; } .sv-lens a { display:inline-flex; align-items:center; gap:6px; margin-top:4px; color:#fff; font-size:14px; font-weight:600; text-decoration:none; } .sv-lens a svg { width:14px; height:14px; }
.sv-or button { position:absolute; left:50%; top:50%; width:124px; margin:-27px 0 0 -62px; display:grid; justify-items:center; gap:6px; padding:0; border:0; background:none; color:var(--mist); font:600 13px/1.2 var(--body); text-align:center; cursor:pointer; transform:rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)); transition:color .3s; }
.sv-or button svg { width:54px; height:54px; padding:15px; border-radius:50%; background:rgba(20,32,78,.85); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(157,180,255,.25); transition:background .35s, box-shadow .35s; }
.sv-or button:hover, .sv-or button[aria-pressed="true"] { color:#fff; } .sv-or button[aria-pressed="true"] svg { background:var(--blue); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 6px rgba(41,90,255,.25), 0 12px 30px rgba(41,90,255,.5); }

/* where to start */
.sv-fi { position:relative; }
.sv-f { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:30px; align-items:stretch; }
.sv-fl { position:relative; display:grid; gap:2px; align-content:center; }
.sv-fb { position:absolute; left:0; top:0; width:3px; height:46px; border-radius:3px; background:var(--blue); will-change:transform; } .sv-fw:not(.pin) .sv-fb { transition:transform .4s var(--ease); }
.sv-fl button { height:50px; padding:0 14px 0 18px; border:0; border-radius:12px; background:none; color:var(--muted); font:500 16.5px/1.2 var(--body); text-align:left; cursor:pointer; transition:color .25s; }
.sv-fl button:hover { color:var(--ink); } .sv-fl button[aria-pressed="true"] { color:var(--ink); font-weight:600; }
.sv-fp { display:grid; overflow:hidden; } .sv-fn { grid-area:1 / 1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:24px; padding:36px 40px; visibility:hidden; } .sv-fw:not(.pin) .sv-fn.on { visibility:visible; animation:bxIn .45s var(--ease) both; } .sv-fw.pin .sv-fn { will-change:transform, opacity; pointer-events:none; } .sv-fw.pin .sv-fn.on { pointer-events:auto; }
.sv-fh { display:grid; gap:9px; } .sv-fh small { font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--at); } .sv-fh h3 { font-size:clamp(28px, 3vw, 38px); } .sv-fh p { color:var(--muted); font-size:17px; max-width:58ch; }
.sv-fg { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; padding-top:22px; border-top:1px solid var(--line); } .sv-fg b { display:block; margin-bottom:12px; font-size:14px; font-weight:600; } .sv-fg ul, .sv-fg ol { list-style:none; margin:0; padding:0; display:grid; gap:10px; } .sv-fg li { display:flex; gap:10px; color:var(--muted); font-size:15px; line-height:1.4; } .sv-fg ul svg { flex:none; width:16px; height:16px; margin-top:2px; color:var(--at); }
.sv-fg ol { counter-reset:s; } .sv-fg ol li { counter-increment:s; } .sv-fg ol li::before { content:counter(s); flex:none; width:20px; height:20px; margin-top:0; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--at); font-size:11.5px; font-weight:700; }
.sv-fw.pin .sv-fi { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto minmax(0,auto); align-content:center; gap:32px; padding:92px 0 24px; } .sv-fw.pin { height:310vh; } #sv-find.pin { padding-block:0; } .sv-fw.pin .sec-head { margin:0; }

/* five services */
.sv-w { position:relative; z-index:1; } .sv-w:not(.pin) .sv-wr, .sv-w:not(.pin) .sv-pan { display:none; } .sv-w:not(.pin) .sv-ws { display:grid; gap:56px; }
#sv-svc.pin { padding-block:0; } .sv-w.pin { height:380vh; } .sv-w.pin .sv-wi { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto minmax(0,680px); align-content:center; gap:18px; padding:92px 0 24px; }
.sv-w.pin .sv-wt { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; } .sv-w.pin .sec-head { display:block; margin:0; } .sv-w.pin .sec-head .lead { display:none; } .sv-w.pin .sec-head > div { gap:10px !important; } .sv-w.pin .sec-head h2 { font-size:clamp(26px, 2.7vw, 38px); line-height:1.1; }
.sv-wr { flex:none; display:flex; gap:10px; } .sv-wr button { display:grid; gap:9px; width:84px; padding:6px 0 4px; border:0; background:none; color:var(--muted); font:600 13.5px/1 var(--body); text-align:left; cursor:pointer; transition:color .25s; } .sv-wr button:hover, .sv-wr button[aria-pressed="true"] { color:var(--ink); } .sv-wr i { display:block; height:3px; border-radius:3px; overflow:hidden; background:var(--line); } .sv-wr u { display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; will-change:transform; }
.sv-ws { position:relative; min-height:0; } .sv-pan { position:absolute; top:0; bottom:0; right:0; width:calc(55% - 24.2px); border-radius:28px; overflow:hidden; background:linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .sv-pan i { position:absolute; left:-20%; top:-30%; width:120%; height:110%; background:radial-gradient(50% 50% at 50% 50%, rgba(41,90,255,.42), transparent 100%); will-change:transform; }
.sv-sl { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:center; } .sv-w.pin .sv-sl { position:absolute; inset:0; visibility:hidden; pointer-events:none; clip-path:inset(0 0 0 -70px round 28px); } .sv-w.pin .sv-sl.on { pointer-events:auto; } .sv-w.pin .sv-sc, .sv-w.pin .sv-m { will-change:transform, opacity; }
.sv-sc { display:grid; gap:14px; justify-items:start; } .sv-sc h3 { font-size:clamp(28px, 3.1vw, 42px); line-height:1.06; letter-spacing:-.035em; } .sv-sc > p { color:var(--muted); font-size:17px; line-height:1.55; }
.sv-pts { list-style:none; margin:2px 0 4px; padding:0; display:grid; gap:9px; } .sv-pts li { display:flex; gap:10px; font-size:15.5px; line-height:1.35; color:var(--ink); } .sv-pts svg { flex:none; width:17px; height:17px; margin-top:1px; color:var(--at); }
.sv-ca { margin-top:6px; }
.sv-m { position:relative; display:grid; place-items:center; height:100%; min-height:480px; padding:26px; border-radius:28px; background:radial-gradient(70% 80% at 60% 20%, rgba(41,90,255,.4), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); overflow:hidden; }
.sv-w.pin .sv-m { min-height:0; background:none; box-shadow:none; overflow:visible; }
.sv-ex { position:absolute; right:18px; top:18px; z-index:3; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(157,180,255,.16); color:#dbe4ff; }
/* chat */
.sv-chat { width:min(100%, 400px); display:grid; gap:10px; padding:18px; border-radius:22px; background:#fff; color:#0a0f1f; box-shadow:0 26px 60px rgba(0,0,0,.4); min-height:330px; align-content:start; }
.sv-ch { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #eef0f6; } .sv-ch > span { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--blue); color:#fff; } .sv-ch svg { width:18px; height:18px; } .sv-ch b { font-size:15px; } .sv-ch small { display:block; font-weight:500; font-size:12px; color:#0a7350; } .sv-ch em { margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:#e3e9ff; color:#1638c9; }
.sv-msg { max-width:82%; padding:10px 14px; border-radius:15px; font-size:14.5px; line-height:1.4; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s var(--ease); } .sv-msg.me { justify-self:end; background:var(--blue); color:#fff; border-bottom-right-radius:4px; } .sv-msg.ai { background:#eff2f9; border-bottom-left-radius:4px; }
.sv-typ { display:none; gap:4px; padding:12px 14px; width:max-content; border-radius:15px; background:#eff2f9; } .sv-typ i { width:7px; height:7px; border-radius:50%; background:#9aa3b8; animation:svT 1s infinite; } .sv-typ i:nth-child(2) { animation-delay:.15s; } .sv-typ i:nth-child(3) { animation-delay:.3s; } @keyframes svT { 40% { transform:translateY(-4px); } }
.sv-act { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:#0a7350; opacity:0; transition:opacity .35s; } .sv-act svg { width:14px; height:14px; }
.sv-chat[data-s="1"] .sv-msg.me:not(.l), .sv-chat[data-s="2"] .sv-msg.me:not(.l), .sv-chat[data-s="3"] .sv-msg.me:not(.l), .sv-chat[data-s="4"] .sv-msg.me:not(.l), .sv-chat[data-s="5"] .sv-msg.me:not(.l), .sv-chat[data-s="3"] .sv-msg.ai, .sv-chat[data-s="4"] .sv-msg.ai, .sv-chat[data-s="5"] .sv-msg.ai, .sv-chat[data-s="4"] .sv-msg.l, .sv-chat[data-s="5"] .sv-msg.l { opacity:1; transform:none; } .sv-chat[data-s="2"] .sv-typ { display:flex; } .sv-chat[data-s="3"] .sv-act, .sv-chat[data-s="4"] .sv-act, .sv-chat[data-s="5"] .sv-act { opacity:1; }
/* phones */
.sv-ph { position:absolute; width:216px; height:min(440px, calc(100vh - 300px)); padding:6px; border-radius:36px; background:#0a0f1f; box-shadow:0 0 0 1px rgba(157,180,255,.25), 0 30px 60px rgba(0,0,0,.5); } .sv-ph.a { left:13%; top:50%; transform:translateY(-54%) rotate(-3deg); z-index:2; } .sv-ph.b { right:12%; top:50%; transform:translateY(-44%) rotate(3deg); }
.sv-scr { height:100%; display:grid; gap:9px; align-content:start; padding:34px 16px 16px; border-radius:30px; background:#fff; color:#0a0f1f; overflow:hidden; } .sv-scr > small { font-size:12.5px; color:#596175; } .sv-scr > b { font-family:var(--display); font-size:20px; line-height:1.15; letter-spacing:-.02em; }
.sv-scr.blue > small { color:#0a7350; font-weight:600; } .sv-map { position:relative; display:block; height:190px; border-radius:16px; background:linear-gradient(120deg, transparent 47%, #dbe3f7 47% 49%, transparent 49%), linear-gradient(30deg, transparent 58%, #dbe3f7 58% 60%, transparent 60%), #eef2fb; } .sv-map u { position:absolute; left:50%; top:46%; width:16px; height:16px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 6px rgba(41,90,255,.2); }
.sv-rd { display:flex; gap:10px; align-items:center; padding:10px; border-radius:13px; background:#f3f5fb; } .sv-rd > i { width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg, #5b82ff, #295aff); } .sv-rd b { display:block; font-size:13px; } .sv-rd small { font-size:11.5px; color:#596175; }
.sv-rv { display:grid; gap:4px; padding:14px; border-radius:15px; background:linear-gradient(165deg, var(--night-3), var(--night)); color:#fff; } .sv-rv small { font-size:12px; color:var(--mist); } .sv-rv b { font-family:var(--display); font-size:30px; letter-spacing:-.03em; } .sv-sp { display:flex; align-items:flex-end; gap:6px; height:130px; margin-top:6px; } .sv-sp i { flex:1; height:var(--h); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, #8fa8ff, #295aff); transform-origin:bottom; } .sv-sl.on .sv-sp i { animation:svBar .7s var(--ease) both; } @keyframes svBar { from { transform:scaleY(0); } }
/* web app */
.sv-app, .sv-store { width:100%; max-width:520px; border-radius:16px; overflow:hidden; background:#fff; color:#0a0f1f; box-shadow:0 26px 60px rgba(0,0,0,.45); }
.sv-bar { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#f3f5fb; border-bottom:1px solid #e7eaf3; } .sv-bar span { display:flex; gap:5px; } .sv-bar i { width:9px; height:9px; border-radius:50%; background:#cfd5e4; } .sv-bar em { font-style:normal; font-size:12px; color:#596175; }
.sv-ab { display:grid; grid-template-columns:118px minmax(0,1fr); } .sv-sd { display:grid; gap:3px; align-content:start; padding:14px 10px; background:#0d1633; color:var(--mist); font-size:12.5px; } .sv-sd b { padding:0 8px 10px; color:#fff; font-family:var(--display); font-size:14.5px; } .sv-sd span { padding:7px 8px; border-radius:8px; } .sv-sd span.on { background:var(--blue); color:#fff; }
.sv-mn { display:grid; gap:10px; padding:14px; } .sv-mh { display:flex; justify-content:space-between; align-items:baseline; } .sv-mh b { font-family:var(--display); font-size:17px; } .sv-mh small { font-size:12px; color:#596175; }
.sv-ks { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px; } .sv-ks span { display:grid; gap:1px; padding:9px 10px; border-radius:11px; background:#f3f5fb; } .sv-ks small { font-size:11px; color:#596175; } .sv-ks b { font-family:var(--display); font-size:18px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .sv-ks em { font-style:normal; font-size:11px; font-weight:700; color:#0a7350; }
.sv-ln { width:100%; height:92px; } .sv-ln path { stroke:#295aff; stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
/* store */
.sv-sn { display:flex; align-items:center; gap:14px; padding:11px 14px; font-size:12.5px; color:#44464f; } .sv-sn b { margin-right:auto; font-family:var(--display); font-size:15px; color:#0a0f1f; } .sv-sn u { position:relative; display:grid; place-items:center; width:30px; height:30px; text-decoration:none; } .sv-sn svg { width:19px; height:19px; } .sv-sn u i { position:absolute; right:-2px; top:-2px; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:700; background:var(--blue); color:#fff; }
.sv-sh { margin:0 12px; padding:18px; border-radius:14px; background:linear-gradient(150deg, #fbe3ea, #f6c9d7 55%, #efb0c6); } .sv-sh h4 { font-family:var(--display); font-size:22px; line-height:1.1; letter-spacing:-.025em; } .sv-sh p { margin:4px 0 10px; font-size:12.5px; color:#44464f; } .sv-sh span { display:inline-block; padding:7px 13px; border-radius:999px; background:#0a0f1f; color:#fff; font-size:12px; font-weight:600; }
.sv-pr { padding:12px; } .sv-pr > small { display:block; margin-bottom:7px; font-size:12px; font-weight:600; } .sv-pr > div { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px; } .sv-pr span { display:grid; gap:2px; } .sv-pr span > i { display:block; height:74px; border-radius:10px; background:radial-gradient(circle at 50% 40%, hsl(var(--h) 80% 86%), hsl(var(--h) 55% 62%)); } .sv-pr b { font-size:12.5px; } .sv-pr span > small { font-size:12px; color:#596175; }
.sv-pr button { margin-top:3px; padding:7px 4px; border:1.5px solid #e3e6ee; border-radius:9px; background:#fff; color:#0a0f1f; font:600 12px/1 var(--body); cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .sv-pr button:hover { border-color:var(--blue); } .sv-pr button.added { background:var(--blue); border-color:var(--blue); color:#fff; }
/* marketing */
.sv-mk { width:100%; max-width:500px; display:grid; gap:10px; padding:18px; border-radius:18px; background:#fff; color:#0a0f1f; box-shadow:0 26px 60px rgba(0,0,0,.45); } .sv-mkh { display:flex; justify-content:space-between; align-items:center; } .sv-mkh b { font-family:var(--display); font-size:17px; } .sv-mkh em { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:#e3e9ff; color:#1638c9; }
.sv-mkt { display:flex; gap:3px; padding:3px; width:max-content; border-radius:999px; background:#eff2f9; } .sv-mkt button { border:0; padding:7px 14px; border-radius:999px; background:none; color:#44464f; font:600 12.5px/1 var(--body); cursor:pointer; } .sv-mkt button[aria-pressed="true"] { background:var(--blue); color:#fff; }

/* one team */
.sv-o { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.sv-oc { display:grid; grid-template-rows:auto auto 1fr; gap:24px; padding:32px; border-radius:26px; background:rgba(16,26,60,.42); border:1px solid rgba(157,180,255,.14); } .sv-oc.hot { background:radial-gradient(90% 60% at 50% 22%, rgba(41,90,255,.26), transparent 75%), rgba(20,34,84,.6); border-color:rgba(143,168,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 30px 70px rgba(4,9,26,.4); }
.sv-oh { display:grid; gap:6px; } .sv-oh small { font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); } .sv-oc.hot .sv-oh small { color:var(--sky); } .sv-oh h3 { font-size:clamp(26px, 2.6vw, 34px); color:#fff; }
.sv-od { position:relative; height:230px; } .sv-od svg { position:absolute; inset:0; width:100%; height:100%; } .sv-od path { stroke:rgba(157,180,255,.3); stroke-width:1.3; vector-effect:non-scaling-stroke; } .hot .sv-od path { stroke:#8fa8ff; stroke-width:1.7; stroke-dasharray:5 7; animation:svFlow 1.2s linear infinite; } @keyframes svFlow { to { stroke-dashoffset:-12; } }
.sv-od .n { position:absolute; z-index:1; transform:translate(-50%,-50%); white-space:nowrap; font-size:13.5px; font-weight:600; } .sv-od .you { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#fff; color:#0a0f1f; font-size:14px; }
.sv-od .hub { padding:11px 16px; border-radius:999px; background:var(--blue); color:#fff; font-size:14px; box-shadow:0 0 0 7px rgba(41,90,255,.22), 0 14px 34px rgba(41,90,255,.5); }
.sv-od .s { padding:6px 12px; border-radius:999px; color:var(--mist); background:#101a3c; box-shadow:inset 0 0 0 1px rgba(157,180,255,.2); font-weight:500; } .hot .sv-od .s { color:#fff; box-shadow:inset 0 0 0 1px rgba(143,168,255,.5); }
.sv-ol { list-style:none; margin:0; padding:0; display:grid; align-content:start; } .sv-ol li { display:grid; gap:4px; padding:16px 0; border-top:1px solid var(--night-line); } .sv-ol li:last-child { padding-bottom:0; } .sv-ol b { font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.015em; color:#fff; } .sv-ol p { color:var(--mist); font-size:15.5px; line-height:1.45; }

/* engagement */
.sv-price { flex-wrap:nowrap; background:var(--glass-bg); border-color:var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring); } .sv-price .price-l { flex:1 1 auto; min-width:0; } .sv-price .big { flex:none; white-space:nowrap; font-size:clamp(23px, 2.2vw, 30px); letter-spacing:-.02em; } .sv-price .price-l p { max-width:46ch; } .sv-price .btn { flex:none; }

@media (max-width:1180px) { .sv-sl { gap:28px; } .sv-ph { width:190px; height:390px; } .sv-ph.a { left:6%; } .sv-ph.b { right:5%; } .sv-map { height:150px; } .sv-sp { height:100px; } }
@media (max-width:1100px) { .sv-price .price-l { flex-direction:column; align-items:flex-start; gap:8px; } .sv-or { --r:176px; } .sv-lens { width:224px; height:224px; margin:-112px 0 0 -112px; padding:22px; } .sv-lens b { font-size:20px; } .sv-lens p { font-size:13.5px; } }
@media (max-width:1000px) {
  .sv-f, .sv-sl, .sv-o { grid-template-columns:1fr; }
  .sv-or { --r:190px; margin-top:20px; } .sv-lens { width:240px; height:240px; margin:-120px 0 0 -120px; }
  .sv-m { min-height:470px; }
}
@media (max-width:760px) { .sv-price { flex-wrap:wrap; } .sv-price .btn { width:100%; justify-content:center; } .sv-price .big { white-space:normal; } }
@media (max-width:640px) {
  .sv-or { --r:0px; aspect-ratio:auto; display:grid; gap:18px; } .sv-ring { display:none; } .sv-lens { position:static; width:min(100%, 260px); height:auto; aspect-ratio:1; margin:0 auto; } .sv-or > [role="group"] { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 4px; } .sv-or button { position:static; width:auto; margin:0; transform:none; font-size:12.5px; }
  .sv-fn { padding:24px 22px; } .sv-fg { grid-template-columns:1fr; gap:20px; } .sv-oc { padding:22px; } .sv-fh h3 { font-size:26px; } .sv-m { min-height:0; padding:16px; } .sv-ph, .sv-ph.a { position:relative; left:auto !important; right:auto !important; top:auto; width:200px; height:400px; transform:none !important; } .sv-ph.b { display:none; } .sv-m:has(.sv-ph) { min-height:440px; }
  .sv-ab { grid-template-columns:1fr; } .sv-sd { display:none; }   .sv-od { height:230px; } .sv-od .n { font-size:11.5px; } .sv-od .s { padding:5px 8px; } .sv-od .you { width:44px; height:44px; font-size:12px; } .sv-od .hub { padding:8px 9px; font-size:11.5px; box-shadow:0 0 0 4px rgba(41,90,255,.22); }
}
@media (min-height:821px) { .sv-w.pin .sv-m > .sv-chat { zoom:1.2; } .sv-w.pin .sv-m > .sv-app, .sv-w.pin .sv-m > .sv-mk { zoom:1.1; } }
@media (max-height:800px) { .sv-w.pin .sec-head .kicker { display:none; } .sv-w.pin .sv-sc { gap:10px; } .sv-w.pin .sv-sc h3 { font-size:clamp(26px, 2.6vw, 34px); } .sv-w.pin .sv-sc > p { font-size:16px; line-height:1.45; } .sv-w.pin .sv-pts { gap:6px; } .sv-w.pin .sv-pts li { font-size:14.5px; } .sv-w.pin .sv-tg i { font-size:12.5px; padding:5px 10px; } .sv-w.pin .btn { height:46px; } .sv-w.pin .sv-map { height:120px; } .sv-w.pin .sv-sp { height:76px; } .sv-w.pin .sv-m > .sv-store, .sv-w.pin .sv-m > .sv-chat, .sv-w.pin .sv-m > .sv-app, .sv-w.pin .sv-m > .sv-mk { zoom:.84; }
  .sv-fw.pin .sec-head h2 { font-size:clamp(32px, 3.4vw, 44px); } .sv-fw.pin .sec-head .kicker, .sv-fw.pin .sec-head .lead { display:none; } .sv-fw.pin .sv-fi { gap:14px; } .sv-fw.pin .sv-fn { gap:16px; padding:24px 32px; } .sv-fw.pin .sv-fg { padding-top:16px; } .sv-fw.pin .sv-fh h3 { font-size:28px; } .sv-fw.pin .sv-fg li { font-size:14.5px; } .sv-fw.pin .sv-fg ul, .sv-fw.pin .sv-fg ol { gap:7px; } }
@media (prefers-reduced-motion: reduce) { .sv-fn.on, .sv-sp i, .hot .sv-od path { animation:none !important; } .sv-typ i { animation:none; } }
.wa-chrome { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#eef0f6; border-bottom:1px solid #e1e4ee; }
.wa-chrome > i { width:10px; height:10px; border-radius:50%; background:#ff5f57; } .wa-chrome > i:nth-child(2) { background:#febc2e; } .wa-chrome > i:nth-child(3) { background:#28c840; }
.wa-url { margin-left:10px; flex:1; min-width:0; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9px; background:#fff; font-size:12px; color:#596175; white-space:nowrap; overflow:hidden; }
.wa-url svg { width:12px; height:12px; color:#1fbf86; flex:none; } .wa-url b { color:#0a0f1f; font-weight:600; }
.wa-chrome.sm { padding:9px 12px; } .wa-chrome.sm > i { width:8px; height:8px; } .wa-chrome.sm .wa-url { padding:4px 10px; font-size:11px; }
.aw-art.kl { background:radial-gradient(circle at 30% 20%, rgba(255,190,90,.5), transparent 55%), linear-gradient(150deg, #ffb547, #e8890c 60%, #b35f00); }
.aw-art.vn { background:radial-gradient(circle at 75% 20%, rgba(120,220,200,.45), transparent 55%), linear-gradient(150deg, #138a7a, #0b5e57 60%, #063b37); }
.aw-art.pt { background:radial-gradient(circle at 70% 25%, rgba(210,255,80,.4), transparent 50%), linear-gradient(150deg, #1d3b2a, #0d1f16); }
.aw-brw { width:100%; max-width:440px; border-radius:16px; overflow:hidden; background:#f6f7fb; color:#0a0f1f; box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 34px 70px rgba(0,0,0,.4); transform:perspective(1400px) rotateY(-8deg) rotateX(3deg); transition:transform .8s var(--ease); }
.aw-sc { display:grid; gap:12px; padding:18px; min-height:280px; align-content:start; }
.kl-h, .vn-h { display:flex; justify-content:space-between; align-items:center; } .kl-h b, .vn-h b { font-family:var(--display); font-size:19px; }
.kl-pv { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; background:#fff3dc; color:#7f4a00; } .kl-pv svg { width:11px; height:11px; }
.kl-ring { position:relative; height:160px; border-radius:16px; background:#fff; box-shadow:0 3px 10px rgba(10,15,31,.05); display:grid; place-items:center; }
.kl-ring i { position:absolute; width:38px; height:38px; border-radius:50%; background:hsl(calc(30 + var(--a) * 50) 80% 62%); border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.12); left:calc(50% - 19px + cos(calc(var(--a) * 72deg - 90deg)) * 118px); top:calc(50% - 19px + sin(calc(var(--a) * 72deg - 90deg)) * 54px); animation:klBob 4s ease-in-out infinite; animation-delay:calc(var(--a) * -.8s); }
@keyframes klBob { 50% { translate:0 -5px; } }
.kl-ring span { position:relative; z-index:1; max-width:130px; text-align:center; font-size:12px; } .kl-ring span b { font-weight:600; }
.kl-hi { justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:#e8890c; color:#fff; font-size:13px; font-weight:600; } .kl-hi svg { width:15px; height:15px; }
.vn-h small { font-size:11.5px; color:#596175; padding:4px 10px; border-radius:8px; background:#fff; }
.vn-rows { display:grid; gap:7px; }
.vn-rows span { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:#fff; font-size:13px; box-shadow:0 3px 10px rgba(10,15,31,.04); }
.vn-rows em { font-style:normal; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; } .vn-rows em.ok { background:#dcf7ec; color:#0a6a47; } .vn-rows em.due { background:#fff3dc; color:#7f4a00; } .vn-rows em.rev { background:#e3e9ff; color:#1638c9; }
.pt-vid { position:relative; height:140px; border-radius:14px; background:radial-gradient(circle at 70% 40%, rgba(210,255,80,.35), transparent 50%), linear-gradient(150deg, #1d3b2a, #0d1f16); display:grid; place-items:center; color:#fff; }
.pt-play { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.95); position:relative; } .pt-play::after { content:""; position:absolute; left:18px; top:14px; border-left:14px solid #1d3b2a; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.pt-vid small { position:absolute; left:12px; bottom:10px; font-size:11.5px; font-weight:600; }
.pt-ls { display:grid; gap:6px; } .pt-ls span { display:flex; justify-content:space-between; padding:9px 12px; border-radius:11px; background:#fff; font-size:12.5px; } .pt-ls em { font-style:normal; font-size:11px; font-weight:600; } .pt-ls .done em { color:#0a7350; } .pt-ls .now { box-shadow:inset 3px 0 0 #7cb518; } .pt-ls .now em { color:#4d7c0f; }
.pt-bk { justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:#1d3b2a; color:#fff; font-size:12.5px; font-weight:600; } .pt-bk svg { width:14px; height:14px; }
.aw-art { position:relative; height:380px; overflow:hidden; display:flex; justify-content:center; align-items:flex-end; gap:20px; padding:0 20px; }
.aw-art.nom { background:radial-gradient(circle at 25% 15%, rgba(255,200,220,.55), transparent 50%), radial-gradient(circle at 80% 90%, rgba(255,120,160,.5), transparent 55%), linear-gradient(150deg, #ff6f9c, #c2185b 65%, #8e0e45); }
.aw-art.sai { background:radial-gradient(circle at 70% 18%, rgba(250,210,1,.5), transparent 45%), radial-gradient(circle at 20% 90%, rgba(91,130,255,.35), transparent 55%), linear-gradient(150deg, #23232a, #0d0d10); }
.aw-ph { position:relative; flex:none; width:196px; aspect-ratio:9 / 19; margin-bottom:-90px; padding:3.5px; border-radius:36px; background:linear-gradient(150deg, #6a7082, #1a1d28 35%, #0a0c14 65%, #474c5e); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.5), 0 34px 70px rgba(0,0,0,.45); transform:translateY(16px) rotate(-3deg); transition:transform .8s var(--ease); }
.aw-ph.sm { width:160px; margin-bottom:-120px; transform:translateY(40px) rotate(4deg); }
.aw-ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:32.5px; background:#fff; }
.aw-art.nom .aw-ph { aspect-ratio:272 / 524; } .aw-art.sai .aw-ph { aspect-ratio:351 / 760; }
.aw-art.sai .aw-tap { left:28%; top:31%; }
/* ================= WORK PAGE ================= */
@keyframes bxIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ab-dh .hdr.solid { color:#fff; border-bottom-color:rgba(157,180,255,.14); box-shadow:none; } .ab-dh .hdr.solid::before { background:rgba(5,10,28,.72); box-shadow:none; } .ab-dh .hdr.solid .brand small { color:var(--mist); }
@media (min-width:1001px) { .band { padding-block:128px; } .sec-head { margin-bottom:64px; } }
.wf-tg { display:flex; flex-wrap:wrap; gap:6px; } .wf-tg i { font-style:normal; font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; background:color-mix(in srgb, var(--blue) 9%, transparent); color:var(--at); } .wf-tg i.dev { background:rgba(242,163,58,.16); color:#8f5400; }

/* hero: the real work, moving */
.wh-hero { overflow:hidden; } .wh-hero h1 em { display:block; }
.wh-wall { position:relative; height:660px; margin-block:-50px; margin-right:-130px; -webkit-mask-image:linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent); mask-image:linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
.wh-in { position:absolute; inset:-60px -40px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; transform:rotate(5deg); }
.wh-col { overflow:visible; } .wh-tr { display:grid; gap:16px; animation:whUp 64s linear infinite; will-change:transform; } .wh-col:nth-child(2) .wh-tr { animation-direction:reverse; animation-duration:76s; margin-top:-40px; } .wh-col:nth-child(3) .wh-tr { animation-duration:58s; } .wh-wall.off .wh-tr { animation-play-state:paused; }
@keyframes whUp { to { transform:translateY(calc(-50% - 8px)); } }
.wh-b { display:block; border-radius:13px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(157,180,255,.2), 0 18px 40px rgba(0,0,0,.4); } .wh-b .wa-chrome.sm { padding:7px 9px; gap:5px; } .wh-b .wa-chrome.sm > i { width:6px; height:6px; } .wh-b .wa-url { margin-left:4px; font-size:9.5px; padding:2px 7px; }
.wh-s { display:block; aspect-ratio:4 / 3; background:#eef0f6 var(--img) top center / cover no-repeat; }
.wh-p { display:block; aspect-ratio:351 / 720; border-radius:22px; border:3px solid #10131d; background:#fff var(--img) top center / cover no-repeat; box-shadow:0 0 0 1px rgba(157,180,255,.25), 0 18px 40px rgba(0,0,0,.45); }

/* featured stage */
.wf-w { position:relative; z-index:1; } .wf-w:not(.pin) .wf-wr, .wf-w:not(.pin) .wf-pan { display:none; } .wf-w:not(.pin) .wf-ws { display:grid; gap:56px; }
#wk-feat.pin { padding-block:0; } .wf-w.pin { height:450vh; } .wf-w.pin .wf-wi { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto minmax(0,680px); align-content:center; gap:18px; padding:92px 0 24px; }
.wf-w.pin .wf-wt { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; } .wf-w.pin .sec-head { display:block; margin:0; } .wf-w.pin .sec-head .lead { display:none; } .wf-w.pin .sec-head > div { gap:10px !important; } .wf-w.pin .sec-head h2 { font-size:clamp(26px, 2.7vw, 38px); line-height:1.1; }
.wf-wr { flex:none; display:flex; gap:12px; } .wf-wr button { display:grid; gap:9px; min-width:64px; padding:6px 0 4px; border:0; background:none; color:var(--muted); font:600 13px/1 var(--body); text-align:left; white-space:nowrap; cursor:pointer; transition:color .25s; } .wf-wr button:hover, .wf-wr button[aria-pressed="true"] { color:var(--ink); } .wf-wr i { display:block; height:3px; border-radius:3px; overflow:hidden; background:var(--line); } .wf-wr u { display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; will-change:transform; }
.wf-ws { position:relative; min-height:0; } .wf-pan { position:absolute; inset:0; border-radius:28px; overflow:hidden; background:linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .wf-pan i { position:absolute; left:10%; top:-40%; width:90%; height:130%; background:radial-gradient(50% 50% at 50% 50%, rgba(41,90,255,.42), transparent 100%); will-change:transform; }
.wf-sl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch; border-radius:28px; overflow:hidden; background:radial-gradient(70% 60% at 75% 10%, rgba(41,90,255,.4), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .wf-w.pin .wf-sl { grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); position:absolute; inset:0; visibility:hidden; pointer-events:none; background:none; box-shadow:none; } .wf-w.pin .wf-sl.on { pointer-events:auto; } .wf-w.pin .wf-sc, .wf-w.pin .wf-m { will-change:transform, opacity; }
.wf-sc { display:flex; flex-direction:column; gap:18px; min-width:0; padding:28px; color:#fff; } .wf-w.pin .wf-sc { height:100%; padding:36px 12px 36px 40px; } .wf-sc .wf-tg i { background:rgba(157,180,255,.14); color:#dbe4ff; } .wf-sc .wf-tg i.dev { background:rgba(242,163,58,.18); color:#ffc678; }
.wf-hd { display:flex; justify-content:space-between; align-items:center; gap:12px; } .wf-lg { flex:none; display:flex; align-items:center; justify-content:center; height:52px; min-width:52px; padding:7px 12px; border-radius:15px; background:#fff; box-shadow:0 0 0 1px rgba(10,15,31,.07), 0 10px 24px rgba(41,90,255,.1); } .wf-lg img { max-height:38px; max-width:112px; width:auto; object-fit:contain; } .wf-hd .wf-tg { justify-content:flex-end; }
.wf-sc h3 { color:#fff; font-size:clamp(27px, 2.9vw, 41px); line-height:1.06; letter-spacing:-.035em; } 
.wf-tx { display:grid; padding:4px 22px; border-radius:18px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14), inset 0 1px 0 rgba(255,255,255,.07); } .wf-w.pin .wf-tx { flex:1; min-height:0; align-content:space-evenly; }
.wf-tp { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:15px 0; } .wf-tp + .wf-tp { border-top:1px solid rgba(157,180,255,.14); }
.wf-ic { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(41,90,255,.24); box-shadow:inset 0 0 0 1px rgba(143,168,255,.3); color:#dbe4ff; transition:background .35s, box-shadow .35s, color .35s; } .wf-ic svg { width:18px; height:18px; } .wf-w.pin [data-s="0"] .wf-tp:nth-child(1) .wf-ic, .wf-w.pin [data-s="1"] .wf-tp:nth-child(2) .wf-ic, .wf-w.pin [data-s="2"] .wf-tp:nth-child(3) .wf-ic { background:var(--blue); box-shadow:0 8px 20px rgba(41,90,255,.45); color:#fff; }
.wf-tp b { display:block; color:#fff; font-family:var(--display); font-size:16.5px; font-weight:600; letter-spacing:-.01em; } .wf-tp p { margin-top:2px; color:var(--mist); font-size:15px; line-height:1.45; }
.wf-ft { display:flex; justify-content:space-between; align-items:center; gap:14px; } .wf-ft small { color:var(--mist); font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap; } .wf-ft .wf-tg { flex:0 1 auto; justify-content:flex-end; text-align:right; } .wf-ft .dev { font-size:12px; padding:5px 10px; }
.wf-m { position:relative; display:grid; place-items:center; height:100%; min-height:460px; padding:26px; } .wf-w.pin .wf-m { min-height:0; padding-left:14px; }
.wf-ex { position:absolute; right:18px; top:18px; z-index:3; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(157,180,255,.16); color:#dbe4ff; }
.wf-m .aw-brw { max-width:420px; } .wf-phs.aw-art { width:100%; height:auto; background:none; align-items:center; gap:18px; overflow:visible; } .wf-phs .aw-ph { width:min(200px, calc((100vh - 340px) * .46)); margin:0; transform:rotate(-3deg) translateY(-14px); } .wf-phs .aw-ph.sm { width:min(172px, calc((100vh - 340px) * .4)); margin:0; transform:rotate(4deg) translateY(26px); }

.wf-st { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; display:grid; gap:2px; justify-items:center; width:max-content; max-width:calc(100% - 28px); text-align:center; padding:13px 22px; border-radius:16px; background:rgba(13,22,54,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(157,180,255,.24), 0 20px 44px rgba(0,0,0,.45); } .wf-st b { font-family:var(--display); font-size:clamp(20px, 2vw, 27px); font-weight:600; line-height:1.1; letter-spacing:-.02em; color:#fff; } .wf-st small { font-size:13px; color:var(--mist); }
.wf-pay { width:100%; max-width:440px; border-radius:16px; overflow:hidden; background:#fff; color:#0a0f1f; box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 34px 70px rgba(0,0,0,.4); } .wf-pb { display:grid; gap:12px; padding:14px; } .wf-pn { display:flex; align-items:center; gap:12px; } .wf-pn img { height:32px; width:auto; margin-right:auto; } .wf-pn u { width:34px; height:7px; border-radius:4px; background:#e3e6ee; }
.wf-ph { display:grid; gap:14px; justify-items:start; padding:22px 20px; border-radius:13px; background:linear-gradient(135deg, #eaf3e1, #d6e7c6); } .wf-ph .wc-ln { width:72%; gap:9px; } .wf-ph .wc-ln i { height:12px; background:#7b9b58; } .wf-ph em { width:96px; height:30px; border-radius:999px; background:#5f7f3f; } .wf-pt { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } .wf-pt span { display:grid; gap:9px; padding:12px; border-radius:11px; background:#f3f5fb; color:#5f7f3f; } .wf-pt svg { width:20px; height:20px; } .wf-pt u { height:7px; border-radius:4px; background:#dfe3ec; }
.wf-m .wf-shot { width:100%; max-width:540px; border-radius:14px; } .wf-w:not(.pin) .wf-m { padding-top:54px; } .wf-w.pin .wf-m { padding-bottom:84px; }

/* The Nommers: whole screen, with room for the phone's status bar above it */
.aw-art.nom .aw-ph { aspect-ratio:272 / 556; container-type:inline-size; } .aw-art.nom .aw-ph img { box-sizing:border-box; padding-top:14.7%; background:#c11d5e; object-fit:cover; object-position:top; }
.wh-p.nm { position:relative; overflow:hidden; aspect-ratio:272 / 556; container-type:inline-size; background:#c11d5e var(--img) center bottom / 100% auto no-repeat; }
.wf-sb { position:absolute; left:0; right:0; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; height:15cqw; padding:3.5cqw 9cqw 0 11cqw; color:#fff; font-size:5.6cqw; } .wf-sb b { font-weight:600; font-size:1em; letter-spacing:-.01em; font-variant-numeric:tabular-nums; } .wf-sb > i { position:absolute; left:50%; top:3.4cqw; width:29cqw; height:8.4cqw; margin-left:-14.5cqw; border-radius:99px; background:#05070d; } .wf-sb > span { display:flex; align-items:center; gap:1.3cqw; } .wf-sb svg { display:block; height:.82em; width:auto; fill:currentColor; }

/* shared card art */
.wc-art { position:relative; aspect-ratio:16 / 9; width:100%; height:auto; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; padding:20px 20px 0; } .wc-art.aw-art { height:auto; }
.wc-art.blue { background:radial-gradient(80% 90% at 70% 10%, rgba(41,90,255,.5), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); } .wc-art.site { background:linear-gradient(150deg, color-mix(in srgb, var(--blue) 16%, var(--white)), color-mix(in srgb, var(--blue) 5%, var(--paper))); }
.wc-art .aw-brw { zoom:.84; transform:none; max-width:440px; margin-top:6px; box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 24px 50px rgba(0,0,0,.35); } .wc-art.ph { align-items:flex-start; padding-top:22px; gap:14px; } .wc-art.ph .aw-ph { width:142px; margin:0; border-radius:22px; transform:rotate(-3deg); } .wc-art.ph .aw-ph.sm { width:122px; margin:14px 0 0; transform:rotate(4deg); } .wc-art.ph .aw-ph img { border-radius:19px; }
.wc-ill { position:absolute; right:10px; top:10px; z-index:2; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:rgba(5,10,28,.6); color:#fff; }
.wc-brw { width:100%; max-width:470px; border-radius:11px 11px 0 0; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(10,15,31,.08), 0 18px 40px rgba(10,15,31,.18); } .wc-v { height:420px; overflow:hidden; background:#eef0f6; } .wc-s { width:100%; aspect-ratio:var(--ar); background:var(--img) top center / 100% auto no-repeat; transition:transform 1s cubic-bezier(.3,.1,.3,1); will-change:transform; }
.wc-lg { width:100%; max-width:440px; border-radius:12px 12px 0 0; overflow:hidden; background:#fff; color:#0a0f1f; box-shadow:0 18px 40px rgba(0,0,0,.35); } .wc-lgb { display:grid; gap:14px; justify-items:start; padding:20px 18px 40px; } .wc-lgb.dk { background:#101a3c; } .wc-lgb img { height:42px; width:auto; max-width:150px; object-fit:contain; } .wc-ln { display:grid; gap:7px; width:100%; } .wc-ln i { display:block; height:8px; border-radius:4px; background:#e7eaf3; } .wc-ln i:nth-child(2) { width:82%; } .wc-ln i:nth-child(3) { width:60%; } .wc-lgb.dk .wc-ln i { background:rgba(157,180,255,.2); }
.wc-lg.big { max-width:440px; border-radius:16px; } .wc-lg.big .wc-lgb { padding:34px 28px 44px; gap:22px; } .wc-lg.big .wc-lgb img { height:64px; max-width:220px; } .wc-lg.big .wc-ln i { height:11px; }

.wc-art .wf-pay { border-radius:12px 12px 0 0; max-width:440px; align-self:stretch; } .wc-art.blue .wc-lg { align-self:stretch; display:flex; flex-direction:column; } .wc-art.blue .wc-lgb { flex:1; align-content:start; }

.wf-tv { height:min(400px, calc(100vh - 400px)); overflow:hidden; }

/* all work */
.wl-f { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:28px; } .wl-f button { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 18px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); font:600 14.5px/1 var(--body); cursor:pointer; transition:background .25s, color .25s, border-color .25s; } .wl-f button i { min-width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:var(--paper); color:var(--muted); font-style:normal; font-size:12.5px; font-variant-numeric:tabular-nums; } .wl-f button:hover { border-color:var(--blue); } .wl-f button[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; } .wl-f button[aria-pressed="true"] i { background:rgba(255,255,255,.2); color:#fff; } #wl-n { margin-left:auto; color:var(--muted); font-size:14.5px; }
.wl-g { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.wl-c { display:flex; flex-direction:column; padding:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--white); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:box-shadow .35s, border-color .35s, translate .45s var(--ease); } .wl-c[hidden] { display:none; } .wl-c:hover, .wl-c:focus-visible { border-color:color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow:0 24px 50px rgba(41,90,255,.13); translate:0 -4px; } .wl-c.wl-in { animation:bxIn .45s var(--ease) both; }
.wl-b { flex:1; display:grid; gap:9px; align-content:start; padding:22px 26px 24px; } .wl-b b { font-family:var(--display); font-size:22px; font-weight:600; line-height:1.2; letter-spacing:-.02em; } .wl-go { display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:6px; color:var(--at); font-size:14px; font-weight:600; } .wl-go svg { width:15px; height:15px; transition:transform .3s var(--ease); } .wl-c:hover .wl-go svg { transform:translateX(4px); }
.wl-next { --sp:2; grid-column:span var(--sp); display:flex; align-items:flex-end; justify-content:space-between; gap:18px; min-height:260px; padding:28px; border-radius:22px; text-decoration:none; color:#fff; background:radial-gradient(80% 100% at 80% 0, rgba(41,90,255,.55), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line); } .wl-next > span:first-child { display:grid; gap:6px; } .wl-next small { font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); } .wl-next b { font-family:var(--display); font-size:clamp(30px, 3.2vw, 44px); line-height:1.05; letter-spacing:-.03em; } .wl-next .bang { color:var(--blue-2); } .wl-p { color:var(--mist); font-size:15.5px; max-width:42ch; } .wl-next .wk-circ { background:var(--blue); border-color:var(--blue); color:#fff; }

/* time to launch */
.wt { position:relative; z-index:1; margin:0; padding:30px 34px; border-radius:24px; background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08); } .wt figcaption { color:var(--muted); font-size:14.5px; }
.wt-pl { position:relative; --lw:250px; margin-top:44px; display:grid; gap:4px; } .wt-ax { position:absolute; left:var(--lw); right:0; top:-26px; bottom:0; pointer-events:none; } .wt-ax i { position:absolute; left:calc(var(--x) / 80 * 100%); top:22px; bottom:0; width:1px; background:var(--line); } .wt-ax span { position:absolute; left:-12px; top:-22px; width:24px; text-align:center; font-style:normal; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.wt-r { position:relative; display:grid; grid-template-columns:var(--lw) minmax(0,1fr); align-items:center; padding:10px 0; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; } .wt-l { display:grid; gap:1px; padding-right:14px; } .wt-l b { font-size:15.5px; font-weight:600; } .wt-l small { font-size:13px; color:var(--muted); }
.wt-t { position:relative; display:flex; align-items:center; gap:12px; } .wt-t i { flex:none; width:calc(var(--v) / 80 * 100%); height:14px; border-radius:0 4px 4px 0; background:var(--blue); transform-origin:left; transition:background .25s; } .wt.in .wt-t i { animation:wtG .9s var(--ease) both; } @keyframes wtG { from { transform:scaleX(0); } } .wt-t em { flex:none; font-style:normal; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; } .wt-r:hover .wt-t i, .wt-r:focus-visible .wt-t i { background:var(--blue-2); }
.wt-n { margin-top:18px; color:var(--muted); font-size:13.5px; }

/* client words */
.wq { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:48px; align-items:center; } .wq figure { margin:0; display:grid; gap:24px; } .wq blockquote { margin:0; font-family:var(--display); font-size:clamp(23px, 2.5vw, 33px); line-height:1.28; letter-spacing:-.02em; color:#fff; } .wq figcaption { display:grid; gap:2px; } .wq figcaption b { color:#fff; font-size:16px; } .wq figcaption span { color:var(--mist); font-size:14.5px; }
.wq-c { display:grid; gap:14px; justify-items:start; padding:28px; border-radius:24px; background:rgba(16,26,60,.5); border:1px solid rgba(157,180,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); color:#fff; } .wq-lg { display:flex; padding:9px 14px; border-radius:12px; background:#fff; } .wq-lg img { height:34px; width:auto; max-width:170px; object-fit:contain; } .wq-c > b { font-family:var(--display); font-size:21px; font-weight:600; line-height:1.2; } .wq-c ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .wq-c li { display:flex; gap:9px; color:var(--mist); font-size:15px; } .wq-c li svg { width:17px; height:17px; flex:none; color:var(--mint); }

/* private walkthrough */
.wp { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; } .wp-c { display:grid; gap:20px; justify-items:start; }
.wp-s { list-style:none; margin:4px 0; padding:0; width:100%; counter-reset:s; display:grid; } .wp-s li { counter-increment:s; position:relative; display:grid; gap:2px; padding:13px 0 13px 40px; border-top:1px solid var(--line); } .wp-s li::before { content:counter(s); position:absolute; left:0; top:14px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--at); font-size:12.5px; font-weight:700; } .wp-s b { font-size:16px; font-weight:600; } .wp-s span { color:var(--muted); font-size:15px; }
.wp-v { position:relative; display:grid; place-items:center; min-height:440px; padding:30px; border-radius:28px; overflow:hidden; background:radial-gradient(70% 80% at 60% 20%, rgba(41,90,255,.4), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .wp-b { width:100%; display:grid; place-items:center; filter:blur(7px); opacity:.85; } .wp-b .aw-brw { transform:none; } .wp-l { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; white-space:nowrap; font-size:14.5px; font-weight:600; color:#fff; background:rgba(5,10,28,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(157,180,255,.25), 0 18px 40px rgba(0,0,0,.4); } .wp-l svg { width:16px; height:16px; color:var(--mint); }

/* quick view */
html.wd-o { overflow:hidden; }
.wd { position:fixed; inset:0 0 0 auto; width:min(560px, 100vw); height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow-y:auto; overscroll-behavior:contain; background:var(--white); color:var(--ink); box-shadow:-30px 0 80px rgba(5,10,28,.35); } .wd[open] { animation:wdIn .45s var(--ease) both; } @keyframes wdIn { from { transform:translateX(40px); opacity:0; } } .wd::backdrop { background:rgba(5,10,28,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.wd-top { position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px 12px 24px; background:var(--white); border-bottom:1px solid var(--line); } .wd-top > span { font-weight:600; font-size:15px; } .wd-top > div { display:flex; gap:6px; } .wd-top button { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--white); color:var(--ink); cursor:pointer; } .wd-top button:hover { border-color:var(--blue); } .wd-top svg { width:17px; height:17px; } #wd-p svg { transform:scaleX(-1); }
#wd-art .wc-art { aspect-ratio:16 / 9; }  #wd-art .wc-brw, #wd-art .wc-lg { max-width:420px; } #wd-art .aw-brw { zoom:.8; }
.wd-b { display:grid; gap:14px; padding:24px; } .wd-b h2 { font-size:clamp(26px, 3vw, 32px); line-height:1.1; letter-spacing:-.03em; } .wd-b > p { color:var(--muted); font-size:16.5px; line-height:1.5; } .wd-b dl { margin:0; display:grid; } .wd-b dl > div { display:grid; gap:3px; padding:13px 0; border-top:1px solid var(--line); } .wd-b dt { font-size:13.5px; font-weight:600; } .wd-b dd { margin:0; color:var(--muted); font-size:15.5px; line-height:1.5; } .wd-a { padding-top:4px; }

@media (max-height:800px) { .wf-w.pin .sec-head .kicker { display:none; } .wf-w.pin .wf-sc { gap:11px; padding:20px 8px 20px 26px; } .wf-w.pin .wf-sc h3 { font-size:clamp(23px, 2.3vw, 29px); } .wf-w.pin .wf-lg { height:40px; min-width:40px; padding:5px 9px; border-radius:12px; } .wf-w.pin .wf-lg img { max-height:30px; max-width:90px; } .wf-w.pin .wf-tg i { font-size:12px; padding:4px 9px; } .wf-w.pin .wf-ic { width:30px; height:30px; border-radius:9px; } .wf-w.pin .wf-ic svg { width:15px; height:15px; } .wf-w.pin .wf-tp { gap:10px; padding:6px 0; } .wf-w.pin .wf-tp b { font-size:13.5px; } .wf-w.pin .wf-tp p { font-size:13px; line-height:1.34; margin-top:0; } .wf-w.pin .wf-tx { padding:2px 14px; } .wf-w.pin .btn { height:42px; } .wf-w.pin .aw-brw, .wf-w.pin .wf-pay, .wf-w.pin .wf-shot { zoom:.8; } .wf-w.pin .wf-m { padding-bottom:64px; } .wf-st { bottom:12px; padding:9px 16px; } .wf-st b { font-size:18px; } .wf-st small { font-size:12px; } }
@media (max-width:1320px) { .wf-w.pin .wf-wr button:not([aria-pressed="true"]) { font-size:0; min-width:34px; } }
@media (min-height:821px) { .wf-w.pin .wf-m .aw-brw { zoom:1.12; } }
@media (max-width:1180px) { }
@media (max-width:1000px) { .wh-wall { height:340px; margin:0 -20px; } .wh-in { inset:-40px -30px; } .wf-sl, .wq, .wp { grid-template-columns:1fr; } .wf-sl { gap:0; } .wf-m { min-height:440px; padding-bottom:96px; } .wf-phs .aw-ph { width:170px; } .wf-phs .aw-ph.sm { width:145px; } .wt-pl { --lw:190px; } }
@media (max-width:640px) { .wh-col:nth-child(3) { display:none; } .wh-in { grid-template-columns:repeat(2, minmax(0,1fr)); } .wl-g { grid-template-columns:1fr; } .wl-next { grid-column:1 / -1; min-height:220px; } .wf-m { padding:16px 16px 92px; min-height:340px; } .wf-sc { padding:20px 18px; } .wf-tx { padding:2px 14px; } .wf-tp { gap:11px; } .wf-ft { flex-wrap:wrap; } .wf-phs .aw-ph { width:136px; } .wf-phs .aw-ph.sm { width:112px; } #wl-n { width:100%; margin:6px 0 0; } .wt { padding:22px 18px; } .wt-pl { --lw:0px; } .wt-ax { top:-26px; } .wt-r { grid-template-columns:1fr; gap:7px; } .wt-t i { max-width:62%; } .wp-v { min-height:320px; } .wd-b { padding:20px 18px; } }
@media (prefers-reduced-motion: reduce) { .wh-tr, .wl-c.wl-in, .wd[open], .wt.in .wt-t i { animation:none !important; } }
/* featured stage */
.pr-w { position:relative; z-index:1; } .pr-w:not(.pin) .pr-wr, .pr-w:not(.pin) .pr-pan { display:none; } .pr-w:not(.pin) .pr-ws { display:grid; gap:56px; }
#pr-st.pin { padding-block:0; } .pr-w.pin { height:345vh; } .pr-w.pin .pr-wi { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto auto minmax(0,640px); align-content:center; gap:14px; padding:92px 0 24px; }
.pr-w.pin .pr-wt { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; } .pr-w.pin .sec-head { display:block; margin:0; } .pr-w.pin .sec-head .lead { display:none; } .pr-w.pin .sec-head > div { gap:10px !important; } .pr-w.pin .sec-head h2 { font-size:clamp(26px, 2.7vw, 38px); line-height:1.1; }
.pr-wr { flex:none; display:flex; gap:12px; } .pr-wr button { display:grid; gap:9px; min-width:64px; padding:6px 0 4px; border:0; background:none; color:var(--muted); font:600 13px/1 var(--body); text-align:left; white-space:nowrap; cursor:pointer; transition:color .25s; } .pr-wr button:hover, .pr-wr button[aria-pressed="true"] { color:var(--ink); } .pr-wr i { display:block; height:3px; border-radius:3px; overflow:hidden; background:var(--line); } .pr-wr u { display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; will-change:transform; }
.pr-ws { position:relative; min-height:0; } .pr-pan { position:absolute; inset:0; border-radius:28px; overflow:hidden; background:linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .pr-pan i { position:absolute; left:10%; top:-40%; width:90%; height:130%; background:radial-gradient(50% 50% at 50% 50%, rgba(41,90,255,.42), transparent 100%); will-change:transform; }
.pr-sl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch; border-radius:28px; overflow:hidden; background:radial-gradient(70% 60% at 75% 10%, rgba(41,90,255,.4), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .pr-w.pin .pr-sl { grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); position:absolute; inset:0; visibility:hidden; pointer-events:none; background:none; box-shadow:none; } .pr-w.pin .pr-sl.on { pointer-events:auto; } .pr-w.pin .pr-sc, .pr-w.pin .pr-m { will-change:transform, opacity; }
.pr-sc { display:flex; flex-direction:column; gap:18px; min-width:0; padding:28px; color:#fff; } .pr-w.pin .pr-sc { height:100%; padding:36px 12px 36px 40px; } .pr-sc .pr-tg i { background:rgba(157,180,255,.14); color:#dbe4ff; } .pr-sc .pr-tg i.dev { background:rgba(242,163,58,.18); color:#ffc678; }
.pr-hd { display:flex; justify-content:space-between; align-items:center; gap:12px; } .pr-lg { flex:none; display:flex; align-items:center; justify-content:center; height:52px; min-width:52px; padding:7px 12px; border-radius:15px; background:#fff; box-shadow:0 0 0 1px rgba(10,15,31,.07), 0 10px 24px rgba(41,90,255,.1); } .pr-lg img { max-height:38px; max-width:112px; width:auto; object-fit:contain; } .pr-hd .pr-tg { justify-content:flex-end; }
.pr-sc h3 { color:#fff; font-size:clamp(27px, 2.9vw, 41px); line-height:1.06; letter-spacing:-.035em; } 
.pr-tx { display:grid; padding:4px 22px; border-radius:18px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14), inset 0 1px 0 rgba(255,255,255,.07); } .pr-w.pin .pr-tx { flex:1; min-height:0; align-content:space-evenly; }
.pr-tp { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:15px 0; } .pr-tp + .pr-tp { border-top:1px solid rgba(157,180,255,.14); }
.pr-ic { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(41,90,255,.24); box-shadow:inset 0 0 0 1px rgba(143,168,255,.3); color:#dbe4ff; transition:background .35s, box-shadow .35s, color .35s; } .pr-ic svg { width:18px; height:18px; } .pr-w.pin [data-s="0"] .pr-tp:nth-child(1) .pr-ic, .pr-w.pin [data-s="1"] .pr-tp:nth-child(2) .pr-ic, .pr-w.pin [data-s="2"] .pr-tp:nth-child(3) .pr-ic { background:var(--blue); box-shadow:0 8px 20px rgba(41,90,255,.45); color:#fff; }
.pr-tp b { display:block; color:#fff; font-family:var(--display); font-size:16.5px; font-weight:600; letter-spacing:-.01em; } .pr-tp p { margin-top:2px; color:var(--mist); font-size:15px; line-height:1.45; }
.pr-ft { display:flex; justify-content:space-between; align-items:center; gap:14px; } .pr-ft small { color:var(--mist); font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap; } .pr-ft .pr-tg { flex:0 1 auto; justify-content:flex-end; text-align:right; } .pr-ft .dev { font-size:12px; padding:5px 10px; }
.pr-m { position:relative; display:grid; place-items:center; height:100%; min-height:460px; padding:26px; } .pr-w.pin .pr-m { min-height:0; padding-left:14px; }
.pr-ex { position:absolute; right:18px; top:18px; z-index:3; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(157,180,255,.16); color:#dbe4ff; }
.pr-m .aw-brw { max-width:420px; } .pr-phs.aw-art { width:100%; height:auto; background:none; align-items:center; gap:18px; overflow:visible; } .pr-phs .aw-ph { width:min(200px, calc((100vh - 340px) * .46)); margin:0; transform:rotate(-3deg) translateY(-14px); } .pr-phs .aw-ph.sm { width:min(172px, calc((100vh - 340px) * .4)); margin:0; transform:rotate(4deg) translateY(26px); }

/* stage: tabs sit under the heading, the content and the screen share one frame */
#pr-st.pin { padding-block:0; } .pr-w:not(.pin) .sec-head { margin-bottom:40px; }
.pr-w.pin .pr-wi { grid-template-rows:auto auto minmax(0,640px); } .pr-w.pin .sec-head { display:block; margin:0; }
.pr-wr { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; } .pr-wr button { min-width:0; width:100%; font-size:13px; }
.pr-w.pin .pr-sl { grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); }
.pr-sc { display:flex; flex-direction:column; gap:14px; min-width:0; padding:28px; color:#fff; } .pr-w.pin .pr-sc { height:100%; padding:32px 12px 32px 40px; } .pr-tg { display:flex; flex-wrap:wrap; gap:6px; } .pr-sc .pr-tg i { font-style:normal; font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; background:rgba(157,180,255,.14); color:#dbe4ff; }
.pr-hd { display:flex; justify-content:space-between; align-items:center; gap:12px; } .pr-lg { display:grid; place-items:center; width:50px; height:50px; border-radius:15px; background:var(--blue); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px rgba(41,90,255,.45); } .pr-lg svg { width:24px; height:24px; }
.pr-sc h3 { color:#fff; font-size:clamp(27px, 2.8vw, 40px); line-height:1.06; letter-spacing:-.035em; } .pr-d { color:var(--mist); font-size:16px; line-height:1.5; }
.pr-tx { display:grid; padding:4px 22px; border-radius:18px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14), inset 0 1px 0 rgba(255,255,255,.07); } .pr-w.pin .pr-tx { flex:1; min-height:0; align-content:space-evenly; }
.pr-tp { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:13px 0; } .pr-tp + .pr-tp { border-top:1px solid rgba(157,180,255,.14); } .pr-ic { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(41,90,255,.24); box-shadow:inset 0 0 0 1px rgba(143,168,255,.3); color:#dbe4ff; } .pr-ic svg { width:18px; height:18px; } .pr-tp b { display:block; color:#fff; font-family:var(--display); font-size:16.5px; font-weight:600; letter-spacing:-.01em; } .pr-tp p { margin-top:1px; color:var(--mist); font-size:14.5px; line-height:1.4; }
.pr-ft { display:flex; justify-content:space-between; align-items:center; gap:14px; } .pr-ft small { min-width:0; color:var(--mist); font-size:13.5px; text-align:right; } .pr-ft small b { color:#fff; font-weight:600; }
.pr-m { position:relative; display:grid; place-items:center; height:100%; min-height:520px; padding:26px 26px 112px; } .pr-w.pin .pr-m { min-height:0; padding-left:14px; }
.pr-ex { position:absolute; right:18px; top:18px; z-index:3; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(157,180,255,.16); color:#dbe4ff; }
.pr-st { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; display:grid; gap:7px; justify-items:center; width:max-content; max-width:calc(100% - 28px); text-align:center; padding:12px 20px; border-radius:16px; background:rgba(13,22,54,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(157,180,255,.24), 0 20px 44px rgba(0,0,0,.45); } .pr-st small { font-size:12.5px; color:var(--mist); } .pr-st span { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; } .pr-st i { font-style:normal; font-size:13px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--blue); color:#fff; }

/* ================= PROCESS PAGE ================= */
@keyframes bxIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ab-dh .hdr.solid { color:#fff; border-bottom-color:rgba(157,180,255,.14); box-shadow:none; } .ab-dh .hdr.solid::before { background:rgba(5,10,28,.72); box-shadow:none; } .ab-dh .hdr.solid .brand small { color:var(--mist); }
@media (min-width:1001px) { .band { padding-block:128px; } .sec-head { margin-bottom:64px; } }

/* hero tracker */
.pr-hero h1 { font-size:clamp(42px, 4.9vw, 72px); line-height:1.02; } .pr-hero h1 em { display:block; }
.pr-tk { display:grid; gap:14px; padding:22px; border-radius:28px; background:rgba(16,26,60,.42); border:1px solid rgba(157,180,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 40px 90px rgba(0,0,0,.35); color:#fff; }
.pr-tkh { display:flex; justify-content:space-between; align-items:center; } .pr-tkh b { font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; } .pr-tkh em { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(157,180,255,.16); color:#dbe4ff; }
.pr-tl { display:grid; gap:8px; } .pr-tr { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,180,255,.12); color:var(--mist); transition:background .4s, box-shadow .4s, color .4s; } .pr-tr > span { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(157,180,255,.1); transition:background .4s, color .4s; } .pr-tr svg { width:19px; height:19px; } .pr-tr b { font-size:16.5px; font-weight:600; } .pr-tr em { font-style:normal; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(157,180,255,.12); }
.pr-tr.done { color:#fff; } .pr-tr.done em { background:rgba(31,191,134,.18); color:#7ce8c0; } .pr-tr.now { color:#fff; background:rgba(41,90,255,.22); box-shadow:inset 0 0 0 1px rgba(143,168,255,.5), 0 14px 34px rgba(41,90,255,.3); } .pr-tr.now > span { background:var(--blue); } .pr-tr.now em { background:var(--blue); color:#fff; }
.pr-tf { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; padding:4px 4px 0; } .pr-tf small { font-size:13px; color:var(--mist); font-variant-numeric:tabular-nums; } .pr-bar { display:block; height:6px; border-radius:6px; overflow:hidden; background:rgba(157,180,255,.14); } .pr-bar i { display:block; height:100%; border-radius:6px; background:var(--blue); transform:scaleX(.75); transform-origin:left; transition:transform .7s var(--ease); }

/* stage additions */
.pr-sc h3 .bang { color:var(--blue-2); }
.pr-tp { grid-template-columns:auto minmax(0,1fr); padding:12px 0; } .pr-tp > svg { flex:none; width:19px; height:19px; color:#7ce8c0; } .pr-tp.you { align-items:center; } .pr-tp.you > svg { width:30px; height:30px; padding:7px; margin-left:-6px; border-radius:9px; background:var(--blue); color:#fff; } .pr-tp.you small { display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sky); } .pr-tp.you b { font-family:var(--body); font-size:15px; font-weight:500; letter-spacing:0; }
.pr-st b { font-family:var(--display); font-size:clamp(17px, 1.6vw, 21px); font-weight:600; letter-spacing:-.015em; line-height:1.2; color:#fff; }
.pa-dv { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
.pa-sd { flex:1 1 0; min-width:0; display:grid; gap:10px; } .pa-sd:first-child { justify-items:end; } .pa-sd span { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:8px 12px; border-radius:12px; background:rgba(13,22,54,.9); box-shadow:inset 0 0 0 1px rgba(157,180,255,.22); color:#dbe4ff; font-size:12.5px; font-weight:500; line-height:1.2; } .pa-sd svg { flex:none; width:15px; height:15px; color:#7ce8c0; }
.pa-ph { flex:none; width:clamp(170px, calc((100vh - 390px) * .5), 228px); aspect-ratio:9 / 18.4; padding:6px; border-radius:34px; background:linear-gradient(150deg, #6a7082, #1a1d28 35%, #0a0c14 65%, #474c5e); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 30px 60px rgba(0,0,0,.5); container-type:inline-size; }
.pa-sc::before { content:""; position:absolute; left:50%; top:3.6cqw; width:29cqw; height:8cqw; margin-left:-14.5cqw; border-radius:99px; background:#05070d; }
.pa-b { position:absolute; left:6.5cqw; right:6.5cqw; bottom:4cqw; display:flex; justify-content:space-around; padding:3.2cqw 0; border-radius:5cqw; background:#f3f5fb; } .pa-b i { width:6.4cqw; height:6.4cqw; border-radius:2.2cqw; background:#cfd6e6; } .pa-b i.on { background:#295aff; } .pa-b.w { background:none; box-shadow:inset 0 0 0 1.5px #b9c1d6; border-radius:5cqw; }
.pa-sc { position:relative; height:100%; display:grid; gap:4.6cqw; align-content:start; padding:15cqw 6.5cqw 6cqw; border-radius:28px; overflow:hidden; background:#fff; color:#0a0f1f; }
.pa-h small { display:block; font-size:5.2cqw; color:#596175; } .pa-h b { font-family:var(--display); font-size:9.4cqw; font-weight:600; letter-spacing:-.02em; line-height:1.1; } .pa-n { display:grid; gap:1cqw; padding:6cqw; border-radius:6cqw; background:linear-gradient(150deg, #5b82ff, #295aff); color:#fff; } .pa-n small { font-size:5cqw; opacity:.85; } .pa-n b { font-size:7.6cqw; font-weight:600; }
.pa-l { display:grid; gap:3.4cqw; } .pa-l u { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:3.6cqw; padding:3.6cqw; border-radius:4.6cqw; background:#f3f5fb; text-decoration:none; font-size:5.8cqw; font-weight:600; } .pa-l i { width:9cqw; height:9cqw; border-radius:3cqw; background:#dbe4ff; } .pa-l em { font-style:normal; font-size:4.6cqw; padding:1.5cqw 3.6cqw; border-radius:99px; background:#295aff; color:#fff; }
.pa-w { display:grid; gap:4cqw; } .pa-w i { display:grid; place-items:center; height:auto; min-height:0; border:1.5px dashed #b9c1d6; border-radius:4cqw; font-style:normal; font-size:5.2cqw; font-weight:500; color:#5f6880; } .pa-w i:nth-child(1) { height:17cqw !important; } .pa-w i:nth-child(2) { height:32cqw !important; } .pa-w i:nth-child(n+3) { height:17cqw !important; }
.pa-t { position:absolute; right:12cqw; bottom:30cqw; width:13cqw; height:13cqw; border-radius:50%; background:rgba(41,90,255,.25); box-shadow:0 0 0 3cqw rgba(41,90,255,.12); animation:paT 2s ease-in-out infinite; } @keyframes paT { 50% { transform:scale(.72); } }

/* habits */
.pr-hg { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.pr-h { display:grid; gap:8px; align-content:start; padding:18px 18px 26px; border-radius:26px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line), 0 20px 50px rgba(41,90,255,.07); transition:translate .45s var(--ease), box-shadow .35s; } .pr-h:hover { translate:0 -4px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 40%, var(--line)), 0 26px 60px rgba(41,90,255,.13); } .pr-h h3 { margin-top:14px; padding-inline:10px; font-size:clamp(23px, 2.2vw, 29px); } .pr-h p { padding-inline:10px; color:var(--muted); font-size:16.5px; }
.pr-ha { display:grid; place-items:center; height:190px; padding:20px; border-radius:18px; background:radial-gradient(70% 90% at 70% 10%, rgba(41,90,255,.42), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); }
.ph-cal { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; width:100%; max-width:420px; } .ph-cal span { display:grid; gap:6px; align-content:start; height:96px; padding:10px; border-radius:13px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14); color:var(--mist); } .ph-cal small { font-size:12px; } .ph-cal .on { background:var(--blue); color:#fff; box-shadow:0 14px 30px rgba(41,90,255,.45); } .ph-cal b { font-size:12.5px; font-weight:600; }
.ph-doc { display:grid; gap:8px; width:100%; max-width:320px; padding:16px; border-radius:15px; background:#fff; color:#0a0f1f; box-shadow:0 20px 44px rgba(0,0,0,.4); } .ph-doc span { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; } .ph-doc span + span { padding-top:8px; border-top:1px solid #eef0f6; } .ph-doc svg { width:16px; height:16px; color:#295aff; }
.ph-tm { display:flex; } .ph-tm span { width:68px; height:68px; margin-left:-12px; display:grid; place-items:center; border-radius:50%; background:#16245a; box-shadow:0 0 0 4px #0a1230; color:#dbe4ff; } .ph-tm span:first-child { margin-left:0; background:var(--blue); color:#fff; } .ph-tm svg { width:25px; height:25px; }
.ph-own { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; } .ph-own span { padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(157,180,255,.18); color:#dbe4ff; font-size:14px; font-weight:500; } .ph-own b { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; background:var(--blue); color:#fff; font-size:14px; font-weight:600; } .ph-own svg { width:15px; height:15px; }

/* team */
.pr-tmf { position:relative; z-index:1; display:grid; gap:18px; padding:22px; border-radius:28px; background:rgba(16,26,60,.42); border:1px solid rgba(157,180,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.pr-tb { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding:4px; border-radius:15px; background:rgba(4,9,26,.45); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14); } .pr-tb button { height:44px; border:0; border-radius:12px; background:none; color:var(--mist); font:600 15px/1 var(--body); cursor:pointer; transition:background .3s, color .3s; } .pr-tb button:hover { color:#fff; } .pr-tb button[aria-pressed="true"] { background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(41,90,255,.35); }
.pr-rg { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } .pr-rl { display:flex; align-items:center; gap:14px; padding:18px; border-radius:18px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(157,180,255,.12); opacity:.5; transition:opacity .35s, background .35s, box-shadow .35s; } .pr-rl > span { flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:rgba(157,180,255,.12); color:#dbe4ff; transition:background .35s; } .pr-rl svg { width:21px; height:21px; } .pr-rl b { display:block; color:#fff; font-family:var(--display); font-size:17.5px; font-weight:600; letter-spacing:-.015em; } .pr-rl small { color:var(--mist); font-size:14px; line-height:1.35; } .pr-rl.on { opacity:1; background:rgba(41,90,255,.16); box-shadow:inset 0 0 0 1px rgba(143,168,255,.45); } .pr-rl.on > span { background:var(--blue); color:#fff; }

@media (max-height:800px) { .pr-w.pin .sec-head .kicker { display:none; } .pr-w.pin .pr-sc { gap:9px; padding:18px 8px 18px 26px; } .pr-w.pin .pr-sc h3 { font-size:clamp(22px, 2.2vw, 28px); } .pr-w.pin .pr-d { font-size:13.5px; line-height:1.38; } .pr-w.pin .pr-lg { width:34px; min-width:0; height:34px; padding:0; border-radius:10px; } .pr-w.pin .pr-lg svg { width:17px; height:17px; } .pr-w.pin .pr-tg i { font-size:12px; padding:4px 9px; } .pr-w.pin .pr-tx { padding:2px 14px; } .pr-w.pin .pr-ic { width:28px; height:28px; border-radius:9px; } .pr-w.pin .pr-ic svg { width:14px; height:14px; } .pr-w.pin .pr-tp { gap:10px; padding:5px 0; } .pr-w.pin .pr-tp b { font-size:13px; } .pr-w.pin .pr-tp p { font-size:12.5px; line-height:1.3; } .pr-w.pin .btn { height:42px; } .pr-w.pin .pr-m { padding-bottom:86px; } .pr-st { bottom:10px; padding:8px 14px; gap:4px; } .pr-st small { font-size:11.5px; } .pr-st i { font-size:12px; padding:3px 9px; } }
@media (max-height:800px) { .pr-w.pin .pr-tp { padding:6px 0; } .pr-w.pin .pr-tp b { font-size:13px; } .pr-w.pin .pr-tp.you b { font-size:13px; } .pr-w.pin .pr-tp.you small { font-size:10.5px; } .pr-w.pin .pr-tp > svg { width:15px; height:15px; } .pr-w.pin .pr-tp.you > svg { width:24px; height:24px; padding:5px; margin-left:-4px; } .pa-sd span { font-size:11.5px; padding:6px 9px; } .pr-w.pin .pa-ph { width:clamp(120px, calc((100vh - 400px) * .5), 228px); } .pr-st b { font-size:15px; } }
@media (min-height:821px) { .pr-w.pin .pa-ph { width:clamp(190px, calc((100vh - 420px) * .5), 232px); } }
@media (max-width:1100px) { .pr-rg { grid-template-columns:repeat(2, minmax(0,1fr)); } .pa-sd span { font-size:11.5px; } }
@media (max-width:1000px) { .pr-sl { grid-template-columns:1fr; } .pr-m { min-height:0; padding-top:52px; } .pa-ph { width:210px; } }
@media (max-width:640px) { .pr-hg, .pr-rg { grid-template-columns:1fr; } .pr-tb { grid-template-columns:repeat(4, minmax(0,1fr)); } .pr-tb button { font-size:13px; } .pa-dv { flex-direction:column; } .pa-sd { display:flex; flex-wrap:wrap; justify-content:center; flex:none; width:100%; } .pa-ph { width:190px; order:-1; } .pr-sc { padding:20px 18px; } .pr-tx { padding:2px 14px; } .pr-ft .btn { width:100%; justify-content:center; } .pr-m { padding:48px 14px 132px; } .pr-tk { padding:16px; } .pr-tmf { padding:14px; } .ph-tm span { width:58px; height:58px; } .pr-ha { padding:14px; } .ph-cal span { padding:8px 6px; } }
@media (prefers-reduced-motion: reduce) { .pa-t { animation:none; } }
/* ================= BLOG PAGE ================= */
@keyframes bxIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ab-dh .hdr.solid { color:#fff; border-bottom-color:rgba(157,180,255,.14); box-shadow:none; } .ab-dh .hdr.solid::before { background:rgba(5,10,28,.72); box-shadow:none; } .ab-dh .hdr.solid .brand small { color:var(--mist); }
@media (min-width:1001px) { .band { padding-block:128px; } .sec-head { margin-bottom:64px; } }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* hero */
.bl-hero h1 { font-size:clamp(46px, 5.6vw, 82px); line-height:1.08; } .bl-hero h1 em { display:block; padding-bottom:.1em; overflow:visible; }
.bl-l { position:relative; display:grid; gap:14px; padding:16px; border-radius:28px; text-decoration:none; color:#fff; background:rgba(16,26,60,.42); border:1px solid rgba(157,180,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 40px 90px rgba(0,0,0,.35); transition:translate .45s var(--ease), border-color .35s; } .bl-l:hover { translate:0 -4px; border-color:rgba(143,168,255,.5); } .bl-lk { position:absolute; left:28px; top:28px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--blue); color:#fff; } .bl-lb { display:grid; gap:9px; padding:4px 10px 10px; } .bl-lb b { font-family:var(--display); font-size:clamp(21px, 2vw, 27px); font-weight:600; line-height:1.15; letter-spacing:-.02em; } .bl-hero .wk-meta span { background:rgba(157,180,255,.14); color:#dbe4ff; }

.bl-l .bl-a { height:286px; padding-top:50px; }

/* article art */
.bl-a { position:relative; display:grid; place-items:center; height:250px; padding:24px; overflow:hidden; border-radius:18px; background:radial-gradient(70% 90% at 70% 10%, rgba(41,90,255,.45), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); color:#fff; }
.ba-s { width:100%; max-width:400px; display:grid; gap:8px; } .ba-s > span { display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:13px; background:#fff; color:#0a0f1f; font-size:13.5px; font-weight:500; } .ba-s svg { flex:none; width:15px; height:15px; color:#295aff; } .ba-s .r { display:grid; gap:6px; } .ba-s .r i { width:42%; height:7px; border-radius:4px; background:#12895f; } .ba-s .r b { width:78%; height:10px; border-radius:5px; background:#295aff; } .ba-s .r u { width:92%; height:7px; border-radius:4px; background:#e3e6ee; } .ba-s .a { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 8px; background:#e3e9ff; } .ba-s .a em { font-style:normal; font-size:12.5px; font-weight:600; color:#1638c9; } .ba-s .a u { grid-column:1 / -1; height:7px; border-radius:4px; background:#b9c8ff; } .ba-s .a u:last-child { width:68%; }
.ba-m { width:100%; max-width:420px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .ba-m > div { display:grid; gap:8px; align-content:start; padding:15px; border-radius:15px; background:#fff; color:#0a0f1f; } .ba-m small { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1638c9; } .ba-m span { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; } .ba-m svg { flex:none; width:15px; height:15px; color:#0a7350; } .bl-a .ba-m > div:not(.o) small { color:#1638c9; } .ba-m .o { background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(157,180,255,.2); color:var(--mist); } .ba-m .o small { color:var(--sky); } .ba-m s { font-size:13.5px; }
.ba-f { width:100%; max-width:340px; display:grid; justify-items:center; } .ba-f span { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px 14px; border-radius:13px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(157,180,255,.2); color:#dbe4ff; font-size:14px; font-weight:500; } .ba-f svg { flex:none; width:17px; height:17px; } .ba-f .on { background:var(--blue); color:#fff; box-shadow:0 14px 30px rgba(41,90,255,.45); } .ba-f i { width:2px; height:16px; background:rgba(157,180,255,.45); }
.ba-v { width:100%; max-width:430px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; } .ba-v > div { display:grid; gap:6px; padding:16px 14px; border-radius:15px; background:#fff; color:#0a0f1f; } .ba-v b { font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.02em; } .ba-v span { font-size:13px; color:#596175; } .ba-v em { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; font-style:normal; font-size:13px; font-weight:700; }

/* library */
.bl-bar { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; } .wl-f { display:flex; flex-wrap:wrap; gap:8px; } .wl-f button { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 18px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); font:600 14.5px/1 var(--body); cursor:pointer; transition:background .25s, color .25s, border-color .25s; } .wl-f button i { min-width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:var(--paper); color:var(--muted); font-style:normal; font-size:12.5px; } .wl-f button:hover { border-color:var(--blue); } .wl-f button[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; } .wl-f button[aria-pressed="true"] i { background:rgba(255,255,255,.2); color:#fff; }
.bl-s { flex:0 1 300px; display:flex; align-items:center; gap:9px; height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--muted); } .bl-s:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } .bl-s svg { flex:none; width:17px; height:17px; } .bl-s input { flex:1; min-width:0; border:0; outline:0; background:none; color:var(--ink); font:500 15px/1 var(--body); } .bl-s input::placeholder { color:var(--muted); }
.bl-n { position:relative; z-index:1; margin:16px 0 18px; color:var(--muted); font-size:14.5px; }
.bl-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; } .bl-grid[hidden] { display:none; }
.bl-c { position:relative; display:flex; flex-direction:column; padding:14px; border-radius:26px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .35s, translate .45s var(--ease); } .bl-c[hidden] { display:none; } .bl-c:hover, .bl-c:focus-within { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 40%, var(--line)), 0 24px 50px rgba(41,90,255,.13); translate:0 -4px; } .bl-c.bl-in { animation:bxIn .45s var(--ease) both; }
.bl-b { flex:1; display:grid; gap:10px; align-content:start; padding:18px 12px 8px; } .bl-b h3 { font-size:clamp(21px, 2vw, 26px); line-height:1.16; letter-spacing:-.025em; } .bl-b h3 a { color:inherit; text-decoration:none; } .bl-b h3 a::after { content:""; position:absolute; inset:0; border-radius:26px; } .bl-b p { color:var(--muted); font-size:15.5px; line-height:1.5; }
.bl-g { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:8px; } .wl-go { display:inline-flex; align-items:center; gap:6px; color:var(--at); font-size:14.5px; font-weight:600; } .wl-go svg { width:15px; height:15px; transition:transform .3s var(--ease); } .bl-c:hover .wl-go svg { transform:translateX(4px); } .bl-g button { position:relative; z-index:1; height:36px; padding:0 15px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink); font:600 13.5px/1 var(--body); cursor:pointer; transition:border-color .25s, color .25s; } .bl-g button:hover { border-color:var(--blue); color:var(--at); }
.wl-next { --sp:1; grid-column:span var(--sp); display:flex; align-items:flex-end; justify-content:space-between; gap:18px; min-height:260px; padding:28px; border-radius:26px; text-decoration:none; color:#fff; background:radial-gradient(80% 100% at 80% 0, rgba(41,90,255,.55), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line); } .wl-next[hidden] { display:none; } .wl-next { position:relative; overflow:hidden; } .wl-next::before { content:"!"; position:absolute; right:32px; top:-26px; font-family:var(--display); font-size:230px; font-weight:700; line-height:1; color:rgba(157,180,255,.14); pointer-events:none; } .wl-next > span:first-child { display:grid; gap:6px; } .wl-next small { font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); } .wl-next b { font-family:var(--display); font-size:clamp(30px, 3.2vw, 44px); line-height:1.05; letter-spacing:-.03em; } .wl-p { color:var(--mist); font-size:15.5px; max-width:42ch; } .wl-next .wk-circ { background:var(--blue); border-color:var(--blue); color:#fff; }
.bl-e { position:relative; z-index:1; display:grid; gap:8px; justify-items:center; padding:64px 20px; border-radius:26px; text-align:center; background:var(--white); box-shadow:inset 0 0 0 1px var(--line); } .bl-e[hidden] { display:none; } .bl-e b { font-family:var(--display); font-size:24px; font-weight:600; } .bl-e p { color:var(--muted); } .bl-e .btn { margin-top:8px; color:var(--ink); }

/* topics */
.bl-tg { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; } .bl-t { display:grid; gap:9px; align-content:start; padding:24px 20px; border-radius:22px; text-decoration:none; background:rgba(16,26,60,.5); border:1px solid rgba(157,180,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:translate .45s var(--ease), border-color .35s; } .bl-t:hover { translate:0 -5px; border-color:rgba(143,168,255,.5); } .bl-t > span { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--blue); color:#fff; box-shadow:0 12px 26px rgba(41,90,255,.4); } .bl-t > span svg { width:20px; height:20px; } .bl-t b { margin-top:6px; color:#fff; font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.015em; } .bl-t small { color:var(--mist); font-size:14.5px; line-height:1.4; } .bl-t em { display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-style:normal; color:#dbe4ff; font-size:14px; font-weight:600; } .bl-t em svg { width:14px; height:14px; }

/* preview panel */
#wd-art .bl-a { border-radius:0; height:230px; } .wd .wd-b { gap:18px; } .bl-sh, .bl-in { display:grid; gap:7px; } .bl-sh small, .bl-in small { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--at); } .bl-sh p { color:var(--ink); font-size:16.5px; line-height:1.55; } .bl-in ol { list-style:none; margin:0; padding:0; counter-reset:s; display:grid; } .bl-in li { counter-increment:s; display:flex; gap:11px; padding:10px 0; border-top:1px solid var(--line); color:var(--ink); font-size:15.5px; font-weight:500; } .bl-in li::before { content:counter(s); flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--at); font-size:12px; font-weight:700; }

@media (max-width:1180px) { .bl-tg { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px) { .bl-grid { grid-template-columns:1fr; } .wl-next { grid-column:1 / -1; min-height:220px; } .bl-s { flex:1 1 100%; } .bl-tg { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .bl-a { height:230px; padding:16px; } .bl-l { padding:12px; } .bl-lk { left:22px; top:22px; } .ba-v > div { padding:12px 10px; } .ba-v b { font-size:15.5px; } .ba-v span { font-size:12px; } .ba-v em { width:30px; height:30px; font-size:12px; } .bl-tg { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .bl-c.bl-in { animation:none; } }
.ab-sky { position:relative; min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; color:#fff; background:#040817; isolation:isolate; overflow:hidden; }
.ab-sp2 { position:absolute; inset:0; z-index:-1; display:grid; grid-template-columns:1fr 1fr; }
.ab-s { position:relative; overflow:hidden; display:grid; align-content:center; justify-items:center; gap:4px; background:linear-gradient(180deg, var(--t), var(--b)); }
.ab-s + .ab-s { box-shadow:-1px 0 0 rgba(255,255,255,.22); }
.ab-s .sn { position:absolute; left:var(--x); top:var(--y); width:92px; height:92px; margin:-46px 0 0 -46px; border-radius:50%; background:radial-gradient(circle at 40% 36%, #fff6da, #ffd27a 60%, #f2a33a); box-shadow:0 0 90px 30px rgba(255,214,130,.5); transition:left .3s linear, top .3s linear; } .ab-s.night .sn { background:radial-gradient(circle at 36% 34%, #fff, #cfd8f2 70%); box-shadow:0 0 70px 12px rgba(200,215,255,.3); }
.ab-s .st { position:absolute; inset:0; opacity:0; transition:opacity .6s; background-image:radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent), radial-gradient(1.6px 1.6px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 32%, #fff, transparent), radial-gradient(1.4px 1.4px at 78% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 44%, #fff, transparent), radial-gradient(1.2px 1.2px at 18% 62%, #fff, transparent), radial-gradient(1px 1px at 70% 58%, #fff, transparent); } .ab-s.night .st { opacity:.9; }
.ab-s small { position:relative; font-size:16px; font-weight:500; opacity:.92; } .ab-s b { position:relative; font-family:var(--display); font-size:clamp(52px, 8.6vw, 128px); font-weight:600; letter-spacing:-.012em; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 8px 40px rgba(5,10,40,.25); } .ab-s b em { display:block; margin-top:6px; text-align:center; font:500 14px/1 var(--body); letter-spacing:0; }
.ab-skh { display:grid; gap:14px; justify-items:center; text-align:center; padding:clamp(96px, 9vw, 120px) 20px 0; } .ab-skh .kicker { color:#fff; } .ab-skh h2 em.s { background:none; -webkit-text-fill-color:#dbe4ff; color:#dbe4ff; } .ab-skh h2 { font-size:clamp(34px, 4.6vw, 62px); letter-spacing:-.04em; line-height:1.03; text-shadow:0 6px 30px rgba(5,10,40,.3); }
.ab-skc2 { grid-row:3; width:min(100% - 40px, 780px); margin:0 auto 44px; display:grid; gap:14px; justify-items:center; padding:20px 26px 22px; border-radius:28px; background:rgba(8,14,44,.42); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px rgba(5,10,40,.35); }
.ab-skm { font-family:var(--display); font-weight:500; font-size:clamp(19px, 2vw, 25px); line-height:1.2; letter-spacing:-.015em; text-align:center; }
.ab-skc2 input { -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:6px 0; border-radius:6px; background:linear-gradient(90deg, #fff var(--v, 0%), rgba(255,255,255,.28) 0); cursor:grab; } .ab-skc2 input::-webkit-slider-thumb { -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:0 6px 18px rgba(5,10,40,.45); } .ab-skc2 input::-moz-range-thumb { width:26px; height:26px; border:0; border-radius:50%; background:#fff; }
.ab-tzp { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; } .ab-tzp button { padding:9px 14px; border-radius:999px; border:0; background:none; color:#fff; font:500 14.5px/1 var(--body); cursor:pointer; transition:background .25s, color .25s; } .ab-tzp button[aria-checked="true"] { background:#fff; color:#0a0f1f; }
.ab-skc2 ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; font-size:13.5px; opacity:.9; } .ab-skc2 li::before { content:"·"; margin-right:8px; }/* ================= NEW HOMEPAGE ================= */
.ab-dh .hdr.solid { color:#fff; border-bottom-color:rgba(157,180,255,.14); box-shadow:none; } .ab-dh .hdr.solid::before { background:rgba(5,10,28,.72); box-shadow:none; } .ab-dh .hdr.solid .brand small { color:var(--mist); }
.hm-hero .hero-in { display:block; padding-block:40px 0; text-align:center; } .hm-hero .hero-in > div { display:grid; justify-items:center; gap:0; } .hm-hero h1 { margin-top:18px; font-size:clamp(44px, 6.3vw, 92px); line-height:1; } .hm-hero h1 em { display:inline; } .hm-hero .lead { max-width:760px; margin-top:16px; } .hm-hero .hero-cta { justify-content:center; margin-top:24px; } .hm-hero .hero-facts { justify-content:center; margin-top:20px; }
.hm-fl { position:relative; z-index:1; height:clamp(220px, 32vh, 310px); margin:6px 0 52px; overflow:hidden; } .hm-fl canvas { position:absolute; inset:0; width:100%; height:100%; } .hm-fp { position:absolute; left:0; top:50%; display:block; padding:8px 14px; border-radius:12px; background:rgba(157,180,255,.1); box-shadow:inset 0 0 0 1px rgba(157,180,255,.2); color:#c6d2f5; font-size:14px; font-weight:500; line-height:1.2; white-space:nowrap; will-change:transform, opacity; } .hm-fp b { font-weight:inherit; } .hm-fp .o { display:none; } .hm-fp.d { background:#fff; box-shadow:0 12px 30px rgba(5,10,40,.4); color:#0a0f1f; font-weight:600; } .hm-fp.d b:first-child { display:none; } .hm-fp.d .o { display:inline-flex; align-items:center; gap:7px; } .hm-fp.d .o::before { content:""; width:15px; height:15px; border-radius:50%; background:#12a071 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }
.hm-k { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px; background:rgba(157,180,255,.1); box-shadow:inset 0 0 0 1px rgba(157,180,255,.18); color:#dbe4ff; font-size:14px; font-weight:500; }
.hm-st { position:relative; z-index:4; margin-top:-48px; } .hm-sg { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-radius:22px; overflow:hidden; background:var(--white); box-shadow:inset 0 0 0 1px var(--line), 0 26px 60px rgba(41,90,255,.14); } .hm-sg a { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:18px 16px; color:var(--ink); text-decoration:none; font-size:15px; line-height:1.2; transition:background .25s; } .hm-sg a + a { border-left:1px solid var(--line); } .hm-sg a:hover { background:color-mix(in srgb, var(--blue) 7%, transparent); } .hm-sg a > span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--blue); color:#fff; } .hm-sg a > span svg { width:18px; height:18px; } .hm-sg b { font-weight:600; } .hm-sg a > svg { width:15px; height:15px; color:var(--at); }

/* services: one heading, one still frame, each service fades into the next */
.hm-stn, .hm-stp { display:none; } .hm-sts { position:relative; z-index:1; display:grid; gap:20px; }
.hm-s.sv-sl { position:relative; gap:0; align-items:stretch; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); border-radius:32px; overflow:hidden; background:radial-gradient(70% 70% at 78% 8%, #1f3aa0, transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 24px 60px rgba(10,15,31,.22); }
.hm-s .sv-sc { align-content:center; gap:12px; padding:40px 12px 40px 44px; color:#fff; } .hm-s .sv-sc .kicker { color:#9db4ff; } .hm-s .sv-sc h3 { color:#fff; font-size:clamp(28px, 3.1vw, 42px); line-height:1.06; letter-spacing:-.035em; } .hm-s .sv-sc > p { color:var(--mist); font-size:16.5px; line-height:1.5; } .hm-s .sv-pts li { color:#fff; font-size:15.5px; } .hm-s .sv-pts svg { color:#7ce8c0; } .hm-s .sv-tg i { background:rgba(157,180,255,.14); color:#dbe4ff; }
.hm-s .sv-m { min-height:520px; height:auto; background:none; box-shadow:none; border-radius:0; overflow:visible; padding:28px; } .hm-s .sv-ex { background:rgba(157,180,255,.16); color:#dbe4ff; }
#hm-sv:has(.hm-stk.pin) { padding-block:0; }
.hm-stk { position:relative; z-index:1; } .hm-stk.pin { height:560vh; } .hm-stk.pin .hm-sti { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:12px; padding:88px 0 20px; } .hm-stk.pin .sec-head { margin:0 0 8px; }
.hm-stk.pin .hm-stn { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; height:46px; padding:4px; border-radius:999px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line), 0 10px 26px rgba(41,90,255,.08); } .hm-stn button { border:0; border-radius:999px; background:none; color:var(--muted); font:600 14.5px/1 var(--body); cursor:pointer; transition:background .25s, color .25s; } .hm-stn button:hover { color:var(--ink); } .hm-stn [aria-pressed=true], .hm-stn [aria-pressed=true]:hover { background:var(--blue); color:#fff; }
.hm-stk.pin .hm-sts { display:block; min-height:0; } .hm-stk.pin .hm-stp { position:absolute; inset:0; display:block; border-radius:32px; overflow:hidden; background:linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 24px 60px rgba(10,15,31,.22); } .hm-stp i { position:absolute; left:42%; top:-30%; width:70%; height:110%; border-radius:50%; background:radial-gradient(closest-side, #1f3aa0, transparent); transition:transform .6s var(--ease); }
.hm-stk.pin .hm-s.sv-sl { position:absolute; inset:0; height:auto; opacity:0; visibility:hidden; pointer-events:none; background:none; box-shadow:none; overflow:visible; transition:opacity .18s, visibility 0s .18s; } .hm-stk.pin .hm-s.on { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .34s .12s, visibility 0s; } .hm-stk.pin .hm-s > * { transform:translateY(12px); transition:transform .18s; } .hm-stk.pin .hm-s.on > * { transform:none; transition:transform .46s var(--ease) .1s; } .hm-stk.pin .hm-s .sv-m { min-height:0; height:100%; }
@media (max-height:920px) { .hm-stk.pin .sec-head > div { gap:8px !important; } .hm-stk.pin .sec-head h2 { font-size:clamp(30px, 3.3vw, 44px); } .hm-stk.pin .sec-head .lead { font-size:15.5px; line-height:1.4; } .hm-stk.pin .hm-s .sv-sc { padding-block:18px; gap:8px; } .hm-stk.pin .hm-s .sv-sc h3 { font-size:clamp(24px, 2.5vw, 33px); } .hm-stk.pin .hm-s .sv-sc > p { font-size:15px; line-height:1.42; } .hm-stk.pin .hm-s .sv-pts li { font-size:14.5px; } .hm-stk.pin .hm-s .sv-m > *:not(.sv-ex):not(.hm-fc) { zoom:.92; } }
@media (max-height:780px) { .hm-stk.pin .sec-head .lead { display:none; } .hm-stk.pin .sec-head h2 br { display:none; } .hm-stk.pin .sec-head h2 { white-space:nowrap; } .hm-stk.pin .hm-sti { padding-top:80px; gap:9px; } .hm-stk.pin .hm-s .sv-tg { display:none; } .hm-stk.pin .hm-s .sv-m > *:not(.sv-ex):not(.hm-fc) { zoom:.78; } }
.hm-kk { position:relative; z-index:1; margin-bottom:16px; color:#fff; font-size:clamp(20px, 2vw, 25px); }

/* simple AI picker */
#hm-ai .aix-tab small { display:none; } #hm-ai .aix-tab { align-items:center; } #hm-ai .aix-tab b { font-size:16.5px; } #hm-ai .aix-panel { align-self:start; } .aix-desc { margin:-4px 0 14px; color:var(--mist); font-size:16px; line-height:1.5; }

/* about: a giant ! of 100 products, night into dawn */
.hm-abx { position:relative; color:#fff; background:#040817; } .hm-abx.pin { height:400vh; } .hm-abw { position:relative; isolation:isolate; overflow:hidden; } .pin .hm-abw { position:sticky; top:0; height:100vh; height:100svh; } .pin .hm-abg { height:100%; min-height:0; padding-block:96px 20px; grid-template-rows:minmax(0,1fr) auto; }
.hm-abd { position:absolute; inset:0; z-index:-2; opacity:0; background:radial-gradient(60% 90% at 78% 40%, #3d6bff, transparent 72%), radial-gradient(70% 45% at 76% 112%, rgba(239,143,98,.7), transparent 70%), linear-gradient(180deg, #081238, #16309c); will-change:opacity; }
.hm-abg { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:40px; min-height:max(100vh, 760px); padding-block:112px 28px; }
.hm-abt { align-self:center; display:grid; gap:18px; justify-items:start; } .hm-abt .kicker { color:#fff; } .hm-abt h2 { color:#fff; font-size:clamp(34px, 4vw, 56px); } .hm-abt h2 em.s { background:none; -webkit-text-fill-color:#dbe4ff; color:#dbe4ff; } .hm-abt .lead { max-width:560px; color:#dbe4ff; } .hm-abt .bang { color:#fff; }
.hm-aby { display:grid; gap:12px; width:100%; min-height:210px; align-content:start; margin-top:18px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); transition:opacity .17s, transform .17s; } .hm-aby.sw { opacity:0; transform:translateY(8px); } .hm-aby > b { font-family:var(--display); font-size:clamp(64px, 8.2vw, 118px); font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 10px 50px rgba(5,10,40,.3); } .hm-aby h3 { color:#fff; font-size:clamp(20px, 1.9vw, 26px); } .hm-aby p { margin-top:3px; color:#dbe4ff; font-size:16px; line-height:1.4; }
.hm-aba { position:relative; align-self:center; justify-self:center; grid-row:1; grid-column:2; height:min(580px, calc(100vh - 270px)); min-height:450px; aspect-ratio:8.6 / 19.4; } .hm-abi { position:absolute; inset:0; transform:rotate(7deg); }
.hm-abi i { position:absolute; width:62%; width:calc(100% / 8.6 * .6); aspect-ratio:1; border-radius:50%; background:#fff; opacity:.1; transform:translate(-50%, -50%); transition:opacity .5s, background .6s, box-shadow .6s, transform .35s var(--ease); } .hm-abi i.l { opacity:1; background:#9db4ff; box-shadow:0 0 14px 2px rgba(120,150,255,.65); }
.seed .hm-abi i.l { background:#fff; box-shadow:0 0 34px 10px rgba(255,214,130,.8); animation:hmSeed 1.8s ease-in-out infinite; } @keyframes hmSeed { 50% { box-shadow:0 0 54px 20px rgba(255,214,130,.55); } }
.today .hm-abi i.l { background:#8aa4ff; opacity:.42; box-shadow:none; } .today .hm-abi i.l.b { opacity:1; background:#fff; box-shadow:0 0 16px 3px rgba(255,255,255,.7); } .today .hm-abi i.l.n { background:#7ce8c0; box-shadow:0 0 18px 4px rgba(124,232,192,.8); }
.hm-abq { position:absolute; z-index:3; display:grid; gap:1px; padding:8px 13px; border-radius:13px; background:#fff; color:#0a0f1f; white-space:nowrap; opacity:0; transform:translate(-6px, -50%); pointer-events:none; box-shadow:0 14px 34px rgba(5,10,40,.4); transition:opacity .3s, transform .35s var(--ease); } .hm-abq.r { transform:translate(calc(-100% + 6px), -50%); } .hm-abq.on { opacity:1; transform:translate(0, -50%); } .hm-abq.on.r { transform:translate(-100%, -50%); } .hm-abq b { font-size:14.5px; font-weight:600; } .hm-abq span { color:#44464f; font-size:12.5px; }
.hm-aba small { position:absolute; left:50%; bottom:-38px; translate:-50% 0; display:flex; gap:18px; color:#dbe4ff; font-size:13px; white-space:nowrap; opacity:0; transition:opacity .5s; } .hm-aba small.on { opacity:1; } .hm-aba small span { display:inline-flex; align-items:center; gap:6px; } .hm-aba small i { width:9px; height:9px; border-radius:50%; background:#8aa4ff; } .hm-aba small i.b { background:#fff; } .hm-aba small i.n { background:#7ce8c0; }
.hm-abk { grid-column:1 / -1; align-self:end; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; margin-top:56px; padding:10px; border-radius:26px; background:rgba(8,14,44,.42); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 1px rgba(255,255,255,.13), 0 26px 60px rgba(5,10,40,.32); }
.hm-abs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; --f:0; } .hm-abs button { width:100%; display:grid; gap:1px; padding:10px 14px; border:0; border-radius:15px; background:none; color:#dbe4ff; text-align:left; cursor:pointer; font:500 14px/1.25 var(--body); transition:background .25s; } .hm-abs button:hover { background:rgba(255,255,255,.08); } .hm-abs button[aria-current=true] { background:#fff; color:#44464f; } .hm-abs b { color:#fff; font-family:var(--display); font-size:20px; font-weight:600; } .hm-abs [aria-current=true] b { color:#0a0f1f; }

/* real work */
.hm-wg { margin-top:0; } .hm-wg .wl-c { text-decoration:none; } #hm-work .lead .arrow-link, #hm-how .lead .arrow-link, #hm-why .lead .arrow-link { display:flex; margin-top:8px; } .wl-next { display:none; }

/* industries */
.hm-in { position:relative; z-index:1; display:grid; grid-auto-rows:1fr; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } .hm-in a { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:15px; align-items:center; padding:16px 44px 16px 16px; border-radius:20px; background:rgba(16,26,60,.5); border:1px solid rgba(157,180,255,.14); color:#fff; text-decoration:none; transition:border-color .25s, background .25s, transform .3s var(--ease); } .hm-in a:hover { transform:translateY(-3px); background:color-mix(in srgb, var(--c) 16%, rgba(16,26,60,.6)); border-color:color-mix(in srgb, var(--c) 60%, transparent); } .hm-in a > span { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:color-mix(in srgb, var(--c) 22%, transparent); color:color-mix(in srgb, var(--c) 58%, #fff); } .hm-in a > span svg { width:24px; height:24px; } .hm-in h3 { color:#fff; font-size:18.5px; } .hm-in p { margin-top:3px; color:var(--mist); font-size:14px; line-height:1.4; } .hm-in a > svg { position:absolute; right:16px; top:50%; width:17px; height:17px; margin-top:-8px; color:color-mix(in srgb, var(--c) 58%, #fff); transition:transform .25s; } .hm-in a:hover > svg { transform:translateX(4px); } .hm-inc { position:relative; z-index:1; display:flex; justify-content:center; margin-top:28px; }

/* blog and insights */
.hm-rw { position:relative; z-index:1; display:grid; gap:18px; } .hm-rail { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 4px 22px; margin:-6px -4px -10px; } .hm-rail::-webkit-scrollbar { display:none; } .hm-rail .bl-c { flex:0 0 calc((100% - 20px) / 2); scroll-snap-align:start; } .hm-rail .bl-b { display:flex; flex-direction:column; } .hm-rail .bl-g { padding-top:12px; } .still .hm-ra { display:none; } .hm-rc2 { display:flex; justify-content:space-between; align-items:center; gap:14px; } .hm-ra { display:flex; gap:9px; }

/* start here */
.hm-gf { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:14px; padding:14px; border-radius:30px; background:rgba(16,26,60,.55); border:1px solid rgba(157,180,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.35); }
.hm-gl { display:grid; gap:4px; align-content:start; } .hm-gl button { display:flex; align-items:center; gap:13px; width:100%; min-height:62px; padding:9px 14px 9px 10px; border:0; border-radius:16px; background:none; color:var(--mist); font:600 16.5px/1.25 var(--body); text-align:left; cursor:pointer; transition:background .25s, color .25s; } .hm-gl button:hover { background:rgba(157,180,255,.08); color:#fff; } .hm-gl button[aria-selected=true] { background:var(--blue); color:#fff; box-shadow:0 16px 34px rgba(41,90,255,.42); } .hm-gl span { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(157,180,255,.12); color:#dbe4ff; } .hm-gl [aria-selected=true] span { background:rgba(255,255,255,.2); color:#fff; } .hm-gl svg { width:19px; height:19px; }
.hm-gp { min-width:0; padding:26px 28px; border-radius:20px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14); } .hm-gp > div { display:grid; gap:12px; justify-items:start; animation:hmIn .4s var(--ease); } @keyframes hmIn { from { opacity:0; transform:translateY(10px); } } .hm-gp > div[hidden] { display:none; } .hm-gk { color:#9db4ff; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; } .hm-gp h3 { color:#fff; font-size:clamp(25px, 2.7vw, 36px); } .hm-gp > div > p:not(.hm-gk) { color:var(--mist); font-size:17px; line-height:1.5; }
.hm-gs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; width:100%; margin-block:8px; } .hm-gs a { position:relative; display:grid; gap:4px; align-content:start; padding:14px 34px 14px 14px; border-radius:14px; background:#fff; color:#0a0f1f; text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s; } .hm-gs a:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.34); } .hm-gs small { color:#2f55e8; font-size:12.5px; font-weight:600; } .hm-gs b { font-size:15px; font-weight:600; line-height:1.28; } .hm-gs svg { position:absolute; right:12px; top:15px; width:15px; height:15px; color:#2f55e8; }

/* responsible AI */
.hm-rf { position:relative; z-index:1; display:grid; gap:14px; margin-top:20px; padding:22px 24px; border-radius:24px; background:rgba(16,26,60,.5); border:1px solid rgba(157,180,255,.18); } .hm-rh { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 20px; } .hm-rh h3 { color:#fff; font-size:clamp(21px, 2.1vw, 26px); } .hm-rh p { color:var(--mist); font-size:15px; }
.hm-rc { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; } .hm-rc > div { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; } .hm-rc span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(41,90,255,.28); color:#dbe4ff; } .hm-rc span svg { width:18px; height:18px; } .hm-rc h4 { color:#fff; font-family:var(--display); font-size:17.5px; font-weight:600; } .hm-rc p { margin-top:2px; color:var(--mist); font-size:14.5px; line-height:1.4; }

/* sailber frame */
.hm-sb { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:12px; margin-top:20px; padding:16px; border-radius:30px; overflow:hidden; background:radial-gradient(60% 90% at 88% 10%, rgba(41,90,255,.5), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); color:#fff; text-decoration:none; } .hm-sc { display:grid; gap:14px; justify-items:start; align-content:center; padding:18px; } .hm-sc .wk-meta .c { background:rgba(157,180,255,.18); color:#dbe4ff; } .hm-sc .wk-meta > span:last-child { color:var(--mist); background:none; } .hm-sc h3 { color:#fff; font-size:clamp(25px, 2.8vw, 38px); } .hm-sc dl { width:100%; margin:0; display:grid; padding:0 16px; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,180,255,.14); } .hm-sc dl > div { padding:11px 0; } .hm-sc dl > div + div { border-top:1px solid rgba(157,180,255,.14); } .hm-sc dt { color:#9db4ff; font-size:13px; font-weight:600; } .hm-sc dd { margin:2px 0 0; color:#eef2ff; font-size:15px; line-height:1.42; } .hm-sc .wl-go { color:#fff; }
.hm-sm { display:flex; justify-content:center; align-items:center; gap:18px; min-width:0; padding:10px 6px; } .hm-ph { flex:0 1 44%; aspect-ratio:351/760; border-radius:26px; background:#000 var(--img) top/cover; box-shadow:0 0 0 4px #0b1020, 0 0 0 5px rgba(157,180,255,.3), 0 30px 60px rgba(0,0,0,.5); transition:transform .5s var(--ease); } .hm-ph:first-child { transform:rotate(-3deg) translateY(10px); } .hm-ph:last-child { transform:rotate(3deg) translateY(-10px); } .hm-sb:hover .hm-ph:first-child { transform:rotate(-1deg); } .hm-sb:hover .hm-ph:last-child { transform:rotate(1deg); }

/* client stories */
.hm-ctr { position:relative; z-index:1; display:grid; gap:14px; justify-items:center; text-align:center; max-width:860px; margin-inline:auto; } .hm-ctr .kicker::after { content:""; width:24px; height:2px; background:currentColor; }
.hm-cs { position:relative; z-index:1; } #hm-tst { padding-bottom:64px; } .hm-str { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-block:-34px -60px; padding:44px max(16px, calc((100% - 1040px) / 2)) 96px; cursor:grab; outline-offset:-4px; } .hm-str::-webkit-scrollbar { display:none; } .hm-str.drag { scroll-snap-type:none; cursor:grabbing; user-select:none; } .hm-str.jump { scroll-snap-type:none; } .hm-str.jump .hm-cl { transition:none; }
.hm-cl { flex:0 0 min(1040px, 100% - 64px); scroll-snap-align:center; display:grid; gap:12px; padding:12px; border-radius:30px; background:radial-gradient(60% 80% at 92% 4%, rgba(41,90,255,.5), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 26px 60px rgba(10,15,31,.2); opacity:.5; transition:opacity .4s; } .hm-cl.on { opacity:1; } .hm-cl.t { grid-template-columns:1fr; } .hm-cl.v { grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr); }
.hm-ty { align-self:flex-start; padding:5px 11px; border-radius:999px; background:color-mix(in srgb, #295aff 12%, transparent); color:#2f55e8; font-size:12.5px; font-weight:600; } .hm-tq { margin:0; display:flex; flex-direction:column; gap:22px; padding:36px 40px; border-radius:20px; background:#fff; color:#0a0f1f; } .hm-tq blockquote { margin:0; font-family:var(--display); font-size:clamp(20px, 2.4vw, 31px); font-weight:500; line-height:1.34; letter-spacing:-.012em; } .hm-tq figcaption { display:flex; align-items:center; gap:12px; margin-top:auto; } .hm-av { flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#2f55e8; color:#fff; font-weight:600; font-size:15px; } .hm-tq figcaption > span:last-child { display:grid; color:#44464f; font-size:14px; } .hm-tq figcaption b { color:#0a0f1f; font-size:16px; }
.hm-vs { position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(44% 58% at 50% 50%, rgba(111,147,255,.55), transparent 72%), repeating-radial-gradient(circle at 50% 50%, rgba(157,180,255,.1) 0 1px, transparent 1px 44px), linear-gradient(150deg, #16245f, #0a1030); box-shadow:inset 0 0 0 1px rgba(157,180,255,.22); } .hm-vs video, .hm-vs iframe { position:absolute; inset:0; z-index:4; width:100%; height:100%; border:0; background:#000; } .hm-vt { position:absolute; left:14px; top:14px; padding:5px 11px; border-radius:999px; background:rgba(255,197,92,.16); box-shadow:inset 0 0 0 1px rgba(255,197,92,.36); color:#ffdca0; font-size:12.5px; font-weight:600; } .hm-vp { width:84px; height:84px; display:grid; place-items:center; border:0; border-radius:50%; background:#fff; color:#2f55e8; cursor:pointer; box-shadow:0 0 0 12px rgba(255,255,255,.14), 0 22px 44px rgba(0,0,0,.45); transition:transform .3s var(--ease), box-shadow .3s; } .hm-vp:hover { transform:scale(1.07); box-shadow:0 0 0 18px rgba(255,255,255,.14), 0 22px 44px rgba(0,0,0,.45); } .hm-vp svg { width:32px; height:32px; margin-left:3px; } .hm-vm { position:absolute; left:50%; bottom:15px; translate:-50% 0; margin:0; padding:7px 13px; border-radius:999px; background:rgba(5,10,28,.84); color:#fff; font-size:13.5px; white-space:nowrap; }
.hm-vd { display:flex; flex-direction:column; gap:3px; justify-content:center; align-items:flex-start; padding:12px; color:var(--mist); font-size:14.5px; } .hm-vd .hm-ty { margin-bottom:auto; background:rgba(157,180,255,.16); color:#dbe4ff; } .hm-vd b { color:#fff; font-family:var(--display); font-size:22px; font-weight:600; } .hm-vd .hm-av.lg { margin-bottom:10px; width:58px; height:58px; font-size:20px; background:rgba(157,180,255,.16); color:#dbe4ff; }
.hm-cc { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:16px; } .hm-cb { width:46px; height:46px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:background .2s, color .2s, opacity .2s; } .hm-cb:not(:disabled):hover { background:var(--blue); color:#fff; } .hm-cb:disabled { opacity:.35; cursor:default; } .hm-cb svg { width:19px; height:19px; } .hm-dt { display:flex; gap:4px; } .hm-dt button { width:30px; height:30px; display:grid; place-items:center; border:0; background:none; cursor:pointer; } .hm-dt button::before { content:""; width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--blue) 26%, transparent); transition:width .3s, background .3s; } .hm-dt [aria-current]::before { width:26px; border-radius:6px; background:var(--blue); }

/* why */
.hm-cf { position:relative; z-index:1; padding:12px; border-radius:30px; background:radial-gradient(50% 80% at 40% 0%, rgba(41,90,255,.38), transparent 70%), linear-gradient(165deg, var(--night-3), var(--night)); box-shadow:0 0 0 1px var(--night-line), 0 30px 70px rgba(10,15,31,.2); } .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .hm-ct { width:100%; border-collapse:separate; border-spacing:0; color:var(--mist); font-size:15.5px; } .hm-ct th, .hm-ct td { padding:14px 18px; text-align:left; font-weight:400; border-top:1px solid rgba(157,180,255,.13); } .hm-ct thead th { border-top:0; color:#fff; font-family:var(--display); font-size:18px; font-weight:600; } .hm-ct tbody th { color:#fff; font-weight:500; } .hm-ct .us { position:relative; background:rgba(41,90,255,.34); color:#fff; font-weight:600; border-top-color:rgba(255,255,255,.14); } .hm-ct thead .us { border-radius:18px 18px 0 0; } .hm-ct tbody tr:last-child .us { border-radius:0 0 18px 18px; } .hm-ct td.us svg { width:16px; height:16px; margin-right:7px; vertical-align:-3px; color:#7ce8c0; }
.hm-tr { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:16px; } .hm-tr > div { padding:20px; border-radius:20px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line), 0 16px 40px rgba(41,90,255,.06); } .hm-tr span { width:40px; height:40px; margin-bottom:10px; display:grid; place-items:center; border-radius:12px; background:var(--blue); color:#fff; } .hm-tr span svg { width:19px; height:19px; } .hm-tr h3 { font-size:19px; } .hm-tr p { margin-top:5px; color:var(--muted); font-size:15px; line-height:1.45; } .hm-cz { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; } .hm-cz i { padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--blue) 9%, transparent); color:var(--at); font-size:12.5px; font-style:normal; font-weight:600; }

section[id], .hm-st { scroll-margin-top:84px; }

@media (min-width:1001px) { .band { padding-block:120px; } .sec-head { margin-bottom:60px; } }
@media (min-width:1181px) { .hm-rail.three .bl-c { flex-basis:calc((100% - 40px) / 3); } .hm-rail.three .bl-a { height:214px; padding:16px; } .hm-rail.three .bl-b h3 { font-size:clamp(19px, 1.7vw, 23px); } .hm-rail.three .bl-b p { font-size:15px; } }
@media (max-width:1180px) { .hm-tr { grid-template-columns:repeat(2, minmax(0,1fr)); } .hm-gs { grid-template-columns:1fr; } .hm-sg { grid-template-columns:repeat(3, minmax(0,1fr)); } .hm-sg a:nth-child(4) { border-left:0; } .hm-sg a:nth-child(n+4) { border-top:1px solid var(--line); } .hm-in { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-height:800px) { .pin .hm-abg { padding-top:84px; } .pin .hm-abt { gap:12px; } .pin .hm-abt h2 { font-size:clamp(30px, 3.2vw, 42px); } .pin .hm-abt .lead { font-size:16px; line-height:1.4; } .pin .hm-aby { min-height:150px; margin-top:6px; padding-top:14px; gap:6px; } .pin .hm-aby > b { font-size:clamp(56px, 6vw, 78px); } .pin .hm-aba { height:calc(100vh - 240px); min-height:0; } .pin .hm-abk { margin-top:44px; } }
@media (max-width:1000px) { .hm-abg { grid-template-columns:1fr; min-height:0; padding-block:96px 24px; } .hm-aba { grid-row:auto; grid-column:1; height:420px; min-height:0; margin-block:30px 40px; } .hm-abk { margin-top:0; } .pin .hm-abg { grid-template-rows:auto minmax(0,1fr) auto; padding-block:84px 14px; } .pin .hm-abt { gap:10px; } .pin .hm-abt h2 { font-size:clamp(28px, 5vw, 44px); } .pin .hm-aba { grid-row:2; align-self:start; height:calc(100% - 56px); min-height:0; margin-block:12px 0; } .pin .hm-aba small { bottom:-30px; gap:12px; font-size:12px; } .pin .hm-aby { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; min-height:76px; margin-top:2px; padding-top:10px; } .pin .hm-aby > b { font-size:clamp(50px, 9vw, 72px); } .pin .hm-aby h3 { font-size:18px; } .pin .hm-aby p { font-size:14.5px; } .pin .hm-abk { margin-top:0; } .hm-cl.t, .hm-cl.v { grid-template-columns:1fr; } .hm-cl.v { align-content:center; } .hm-vd { padding:14px 10px; } .hm-vd .hm-ty { margin:0 0 10px; } .hm-vd .hm-av.lg { display:none; } .hm-s .sv-sc { padding:32px 28px 10px; } .hm-rc { grid-template-columns:1fr; gap:14px; } .hm-rail .bl-c { flex-basis:min(78%, 420px); } .ab-s .sn { width:44px; height:44px; margin:-22px 0 0 -22px; } .ab-s b { font-size:40px; } .ab-s b em { font-size:12.5px; } .ab-s small { font-size:14px; } .ab-sky { min-height:880px; } .ab-s { align-content:start; padding-top:310px; } .ab-skc2 { margin-bottom:24px; } .hm-gf { padding:10px; } .hm-gl { grid-template-columns:repeat(2, minmax(0,1fr)); } .hm-gl button { min-height:56px; font-size:15px; } .hm-sm { padding:6px 30px 16px; } .hm-s.sv-sl, .hm-gf, .hm-sb { grid-template-columns:1fr; } .hm-hero .hero-in { padding-block:60px 100px; } }
@media (max-width:1000px) and (max-height:760px) { .pin .hm-abt .lead { display:none; } }
@media (max-width:640px) { .pin .hm-abk { gap:8px; padding:8px; } .pin .hm-abk .btn { height:42px; } .hm-fl { height:250px; margin-bottom:48px; } .hm-fp { padding:6px 10px; font-size:12px; border-radius:10px; } .hm-hero .hero-in { padding-top:36px; } .hm-gl { grid-template-columns:1fr; } .hm-gp { padding:20px 16px; } .hm-cl { flex-basis:calc(100% - 44px); padding:8px; } .hm-tq { padding:20px 16px; } .hm-vp { width:66px; height:66px; } .hm-abk { grid-template-columns:1fr; gap:12px; padding:10px; } .hm-abs { grid-template-columns:repeat(4, minmax(0,1fr)); gap:2px; } .hm-abs span { display:none; } .hm-abs button { padding:9px 4px; text-align:center; } .hm-abs b { font-size:15.5px; } .hm-aby { min-height:176px; } .hm-aba { height:360px; } .hm-abk .btn { justify-self:stretch; justify-content:center; } .hm-rail .bl-c { flex-basis:88%; } .hm-tq { padding:22px 18px; } .hm-tr { grid-template-columns:1fr; } .hm-sb { padding:10px; } .hm-sc { padding:12px; } .hm-ph { border-radius:20px; } .hm-rf { padding:16px; } .hm-ct, .hm-ct tbody, .hm-ct tr, .hm-ct th, .hm-ct td { display:block; } .hm-ct thead { display:none; } .hm-ct tr { padding:13px 8px; } .hm-ct tr + tr { border-top:1px solid rgba(157,180,255,.14); } .hm-ct tbody th, .hm-ct td { padding:3px 0; border:0; } .hm-ct tbody th { margin-bottom:6px; } .hm-ct td { display:flex; justify-content:space-between; gap:14px; font-size:14.5px; } .hm-ct td { text-align:right; } .hm-ct td::before { content:attr(data-l); flex:none; color:#9db4ff; text-align:left; } .hm-ct .us, .hm-ct tbody tr:last-child .us { background:none; border-radius:0; } .hm-ct td.us svg { display:none; } .hm-sg { grid-template-columns:1fr; } .hm-sg a + a { border-left:0; border-top:1px solid var(--line); } .hm-in { grid-template-columns:1fr; } .hm-k { border-radius:16px; } .hm-p { padding:20px; } .hm-s .sv-sc { padding:24px 18px; } .hm-s .sv-m { min-height:0; padding:16px 14px 22px; } .hm-s .sv-m:has(.sv-ph) { min-height:440px; } .hm-s .sv-tg { display:none; } }
@media (prefers-reduced-motion: reduce) { .hm-gp > div, .seed .hm-abi i.l, }
/* services: the screens play along with the scroll */
.hm-stn [aria-pressed=true], .hm-stn [aria-pressed=true]:hover { background:linear-gradient(90deg, #1a3fd0 calc(var(--sp, 0) * 100%), var(--blue) 0); }
.hm-rg { position:absolute; right:-6%; top:50%; width:min(62%, 720px); aspect-ratio:1; margin-top:calc(min(62vw, 720px) / -2); fill:none; stroke:rgba(157,180,255,.2); stroke-width:1.2; pointer-events:none; } .hm-rg .a { stroke-dasharray:4 14; } .hm-rg .b { stroke-dasharray:120 60; stroke:rgba(143,168,255,.3); } .hm-rg .c { stroke-dasharray:2 10; stroke:rgba(157,180,255,.34); }
.hm-s .sv-m { perspective:1300px; } .hm-s .sv-m::before { content:""; position:absolute; left:12%; right:12%; top:16%; bottom:12%; border-radius:50%; background:radial-gradient(closest-side, rgba(41,90,255,.62), transparent); filter:blur(30px); transform:scale(calc(.82 + var(--sh, 0) * .3)); pointer-events:none; }
.hm-s .sv-chat, .hm-s .sv-app, .hm-s .sv-store, .hm-s .sv-mk { position:relative; overflow:hidden; transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)); will-change:transform; box-shadow:0 44px 90px rgba(2,6,20,.62), 0 0 0 1px rgba(157,180,255,.14); animation:hmIdle 7s ease-in-out infinite; }
@keyframes hmIdle { 50% { translate:0 -7px; } }
.hm-s .sv-chat::after, .hm-s .sv-app::after, .hm-s .sv-store::after, .hm-s .sv-mk::after { content:""; position:absolute; inset:0 -40%; z-index:5; pointer-events:none; background:linear-gradient(105deg, transparent 44%, rgba(255,255,255,.34) 50%, transparent 56%); transform:translateX(calc(-46% + var(--sh, 0) * 92%)); }
.hm-s .sv-pts li svg { transform:scale(calc(.4 + var(--g, 1) * .6)); opacity:calc(.25 + var(--g, 1) * .75); }
.hm-fc { position:absolute; z-index:6; display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:13px; background:rgba(255,255,255,.96); color:#0a0f1f; font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 20px 44px rgba(2,6,20,.5); opacity:var(--g, 1); transform:translate3d(0, calc(var(--py, 0px) + (1 - var(--g, 1)) * 26px), 60px) scale(calc(.86 + var(--g, 1) * .14)); animation:hmIdle 5s ease-in-out infinite; } .hm-fc svg { width:15px; height:15px; color:#0a7350; flex:none; } .hm-fc.a { left:3%; top:14%; } .hm-fc.b { right:5%; bottom:9%; animation-delay:-2s; }
.hm-s .sv-act { min-height:20px; position:relative; flex-wrap:wrap; color:#44464f; } .hm-s .sv-act.done { color:#0a7350; } .hm-a2, .hm-s .sv-act.done .hm-a1 { display:none; } .hm-s .sv-act.done .hm-a2 { display:inline; } .hm-chk { display:none; } .hm-s .sv-act.done .hm-chk { display:inline-flex; } .hm-s .sv-act u { flex:1 0 100%; height:3px; border-radius:3px; overflow:hidden; background:#e7eaf3; text-decoration:none; } .hm-s .sv-act u::after { content:""; display:block; height:100%; background:var(--blue); transform:scaleX(var(--p, 0)); transform-origin:left; } .hm-s .sv-act.done u { display:none; }
.hm-s .sv-typ { display:none !important; } .hm-on { opacity:1 !important; transform:none !important; } .sv-msg.ai { position:relative; } .hm-rest { visibility:hidden; } .hm-dots { display:none; position:absolute; left:14px; top:50%; gap:4px; transform:translateY(-50%); } .typing .hm-dots { display:flex; } .hm-dots i { width:7px; height:7px; border-radius:50%; background:#596175; animation:svT 1s infinite; } .hm-dots i:nth-child(2) { animation-delay:.15s; } .hm-dots i:nth-child(3) { animation-delay:.3s; }
.hm-s .sv-ph.a { transform:translateY(-54%) translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, -3deg)); } .hm-s .sv-ph.b { transform:translateY(-44%) translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 3deg)); } .hm-s .sv-ph { animation:hmIdle 7s ease-in-out infinite; } .hm-s .sv-ph.b { animation-delay:-3s; }
.sv-map svg { position:absolute; inset:0; width:100%; height:100%; fill:none; } .sv-map .bg { stroke:#cdd7f2; stroke-width:5; stroke-linecap:round; } .sv-map .fg { stroke:var(--blue); stroke-width:5; stroke-linecap:round; } .hm-s .sv-map u { z-index:2; margin:-8px 0 0 -8px; }
.hm-s .sv-sp i { transform:scaleY(var(--g, 1)) !important; animation:none !important; transition:none !important; }
.hm-s .sv-ks span { position:relative; transition:box-shadow .25s, background .25s; } .hm-s .sv-ks span.hot { background:#e8edff; box-shadow:inset 0 0 0 1.5px var(--blue); }
.hm-lw { position:relative; display:block; } .hm-dot { position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(41,90,255,.2); }
.hm-cur { position:absolute; left:0; top:0; z-index:7; width:22px; height:22px; opacity:var(--o, 0); transform:translate3d(var(--x, 0px), var(--y, 0px), 0); pointer-events:none; } .hm-cur svg { width:100%; height:100%; fill:#0a0f1f; stroke:#fff; stroke-width:1.6; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); transition:transform .12s; } .hm-cur.press svg { transform:scale(.8); }
.hm-s .sv-sh { transform:translateY(calc((1 - var(--g, 1)) * 16px)); opacity:calc(.3 + var(--g, 1) * .7); } .hm-s .sv-pr > div > span { transform:translateY(calc((1 - var(--g, 1)) * 20px)); opacity:var(--g, 1); }
@media (max-width:1000px) { .hm-s .sv-m { padding-block:62px; } .hm-fc { font-size:12px; padding:7px 10px; box-shadow:0 8px 20px rgba(2,6,20,.32); transform:translateY(calc((1 - var(--g, 1)) * 12px)); animation:none; } .hm-fc.a { left:14px; top:14px; } .hm-fc.b { right:14px; bottom:14px; } .hm-s .sv-ex { top:18px; } }
@media (prefers-reduced-motion:reduce) { .hm-s .sv-chat, .hm-s .sv-app, .hm-s .sv-store, .hm-s .sv-mk, .hm-s .sv-ph, .hm-fc { animation:none; } }
/* the difference: two clear cards instead of the drag comparison on tablets and phones */
@media (max-width:1000px) {
  .ba { height:auto; display:grid; gap:14px; overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
  .ba-side { position:relative; inset:auto; padding:68px 20px 20px; border-radius:26px; }
  .ba-before { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; border:1px solid var(--line); } .ba-after { clip-path:none; }
  .ba-label { top:18px; } .ba-label.l { left:18px; } .ba-label.r { left:18px; right:auto; }
  .bc, .b-inbox, .b-sheet, .b-tasks, .b-toast { position:static; display:block; width:auto; transform:none; filter:none; } .b-toast { display:flex; }
  .ba input, .ba-handle { display:none; }
  .after-in { position:static; display:block; padding:0; } .sys { width:100%; aspect-ratio:auto; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } .sys svg.wires { display:none; }
  .core { position:static; grid-column:1 / -1; order:-1; width:100%; height:auto; padding:20px; margin-bottom:6px; border-radius:20px; transform:none; box-shadow:0 18px 44px rgba(41,90,255,.42); }
  .node { position:static; transform:none; min-width:0; padding:12px 13px; font-size:13.5px; white-space:normal; box-shadow:none; } .node:nth-of-type(5) { grid-column:1 / -1; }
  .ba-status { position:static; transform:none; width:auto; max-width:none; margin-top:14px; justify-content:flex-start; }
}
@media (max-width:640px) { .ba-before { grid-template-columns:minmax(0,1fr); } .b-tasks { display:none; } .ba-status span { font-size:12px; } }
/*read:start*/
/* readability pass: stronger text everywhere, one place */
:root[data-theme="light"] { --at:#1f48e0; --muted:#4f576b; --menu-bg:rgba(255,255,255,.97); }
:root[data-theme="dark"] { --at:#a3b8ff; --menu-bg:rgba(9,15,38,.97); }
.logos p { color:var(--ink); font-size:18px; font-weight:600; letter-spacing:-.01em; margin-bottom:30px; }
.ms-prev { background:linear-gradient(150deg, #2a52e8, #1430b0); }
.ms-prev .k, .ms-prev p, .pp-rk, .pf-rk { color:#fff; }
.ms-prev .pills span { background:rgba(255,255,255,.06); }
.model.hot .arrow-link, .model.hot .best { color:var(--sky); }
.wl-f button[aria-pressed="true"] i { background:rgba(5,10,28,.26); }
.clk.home small, .clk.home span, .cf-cl .clk.home small, .cf-cl .clk.home span, .cf-sd .ct-types button[aria-checked="true"] small { color:#fff; }
.ab-s small { opacity:1; font-weight:600; text-shadow:0 1px 8px rgba(5,10,28,.55); }
.kl-hi { background:#b45f06; }
:root[data-theme="light"] .pp-mk { color:color-mix(in srgb, var(--c) 66%, #000); }
.pp-tabs button[aria-selected="true"] .pp-mk { color:#fff !important; }
.sk-n { opacity:1; }
.ed-code .c { color:#98a4c4; }
.wa-views button { color:#e3e9ff; }
.mk-cal .cp.ig { background:linear-gradient(120deg, #b84f12, #c41f6b, #7a2ea8); }
.ma-av { background:linear-gradient(140deg, #d4562f, #c23a55); }
.pa-n { background:linear-gradient(150deg, #3d6bff, #1f48e0); }
.pa-n small { opacity:1; }
@media (max-width:640px) { .logos p { font-size:16px; margin-bottom:24px; } }
/*read:end*/