:root{
  --bg:#F5F6F9; --surface:#FFFFFF; --ink:#0E1B33; --muted:#56617A; --line:#DDE2EC;
  --accent:#2448F0; --accent-ink:#FFFFFF; --sky:#E3E9FF; --lemon:#FFE45C;
  --glow1:rgba(36,72,240,.28); --glow2:rgba(255,228,92,.45); --glow3:rgba(120,170,255,.35);
  --shadow:0 40px 80px -30px rgba(14,27,51,.40);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070E1D; --surface:#101B33; --ink:#EEF2FA; --muted:#9AA6BF; --line:#22304D;
    --accent:#7C95FF; --accent-ink:#070E1D; --sky:#18264A;
    --glow1:rgba(80,110,255,.40); --glow2:rgba(255,228,92,.16); --glow3:rgba(40,190,255,.22);
    --shadow:0 40px 80px -30px rgba(0,0,0,.8); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#070E1D; --surface:#101B33; --ink:#EEF2FA; --muted:#9AA6BF; --line:#22304D;
  --accent:#7C95FF; --accent-ink:#070E1D; --sky:#18264A;
  --glow1:rgba(80,110,255,.40); --glow2:rgba(255,228,92,.16); --glow3:rgba(40,190,255,.22);
  --shadow:0 40px 80px -30px rgba(0,0,0,.8); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}

/* loader */
.loader{position:fixed;inset:0;z-index:200;background:#0E1B33;display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
.loader.out{clip-path:inset(0 0 100% 0)}
html:not(.js) .loader{display:none}

/* progress + cursor */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:120}
.cursor{position:fixed;top:0;left:0;width:38px;height:38px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:150;transform:translate(-100px,-100px);transition:width .25s,height .25s,background .25s,opacity .25s;opacity:0;mix-blend-mode:normal}
.cursor.big{width:70px;height:70px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
@media (pointer:coarse){.cursor{display:none}}

/* nav */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo-mark{width:38px;height:38px;display:block;flex:none;transition:transform .6s cubic-bezier(.3,1.6,.4,1)}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}
.wm em{font-style:normal;font-weight:500;color:var(--muted)}
.links{display:flex;gap:28px;list-style:none}
.links a{text-decoration:none;color:var(--muted);font-weight:500;font-size:15px;position:relative;transition:color .2s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.links a:hover{color:var(--ink)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:860px){.links{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;transition:background .2s,border-color .2s,box-shadow .3s;cursor:pointer;position:relative;will-change:transform}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px var(--glow1)}
.btn-primary:hover{box-shadow:0 18px 40px -10px var(--glow1)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:15px}

/* hero */
.hero{position:relative;padding:70px 0 110px;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:-20%;z-index:-2;filter:blur(70px);pointer-events:none}
.aurora i{position:absolute;border-radius:50%;display:block}
.aurora i:nth-child(1){width:46vw;height:46vw;background:var(--glow1);left:45%;top:5%;animation:float1 16s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:30vw;height:30vw;background:var(--glow2);left:70%;top:45%;animation:float2 13s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:34vw;height:34vw;background:var(--glow3);left:10%;top:35%;animation:float3 18s ease-in-out infinite alternate}
@keyframes float1{to{transform:translate(-12vw,8vw) scale(1.15)}}
@keyframes float2{to{transform:translate(-18vw,-10vw) scale(.85)}}
@keyframes float3{to{transform:translate(14vw,-6vw) scale(1.2)}}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),#000 0%,transparent 70%);mask-image:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),#000 0%,transparent 70%);opacity:.9}
.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--muted);margin-bottom:28px;padding:6px 14px 6px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.dot{width:9px;height:9px;border-radius:50%;background:#1FB36B;animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,179,107,.55)}70%{box-shadow:0 0 0 10px rgba(31,179,107,0)}100%{box-shadow:0 0 0 0 rgba(31,179,107,0)}}
h1{font-family:var(--display);font-weight:780;font-stretch:78%;font-size:clamp(50px,7.6vw,104px);line-height:.92;letter-spacing:-.04em;margin-bottom:28px}
h1 .w{display:inline-block;white-space:nowrap}
h1 .c{display:inline-block;transform:translateY(80%) rotate(8deg);opacity:0;filter:blur(10px)}
.ready h1 .c{animation:char .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 28ms)}
@keyframes char{to{transform:none;opacity:1;filter:blur(0)}}
html:not(.js) h1 .c{transform:none;opacity:1;filter:none}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:46ch;margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.facts{font-size:15px;color:var(--muted);max-width:48ch}
.facts strong{color:var(--ink);font-weight:600}
.intro{opacity:0;transform:translateY(20px)}
.ready .intro{animation:fadeup .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,.5s)}
@keyframes fadeup{to{opacity:1;transform:none}}
html:not(.js) .intro{opacity:1;transform:none}

