/* ================= fonts =================
   Brand faces: Funnel Display for headlines, big numbers and prices, Funnel Sans for text, UI and labels.
   The site has no monospace; IBM Plex Mono lives on only as Sign Mono. The Sign * faces below belong
   to the signs (the product), not to the brand.
   The two funnel-*-latin files map U+2011 (non-breaking hyphen, as in e‑mail) to their own hyphen glyph,
   added with fontTools; the published files lack it and the browser would borrow the hyphen from another font. */
@font-face{font-family:'Funnel Display';src:url(../fonts/funnel-display-latin-wght-normal.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Funnel Display';src:url(../fonts/funnel-display-latin-ext-wght-normal.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Funnel Sans';src:url(../fonts/funnel-sans-latin-wght-normal.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Funnel Sans';src:url(../fonts/funnel-sans-latin-ext-wght-normal.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* the signs' own faces */
@font-face{font-family:'Sign Grotesk';src:url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC,U+2122}
@font-face{font-family:'Sign Grotesk';src:url(../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:'Sign Serif';src:url(../fonts/gloock-latin-400-normal.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC,U+2122}
@font-face{font-family:'Sign Serif';src:url(../fonts/gloock-latin-ext-400-normal.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:'Sign Condensed';src:url(../fonts/anton-latin-400-normal.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC,U+2122}
@font-face{font-family:'Sign Condensed';src:url(../fonts/anton-latin-ext-400-normal.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:'Sign Mono';src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC,U+2122}
@font-face{font-family:'Sign Mono';src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');font-weight:400 500;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:'Sign Display';src:url(../fonts/funnel-display-latin-wght-normal.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+20AC,U+2122}
@font-face{font-family:'Sign Display';src:url(../fonts/funnel-display-latin-ext-wght-normal.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}

/* ================= tokens =================
   Značka Půlnoc (30. 10. 2026). The whole site is dark (režim Tma); the old variable names stay:
   ink = text (Bílá), ink-2/-3 = secondary text (-3 is Ocel), paper = page (Půlnoc), paper-2 = cards (Grafit),
   raise = a control on a card, line = linka, line-field = linka-pole (fields, 3:1),
   night = Půlnoc, night-3 = Grafit, moon = Bílá, moon-2/-3 = secondary text.
   Kobalt is for form buttons and the active state, Světlý kobalt for links and focus, Limeta for the tap:
   the way into the konfigurátor (Navrhnout ceduli), the logo phone, NFC rings, step numbers, the label mark
   and the soft glows. The phone screens in the illustrations keep their own light colours. */
:root{
  color-scheme:dark;
  --ink:#fff;
  --ink-2:#a3a9b7;
  --ink-3:#8b91a0;
  --paper:#0b0d12;
  --paper-2:#1b1e26;
  --raise:#2c303b;
  --raise-hover:#363b48;
  --line:#2c303b;
  --line-field:#6b7180;
  --night:#0b0d12;
  --night-2:#07080c;
  --night-3:#1b1e26;
  --moon:#fff;
  --moon-2:#a3a9b7;
  --moon-3:#8b91a0;
  --kobalt:#2b59ff;
  --kobalt-hover:#1e46e6;
  --kobalt-hover-dark:#3d66ff;
  --kobalt-svetly:#8fa8ff;
  --kobalt-svetly-hover:#b4c5ff;
  --limeta:#d7ff3d;
  --limeta-hover:#e6ff85;
  --limeta-press:#c2ec1c;
  --chyba:#ff8a80;
  --chyba-dark:#ff8a80;
  --star:#ffb400;
  --focus:var(--kobalt-svetly);
  --r:22px;
  --r-m:14px;
  --r-s:8px;
  --r-l:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Funnel Display: h1–h3, big numbers, prices, brand moments. Funnel Sans: text, UI, buttons, fields, labels */
  --f-display:'Funnel Display','Helvetica Neue',Arial,sans-serif;
  --f-text:'Funnel Sans','Helvetica Neue',Arial,sans-serif;
  --font:var(--f-text);
  --f-num:var(--f-display);
  --gutter:clamp(20px,4.5vw,56px);
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--night);color:var(--moon);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--f-display)}
h1,h2{font-weight:650}
h3{font-weight:600}
h1,h2{text-wrap:balance}
.foot p,.lede,.hint,.cfg-fine{text-wrap:pretty}
::selection{background:var(--limeta);color:var(--night)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.wrap{width:min(var(--max),100%);margin:0 auto;padding:0 var(--gutter)}
.narrow{width:min(860px,100%)}
.section{padding:clamp(96px,10.7vw,128px) 0;position:relative}
.sec-dark{background:var(--night);color:var(--moon)}

/* section label (brand Štítek): Funnel Sans in sentence case behind the lime tap mark, a small copy of the logo's
   leaning phone; three words at most. Other labels (prices, codes, totals) use the same face without the mark */
.eyebrow{font:600 15px/1.3 var(--f-text);letter-spacing:-.005em;color:var(--moon);margin-bottom:22px}
.eyebrow::before{content:"";display:inline-block;width:6px;height:11px;margin:0 12px 0 3px;border-radius:2px;background:var(--limeta);transform:rotate(45deg)}
/* step number (brand Číslo kroku): only for a real order of steps; Limeta, because every step leads to the tap */
.cislo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--limeta);color:var(--night);font:700 16px/1 var(--f-display);font-variant-numeric:tabular-nums}
h1{font-size:clamp(44px,6.6vw,88px);line-height:1.02;letter-spacing:-.035em;font-weight:650}
h2{font-size:clamp(38px,5.4vw,72px);line-height:1.04;letter-spacing:-.03em;font-weight:650}
h3{font-size:22px;letter-spacing:-.015em;line-height:1.2}
/* small phones: section titles shrink with the screen, so a first line like "První recenze přišla" stays whole */
@media (max-width:389px){h2{font-size:max(30px,9.55vw)}}
.dim{color:var(--moon-3)}
/* the grey second line of a heading is also lighter: one face, two voices */
h2 .dim{font-weight:400}
.lede{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--moon-2);margin-top:26px;max-width:600px;letter-spacing:-.01em}

/* ================= buttons ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:999px;border:0;font-size:16px;font-weight:600;cursor:pointer;transition:transform .35s var(--ease-out),background-color .2s,color .2s,box-shadow .2s;white-space:nowrap;letter-spacing:-.005em}
.btn:active{transform:scale(.97)}
/* primary (brand Tlačítko hlavní): Kobalt with white text, for form actions. btn-light and btn-dark are the same, the site is dark */
.btn-light,.btn-dark{background:var(--kobalt);color:#fff}
.btn-light:hover,.btn-dark:hover{background:var(--kobalt-hover-dark)}
/* the way into the konfigurátor (Navrhnout ceduli): Limeta with Půlnoc text, in the bar and in the hero */
.btn-lime,.nav .btn,.plan-hi .btn{background:var(--limeta);color:var(--night)}
.btn-lime:hover,.nav .btn:hover,.plan-hi .btn:hover{background:var(--limeta-hover);box-shadow:0 8px 28px -8px rgba(215,255,61,.6)}
.btn-lime:active,.nav .btn:active,.plan-hi .btn:active{background:var(--limeta-press);box-shadow:none}
.btn-lime:focus-visible,.nav .btn:focus-visible,.plan-hi .btn:focus-visible{outline-color:var(--limeta)}
.btn-ghost{color:var(--kobalt-svetly);padding:0 10px}
.btn-ghost:hover{color:var(--kobalt-svetly-hover)}
.btn-ghost span{transition:transform .35s var(--ease-out)}
.btn-ghost:hover span{transform:translateX(4px)}
.btn-ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.btn-ghost-light:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.plan .btn-ghost-light:hover,.multi-note .btn-ghost-light:hover{color:var(--limeta);box-shadow:inset 0 0 0 1.5px var(--limeta)}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-block{width:100%}
.link-btn{background:none;border:0;padding:0;color:var(--kobalt-svetly);cursor:pointer;font-size:15px}
.link-btn:hover{color:var(--kobalt-svetly-hover);text-decoration:underline}
.round{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;transition:background-color .2s}
.round:hover{background:rgba(255,255,255,.2)}

/* ================= nav ================= */
.nav{--tuk:var(--limeta);position:fixed;inset:0 0 auto;z-index:50;height:52px;background:var(--night);border-bottom:1px solid rgba(255,255,255,.08)}
/* frosted where the browser can blur: the glows and the page pass softly under the bar */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav{background:rgba(11,13,18,.78);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px)}}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--night);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav-in{height:100%;width:min(var(--max),100%);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:19px;letter-spacing:-.04em;color:#fff}
.brand img{display:block;height:16px;width:auto}
/* the signature: the phone leans over the T and its corner sits in the notch (Limeta);
   the letters are centred on the bar and the phone stands above them */
.nl{display:block;width:124px;height:auto;margin-top:-9px;overflow:visible}
@media (max-width:420px){.nl{width:112px;margin-top:-8px}}
@media (max-width:359px){.nl{width:100px;margin-top:-7px}}
.nl-ph{fill:var(--tuk);transition:fill .4s}
.brand:hover .nl-ph,.brand:focus-visible .nl-ph{animation:nl-tap .7s var(--ease-out)}
@keyframes nl-tap{0%{transform:none}38%{transform:translate(12px,-12px)}66%{transform:translate(-1px,1px)}82%,100%{transform:none}}
.foot .brand img{height:28px}
.nav-links{display:flex;gap:2px;margin-left:auto;font-size:14px;font-weight:500;color:#dcdfe6;position:relative}
.nav-links a{position:relative;z-index:1;padding:7px 12px;border-radius:999px;transition:color .2s .06s,background-color .25s,box-shadow .35s var(--ease-out)}
/* hover: the lime pill slides under the link and the text turns black */
.nav-links a:hover,.nav-links a:focus-visible{color:#0b0d12}
/* pages without the sliding pill (Rady) light the link itself */
.nav-links:not(:has(.nav-pill)) a:hover,.nav-links:not(:has(.nav-pill)) a:focus-visible{background:var(--limeta);box-shadow:0 0 0 1px rgba(215,255,61,.5),0 8px 24px -6px rgba(215,255,61,.55),0 2px 6px rgba(0,0,0,.35)}
.nav-links a[aria-current]{color:#fff}
.nav-links a[aria-current]:hover,.nav-links a[aria-current]:focus-visible{color:#0b0d12}
.nav-links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:1px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:currentColor}
/* a soft pill glides to the link under the pointer */
.nav-pill{position:absolute;left:0;top:0;height:100%;width:var(--w,0);border-radius:999px;background:var(--limeta);box-shadow:0 0 0 1px rgba(215,255,61,.5),0 8px 24px -6px rgba(215,255,61,.55),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55);transform:translateX(var(--x,0));opacity:0;transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .25s,background-color .4s;pointer-events:none}
.nav-pill.on{opacity:1}
.nav-pill.jump{transition:opacity .25s,background-color .4s}
@media (max-width:820px){.nav-links{display:none}.nav .btn{margin-left:auto}}
.nav .brand,.menu-btn,.nav-in .btn{flex:none}
@media (max-width:374px){.nav-in{gap:12px}.nav-in .btn{padding-inline:14px}}
.menu-btn{display:none;position:relative;width:34px;height:34px;margin-right:-8px;border:0;background:none;cursor:pointer;color:inherit}
.menu-btn i{position:absolute;left:9px;right:9px;height:1.5px;border-radius:1px;background:#fff;transition:transform .35s var(--ease-out),background-color .4s}
.menu-btn i:first-child{top:13px}
.menu-btn i:last-child{top:20px}
.menu-open .menu-btn i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .menu-btn i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:absolute;top:52px;left:0;right:0;display:grid;padding:8px var(--gutter) 22px;background:var(--night);border-bottom:1px solid rgba(255,255,255,.08);animation:menu-in .35s var(--ease-out)}
.menu[hidden]{display:none}
.menu a{padding:13px 12px;margin:0 -12px;border-radius:var(--r-s);font:600 24px/1.25 var(--f-display);letter-spacing:-.025em;color:#fff;border-bottom:1px solid rgba(255,255,255,.07);transition:background-color .25s,color .25s,padding-left .35s var(--ease-out)}
.menu a:hover,.menu a:active,.menu a:focus-visible{background:var(--limeta);color:#0b0d12;padding-left:18px;box-shadow:0 10px 28px -10px rgba(215,255,61,.6)}
.menu a:last-child{border-bottom:0}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:820px){.menu-btn{display:block}}
@media (min-width:821px){.menu{display:none!important}}

/* ================= frames (shared) =================
   Modelled on IKEA RÖDALM 21×30 (oak effect, black, white): 230 × 320 mm, a flat 14 mm face,
   30 mm deep, polystyrene front. --m is the face as a share of the frame's width, --fy the same
   face as a share of its height. The rails are mitred: top and bottom grain runs across, the sides run down. */
.frame{--m:6%;--fy:4.4%;--tone:#c4a074;--wood-h:none;--wood-v:none;--lit:rgba(255,255,255,.1);--dim:rgba(0,0,0,.1);--l:rgba(255,255,255,.04);--r:rgba(0,0,0,.07);--edge:rgba(255,255,255,.3);--seam:rgba(0,0,0,.34);--drop:0 1px 2px rgba(0,0,0,.18),0 4px 10px -2px rgba(0,0,0,.16),0 22px 36px -16px rgba(0,0,0,.4);position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:1px;background:linear-gradient(90deg,var(--lit),transparent) 0 0/100% var(--fy) no-repeat,linear-gradient(var(--dim),var(--dim)) 0 100%/100% var(--fy) no-repeat,var(--wood-h) 0 0/100% auto,var(--tone);box-shadow:inset 0 1px 0 var(--edge),inset 0 -1px 0 rgba(0,0,0,.2),var(--drop)}
.frame.land{--fy:8.08%}
.frame>*{grid-area:1/1}
.frame::before,.frame::after{content:"";position:absolute;inset:0;pointer-events:none}
.frame::before{background:linear-gradient(var(--l),var(--l)),var(--wood-v) 0 0/10% auto,var(--tone);clip-path:polygon(0 0,var(--m) var(--fy),var(--m) calc(100% - var(--fy)),0 100%);box-shadow:inset 1px 0 0 var(--edge)}
.frame::after{background:linear-gradient(var(--r),var(--r)),var(--wood-v) 37% 0/10% auto,var(--tone);clip-path:polygon(100% 0,100% 100%,calc(100% - var(--m)) calc(100% - var(--fy)),calc(100% - var(--m)) var(--fy));box-shadow:inset -1px 0 0 rgba(0,0,0,.22)}
/* the print sits in the rebate: a dark seam, and the inner lip of the bottom rail catches the light */
.frame .art,.frame>img{position:relative;z-index:1;width:calc(100% - 2 * var(--m));margin:var(--m);aspect-ratio:210/297;overflow:hidden;background:#111;box-shadow:0 0 0 1px var(--seam),0 1.5px 0 1px rgba(255,255,255,.12)}
.frame>img{object-fit:cover;height:auto}
.frame .art svg{display:block;width:100%;height:100%}
.frame .art.swap svg{animation:swap .9s var(--ease-out)}
@keyframes swap{from{opacity:0;filter:blur(10px);transform:scale(1.02)}to{opacity:1;filter:none;transform:none}}
/* polystyrene front: a soft sheen, a moving highlight (--gx) and the face's shadow on the print below it */
.glare{position:relative;z-index:3;margin:var(--m);pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) calc(var(--gx,30%) - 22%),rgba(255,255,255,.12) var(--gx,30%),rgba(255,255,255,0) calc(var(--gx,30%) + 18%)),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%);box-shadow:inset 0 2px 3px -1px rgba(0,0,0,.32),inset 2px 0 3px -1px rgba(0,0,0,.16),inset -1px 0 2px -1px rgba(0,0,0,.1)}
.frame.land .art,.frame.land>img{aspect-ratio:297/210}
/* the same 14 mm face on RÖDALM 13×18 (150 × 200 mm) and 30×40 (320 × 420 mm) */
.frame.fmt-S{--m:9.33%;--fy:7%}
.frame.fmt-S.land{--m:7%;--fy:9.33%}
.frame.fmt-S .art{aspect-ratio:13/18}
.frame.fmt-S.land .art{aspect-ratio:18/13}
.frame.fmt-L{--m:4.4%;--fy:3.33%}
.frame.fmt-L.land{--m:3.33%;--fy:4.4%}
.frame.fmt-L .art{aspect-ratio:3/4}
.frame.fmt-L.land .art{aspect-ratio:4/3}
.f-dub{--tone:#bf9e76;--wood-h:url(../img/ramy/dub-h.webp);--wood-v:url(../img/ramy/dub-v.webp);--lit:rgba(255,248,236,.13);--dim:rgba(60,36,14,.17);--l:rgba(255,246,228,.07);--r:rgba(70,40,12,.1);--edge:rgba(255,240,215,.5);--seam:rgba(40,22,6,.45)}
.f-cerny{--tone:#1c1c1d;--lit:rgba(255,255,255,.07);--dim:rgba(0,0,0,.3);--l:rgba(255,255,255,.035);--r:rgba(0,0,0,.25);--edge:rgba(255,255,255,.16);--seam:#0b0d12}
.f-bily{--tone:#f4f4f2;--lit:rgba(255,255,255,.7);--dim:rgba(0,0,0,.055);--l:rgba(255,255,255,.4);--r:rgba(0,0,0,.035);--edge:#fff;--seam:rgba(0,0,0,.2)}
/* 30 mm deep sides for frames shown turned in 3D; .sides sits next to the frame and carries its finish */
.sides{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.sides b{position:absolute;backface-visibility:hidden;background:linear-gradient(var(--sh),var(--sh)),var(--wood-v) 0 0/77% auto,var(--tone)}
.sides .sd-r,.sides .sd-l{top:0;width:13%;height:100%}
.sides .sd-t,.sides .sd-b{left:0;width:100%;aspect-ratio:100/13;background:linear-gradient(var(--sh),var(--sh)),var(--wood-h) 0 0/100% auto,var(--tone)}
.sides .sd-r{--sh:rgba(0,0,0,.3);left:100%;transform-origin:0 50%;transform:rotateY(90deg)}
.sides .sd-l{--sh:rgba(0,0,0,.1);right:100%;transform-origin:100% 50%;transform:rotateY(-90deg)}
.sides .sd-b{--sh:rgba(0,0,0,.42);top:100%;transform-origin:50% 0;transform:rotateX(-90deg)}
.sides .sd-t{--sh:rgba(255,255,255,.12);bottom:100%;transform-origin:50% 100%;transform:rotateX(90deg)}

/* ================= hero ================= */
.hero{position:relative;min-height:100svh;padding:clamp(100px,14vh,140px) 0 0;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;overflow:hidden;background:linear-gradient(180deg,rgba(11,13,18,0) calc(100% - 120px),var(--night)),radial-gradient(90% 60% at 50% 100%,#171a22 0%,#0b0d12 62%)}
.hero-copy{position:relative;z-index:2;padding:0 var(--gutter);max-width:760px}
.hero-mark{margin-bottom:26px}
.hero-logo{position:relative;width:clamp(158px,13.7vw,200px);margin:0 auto}
/* logo intro, the brand's one animation: the letters rise, the phone slides down its own axis, lifts a hair,
   taps the T and presses the notch (the háček of Ťukni); one lime ring runs out from the touch */
.lg{--t0:.55s;display:block;width:100%;height:auto;overflow:visible;color:#fff}
.lg-l{animation:lg-rise .9s var(--ease-out) calc(.05s * var(--i)) both}
@keyframes lg-rise{from{opacity:0;transform:translateY(16px)}}
.lg-ph{fill:var(--limeta);animation:lg-tap .9s var(--t0) both}
@keyframes lg-tap{0%{opacity:0;transform:translate(78px,-78px);animation-timing-function:cubic-bezier(.16,1,.3,1)}12%{opacity:1}48%{transform:translate(5px,-5px);animation-timing-function:cubic-bezier(.45,0,.55,1)}58%{transform:translate(10px,-10px);animation-timing-function:cubic-bezier(.55,0,1,.45)}68%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}74%{transform:translate(-1.6px,1.6px);animation-timing-function:cubic-bezier(.34,1.4,.64,1)}100%{opacity:1;transform:none}}
.lg-notch{transform-origin:42.74px 0;animation:lg-dent .9s var(--t0) both}
@keyframes lg-dent{0%,67%{transform:scaleY(0);animation-timing-function:cubic-bezier(.3,0,.2,1)}76%,100%{transform:none}}
.lg-t{transform-origin:42.74px 100px;animation:lg-squash .9s var(--t0) both}
@keyframes lg-squash{0%,68%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}75%{transform:scale(1.012,.965)}88%{transform:scale(.998,1.006)}100%{transform:none}}
.lg-rip{fill:none;stroke:var(--limeta);stroke-width:1.75;vector-effect:non-scaling-stroke;opacity:0;transform-origin:42.74px 8.72px;animation:lg-rip .7s var(--ease-out) calc(var(--t0) + .61s)}
@keyframes lg-rip{from{opacity:.95;transform:scale(.3)}to{opacity:0;transform:scale(4.4)}}
.hero .lede{margin-left:auto;margin-right:auto;max-width:540px}
.cta-row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:34px;flex-wrap:wrap}
.trust{list-style:none;padding:0;margin:30px 0 0;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:14px;color:#8b91a0}
.trust li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:#5b6170}
.proof{margin-top:16px;font-size:13px;color:var(--moon-3)}
.proof b{color:var(--moon-2);font-weight:500}
.stage{position:relative;width:100%;height:clamp(440px,60vh,640px);margin-top:clamp(16px,4vh,48px);perspective:1800px}
.spot{position:absolute;left:50%;top:-12%;width:min(980px,150vw);height:125%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(214,224,255,.13),rgba(214,224,255,0) 72%);pointer-events:none}
.floor{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(180deg,rgba(17,20,28,.55),rgba(11,13,18,.94) 92%);border-top:1px solid rgba(200,212,255,.08);-webkit-mask:linear-gradient(90deg,transparent,#0b0d12 22%,#0b0d12 78%,transparent);mask:linear-gradient(90deg,transparent,#0b0d12 22%,#0b0d12 78%,transparent)}
.scene{position:absolute;z-index:1;left:50%;bottom:14%;width:clamp(230px,min(26vw,40vh),340px);transform:translateX(-50%);transform-style:preserve-3d}
.object{transform:rotateX(var(--rx,3deg)) rotateY(var(--ry,-14deg));transform-style:preserve-3d;transition:transform .9s var(--ease-out)}
.object .frame{--drop:0 1px 1px rgba(0,0,0,.5),30px 46px 60px -14px rgba(0,0,0,.8)}
.hero-caption{position:relative;z-index:2;font-size:12px;color:var(--moon-3);letter-spacing:.02em;padding:14px 0 28px;min-height:58px;transition:opacity .5s}
/* hero() sets the caption's opacity inline; while the phone is in, it would cross the caption */
.hero:has(#iphone.in) .hero-caption{opacity:0!important}

/* NFC pulse */
.pulse{position:absolute;z-index:4;left:var(--cx,50%);top:var(--cy,50%);width:0;height:0;pointer-events:none}
/* one lime ring per tap, like the logo */
.pulse i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:2px solid var(--limeta);opacity:0;transform:scale(.3)}
.pulse i+i{display:none}
.pulse.on i{animation:ring .9s var(--ease-out) forwards}
@keyframes ring{0%{opacity:0;transform:scale(.3)}20%{opacity:.9}100%{opacity:0;transform:scale(2.6)}}

/* phone */
.iphone{position:absolute;z-index:5;width:40%;aspect-ratio:9/19.5;left:60%;top:50%;border-radius:16%/7.4%;padding:3%;background:#0b0d12;box-shadow:0 0 0 1.5px #9a9aa0,0 0 0 3px #48484c,0 0 0 4px #1c1c1e,30px 40px 60px -10px rgba(0,0,0,.85);transform:translate3d(70%,55%,70px) rotate(16deg);opacity:0;transition:transform 1.2s var(--ease-out),opacity .8s var(--ease-out)}
.iphone.in{opacity:1;transform:translate3d(0,0,70px) rotate(-4deg)}
.btn-side{position:absolute;right:-4.5px;top:24%;width:3px;height:12%;border-radius:0 2px 2px 0;background:#5a5a5e}
.island{position:absolute;z-index:3;top:4%;left:50%;width:30%;height:3.4%;transform:translateX(-50%);background:#0b0d12;border-radius:99px}
.screen{position:relative;height:100%;border-radius:13%/6%;overflow:hidden;background:radial-gradient(120% 60% at 30% 0%,#333845,#12141a 70%)}
.status{display:flex;justify-content:space-between;padding:6% 10% 0;font-size:clamp(6px,.65vw,9px);font-weight:600;color:#fff}
.status .si{width:16%;height:5px;border-radius:2px;background:#fff;opacity:.85;margin-top:2px}
.banner{position:absolute;left:5%;right:5%;top:12%;padding:5% 6%;border-radius:14px;background:rgba(243,244,248,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#0b0d12;font-size:clamp(6px,.6vw,9px);line-height:1.3;transform:translateY(-140%);opacity:0;transition:transform .6s var(--ease-out),opacity .4s}
.banner b{display:block;font-weight:600}
.iphone.ping .banner{transform:none;opacity:1}
.sheet{position:absolute;inset:auto 0 0;height:76%;background:#fff;color:#0b0d12;border-radius:16px 16px 0 0;padding:13% 9% 0;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translateY(102%);transition:transform .75s var(--ease-out)}
.iphone.open .sheet{transform:none}
.iphone.open .banner{transform:translateY(-140%);opacity:0}
.avatar{width:26%;aspect-ratio:1;border-radius:50%;background:var(--av,#5b6170);color:#fff;display:grid;place-items:center;font-weight:700;font-size:clamp(11px,1.2vw,16px)}
.ph-name{font-size:clamp(9px,.95vw,12px);font-weight:600;margin-top:4px;text-align:center;line-height:1.2}
.ph-sub{font-size:clamp(7px,.7vw,9px);color:#8b91a0}
.ph-stars{display:flex;gap:6%;width:84%;justify-content:center;margin:9% 0 7%}
.ph-stars b{width:15%;aspect-ratio:1;background:#dcdfe6;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:background-color .25s,transform .35s var(--ease-out)}
.ph-stars b.on{background:var(--star);transform:scale(1.18)}
.ph-lines{width:100%;display:grid;gap:5px}
.ph-lines span{height:5px;border-radius:3px;background:#eceef3}
.ph-lines span:nth-child(2){width:86%}
.ph-lines span:nth-child(3){width:58%}
.ph-btn{margin-top:auto;margin-bottom:15%;width:100%;padding:7% 0;border-radius:99px;background:#0b0d12;color:#fff;text-align:center;font-size:clamp(7px,.75vw,10px);font-weight:600}

@media (min-width:1060px){
  .hero{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:center;text-align:left;padding:52px max(0px,calc((100vw - var(--max)) / 2)) 0;background:linear-gradient(180deg,rgba(11,13,18,0) calc(100% - 120px),var(--night)),radial-gradient(70% 90% at 76% 78%,#171a22 0%,#0b0d12 62%)}
  .hero-copy{padding:0 0 0 var(--gutter)}
  .hero-logo{margin:0}
  .hero h1{font-size:clamp(46px,4.6vw,66px)}
  .hero .lede{margin-left:0}
  .hero .cta-row,.hero .trust{justify-content:flex-start}
  .stage{height:min(88vh,760px);margin:0}
  .scene{width:clamp(270px,min(25vw,46vh),370px);bottom:18%}
  .floor{height:20%}
  .hero-caption{position:absolute;right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));bottom:6px;min-height:0}
}

/* ================= anatomy ================= */
.anatomy{position:relative;height:480vh;background:var(--night)}
.anat-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:clamp(76px,11vh,110px)}
.anat-head{position:relative;z-index:1;width:min(var(--max),100%);margin:0 auto;padding:0 var(--gutter);text-align:center}
.anat-head h2{font-size:clamp(34px,4.6vw,60px)}
@media (max-width:389px){.anat-head h2{font-size:max(27px,8.6vw)}}
.anat-stage{position:relative;flex:1;width:min(var(--max),100%);margin:0 auto;perspective:1600px}
.anat-object{--u:3.4px;position:absolute;left:50%;top:50%;width:min(30vw,38vh,340px);aspect-ratio:.7328;transform:translate(calc(-50% + var(--ox,0px)),-50%) rotateX(var(--ax,16deg)) rotateY(var(--ay,-40deg)) scale(var(--as,.8));transform-style:preserve-3d;will-change:transform}
/* The sign is built from its real layers (back to front: hardboard back, NFC inlay, print, plexi, four mitred
   oak rails 30 mm deep), in units of a hundredth of its width (--u, set by app.js). Assembled it looks like
   .frame; when the scene ends, app.js moves each layer on its own and the sign comes apart. */
.kit{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.kit>*{position:absolute;display:block}
.kit b,.k-back,.k-chip,.k-paper,.k-glass{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.k-shade{inset:0;transform:translateZ(calc(var(--u) * -13));box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 10px -2px rgba(0,0,0,.16),0 30px 50px -18px rgba(0,0,0,.55)}
.k-back{inset:calc(var(--u) * 1.5);border-radius:2px;transform:translateZ(calc(var(--u) * -6));background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.06),transparent 60%),repeating-linear-gradient(92deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px),#141414;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12)}
.k-chip{left:50%;top:50%;width:calc(var(--u) * 13);height:calc(var(--u) * 13);margin:calc(var(--u) * -6.5) 0 0 calc(var(--u) * -6.5);border-radius:50%;transform:translateZ(calc(var(--u) * -2.6))}
.k-chip svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
/* the field of the chip, two rings in its own plane while the layers part */
.k-chip::before,.k-chip::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--limeta),0 0 18px rgba(215,255,61,.45);opacity:var(--w1o,0);transform:scale(var(--w1s,1))}
.k-chip::after{opacity:var(--w2o,0);transform:scale(var(--w2s,1))}
.k-paper{inset:calc(var(--u) * 6);transform:translateZ(calc(var(--u) * -2))}
.k-paper .art{width:100%;height:100%;overflow:hidden;background:#111;box-shadow:0 0 0 1px var(--seam)}
.k-paper .art svg{display:block;width:100%;height:100%}
.k-glass{inset:calc(var(--u) * 4);border-radius:1px;transform:translateZ(calc(var(--u) * -1.2));background:linear-gradient(115deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.14) 28%,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 50%,rgba(255,255,255,.06) 70%,rgba(255,255,255,0) 78%),linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%),rgba(190,215,235,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 1px rgba(255,255,255,.18),inset 0 0 calc(var(--u) * 4) rgba(200,225,245,.07)}
/* a rail: front face (mitred), outer side, the inner lip by the opening and the back */
.k-rail{transform-style:preserve-3d}
.k-rail b{position:absolute;display:block;opacity:var(--o,1)}
.k-t,.k-b{left:0;width:100%;height:calc(var(--u) * 6)}
.k-l,.k-r{top:0;height:100%;width:calc(var(--u) * 6)}
.k-t{top:0;transform-origin:50% 50%}.k-b{bottom:0}.k-l{left:0}.k-r{right:0}
.k-rail .kf,.k-rail .kb{inset:0}
.k-t .kf{clip-path:polygon(0 0,100% 0,calc(100% - var(--u) * 6) 100%,calc(var(--u) * 6) 100%);background:linear-gradient(90deg,var(--lit),transparent),var(--wood-h) 0 0/100% auto,var(--tone);box-shadow:inset 0 1px 0 var(--edge)}
.k-b .kf{clip-path:polygon(calc(var(--u) * 6) 0,calc(100% - var(--u) * 6) 0,100% 100%,0 100%);background:linear-gradient(var(--dim),var(--dim)),var(--wood-h) 0 100%/100% auto,var(--tone);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.k-l .kf{clip-path:polygon(0 0,100% calc(var(--u) * 6),100% calc(100% - var(--u) * 6),0 100%);background:linear-gradient(var(--l),var(--l)),var(--wood-v) 0 0/calc(var(--u) * 10) auto,var(--tone);box-shadow:inset 1px 0 0 var(--edge)}
.k-r .kf{clip-path:polygon(100% 0,100% 100%,0 calc(100% - var(--u) * 6),0 calc(var(--u) * 6));background:linear-gradient(var(--r),var(--r)),var(--wood-v) 40% 0/calc(var(--u) * 10) auto,var(--tone);box-shadow:inset -1px 0 0 rgba(0,0,0,.22)}
/* the back of a rail sits 30 mm behind and is seen mirrored */
.k-rail .kb{transform:translateZ(calc(var(--u) * -13)) rotateY(180deg);background:linear-gradient(rgba(40,24,10,.32),rgba(40,24,10,.32)),var(--wood-v) 0 0/calc(var(--u) * 10) auto,var(--tone)}
.k-t .kb{clip-path:polygon(0 0,100% 0,calc(100% - var(--u) * 6) 100%,calc(var(--u) * 6) 100%)}
.k-b .kb{clip-path:polygon(calc(var(--u) * 6) 0,calc(100% - var(--u) * 6) 0,100% 100%,0 100%)}
.k-l .kb{clip-path:polygon(100% 0,0 calc(var(--u) * 6),0 calc(100% - var(--u) * 6),100% 100%)}
.k-r .kb{clip-path:polygon(0 0,0 100%,100% calc(100% - var(--u) * 6),100% calc(var(--u) * 6))}
/* outer sides, as .sides: 30 mm of wood going back from the face */
.k-rail .ko{background:linear-gradient(var(--sh),var(--sh)),var(--wood-h) 0 0/100% auto,var(--tone)}
.k-t .ko{--sh:rgba(255,255,255,.12);left:0;width:100%;bottom:100%;height:calc(var(--u) * 13);transform-origin:50% 100%;transform:rotateX(90deg)}
.k-b .ko{--sh:rgba(0,0,0,.42);left:0;width:100%;top:100%;height:calc(var(--u) * 13);transform-origin:50% 0;transform:rotateX(-90deg)}
.k-l .ko,.k-r .ko{top:0;height:100%;width:calc(var(--u) * 13);background:linear-gradient(var(--sh),var(--sh)),var(--wood-v) 0 0/77% auto,var(--tone)}
.k-l .ko{--sh:rgba(0,0,0,.1);right:100%;transform-origin:100% 50%;transform:rotateY(-90deg)}
.k-r .ko{--sh:rgba(0,0,0,.3);left:100%;transform-origin:0 50%;transform:rotateY(90deg)}
/* the inner lip: 4 mm of the rebate, in the frame's own shade */
.k-rail .ki{background:linear-gradient(var(--sh),var(--sh)),var(--tone)}
.k-t .ki{--sh:rgba(30,16,4,.45);left:calc(var(--u) * 6);right:calc(var(--u) * 6);top:100%;height:calc(var(--u) * 2);transform-origin:50% 0;transform:rotateX(-90deg)}
.k-b .ki{--sh:rgba(255,245,225,.1);left:calc(var(--u) * 6);right:calc(var(--u) * 6);bottom:100%;height:calc(var(--u) * 2);transform-origin:50% 100%;transform:rotateX(90deg)}
.k-l .ki{--sh:rgba(30,16,4,.3);top:calc(var(--u) * 6);bottom:calc(var(--u) * 6);left:100%;width:calc(var(--u) * 2);transform-origin:0 50%;transform:rotateY(90deg)}
.k-r .ki{--sh:rgba(30,16,4,.2);top:calc(var(--u) * 6);bottom:calc(var(--u) * 6);right:100%;width:calc(var(--u) * 2);transform-origin:100% 50%;transform:rotateY(-90deg)}
/* a soft light behind the sign while its layers stand apart, gone again in the dark */
.anat-gl{position:absolute;display:block;pointer-events:none}
.anat-object.gl .kit{visibility:hidden;transition:visibility 0s .5s}
.anat-object.gl .kit>:not(.k-rail),.anat-object.gl .k-rail b{opacity:0!important;transition:opacity .5s}
.anat-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(90vw,1100px);aspect-ratio:1.6;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(143,168,255,.16),rgba(143,168,255,.05) 55%,transparent);opacity:var(--glow,0);pointer-events:none}
@media (max-width:900px){.anat-stage::before{top:40%}}
.mark{position:absolute;z-index:6;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3.5px var(--kobalt-svetly),0 0 0 10px rgba(143,168,255,.22);animation:mk 2s ease-in-out infinite;opacity:0;transform:scale(.4);transition:opacity .5s,transform .6s var(--ease-out)}
.mark.on{opacity:1;transform:none}
@keyframes mk{50%{box-shadow:0 0 0 3.5px var(--kobalt-svetly),0 0 0 15px rgba(143,168,255,.1)}}
.m1{left:30%;top:22%}
.m2{left:50%;top:50%}
.m3{left:19%;top:88%}
.m4{left:97%;top:12%}
.call{position:absolute;width:min(270px,26vw);opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.call.on{opacity:1;transform:none}
.call b{display:block;font:600 20px/1.25 var(--f-display);letter-spacing:-.02em;color:#fff;margin-bottom:6px}
.call span{display:block;font-size:15px;color:#8b91a0;line-height:1.45}
.call::before{content:"";position:absolute;top:12px;height:1px;width:var(--lw,60px);background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.1))}
.c1,.c3{right:calc(50% + min(15vw,19vh,170px) + 64px);text-align:right}
.c1::before,.c3::before{left:calc(100% + 16px);background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.5))}
.c2,.c4{left:calc(50% + min(15vw,19vh,170px) + 64px)}
.c2::before,.c4::before{right:calc(100% + 16px)}
.c1{top:22%}.c4{top:14%}.c2{top:50%}.c3{top:72%}
@media (max-width:900px){
  .anatomy{height:410vh}
  .anat-object{width:min(52vw,30vh);top:40%}
  .call{left:var(--gutter)!important;right:var(--gutter)!important;top:auto!important;bottom:clamp(20px,5vh,48px);width:auto;text-align:center!important;transform:translateY(16px)}
  .call::before{display:none}
  .call.on{transform:none}
  .call.past{opacity:0}
}

/* ================= compare: two phones race ================= */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(48px,6vw,80px)}
.lane{border-radius:var(--r);padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden}
.lane-a{box-shadow:inset 0 0 0 1px var(--line)}
.lane-b{background:var(--night-3);color:var(--moon)}
.lane-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;position:relative}
.cmp-tag{font:600 15px/1.3 var(--f-text);letter-spacing:-.005em}
.lane-a .cmp-tag{color:var(--ink-3)}
.lane-b .cmp-tag{color:#fff}
.lane-b .cmp-tag::before{content:"";display:inline-block;width:6px;height:11px;margin:0 11px 0 3px;border-radius:2px;background:var(--limeta);transform:rotate(45deg)}
.lane-time{font:600 15px/1.3 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink-3);transition:color .4s}
.lane-b .lane-time{color:#8b91a0}
.lane-a.fin .lane-time{color:var(--ink)}
.lane-b.fin .lane-time{color:#fff}
.strike{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:10px;position:relative}
.strike li{counter-increment:s;position:relative;font-family:var(--f-display);font-size:clamp(19px,2vw,26px);font-weight:650;letter-spacing:-.02em;color:var(--ink);width:max-content;max-width:100%;transition:color .5s}
.strike li::before{content:counter(s);display:inline-block;width:1.6em;color:var(--ink-3);font:600 .56em/1 var(--f-display);font-variant-numeric:tabular-nums;vertical-align:.3em}
.strike li::after{content:"";position:absolute;left:1em;right:0;top:55%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.strike.run li{color:var(--ink-3)}
.strike.run li.now{color:var(--ink)}
.strike li.done{color:var(--ink-3)}
.strike li.done::after{transform:none}
.strike-b li{color:#fff}
.strike-b li::before{color:#8b91a0}
.strike-b li::after{left:auto;right:-1.1em;top:.12em;width:.32em;height:.62em;background:none;border:solid var(--limeta);border-width:0 .13em .13em 0;transform:rotate(45deg) scale(0);transition:transform .45s var(--ease-out)}
.strike-b li.done::after{transform:rotate(45deg) scale(1)}
.strike-b.run li{color:#8b91a0}
.strike-b.run li.now,.strike-b li.done{color:#fff}
.cmp-big{font-family:var(--f-display);font-size:clamp(40px,5vw,68px);font-weight:650;letter-spacing:-.03em;line-height:1;margin-top:auto;padding-top:24px;position:relative;color:#6b7180;transition:color .8s,transform .8s var(--ease-out);transform:translateY(8px)}
.lane-b.fin .cmp-big{color:var(--moon);transform:none}
/* the finish line of the TukniTu lane is the logo itself: grey while the race runs, then white with the lime phone tapping */
.cmp-logo{display:block;width:clamp(190px,21vw,290px);height:auto;overflow:visible}
.cmp-logo .nl-ph{fill:currentColor;transition:fill .8s}
.lane-b.fin .cmp-logo .nl-ph{fill:var(--limeta);animation:nl-tap .7s .35s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.lane-b.fin .cmp-logo .nl-ph{animation:none}}
.duel-replay{display:flex;align-items:center;gap:8px;margin:28px auto 0;height:44px;padding:0 22px;border-radius:999px;border:0;background:var(--paper-2);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .25s,transform .35s var(--ease-out)}
.duel-replay::before{content:"";width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
.duel-replay:hover{background:var(--raise)}
.duel-replay:active{transform:scale(.97)}
.duel-replay[hidden]{display:none}

/* the stage: both phones the same size at the same height; sizes in stage units */
.stage-d{position:relative;width:100%;aspect-ratio:4/5;margin:clamp(14px,2vw,24px) 0 clamp(20px,2.6vw,32px);container-type:size}
.dp{--t:.7s;position:absolute;top:8cqh;left:25cqw;width:50cqw;aspect-ratio:9/19.5;border-radius:15%/7%;padding:2.6cqw;background:#0a0b0f;box-shadow:0 0 0 .3cqw #9a9aa0,0 0 0 .7cqw #3a3a3e,0 0 0 .9cqw #161618,0 3cqw 6cqw -1cqw rgba(0,0,0,.35);container-type:inline-size;transition:transform .8s var(--ease-out)}
.lane-b .dp{left:46cqw;box-shadow:0 0 0 .3cqw #8e8e93,0 0 0 .7cqw #3a3a3e,0 0 0 .9cqw #161618,0 4cqw 9cqw -1cqw rgba(0,0,0,.9)}
.dp-btn{position:absolute;right:-1.5cqw;top:22%;width:1cqw;height:11%;border-radius:0 2px 2px 0;background:#5a5a5e}
.dp-island{position:absolute;z-index:9;top:4.2%;left:50%;width:30%;height:3.6%;transform:translateX(-50%);background:#0b0d12;border-radius:99px}
.dp-scr{position:relative;height:100%;border-radius:12.5%/5.8%;overflow:hidden;background:#17191f;font-family:var(--font);color:#0b0d12;letter-spacing:-.01em;line-height:1.25}
.dp-status{position:absolute;z-index:8;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:6.2cqw 11cqw 0;font-size:5.4cqw;font-weight:600;color:#fff;transition:color .3s}
.dp-status i{width:13cqw;height:3cqw;border-radius:1cqw;background:currentColor;opacity:.85}
.dp.is-light .dp-status{color:#0b0d12}

/* home screen: the same on both phones */
.a-home{position:absolute;inset:0;background:radial-gradient(120% 70% at 20% 0%,#3a3f4c,#17191f 72%);padding:22cqw 8cqw 0}
.d-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7cqw 6cqw}
.d-grid i,.d-dock i{aspect-ratio:1;border-radius:24%;background:linear-gradient(160deg,hsl(var(--h) 30% 62%),hsl(var(--h) 28% 44%))}
.d-grid i.d-maps{position:relative;background:linear-gradient(135deg,#f1eee6 0 48%,#fff 48% 56%,#cfe8c4 56%);box-shadow:inset 0 0 0 .3cqw rgba(0,0,0,.06)}
.d-grid i.d-maps::after{content:"";position:absolute;left:34%;top:20%;width:34%;height:44%;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.d-dock{position:absolute;left:5cqw;right:5cqw;bottom:5cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:6cqw;padding:4.4cqw 5cqw;border-radius:9cqw;background:rgba(255,255,255,.16)}

/* phone A: the long way through the maps app */
.a-app{position:absolute;z-index:2;inset:0;overflow:hidden;background:#eeebe4;transform:scale(.12);transform-origin:30% 22%;clip-path:inset(0 round 30%);opacity:0;will-change:transform,opacity;transition:transform .55s var(--ease-out),opacity .3s,clip-path .55s}
.dp.is-open .a-app{transform:none;opacity:1;clip-path:inset(0 round 0)}
/* the white search bar only shows once the app is open; while it grows from the icon it would flash as a bare white strip */
.a-app .a-search{opacity:0;transition:opacity .25s}
.dp.is-open .a-search{opacity:1;transition-delay:.4s}
/* a restart jumps straight back to the home screen instead of animating every screen back */
.dp.no-tr,.dp.no-tr *,.dp.no-tr *::before,.dp.no-tr *::after{transition:none!important}
/* Spotlight: a swipe down on the home screen, the search field, "Mapa", the app as the top hit */
.a-home{transition:filter .4s,transform .4s var(--ease-out)}
.dp.is-spot .a-home{filter:blur(2.4cqw) brightness(.7);transform:scale(1.04)}
.a-spot{position:absolute;z-index:1;inset:0;padding:17cqw 6cqw 0;opacity:0;transition:opacity .35s;pointer-events:none}
.dp.is-spot .a-spot{opacity:1}
.a-sfield{height:11cqw;border-radius:3.4cqw;background:rgba(255,255,255,.2);display:flex;align-items:center;gap:3cqw;padding:0 4cqw;font-size:4.6cqw;color:#fff;transform:translateY(-6cqw);transition:transform .45s var(--ease-out)}
.dp.is-spot .a-sfield{transform:none}
.a-sfield .a-mag{border-color:rgba(255,255,255,.75)}.a-sfield .a-mag::after{background:rgba(255,255,255,.75)}
.a-sq::before{content:"Hledat";color:rgba(255,255,255,.6)}
.a-sq.typed::before{content:none}
.dp.is-spot.is-kb .a-sq::after{content:"";display:inline-block;width:.5cqw;height:5cqw;margin-left:.3cqw;vertical-align:-.9cqw;background:#fff;animation:caret 1s steps(1) infinite}
.a-srow{display:flex;align-items:center;gap:4cqw;margin-top:6cqw;padding:3.4cqw;border-radius:4cqw;background:rgba(255,255,255,.14);opacity:0;transform:translateY(2cqw);transition:opacity .3s,transform .3s var(--ease-out)}
.dp.is-hit .a-srow{opacity:1;transform:none}
.a-sico{position:relative;flex:none;width:12cqw;height:12cqw;border-radius:24%;background:linear-gradient(135deg,#f1eee6 0 48%,#fff 48% 56%,#cfe8c4 56%)}
.a-sico::after{content:"";position:absolute;left:34%;top:20%;width:34%;height:44%;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.a-srow p{margin:0;display:grid;gap:.6cqw;color:#fff}.a-srow b{font-size:4.8cqw;font-weight:600}.a-srow span{font-size:3.6cqw;opacity:.7}
/* the map: a search for "servis" drops a handful of pins; two fingers spread to zoom in on one of them.
   The pins sit outside the zoomed layer and only move, so they keep their size, as in the real app */
.a-world{position:absolute;inset:0;transform-origin:62cqw 124cqw;transition:transform 1.1s cubic-bezier(.3,.1,.2,1)}
.dp.is-zoom .a-world{transform:scale(2.6)}
.a-pins{--z:1;position:absolute;inset:0}
.dp.is-zoom .a-pins{--z:2.6}
.a-pin{position:absolute;left:calc((62 + (var(--x) - 62) * var(--z)) * 1cqw);top:calc((124 + (var(--y) - 124) * var(--z)) * 1cqw);width:5.6cqw;height:5.6cqw;margin:-5.6cqw 0 0 -2.8cqw;opacity:0;transform:translateY(-4cqw);transition:left 1.1s cubic-bezier(.3,.1,.2,1),top 1.1s cubic-bezier(.3,.1,.2,1),opacity .25s var(--d),transform .4s var(--ease-out) var(--d)}
.a-pin::before{content:"";position:absolute;inset:0;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 .5cqw #fff}
.a-pin::after{content:"";position:absolute;left:37%;top:30%;width:26%;height:26%;border-radius:50%;background:#a52714}
.a-pin b{position:absolute;left:7cqw;top:.4cqw;font-size:3.2cqw;font-weight:600;white-space:nowrap;color:#a52714;text-shadow:0 0 .8cqw #fff,0 0 .8cqw #fff}
.a-me b{opacity:0;transition:opacity .3s .9s}
.dp.is-pins .a-pin{opacity:1;transform:none}
.dp.is-zoom .a-me b{opacity:1;font-size:3.8cqw}
.dp.is-zoom .a-me{width:7cqw;height:7cqw;margin:-7cqw 0 0 -3.5cqw}

.dp.is-pinch .d-finger{transition:transform 1s cubic-bezier(.3,.1,.2,1),opacity .2s}
.a-map{position:absolute;inset:0;width:100%;height:100%}
.a-search{position:absolute;z-index:2;left:6cqw;right:6cqw;top:18cqw;height:11cqw;border-radius:6cqw;background:#fff;box-shadow:0 1cqw 3cqw rgba(0,0,0,.18);display:flex;align-items:center;gap:3cqw;padding:0 4.4cqw;font-size:4.6cqw;color:#8b91a0}
.a-mag{width:4.4cqw;height:4.4cqw;border:.9cqw solid #8b91a0;border-radius:50%;flex:none;position:relative}
.a-mag::after{content:"";position:absolute;right:-1.9cqw;bottom:-1.6cqw;width:2.2cqw;height:.9cqw;background:#8b91a0;transform:rotate(45deg)}
.a-q::before{content:"Hledat v Mapách"}
.a-q.typed{color:#0b0d12}
.a-q.typed::before{content:none}
.dp.is-kb .a-q::after{content:"";display:inline-block;width:.5cqw;height:5cqw;margin-left:.3cqw;vertical-align:-.9cqw;background:#0b0d12;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.a-kb{position:absolute;z-index:5;left:0;right:0;bottom:0;height:72cqw;background:#d1d3d9;transform:translateY(102%);transition:transform .4s var(--ease-out);padding:3cqw 1.6cqw}
.dp.is-kb .a-kb{transform:none}
.a-keys{display:grid;grid-template-columns:repeat(10,1fr);gap:2.6cqw 1.4cqw}
.a-keys i{height:10cqw;border-radius:1.2cqw;background:#fff;box-shadow:0 .3cqw 0 #898a8d}
.a-keys i.w{grid-column:span 2;background:#adb0b8}
.a-keys i.sp{grid-column:span 6}
.a-keys i.go{grid-column:span 2;background:#5b6170}
@keyframes shim{to{background-position:-150% 0}}
.a-place{position:absolute;z-index:4;inset:0;background:#fff;transform:translateY(102%);transition:transform .55s var(--ease-out);overflow:hidden}
.dp.is-place .a-place{transform:none}
.a-place::after{content:"";position:absolute;inset:0 0 auto;height:16cqw;background:rgba(255,255,255,.94);opacity:0;transition:opacity .3s}
.dp[data-scroll] .a-place::after{opacity:1}
.a-pb{transition:transform .9s cubic-bezier(.3,.1,.2,1)}
.dp[data-scroll="1"] .a-pb{transform:translateY(-62cqw)}
.dp[data-scroll="2"] .a-pb{transform:translateY(-128cqw)}
.dp[data-scroll="3"] .a-pb{transform:translateY(-180cqw)}
.a-photo{height:64cqw;background:linear-gradient(120deg,#4b4f5c,#8e8a84 60%,#c2b8a8)}
.a-in{padding:5cqw 6cqw;display:flex;flex-direction:column;gap:2cqw}
.a-title{font-size:7cqw;font-weight:650;letter-spacing:-.03em}
.a-meta{font-size:4cqw;color:#5b6170;display:flex;align-items:center;gap:1.4cqw}
.a-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw;margin:3cqw 0}
.a-acts i{height:11cqw;border-radius:5.5cqw;background:#eceef3}
.a-acts i:first-child{background:#0b0d12}
.a-lines{display:grid;gap:2.4cqw;margin:2cqw 0}
.a-lines i{height:2.6cqw;border-radius:1.3cqw;background:#eceef3}
.a-lines i:nth-child(2n){width:78%}
.a-lines i:nth-child(3n){width:56%}
.a-h{font-size:5cqw;font-weight:650;margin-top:4cqw}
.a-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.a-photos i{aspect-ratio:1;border-radius:2.4cqw;background:linear-gradient(140deg,#c9c3b8,#8f8b86)}
.a-photos i:nth-child(2){background:linear-gradient(140deg,#9aa4b5,#5d6473)}
.a-bars{display:flex;align-items:flex-end;gap:2cqw;height:16cqw}
.a-bars i{flex:1;border-radius:1cqw 1cqw 0 0;background:#dcdfe6;height:40%}
.a-bars i:nth-child(3),.a-bars i:nth-child(4){height:80%}.a-bars i:nth-child(5){height:100%;background:#5b6170}.a-bars i:nth-child(6){height:70%}.a-bars i:nth-child(2){height:55%}
.a-sum{display:flex;gap:5cqw;align-items:center}
.a-sum b{font-size:11cqw;font-weight:600}
.a-sum .a-lines{flex:1}
.a-write{margin-top:4cqw;padding:5cqw 4cqw;border-radius:4cqw;background:#f3f4f8;display:grid;gap:3cqw;justify-items:center;font-size:4.2cqw;font-weight:600}
.d-st{display:inline-flex;gap:.8cqw}
.d-st b{width:3.6cqw;aspect-ratio:1;background:var(--star);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.d-st-e b{background:#dcdfe6}
.a-write .d-st b{width:8cqw}
.d-st-big{gap:3cqw;margin:6cqw 0 5cqw}
.d-st-big b{width:11cqw;transition:background-color .2s,transform .3s var(--ease-out)}
.d-st-big b.on{background:var(--star);transform:scale(1.15)}
.a-rate{position:absolute;z-index:5;left:0;right:0;bottom:0;background:#fff;border-radius:7cqw 7cqw 0 0;box-shadow:0 -2cqw 8cqw rgba(0,0,0,.25);transform:translateY(102%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column;align-items:center;text-align:center}
.a-rate>b{font-size:6.6cqw;font-weight:650;letter-spacing:-.03em}
.a-rate>span{font-size:4.2cqw;color:#5b6170}
.a-rate{height:70%;padding:12cqw 8cqw 0;gap:1.6cqw;z-index:6}
.dp.is-rate .a-rate{transform:none}
.d-av{width:17cqw;aspect-ratio:1;border-radius:50%;background:#5b6170;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:7cqw;margin-bottom:2cqw}
.d-spin{position:absolute;z-index:7;left:50%;top:50%;width:13cqw;height:13cqw;margin:-6.5cqw;border-radius:50%;border:1.3cqw solid rgba(0,0,0,.1);border-top-color:#5b6170;opacity:0;transition:opacity .2s}
.dp.is-wait .d-spin{opacity:1;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.d-finger{position:absolute;z-index:10;left:0;top:0;width:13cqw;height:13cqw;margin:-6.5cqw;border-radius:50%;background:rgba(60,60,67,.32);box-shadow:0 0 0 .5cqw rgba(255,255,255,.75),0 1cqw 3cqw rgba(0,0,0,.25);transform:translate(var(--fx,50cqw),var(--fy,190cqw));opacity:0;transition:transform .45s var(--ease-out),opacity .25s}
.dp.is-hand .d-finger{opacity:1}
.dp .d-finger.d-f2{opacity:0}
.dp.is-pinch .d-finger.d-f2{opacity:1}
.d-finger.press{animation:press .3s}
.d-finger.swipe{transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .2s}
@keyframes press{50%{scale:.78;background-color:rgba(60,60,67,.5)}}

/* phone B: one tap */
.d-sign{position:absolute;z-index:1;left:3cqw;top:4cqh;width:42cqw}
.lane-b .dp{z-index:2}
.d-sign .frame{--drop:0 2cqw 4cqw -1cqw rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.06)}
.d-ripple{position:absolute;z-index:3;left:var(--cx,24cqw);top:var(--cy,33.6cqw);width:30cqw;height:30cqw;margin:-15cqw;border-radius:50%;border:.6cqw solid var(--limeta);opacity:0;pointer-events:none}
.lane-b.tap .d-ripple{animation:ripple .9s var(--ease-out)}
@keyframes ripple{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
.lane-b.reach #dp-b{transform:translate(-47cqw,10.8cqw) rotate(-9deg) scale(.94);transition-duration:.65s}
.lane-b.tap #dp-b{animation:buzz .25s}
@keyframes buzz{25%{translate:.4cqw 0}50%{translate:-.4cqw 0}75%{translate:.3cqw 0}}
.b-banner{position:absolute;z-index:6;left:4cqw;right:4cqw;top:13cqw;display:flex;gap:3.4cqw;align-items:center;padding:4cqw;border-radius:6cqw;background:rgba(243,244,248,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(-160%);opacity:0;transition:transform .5s var(--ease-out),opacity .3s}
.b-banner p{margin:0;display:grid;gap:.6cqw;font-size:4cqw;line-height:1.2}
.b-banner b{font-weight:650}
.b-banner span{color:#3a3a3f}
.b-ic{flex:none;width:10cqw;aspect-ratio:1;border-radius:2.6cqw;background:#0b0d12;position:relative}
.b-ic::after{content:"";position:absolute;inset:26% 34%;border:.7cqw solid #fff;border-radius:1cqw}
.dp.is-ping .b-banner{transform:none;opacity:1}
.b-sheet{position:absolute;z-index:5;left:0;right:0;bottom:0;height:78%;background:#fff;border-radius:7cqw 7cqw 0 0;padding:12cqw 8cqw 0;display:flex;flex-direction:column;align-items:center;gap:1.6cqw;transform:translateY(102%);transition:transform .6s var(--ease-out)}
.b-sheet>b{font-size:6.6cqw;font-weight:650;letter-spacing:-.03em}
.b-sheet>span{font-size:4.2cqw;color:#5b6170}
.b-sheet .a-lines{width:100%}
.dp.is-sheet .b-sheet{transform:none}
.dp.is-sheet .b-banner{transform:translateY(-160%);opacity:0}
.b-send{margin-top:auto;margin-bottom:12cqw;width:100%;padding:3.6cqw 0;border-radius:99px;background:#0b0d12;color:#fff;font-style:normal;font-size:4.6cqw;font-weight:600;text-align:center;transition:transform .2s,background-color .2s}
.dp.is-send .b-send{transform:scale(.95);background:#0b0d12}
.b-done{position:absolute;z-index:7;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;opacity:0;transition:opacity .4s}
.b-done b{font-size:7cqw;font-weight:650;letter-spacing:-.03em}
.b-done span{font-size:4.2cqw;color:#5b6170}
.b-check{width:22cqw;aspect-ratio:1;border-radius:50%;background:#0b0d12;position:relative;margin-bottom:3cqw;transform:scale(.4);transition:transform .6s var(--ease-out)}
.b-check::after{content:"";position:absolute;left:31%;top:24%;width:24%;height:42%;border:solid #fff;border-width:0 1.6cqw 1.6cqw 0;transform:rotate(45deg)}
.dp.is-done .b-done{opacity:1}
.dp.is-done .b-check{transform:none}

/* phones the same size side by side; on a narrow screen one above the other */
@media (max-width:760px){.duel{grid-template-columns:1fr}.stage-d{aspect-ratio:10/11}.dp{top:3cqh;width:48cqw;left:26cqw}.lane-b .dp{left:50cqw}.d-sign{width:40cqw;left:4cqw;top:8cqh}.d-ripple{--cx:24cqw;--cy:36.1cqw}.lane-b.reach #dp-b{transform:translate(-50cqw,20cqw) rotate(-9deg) scale(.94)}}
@media (prefers-reduced-motion:reduce){.dp,.dp *,.lane-b *{transition:none!important;animation:none!important}}

/* ================= steps ================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,6vw,80px)}
.step{background:var(--paper-2);border-radius:var(--r);padding:0 0 36px;overflow:hidden}
.step-vis{height:240px;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,#2a2e39,#14161c);position:relative;overflow:hidden;margin-bottom:28px}
.step h3,.step p{padding:0 30px}
.step .cislo{margin:0 30px 16px}
.step h3{margin-bottom:10px}
.step p{color:var(--ink-2);font-size:16px;line-height:1.5}
.fan{perspective:800px}
.fan .card{position:absolute;width:96px;aspect-ratio:210/297;border-radius:3px;overflow:hidden;box-shadow:0 16px 30px -12px rgba(0,0,0,.35);transition:transform .9s var(--ease-out)}
.fan .card svg{width:100%;height:100%}
.fan .card:nth-child(1){transform:translateX(-62px) rotate(-10deg)}
.fan .card:nth-child(2){transform:translateY(-6px);z-index:2}
.fan .card:nth-child(3){transform:translateX(62px) rotate(10deg)}
.step:hover .fan .card:nth-child(1){transform:translateX(-78px) rotate(-14deg)}
.step:hover .fan .card:nth-child(3){transform:translateX(78px) rotate(14deg)}
.counter-vis{background:#15171d;container-type:size}
/* step 2: a still from the 3D room (made with the 3D preview, see web-vyvoj/3d/ZDROJE.md); it comes slowly
   closer, and now and then a light runs across the plexi. The picture covers the box like object-fit: cover,
   but as a box of its own, so the light can be cut to the print's corners (in per cent of the picture) */
.k2{--ar:1.6;--cx:71.9%;--cy:71.6%;--cw:12.6%;--w:max(100cqw,calc(100cqh * var(--ar)));--h:max(100cqh,calc(100cqw / var(--ar)));position:absolute;inset:0;transform-origin:30% 48%}
@supports (width:1cqw){.k2{inset:auto;width:var(--w);height:var(--h);left:calc((100cqw - var(--w)) / 2);top:calc((100cqh - var(--h)) / 2)}}
@media (min-width:481px) and (max-width:900px){.k2{--ar:3.4;--cx:60.9%;--cy:72.6%;--cw:6.2%}}
.k2 picture{display:block;width:100%;height:100%}
.k2 img{display:block;width:100%;height:100%;object-fit:cover}
.k2 .steam{position:absolute;left:calc(var(--cx) - var(--cw) * .55);bottom:calc(100% - var(--cy));width:calc(var(--cw) * 1.1);height:auto;aspect-ratio:1/3;overflow:visible;pointer-events:none}
.k2 .steam path{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.notif-vis{padding:0 22px;display:flex;flex-direction:column;justify-content:center;gap:10px;background:radial-gradient(120% 90% at 50% 0%,#333845,#12141a)}
.notif{width:100%;display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(243,244,248,.88);color:#0b0d12;font-size:12px;line-height:1.3;box-shadow:0 8px 20px rgba(0,0,0,.25);transform:translateY(10px);opacity:0;transition:transform .7s var(--ease-out),opacity .6s}
.notif i{flex:0 0 26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#34a853,#4285f4)}
.notif b{display:block;font-weight:600}
.notif span{color:#3a3a3f}
.notif em{margin-left:auto;font-style:normal;color:#8b91a0;align-self:flex-start;white-space:nowrap}
.notif.n2{opacity:0;transform:translateY(10px) scale(.96)}
.in .notif{opacity:1;transform:none;transition-delay:.3s}
.in .notif.n2{opacity:.55;transform:scale(.96);transition-delay:.5s}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
/* Jak to funguje: the three steps come out of a blur and from grey into colour one after another, left to
   right, as a photo develops; the number lights up, then the words. On a phone each as it scrolls in. */
.steps .step:nth-child(2){--col:1}
.steps .step:nth-child(3){--col:2}
@media (max-width:900px){.steps .step{--col:0}}
/* (the timings sit on the shown state only: hiding them as the page loads is instant) */
.js .develop{opacity:0;transform:translateY(24px)}
.js .develop .step-vis{filter:blur(16px) saturate(0) brightness(.55);clip-path:inset(0)}
.js .develop .cislo{opacity:0;transform:scale(.3)}
.js .develop h3,.js .develop p{opacity:0;filter:blur(6px);transform:translateY(10px)}
.js .develop.in{--t:calc(var(--col,0)*.34s);opacity:1;transform:none;transition:opacity .9s var(--ease-out) var(--t),transform 1.3s var(--ease-out) var(--t)}
.js .develop.in .step-vis{filter:none;transition:filter 1.6s var(--ease-out) calc(var(--t) + .1s)}
.js .develop.in .cislo{opacity:1;transform:none;transition:opacity .35s ease calc(var(--t) + .55s),transform .8s cubic-bezier(.3,1.7,.5,1) calc(var(--t) + .55s)}
.js .develop.in h3,.js .develop.in p{opacity:1;filter:none;transform:none;transition:opacity 1s var(--ease-out) calc(var(--t) + .7s),filter 1s var(--ease-out) calc(var(--t) + .7s),transform 1s var(--ease-out) calc(var(--t) + .7s)}
.js .develop.in p{transition-delay:calc(var(--t) + .82s)}
/* the signs of step 1 lie in a pile, then fan out; afterwards they breathe a little */
.js .develop:not(.in) .fan .card{transform:translateY(14px) scale(.9)}
.js .develop.in:not(.done) .fan .card{transition:transform 1.2s cubic-bezier(.3,1.35,.5,1) calc(var(--t) + .5s)}
.js .develop.in:not(.done) .fan .card:nth-child(3){transition-delay:calc(var(--t) + .6s)}
.develop.done .fan .card:nth-child(1){animation:fan-l 7s ease-in-out infinite}
.develop.done .fan .card:nth-child(2){animation:fan-m 6s ease-in-out infinite}
.develop.done .fan .card:nth-child(3){animation:fan-r 7s ease-in-out -3.5s infinite}
@keyframes fan-l{50%{rotate:-2deg;translate:-2px 1px}}
@keyframes fan-m{50%{translate:0 -5px}}
@keyframes fan-r{50%{rotate:2deg;translate:2px 1px}}
/* step 2: a faint steam rises from the cup, three wisps that drift, widen and fade, never in step */
.develop.in .k2 .steam path{animation:k2-steam 7.2s cubic-bezier(.37,0,.63,1) infinite}
.develop.in .k2 .steam .w2{animation-duration:8.4s;animation-delay:-3.1s}
.develop.in .k2 .steam .w3{animation-duration:9.6s;animation-delay:-6.4s}
@keyframes k2-steam{
  0%{opacity:0;transform:translateY(14px) scale(.7,.78) skewX(0deg)}
  22%{opacity:.85}
  50%{transform:translateY(-10px) scale(.95,1) skewX(-5deg)}
  78%{opacity:.5}
  100%{opacity:0;transform:translateY(-38px) scale(1.25,1.12) skewX(4deg)}
}
/* step 3: a new review drops in from the top with a little bounce and pushes the older one down */
.notif-vis.live{display:block;padding:0}
.notif-vis.live .notif{position:absolute;left:22px;right:22px;top:50%;width:auto;transition:transform .85s cubic-bezier(.28,1.45,.5,1),opacity .5s ease}
.notif-vis.live .notif[data-s="-1"]{opacity:0;transform:translateY(calc(-100% - 80px)) scale(.9);transition:none}
.notif-vis.live .notif[data-s="0"]{opacity:1;transform:translateY(calc(-100% - 5px))}
.notif-vis.live .notif[data-s="1"]{opacity:.55;transform:translateY(5px) scale(.95)}
.notif-vis.live .notif[data-s="2"]{opacity:0;transform:translateY(46px) scale(.88)}
.notif-vis.live .notif[data-s="0"] i{animation:notif-pop .8s cubic-bezier(.3,1.7,.5,1) .2s both}
@keyframes notif-pop{0%{transform:scale(.4)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .develop,.js .develop .cislo,.js .develop h3,.js .develop p{opacity:1;filter:none;transform:none}
  .js .develop .step-vis{filter:none}
  .js .develop:not(.in) .fan .card:nth-child(1){transform:translateX(-62px) rotate(-10deg)}
  .js .develop:not(.in) .fan .card:nth-child(2){transform:translateY(-6px)}
  .js .develop:not(.in) .fan .card:nth-child(3){transform:translateX(62px) rotate(10deg)}
  .develop .fan .card,.k2 .steam path{animation:none!important}
  .k2 .steam path{opacity:.55}
  .k2 .steam .w2{opacity:0}
}

/* ================= references ================= */
.rail{--rail-pad:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(56px,7vw,88px) var(--rail-pad) 24px;scroll-padding-inline:var(--rail-pad);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{margin:0;flex:0 0 clamp(230px,24vw,300px);scroll-snap-align:start}
.rail .frame{--drop:0 0 0 .5px rgba(255,255,255,.08),0 30px 50px -20px rgba(0,0,0,.9);transition:transform .7s var(--ease-out)}
.rail figure:hover .frame{transform:translateY(-8px)}
.rail figcaption{font-size:14px;color:#8b91a0;margin-top:22px}
.rail figcaption b{display:block;color:var(--moon);font-weight:500}
.rail-nav{display:flex;gap:10px;justify-content:flex-end}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,6vw,80px);border-top:1px solid rgba(255,255,255,.12);padding-top:40px}
.fact strong{display:block;font:650 clamp(48px,5.4vw,72px)/1 var(--f-num);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.fact span{display:block;color:#8b91a0;margin-top:10px;font-size:15px}
@media (max-width:760px){.facts{grid-template-columns:1fr;gap:28px}}

/* ================= industries gallery ================= */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1px solid #4a4f5c;background:transparent;border-radius:999px;padding:8px 15px;font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.chips button:hover{border-color:#6b7180}
.chips button:active{transform:scale(.97)}
.chips button[aria-pressed=true],.chips button[aria-selected=true]{background:#fff;border-color:#fff;color:var(--night)}
.chips.big{margin-top:36px}
.chips.big button{padding:11px 20px;font-size:15px;font-weight:500}
.chips.small button{padding:6px 11px;font-size:13px}
/* industry chips (Obory and the configurator): twelve, each with a dot in the colour its preset starts with.
   On a wide screen Obory wraps them (app.js never leaves one chip alone on the last line) and the narrow
   configurator column lists them in a grid; on phones both become one row that scrolls sideways */
#obory-chips,#cfg-industry{--fade-l:36px;--fade-r:56px}
/* while the keyboard is in the row the fades step back, so even the longest chip shows its whole focus ring */
#obory-chips:has(:focus-visible),#cfg-industry:has(:focus-visible){--fade-l:14px;--fade-r:14px}
#obory-chips{gap:10px}
#obory-chips button,#cfg-industry button{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
#obory-chips button{padding:10px 19px 10px 16px}
#cfg-industry{gap:7px}
#cfg-industry button{gap:9px;font-size:13.5px}
#obory-chips i,#cfg-industry i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
#cfg-industry i{width:7px;height:7px}
#obory-chips button:hover i,#cfg-industry button:hover i{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 28%,transparent)}
#obory-chips [aria-selected=true] i,#cfg-industry [aria-pressed=true] i{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,#fff);transform:scale(1.15)}
@media (min-width:641px){
  #cfg-industry{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,164px),1fr))}
  #cfg-industry button{min-height:42px;padding:7px 12px;border-radius:var(--r-m);line-height:1.25;text-align:left;white-space:normal}
}
/* phones (Obory also on tablets, like the gallery under it): the row runs out to the screen edge (the panel
   edge in the configurator), its ends fade while there is more to see, snap points keep the chips clear of
   the fades, and the padding keeps the focus ring in view */
@media (max-width:900px){
  #obory-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:44px;scrollbar-width:none;margin:30px calc(var(--gutter) * -1) -6px;padding:6px var(--gutter)}
  #obory-chips::-webkit-scrollbar{display:none}
  #obory-chips button{flex:none;scroll-snap-align:start;padding:9px 16px 9px 14px;font-size:14.5px}
}
@media (max-width:640px){
  #cfg-industry{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:44px;scrollbar-width:none;margin:-6px -18px;padding:6px 18px}
  #cfg-industry::-webkit-scrollbar{display:none}
  #cfg-industry button{flex:none;scroll-snap-align:start;padding:7px 13px 7px 11px}
}
.chips.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--fade-r)),transparent)}
.chips.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l));mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l))}
.chips.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.g-card{background:var(--paper-2);border-radius:var(--r);padding:clamp(28px,4vw,48px) clamp(28px,4vw,52px) 26px;display:flex;flex-direction:column;align-items:center}
.g-card .frame{width:100%;max-width:260px;transition:transform .7s var(--ease-out)}
.g-card:hover .frame{transform:translateY(-6px) rotate(-.6deg)}
.g-meta{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:28px;font-size:14px}
.g-meta b{font-weight:500}
.g-meta span{color:var(--ink-3);display:block;font-size:13px}
@media (max-width:900px){.gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:40px calc(var(--gutter) * -1) 0;padding:0 var(--gutter)}.gallery::-webkit-scrollbar{display:none}.g-card{scroll-snap-align:center}}

/* ================= configurator ================= */
.studio-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);margin-top:clamp(48px,6vw,80px);align-items:start}
.preview{position:sticky;top:72px}
.preview-stage{position:relative;border-radius:var(--r-l);padding:clamp(36px,7%,64px) clamp(48px,15%,120px) clamp(56px,10%,84px);display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#1d2029 0%,#15171e 74%,#101217 74%,#0d0f13 100%)}
.preview-stage::before{content:"";position:absolute;left:50%;top:-20%;width:120%;height:90%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(214,224,255,.13),transparent);pointer-events:none}
.preview-stage .frame{--drop:0 1px 2px rgba(0,0,0,.2),0 6px 14px -4px rgba(0,0,0,.2),0 34px 50px -22px rgba(0,0,0,.45);width:100%;max-width:400px;transition:width .35s var(--ease-out)}
.preview-stage .frame.land{max-width:560px}
/* width-to-height of each frame (glass plus the wooden edge), so a fixed stage can size the frame */
.frame{--fa:.733}.frame.land{--fa:1.347}.frame.fmt-S{--fa:.762}.frame.fmt-S.land{--fa:1.314}.frame.fmt-L{--fa:.767}.frame.fmt-L.land{--fa:1.304}
@media (min-width:961px){
  .preview{--stage-h:clamp(400px,calc(100vh - 228px),600px)}
  .preview-stage{height:var(--stage-h);padding:40px}
  .preview-stage .frame,.preview-stage .frame.land{max-width:none;width:min(100%,calc((var(--stage-h) - 80px) * var(--fa)))}
}
.preview-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 8px 0;font-size:14px;color:var(--ink-2)}
.preview-bar>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-bar .link-btn{min-height:44px;padding:0 12px;margin-right:-12px;border-radius:999px;white-space:nowrap;flex:none}
.controls{display:grid;background:var(--paper-2);border-radius:var(--r-l);padding:8px clamp(20px,3vw,36px) 32px;container-type:inline-size}
fieldset{border:0;margin:0;padding:24px 0 26px;border-bottom:1px solid var(--line);min-width:0}
legend{display:flex;align-items:center;gap:12px;font:600 20px/1.25 var(--f-display);letter-spacing:-.02em;margin-bottom:16px;padding:0;float:left;width:100%}
legend+*{clear:both}
legend span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--limeta);flex:none}
.controls{counter-reset:step}
.controls fieldset{counter-increment:step}
legend span::before{content:counter(step);font:700 14px/1 var(--f-display);color:var(--night);font-variant-numeric:tabular-nums}
.hint{font-size:13px;color:var(--ink-3);margin-top:12px;line-height:1.45}
.hint strong{color:var(--ink);font-weight:500}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--paper);border-radius:var(--r-m);padding:4px;gap:4px}
.seg button{border:0;background:transparent;border-radius:10px;padding:11px 8px;font-size:15px;font-weight:500;cursor:pointer;color:var(--ink-2);transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease-out);line-height:1.2;-webkit-tap-highlight-color:transparent}
.seg button small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:3px}
.seg button:hover:not([aria-checked=true]){color:var(--ink);background:rgba(255,255,255,.05)}
.seg button[aria-checked=true]{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--kobalt),0 1px 2px rgba(0,0,0,.45)}
.seg button:active{transform:scale(.98)}
.seg button[aria-checked=true] small{color:var(--ink-2)}
.thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px}
.thumbs button{border:0;background:none;padding:0;cursor:pointer;text-align:center;font-size:12px;color:var(--ink-2)}
.thumbs .t{aspect-ratio:210/297;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s,transform .35s var(--ease-out);margin-bottom:7px;background:#262a35}
.thumbs .t svg{width:100%;height:100%}
.thumbs.land .t{aspect-ratio:297/210}
.thumbs.land{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}.thumbs.land{grid-template-columns:repeat(3,minmax(0,1fr))}}
.seg.orient{margin-bottom:16px}
.seg.orient button{display:flex;align-items:center;justify-content:center;gap:10px}
.seg.orient i{width:11px;height:16px;border:1.5px solid currentColor;border-radius:2.5px;opacity:.7;transition:opacity .25s}
.seg.orient [data-v=landscape] i{width:16px;height:11px}
.seg.orient [aria-checked=true] i{opacity:1}
.thumbs button:hover .t{transform:translateY(-2px)}
.thumbs button[aria-checked=true] .t{box-shadow:0 0 0 2px var(--paper-2),0 0 0 4px var(--kobalt)}
.thumbs button[aria-checked=true]{color:var(--ink);font-weight:500}
.thumbs button:disabled{display:none}
.swatches{--sw:36px;--cols:5;display:grid;grid-template-columns:repeat(var(--cols),var(--sw));gap:12px;align-items:center}
@container (min-width:410px){.swatches{--sw:32px;--cols:10;gap:10px}}
@media (pointer:coarse),(max-width:520px){.swatches{--sw:40px;--cols:5;gap:clamp(8px,3vw,12px)}}
@container (min-width:510px){.swatches{--cols:10}}
.swatches button,.swatches label{width:var(--sw);height:var(--sw);border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .2s,box-shadow .2s;position:relative;-webkit-tap-highlight-color:transparent}
.swatches button::after,.swatches label::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.swatches button:hover{transform:scale(1.08)}
.swatches [aria-checked=true],.swatches label.is-on{box-shadow:0 0 0 2px var(--paper-2),0 0 0 4px var(--kobalt)}
.swatches label{background:conic-gradient(#f33,#fd3,#3d6,#3cf,#36f,#c3f,#f33)}
.swatches label.is-on::before{content:"";position:absolute;inset:25%;border-radius:50%;background:var(--pick);box-shadow:0 0 0 2px var(--paper-2);pointer-events:none}
.swatches label input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.swatches label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
/* sub-rows inside a step, the optional texts folded away, the shuffle button */
.sub-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:20px}
.sub-label{font-size:13px;font-weight:500;color:var(--ink-2)}
@media (max-width:520px){.style-top{flex-direction:column}.shuffle{height:44px;justify-content:center}}
.style-top{display:flex;gap:10px;align-items:stretch;margin-bottom:16px}
.style-top .seg.orient{flex:1;margin:0}
.shuffle{display:inline-flex;align-items:center;gap:8px;padding:0 16px;border:0;border-radius:999px;background:var(--raise);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}
.shuffle:hover{background:var(--raise-hover)}
.shuffle svg{transition:transform .5s var(--ease-out)}
.shuffle:active svg{transform:scale(.8)}
.more{margin-top:16px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line)}
.more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:15px;font-weight:500;border-radius:var(--r-m)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:8px;height:8px;border:solid var(--ink-2);border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease-out)}
.more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.more summary:hover{background:rgba(255,255,255,.04)}
.more-in{padding:0 16px 18px}
.more{interpolate-size:allow-keywords}
.more::details-content{block-size:0;overflow-y:clip;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
.more[open]::details-content{block-size:auto}
.field{display:grid;gap:6px;align-content:start;margin-top:12px;font-size:13px;color:var(--ink-2);min-width:0}
.field>span{font-weight:500}
.field em{font-style:normal;color:var(--ink-3);font-weight:400;margin-left:6px}
.field input,.field textarea{width:100%;border:1px solid var(--line-field);background:var(--paper);border-radius:var(--r-m);padding:12px 14px;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--kobalt-svetly);box-shadow:0 0 0 4px rgba(143,168,255,.22)}
.field input::placeholder,.field textarea::placeholder,.slots input::placeholder{color:var(--ink-3);opacity:1}
.field.file{position:relative;cursor:pointer}
.field.file input{position:absolute;opacity:0;width:1px;height:1px}
.file-btn{display:flex;align-items:center;height:47px;border:1px dashed var(--line-field);border-radius:var(--r-m);padding:0 14px;font-weight:500;font-size:15px;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.field.file:focus-within .file-btn{border-color:var(--kobalt-svetly)}
.field.file:has(input:focus-visible) .file-btn{outline:2px solid var(--focus);outline-offset:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.only-social,.only-menu,.only-steps,.only-multi{display:none!important}
.t-social .only-social,.t-menu .only-menu,.t-review.tpl-razitko .only-steps,.t-review.tpl-uctenka .only-steps{display:grid!important}
.for-razitko,.for-uctenka{display:none}
.tpl-razitko .for-razitko,.tpl-uctenka .for-uctenka{display:inline}
.t-multi fieldset.only-multi{display:block!important}
.t-multi .only-single{display:none!important}
#cfg-type{grid-template-columns:1fr 1fr;grid-auto-flow:row}
#cfg-type button{min-height:56px;padding:10px 12px}
.field-err{display:none;color:var(--chyba);font-size:12px}
.has-err>.field-err,.has-err .field-err{display:block}
.field input.bad,.slots input.bad{border-color:var(--chyba)}
.field input.bad:focus,.slots input.bad:focus{box-shadow:0 0 0 4px rgba(255,138,128,.2)}
.file-btn.err{border-color:var(--chyba);color:var(--chyba);white-space:normal;line-height:1.3}
.logo-note[hidden]{display:none}
.chips.channels{gap:7px}
.chips.channels button{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;font-size:14px}
.chips.channels svg{border-radius:6px;flex:none}
.hint.flash{color:var(--chyba);animation:nudge .45s}
@keyframes nudge{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.slots{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.slots li{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:start;padding:12px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line)}
.slot-n{width:18px;padding-top:10px;font:600 14px/1.3 var(--f-display);color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.slot-ic{padding-top:4px}
.slot-ic svg{display:block;border-radius:8px}
.slot-f{display:grid;gap:6px;min-width:0}
.slots input{width:100%;border:1px solid var(--line-field);background:var(--paper);border-radius:10px;padding:9px 12px;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.slots input:focus{border-color:var(--kobalt-svetly);box-shadow:0 0 0 4px rgba(143,168,255,.22)}
.slot-a{display:flex;flex-direction:column;gap:4px}
.slot-a button{width:30px;height:26px;border:0;border-radius:8px;background:var(--raise);color:var(--ink-2);font-size:14px;cursor:pointer}
.slot-a button:hover:not(:disabled){color:var(--ink)}
.slot-a button:disabled{opacity:.3;cursor:default}
@media (max-width:420px){.slots li{grid-template-columns:auto 1fr auto;gap:10px}.slot-n{display:none}}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{margin-top:16px;padding:12px 14px;border-radius:var(--r-m);background:rgba(255,138,128,.12);color:var(--chyba-dark);font-size:14px}
.form-error[hidden]{display:none}
.finishes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.finishes button{display:flex;align-items:center;gap:12px;min-height:56px;border:1px solid #4a4f5c;background:transparent;border-radius:var(--r-m);padding:12px;cursor:pointer;text-align:left;font-size:14px;font-weight:500;transition:border-color .2s,box-shadow .2s,background-color .2s,transform .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.finishes button i{flex:none;width:20px;height:28px;border-radius:2px}
.finishes button:hover{border-color:var(--line-field)}
.finishes button[aria-checked=true]{border-color:var(--kobalt);box-shadow:inset 0 0 0 1px var(--kobalt);background:rgba(43,89,255,.07)}
.finishes button:active{transform:scale(.98)}
@container (max-width:310px){.finishes button{flex-direction:column;justify-content:center;gap:6px;padding:10px 4px;min-height:80px;text-align:center}}
.sw-dub{background:linear-gradient(rgba(255,246,228,.12),rgba(70,40,12,.1)),url(../img/ramy/dub-v.webp) 0 0/40px auto,#c4a074}
.sw-cerny{background:#0b0d12}
.sw-bily{background:#f2f2f2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.total{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:24px 0 16px}
.total-label{display:block;font:600 14px/1.3 var(--f-text);color:var(--ink-2)}
.total strong{display:block;font:650 40px/1.05 var(--f-num);letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.total strong.is-custom{font-size:clamp(18px,6.4cqi,28px);line-height:1.3}
.total strong.tick{animation:tick .32s var(--ease-out)}
@keyframes tick{from{opacity:.3;transform:translateY(6px)}}
.total-note{grid-column:1/-1;margin-top:8px;font-size:12px;line-height:1.45;color:var(--ink-3)}
/* on narrow phones the stepper goes under the price, so 1 290 Kč keeps its size and never runs into it */
@media (max-width:379px){.total{grid-template-columns:minmax(0,1fr)}.total .qty{justify-self:start;margin-top:14px}}
.qty{display:flex;align-items:center;background:var(--paper);border-radius:999px;padding:4px}
.qty button{width:44px;height:44px;border:0;border-radius:50%;background:var(--raise);font-size:18px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,opacity .2s,transform .2s var(--ease-out)}
.qty button:hover:not([aria-disabled=true]){background:var(--raise-hover)}
.qty button:active:not([aria-disabled=true]){transform:scale(.92)}
.qty button[aria-disabled=true]{opacity:.35;cursor:default}
.qty-n{min-width:40px;text-align:center;font:650 17px/1 var(--f-display);font-variant-numeric:tabular-nums}
@media (max-width:960px){
  :root{--pv-h:clamp(176px,27vh,232px)}
  @supports (height:1svh){:root{--pv-h:clamp(176px,27svh,232px)}}
  .studio-grid{grid-template-columns:minmax(0,1fr)}
  .preview{position:sticky;top:52px;z-index:5;margin:0 calc(var(--gutter) * -1);padding:10px var(--gutter) 0;background:var(--paper)}
  .preview::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(var(--paper),rgba(11,13,18,0));pointer-events:none}
  .preview-stage{height:var(--pv-h);padding:12px;border-radius:var(--r)}
  .preview-stage .frame,.preview-stage .frame.land{max-width:none;width:min(100%,calc((var(--pv-h) - 24px) * var(--fa)))}
  .preview-bar{padding:0 4px;font-size:13px}
  .controls{padding:4px 18px 24px}
  /* a field reached by Tab or a tap lands below the preview, not under it */
  html:has(#cfg fieldset :focus){scroll-padding-top:calc(52px + var(--pv-h) + 88px)}
}

/* ================= pricing ================= */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,6vw,80px)}
.plan{position:relative;border-radius:var(--r);padding:clamp(28px,4vw,44px);background:var(--night-3);display:flex;flex-direction:column}
.plan-hi{background:#232733;outline:1.5px solid var(--kobalt);outline-offset:-1.5px}
.plan h3{font-size:19px;color:var(--moon-2);font-weight:500;letter-spacing:-.01em}
.plan-price{font:650 clamp(44px,5vw,64px)/1 var(--f-num);letter-spacing:-.035em;margin:18px 0 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan-unit{font:500 14px/1.4 var(--f-text);color:var(--moon-2);margin-bottom:14px;font-variant-numeric:tabular-nums}
.plan-sub{color:#8b91a0;margin-bottom:32px;flex:1}
.badge{position:absolute;top:clamp(28px,4vw,44px);right:clamp(28px,4vw,44px);font:700 12.5px/1.2 var(--f-text);font-variant-numeric:tabular-nums;padding:6px 11px;border-radius:999px;background:var(--limeta);color:var(--night)}
.badge-dim{background:rgba(255,255,255,.1);color:#fff}
/* Rámeček na pult i na zeď: three frames face the viewer and float a little, each on its own beat;
   the one under the pointer comes forward, the others stay put */
.pf-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,4vw,56px);padding:clamp(28px,4vw,48px) clamp(8px,3vw,40px) clamp(40px,5vw,64px)}
.pf{position:relative;flex:0 1 230px;animation:pf-float 4.2s ease-in-out var(--d) infinite}
.pf .frame{transition:transform .6s var(--ease-out),filter .6s var(--ease-out);transform-origin:50% 100%}
.pf::after{content:"";position:absolute;left:12%;right:12%;bottom:-26px;height:16px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(10px);animation:pf-shadow 4.2s ease-in-out var(--d) infinite;transition:opacity .6s,transform .6s var(--ease-out)}
.pf:hover .frame{transform:translateY(-14px) scale(1.07);filter:drop-shadow(0 30px 34px rgba(0,0,0,.55))}
.pf:hover::after{transform:scale(1.15);opacity:.55}
@keyframes pf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pf-shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.86);opacity:.6}}
@media (prefers-reduced-motion:reduce){.pf,.pf::after{animation:none}.pf .frame{transition:none}}
@media (max-width:600px){.pf-row{gap:12px}.pf:hover .frame{transform:translateY(-8px) scale(1.04)}}
.guarantee{display:flex;gap:16px;align-items:flex-start;margin-top:28px;padding:20px 22px;border-radius:var(--r);background:linear-gradient(135deg,rgba(215,255,61,.08),rgba(215,255,61,.02));box-shadow:inset 0 0 0 1px rgba(215,255,61,.22)}
.g-ic{flex:none;width:44px;height:44px;color:var(--limeta)}
.guarantee strong{display:block;font-family:var(--f-display);font-size:19px;font-weight:650;letter-spacing:-.015em;color:var(--moon);margin-bottom:6px}
.guarantee p{margin:0;font-size:15px;line-height:1.55;color:var(--moon-2)}
.trust-g{color:inherit;text-decoration:underline;text-decoration-color:rgba(215,255,61,.5);text-underline-offset:4px}
.trust-g:hover{color:var(--limeta)}
/* more pieces, each its own look: the question under the count, the sign tabs on top of the form */
.same{grid-column:1/-1;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.same-q{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ink)}
.same-seg button{font-size:14px}
.sign-tabs{position:sticky;top:60px;z-index:5;margin:8px calc(-1 * clamp(20px,3vw,36px)) 4px;padding:14px clamp(20px,3vw,36px) 12px;background:rgba(28,31,38,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);border-radius:var(--r-l) var(--r-l) 0 0}
.st-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.st-row::-webkit-scrollbar{display:none}
.st{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 10px 9px;border:0;border-radius:12px;background:var(--paper);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s,transform .25s var(--ease-out)}
.st:hover{color:var(--ink);transform:translateY(-1px)}
.st[aria-selected=true]{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--limeta)}
.st:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.st-t{display:block;width:40px;aspect-ratio:210/297;border-radius:3px;overflow:hidden;background:#111;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.st-t.land{width:56px;aspect-ratio:297/210}
.st-t svg{display:block;width:100%;height:100%}
.st.nudge{animation:st-nudge 1.4s var(--ease-out) 2}
@keyframes st-nudge{0%,100%{transform:none;box-shadow:none}35%{transform:translateY(-3px);box-shadow:0 0 0 2px rgba(215,255,61,.55)}}
.st-hint{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.st.nudge{animation:none}}
/* PC: the signs are switched under the preview, a dark glass switch as in the 3D window; + adds one more.
   The tabs in the form step back to a line saying which sign is being edited. */
.pv-signs{position:absolute;left:50%;bottom:18px;z-index:3;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;transform:translateX(-50%);background:rgba(17,19,25,.66);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 30px -14px rgba(0,0,0,.85);animation:pv-in .5s var(--ease-out) both}
.pv-signs[hidden]{display:none}
@keyframes pv-in{from{opacity:0;transform:translateX(-50%) translateY(10px)}}
.pv-row{position:relative;display:flex;gap:2px}
.pv-pill{position:absolute;top:0;bottom:0;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:999px;background:#f3f4f7;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .45s var(--ease-out),width .45s var(--ease-out)}
.pv-s{position:relative;z-index:1;min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.76);font:600 14px/1 var(--f-text);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:color .3s;-webkit-tap-highlight-color:transparent}
.pv-s:hover{color:#fff}
.pv-s[aria-selected=true]{color:#0b0d12}
.pv-s:focus-visible,.pv-add:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pv-signs.many .pv-l{display:none}
.pv-signs.many .pv-s{min-width:38px;padding:0 12px}
.pv-add{display:grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;transition:background-color .3s,color .3s,transform .3s var(--ease-out);-webkit-tap-highlight-color:transparent}
.pv-add:hover{background:var(--limeta);color:#0b0d12}
.pv-add:active{transform:scale(.9)}
.pv-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pv-add[hidden]{display:none}
.pv-s.nudge{animation:pv-nudge 1.4s var(--ease-out) 2}
@keyframes pv-nudge{35%{color:#fff;text-shadow:0 0 14px rgba(215,255,61,.95)}}
.st-hint b{color:var(--ink);font-weight:600}
@media (min-width:961px){
  .preview.multi .preview-stage{padding-bottom:78px}
  .preview.multi .preview-stage .frame{width:min(100%,calc((var(--stage-h) - 118px) * var(--fa)))}
  .sign-tabs{position:static;margin:0;padding:20px 0 0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0}
  .sign-tabs .st-row{display:none}
  .sign-tabs .st-hint{margin:0;font-size:14px}
}
@media (max-width:960px){.pv-signs{display:none!important}}
@media (prefers-reduced-motion:reduce){.pv-signs,.pv-s.nudge{animation:none}.pv-pill{transition:none}}
/* phones: the preview sits on top of the form there, so the tabs stay in the flow and stay small */
@media (max-width:860px){.sign-tabs{position:static;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}.st-t{width:32px}.st-t.land{width:45px}.st-hint{font-size:12px}}
/* symbols: the grid of pictograms, the panel for the chosen one, and the handles over the preview */
.leg-opt{font:500 13px/1 var(--f-text);letter-spacing:0;color:var(--ink-3);margin-left:-2px}
.sym-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@container (min-width:470px){.sym-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.sym-grid button{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .25s var(--ease-out),opacity .2s;-webkit-tap-highlight-color:transparent}
.sym-grid svg{width:clamp(20px,46%,28px);height:auto;transition:transform .35s var(--ease-out)}
@media (hover:hover){.sym-grid button:hover{background:rgba(255,255,255,.075);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.sym-grid button:hover svg{transform:scale(1.1)}}
.sym-grid button:active{transform:scale(.93)}
.sym-grid button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sym-grid button.on{color:var(--limeta);background:rgba(215,255,61,.06);box-shadow:inset 0 0 0 1px rgba(215,255,61,.28)}
.sym-grid button.on::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--limeta);box-shadow:0 0 8px rgba(215,255,61,.75)}
.sym-grid button[aria-disabled=true]:not(.on){opacity:.38}
.sym-cap{margin-top:10px;min-height:19px;font-size:13px;line-height:1.45;color:var(--ink-3);transition:color .2s}
.sym-cap.hot{color:var(--ink)}
.sym-cap.nope{color:#ffb7a9;animation:sym-nope .42s var(--ease-out)}
@keyframes sym-nope{20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.sym-edit{display:grid;gap:14px;margin-top:14px;padding:12px 14px 14px;border-radius:var(--r-m);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);animation:sym-in .4s var(--ease-out)}
.sym-edit[hidden]{display:none}
@keyframes sym-in{from{opacity:0;transform:translateY(-6px)}}
.sym-on-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sym-on{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.sym-on button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.sym-on button:hover{color:#fff}
.sym-on button:active{transform:scale(.94)}
.sym-on button[aria-checked=true]{background:var(--limeta);color:var(--night);box-shadow:0 4px 16px -6px rgba(215,255,61,.55)}
.sym-del{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;margin-right:-6px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-text);cursor:pointer;transition:background-color .2s,color .2s}
.sym-del:hover{background:rgba(255,120,100,.1);color:#ffb7a9}
.sym-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px}
.sym-row .sub-label{margin:0}
.sym-range{display:flex;align-items:center;gap:10px;min-height:44px}
.sym-range svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.6}
.sym-range input{--p:25%;flex:1;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.sym-range input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--limeta) var(--p),rgba(255,255,255,.14) var(--p))}
.sym-range input::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--limeta) var(--p),rgba(255,255,255,.14) var(--p))}
.sym-range input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.35);transition:transform .2s var(--ease-out)}
.sym-range input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.35)}
.sym-range input:active::-webkit-slider-thumb{transform:scale(1.12)}
.sym-range input:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:8px}
.sym-tones{--acc:#2f8f5b;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--paper-2)}
.sym-tones button{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:52px;padding:8px 2px 7px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:500 12px/1.1 var(--f-text);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.sym-tones button:hover:not([aria-checked=true]){color:var(--ink);background:rgba(255,255,255,.05)}
.sym-tones button[aria-checked=true]{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--kobalt),0 1px 2px rgba(0,0,0,.45)}
.sym-tones i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.tn-auto{background:linear-gradient(135deg,var(--acc) 0 50%,#fff 50% 100%)}
.tn-accent{background:var(--acc)}
.tn-dark{background:#16181d}
.tn-light{background:#fff}
/* over the preview: invisible handles you can grab; the chosen one gets a frame, a knob and a cross */
.frame .sym-layer{position:relative;z-index:4;margin:var(--m);pointer-events:none}
.sym-h{position:absolute;aspect-ratio:1;padding:0;border:0;border-radius:5px;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;outline:none}
.sym-h[hidden]{display:none}
.sym-h::before{content:"";position:absolute;inset:min(0px,calc(50% - 21px))}
.sym-h::after{content:"";position:absolute;inset:-3px;border-radius:7px;pointer-events:none;transition:box-shadow .2s}
@media (hover:hover){.preview-stage:hover .sym-h::after{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 0 1.5px rgba(11,13,18,.12)}}
.sym-layer.act .sym-h.sel::after,.sym-layer.drag .sym-h.sel::after,.sym-h.sel:focus-visible::after,.preview-stage:hover .sym-h.sel::after{box-shadow:0 0 0 1.5px var(--limeta),0 0 0 3px rgba(11,13,18,.4),0 0 18px rgba(215,255,61,.35)}
.sym-layer.drag .sym-h.sel{cursor:grabbing}
.sym-k,.sym-x{position:absolute;z-index:1;width:14px;height:14px;border-radius:50%;opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .2s,transform .3s var(--ease-out)}
.sym-k::before,.sym-x::before{content:"";position:absolute;inset:-13px}
.sym-k{right:-10px;bottom:-10px;background:#fff;box-shadow:0 0 0 1.5px var(--limeta),0 2px 6px rgba(0,0,0,.45);cursor:nwse-resize}
.sym-x{right:-10px;top:-10px;background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.45);cursor:pointer}
.sym-x::after{content:"";position:absolute;inset:3.5px;background:linear-gradient(45deg,transparent calc(50% - .75px),#fff calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),linear-gradient(-45deg,transparent calc(50% - .75px),#fff calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px))}
.sym-layer.act .sym-h.sel>span,.sym-h.sel:focus-visible>span,.preview-stage:hover .sym-h.sel>span{opacity:1;transform:none;pointer-events:auto}
.sym-layer.drag .sym-h.sel>span{opacity:0}
/* fingers: the symbol only moves on the preview, size and removal are in the panel (no slip removes one) */
@media (pointer:coarse){.sym-k,.sym-x{display:none}}
.sym-zone{position:absolute;border-radius:6px;background:rgba(215,255,61,.1);outline:1.5px dashed rgba(215,255,61,.8);outline-offset:-1px;opacity:0;transition:opacity .25s}
.sym-zone::after{content:attr(data-l);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 7px;border-radius:999px;background:rgba(11,13,18,.82);color:var(--limeta);font:700 10px/1 var(--f-text);letter-spacing:.06em}
.sym-layer.drag .sym-zone{opacity:1}
.art [data-sym].pop{transform-box:fill-box;transform-origin:center;animation:sym-pop .6s var(--ease-out)}
@keyframes sym-pop{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.1)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.sym-edit,.sym-cap.nope,.art [data-sym].pop{animation:none}.sym-grid svg,.sym-k,.sym-x,.sym-zone{transition:none}}
.custom-ask{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;border-radius:var(--r-m);border:1px dashed rgba(215,255,61,.45);background:rgba(215,255,61,.05);color:var(--moon-2);font-size:15px;line-height:1.45;text-decoration:none;transition:background .3s,border-color .3s}
.custom-ask svg{flex:none;color:var(--limeta)}
.custom-ask b{color:var(--moon);font-weight:600}
.custom-ask u{color:var(--limeta);text-decoration-thickness:1px;text-underline-offset:3px}
.custom-ask:hover{background:rgba(215,255,61,.1);border-color:var(--limeta)}
.custom-ask:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.small-note{margin-top:22px;font-size:15px;line-height:1.5;color:var(--moon-2);text-align:center}
.small-note b{color:var(--moon);font-weight:600}
.multi-note{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:20px;padding:22px clamp(22px,3vw,32px);border-radius:var(--r);background:var(--night-3)}
.multi-note b{display:block;font:600 19px/1.25 var(--f-display);letter-spacing:-.015em;color:#fff}
.multi-note div>span{display:block;font-size:14px;color:#8b91a0;margin-top:3px;max-width:560px}
.mn-icons{display:grid;grid-template-columns:repeat(4,26px);gap:6px}
.mn-icons svg{display:block;border-radius:7px}
.multi-note .mn-tiers{color:#dcdfe6;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;margin-top:8px}
.mn-more{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--limeta);color:var(--night);font:700 18px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.plans{grid-template-columns:1fr 1fr}.plans .plan:last-child{grid-column:1/-1}}
@media (max-width:860px){.multi-note{grid-template-columns:auto 1fr}.multi-note .btn{grid-column:2;justify-self:start}}
.included{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:14px 40px;color:#a3a9b7;font-size:15px}
.included li{display:flex;gap:10px;align-items:center}
.included li::before{content:"";width:14px;height:8px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translateY(-2px)}
@media (max-width:760px){.plans{grid-template-columns:1fr}.plans .plan:last-child{grid-column:auto}.included{grid-template-columns:1fr}}
@media (max-width:520px){.multi-note{grid-template-columns:1fr;gap:16px}.multi-note .btn{grid-column:auto;justify-self:start}}
.plan-sub{text-wrap:pretty}

/* ================= bento ================= */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:clamp(48px,6vw,80px)}
.tile{grid-column:span 2;background:var(--paper-2);border-radius:var(--r);padding:34px 32px;display:flex;flex-direction:column;min-height:300px;position:relative;overflow:hidden}
.tile h3{margin-bottom:10px}
.tile p{color:var(--ink-2);font-size:16px;line-height:1.5}
.tile .vis{display:block;width:100%;max-width:260px;height:auto;margin:0 auto auto;padding-bottom:26px;box-sizing:content-box;overflow:visible}
.tile .ico{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto;padding-bottom:28px;box-sizing:content-box}
.t-wide{grid-column:span 4;flex-direction:row;gap:32px;align-items:stretch}
.tile-copy{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.redirect{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;font-size:14px}
.redirect .url{padding:12px 14px;border-radius:var(--r-m);background:var(--paper);color:#fff;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.redirect .url i{font-style:normal;color:var(--moon-3)}
.redirect .arrow{width:1px;height:34px;margin-left:24px;background:var(--moon);position:relative}
.redirect .arrow::after{content:"";position:absolute;bottom:-1px;left:-4px;border:4.5px solid transparent;border-top-color:#fff;transform:translateY(100%)}
.dest{padding:14px 16px;border-radius:var(--r-m);background:var(--moon);color:var(--night);font-weight:500;transition:transform .5s var(--ease-out),opacity .3s}
.dest.flip{transform:translateY(6px);opacity:0}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;margin-top:auto;padding-top:24px}
.bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:#3a3f4c;transform-origin:bottom;transform:scaleY(.08);transition:transform 1.1s var(--ease-out)}
.bars i:nth-child(6){background:var(--kobalt)}
.in .bars i{transform:none}
.bars i:nth-child(2){transition-delay:.06s}.bars i:nth-child(3){transition-delay:.12s}.bars i:nth-child(4){transition-delay:.18s}.bars i:nth-child(5){transition-delay:.24s}.bars i:nth-child(6){transition-delay:.3s}.bars i:nth-child(7){transition-delay:.36s}
.tile-foot{font-size:11px;color:var(--ink-3);margin-top:10px}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}.tile,.t-wide{grid-column:span 1}.t-wide{grid-column:1/-1}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.t-wide{flex-direction:column}.tile{min-height:0}}

/* ================= products ================= */
/* a catalogue sheet: every card reads name, picture, then a footer with the price or a tag and one action. The frames
   are photographed; the small pieces are flat drawings in which the logo's lime phone taps them */
.lineup{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:clamp(48px,6vw,80px)}
.prod{grid-column:span 2;position:relative;display:flex;flex-direction:column;background:var(--paper-2);border-radius:var(--r-l);overflow:hidden;isolation:isolate}
.prod-wide{grid-column:span 6}
.prod-half{grid-column:span 3}
.prod-copy{position:relative;z-index:1;padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px) 0}
.prod h3{font-size:clamp(28px,2.6vw,36px);font-weight:650;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.prod h3 .dim{font-weight:400}
.prod-copy>p{max-width:34ch;margin-top:12px;color:var(--ink-2);font-size:16px;line-height:1.5;text-wrap:pretty}
.prod-img{display:block;width:100%;height:auto;margin-top:auto;transition:transform 1.2s var(--ease-out)}
.js .prod.reveal .prod-img{opacity:0;transform:translateY(28px) scale(.97);transition:opacity 1.2s var(--ease-out) .15s,transform 1.4s var(--ease-out) .15s}
.js .prod.reveal.in .prod-img{opacity:1;transform:none}
.js .prod.reveal.in:hover img.prod-img{transform:scale(1.025);transition-delay:0s}
/* the frame leads: a bigger name in two voices beside its blurb, the photo across the card */
.prod-wide h3{font-size:clamp(38px,5vw,64px);letter-spacing:-.045em;line-height:.98}
.prod-wide h3 .dim{display:block}
.prod-wide .prod-img{width:min(100%,1000px);margin:clamp(8px,2vw,24px) auto 0}
@media (min-width:961px){
  .prod-wide .prod-copy{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
  .prod-wide .prod-copy>p{max-width:31ch;margin:0 0 6px;font-size:17px}
}
/* footer: the price in the display face or a Na dotaz tag, and one action */
.prod-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 clamp(24px,3vw,40px);padding:18px 0 clamp(22px,2.6vw,30px);border-top:1px solid rgba(255,255,255,.1)}
.prod .price{font:600 clamp(22px,2vw,26px)/1.1 var(--f-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink)}
.prod-tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);font:600 13px/1 var(--f-text);color:var(--ink)}
.prod-go{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font:600 15px/1 var(--f-text);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s,transform .35s var(--ease-out)}
.prod-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-out)}
.prod-go:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.prod-go:hover svg{transform:translateX(3px)}
.prod-go:active{transform:scale(.97)}
/* ways into the konfigurátor: the frame's in full Limeta, the multi sign's turns lime under the pointer */
.prod-go-lime{background:var(--limeta);color:var(--night);box-shadow:none}
.prod-go-lime:hover{background:var(--limeta-hover);box-shadow:0 8px 28px -8px rgba(215,255,61,.6)}
.prod-go-lime:active{background:var(--limeta-press);box-shadow:none}
.prod-go-lime:focus-visible{outline-color:var(--limeta)}
.prod-go[data-type]:hover{color:var(--limeta);box-shadow:inset 0 0 0 1.5px var(--limeta)}
/* the multi sign's photo is a touch larger and its frame lines up with the words above: the frame starts 5.8 % into the
   photo and ends at 86.7 %, so it gets about the same margin on the right */
.prod-half:not(.prod-dark) .prod-img{width:106%;max-width:none;margin-left:calc(clamp(24px,3vw,40px) - 6.15%)}
/* the backlit acrylic is photographed on black, so its tile is black too, drawn with a hairline */
.prod-dark{background:#000;outline:1px solid var(--line);outline-offset:-1px}
/* the one lime card: the sticker is the tap itself. Půlnoc text, 16.9:1; the blurb at 74 %, 8:1 */
.prod-lime{background:var(--limeta);color:var(--night)}
.prod-lime .prod-copy>p{color:rgba(11,13,18,.74)}
.prod-lime .prod-meta{border-top-color:rgba(11,13,18,.16)}
.prod-lime .prod-tag{background:rgba(11,13,18,.09);color:var(--night)}
.prod-lime .prod-go{color:var(--night);box-shadow:inset 0 0 0 1px rgba(11,13,18,.4)}
.prod-lime .prod-go:hover{background:var(--night);color:var(--limeta);box-shadow:none}
.prod-lime :focus-visible{outline-color:var(--night)}
.prod-lime ::selection{background:var(--night);color:var(--limeta)}
/* the drawings: flat Půlnoc, Kobalt, white and Limeta, no gloss and no soft shadows. On reveal the phone comes down
   and its rings run out once; under the pointer it taps again. Only transform and opacity move */
.pi{overflow:visible;letter-spacing:0}
.pi .pi-d{font-family:var(--f-display)}
.pi-waves circle{transform-box:fill-box;transform-origin:center}
.pi-rip{opacity:0}
.pi-stk{transform-origin:206px 186px}
.pi-stk2{transform-origin:340px 104px}
@media (prefers-reduced-motion:no-preference){
  .js .prod.in .pi-phone{animation:pi-tap 1s var(--ease-out) .55s both}
  .js .prod.in .pi-waves circle:not(.pi-rip){animation:pi-ring .9s var(--ease-out) 1s both}
  .js .prod.in .pi-waves circle:nth-child(2){animation-delay:1.08s}
  .js .prod.in .pi-waves circle:nth-child(3){animation-delay:1.16s}
  .js .prod.in .pi-stk{animation:pi-stick .9s var(--ease-out) .5s both}
  .js .prod.in .pi-stk2{animation:pi-stick .9s var(--ease-out) .3s both}
  .js .prod.in .pi>g>.pi-card{animation:pi-deal .8s var(--ease-out) .25s both}
  .js .prod.in .pi>g:nth-child(2)>.pi-card{animation-delay:.35s}
  .js .prod.in .pi>g:nth-child(3)>.pi-card{animation-delay:.45s}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .prod:hover .pi-knock{animation:pi-knock .5s var(--ease-out)}
  .js .prod.in:hover .pi-waves .pi-rip{animation:pi-rip 1.1s var(--ease-out) .12s}
}
@keyframes pi-tap{0%{opacity:0;transform:translateY(-36px)}55%{opacity:1;transform:translateY(3px)}100%{transform:none}}
@keyframes pi-ring{0%{opacity:0;transform:scale(.3)}}
@keyframes pi-stick{0%{opacity:0;transform:scale(1.14) rotate(-12deg)}60%{opacity:1}}
@keyframes pi-deal{0%{opacity:0;transform:translateY(26px)}}
@keyframes pi-knock{40%{transform:translateY(-9px)}75%{transform:translateY(1.5px)}}
@keyframes pi-rip{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(var(--rip,3.2))}}
.prod-lime .pi-rip{--rip:1.45}
/* one frame, two ways to put it up: a footnote under the lineup with two small diagrams that move once on reveal;
   without scripts or motion they rest in their final pose */
.mount{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.mt{margin:0;display:grid;grid-template-columns:minmax(0,220px) 1fr;align-items:center;gap:clamp(16px,2.4vw,32px)}
.mt svg{display:block;width:100%;height:auto}
.mt figcaption{display:grid;gap:6px}
.mt b{font:600 clamp(22px,2vw,28px)/1.1 var(--f-display);letter-spacing:-.03em}
.mt span{max-width:32ch;color:var(--ink-2);font-size:16px;line-height:1.5}
.mt-lean{transform-origin:128px 168px;transform:rotate(15deg)}
.mt-leg{transform-origin:128px 68px;transform:rotate(-30deg)}
.mt-hang{transform-origin:130px 38px}
@media (prefers-reduced-motion:no-preference){
  /* the start pose snaps in when scripts load; only the move to the final pose is animated */
  .js .mt-stand:not(.in) .mt-lean,.js .mt-stand:not(.in) .mt-leg{transform:none}
  .js .mt-stand:not(.in) .mt-arrow{opacity:0}
  .js .mt-stand.in .mt-lean{transition:transform 1.1s var(--ease-out) .4s}
  .js .mt-stand.in .mt-leg{transition:transform .9s var(--ease-out) .2s}
  .js .mt-stand.in .mt-arrow{transition:opacity .5s 1.3s}
  .js .mt-wall:not(.in) .mt-hang{opacity:0}
  .js .mt-wall.in:not(.hung) .mt-hang{animation:hang 1.6s var(--ease-out) .2s both}
  /* on hover or tap: the leg snaps shut against the frame and opens again; the hanging frame swings on its nail */
  .mt-stand,.mt-wall{cursor:default}
  .mt-hinge{transform-box:fill-box;transform-origin:center}
  .mt-stand.play .mt-lean{animation:mt-lean 1.5s cubic-bezier(.4,0,.2,1)}
  .mt-stand.play .mt-leg{animation:mt-leg 1.5s cubic-bezier(.4,0,.2,1)}
  .mt-stand.play .mt-hinge{animation:mt-click 1.5s ease-out}
  .mt-stand.play .mt-arrow{animation:mt-arrow 1.5s linear}
  .js .mt-wall.in.play .mt-hang{animation:mt-swing 2s cubic-bezier(.37,0,.63,1)}
}
@keyframes mt-leg{0%{transform:rotate(-30deg)}26%{transform:rotate(1.5deg)}32%{transform:rotate(0)}58%{transform:rotate(0)}84%{transform:rotate(-31.5deg)}100%{transform:rotate(-30deg)}}
@keyframes mt-lean{0%{transform:rotate(15deg)}28%{transform:rotate(4deg)}58%{transform:rotate(4deg)}86%{transform:rotate(15.6deg)}100%{transform:rotate(15deg)}}
@keyframes mt-click{0%,22%{transform:none}29%{transform:scale(1.45)}40%{transform:none}100%{transform:none}}
@keyframes mt-arrow{0%{opacity:1}12%{opacity:0}78%{opacity:0}100%{opacity:1}}
@keyframes mt-swing{0%{transform:none}14%{transform:rotate(6deg)}36%{transform:rotate(-4.5deg)}56%{transform:rotate(2.6deg)}74%{transform:rotate(-1.3deg)}88%{transform:rotate(.5deg)}100%{transform:none}}
@keyframes hang{0%{opacity:0;transform:translateY(-14px)}20%{opacity:1}35%{transform:translateY(0) rotate(-3deg)}60%{transform:rotate(1.6deg)}80%{transform:rotate(-.6deg)}100%{transform:none}}
@media (max-width:960px){
  .prod,.prod-half{grid-column:span 3}
  .prod-wide{grid-column:span 6}
  /* the last small card takes the whole row: words on the left, the drawing on the right */
  .lineup>.prod-third:last-child{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"copy art" "meta art";grid-template-rows:1fr auto}
  .lineup>.prod-third:last-child .prod-copy{grid-area:copy}
  .lineup>.prod-third:last-child .prod-img{grid-area:art;margin:auto 0}
  .lineup>.prod-third:last-child .prod-meta{grid-area:meta}
  /* two narrow columns: each diagram above its words */
  .mt{grid-template-columns:1fr;align-items:start;gap:12px}
  .mt svg{max-width:260px}
}
@media (max-width:760px) and (min-width:521px){.mount{grid-template-columns:1fr}.mt{grid-template-columns:200px 1fr;align-items:center}}
@media (max-width:640px){
  .lineup{gap:14px}
  .prod,.prod-half,.prod-wide,.lineup>.prod-third:last-child{grid-column:span 6}
  .prod{border-radius:22px}
  .lineup>.prod-third:last-child{display:flex}
}
/* a small phone: one column, again each diagram above its words */
@media (max-width:520px){.mount{grid-template-columns:1fr;gap:32px}}
/* the narrowest phones: the price and its button still share one row */
@media (max-width:340px){.prod-meta{column-gap:10px}.prod .price{font-size:20px}.prod-go{gap:6px;padding:0 14px 0 16px}}

/* ================= faq ================= */
.faq{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;font:500 clamp(18px,2vw,22px)/1.35 var(--f-display);letter-spacing:-.02em;position:relative;text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:translateY(-75%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq details p{padding:0 44px 28px 0;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:700px}

/* ================= order ================= */
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:start}
.order-form{position:relative;background:var(--night-3);border-radius:var(--r-l);padding:clamp(24px,4vw,40px)}
.order-form .btn{margin-top:24px}
.fine{font-size:12px;color:#8b91a0;margin-top:14px;text-align:center}
.fine a{text-decoration:underline;text-underline-offset:2px}
.contact-line{margin-top:28px;color:#8b91a0;font-size:15px}
.contact-line a{color:var(--kobalt-svetly);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.order-design{display:flex;gap:18px;align-items:center;margin-top:32px;padding:16px;border-radius:var(--r);background:var(--night-3)}
.order-design[hidden]{display:none}
.od-art{width:72px;flex:0 0 72px;aspect-ratio:210/297;border-radius:4px;overflow:hidden}
.od-art svg{width:100%;height:100%}
.od-art.land{width:102px;flex-basis:102px;aspect-ratio:297/210}
.od-art.fmt-S{aspect-ratio:13/18}.od-art.fmt-S.land{aspect-ratio:18/13}
.od-art.fmt-L{aspect-ratio:3/4}.od-art.fmt-L.land{aspect-ratio:4/3}
.order-design .od-label{display:block;font:600 13px/1.3 var(--f-text);color:var(--moon-2)}
.order-design strong{display:block;font:600 19px/1.25 var(--f-display);letter-spacing:-.015em;margin:2px 0}
.order-design span{font-size:14px;color:#a3a9b7;display:block}
.order-design .link-btn{margin-top:6px;font-size:14px}
.order-done{position:absolute;inset:0;border-radius:inherit;background:var(--night-3);display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;padding:24px}
.order-done[hidden]{display:none}
.order-done svg{width:56px;height:56px;fill:none;stroke:var(--moon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.order-done strong{font:650 36px/1.1 var(--f-display);letter-spacing:-.03em}
.order-done p{color:#a3a9b7;max-width:300px}
@media (max-width:860px){.order-grid{grid-template-columns:1fr}}

/* ================= footer ================= */
.foot{position:relative;contain:paint;background:var(--night);color:#8b91a0;border-top:1px solid rgba(255,255,255,.08);padding:clamp(48px,6vw,72px) 0 40px;font-size:13px;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:40px}
.foot-brand p{margin-top:16px;max-width:300px;line-height:1.55}
.foot-brand b{color:var(--moon);font-weight:500}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols h2{font:600 14px/1.3 var(--f-text);letter-spacing:0;color:var(--moon);margin-bottom:10px}
.foot-cols a{display:block;padding:5px 0;color:#8b91a0;transition:color .2s}
.foot a:hover{color:#fff}
/* the closing signature, the logo inlined: faint letters lit from above and the phone in full Limeta. Every 8 s
   the phone buzzes twice like a haptic tap, two rings run out from the touch and a soft light glides over the letters */
.foot-mark{display:block;width:100%;height:auto;margin:clamp(56px,8vw,96px) 0 clamp(20px,3vw,32px);overflow:visible;pointer-events:none;user-select:none}
.fm-ph{fill:var(--limeta);transform-box:fill-box;transform-origin:50% 50%;animation:fm-buzz 8s linear infinite}
.fm-halo{transform-box:fill-box;transform-origin:50% 50%;animation:fm-halo 8s var(--ease) infinite}
.fm-rip{fill:none;stroke:var(--limeta);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:fm-rip 8s var(--ease-out) infinite}
.fm-rip-2{animation-delay:.2s}
.fm-shine{animation:fm-shine 8s cubic-bezier(.45,0,.2,1) infinite}
/* two short pulses, 60 ms a step, then rest */
@keyframes fm-buzz{0%,3.5%,7%,8.5%,12%,100%{transform:none}4%,9%{transform:translate(.5px,-.5px) rotate(-2deg)}4.75%,9.75%{transform:translate(-.5px,.5px) rotate(2deg)}5.5%,10.5%{transform:translate(.4px,-.4px) rotate(-1.6deg)}6.25%,11.25%{transform:translate(-.3px,.3px) rotate(1.2deg)}}
@keyframes fm-halo{0%,3.5%,40%,100%{opacity:.75;transform:scale(.92)}12%{opacity:1;transform:scale(1.06)}}
@keyframes fm-rip{0%,4%{opacity:0;transform:scale(.3)}5%{opacity:.85}22%,100%{opacity:0;transform:scale(5.2)}}
@keyframes fm-shine{0%,10%{transform:translateX(0)}38%,100%{transform:translateX(690px)}}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;border-top:1px solid rgba(255,255,255,.08);padding-top:18px;font-size:12px;font-variant-numeric:tabular-nums}
.foot-docs{display:flex;flex-wrap:wrap;gap:0 18px}
.foot-docs a,.foot-docs button{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:#8b91a0;font:inherit;cursor:pointer;transition:color .2s}
.foot-docs a:hover,.foot-docs button:hover{color:#fff}
.foot-docs :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.ref-note{margin-top:28px;font-size:13px;line-height:1.5;color:var(--ink-3);text-align:center}
.ref-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ref-note a:hover{color:#fff}
/* cookies: a quiet card in the corner, not a wall in front of the page; "Odmítnout" and "Povolit" weigh the same */
.cc{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:95;width:min(392px,calc(100vw - 40px));border-radius:22px;background:rgba(21,23,30,.9);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 30px 70px -18px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.35);color:var(--ink);font-family:var(--f-text);opacity:0;transform:translateY(18px) scale(.98);transition:opacity .3s var(--ease-out),transform .5s var(--ease-out)}
.cc.on{opacity:1;transform:none}
.cc[hidden]{display:none}
.cc-in{padding:20px 20px 10px}
.cc-title{display:flex;align-items:center;gap:9px;margin:0 0 7px;font:650 17px/1.2 var(--f-display);letter-spacing:-.015em;color:#fff}
.cc-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--limeta);box-shadow:0 0 12px rgba(215,255,61,.7)}
.cc-text{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cc-text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cc-text a:hover{color:#fff}
.cc-more{margin-top:14px}
.cc-more[hidden]{display:none}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);cursor:default}
label.cc-row{cursor:pointer}
.cc-row b{display:block;font-size:14px;font-weight:600;color:#fff}
.cc-row small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.cc-always{flex:none;font-size:12px;color:var(--ink-3);white-space:nowrap}
.cc-switch{flex:none;position:relative;width:46px;height:28px;margin:0;border-radius:999px;background:rgba(255,255,255,.16);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .25s var(--ease-out)}
.cc-switch::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .3s var(--ease-out)}
.cc-switch:checked{background:var(--limeta)}
.cc-switch:checked::before{transform:translateX(18px)}
.cc-switch:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cc-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.cc-btn{min-height:46px;padding:0 14px;border:0;border-radius:13px;background:#fff;color:var(--night);font:600 15px/1 var(--f-text);cursor:pointer;transition:background-color .2s,transform .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.cc-btn:hover{background:#e8ebf1}
.cc-btn:active{transform:scale(.97)}
.cc-btn:focus-visible,.cc-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cc-save{grid-column:1/-1;background:var(--limeta)}
.cc-save:hover{background:var(--limeta-hover)}
.cc-save[hidden]{display:none}
.cc-link{display:block;width:100%;min-height:40px;margin-top:4px;padding:0;border:0;background:none;color:var(--ink-3);font:500 13px/1 var(--f-text);cursor:pointer;transition:color .2s}
.cc-link:hover{color:#fff}
.cc-link[hidden]{display:none}
@media (max-width:560px){.cc{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;border-radius:20px}.cc-in{padding:18px 18px 8px}}
@media (prefers-reduced-motion:reduce){.cc,.cc-switch,.cc-switch::before{transition:none}}
@media print{.cc{display:none!important}}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}.foot-cols{grid-template-columns:1fr 1fr}}

/* ================= motion ================= */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
/* the first screen rises in on its own and never waits for the scripts */
.rise{animation:rise 1.1s var(--ease-out) both}
.hero-copy>.rise:nth-child(2),.nf>.rise:nth-child(2){animation-delay:.08s}
.hero-copy>.rise:nth-child(3),.nf>.rise:nth-child(3){animation-delay:.16s}
.hero-copy>.rise:nth-child(4),.nf>.rise:nth-child(4){animation-delay:.24s}
.hero-copy>.rise:nth-child(5),.nf>.rise:nth-child(5){animation-delay:.32s}
.hero-copy>.rise:nth-child(6),.nf>.rise:nth-child(6){animation-delay:.4s}
.hero-copy>.rise:nth-child(7),.nf>.rise:nth-child(7){animation-delay:.48s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal,.js .prod.reveal .prod-img{opacity:1;transform:none}
  .rise{animation:none}
  .lg *{animation:none!important}
  .anatomy{height:auto}
  .anat-pin{position:relative;height:auto;padding-bottom:80px}
  .anat-stage{min-height:620px}
  .call{opacity:1;transform:none}
  .mark{animation:none}
}
/* reduced motion on a phone: the four notes stack under the sign instead of taking turns */
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .anat-pin{padding-bottom:64px}
  .anat-stage{flex:none;min-height:0;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 var(--gutter)}
  .anat-object{position:relative;left:auto;top:auto;margin:8px auto 24px;transform:rotateX(var(--ax,16deg)) rotateY(var(--ay,-40deg)) scale(var(--as,.8))}
  .call,.call.past{position:static;width:auto;max-width:420px;opacity:1}
}

@media (max-width:640px){
  .hero{padding-top:86px}
  .hero .lede{font-size:17px;margin-top:18px}
  .cta-row{margin-top:24px}
  .trust{margin-top:22px;gap:14px;font-size:13px}
  .stage{height:430px;margin-top:6px}
  .scene{width:min(58vw,240px);bottom:15%}
  .hero-caption{padding:6px 0 20px}
  .tile{padding:28px 24px}
}

/* ================= glows =================
   Soft light drifting behind a few places: wide Kobalt washes behind the hero sign, the konfigurátor, the price
   list, the footer and the 404 page, and Limeta only where something lime gives the light off (the recommended
   plan's button, the last word of the statement, the footer phone, the 404 symbol), because a faint lime wash
   on its own reads as olive. Radial gradients on pseudo-elements; only transform and opacity move, over
   20–55 s; nothing moves with reduced motion; the light stays faint where small grey text sits on it.
   The glows are never scroll anchors: their moving transform would switch scroll anchoring off and let the
   page jump when content above the reader grows. */
.studio,#cenik{contain:paint}
.stage::before,.studio::before,.studio::after,#cenik::before,.foot::before,.nf::before,.nf-mark::before{content:"";position:absolute;z-index:-1;aspect-ratio:1;translate:-50% -50%;pointer-events:none;overflow-anchor:none}
.stage::before{left:50%;top:46%;width:min(1000px,150vw);background:radial-gradient(closest-side,rgba(43,89,255,.3),rgba(43,89,255,.13) 45%,rgba(43,89,255,.04) 75%,rgba(43,89,255,0));animation:glow-a 44s var(--ease) infinite alternate}
.studio::before{left:16%;top:660px;width:min(1100px,160vw);background:radial-gradient(closest-side,rgba(43,89,255,.24),rgba(43,89,255,.1) 45%,rgba(43,89,255,.03) 75%,rgba(43,89,255,0));animation:glow-a 52s var(--ease) infinite alternate}
.studio::after{left:22%;top:78%;width:min(900px,130vw);background:radial-gradient(closest-side,rgba(43,89,255,.18),rgba(43,89,255,.07) 45%,rgba(43,89,255,.02) 75%,rgba(43,89,255,0));animation:glow-b 38s var(--ease) infinite alternate}
#cenik::before{left:50%;top:52%;width:min(1000px,150vw);background:radial-gradient(closest-side,rgba(43,89,255,.26),rgba(43,89,255,.1) 45%,rgba(43,89,255,.03) 75%,rgba(43,89,255,0));animation:glow-a 46s var(--ease) infinite alternate}
/* the recommended plan's lime button spills a little light onto the card below it */
.plan-hi{overflow:hidden;isolation:isolate}
.plan-hi::before{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(clamp(28px,4vw,44px) - 40px);width:calc(100% - 2 * clamp(28px,4vw,44px) + 64px);height:112px;translate:-50% 0;background:radial-gradient(closest-side,rgba(215,255,61,.26),rgba(215,255,61,.08) 55%,rgba(215,255,61,0));pointer-events:none;overflow-anchor:none;animation:glow-breathe 21s var(--ease) infinite alternate}
.foot::before{left:78%;top:80%;width:min(900px,140vw);background:radial-gradient(closest-side,rgba(43,89,255,.22),rgba(43,89,255,.08) 45%,rgba(43,89,255,.02) 75%,rgba(43,89,255,0));animation:glow-a 50s var(--ease) infinite alternate}
/* 404: a Kobalt wash low on the page; the lime phone of the symbol gives off a little light, like the footer phone */
.nf::before{left:62%;top:78%;width:min(1000px,160vw);background:radial-gradient(closest-side,rgba(43,89,255,.24),rgba(43,89,255,.09) 45%,rgba(43,89,255,.025) 75%,rgba(43,89,255,0));animation:glow-a 48s var(--ease) infinite alternate}
.nf-mark::before{left:55%;top:21%;width:150px;background:radial-gradient(closest-side,rgba(215,255,61,.28),rgba(215,255,61,.09) 45%,rgba(215,255,61,0));animation:glow-breathe 20s var(--ease) infinite alternate}
@media (max-width:1059px){.stage::before{aspect-ratio:auto;height:92%}}
@keyframes glow-a{from{transform:translate3d(-5%,4%,0) scale(.94)}to{transform:translate3d(6%,-5%,0) scale(1.07)}}
@keyframes glow-b{0%{transform:translate3d(5%,-4%,0) scale(1);opacity:.7}50%{transform:translate3d(-9%,6%,0) scale(1.12);opacity:1}100%{transform:translate3d(7%,9%,0) scale(.9);opacity:.8}}
@keyframes glow-breathe{from{transform:scale(.9);opacity:.65}to{transform:scale(1.04);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .stage::before,.studio::before,.studio::after,#cenik::before,.plan-hi::before,.foot::before,.nf::before,.nf-mark::before,.fm-ph,.fm-halo,.fm-rip,.fm-shine{animation:none}
}

/* ================= legal page ================= */
.legal-page .nav .btn{margin-left:auto}
.legal{max-width:760px}
.legal h1{font-size:clamp(40px,6vw,64px);margin-top:12px}
.legal-lede{font-size:21px;line-height:1.45;color:var(--ink-2);margin-top:24px}
.legal h2{font-size:24px;letter-spacing:-.015em;margin:48px 0 12px}
.legal p,.legal li{color:var(--ink-2);font-size:17px;line-height:1.6}
.legal ul{padding-left:20px;display:grid;gap:10px}
.legal b{color:var(--ink);font-weight:500}
.legal a{color:var(--kobalt-svetly);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-date{margin-top:48px;font-size:14px!important}
.todo{background:#fff3b0;color:#5c4a00;border-radius:4px;padding:0 4px}

/* ================= 404 ================= */
.nf-page{background:var(--night)}
.nf{position:relative;contain:paint;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px var(--gutter)}
.nf-mark{position:relative;display:block;width:56px;margin-bottom:40px}
.nf-mark img{width:100%;height:auto}
.nf .lede{margin-top:22px}
.nf-note{margin-top:56px;max-width:420px;font-size:14px;line-height:1.5;color:#8b91a0}

/* ---------- references: owners' words and photos from the shops ---------- */
/* the owners' words are set as open pull quotes on a hairline, not as cards; the opening mark hangs in Limeta */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,64px) clamp(32px,5vw,72px);margin-top:clamp(48px,6vw,80px)}
.quote{margin:0;padding-top:clamp(24px,2.6vw,32px);border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.quote blockquote{margin:0}
.quote p{margin:0;font:400 clamp(19px,1.8vw,23px)/1.42 var(--f-display);letter-spacing:-.012em;color:var(--moon);text-wrap:pretty;text-indent:-.84em}
.quote p::before{content:'„';margin-right:.04em;font-size:1.75em;font-weight:700;line-height:0;color:var(--limeta)}
.quote p::after{content:'“'}
.quote figcaption{font-size:14px;color:var(--moon-3)}
.quote figcaption a{display:block;color:var(--moon);font-weight:500;text-decoration:none;width:fit-content}
.quote figcaption a:hover{color:var(--kobalt-svetly)}
.quote figcaption a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px}
.quote figcaption .ext{display:inline-block;margin-left:5px;font-size:.85em;color:var(--kobalt-svetly);transition:transform .3s var(--ease-out)}
.quote figcaption a:hover .ext{transform:translate(2px,-2px)}
.quote figcaption a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
@media (max-width:760px){.quotes{grid-template-columns:1fr;gap:40px}}
.rail .photo img{display:block;width:100%;height:auto;aspect-ratio:720/1029;object-fit:cover;border-radius:var(--r-m);box-shadow:0 0 0 .5px rgba(255,255,255,.08),0 30px 50px -20px rgba(0,0,0,.9);transition:transform .7s var(--ease-out)}
.rail .photo:hover img{transform:translateY(-8px)}
@media (prefers-reduced-motion:reduce){.rail .photo img{transition:none}.rail .photo:hover img{transform:none}}

/* ---------- partner programme: a short invitation, the terms are agreed in person ---------- */
.partners{padding-top:0}
.partner-card{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:clamp(28px,5vw,72px);align-items:end;padding:clamp(28px,5vw,64px);border-radius:var(--r);background:radial-gradient(120% 140% at 0% 0%,rgba(43,89,255,.18),rgba(43,89,255,0) 55%),var(--night-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.partner-copy h2{font-size:clamp(30px,3.6vw,48px)}
.partner-copy .lede{margin-top:20px;max-width:560px}
.partner-cta{display:grid;justify-items:start;gap:14px;font-size:15px;color:var(--moon-3)}
.partner-cta span a{color:var(--kobalt-svetly);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:860px){.partner-card{grid-template-columns:1fr;align-items:start}}

/* ---------- statement: the words light up as the paragraph scrolls through ---------- */
.statement{padding:clamp(120px,15vw,220px) 0 clamp(40px,6vw,80px)}
.say{max-width:1080px;font-family:var(--f-display);font-size:clamp(34px,5.6vw,78px);line-height:1.06;letter-spacing:-.035em;font-weight:650;color:var(--moon);text-wrap:balance}
.say em{font-style:normal;color:var(--limeta);text-shadow:0 0 .6em rgba(215,255,61,.3)}
.js .say .w{color:#5a6170;transition:color .4s var(--ease-out),text-shadow 1.4s var(--ease-out)}
.js .say em.w{text-shadow:0 0 .6em rgba(215,255,61,0)}
.js .say .w.lit{color:var(--moon)}
.js .say em.w.lit{color:var(--limeta);text-shadow:0 0 .6em rgba(215,255,61,.3)}
.say i{font-style:italic}
/* the brand in the statement is its logo: letters follow the word's light, the phone stays limeta */
.say-brand{white-space:nowrap}
.say-logo{display:inline-block;width:3.62em;height:1em;vertical-align:-.02em;margin:0 .04em}
.say-logo svg{display:block;width:100%;height:100%;overflow:visible}
.say-logo path{fill:currentColor}
.say-logo .sl-ph{fill:var(--limeta)}
/* Pět kroků nebo jeden ťuk: the heading and its lede stand on the page's axis */
.sec-cmp .wrap>.eyebrow,.sec-cmp .wrap>h2,.sec-cmp .wrap>.lede{text-align:center;margin-left:auto;margin-right:auto}
/* headings come out of a soft blur as they rise */
.js h2.reveal{filter:blur(8px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out)}
.js h2.reveal.in{filter:none}
/* the race: one time scale for both lanes, the old way runs long */
.lane-bar{display:block;height:3px;margin-top:14px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.lane-bar b{display:block;height:100%;background:#6b7180;transform:scaleX(var(--p,0));transform-origin:left}
.lane-b .lane-bar b{background:var(--moon)}
.lane-a.fin .lane-bar b{background:#a3a9b7}
@media (prefers-reduced-motion:reduce){
  .js .say .w{color:var(--moon)}
  .js .say em.w{color:var(--limeta);text-shadow:0 0 .6em rgba(215,255,61,.3)}
  .js h2.reveal{filter:none}
}

/* ---------- configurator: the logo option ---------- */
.logo-opt{margin-top:16px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background-color .3s}
.logo-opt:has(input:checked){box-shadow:inset 0 0 0 1px rgba(143,168,255,.45);background:rgba(43,89,255,.06)}
.check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;border-radius:var(--r-m);-webkit-tap-highlight-color:transparent}
.check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.check-box{width:24px;height:24px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--line-field);background:var(--paper);display:grid;place-items:center;transition:background-color .2s,box-shadow .2s,transform .2s var(--ease-out)}
.check-box::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease-out)}
.check input:checked+.check-box{background:var(--kobalt);box-shadow:none}
.check input:checked+.check-box::after{transform:rotate(45deg) scale(1)}
.check:active .check-box{transform:scale(.92)}
.check input:focus-visible+.check-box{outline:2px solid var(--focus);outline-offset:3px}
.check-text{display:grid;gap:2px;min-width:0}
.check-text b{font-size:15px;font-weight:600;color:var(--ink)}
.check-text small{font-size:13px;color:var(--ink-3);line-height:1.4}
.check-tag{font:600 12.5px/1 var(--f-text);color:var(--ink-2);padding:7px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-field);white-space:nowrap}
.logo-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.logo-panel.open{grid-template-rows:1fr}
.logo-panel[hidden]{display:none}
.logo-in{overflow:hidden;padding:0 16px;opacity:0;transition:opacity .3s}
.logo-panel.open .logo-in{opacity:1;padding-bottom:16px}
.logo-mail{display:flex;gap:10px;align-items:flex-start;margin:2px 0 4px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);font-size:14px;line-height:1.5;color:var(--ink-2)}
.logo-mail svg{flex:none;margin-top:1px;color:var(--kobalt-svetly)}
.logo-in .field.file{margin-top:14px}
.file-row{display:flex;gap:8px;align-items:flex-end}
.file-row .field.file{flex:1}
.file-remove{flex:none;width:47px;height:47px;border:0;border-radius:var(--r-m);background:var(--raise);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.file-remove:hover{background:var(--raise-hover);color:var(--ink)}
.file-remove[hidden]{display:none}
.file-btn.has-file{border-style:solid;border-color:rgba(143,168,255,.5)}
.logo-note{margin-top:8px}
.cfg-fine{margin-top:12px;text-align:center;font-size:13px;color:var(--ink-3)}
.done-ref{font:600 14px/1.3 var(--f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--moon-3)}
.done-ref[hidden],.done-mail[hidden]{display:none}
.done-mail{margin-top:8px}
.order-done .done-mail svg{width:18px;height:18px;margin:0;stroke:none}
@media (prefers-reduced-motion:reduce){.logo-panel,.logo-in,.check-box,.check-box::after{transition:none}}

/* ---------- works with: neutral phone and QR pictograms, the waves in lime because they are the tap ---------- */
.compat{margin-top:20px;padding:clamp(24px,3.4vw,40px);border-radius:var(--r);background:var(--paper-2);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(20px,4vw,56px);align-items:center}
.compat-title{font-family:var(--f-display);font-size:clamp(20px,2.1vw,26px);font-weight:650;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.compat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.compat-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.compat-list b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:3px}
.compat-list span{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ci{flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.ci .cf{fill:var(--ink);stroke:none}
.ci .cw{stroke:var(--limeta)}
.ci .cs{stroke-width:1.4}
@media (max-width:960px){.compat{grid-template-columns:1fr}}
@media (max-width:640px){.compat-list{grid-template-columns:1fr}}

/* ---------- FAQ in topic groups: the heading stays in view on wide screens, answers open smoothly ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.62fr);gap:clamp(32px,6vw,104px);align-items:start}
.faq-head{position:sticky;top:96px}
.faq-more{margin-top:24px;max-width:330px;color:var(--ink-2);font-size:16px;line-height:1.55}
.faq-more a,.faq details p a{color:var(--kobalt-svetly);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.faq-groups{display:grid;gap:clamp(40px,5vw,64px)}
.faq-gt{font:600 15px/1.3 var(--f-text);letter-spacing:-.005em;color:var(--ink-2);margin:0 0 6px}
.faq-group .faq{margin-top:0}
.faq{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary:hover{color:#fff}
.faq summary:focus-visible{outline:2px solid var(--kobalt-svetly);outline-offset:4px;border-radius:6px}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:56px}.faq-head{position:static}.faq-more{max-width:none}}
@media (prefers-reduced-motion:reduce){.faq details::details-content{transition:none}}

/* ================= konfigurátor: logo, recommended style, price, phone bar ================= */
.thumbs .t-rec{display:none;margin-top:2px;font:600 11px/1.2 var(--f-text);color:var(--kobalt-svetly)}
.thumbs .rec .t-rec{display:block}
.file-btn{gap:10px}
.file-btn span{overflow:hidden;text-overflow:ellipsis}
.file-ic{flex:none;color:var(--kobalt-svetly)}
.file-btn.has-file .file-ic{display:none}
.file-btn[aria-busy=true]{color:var(--ink-2)}
.logo-thumb{flex:none;height:28px;width:auto;max-width:84px;object-fit:contain;border-radius:4px;background:repeating-conic-gradient(#9da1ab 0 25%,#c3c6cd 0 50%) 0 0/8px 8px}
.logo-thumb[hidden]{display:none}
.logo-err{margin-top:8px;font-size:13px;line-height:1.45;color:var(--chyba)}
.logo-err[hidden]{display:none}
.upsell{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:rgba(43,89,255,.16);color:#cdd8ff;font-size:12.5px;font-weight:500}
.upsell:empty{display:none}
.buybar{display:none}
@media (max-width:960px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(11,13,18,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--ease-out),visibility 0s .35s}
  .buybar.on{transform:none;visibility:visible;transition:transform .35s var(--ease-out),visibility 0s}
  .bb-label{display:block;font:600 13px/1.3 var(--f-text);color:var(--ink-2)}
  .bb-sum strong{display:block;font:650 22px/1.15 var(--f-num);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
  .buybar .btn{height:44px;padding:0 22px;font-size:15px}
  /* while a text field has focus (the keyboard is up) the preview shrinks to a small thumbnail */
  .preview-stage{transition:height .3s var(--ease-out)}
  .preview-stage .frame{transition:width .3s var(--ease-out)}
  html:has(#cfg :is(input:not([type=checkbox],[type=file],[type=color]),textarea):focus){--pv-h:120px}
  .studio:has(.controls :is(input:not([type=checkbox],[type=file],[type=color]),textarea):focus) .preview-bar{display:none}
}
/* fingers need 44 px */
@media (pointer:coarse){
  .slot-a button{width:44px;height:40px}
  .chips button,.seg.orient button{min-height:44px}
}
@media (pointer:coarse) and (max-width:420px){
  .slots li{grid-template-columns:auto 1fr}
  .slot-a{grid-column:1/-1;flex-direction:row;justify-content:flex-end;gap:8px}
}

/* ================= order: fields, logo reminder, sent and pending states ================= */
.field>label{font-weight:500}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--chyba)}
.logo-reminder{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.logo-reminder svg{flex:none;margin-top:1px;color:var(--kobalt-svetly)}
.logo-reminder[hidden]{display:none}
.order-done{overflow:auto}
.order-done .done-wait{display:none}
.order-done[data-mode=mail] .done-ok{display:none}
.order-done[data-mode=mail] .done-wait{display:block;stroke:var(--kobalt-svetly)}
#done-title{outline:none}
.done-ref{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-field);color:var(--ink)}
.done-small{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:330px}
.done-small[hidden],.done-actions [hidden]{display:none}
.done-actions{display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:center;align-items:center;margin-top:4px}
.done-actions .link-btn{font-size:14px}
.order-done .btn{margin-top:4px}
.upsell-row{grid-column:1/-1;margin-top:10px}
.upsell-row:has(.upsell:empty){display:none}
.upsell{margin-top:0}
.file-btn{height:auto;min-height:47px;padding:8px 14px;white-space:normal;line-height:1.3}
.logo-thumb{max-width:64px}

/* ================= konfigurátor: the sign eases into a new choice, order sum, finishing touches ================= */
#cfg-art.flip svg{animation:cfg-flip .28s var(--ease-out)}
@keyframes cfg-flip{from{opacity:.35;transform:scale(.985)}}
.order-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.order-sum[hidden]{display:none}
.order-sum span{font:600 14px/1.3 var(--f-text);color:var(--ink-2)}
.order-sum strong{font:650 26px/1.1 var(--f-num);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.order-sum+.btn{margin-top:16px}
.btn:disabled{opacity:.6;cursor:progress}
#order-design:focus{outline:none}
#order-design:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.order-done:not([hidden]){animation:done-in .45s var(--ease-out)}
@keyframes done-in{from{opacity:0;transform:scale(.98)}}
.order-done .done-ok path{stroke-dasharray:40;stroke-dashoffset:40;animation:od-draw .5s var(--ease-out) .2s forwards}
@keyframes od-draw{to{stroke-dashoffset:0}}
.order-form textarea{field-sizing:content;min-height:96px;max-height:240px}
/* the hero h1 carries the keyword line (SEO) and the slogan; both keep their old look and stagger */
.hero h1>.eyebrow{display:block}
.hero h1>.h1-t{display:block;animation-delay:.08s}

/* ================= guide: Jak získat víc recenzí na Googlu ================= */
.guide .section{padding-block:clamp(56px,8vw,96px)}
.guide .g-hero{padding-top:clamp(112px,14vw,160px)}
.g-narrow{max-width:860px}
.g-crumbs{display:flex;gap:10px;font-size:14px;color:var(--ink-3);margin-bottom:28px}
.g-crumbs a{color:var(--ink-2)}.g-crumbs a:hover{color:#fff}
.guide h1{font-size:clamp(42px,6.4vw,80px)}
.guide h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.03em;line-height:1.05}
.g-lede{font-size:clamp(19px,2vw,22px);line-height:1.5;color:var(--ink-2);margin-top:24px;max-width:680px}
.g-p{color:var(--ink-2);font-size:18px;line-height:1.6;margin-top:18px;max-width:680px}
.g-p a,.g-ways a,.g-bans a,.g-tip a{color:var(--kobalt-svetly);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.g-small{font-size:15px;color:var(--ink-3)}
.g-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:36px 0 0}
.g-toc a{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--night-3);border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink);transition:background-color .2s,border-color .2s}
.g-toc a:hover{background:var(--raise);border-color:var(--raise-hover)}
.g-sec{border-top:1px solid var(--line)}
.g-card{margin-top:32px;background:var(--night-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.4vw,36px)}
.g-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:640px){.g-fields{grid-template-columns:1fr 1fr}.g-fields .g-field:last-child{grid-column:1/-1}}
.g-field{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2);min-width:0}
.g-field em{font-style:normal;color:var(--ink-3);font-weight:400;margin-left:6px}
.g-field input,.g-field select{width:100%;height:52px;border:1px solid var(--line-field);background:var(--night);border-radius:var(--r-m);padding:0 14px;font-size:18px;color:#fff;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.g-field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.g-field input:focus,.g-field select:focus{border-color:var(--kobalt-svetly);box-shadow:0 0 0 3px rgba(143,168,255,.25)}
.g-hint{font-size:14px;color:var(--ink-3);margin-top:12px}
.g-result{margin-top:28px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.g-big{font:650 clamp(84px,14vw,152px)/.9 var(--f-display);letter-spacing:-.05em;color:var(--limeta);font-variant-numeric:tabular-nums}
.g-say{font:600 clamp(20px,2.4vw,26px)/1.3 var(--f-display);letter-spacing:-.02em;color:#fff;margin:14px auto 0;max-width:560px;text-wrap:balance}
.g-note{font-size:15px;color:var(--ink-3);margin:14px auto 0;max-width:520px}
.g-share{margin-top:14px}
.g-bar{--from:50;--to:80;position:relative;height:8px;border-radius:99px;background:var(--raise);margin:0 auto 28px;max-width:520px;overflow:hidden}
.g-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--to) * 1%);background:linear-gradient(90deg,var(--star) calc(var(--from) / var(--to) * 100%),var(--limeta) 0);border-radius:inherit;transition:width .6s var(--ease-out)}
.g-steps{margin:22px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink-2);font-size:17px;line-height:1.55}
.g-steps b{color:#fff;font-weight:600}
.g-steps code{font-size:15px;background:var(--night-3);padding:1px 6px;border-radius:6px;color:#fff}
.g-qr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(20px,4vw,40px);align-items:start}
@media (max-width:720px){.g-qr{grid-template-columns:1fr}}
.g-qr-in{display:grid;gap:14px}
.g-qr-in .btn{margin-top:6px;justify-self:start}
.g-qr-in .btn:disabled{opacity:.45;cursor:not-allowed}
.g-err{font-size:14px;color:var(--chyba);margin-top:-6px}
.g-qr-out canvas{width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
@media (max-width:720px){.g-qr-out{max-width:280px}}
.g-tip{margin-top:24px;padding:18px 22px;border-left:3px solid var(--limeta);background:rgba(215,255,61,.05);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--ink-2);font-size:16px;line-height:1.55}
.g-tip b{color:#fff}
.g-ways{list-style:none;counter-reset:w;padding:0;margin:32px 0 0;display:grid;gap:0}
.g-ways li{counter-increment:w;display:grid;grid-template-columns:56px 1fr;column-gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
.g-ways li::before{content:counter(w);grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--limeta);color:var(--night);font:700 16px/1 var(--f-display);font-variant-numeric:tabular-nums}
.g-ways h3{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;line-height:1.25;margin-top:6px}
.g-ways p{color:var(--ink-2);font-size:17px;line-height:1.6;margin-top:6px}
.g-bans{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.g-bans li{position:relative;padding:18px 20px 18px 56px;background:var(--night-3);border:1px solid var(--line);border-radius:var(--r-m);color:var(--ink-2);font-size:17px;line-height:1.55}
.g-bans li::before{content:"";position:absolute;left:20px;top:21px;width:20px;height:20px;border-radius:50%;border:2px solid var(--chyba);background:linear-gradient(45deg,transparent 45%,var(--chyba) 45%,var(--chyba) 55%,transparent 55%)}
.g-bans b{color:#fff;font-weight:600}
.g-tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
@media (max-width:720px){.g-tpls{grid-template-columns:1fr}}
.g-tpl{display:flex;flex-direction:column;background:var(--night-3);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 12px}
.g-tpl h3{font-size:19px;letter-spacing:-.015em}
.g-tpl p{color:var(--ink-2);font-size:16px;line-height:1.6;margin-top:10px;flex:1}
.g-tpl .btn{align-self:flex-start;height:44px;margin-top:8px}
.g-check{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.g-check li{position:relative;padding-left:38px;color:var(--ink-2);font-size:17px;line-height:1.55}
.g-check li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:7px;background:var(--limeta)}
.g-check li::after{content:"";position:absolute;left:8px;top:7px;width:7px;height:11px;border:solid var(--night);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.guide .faq{margin-top:20px}
.guide .faq p{color:var(--ink-2);padding-bottom:22px;line-height:1.6}
.guide .faq a{color:var(--kobalt-svetly);text-decoration:underline;text-underline-offset:3px}
.g-end{text-align:center}
.g-end .g-p{margin-inline:auto}
.g-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.guide .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--kobalt-svetly);padding:0 20px}
.guide .btn-ghost:hover{background:var(--night-3);border-color:var(--raise-hover);color:var(--kobalt-svetly-hover)}

/* ================= Rady: hub, cards, article ================= */
.cover{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:radial-gradient(120% 90% at 85% 10%,rgba(215,255,61,.32),transparent 55%),radial-gradient(90% 80% at 10% 100%,rgba(43,89,255,.55),transparent 60%),var(--night-3)}
.cover::after{content:attr(data-n);position:absolute;left:6%;bottom:2%;font:700 clamp(64px,12vw,160px)/1 var(--f-display);letter-spacing:-.06em;color:rgba(255,255,255,.08)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .9s var(--ease-out)}
.cover.noimg img{display:none}
.r-hero{padding-top:clamp(112px,14vw,160px);padding-bottom:clamp(24px,4vw,48px)}
.r-hero h1{font-size:clamp(42px,6.6vw,88px);max-width:14ch}
.r-list{padding-top:0}
.r-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.r-grid3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px}
@media (max-width:980px){.r-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.r-grid3 .r-card:nth-child(3){display:none}}
@media (max-width:720px){.r-grid,.r-grid3{grid-template-columns:1fr}.r-grid3 .r-card:nth-child(3){display:flex}}
.r-card{display:flex;flex-direction:column;background:var(--night-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s var(--ease-out)}
.r-card .cover{border-radius:0}
.r-card:hover,.r-card:focus-visible{transform:translateY(-4px);border-color:rgba(215,255,61,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.r-card:hover .cover img,.r-card:focus-visible .cover img{transform:scale(1.04)}
.r-txt{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.4vw,28px)}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--ink-3)}
.r-kat{padding:4px 10px;border-radius:999px;background:rgba(215,255,61,.12);color:var(--limeta)}
.r-t{font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.025em;margin-top:14px;text-wrap:balance}
.r-p{color:var(--ink-2);font-size:16px;line-height:1.55;margin-top:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.r-go{margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--kobalt-svetly)}
.r-card:hover .r-go span{display:inline-block;transform:translateX(4px);transition:transform .3s}
.r-big{grid-column:1/-1;flex-direction:row}
.r-big .cover{flex:0 0 58%;aspect-ratio:auto;min-height:360px}
.r-big .r-txt{justify-content:center;padding:clamp(24px,4vw,48px)}
.r-big .r-t{font-size:clamp(28px,3.4vw,44px)}
.r-big .r-p{-webkit-line-clamp:4;font-size:17px}
.r-big .r-go{margin-top:0;padding-top:24px}
@media (max-width:860px){.r-big{flex-direction:column}.r-big .cover{flex:none;aspect-ratio:16/9;min-height:0}}
.r-more h2{font-size:clamp(28px,3.4vw,40px)}
.r-all{margin-top:28px;text-align:center}.r-all a{color:var(--kobalt-svetly);font-weight:600}
/* article */
.a-hero{padding-top:clamp(112px,14vw,160px);padding-bottom:clamp(40px,6vw,72px)}
.a-hero h1{font-size:clamp(40px,6vw,76px)}
.a-cover-wrap{max-width:1100px;margin-top:clamp(36px,5vw,56px)}
.a-cover-wrap figcaption,.a-fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-3);text-align:right}
.a-cover-wrap figcaption a,.a-fig figcaption a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.a-sec{padding-top:clamp(24px,4vw,40px)}
.a-body>p,.a-body li{color:var(--ink-2);font-size:18px;line-height:1.7}
.a-body>p{margin-top:20px}
.a-body>p:first-child{font-size:20px;color:#dfe2e8}
.a-body h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.025em;line-height:1.15;margin-top:clamp(48px,6vw,72px)}
.a-body>ul,.a-body>ol{margin:20px 0 0;padding-left:22px;display:grid;gap:12px}
.a-body b{color:#fff;font-weight:600}
.a-body a{color:var(--kobalt-svetly);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.a-body ol.a-steps{list-style:none;counter-reset:s;padding:0}
.a-body ol.a-steps li{counter-increment:s;position:relative;padding-left:52px;min-height:36px}
.a-body ol.a-steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--limeta);color:var(--night);font:700 15px/1 var(--f-display)}
.a-body blockquote{margin:10px 0 0;padding:18px 22px;border-left:3px solid var(--raise-hover);background:var(--night-3);border-radius:0 var(--r-m) var(--r-m) 0;color:#e6e8ee;font-size:17px;line-height:1.6}
.a-body blockquote.a-bad{border-left-color:var(--chyba)}
.a-body blockquote.a-good{border-left-color:var(--limeta)}
.a-body .a-label{margin-top:28px;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3)}
.a-body .a-label.a-bad{color:var(--chyba)}.a-body .a-label.a-good{color:var(--limeta)}
.a-box{margin-top:28px;padding:22px 24px 12px;border-radius:var(--r);background:var(--night-3);border:1px solid rgba(215,255,61,.3)}
.a-box-t{font-weight:600;color:#fff}
.a-box p+p{color:var(--ink-2);margin-top:8px;line-height:1.6}
.a-fig{margin:24px 0 28px}
.a-body .g-bans,.a-body .g-tpls{margin-top:24px}
.guide .r-hero{padding-top:clamp(112px,14vw,160px);padding-bottom:clamp(32px,5vw,56px)}
.guide .r-list{padding-top:0}
.guide .a-hero{padding-top:clamp(112px,14vw,160px);padding-bottom:clamp(24px,4vw,48px)}
.guide .a-sec{padding-top:clamp(16px,3vw,32px)}

/* ================= 1. 11. evening: add-to-order tick, newsletter choice, drifting rail, rady on the homepage, guide card ================= */
/* the konfigurátor button: a green tick pops in, then the page glides to the order */
.add-btn{position:relative;overflow:hidden;white-space:normal;text-align:center;height:auto;min-height:52px;padding-block:12px;line-height:1.25}
.add-btn .add-l{transition:transform .35s var(--ease-out),opacity .25s}
.add-ok{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.add-ok circle{fill:#22c55e}
.add-ok path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .35s ease-out .15s}
.add-btn.added{background:#16a34a}
.add-btn.added .add-l{opacity:0;transform:translateY(-10px)}
.add-btn.added .add-ok{opacity:1;transform:none}
.add-btn.added .add-ok path{stroke-dashoffset:0}

/* the opt-out for news about discounts */
.optout{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin-top:18px;font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.optout input{position:absolute;opacity:0;width:1px;height:1px}
.optout-box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-field);background:var(--paper);display:grid;place-items:center;transition:background-color .2s,border-color .2s,box-shadow .2s}
.optout-box svg{width:14px;height:14px;fill:none;stroke:#0b0d12;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .25s ease-out}
.optout input:checked+.optout-box{background:var(--limeta);border-color:var(--limeta)}
.optout input:checked+.optout-box svg{stroke-dashoffset:0}
.optout input:focus-visible+.optout-box{box-shadow:0 0 0 4px rgba(143,168,255,.35)}
.optout:hover .optout-box{border-color:var(--kobalt-svetly)}

/* references drift by themselves: no snapping while they glide */
.rail.drift{scroll-snap-type:none;scroll-behavior:auto}

/* three articles before the FAQ */
.home-rady .r-grid3{margin-top:clamp(32px,4vw,48px)}
.hr-all{margin-top:clamp(28px,3vw,40px);text-align:center}
.hr-all .btn span{transition:transform .3s var(--ease-out)}
.hr-all .btn:hover span{transform:translateX(4px)}

/* the free guide, as a card */
.guide-card{position:relative;display:grid;gap:18px;margin-top:28px;max-width:360px;padding:18px;border-radius:24px;color:var(--moon);isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%,rgba(215,255,61,.16),transparent 55%),radial-gradient(110% 90% at 0% 100%,rgba(43,89,255,.28),transparent 60%),var(--night-3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -35px rgba(0,0,0,.9);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.guide-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(215,255,61,.55),rgba(143,168,255,.15) 40%,rgba(43,89,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;transition:opacity .4s}
.guide-card:hover,.guide-card:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 70px -35px rgba(0,0,0,.95)}
.guide-card:hover::before{opacity:1}
.gc-viz{display:grid;grid-template-columns:1fr auto;gap:10px}
.gc-calc{display:grid;gap:6px;padding:14px 14px 12px;border-radius:16px;background:rgba(11,13,18,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.gc-k{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.gc-row{display:flex;align-items:center;gap:8px;font:650 26px/1 var(--f-display);letter-spacing:-.03em}
.gc-from{color:var(--ink-3)}
.gc-to{color:#fff}
.gc-arrow{width:22px;height:2px;border-radius:2px;background:var(--limeta);position:relative}
.gc-arrow::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border:solid var(--limeta);border-width:2px 2px 0 0;transform:rotate(45deg)}
.gc-stars{display:flex;gap:3px}
.gc-stars i{width:12px;height:12px;background:#ffb400;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gc-stars i:last-child{background:linear-gradient(90deg,#ffb400 70%,#3a3f4c 70%)}
.gc-need{font-size:12px;color:var(--ink-2)}
.gc-need b{color:var(--limeta);font-weight:700}
.gc-qr{display:grid;justify-items:center;align-content:center;gap:7px;width:92px;padding:10px;border-radius:16px;background:#fff;color:#0b0d12;font-size:10px;font-weight:650;text-align:center;line-height:1.1;transform:rotate(3deg);box-shadow:0 14px 30px -14px rgba(0,0,0,.8);transition:transform .5s var(--ease-out)}
.gc-qr svg{width:60px;height:60px}
.guide-card:hover .gc-qr{transform:rotate(0) scale(1.04)}
.gc-txt{display:grid;gap:8px;padding:2px 4px 4px}
.gc-chip{justify-self:start;padding:4px 10px;border-radius:999px;background:rgba(215,255,61,.12);color:var(--limeta);font-size:12px;font-weight:600}
.gc-txt strong{font:650 22px/1.15 var(--f-display);letter-spacing:-.025em}
.gc-p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.gc-go{margin-top:4px;font-size:15px;font-weight:600;color:var(--kobalt-svetly)}
.gc-go span{display:inline-block;transition:transform .3s var(--ease-out)}
.guide-card:hover .gc-go span{transform:translateX(4px)}
@media (prefers-reduced-motion:no-preference){
  .guide-card.in .gc-to{animation:gc-pop .6s var(--ease-out) .5s both}
  .guide-card.in .gc-need b{animation:gc-pop .6s var(--ease-out) .7s both}
}
@keyframes gc-pop{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media (max-width:900px){.guide-card{max-width:440px}}
@media (prefers-reduced-motion:reduce){.add-ok,.add-btn .add-l,.guide-card,.gc-qr{transition:none}}

/* ================= 2. 11.: the sign in a room (3D preview, assets/js/scena.js) ================= */
/* the button under the konfigurátor preview */
.v3d-btn{display:flex;align-items:center;gap:14px;width:fit-content;margin:14px auto 0;padding:8px 8px 8px 9px;border:0;border-radius:999px;background:linear-gradient(180deg,#252833,#191b22);color:#fff;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px -16px rgba(0,0,0,.9);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.v3d-btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(215,255,61,.28),inset 0 1px 0 rgba(255,255,255,.1),0 22px 40px -18px rgba(0,0,0,.95),0 0 0 6px rgba(215,255,61,.05)}
.v3d-btn:active{transform:scale(.98)}
.v3d-btn:focus-visible{outline:2px solid var(--limeta);outline-offset:3px}
.v3d-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 30%,#2f3340,#13151b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);perspective:120px}
.v3d-cube{position:relative;width:16px;height:16px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(38deg)}
.v3d-cube i{position:absolute;inset:0;border:1.6px solid var(--limeta);border-radius:2px;background:rgba(215,255,61,.06)}
.v3d-cube i:nth-child(1){transform:translateZ(8px)}
.v3d-cube i:nth-child(2){transform:rotateY(180deg) translateZ(8px)}
.v3d-cube i:nth-child(3){transform:rotateY(90deg) translateZ(8px)}
.v3d-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(8px)}
.v3d-cube i:nth-child(5){transform:rotateX(90deg) translateZ(8px)}
.v3d-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(8px)}
@media (prefers-reduced-motion:no-preference){
  .v3d-cube{animation:v3d-spin 9s linear infinite}
  .v3d-btn:hover .v3d-cube{animation-duration:2.4s}
}
@keyframes v3d-spin{from{transform:rotateX(-24deg) rotateY(38deg)}to{transform:rotateX(-24deg) rotateY(398deg)}}
.v3d-btn-t{display:grid;gap:1px;padding-right:6px}
.v3d-btn-t b{font:600 16px/1.2 var(--f-display);letter-spacing:-.015em}
.v3d-btn-t small{font-size:13px;line-height:1.3;color:var(--ink-2)}
.v3d-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;background:rgba(255,255,255,.07);transition:background-color .35s,color .35s}
.v3d-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out)}
.v3d-btn:hover .v3d-go{background:var(--limeta);color:#0b0d12}
.v3d-btn:hover .v3d-go svg{transform:translateX(2px)}
.v3d-btn-s{display:none}
/* phones: the preview is a sticky strip, so the button becomes a small glass badge in its corner */
@media (max-width:960px){
  .v3d-btn{position:absolute;top:18px;right:calc(var(--gutter) + 8px);z-index:2;margin:0;gap:7px;padding:4px 12px 4px 4px;background:rgba(17,19,25,.62);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 18px -8px rgba(0,0,0,.8)}
  .v3d-ico{width:32px;height:32px;background:none;box-shadow:none}
  .v3d-cube{width:13px;height:13px}
  .v3d-cube i:nth-child(1){transform:translateZ(6.5px)}
  .v3d-cube i:nth-child(2){transform:rotateY(180deg) translateZ(6.5px)}
  .v3d-cube i:nth-child(3){transform:rotateY(90deg) translateZ(6.5px)}
  .v3d-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(6.5px)}
  .v3d-cube i:nth-child(5){transform:rotateX(90deg) translateZ(6.5px)}
  .v3d-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(6.5px)}
  .v3d-btn-t,.v3d-go{display:none}
  .v3d-btn-s{display:block;font:650 14px/1 var(--f-display);letter-spacing:-.01em}
  .v3d-btn:hover{transform:none}
  .studio:has(.controls :is(input:not([type=checkbox],[type=file],[type=color]),textarea):focus) .v3d-btn{display:none}
}

/* the window */
html.v3d-open{overflow:hidden}
.v3d{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,40px);background:rgba(5,6,9,.72);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);opacity:0;transition:opacity .35s ease}
.v3d[hidden]{display:none}
.v3d.on{opacity:1}
.v3d-panel{position:relative;width:min(1280px,100%);height:min(840px,100%);border-radius:28px;overflow:hidden;background:#17140f;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 50px 120px -30px rgba(0,0,0,.9);transform:translateY(28px) scale(.965);transition:transform .7s var(--ease-out)}
.v3d.on .v3d-panel{transform:none}
.v3d-panel:focus{outline:none}
@media (max-width:700px){
  .v3d{padding:0}
  .v3d-panel{width:100%;height:100%;border-radius:0}
}
.v3d-view{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.v3d-view:active{cursor:grabbing}
.v3d-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.v3d.ready .v3d-canvas{opacity:1}
.v3d.ready.swap .v3d-canvas{opacity:0;transition-duration:.22s}
/* while the room loads: a thin ring and one line, in the middle of the dark panel */
.v3d-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:16px;width:min(340px,80%);margin:0;text-align:center;font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);transition:opacity .4s ease;pointer-events:none}
.v3d.ready .v3d-wait{opacity:0}
.v3d-spin{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:no-preference){.v3d-spin{animation:v3d-spin .9s linear infinite}}
@keyframes v3d-spin{to{transform:rotate(1turn)}}
.v3d.fail .v3d-spin{display:none}
.v3d.fail .v3d-hint,.v3d.fail .v3d-seg{display:none}
.v3d-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 60px 28px;background:linear-gradient(rgba(12,9,6,.42),rgba(12,9,6,0));pointer-events:none}
.v3d-top h2{margin:6px 0 0;font:600 19px/1.25 var(--f-display);letter-spacing:-.02em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.v3d-close{pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;color:#fff;cursor:pointer;background:rgba(28,26,24,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .25s,transform .4s var(--ease-out)}
.v3d-close:hover{background:rgba(28,26,24,.72);transform:rotate(90deg)}
.v3d-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.v3d-close:focus-visible,.v3d-seg button:focus-visible,.v3d-add:focus-visible{outline:2px solid var(--limeta);outline-offset:3px}
.v3d-bottom{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;padding:70px 24px 24px;background:linear-gradient(rgba(12,9,6,0),rgba(12,9,6,.34));pointer-events:none}
.v3d-bottom>*{pointer-events:auto}
.v3d-seg{position:relative;grid-column:2;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(28,26,24,.52);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px -12px rgba(0,0,0,.6)}
.v3d-seg button{position:relative;z-index:1;min-width:118px;height:44px;padding:0 20px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.86);font:600 15px/1 var(--f-text);letter-spacing:-.005em;cursor:pointer;transition:color .35s}
.v3d-seg button[aria-checked=true]{color:#15130f}
.v3d-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(#fff,#f1eee8);box-shadow:0 1px 1px rgba(0,0,0,.12),0 6px 16px -6px rgba(0,0,0,.45);transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.v3d-seg[data-on=wall] .v3d-thumb{transform:translateX(100%)}
.v3d-hint{position:absolute;left:50%;bottom:calc(100% - 52px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap;font-size:13px;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.5);transition:opacity .6s;pointer-events:none}
.v3d-hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v3d-hint.off{opacity:0}
@media (prefers-reduced-motion:no-preference){.v3d-hint:not(.off) svg{animation:v3d-nudge 2.4s ease-in-out infinite}}
@keyframes v3d-nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.v3d-add{justify-self:end;height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--limeta);color:#0b0d12;font:650 15px/1 var(--f-text);letter-spacing:-.005em;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 30px -12px rgba(0,0,0,.7);transition:background-color .25s,transform .4s var(--ease-out)}
.v3d-add:hover{background:var(--limeta-hover);transform:translateY(-1px)}
.v3d-add:active{transform:scale(.97)}
@media (max-width:760px){
  .v3d-top{padding:16px 16px 50px 20px}
  .v3d-top h2{font-size:17px;margin-top:10px}
  .v3d-bottom{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;padding:60px 16px calc(16px + env(safe-area-inset-bottom))}
  .v3d-seg{grid-column:auto}
  .v3d-seg button{min-width:0;width:100%}
  .v3d-seg{width:min(100%,300px)}
  .v3d-add{justify-self:stretch;height:50px}
  .v3d-hint{bottom:calc(100% - 44px)}
}
@media (prefers-reduced-motion:reduce){.v3d,.v3d-panel,.v3d-canvas,.v3d-thumb{transition:none}}

/* ================= socials + sharing =================
   One round control (.soc) for TukniTu profiles and article sharing. At rest a white line glyph on night with a hairline
   ring; on hover it lights up Limeta like the nav pill, the glyph gives a short press (the tap) and one ring runs out,
   the same two moves as the footer signature. Glyphs: own drawings on a 24 grid, 1.7 px stroke, round caps. */
.soc{--d:44px;position:relative;display:inline-grid;place-items:center;width:var(--d);height:var(--d);padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.035);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s .04s,background-color .3s var(--ease-out),box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.soc .soc-dot{fill:currentColor;stroke:none}
.soc .soc-fill{fill:currentColor;stroke-width:1.2}
.soc::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px var(--limeta);opacity:0;pointer-events:none}
.soc:hover,.soc:focus-visible,.soc.is-ok,.foot .soc:hover,.foot .soc:focus-visible{color:#0b0d12;background:var(--limeta);box-shadow:0 0 0 1px rgba(215,255,61,.5),0 8px 24px -6px rgba(215,255,61,.55),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.soc:focus-visible{outline:2px solid var(--limeta);outline-offset:3px}
.soc:active{transform:scale(.93);transition-duration:.12s}
@media (prefers-reduced-motion:no-preference){
  .soc:hover svg{animation:soc-tap .5s var(--ease-out)}
  .soc:hover::before{animation:soc-ring .75s var(--ease-out)}
}
@keyframes soc-tap{0%,100%{transform:none}35%{transform:scale(.84)}70%{transform:scale(1.06)}}
@keyframes soc-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
/* label on hover (pointer devices only), the same white chip everywhere */
.soc[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);padding:7px 10px;border-radius:8px;background:#fff;color:#0b0d12;font:500 12px/1 var(--f-text);letter-spacing:0;white-space:nowrap;opacity:0;transform:translate(-50%,4px);transition:opacity .18s,transform .3s var(--ease-out);pointer-events:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.soc[data-tip-pod]::after{bottom:auto;top:calc(100% + 10px);transform:translate(-50%,-4px)}
.soc[data-tip]:hover::after,.soc[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);transition-delay:.25s,.25s}
@media (hover:none){.soc[data-tip]::after{display:none}}
/* copy link: the chain swaps for a tick */
.soc .soc-b{position:absolute;opacity:0;transform:scale(.6)}
.soc-pill .soc-b{position:static;display:none}
.soc .soc-a,.soc .soc-b{transition:opacity .2s,transform .35s var(--ease-out)}
.soc.is-ok .soc-a{opacity:0;transform:scale(.6)}
.soc.is-ok .soc-b{opacity:1;transform:none}
.soc-pill.is-ok .soc-a{display:none}.soc-pill.is-ok .soc-b{display:block}

/* profiles in the header (wide screens), the phone menu and the footer */
.nav-soc,.menu-soc,.foot-soc{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.nav-soc{flex:none;gap:2px;margin-left:-12px}
.nav-soc .soc{--d:34px;background:none;box-shadow:none;color:#dcdfe6}
.nav-soc .soc svg{width:18px;height:18px}
.nav-soc .soc:hover,.nav-soc .soc:focus-visible{color:#0b0d12;background:var(--limeta);box-shadow:0 0 0 1px rgba(215,255,61,.5),0 8px 24px -6px rgba(215,255,61,.55),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55)}
@media (max-width:1139px){.nav-soc{display:none}}
.menu .menu-soc{gap:10px;padding-top:22px}
.menu .menu-soc a.soc{--d:48px;padding:0;margin:0;border:0;border-radius:999px;font:inherit;background:rgba(255,255,255,.035)}
.menu .menu-soc a.soc:hover,.menu .menu-soc a.soc:active,.menu .menu-soc a.soc:focus-visible{padding:0;background:var(--limeta)}
.menu .menu-soc svg{width:22px;height:22px}
.foot-soc{margin-top:24px;gap:10px}
.foot-soc .soc{--d:42px}

/* sharing under the article title */
.shr{display:flex;align-items:center;gap:14px;margin-top:32px;animation-delay:.24s}
.shr-l{margin:0;font-size:14px;font-weight:500;color:var(--ink-3)}
.shr-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.shr-list li[hidden]{display:none}

/* sharing card at the end of the article: night card, a faint tap ring spreading from the corner */
.shr-sec{padding-top:clamp(64px,8vw,104px);padding-bottom:0}
.shr-card{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:28px;padding:clamp(28px,4.4vw,52px);border-radius:var(--r-l);background:var(--night-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.shr-card::before{content:"";position:absolute;z-index:-1;right:-140px;top:-140px;width:440px;height:440px;border-radius:50%;background:radial-gradient(closest-side,rgba(215,255,61,.13),rgba(215,255,61,0)),repeating-radial-gradient(circle,rgba(255,255,255,0) 0 52px,rgba(255,255,255,.07) 52px 53px);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);pointer-events:none}
.shr-card h2{max-width:520px;font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.shr-card p{max-width:500px;margin-top:14px;color:var(--ink-2);font-size:17px;line-height:1.55;text-wrap:pretty}
.shr-card .shr-list{gap:10px}
.soc-pill{--d:auto;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px 0 18px;font:600 15px/1 var(--f-text);letter-spacing:-.005em;white-space:nowrap}
.soc-pill::before{border-radius:999px}
@media (prefers-reduced-motion:no-preference){.soc-pill:hover::before{animation-name:soc-ring-pill}}
@keyframes soc-ring-pill{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.08,1.45)}}
@media (max-width:560px){
  .shr-card .shr-list{display:grid;grid-template-columns:1fr 1fr}
  .shr-card .shr-list li:last-child:nth-child(odd){grid-column:1/-1}
  .soc-pill{width:100%;justify-content:center;gap:8px;padding:0 10px;font-size:14.5px}
}

/* toast */
.shr-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(calc(100vw - 32px),460px);padding:12px 20px 12px 12px;border-radius:20px;background:rgba(27,30,38,.88);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:#fff;font:500 15px/1.4 var(--f-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 60px -16px rgba(0,0,0,.8);opacity:0;transform:translate(-50%,16px) scale(.97);transition:opacity .25s,transform .45s var(--ease-out);pointer-events:none}
.shr-toast.on{opacity:1;transform:translate(-50%,0)}
.shr-toast i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--limeta)}
.shr-toast svg{fill:none;stroke:#0b0d12;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-transparency:reduce){.shr-toast{background:#1b1e26;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* off-screen sections: endless animations rest (app.js adds .idle) */
.idle,.idle::before,.idle::after,.idle *,.idle *::before,.idle *::after{animation-play-state:paused!important}
.mark:not(.on){animation:none}

/* ---------- scroll progress: lime line along the bottom edge of the top bar ----------
   Scroll-driven where the browser can (Chrome, Edge, Safari 26+): no script, runs off the main thread.
   Elsewhere app.js sets --p on the home page; other pages simply show no line. */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--limeta);box-shadow:0 0 10px rgba(215,255,61,.55),0 0 2px rgba(215,255,61,.9);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none;will-change:transform}
@supports (animation-timeline:scroll()){
  .nav::after{animation:nav-progress linear both;animation-timeline:scroll(root block)}
  @keyframes nav-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (forced-colors:active){.nav::after{background:Highlight;box-shadow:none}}