:root{
  color-scheme: light;
  --white:#ffffff;
  --gray:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --link:#0066cc;
  --violet:#7c5cff;
  --cyan:#16b8d9;
  --pink:#ff6fae;
  --optic:#c8e637;
  --grad:linear-gradient(90deg,#0a84ff 0%,#7c5cff 55%,#c264ff 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --r-xl:32px;
  --r-lg:24px;
  --r-md:18px;
  --pad:clamp(20px,5vw,48px);
  --max:1180px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 17px/1.47 var(--font);letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
a{color:inherit}
::selection{background:rgba(0,113,227,.2)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
[id]{scroll-margin-top:80px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:calc(var(--max) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- type scale ---------- */
.eyebrow{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.h-hero{font-size:clamp(48px,8vw,104px);font-weight:700;line-height:1.02;letter-spacing:-.045em}
.h-sec{font-size:clamp(40px,5.6vw,72px);font-weight:700;line-height:1.05;letter-spacing:-.04em}
.h-tile{font-size:clamp(26px,2.4vw,34px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.sub{font-size:clamp(19px,1.8vw,24px);font-weight:500;line-height:1.35;letter-spacing:-.02em;color:var(--ink-2)}
.body{font-size:17px;line-height:1.53;color:var(--ink-2)}

/* ---------- liquid glass ---------- */
.lg{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.04);
  backdrop-filter:blur(22px) saturate(190%) brightness(1.04);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(255,255,255,.4),
    inset 0 10px 24px -14px rgba(255,255,255,.9),
    0 10px 30px -10px rgba(20,24,40,.18),
    0 2px 6px rgba(20,24,40,.05);
}
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(140deg,rgba(255,255,255,1),rgba(255,255,255,.15) 35%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.55),transparent 55%);
}

/* ---------- nav ---------- */
.nav-wrap{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;transition:box-shadow .4s var(--ease)}
.brand{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;font-size:15px;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand-dot{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,#0a84ff,#7c5cff,#c264ff,#16b8d9,#0a84ff);box-shadow:inset 0 1px 1px rgba(255,255,255,.7)}
.nav-links{display:flex;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:500;color:rgba(29,29,31,.8);text-decoration:none;transition:background .25s,color .25s}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink);background:rgba(255,255,255,.7)}
.nav-cta{margin-left:4px;padding:8px 16px;border-radius:999px;background:var(--blue);color:#fff;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .25s}
.nav-cta:hover{background:var(--blue-hover)}
.menu-btn{display:none;width:36px;height:36px;margin-left:4px;border:0;border-radius:50%;background:rgba(118,118,128,.12);color:var(--ink);cursor:pointer;place-content:center;gap:4px;transition:background .3s,color .3s}
.menu-btn:hover{background:rgba(118,118,128,.2)}
.menu-btn span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:880px){.nav-links{display:none}.menu-btn{display:grid}}
/* language switch: nav pill (desktop), menu row (mobile), footer link */
.nav-lang{margin-left:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-2);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .25s,color .25s,box-shadow .25s}
.nav-lang:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.nav.on-dark .nav-lang{color:rgba(245,245,247,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.nav.on-dark .nav-lang:hover{color:#fff;background:rgba(255,255,255,.14)}
@media (max-width:880px){.nav-lang{display:none}}
.mobile-menu .menu-lang{display:flex;align-items:center;gap:10px;margin-top:6px;padding:16px 18px 10px;border-top:1px solid rgba(0,0,0,.08);border-radius:0;font-size:17px;letter-spacing:-.01em;color:var(--ink-2)}
.mobile-menu .menu-lang:hover{background:none;color:var(--ink)}
.menu-lang svg{width:20px;height:20px;color:#7c5cff}
/* over dark sections ([data-nav-dark]) the pill turns into dark glass */
.nav{transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.nav::before,.nav::after{transition:opacity .45s var(--ease)}
.brand{transition:color .3s}
.nav.on-dark{background:linear-gradient(180deg,rgba(64,64,70,.58),rgba(30,30,34,.46));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),0 12px 30px -12px rgba(0,0,0,.6)}
.nav.on-dark::before{opacity:.3}
.nav.on-dark::after{opacity:.2}
.nav.on-dark .brand,.nav.on-dark .menu-btn{color:#f5f5f7}
.nav.on-dark .nav-links a{color:rgba(245,245,247,.75)}
.nav.on-dark .nav-links a:hover,.nav.on-dark .nav-links a.is-active{color:#fff;background:rgba(255,255,255,.14)}
.nav.on-dark .menu-btn{background:rgba(255,255,255,.16)}
.mobile-menu{position:fixed;left:12px;right:12px;top:calc(70px + env(safe-area-inset-top,0px));z-index:49;display:grid;padding:10px;border-radius:28px;animation:sheet .5s var(--ease)}
.mobile-menu.lg{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.78))}
.mobile-menu a{padding:14px 18px;border-radius:18px;font-size:22px;font-weight:600;letter-spacing:-.03em;text-decoration:none}
.mobile-menu a:hover{background:rgba(255,255,255,.7)}
@keyframes sheet{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;font:600 17px/1 var(--font);letter-spacing:-.02em;text-decoration:none;cursor:pointer;border:0;transition:background .25s,transform .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-hover)}
.link-more{display:inline-flex;align-items:center;gap:4px;font-size:17px;font-weight:500;color:var(--link);text-decoration:none}
.link-more:hover{text-decoration:underline}
.link-more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.link-more:hover svg{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(120px,14vw,170px);text-align:center;background:linear-gradient(180deg,var(--gray),var(--white) 60%)}
.hero-text{display:grid;justify-items:center;gap:18px;max-width:900px;margin-inline:auto;padding-inline:var(--pad)}
.hero .h-hero{margin-top:4px}
.hero .sub{max-width:30em}
html[lang="en"] .hero-text{max-width:1060px}
.nobr{white-space:nowrap}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:14px}

.stage-wrap{padding:clamp(48px,6vw,80px) var(--pad) clamp(80px,10vw,140px)}
.stage{
  position:relative;max-width:var(--max);margin-inline:auto;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  transform:scale(var(--st,1));transform-origin:50% 0;will-change:transform;
  background:#eef1f8;
  box-shadow:0 40px 80px -40px rgba(40,50,90,.35);
}
.mesh{position:absolute;inset:-10%;filter:blur(30px) saturate(125%)}
.mesh i{position:absolute;border-radius:50%;opacity:.85}
.mesh i:nth-child(1){width:55%;height:70%;left:-5%;top:-10%;background:radial-gradient(closest-side,#7fb8ff,#7fb8ffcc 45%,transparent);animation:float-a 18s ease-in-out infinite alternate}
.mesh i:nth-child(2){width:50%;height:65%;right:-8%;top:0;background:radial-gradient(closest-side,#b9a3ff,#b9a3ffcc 45%,transparent);animation:float-b 22s ease-in-out infinite alternate}
.mesh i:nth-child(3){width:45%;height:55%;left:25%;bottom:-20%;background:radial-gradient(closest-side,#8fe3ef,#8fe3efcc 45%,transparent);animation:float-a 20s ease-in-out infinite alternate-reverse}
.mesh i:nth-child(4){width:30%;height:40%;right:12%;bottom:-6%;background:radial-gradient(closest-side,#ffc3dd,#ffc3ddcc 45%,transparent);animation:float-b 16s ease-in-out infinite alternate-reverse}
@keyframes float-a{to{transform:translate(8%,10%) scale(1.1)}}
@keyframes float-b{to{transform:translate(-10%,8%) scale(.92)}}
.stage-photo{
  position:absolute;left:50%;top:7%;bottom:0;margin:0;aspect-ratio:4/5;transform:translateX(-50%);
  border-radius:28px 28px 0 0;overflow:hidden;background:#cfcdcb;
  box-shadow:0 30px 70px -20px rgba(30,40,80,.45),0 0 0 1px rgba(255,255,255,.5);
}
.stage-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* iMessage-style thread around the portrait */
.chat{position:absolute;inset:0;z-index:2;pointer-events:none}
.b{
  --r:22px;--rt:18px;
  position:absolute;max-width:min(30%,360px);padding:11px 16px 12px;
  font-size:clamp(14px,1.25vw,17px);font-weight:500;line-height:1.3;letter-spacing:-.015em;
  filter:drop-shadow(0 8px 12px rgba(20,30,70,.14));
  text-align:left;
}
/* Bubble + tail read as one shape, like iMessage:
   - body (::before) and tail (::after) are both cut with clip-path, so their edges share the same
     sub-pixel position (a plain background would be pixel-snapped and leave a half-pixel step);
   - the tail covers the body's corner on its side (--rt), leaves the side edge tangentially, sweeps
     out to the tip and curls back into the bottom edge;
   - the blue gradient is anchored to the bottom in px, so body and tail match at every height;
   - the shadow is a drop-shadow filter, so it follows body and tail together. */
.b::before,.b::after{content:"";position:absolute;background:var(--bf);background-repeat:no-repeat}
.b::before{inset:-1px;background-position:0 -1px}
.b::after{bottom:0;width:24.75px;height:20.25px}
.b.in{--bf:#fff;color:var(--ink);left:12.5%}
.b.out{--bf:linear-gradient(0deg,#0a7cff,#2b95ff 64px);color:#fff;right:12.5%}
.b.in::before{clip-path:inset(1px round var(--r) var(--r) var(--r) var(--rt))}
.b.out::before{clip-path:inset(1px round var(--r) var(--r) var(--rt) var(--r))}
.b.in::after{left:-6.75px;clip-path:path("M 6.75 0 C 6.75 9 5.62 16.43 0 20.25 C 2.93 19.57 5.29 17.55 7.88 17.55 C 11.81 17.55 15.75 20.25 24.75 20.25 L 24.75 0 Z")}
.b.out::after{right:-6.75px;clip-path:path("M 18 0 C 18 9 19.12 16.43 24.75 20.25 C 21.82 19.57 19.46 17.55 16.88 17.55 C 12.94 17.55 9 20.25 0 20.25 L 0 0 Z")}
.b span,.b.typing i{position:relative;z-index:1}
.b[style*="--slot:0"]{top:8%}
.b[style*="--slot:1"]{top:21%}
.b[style*="--slot:2"]{top:37%}
.b[style*="--slot:3"]{top:50%}
.b[style*="--slot:4"]{top:66%}
.b[style*="--slot:5"]{top:79%}
.b.pop{animation:pop .55s cubic-bezier(.34,1.56,.64,1) both}
.b.in.pop{transform-origin:0 100%}
.b.out.pop{transform-origin:100% 100%}
@keyframes pop{from{opacity:0;transform:scale(.55) translateY(12px)}to{opacity:1;transform:none}}
.chat.bye .b{animation:bye .5s var(--ease) forwards}
@keyframes bye{to{opacity:0;transform:translateY(-10px) scale(.96)}}
.b.typing{display:flex;gap:5px;align-items:center;padding:15px 16px}
.b.typing i{width:8px;height:8px;border-radius:50%;background:#b8b8bf;animation:dots 1.1s ease-in-out infinite}
.b.out.typing i{background:rgba(255,255,255,.85)}
.b.typing i:nth-child(2){animation-delay:.15s}
.b.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.b .receipt{position:absolute;z-index:1;right:4px;top:calc(100% + 6px);font-size:11.5px;font-weight:600;color:rgba(29,29,31,.55);white-space:nowrap}
@media (max-width:760px){
  .stage{aspect-ratio:4/5;border-radius:26px}
  .stage-photo{top:6%;width:80%;aspect-ratio:auto}
  .chat{top:auto;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;
    padding:56px 14px 16px;min-height:46%;
    background:linear-gradient(180deg,rgba(10,14,30,0),rgba(10,14,30,.28) 45%,rgba(10,14,30,.5));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  .b{--r:19px;--rt:16px;position:relative;top:auto!important;left:auto;right:auto;max-width:80%;padding:9px 14px 10px;font-size:14.5px;line-height:1.28;
    filter:drop-shadow(0 5px 9px rgba(0,0,0,.24));transition:opacity .35s ease,transform .35s ease}
  .b.in,.b.out{left:auto;right:auto}
  .b.in{align-self:flex-start;margin-left:6px}
  .b.out{align-self:flex-end;margin-right:6px}
  .b::after{width:22px;height:18px}
  .b.in::after{left:-6px;clip-path:path("M 6 0 C 6 8 5 14.6 0 18 C 2.6 17.4 4.7 15.6 7 15.6 C 10.5 15.6 14 18 22 18 L 22 0 Z")}
  .b.out::after{right:-6px;clip-path:path("M 16 0 C 16 8 17 14.6 22 18 C 19.4 17.4 17.3 15.6 15 15.6 C 11.5 15.6 8 18 0 18 L 0 0 Z")}
  .b.leaving{opacity:0;transform:translateY(-8px) scale(.96)}
  .b.pop{animation-duration:.42s}
  .b .receipt{display:none}
}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.hero .rv{transition-duration:1.2s}

/* ---------- sections ---------- */
.section{padding-block:clamp(90px,11vw,160px)}
.section.gray,.clients.gray{background:var(--gray)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head.center{justify-items:center;text-align:center}
.sec-head .sub{max-width:34em}

/* manifest */
.manifest{padding-block:clamp(100px,13vw,190px);text-align:center}
.manifest .eyebrow{margin-bottom:28px}
.manifest-text{max-width:22em;margin-inline:auto;font-size:clamp(30px,4.2vw,56px);font-weight:700;line-height:1.14;letter-spacing:-.035em;color:var(--ink)}
.js .manifest-text .w{color:#d2d2d7;transition:color .35s linear;white-space:nowrap}
.js .manifest-text .w.on{color:var(--ink)}
.js .manifest-text .g .w.on{color:var(--violet)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:470px;padding:clamp(28px,3vw,40px);border-radius:var(--r-xl);background:var(--white);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tile:hover{transform:scale(1.008);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.tile-xl{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:stretch;min-height:560px}
.tile-l{grid-column:span 5}
.tile-m{grid-column:span 4}
.tile-s{grid-column:span 3}
.xl-text{display:flex;flex-direction:column;gap:14px}
.tile-xl .h-tile{font-size:clamp(32px,3.4vw,48px);letter-spacing:-.035em}
.tile-kicker{font-size:15px;font-weight:600;letter-spacing:-.01em}
.tile .body{max-width:30em}
.tile .visual{flex:1;display:grid;place-items:center;min-height:180px;margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0;padding:0}
.tags li{padding:7px 13px;border-radius:999px;background:var(--gray);font-size:13px;font-weight:500;color:var(--ink)}
.tile.dark{background:#000;color:#f5f5f7}
.tile.dark .h-tile{color:#f5f5f7}
.tile.dark .body{color:#a1a1a6}
.tile.court-tile{background:linear-gradient(160deg,#fbfdf0,#eef6cf)}
@media (max-width:1060px){.tile-l{grid-column:1 / -1}.tile-m{grid-column:span 7}.tile-s{grid-column:span 5}}
@media (max-width:860px){.tile-xl{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}.tile-l,.tile-m,.tile-s{grid-column:1 / -1}.tile{min-height:0}}

.focus-stage{position:relative;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;min-height:380px;border-radius:24px;overflow:hidden;background:radial-gradient(90% 90% at 50% 50%,#f7f8fc,#eef0f6)}
.focus-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.focus-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.8);font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;pointer-events:none}
.focus-meter{margin-top:auto;display:grid;gap:10px;padding-top:12px}
.fm-row{display:flex;justify-content:space-between;align-items:baseline}
.fm-label{font-size:15px;font-weight:600;color:var(--ink)}
.fm-ends{display:flex;justify-content:space-between;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.fm-val{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fm-bar{height:6px;border-radius:99px;background:var(--gray);overflow:hidden}
.fm-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--grad);transform-origin:left;transform:scaleX(var(--f,0))}

.stop-a{stop-color:#16b8d9}
.stop-b{stop-color:#0a84ff}
.stop-c{stop-color:#7c5cff}

.path-art{width:100%;max-width:420px;height:auto;overflow:visible}
.path-art .path-bg{fill:none;stroke:#d2d2d7;stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.path-art .path-fg{fill:none;stroke:url(#path-grad);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.path-art .node{fill:#fff;stroke:var(--violet);stroke-width:2}
.path-art .node-goal{fill:var(--violet)}
.path-art text{font:600 10px var(--font);fill:var(--ink-3)}

.court{width:100%;max-width:340px;height:auto;overflow:visible}
.court .ln{fill:none;stroke:#5c6b2a;stroke-opacity:.45;stroke-width:1.1}
.court .net{stroke:#3d4a17;stroke-opacity:.7;stroke-width:1.6;stroke-dasharray:3 2.5}
.court .ball-core{fill:var(--optic);stroke:#7c8f1f;stroke-width:.6}
.court .ball-glow{fill:var(--optic);opacity:.45}
.court .ball{animation:rally 6.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes rally{0%{transform:translate(14px,30px)}25%{transform:translate(222px,80px)}50%{transform:translate(18px,84px)}75%{transform:translate(220px,26px)}100%{transform:translate(14px,30px)}}
.art-label{font-size:12px;font-weight:600;color:#6b7a2e}

.term{width:100%;border-radius:14px;background:#1c1c1e;border:1px solid #2c2c2e;overflow:hidden}
.term-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #2c2c2e}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a3c}
.term pre{margin:0;padding:14px 16px 16px;font:400 13px/1.8 var(--mono);color:#e5e5ea;white-space:pre-wrap;overflow-wrap:anywhere}
.term .pr{color:#64d2ff}
.term .ok{color:#30d158}
.caret{display:inline-block;width:8px;height:15px;margin-left:3px;vertical-align:-2px;background:#e5e5ea;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.about-photo{margin:0;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--gray)}
.about-photo img{width:100%;height:112%;object-fit:cover;object-position:50% 70%;transform:translate3d(0,var(--py,0px),0)}
.about-body{display:grid;gap:22px}
.about-body .body{font-size:clamp(17px,1.4vw,19px);color:var(--ink-2)}
.about-body .body strong{color:var(--ink);font-weight:600}
.skills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.skills li{padding:9px 15px;border-radius:999px;background:var(--gray);font-size:14px;font-weight:500}
@media (max-width:880px){.about{grid-template-columns:minmax(0,1fr)}.about-photo{max-width:520px}}

/* method */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.step{display:grid;gap:14px;align-content:start;padding:clamp(28px,3vw,40px);border-radius:var(--r-xl);background:var(--white)}
.step-no{font-size:clamp(56px,6vw,80px);font-weight:700;line-height:1;letter-spacing:-.05em}
.step h3{font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;margin-top:18px}
@media (max-width:880px){.steps{grid-template-columns:minmax(0,1fr)}}

/* experience */
/* timeline: gradient rail, nodes and soft cards; the current role pulses */
.exp{position:relative;list-style:none;margin:0;padding:0 0 0 40px;display:grid;gap:14px}
.exp::before{content:"";position:absolute;left:10px;top:43px;bottom:0;width:2px;border-radius:2px;background:linear-gradient(180deg,#0a84ff,#7c5cff 60%,rgba(194,100,255,0))}
.exp>li{position:relative;display:grid;grid-template-columns:210px minmax(0,1fr);gap:10px 36px;align-items:start;padding:28px 32px 30px;border-radius:26px;background:linear-gradient(180deg,#fbfbfd,#f3f4f7);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.035);transition:translate .6s var(--ease),box-shadow .6s var(--ease)}
.exp>li:hover{translate:0 -3px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.035),0 26px 50px -34px rgba(20,30,70,.45)}
.exp>li::before{content:"";position:absolute;left:-36px;top:36px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #0a84ff,0 0 0 5px rgba(10,132,255,.12)}
.exp>li.exp-now::before{background:linear-gradient(135deg,#0a84ff,#7c5cff);box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(10,132,255,.3)}
.exp>li.exp-now::after{content:"";position:absolute;left:-36px;top:36px;width:14px;height:14px;border-radius:50%;animation:exp-pulse 2.4s var(--ease) infinite}
@keyframes exp-pulse{0%{box-shadow:0 0 0 0 rgba(10,132,255,.45)}80%,100%{box-shadow:0 0 0 14px rgba(10,132,255,0)}}
.exp-when{justify-self:start;display:inline-flex;align-items:center;min-height:30px;padding:6px 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px -3px rgba(20,30,70,.18);font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap}
.exp-now .exp-when{background:linear-gradient(135deg,#0a84ff,#7c5cff);color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 6px 14px -6px rgba(60,70,200,.55)}
.exp h3{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.03em}
.exp p{margin-top:8px;color:var(--ink-2);max-width:40em}
.exp .exp-clients-label{margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.exp-clients{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.exp-clients li{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:8px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px -3px rgba(20,30,70,.16);font-size:14px;line-height:1.3}
.exp-clients b{font-weight:600;color:var(--ink)}
.exp-clients span{color:var(--ink-3)}
.exp-clients img{width:auto;height:16px}
@media (max-width:700px){
  .exp{padding-left:28px;gap:12px}
  .exp::before{left:6px;top:35px}
  .exp>li{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 20px 22px;border-radius:22px}
  .exp>li::before,.exp>li.exp-now::after{left:-27px;top:29px;width:12px;height:12px}
  .exp-clients{display:grid}
}
@media (prefers-reduced-motion:reduce){.exp>li.exp-now::after{animation:none}}

/* education */
.edu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.edu-card{display:grid;gap:10px;align-content:start;padding:clamp(26px,2.6vw,36px);border-radius:var(--r-xl);background:var(--white)}
.edu-year{font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1}
.edu-card h3{margin-top:14px;font-size:clamp(20px,1.8vw,24px);font-weight:700;letter-spacing:-.025em}
@media (max-width:900px){.edu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.edu{grid-template-columns:minmax(0,1fr)}}

/* quote (dark moment) */
.quote-sec{background:#000;color:#f5f5f7;text-align:center;padding-block:clamp(110px,14vw,200px)}
.big-quote{margin:0 auto;max-width:16em;font-size:clamp(36px,5.4vw,76px);font-weight:700;line-height:1.08;letter-spacing:-.04em;color:#f5f5f7}
.quote-cap{margin-top:34px;font-size:17px;font-weight:500;color:#86868b}
.quote-cap a{color:#2997ff;text-decoration:none}
.quote-cap a:hover{text-decoration:underline}
/* Forbes feature: the whole band is one link (stretched from the "Přečíst" link) */
.quote-sec .wrap{position:relative}
.quote-src{margin-bottom:26px}
.quote-go{display:inline-flex;align-items:center;gap:6px;font-size:clamp(17px,1.4vw,19px);font-weight:600}
.quote-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.quote-go::after{content:"";position:absolute;inset:0}
.quote-sec:hover .quote-go svg{transform:translate(2px,-2px)}
.quote-sec:hover .big-quote{color:#fff}

/* media */
.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px);padding:12px;border-radius:var(--r-xl);background:var(--gray)}
.feature-media{aspect-ratio:3/2;border-radius:calc(var(--r-xl) - 12px);overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.feature:hover .feature-media img{transform:scale(1.03)}
.feature-body{display:grid;gap:14px;padding:20px clamp(12px,3vw,36px) 20px 0}
.feature-kicker{font-size:15px;font-weight:600;color:var(--ink-3)}
.feature-body h3{font-size:clamp(24px,2.4vw,34px);font-weight:700;line-height:1.12;letter-spacing:-.03em}
@media (max-width:860px){.feature{grid-template-columns:minmax(0,1fr)}.feature-body{padding:8px 16px 20px}}
.press{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.press a{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:6px 32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none}
.press-src{font-size:15px;font-weight:600;color:var(--ink-3)}
.press-title{font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.press-go{display:inline-flex;align-items:center;gap:4px;font-size:17px;color:var(--link);white-space:nowrap}
.press-go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.press a:hover .press-title{color:var(--link)}
.press a:hover .press-go svg{transform:translate(2px,-2px)}
@media (max-width:700px){.press a{grid-template-columns:minmax(0,1fr) auto}.press-src{grid-column:1 / -1}}

/* clients */
.clients{padding-block:clamp(90px,11vw,160px)}

/* contact */
.contact-card{position:relative;max-width:var(--max);margin-inline:auto;border-radius:36px;overflow:hidden;padding:clamp(56px,9vw,130px) var(--pad);text-align:center;background:#eef1f8}
.contact-card .mesh{inset:-20%}
.contact-inner{position:relative;z-index:1;display:grid;justify-items:center;gap:18px}
.contact-inner .h-sec{font-size:clamp(48px,7.5vw,104px)}
.contact-inner .sub{color:rgba(29,29,31,.72);max-width:28em}
.contact-note{font-size:15px;line-height:1.45;font-weight:500;letter-spacing:-.01em;color:rgba(29,29,31,.6);margin-top:4px}
.sub a,.contact-note a{color:var(--link);text-decoration:none}
.sub a:hover,.contact-note a:hover{text-decoration:underline}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.email-field{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:5px 5px 5px 20px;border-radius:999px;font-size:16px;font-weight:500}
.email-field > span{position:relative;z-index:2;user-select:all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.copy{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;transition:background .25s}
.copy:hover{background:#fff}
.copy svg{width:15px;height:15px}
@media (max-width:480px){.copy .copy-label{display:none}.copy{padding:0 12px}.email-field{font-size:15px;padding-left:16px}}

/* footer */
/* footer: brand, contact chips, quick nav, meta row with live Prague time and back-to-top */
.site-footer{position:relative;overflow:hidden;background:var(--gray);padding:clamp(52px,6vw,76px) 0 calc(26px + env(safe-area-inset-bottom,0px));color:var(--ink-2)}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 60% at 8% 0%,rgba(10,132,255,.09),transparent 70%),radial-gradient(34% 55% at 92% 8%,rgba(124,92,255,.09),transparent 70%)}
.site-footer .wrap{position:relative}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px 56px;align-items:start}
.foot-logo{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.foot-logo .brand-dot{width:28px;height:28px}
.foot-note{margin-top:12px;max-width:26em;font-size:15px;line-height:1.5;color:var(--ink-2)}
.foot-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.foot-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:46px;padding:0 18px 0 6px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-decoration:none;transition:translate .45s var(--ease)}
.foot-chip:hover{translate:0 -2px}
.foot-chip > span{position:relative;z-index:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.foot-ic svg{width:17px;height:17px}
.foot-ic-mail{background:linear-gradient(135deg,#16b8d9,#0a84ff 50%,#7c5cff);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 6px 14px -6px rgba(60,70,200,.55)}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:2px 40px;justify-self:end}
.foot-nav a{padding:7px 0;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .25s}
.foot-nav a:hover{color:var(--ink)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
.foot-meta{display:grid;gap:6px;font-size:13px;color:var(--ink-3)}
.foot-meta p{margin:0}
.foot-clock{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.foot-clock svg{width:14px;height:14px;color:#0a84ff}
.foot-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.foot-lang{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:color .25s}
.foot-lang:hover{color:var(--ink)}
.foot-lang svg{width:14px;height:14px;color:#7c5cff}
.to-top{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:var(--ink);transition:translate .45s var(--ease)}
.to-top svg{position:relative;z-index:2;width:18px;height:18px}
.to-top:hover{translate:0 -3px}
@media (max-width:760px){
  .foot-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .foot-nav{justify-self:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
  .foot-bottom{margin-top:28px}
}
.clock{font-variant-numeric:tabular-nums}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .stage{transform:none}
}

/* ---------- premium feature list (coaching tile) ---------- */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:10px 0 0;padding:0}
.features li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,#fbfbfd,#f2f3f7);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.035)}
.f-ic,.sk-ic,.ig-ic{display:grid;place-items:center;flex:none;color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 6px 14px -6px rgba(60,70,200,.55)}
.f-ic{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#16b8d9,#0a84ff 50%,#7c5cff)}
.f-ic svg{width:18px;height:18px}
.features strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.features em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.features li:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:420px){.features{grid-template-columns:minmax(0,1fr)}}

/* ---------- skills grouped ---------- */
.skillset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.sk-group{padding:18px 18px 8px;border-radius:22px;background:var(--gray)}
.sk-title{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.sk-group ul{list-style:none;margin:0;padding:0}
.sk-group li{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.sk-group li + li{border-top:1px solid rgba(0,0,0,.07)}
.sk-ic{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#0a84ff,#7c5cff)}
.sk-ic svg{width:14px;height:14px}
@media (max-width:1100px) and (min-width:881px){.skillset{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.skillset{grid-template-columns:minmax(0,1fr)}}

/* ---------- client grid ---------- */
/* clients: bento cards with a colour per field (icon gradient + soft corner glow) */
.client-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1080px;margin:0 auto;padding:0;list-style:none}
.cl-cell{--c1:#0a84ff;--c2:#7c5cff;--glow:rgba(10,132,255,.3);position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;gap:6px;min-height:212px;padding:26px 26px 28px;border-radius:28px;background:linear-gradient(180deg,#fff,#fbfbfd);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.04),0 22px 44px -32px rgba(20,30,70,.35);transition:translate .6s var(--ease),box-shadow .6s var(--ease)}
.cl-cell::before{content:"";position:absolute;z-index:-1;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.6;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.cl-cell:hover{translate:0 -4px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.04),0 32px 60px -36px rgba(20,30,70,.45)}
.cl-cell:hover::before{opacity:1;transform:scale(1.12)}
.cl-mark{width:50px;height:50px;margin-bottom:16px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.08),0 10px 22px -10px var(--glow)}
.cl-mark svg{width:25px;height:25px}
.cl-mark img{width:30px;height:auto}
.cl-cell strong{font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.cl-cell > span:last-child{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.c-red{--c1:#ff7a59;--c2:#ff375f;--glow:rgba(255,69,58,.28)}
.c-green{--c1:#3ad46b;--c2:#00a385;--glow:rgba(52,199,89,.28)}
.c-lime{--c1:#b9d531;--c2:#56bd3c;--glow:rgba(168,208,43,.32)}
.c-teal{--c1:#2bd2c6;--c2:#0a95dc;--glow:rgba(22,184,217,.28)}
.c-amber{--c1:#ffc53d;--c2:#ff8a00;--glow:rgba(255,159,10,.3)}
.c-wis{--glow:rgba(197,5,12,.2)}
.c-wis .cl-mark{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 10px 22px -12px rgba(197,5,12,.45)}
.c-indigo{--c1:#5b8cff;--c2:#4b48e0;--glow:rgba(94,92,230,.28)}
.c-violet{--c1:#c66bff;--c2:#7c5cff;--glow:rgba(124,92,255,.28)}
.c-pink{--c1:#ff86b8;--c2:#ff3d84;--glow:rgba(255,111,174,.3)}
@media (max-width:640px){
  .client-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cl-cell{min-height:0;padding:20px 18px 22px;border-radius:24px}
  .cl-cell.wide,.cl-cell:last-child{grid-column:1 / -1}
  .cl-mark{width:44px;height:44px;border-radius:13px;margin-bottom:12px}
  .cl-mark svg{width:22px;height:22px}
  .cl-mark img{width:26px}
  .cl-cell strong{font-size:18px}
  .cl-cell > span:last-child{font-size:14px}
}

/* ---------- instagram ---------- */
.ig-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 6px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.ig-btn > span{position:relative;z-index:2}
.ig-ic{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 30% 110%,#fdc468 0,#f77737 25%,#e1306c 50%,#c13584 70%,#5851db 100%)}
.ig-ic svg{width:18px;height:18px}