/* compare */
.compare{position:relative;perspective:1400px}
.browser{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block;margin-right:6px}
.bar i:nth-child(1){background:#FF6159}.bar i:nth-child(2){background:#FFBD2E}.bar i:nth-child(3){background:#28C941}
.url{flex:1;background:var(--bg);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--muted)}
.stage{position:relative;aspect-ratio:4/3.1;container-type:inline-size;user-select:none;touch-action:pan-y}
.layer{position:absolute;inset:0;overflow:hidden;z-index:0}
.layer.old{z-index:1}
.old{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--accent);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 18px var(--accent)}
.knob{position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent),0 8px 24px rgba(36,72,240,.45)}
.knob svg{width:22px;height:22px}
.range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.tag{position:absolute;z-index:2;bottom:14px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;pointer-events:none}
.tag-old{left:14px;background:#fff;color:#000;border:1px solid #999}
.tag-new{right:14px;background:#0E1B33;color:#fff}
.hint{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}

.chip{position:absolute;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);font-size:14px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(20px) scale(.9)}
.chip.show{animation:pop .7s cubic-bezier(.3,1.6,.4,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.chip .in{animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.chip strong{display:block;font-size:15px;line-height:1.2}
.chip small{color:var(--muted);font-size:13px}
.chip-speed{top:-26px;left:-30px}
.chip-lead{bottom:92px;right:-40px;max-width:270px}
.chip-mobile{top:34%;right:-44px}
.ring{width:44px;height:44px;border-radius:50%;background:conic-gradient(#1FB36B calc(var(--p,0) * 1%),var(--line) 0);display:grid;place-items:center;font-weight:700;font-size:13px;position:relative;flex:none}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ring span{position:relative}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#FFB38A,#E86A92);flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.icon{width:36px;height:36px;border-radius:10px;background:var(--sky);color:var(--accent);display:grid;place-items:center;flex:none}
@media (max-width:1100px){.chip-mobile{display:none}.chip-lead{right:-10px}.chip-speed{left:-10px}}
@media (max-width:560px){.chip{padding:9px 12px;gap:10px;border-radius:14px}.chip strong{font-size:13px}.chip small{font-size:12px}.chip-speed{top:-22px;left:6px}.chip-speed .ring{width:36px;height:36px;font-size:11px}.chip-lead{top:26%;bottom:auto;right:4px;max-width:148px}.chip-lead small,.chip-speed small{display:none}.chip-lead .avatar{width:28px;height:28px}}

/* odkazy na sociální sítě v patičce */
.soc{display:flex;align-items:center;gap:12px;margin-top:16px!important}
.soc span{font-size:14px;color:var(--muted)}
.soc a{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink);transition:background .25s,border-color .25s,transform .25s,color .25s}
.soc a svg{width:19px;height:19px}
.soc a:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px)}

/* sociální sítě na stránce O nás — větší, s popiskem */
.soc-big{flex-wrap:wrap;margin-top:26px!important}
.soc-big span{font-size:15px}
.soc-big a{width:auto;height:auto;gap:9px;padding:11px 18px;border-radius:999px;display:inline-flex;
  align-items:center;font-weight:600;font-size:15px;text-decoration:none}
.soc-big a b{font-weight:600}

/* ukázka před/po: marcelzastupitel.cz — starý web */
.mzo-site{height:100%;background:#fff;color:#222;font-family:Arial,Helvetica,sans-serif;
  font-size:2.2cqw;display:flex;flex-direction:column;overflow:hidden}
.mzo-bar{background:#22417C;color:#fff;display:flex;justify-content:space-between;
  align-items:center;padding:1.9cqw 3.2cqw;flex:none}
.mzo-bar b{font-family:Georgia,"Times New Roman",serif;font-size:3.4cqw;font-weight:700;letter-spacing:.01em}
.mzo-bar span{display:flex;gap:2.6cqw;font-size:1.95cqw}
.mzo-bar u{text-decoration:underline;color:#fff;text-underline-offset:.25cqw}
.mzo-body{flex:1;min-height:0;display:grid;grid-template-columns:1.3fr 1fr;gap:3.4cqw;
  padding:4.4cqw 3.6cqw;align-content:start}
.mzo-h{font-size:3.3cqw;font-weight:700;color:#1B1B1B;margin:0 0 3.4cqw;line-height:1.2}
.mzo-line{display:block;height:1.5cqw;background:#D6D6D6;margin-bottom:1.6cqw;border-radius:.15cqw}
.mzo-line.l1{width:92%}
.mzo-line.l2{width:84%}
.mzo-line.l3{width:66%}
.mzo-line.l4{width:44%}
.mzo-btn{display:inline-block;margin-top:2.6cqw;background:#DEDEDE;border:.2cqw solid #B3B3B3;
  color:#1B1B1B;font-size:2cqw;padding:1.2cqw 2.6cqw}
.mzo-foot{flex:none;background:#EFEFEF;border-top:.2cqw solid #DADADA;color:#7A7A7A;
  font-size:1.8cqw;text-align:center;padding:1.9cqw}
.mzo-pic{aspect-ratio:3/4;border:.2cqw solid #CFCFCF;
  background:#EDECEA url("/assets/ref-marcel.jpg") center 6%/cover no-repeat}

/* ukázka před/po: marcelzastupitel.cz — hotový web */
.mz-site{height:100%;background:#F4F2ED;color:#122A63;font-family:var(--body);font-size:2cqw;
  display:flex;flex-direction:column;overflow:hidden}
.mz-alert{display:flex;justify-content:space-between;align-items:center;gap:2cqw;background:#D7202E;
  color:#fff;font-size:1.5cqw;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:1.1cqw 3.2cqw;white-space:nowrap}
.mz-alert u{text-decoration:none;background:rgba(0,0,0,.24);border-radius:.5cqw;padding:.3cqw 1cqw;margin-left:1cqw}
.mz-nav{display:flex;justify-content:space-between;align-items:center;padding:2.2cqw 3.2cqw;
  border-bottom:.15cqw solid rgba(18,42,99,.1)}
.mz-brand{display:flex;align-items:center;gap:1.3cqw}
.mz-brand i{width:4.2cqw;height:4.2cqw;border-radius:.9cqw;background:#122A63;color:#fff;
  display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.9cqw;flex:none}
.mz-brand b{font-family:var(--display);font-weight:800;font-size:2.4cqw;letter-spacing:.04em;
  text-transform:uppercase;display:block;line-height:1.05}
.mz-brand em{display:block;font-style:normal;font-size:1.35cqw;letter-spacing:.22em;
  text-transform:uppercase;color:#D7202E;font-weight:800}
.mz-links{display:flex;align-items:center;gap:2.4cqw;font-size:1.55cqw;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#4A5772;white-space:nowrap}
.mz-cta{font-style:normal;background:#D7202E;color:#fff;padding:1.2cqw 2cqw;border-radius:.7cqw}
.mz-hero{flex:1;display:grid;grid-template-columns:1.14fr .86fr;gap:1cqw;
  padding:2.4cqw 3.2cqw .8cqw;align-items:center;position:relative;min-height:0}
.mz-pill{display:inline-flex;align-items:center;gap:1.1cqw;background:#fff;
  border:.15cqw solid rgba(18,42,99,.12);border-radius:999px;padding:.6cqw 1.6cqw .6cqw .6cqw;
  font-size:1.5cqw;color:#4A5772;font-weight:600}
.mz-pill b{background:#D7202E;color:#fff;border-radius:999px;padding:.45cqw 1.2cqw;
  font-size:1.35cqw;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.mz-name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:7.6cqw;
  line-height:.97;letter-spacing:-.025em;color:#122A63;margin:1.6cqw 0 0}
.mz-name i{font-style:normal;color:#D7202E;display:block}
.mz-meta{font-size:1.5cqw!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#122A63;margin:1.6cqw 0 0!important}
.mz-lead{font-size:1.9cqw!important;color:#4A5772;margin:1cqw 0 1.9cqw!important;
  max-width:33cqw;line-height:1.4}
.mz-btns{display:flex;gap:1.3cqw}
.mz-btn{font-style:normal;background:#D7202E;color:#fff;font-weight:800;font-size:1.55cqw;
  letter-spacing:.1em;text-transform:uppercase;padding:1.5cqw 2.4cqw;border-radius:.8cqw;white-space:nowrap}
.mz-ghost{background:#fff;color:#122A63;border:.15cqw solid rgba(18,42,99,.18)}
.mz-cdlabel{font-size:1.25cqw!important;letter-spacing:.18em;text-transform:uppercase;
  color:#8290AC;margin:2.2cqw 0 1cqw!important}
.mz-boxes{display:flex;gap:1.1cqw}
.mz-boxes i{font-style:normal;width:7cqw;padding:1cqw 0;border-radius:.9cqw;background:#D7202E;
  color:#fff;text-align:center;font-size:1.1cqw;letter-spacing:.14em;text-transform:uppercase}
.mz-boxes i.d{background:#122A63}
.mz-boxes b{display:block;font-family:var(--display);font-size:3.2cqw;font-weight:800;line-height:1;
  letter-spacing:0;font-variant-numeric:tabular-nums}
.mz-photo{position:relative;align-self:end;height:33cqw;display:flex;justify-content:center;align-items:flex-end}
.mz-photo em{position:relative;display:block;height:100%;aspect-ratio:36/47;
  background:#E5E4E1 url("/assets/ref-marcel.jpg") center/cover no-repeat;
  border-radius:1.6cqw 1.6cqw 0 0;box-shadow:0 1.2cqw 3cqw rgba(18,42,99,.12)}
.mz-badge{position:absolute;top:.5cqw;right:.5cqw;width:8.6cqw;height:8.6cqw;border-radius:50%;
  background:#D7202E;color:#fff;display:grid;place-content:center;text-align:center;line-height:1;
  z-index:2;box-shadow:0 .9cqw 2cqw rgba(18,42,99,.22)}
.mz-badge b{font-size:1.15cqw;letter-spacing:.16em;text-transform:uppercase}
.mz-badge u{text-decoration:none;font-family:var(--display);font-size:3.8cqw;font-weight:800;
  display:block;margin:.25cqw 0}
.mz-badge i{font-style:normal;font-size:1.15cqw;letter-spacing:.2em;font-weight:800}
.mz-since{position:absolute;left:-2.4cqw;bottom:4.4cqw;background:#fff;border-radius:.9cqw;
  padding:1cqw 1.5cqw;font-size:1.2cqw;line-height:1.15;color:#4A5772;text-transform:uppercase;
  letter-spacing:.1em;box-shadow:0 .9cqw 2.2cqw rgba(18,42,99,.16);display:flex;align-items:center;
  gap:.9cqw;z-index:2;white-space:nowrap}
.mz-since b{font-family:var(--display);font-size:2.6cqw;color:#D7202E;font-weight:800;letter-spacing:0}
.mz-band{background:#122A63;color:#fff;overflow:hidden;white-space:nowrap;padding:1.2cqw 0;
  font-family:var(--display);font-weight:800;font-size:2cqw;letter-spacing:.05em;text-transform:uppercase}
.mz-band span{display:inline-block;animation:mzband 26s linear infinite;will-change:transform}
.mz-band em{font-style:normal;color:#E8293A;margin:0 1.2cqw}
@keyframes mzband{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mz-band span{animation:none}}

/* marquee */
.band{border-block:1px solid var(--line);padding:26px 0;overflow:hidden;background:var(--surface)}
.band-track{display:flex;width:max-content;animation:scrollx 28s linear infinite;will-change:transform}
.band-skew{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.band span{font-family:var(--display);font-weight:760;font-stretch:80%;font-size:clamp(34px,5vw,64px);letter-spacing:-.03em;line-height:1;padding-right:48px;display:flex;align-items:center;gap:48px;white-space:nowrap}
.band span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.band span::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--accent);flex:none}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(50px);filter:blur(8px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter 1s;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:none}

/* sections */
section{padding:120px 0}
.sec-head{max-width:640px;margin-bottom:56px}
h2{font-family:var(--display);font-weight:740;font-stretch:82%;font-size:clamp(38px,5vw,66px);line-height:.98;letter-spacing:-.035em;margin-bottom:18px}
.sec-head p{color:var(--muted);font-size:18px}

/* showcase horizontal */
.showcase{padding:0;position:relative}
.show-sticky{padding:110px 0}
.track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 30px;will-change:transform}
.hscroll .showcase{height:320vh}
.hscroll .show-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:safe center;padding:92px 0 24px}
.hscroll .show-sticky .sec-head{margin-bottom:28px!important}
.hscroll .demo{width:min(480px,36vw,48vh)}
.hscroll .show-sticky h2{font-size:clamp(34px,4.2vw,58px)}
.hscroll .demo h3{font-size:22px;margin-top:16px}
.hscroll .demo p{font-size:15px}
.hscroll .track{overflow:visible;padding-left:max(20px,calc((100vw - 1180px) / 2))}
.show-count{font-family:var(--display);font-weight:700;color:var(--muted);font-size:18px;margin-top:6px}
.show-count b{color:var(--ink)}
.demo{flex:none;width:min(540px,82vw);scroll-snap-align:start}
.demo-frame{container-type:inline-size;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.demo:hover .demo-frame{transform:translateY(-10px) rotate(-1deg)}
.demo-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.demo-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.demo-bar span{margin-left:10px}
.demo-site{aspect-ratio:16/10.5;background:var(--s-bg);color:var(--s-ink);font-size:2.4cqw;display:flex;flex-direction:column}
.d-nav{display:flex;align-items:center;gap:3cqw;padding:3.2cqw 4.5cqw}
.d-nav b{font-family:var(--display);font-size:3.2cqw;margin-right:auto}
.d-nav span{opacity:.65}
.d-hero{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;padding:1cqw 4.5cqw;flex:1;align-items:center}
.d-hero h4{font-family:var(--display);font-weight:740;font-size:5.6cqw;line-height:1;letter-spacing:-.03em;margin-bottom:3cqw}
.d-btn{display:inline-block;background:var(--s-acc);color:var(--s-bg);padding:1.6cqw 3.2cqw;border-radius:var(--s-rad,999px);font-style:normal;font-weight:600}
.d-img{height:100%;min-height:26cqw;border-radius:var(--s-rad,2.4cqw);background:var(--art);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.demo:hover .d-img{transform:scale(1.04)}
.d-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:3cqw 4.5cqw 4cqw}
.d-row span{height:6cqw;border-radius:1.4cqw;background:color-mix(in srgb,var(--s-ink) 8%,transparent)}
.demo h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;margin:22px 0 4px}
.demo p{color:var(--muted);max-width:44ch}

/* process */
.process{background:var(--surface);border-block:1px solid var(--line)}
.process .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
.process .sec-head{position:sticky;top:120px;align-self:start;margin-bottom:0}
.steps{list-style:none;position:relative;padding-left:72px}
.steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.fill{position:absolute;left:23px;top:24px;width:2px;height:0;background:var(--accent);box-shadow:0 0 14px var(--accent);transition:height .6s cubic-bezier(.2,.8,.2,1)}
.step{position:relative;padding-bottom:90px}
.step:last-child{padding-bottom:0}
.num{position:absolute;left:-72px;top:0;width:48px;height:48px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--muted);transition:all .5s cubic-bezier(.3,1.6,.4,1)}
.step.on .num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.12);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent)}
.step h3{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:6px 0 10px;transition:color .4s}
.step p{color:var(--muted);max-width:52ch}
.step:not(.on) h3{color:var(--muted)}
.process .more{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{--gx:50%;--gy:50%;position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px 24px;text-decoration:none;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s;transform-style:preserve-3d}
.plan::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--gx) var(--gy),color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.plan:hover::before{opacity:1}
.plan > *{position:relative}
.plan h3{font-family:var(--display);font-size:22px;font-weight:700;margin-bottom:14px}
.price{font-family:var(--display);font-weight:780;font-stretch:78%;font-size:46px;letter-spacing:-.03em;line-height:1;margin-bottom:16px;font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:4px}
.plan p{color:var(--muted);font-size:15px;flex:1;margin-bottom:22px}
.plan ul{list-style:none;margin-bottom:24px;font-size:15px}
.plan li{padding:6px 0 6px 26px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;border-left:2px solid var(--lemon);border-bottom:2px solid var(--lemon);transform:rotate(-45deg)}
.pick{margin-top:auto;font-weight:600;font-size:15px}
.plan.hot{background:#0E1B33;color:#fff;border-color:transparent;box-shadow:0 30px 70px -20px var(--glow1)}
.plan.hot::after{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;background:conic-gradient(from var(--ang,0deg),#FFE45C,#2448F0,#7C95FF,#FFE45C);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite;pointer-events:none}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.plan.hot p,.plan.hot .price small{color:#AEB8CE}
.plan.hot::before{background:radial-gradient(300px circle at var(--gx) var(--gy),rgba(255,228,92,.18),transparent 60%)}
.badge{align-self:flex-start;background:var(--lemon);color:#0E1B33;font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:14px}
.plans-foot{margin-top:32px;color:var(--muted)}
.plans-foot a{font-weight:600;color:var(--ink)}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}

/* promises */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-top:1px solid var(--line);padding-top:40px}
.promises h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.promises p{color:var(--muted)}
.promises .big{font-family:var(--display);font-weight:780;font-stretch:78%;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--accent);margin-bottom:14px;display:block}
@media (max-width:860px){.promises{grid-template-columns:1fr;gap:36px}}

/* final */
.final{padding:40px 0 120px}
.final-box{--fx:50%;--fy:50%;background:#2448F0;color:#fff;border-radius:34px;padding:clamp(44px,8vw,110px);position:relative;overflow:hidden;isolation:isolate;text-align:center}
.final-box::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(500px circle at var(--fx) var(--fy),rgba(255,228,92,.45),transparent 60%)}
.final-box .orb{position:absolute;z-index:-1;border-radius:50%;border:2px solid rgba(255,255,255,.18)}
.final-box .orb:nth-of-type(1){width:600px;height:600px;left:-200px;top:-300px;animation:turn 30s linear infinite;border-style:dashed}
.final-box .orb:nth-of-type(2){width:420px;height:420px;right:-120px;bottom:-220px;border-width:60px;border-color:rgba(255,255,255,.08)}
@keyframes turn{to{transform:rotate(360deg)}}
.final-box h2{font-size:clamp(46px,8vw,120px);margin:0 auto;max-width:12ch;line-height:.9}
.final-box p{margin:22px auto 36px;font-size:19px;opacity:.88;max-width:44ch}
.final-box .btn{background:#fff;color:#2448F0;padding:18px 34px;font-size:18px}

footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:15px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{color:var(--ink);font-size:15px;margin-bottom:12px}
footer ul{list-style:none}
footer li{padding:3px 0}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.copy{margin-top:40px;font-size:14px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

@media (max-width:960px){
  .hero-legacy{gap:70px}
  .process .wrap{grid-template-columns:1fr;gap:40px}
  .process .sec-head{position:static}
}

/* grain */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav actions */
.actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,transform .4s cubic-bezier(.3,1.6,.4,1)}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.theme-btn .moon{display:none}
.is-dark .theme-btn .sun{display:none}
.is-dark .theme-btn .moon{display:block}
.theme-btn:active{transform:rotate(40deg) scale(.9)}
.burger{display:none}
@media (max-width:860px){.burger{display:grid}}
@media (max-width:420px){.nav .btn-sm{display:none}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:110;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:90px 28px 40px;clip-path:circle(0 at calc(100% - 42px) 36px);transition:clip-path .7s cubic-bezier(.77,0,.18,1);visibility:hidden}
.mmenu.open{clip-path:circle(150% at calc(100% - 42px) 36px);visibility:visible}
.mmenu a{font-family:var(--display);font-weight:760;font-stretch:80%;font-size:clamp(40px,11vw,64px);letter-spacing:-.03em;line-height:1.15;text-decoration:none;display:block;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.mmenu.open a{opacity:1;transform:none;transition-delay:calc(.2s + var(--i) * .06s)}
.mmenu .mm-foot{margin-top:40px;color:var(--muted);font-size:16px}
.mmenu .mm-close{position:absolute;top:14px;right:20px}

/* rotating word */
.for{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em;margin:-8px 0 20px;display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap}
.rot{display:inline-block;position:relative;height:1.3em;overflow:hidden;vertical-align:bottom;transition:width .6s cubic-bezier(.2,.8,.2,1);color:var(--accent)}
.rot span{position:absolute;left:0;top:0;white-space:nowrap;line-height:1.3em;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.rot span.cur{transform:none;opacity:1}
.rot span.prev{transform:translateY(-110%);opacity:0}
.rot::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:3px;border-radius:3px;background:var(--lemon)}

/* statement */
.statement{padding:150px 0 120px}
.statement p{font-family:var(--display);font-weight:700;font-stretch:84%;font-size:clamp(34px,5.2vw,72px);line-height:1.04;letter-spacing:-.035em;max-width:20ch}
.statement .sw{opacity:.14;transition:opacity .35s}
.statement .sw.lit{opacity:1}
.statement .sig{margin-top:40px;display:flex;align-items:center;gap:14px;color:var(--muted)}
html:not(.js) .statement .sw{opacity:1}

/* devices */
.devices .top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.devices .sec-head{margin-bottom:0}
.seg{display:inline-flex;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font:600 15px var(--body);padding:11px 20px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .3s}
.seg button svg{width:17px;height:17px}
.seg button[aria-pressed="true"]{color:var(--accent-ink)}
.seg .pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--accent);transition:left .5s cubic-bezier(.3,1.3,.4,1),width .5s cubic-bezier(.3,1.3,.4,1)}
.dev-stage{display:grid;place-items:center;min-height:620px;border-radius:30px;background:radial-gradient(circle at 50% 40%,var(--sky),transparent 70%);padding:30px 16px;overflow:hidden}
.dev{width:min(1000px,100%);height:560px;background:#0E1B33;border-radius:22px;padding:12px;box-shadow:var(--shadow);transition:width .8s cubic-bezier(.7,0,.2,1),height .8s cubic-bezier(.7,0,.2,1),border-radius .8s,padding .8s}
.dev[data-mode="tablet"]{width:min(600px,100%);height:560px;border-radius:34px;padding:18px}
.dev[data-mode="mobile"]{width:min(300px,100%);height:580px;border-radius:44px;padding:12px}
.dev-screen{width:100%;height:100%;border-radius:12px;overflow:hidden;background:#FBF8F3;container-type:inline-size;position:relative;transition:border-radius .8s}
.dev[data-mode="tablet"] .dev-screen{border-radius:18px}
.dev[data-mode="mobile"] .dev-screen{border-radius:34px}
.dev-scroll{height:100%;overflow-y:auto;scrollbar-width:none}
.dev-scroll::-webkit-scrollbar{display:none}
.ds{color:#2A2118;font-family:var(--body);font-size:15px}
.ds-nav{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,5cqi,48px)}
.ds-logo{font-family:var(--display);font-weight:700;font-size:20px}
.ds-links{display:flex;gap:26px;color:#7A6A58}
.ds-burger{display:none;width:34px;height:34px;border-radius:50%;background:#2A2118;position:relative}
.ds-burger::before,.ds-burger::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:#FBF8F3;top:13px}
.ds-burger::after{top:19px}
.ds-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4cqi,48px);padding:10px clamp(18px,5cqi,48px) 30px;align-items:center}
.ds h3{font-family:var(--display);font-weight:740;font-size:clamp(30px,6.2cqi,58px);line-height:.98;letter-spacing:-.035em;margin-bottom:14px}
.ds p{color:#7A6A58;margin-bottom:22px;line-height:1.5}
.ds-btn{display:inline-block;background:#2A2118;color:#FBF8F3;padding:13px 22px;border-radius:999px;font-weight:600}
.ds-img{aspect-ratio:1/1;border-radius:20px;background:radial-gradient(ellipse 60% 18% at 30% 30%,rgba(255,255,255,.18),transparent 70%),repeating-linear-gradient(172deg,#B9855A 0 14px,#A8744B 14px 20px,#C4915F 20px 38px);position:relative;overflow:hidden}
.ds-img::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:26%;background:#F3E6D3;border-radius:12px;box-shadow:0 20px 30px rgba(0,0,0,.25)}
.ds-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 clamp(18px,5cqi,48px) 30px}
.ds-tiles div{background:#fff;border-radius:16px;padding:18px;font-weight:600}
.ds-tiles small{display:block;color:#9A8A78;font-weight:400}
.ds-refs{padding:10px clamp(18px,5cqi,48px) 40px}
.ds-refs h4{font-family:var(--display);font-size:24px;margin-bottom:14px}
.ds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ds-grid span{aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,#D8B48C,#9C6B43)}
.ds-grid span:nth-child(2){background:linear-gradient(135deg,#E9DCC8,#BFA27E)}
.ds-grid span:nth-child(3){background:linear-gradient(135deg,#8B5E3C,#4E3322)}
.ds-grid span:nth-child(4){background:linear-gradient(135deg,#C9A57E,#E8D5BC)}
@container (max-width:640px){.ds-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-width:420px){
  .ds-links{display:none}.ds-burger{display:block}
  .ds-hero{grid-template-columns:1fr}
  .ds-img{order:-1;aspect-ratio:4/3}
  .ds-tiles{grid-template-columns:1fr}
}
.dev-note{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}

/* faq */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.faq .sec-head{margin-bottom:0}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;color:var(--ink);text-align:left;font:700 clamp(20px,2vw,24px)/1.25 var(--display);letter-spacing:-.015em;padding:26px 0;cursor:pointer}
.qa .plus{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);position:relative;flex:none;transition:background .3s,border-color .3s,transform .5s cubic-bezier(.3,1.6,.4,1)}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.qa .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa button[aria-expanded="true"] .plus{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(135deg)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.qa .ans > div{overflow:hidden}
.qa .ans p{color:var(--muted);padding:0 60px 26px 0;max-width:60ch}
.qa button[aria-expanded="true"] + .ans{grid-template-rows:1fr}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr;gap:30px}.devices .top{align-items:flex-start}}
@media (max-width:560px){.seg button{padding:10px 13px;font-size:14px}.seg button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.dev-stage{min-height:520px}.dev{height:470px}.dev[data-mode="tablet"]{height:470px}.dev[data-mode="mobile"]{height:500px}}

/* loader logo */
@keyframes logoIn{to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* hero v4 */
.hero{padding:48px 0 0}
.hero .hero-top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.hero-top h1{font-size:clamp(52px,9.2vw,138px);max-width:13ch;margin-bottom:22px}
.hero-top .for{justify-content:center;margin:0 0 18px}
.hero-top .lead{margin:0 auto 32px;max-width:52ch}
.hero-top .cta-row{justify-content:center;margin-bottom:22px}
.hero-top .facts{margin:0 auto;max-width:60ch}
.scene-stage{--scene-sky:#E3E9FF;--ground:#C8D5FF;--cloud:#FFFFFF;position:relative;width:min(1320px,100% - 40px);margin:48px auto 0;border-radius:40px 40px 0 0;background:var(--scene-sky);border:2px solid #0E1B33;border-bottom:0;overflow:hidden;aspect-ratio:1200/640}
.scene{display:block;width:100%;height:100%}
.scene .lay{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.scene .ground{fill:var(--ground)}
.scene .cloud{fill:var(--cloud)}
.svg-t{font-family:var(--display);font-weight:700}
.svg-b{font-family:var(--body);font-weight:600}
.is-dark .scene-stage{--scene-sky:#1B2B57;--ground:#2A3F7A;--cloud:#34498A;border-color:#2E4270}
@media (max-width:760px){.scene-stage{aspect-ratio:5/4;border-radius:28px 28px 0 0;margin-top:44px}}

/* before/after section */
.ba .ba-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.ba .sec-head{margin-bottom:0}
@media (max-width:960px){.ba .ba-grid{grid-template-columns:1fr;gap:70px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .loader{display:none}
  h1 .c,.intro,.chip{opacity:1!important;transform:none!important;filter:none!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .cursor{display:none}
  .statement .sw{opacity:1}
  .loader-logo,.loader-logo path{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
  .mmenu a{opacity:1;transform:none}
}

/* ===================== multi-page additions ===================== */
html{scroll-padding-top:90px}
.logo-mark{width:34px;height:36px}
.wm{font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:22px}
.wm em{font-style:normal;font-weight:500;color:var(--muted)}
.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]::after{transform:scaleX(1)}
.mmenu a[aria-current="page"]{color:var(--accent)}

/* page transition */
.pt{position:fixed;inset:0;z-index:180;background:#2448F0;display:grid;place-items:center;pointer-events:none;clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.77,0,.18,1)}
.pt svg{width:70px;height:auto;opacity:0;transform:scale(.7);transition:opacity .3s .15s,transform .4s .15s cubic-bezier(.3,1.5,.4,1)}
.pt.cover{clip-path:inset(0 0 0 0);pointer-events:auto}
.pt.cover svg{opacity:1;transform:none}
.pt.leave{clip-path:inset(0 0 100% 0)}
.pt .pt-cursor path:first-child{fill:#fff;stroke:#fff}

/* breadcrumbs + page hero */
.page-hero{position:relative;padding:56px 0 90px;overflow:hidden;isolation:isolate}
.page-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.crumbs{display:flex;gap:10px;align-items:center;list-style:none;font-size:14px;color:var(--muted);margin-bottom:26px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"";display:inline-block;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-right:12px;vertical-align:2px}
.page-hero h1{font-size:clamp(48px,7.4vw,108px);margin-bottom:24px}
.page-hero .lead{margin-bottom:30px}
.ph-art{position:relative;aspect-ratio:480/400;border-radius:36px;background:var(--scene-sky,#E3E9FF);border:2px solid #0E1B33;overflow:hidden}
.ph-art svg{display:block;width:100%;height:100%}
.is-dark .ph-art{background:#1B2B57;border-color:#2E4270}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr}.ph-art{max-width:520px}}

/* generic */
.sec-alt{background:var(--surface);border-block:1px solid var(--line)}
.link-arrow{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-bottom:2px solid var(--accent);padding-bottom:2px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:56px}
.head-row .sec-head{margin-bottom:0}

/* services */
.services{display:grid;gap:18px}
.svc{display:grid;grid-template-columns:auto 1fr 1fr;gap:40px;align-items:center;padding:36px 40px;border-radius:28px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .3s}
.svc:hover{border-color:var(--ink)}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.svc:hover::before{opacity:1}
.svc > *{position:relative}
.svc-ico{width:92px;height:92px;border-radius:26px;background:var(--sky);display:grid;place-items:center;border:2px solid #0E1B33}
.svc-ico svg{width:58px;height:58px;transition:transform .6s cubic-bezier(.3,1.6,.4,1)}
.svc:hover .svc-ico svg{transform:rotate(-8deg) scale(1.1)}
.svc h3{font-family:var(--display);font-size:32px;font-weight:720;letter-spacing:-.025em;line-height:1.05;margin-bottom:10px}
.svc p{color:var(--muted);max-width:44ch}
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{position:relative;padding-left:32px;font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--lemon)}
.ticks li::after{content:"";position:absolute;left:6px;top:9px;width:8px;height:5px;border-left:2px solid #0E1B33;border-bottom:2px solid #0E1B33;transform:rotate(-45deg)}
@media (max-width:900px){.svc{grid-template-columns:1fr;gap:22px;padding:30px 26px}}

.included{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.included div{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.included strong{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.015em;margin-bottom:6px}
.included span{color:var(--muted)}
@media (max-width:860px){.included{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.included{grid-template-columns:1fr}}

/* projects grid */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 28px}
.proj-grid .demo{width:auto}
.demo .label{display:inline-block;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-top:18px}
.demo .label + h3{margin-top:10px}
.proj-cta{border:2px dashed var(--line);border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;min-height:100%;transition:border-color .3s}
.proj-cta:hover{border-color:var(--accent)}
.proj-cta h3{font-family:var(--display);font-size:34px;letter-spacing:-.025em;line-height:1.05;margin-bottom:12px}
.proj-cta p{color:var(--muted);margin-bottom:24px}
@media (max-width:860px){.proj-grid{grid-template-columns:1fr}}

/* timeline */
.timeline{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.timeline::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:var(--line)}
.timeline .tl-fill{position:absolute;left:24px;top:24px;height:2px;width:0;background:var(--accent);box-shadow:0 0 14px var(--accent);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.timeline.in-view .tl-fill{width:calc(100% - 48px)}
.tl{position:relative;padding-top:74px}
.tl .num{left:0;top:0}
.timeline.in-view .tl .num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transition-delay:calc(var(--i) * .35s)}
.tl .when{display:inline-block;font-size:13px;font-weight:600;background:var(--lemon);color:#0E1B33;border-radius:999px;padding:3px 10px;margin-bottom:12px}
.tl h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
.tl p{color:var(--muted)}
@media (max-width:900px){
  .timeline{grid-template-columns:1fr;gap:36px;padding-left:72px}
  .timeline::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .timeline .tl-fill{left:23px;width:2px;height:0;transition:height 1.6s cubic-bezier(.2,.8,.2,1)}
  .timeline.in-view .tl-fill{width:2px;height:calc(100% - 48px)}
  .tl{padding-top:0}.tl .num{left:-72px}
}

/* tabs */
.tabs{display:inline-flex;flex-wrap:wrap;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:28px}
.tabs button{border:0;background:none;color:var(--muted);font:600 15px var(--body);padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.faq-panel[hidden]{display:none}
.faq-panel{animation:fadeup .5s cubic-bezier(.2,.8,.2,1)}

/* pricing page */
.pkg-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.pkg-picker button{text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;padding:18px 20px;cursor:pointer;font:inherit;transition:border-color .3s,transform .3s,background .3s}
.pkg-picker button:hover{border-color:var(--ink);transform:translateY(-3px)}
.pkg-picker button strong{display:block;font-family:var(--display);font-size:19px}
.pkg-picker button span{color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.pkg-picker button[aria-selected="true"]{background:#0E1B33;color:#fff;border-color:#0E1B33}
.pkg-picker button[aria-selected="true"] span{color:#AEB8CE}
.pkg-detail{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.pkg-main{padding:48px;background:#0E1B33;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.pkg-main::after{content:"";position:absolute;z-index:-1;width:380px;height:380px;border-radius:50%;border:60px solid rgba(124,149,255,.14);right:-140px;bottom:-160px}
.pkg-main .badge{margin-bottom:18px}
.pkg-main h3{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05;margin-bottom:14px}
.pkg-main p{color:#AEB8CE;max-width:40ch}
.pkg-price{font-family:var(--display);font-weight:780;font-stretch:78%;font-size:clamp(56px,7vw,88px);letter-spacing:-.04em;line-height:1;margin:30px 0 6px;font-variant-numeric:tabular-nums}
.pkg-price small{font-size:.35em;font-family:var(--body);font-weight:500;color:#AEB8CE;letter-spacing:0}
.pkg-note{font-size:14px;color:#AEB8CE;margin-bottom:30px}
.pkg-main .btn{background:#FFE45C;color:#0E1B33}
.pkg-side{padding:48px}
.pkg-side h4{font-family:var(--display);font-size:22px;margin-bottom:18px}
.pkg-result{margin-top:30px;padding:20px 22px;border-radius:18px;background:var(--sky)}
.pkg-result b{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:4px}
.pkg-swap{animation:swap .55s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){.pkg-picker{grid-template-columns:1fr 1fr}.pkg-detail{grid-template-columns:1fr}.pkg-main,.pkg-side{padding:34px 26px}}

.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--display);font-size:19px}
.cmp thead th small{display:block;font-family:var(--body);font-weight:500;color:var(--muted);font-size:14px}
.cmp tbody th{font-weight:500;color:var(--muted)}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp .hl{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.yes{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--lemon);position:relative;vertical-align:middle}
.yes::after{content:"";position:absolute;left:6px;top:6px;width:9px;height:5px;border-left:2px solid #0E1B33;border-bottom:2px solid #0E1B33;transform:rotate(-45deg)}
.no{display:inline-block;width:14px;height:2px;background:var(--line);vertical-align:middle}

/* contact */
.contact .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.c-cards{display:grid;gap:14px;margin-top:34px}
.c-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color .3s,transform .3s}
a.c-card:hover{border-color:var(--ink);transform:translateX(4px)}
.c-card .icon{width:46px;height:46px;border-radius:14px}
.c-card small{display:block;color:var(--muted);font-size:14px}
.c-card strong{font-size:17px}
.copy-btn{margin-left:auto;border:1px solid var(--line);background:none;color:var(--muted);border-radius:999px;padding:6px 12px;font:600 13px var(--body);cursor:pointer}
.copy-btn:hover{color:var(--ink);border-color:var(--ink)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:clamp(26px,4vw,48px);box-shadow:var(--shadow);position:relative;overflow:hidden}
.form-card h2{font-size:clamp(30px,3.4vw,44px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:15px}
.field label span{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.field.err input,.field.err textarea{border-color:#E5484D}
.field .msg{font-size:14px;color:#E5484D;min-height:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:15px;transition:all .25s}
.chips input:checked + span{background:#0E1B33;border-color:#0E1B33;color:#fff}
.chips input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted)}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:#2448F0;flex:none}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px}
.form-status{font-size:15px}
.btn[disabled]{opacity:.7;pointer-events:none}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:rot .7s linear infinite;display:none}
.sending .spin{display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.success{position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .5s}
.success.show{opacity:1;pointer-events:auto}
.success svg{width:190px;height:auto;margin-bottom:10px}
.success h3{font-family:var(--display);font-size:38px;letter-spacing:-.03em;margin-bottom:10px}
.success p{color:var(--muted);max-width:40ch}
.next-steps{list-style:none;display:grid;gap:16px;margin-top:40px;counter-reset:n}
.next-steps li{display:flex;gap:14px;align-items:flex-start;color:var(--muted)}
.next-steps li b{color:var(--ink);display:block}
.next-steps .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}

/* legal */
.prose{max-width:72ch}
.prose h2{font-size:clamp(26px,3vw,34px);margin:44px 0 12px}
.prose p,.prose li{color:var(--muted);margin-bottom:12px}
.prose ul{padding-left:22px}
.todo{background:var(--lemon);color:#0E1B33;padding:1px 6px;border-radius:6px;font-weight:600}

/* footer cta */
.fcta{padding:40px 0 110px}

/* 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 0 100px}
.nf .ph-art{max-width:560px;margin:0 auto 40px;aspect-ratio:560/360}
.nf h1{font-size:clamp(44px,6vw,80px);margin-bottom:14px}
.nf p{color:var(--muted);margin-bottom:28px}

@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* fixes */
.page-hero .aurora,.page-hero .grid-bg{-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.page-hero .grid-bg{-webkit-mask-image:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),#000 0%,transparent 70%);mask-image:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),#000 0%,transparent 70%)}
.page-hero .wrap > *,.contact .wrap > *,.fgrid > *{min-width:0}
.proj-cta{text-decoration:none;color:inherit}
.fgrid{align-items:end}
.pkg-main .badge{display:inline-block}
.pkg-badge[hidden]{display:none}
.pkg-main::after{right:-190px;bottom:-210px}
.c-card a{text-decoration:none}
.c-card strong{overflow-wrap:anywhere}
/* dlouhý e-mail se na úzkém displeji nesmí lámat uprostřed slova:
   prostřední sloupec smí zúžit, tlačítko Kopírovat spadne na vlastní řádek */
.c-card>span:nth-of-type(2){min-width:0}
@media (max-width:560px){
  .c-card{flex-wrap:wrap}
  .c-card strong{font-size:15px}
  .c-card .copy-btn{margin-left:62px;margin-top:2px}
}
@media (max-width:380px){
  .c-card strong{font-size:14px}
}
.ph-art{--ground:#C8D5FF;--cloud:#FFFFFF}
.is-dark .ph-art{--ground:#2A3F7A;--cloud:#34498A}
.ph-art .ground{fill:var(--ground)}
.ph-art .cloud{fill:var(--cloud)}

/* language switcher */
.flag{width:22px;height:22px;border-radius:50%;overflow:hidden;display:inline-block;flex:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ink) 14%,transparent)}
.flag svg{width:100%;height:100%;display:block}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink);font:600 14px var(--body);cursor:pointer;transition:border-color .2s}
.lang-btn:hover{border-color:var(--ink)}
.lang-btn .chev{width:12px;height:12px;transition:transform .3s}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:var(--shadow);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);z-index:120}
.lang-menu.open{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:500;font-size:15px;color:var(--ink);transition:background .2s}
.lang-menu a:hover{background:var(--bg)}
.lang-menu a[aria-current="true"]{background:var(--sky);font-weight:600}
.lang-menu a[aria-current="true"]::after{content:"";margin-left:auto;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translateY(-2px)}
.mm-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.mmenu .mm-langs a{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:0;line-height:1;display:inline-flex;align-items:center;gap:8px;padding:9px 13px 9px 9px;border:1.5px solid var(--line);border-radius:999px;opacity:1;transform:none}
.mmenu .mm-langs a[aria-current="true"]{border-color:var(--accent);color:var(--ink);background:var(--sky)}
@media (max-width:640px){.lang{display:none}}
.btn{white-space:nowrap}
@media (max-width:1140px) and (min-width:861px){.links{gap:18px}.nav .btn-sm{display:none}}
.mm-langs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:420px}
.mmenu .mm-langs a{flex-direction:column;justify-content:center;gap:6px;padding:10px 0;border-radius:16px;font-size:13px}
/* language switcher visible on mobile too */
@media (max-width:640px){
  .lang{display:block}
  .lang-btn{padding:0 9px 0 8px;gap:5px}
  .lang-btn .lang-code{display:none}
  .nav .btn-sm{display:none}
  .actions{gap:8px}
  .lang-menu{right:-52px}
}
.page-hero h1{font-size:clamp(40px,5.6vw,88px)}
.qa .plus{transform-origin:50% 50%}
.qa button{overflow:hidden}
/* small-screen robustness for long words in all languages */
h1,h2,h3,h4,.btn,p{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:560px){
  .final-box{padding:44px 24px}
  .final-box h2{font-size:clamp(32px,10vw,46px)}
  .svc h3{font-size:26px}
  .svc{padding:26px 20px}
  h2{font-size:clamp(30px,9vw,40px)}
}
@media (max-width:420px){
  .nav .wrap{gap:10px}
  .logo{gap:7px}
  .logo .logo-mark{width:28px;height:30px}
  .nav .wm{font-size:19px}
  .actions{gap:6px}
  .nav .icon-btn{width:40px;height:40px}
  .lang-btn{height:40px;padding:0 7px}
}
@media (max-width:350px){
  .nav .wm{font-size:16px}
  .nav .icon-btn{width:36px;height:36px}
  .lang-btn{height:36px;padding:0 6px;gap:3px}
  .lang-btn .flag{width:20px;height:20px}
  .wrap{width:calc(100% - 28px)}
}
@media (max-width:640px){.lang-menu{right:-46px}}
@media (max-width:350px){.lang-menu{right:-42px;min-width:180px}}
/* page transition logo: white cursor needs coloured letters */
.pt .pt-cursor .lm-m{stroke:#2448F0}

/* o mně */
.about-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:56px;align-items:center}
.about-grid h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.02em;line-height:1.2}
.about-photo{text-align:center}
.avatar-big{width:min(320px,70vw);aspect-ratio:1;margin:0 auto 22px;border-radius:50%;background:linear-gradient(150deg,var(--accent),#7C95FF);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:780;font-size:clamp(70px,9vw,110px);letter-spacing:-.04em;border:3px solid var(--ink);box-shadow:14px 16px 0 var(--ink)}
.about-photo img{width:min(320px,70vw);aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid var(--ink);box-shadow:14px 16px 0 var(--ink);display:block;margin:0 auto 22px}
.about-name{font-family:var(--display);font-weight:720;font-size:26px;letter-spacing:-.02em}
.about-role{color:var(--muted)}
.form-note{color:var(--muted);font-size:16px;margin-top:10px}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:34px}}

/* ===== výkon: plynulé scrollování a rychlé první načtení ===== */
/* aurora bez filter:blur – stejný vzhled, výrazně nižší zátěž při scrollu */
.aurora{filter:none;contain:strict}
.aurora i{background:none!important}
.aurora i:nth-child(1){background-image:radial-gradient(closest-side,var(--glow1),transparent 72%)!important}
.aurora i:nth-child(2){background-image:radial-gradient(closest-side,var(--glow2),transparent 72%)!important}
.aurora i:nth-child(3){background-image:radial-gradient(closest-side,var(--glow3),transparent 72%)!important}
.aurora i{will-change:transform}
/* rozostření lišty jen na výkonnějších zařízeních s myší */
.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 92%,transparent)}
@media (hover:hover) and (pointer:fine) and (min-width:861px){
  .nav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 72%,transparent)}
}
/* zrno neblokuje kompozici */
.grain{will-change:opacity;contain:strict}
/* logo zůstává ostré i během animací */
.logo-mark{transform:translateZ(0)}
.js .reveal{filter:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{filter:none}
/* obsah pod prvním zobrazením se vykresluje až když je potřeba */
.faq,.fcta,footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
/* méně práce pro prohlížeč na mobilu */
@media (max-width:860px){
  .aurora,.grain{display:none}
  .band-track{animation-duration:36s}
  .final-box .orb:nth-of-type(1){animation:none}
  .plan.hot::after{animation:none}
}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}

/* tým na stránce O mně */
.team{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.team figure{margin:0;text-align:center}
.team .por{border-radius:50%;overflow:hidden;box-shadow:10px 12px 0 var(--ink);margin-bottom:16px}
.team .por svg{display:block;width:100%;height:auto}
.team figcaption{display:grid;gap:2px}
.team .about-name{font-family:var(--display);font-weight:720;font-size:21px;letter-spacing:-.015em}
.team .about-role{color:var(--muted);font-size:15px}
.about-grid{grid-template-columns:.78fr 1.22fr}
@media (max-width:860px){.team{max-width:460px}}

/* čitelnější mezery mezi znaky ve velkých nadpisech */
h1{letter-spacing:-.022em}
h2{letter-spacing:-.022em}
.hero-top h1{letter-spacing:-.022em;font-stretch:84%}
.page-hero h1{letter-spacing:-.02em;font-stretch:86%}
.final-box h2{letter-spacing:-.018em;font-stretch:86%}
.statement p{letter-spacing:-.018em}
.price,.pkg-price{letter-spacing:-.022em}

/* ===== oprava úvodní animace loga (čistý nájezd bez rozmazání) ===== */
.logo-mark{transform:none}
@keyframes logoPop{0%{opacity:0;transform:scale(.88) rotate(-6deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes letterIn{from{opacity:0}to{opacity:1}}

.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* vybraný balíček v poptávce – výrazné označení */
.chips span{position:relative;padding-left:16px;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.chips span::before{content:"";position:absolute;left:14px;top:50%;width:0;height:0;opacity:0;transform:translateY(-50%) rotate(-45deg);border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transition:width .2s,height .2s,opacity .2s}
.chips input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;padding-left:38px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.chips input:checked + span::before{width:11px;height:6px;opacity:1}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked + span:hover{border-color:var(--accent)}

/* ---------- úvodní animace loga ---------- */
.loader{background:#0E1B33}
.loader-logo{width:clamp(112px,15vw,158px);height:auto;opacity:0;transform:scale(.82);
  transform-origin:50% 60%;shape-rendering:geometricPrecision;
  animation:mjPop .52s cubic-bezier(.22,1.15,.36,1) forwards}
.loader-logo path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.loader-logo path:first-child{fill:#fff;stroke:#fff}
.loader-logo .lm-m,.loader-logo .lm-j{opacity:0;animation:mjLetter .3s cubic-bezier(.2,.8,.2,1) forwards}
.loader-logo .lm-m{animation-delay:.3s}
.loader-logo .lm-j{animation-delay:.44s}
@keyframes mjPop{60%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes mjLetter{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .loader-logo,.loader-logo .lm-m,.loader-logo .lm-j{animation:none;opacity:1;transform:none}
}

/* ---------- logo: J je vzdy zlate, at je kurzor bily nebo modry ----------
   Bily kurzor (uvodni animace, prechod mezi strankami) = modre M, zlate J,
   stejne jako profilovka na Instagramu. Modry kurzor (hlavicka, paticka)
   = bile M, zlate J. Zlata je jedina: #F3B806. */
.loader{background:#0E1B33}
.loader-logo .lm-m{stroke:#2448F0}
.loader-logo .lm-j{stroke:#F3B806}
.pt .pt-cursor .lm-m{stroke:#2448F0}
.pt .pt-cursor .lm-j{stroke:#F3B806}
.logo-mark .lm-j,.sig .logo-mark .lm-j{stroke:#F3B806}

/* na mobilu se odkazy v patičce a kontakty trefují prstem — 18 px je málo */
@media (max-width:760px){
  footer a,.contact-list a,.foot-links a{display:inline-block;padding:9px 0;min-height:24px}
  footer li{margin:0}
}
/* plovoucí skvrny v pozadí: jen posun, bez změny měřítka.
   Měřítko nutí prohlížeč tvar překreslit, posun umí grafická karta sama. */
@keyframes float1{to{transform:translate(-12vw,8vw)}}
@keyframes float2{to{transform:translate(-18vw,-10vw)}}
@keyframes float3{to{transform:translate(14vw,-6vw)}}
.pkg-price{contain:layout style}
/* animace ceny: stejně široké číslice a ohraničený přepočet rozvržení,
   jinak každý zápis čísla přepočítává okolí a je to vidět jako sekání */
.pkg-price .count,.price .count,.count{font-variant-numeric:tabular-nums}
/* přechody jen na tom, co se opravdu mění — "all" nutí prohlížeč hlídat vše */
.num{transition:background .5s cubic-bezier(.3,1.6,.4,1),border-color .5s,color .5s,transform .5s cubic-bezier(.3,1.6,.4,1),box-shadow .5s}
.chips span{transition:background .25s,border-color .25s,color .25s,transform .25s}
/* mezeru mezi číslem a měnou dělá pevná mezera v textu, ne odsazení */
.price small,.pkg-price small{margin-left:0}
/* ---------- srovnávací tabulka: aby bylo vidět, že se posouvá ---------- */
.cmp-wrap{position:relative;
  background-image:
    linear-gradient(to right, var(--surface), color-mix(in srgb, var(--surface) 0%, transparent)),
    linear-gradient(to left,  var(--surface), color-mix(in srgb, var(--surface) 0%, transparent)),
    radial-gradient(farthest-side at 0 50%, rgba(14,27,51,.16), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(14,27,51,.16), transparent);
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 16px 100%, 16px 100%;
  background-attachment:local, local, scroll, scroll}
.is-dark .cmp-wrap{background-image:
    linear-gradient(to right, var(--surface), color-mix(in srgb, var(--surface) 0%, transparent)),
    linear-gradient(to left,  var(--surface), color-mix(in srgb, var(--surface) 0%, transparent)),
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), transparent)}
.cmp-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cmp-hint{display:none;font-size:14px;color:var(--muted);margin:0 0 10px;align-items:center;gap:7px}
.cmp-hint::after{content:"→";font-size:16px;line-height:1}
@media (max-width:760px){.cmp-hint{display:flex}}
/* nadpisy v patičce jsou h3, ať osnova stránky neskáče z h2 rovnou na h4 */
footer h3{color:var(--ink);font-size:15px;margin-bottom:12px;font-family:var(--body);font-weight:700;letter-spacing:0}
/* ---------- výkon ---------- */
/* náhradní písmo má stejné rozměry jako cílové, takže text při načtení neposkočí */
@font-face{font-family:"Bricolage fallback";src:local("Arial Narrow"),local("Liberation Sans Narrow"),local("Arial");
  size-adjust:92%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Instrument fallback";src:local("Segoe UI"),local("Roboto"),local("Arial");
  size-adjust:100%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
:root{--display:"Bricolage Grotesque","Bricolage fallback","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans","Instrument fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* rozmazané kruhy na dotykových displejích zustavaji stat - setri to baterii i plynulost */
@media (pointer:coarse),(max-width:760px){
  .aurora i{animation:none!important}
}
/* sekce mimo obrazovku prohlizec nepocita, dokud se k nim neposune */
.showcase,.process,.devices,.refs,.ba,.statement{contain-intrinsic-size:auto 900px}

/* ---------- ceny, měna, doporučení ---------- */
.cur-btn{width:auto;min-width:46px;padding:0 13px;font:700 14px var(--body);letter-spacing:.01em}
.cur-btn:active{transform:scale(.94)}
@media (max-width:360px){.cur-btn{display:none}}

.price-now{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-old{font-family:var(--body);font-size:16px;font-weight:500;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.plan .price{margin-bottom:6px}
.plan .price-old{margin-bottom:16px;display:block}
.plan.hot .price-old{color:#AEB8CE}
.tag-intro{display:inline-block;background:var(--lemon);color:#0E1B33;font-size:12px;font-weight:700;
  letter-spacing:.02em;padding:3px 9px;border-radius:999px;margin-bottom:10px}

.intro-banner{display:flex;flex-direction:column;gap:6px;background:var(--sky);border:1px solid var(--line);
  border-radius:20px;padding:20px 24px;margin-bottom:28px}
.intro-banner strong{font-family:var(--display);font-size:20px;letter-spacing:-.02em}
.intro-banner span{color:var(--muted);font-size:15px;max-width:74ch}
.is-dark .intro-banner{background:#16234A}
.slots{display:flex;align-items:center;gap:12px;margin:10px 0 0!important;flex-wrap:wrap}
.slots b{font-size:15px;color:var(--ink);white-space:nowrap}
.slots .dots{display:inline-flex;gap:5px}
.slots .dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent);display:block}
.slots .dots i.on{background:var(--accent)}
.sec-head .slots{margin-top:16px!important}

.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.ref-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:56px}
.ref-step{position:relative;padding-left:66px;min-width:0}
.ref-step .num{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:19px}
.ref-step h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.ref-step p{color:var(--muted);font-size:15.5px}
.ref-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}
.ref-table,.ref-cond{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:28px}
.ref-table h3,.ref-cond h3{font-family:var(--display);font-size:21px;letter-spacing:-.02em;margin-bottom:16px}
.reftab{width:100%;border-collapse:collapse;font-size:16px}
.reftab th,.reftab td{padding:11px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:baseline}
.reftab tr:last-child th,.reftab tr:last-child td{border-bottom:0}
.reftab th{font-weight:600}
.reftab td{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.reftab td:last-child{color:var(--ink);white-space:nowrap}
.ref-cond .ticks{margin-bottom:26px}
.ref-cond .ticks li{font-weight:400;color:var(--muted);padding-bottom:10px}
@media (max-width:960px){.ref-steps{grid-template-columns:1fr;gap:22px;margin-bottom:40px}
  .ref-grid{grid-template-columns:1fr}}
@media (max-width:420px){.ref-step{padding-left:0;padding-top:56px}.ref-step .num{width:42px;height:42px}
  .ref-table,.ref-cond{padding:22px 18px}.reftab{font-size:15px}}

/* ---------- reference ---------- */
.refs{padding-bottom:40px}
.ref-card{display:block;text-decoration:none;color:inherit}
.ref-card .demo-frame{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.ref-card:hover .demo-frame{transform:translateY(-8px) rotate(-.4deg)}
/* stav zakázky — musí přebít .demo .label, proto dvě třídy */
.demo .label-done,.demo .label-wip{font-weight:700;display:inline-flex;align-items:center;gap:7px}
.demo .label-done::before,.demo .label-wip::before{content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:none}
.demo .label-done{border-color:#12A05F;color:#0B6B3F;background:#E8F7EF}
.demo .label-wip{border-color:#8B97AE;color:#46516A;background:#EEF1F6}
.is-dark .demo .label-done{border-color:#1FB36B;color:#5FD79B;background:rgba(31,179,107,.14)}
.is-dark .demo .label-wip{border-color:#6B7794;color:#C3CCDE;background:rgba(107,119,148,.20)}
.demo .label-wip::before{animation:mj-pulse 1.8s ease-in-out infinite}
@keyframes mj-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.demo .label-wip::before{animation:none}}
.ref-go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:600;font-size:15px;color:var(--accent)}
.ref-go::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .3s}
.ref-card:hover .ref-go::after{transform:rotate(45deg) translate(2px,-2px)}
/* Marcelův web — podle skutečného marcelzastupitel.cz */
.ms-logo{letter-spacing:.1em}
.ms-hero{display:grid;grid-template-columns:1.06fr .94fr;gap:2cqw;align-items:end;
  padding:4cqw 4.5cqw 0;min-height:30cqw}
.ms-copy{padding-bottom:4cqw}
.ms-kick{display:block;font-size:1.9cqw;letter-spacing:.22em;text-transform:uppercase;
  color:#7A8299;margin-bottom:1.6cqw}
.ms-badge{display:inline-block;background:var(--s-acc);color:#fff;font-weight:700;
  font-size:1.9cqw;letter-spacing:.1em;text-transform:uppercase;padding:.8cqw 1.8cqw;border-radius:.7cqw}
.ms-name{font-family:"Barlow Condensed","Arial Narrow",var(--display),sans-serif;
  font-weight:800;text-transform:uppercase;color:#0B2157;font-size:9.6cqw;line-height:.94;
  letter-spacing:-.005em;margin:1.8cqw 0 0!important}
.ms-name i{font-style:normal;color:#D7202E}
.ms-role{font-size:2.1cqw!important;color:#5A6379;margin:1.4cqw 0 0!important}
.ms-btn{display:inline-block;margin-top:2.6cqw;background:var(--s-acc);color:#fff;
  font-weight:700;font-size:2cqw;letter-spacing:.08em;text-transform:uppercase;
  padding:1.5cqw 2.8cqw;border-radius:1.1cqw;font-style:normal}
.ms-photo{position:relative;align-self:end;height:30cqw;border-radius:1.2cqw 1.2cqw 0 0;overflow:hidden;
  background:#E4E2DD url("/assets/ref-marcel.jpg") center top/cover no-repeat}
.kp-hero{position:relative;height:100%;min-height:30cqw;overflow:hidden;display:flex;
  align-items:center;background:#07101E}
/* skleněná fasáda s odrazem — stejný motiv jako fotka na jejich webu */
.kp-photo{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(5,12,24,.97) 0%,rgba(5,12,24,.93) 30%,rgba(5,12,24,.55) 52%,
      rgba(5,12,24,.16) 72%,rgba(5,12,24,.42) 100%),
    repeating-linear-gradient(99deg,rgba(158,200,255,.22) 0 1.1cqw,rgba(9,22,44,.62) 1.1cqw 2.8cqw),
    repeating-linear-gradient(6deg,rgba(198,228,255,.10) 0 1.5cqw,transparent 1.5cqw 3.4cqw),
    linear-gradient(196deg,#3A6FB8 0%,#16305A 46%,#0A1730 100%)}
.kp-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(0deg,rgba(120,170,235,.22),transparent 78%);
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.kp-copy{position:relative;z-index:2;padding:4.2cqw 4.6cqw;max-width:56cqw}
.kp-title{color:#fff!important;font-size:4.9cqw!important;line-height:1.04;letter-spacing:-.025em;
  margin:0 0 2cqw!important;font-weight:800}
.kp-sub{color:#BACBE8!important;font-size:1.95cqw!important;margin:0 0 2.8cqw!important;max-width:30cqw;
  line-height:1.5}
.kp-sub b{color:#fff;font-weight:700}
.kp-btns{display:flex;gap:1.4cqw}
.kp-btn{background:var(--s-acc);color:#fff;font-style:normal;font-weight:700;font-size:1.85cqw;
  padding:1.5cqw 2.4cqw;border-radius:1cqw;white-space:nowrap}
.kp-ghost{background:rgba(10,22,44,.55);border:1px solid rgba(190,215,255,.32);color:#DCE8FF}
.kp-chip{position:absolute;z-index:3;background:rgba(11,22,42,.80);border:1px solid rgba(140,175,235,.26);
  border-radius:1.1cqw;padding:1.1cqw 1.5cqw;color:#A8BEE0;font-size:1.4cqw;line-height:1.25;
  display:flex;flex-direction:column;gap:.25cqw;max-width:20cqw}
.kp-chip b{color:#fff;font-size:2.2cqw;font-weight:800;letter-spacing:-.01em}
.kp-c1{right:20cqw;top:6cqw}
.kp-c2{right:3.5cqw;top:17.5cqw}
.kp-c3{right:15cqw;bottom:5cqw}
.kp-logo{color:#4FA8F0;letter-spacing:.06em;display:inline-flex;align-items:center;gap:.9cqw}
.kp-logo i{width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:#2F8BE0;position:relative;flex:none}
.kp-logo i::after{content:"";position:absolute;left:50%;top:22%;width:38%;height:56%;background:#EAF5FF;transform:translateX(-50%) rotate(45deg);border-radius:60% 0 60% 60%}
.ref-field{position:relative;overflow:hidden;background:
  linear-gradient(180deg,#DCEEE2 0 30%,transparent 30%),
  repeating-linear-gradient(98deg,#4C9A66 0 3.2cqw,#5CAE77 3.2cqw 6.4cqw)!important}
.ref-field::before{content:"";position:absolute;left:-4%;right:-4%;top:24%;height:9%;
  background:#2F6B45;border-radius:50% 50% 0 0 / 100% 100% 0 0;opacity:.9}
.ref-field::after{content:"";position:absolute;left:8%;right:8%;bottom:9%;height:1.4cqw;border-radius:1cqw;
  background:rgba(255,255,255,.55)}

/* ukázka hotového webu v sekci s displeji */
.ds-ref{background:#EFEEEB;color:#0E1730}
.ds-ref .ds-logo{font-weight:800;letter-spacing:.1em;color:#0B2157}
.ds-ref .ds-links span{color:#5A6379}
.ds-kicker{font-size:.72em;letter-spacing:.22em;text-transform:uppercase;color:#7A8299;margin-bottom:10px!important}
.ds-badge{display:inline-block;background:#E1101F;color:#fff;font-weight:700;font-size:.7em;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:7px}
.ds-name{font-family:"Barlow Condensed","Arial Narrow",var(--display),sans-serif;
  font-weight:800;text-transform:uppercase;color:#0B2157;line-height:.86;
  font-size:clamp(34px,4.4vw,62px);letter-spacing:-.005em;margin:14px 0 0!important}
.ds-role{color:#5A6379;margin:10px 0 0!important}
.ds-ref .ds-btn{background:#E1101F;color:#fff;border-radius:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-top:18px}
.ds-portrait{background:#E4E2DD url("/assets/ref-marcel.jpg") center top/cover no-repeat!important;
  position:relative;overflow:hidden;border-radius:12px 12px 0 0}
.ds-portrait::after,.ds-portrait::before{content:none!important}
.ds-ref .ds-tiles div{background:#E7E5E0;color:#0E1730}
.ds-ref .ds-grid span{background:linear-gradient(135deg,#D7D5CF,#B5B2AA)}
.ds-ref .ds-grid span:nth-child(2){background:linear-gradient(135deg,#E1101F,#A50D18)}
.ds-ref .ds-grid span:nth-child(3){background:linear-gradient(135deg,#1B3573,#0B2157)}


/* tým: na mobilu vždy jeden sloupec (přebíjí pozdější .about-grid pravidlo) */
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:34px}
  .team{max-width:460px;margin-inline:auto}
}
/* slogan v patičce */
.foot-slogan{font-family:var(--display);font-weight:720;font-size:19px;letter-spacing:-.02em;
  color:var(--ink);margin-top:16px}

/* čtyři dlaždice = 4 sloupce, ne 3 + díra */
@media (min-width:1051px){.included-4{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1050px) and (min-width:521px){.included-4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.included-4{grid-template-columns:1fr}}

/* dlouhá slova (SK/CZ) nesmí roztáhnout grid na úzkých displejích */
.process .wrap > *,.about-grid > *,.steps,.step{min-width:0}
@media (max-width:420px){
  .sec-head h2,.sec-head p,.step h3,.step p{overflow-wrap:anywhere}
  .team{gap:14px}
  .team .por{box-shadow:6px 8px 0 var(--ink)}
  .team .about-name{font-size:19px}
  .team .about-role{font-size:14px}
}