/* ============================================================
   shared.css — společný engine (v4)
   Pozadí = jedna pevná živá vrstva (tečky + blury), hýbe se sama.
   Liquid glass všude propouští rozmazané pozadí · reaktivní okraj
   závislý na vzdálenosti od kurzoru · barevný okraj u barev. tlačítek.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap");
@property --dot-r { syntax: "<number>"; inherits: false; initial-value: 1; }

:root{
  --bg:#04050c; --bg2:#070a18;
  --ink:#ffffff; --muted:rgba(255,255,255,.66); --faint:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --blue:#2f6bff; --indigo:#4f46e5; --violet:#7c3aed; --violet2:#a855f7; --lilac:#e7d9ff;
  --gx:50vw; --gy:18vh; --mx:0; --my:0;
  --glow-on:1; --glow-mul:.78; --nav-a:0;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:"Inter",system-ui,-apple-system,sans-serif; letter-spacing:-.011em;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.tight{font-family:"Inter Tight","Inter",sans-serif; letter-spacing:-.035em; line-height:1.02}
.pf{font-family:"Playfair Display",serif; font-style:italic; font-weight:500; letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.muted{color:var(--muted)} .faint{color:var(--faint)}
section{scroll-margin-top:96px}

/* ---------- kontinuální barevný základ (žádné černé díry) ---------- */
.base-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(85% 60% at 50% -8%,rgba(50,34,102,.28),transparent 62%),
    radial-gradient(70% 55% at 82% 108%,rgba(34,32,96,.20),transparent 66%),
    radial-gradient(70% 55% at 14% 96%,rgba(60,38,110,.18),transparent 66%);}

/* ---------- živé barevné blury (rychlejší + parallax) ---------- */
.bg-blobs{position:fixed;inset:-16%;z-index:0;pointer-events:none;opacity:.8;
  transform:translate3d(calc(var(--mx)*28px),calc(var(--my)*28px),0);transition:transform .5s var(--ease)}
.bg-blobs i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;filter:blur(64px) saturate(1.3);will-change:transform}
.blob1{width:52vw;height:52vw;background:radial-gradient(circle,rgba(116,64,224,.56),transparent 64%);left:-10vw;top:-10vw;animation:blobA 7.9s ease-in-out infinite alternate}
.blob2{width:46vw;height:46vw;background:radial-gradient(circle,rgba(146,72,210,.44),transparent 64%);right:-12vw;top:0vw;animation:blobB 9.6s ease-in-out infinite alternate}
.blob3{width:48vw;height:48vw;background:radial-gradient(circle,rgba(128,80,234,.5),transparent 64%);left:12vw;bottom:-20vw;animation:blobC 10.7s ease-in-out infinite alternate}
.blob4{width:40vw;height:40vw;background:radial-gradient(circle,rgba(72,84,230,.46),transparent 64%);right:8vw;bottom:-14vw;animation:blobD 9.1s ease-in-out infinite alternate}
.blob5{width:42vw;height:42vw;background:radial-gradient(circle,rgba(104,64,206,.4),transparent 66%);left:30vw;top:22vh;animation:blobE 12.4s ease-in-out infinite alternate}
@keyframes blobA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(22vw,24vh) scale(1.22)}100%{transform:translate(36vw,10vh) scale(1.08)}}
@keyframes blobB{0%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-24vw,18vh) scale(.9)}100%{transform:translate(-12vw,30vh) scale(1.16)}}
@keyframes blobC{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,-20vh) scale(1.24)}100%{transform:translate(-12vw,-6vh) scale(1.05)}}
@keyframes blobD{0%{transform:translate(0,0) scale(.96)}50%{transform:translate(-20vw,-18vh) scale(1.14)}100%{transform:translate(-4vw,-28vh) scale(1)}}
@keyframes blobE{0%{transform:translate(0,0) scale(1)}50%{transform:translate(16vw,14vh) scale(1.2)}100%{transform:translate(-18vw,6vh) scale(.93)}}

/* ---------- tečky: jedna šedá vrstva, pod vším, jemně dýchající (malý range) ---------- */
.dots-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(150,158,180,.22) calc(var(--dot-r)*1px),transparent calc(var(--dot-r)*1px + .8px));
  background-size:22px 22px;animation:dotBreath 5.8s ease-in-out infinite}
@keyframes dotBreath{0%,100%{--dot-r:.7}50%{--dot-r:.92}}
/* jemné zvětšení teček kolem kurzoru (malé, nevýrazné) */
.dots-hover{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(180,188,210,.28) 1px,transparent 1.8px);
  background-size:22px 22px;
  -webkit-mask:radial-gradient(150px circle at var(--gx) var(--gy),#000,transparent 72%);
          mask:radial-gradient(150px circle at var(--gx) var(--gy),#000,transparent 72%)}

/* ---------- světelný zdroj u kurzoru (ztmavený, idle-fade, dim nad contentem) ---------- */
.light-glow{position:fixed;left:var(--gx);top:var(--gy);width:540px;height:540px;z-index:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  opacity:calc(var(--glow-on) * var(--glow-mul));transition:opacity .55s var(--ease);
  background:radial-gradient(circle,rgba(124,58,237,.12),rgba(47,107,255,.05) 42%,transparent 70%);filter:blur(26px)}

/* ---------- premium mesh gradient — rychlejší + víc fialovo-růžové ---------- */
.grad-primary{
  background:
    radial-gradient(120% 160% at 12% -10%,#7a52e8 0%,rgba(122,82,232,0) 46%),
    radial-gradient(125% 170% at 100% 110%,#9a52d6 0%,rgba(154,82,214,0) 52%),
    radial-gradient(150% 230% at 55% 135%,#4a54e6 0%,rgba(74,84,230,0) 56%),
    linear-gradient(135deg,#46279a,#5b21b6);
  background-size:215% 215%,215% 215%,215% 215%,100% 100%;
  animation:meshMove 2.4s ease-in-out infinite alternate;
}
@keyframes meshMove{
  0%{background-position:0% 8%,100% 92%,38% 100%,0 0}
  50%{background-position:70% 40%,30% 60%,72% 28%,0 0}
  100%{background-position:24% 84%,76% 16%,18% 70%,0 0}
}
/* JEN MODRÝ gradient (žádná fialová) */
.grad-blue{
  background:
    radial-gradient(120% 160% at 14% -8%,#62a6ff 0%,rgba(98,166,255,0) 42%),
    radial-gradient(130% 180% at 100% 112%,#2f7af0 0%,rgba(47,122,240,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#173bbf 0%,rgba(23,59,191,0) 54%),
    linear-gradient(135deg,#173fc4,#2f7af0);
  background-size:180% 180%,180% 180%,180% 180%,100% 100%;
  animation:meshMove 1.8s ease-in-out infinite alternate;
}
.grad-noir{
  background:
    radial-gradient(120% 160% at 14% -8%,#54545c 0%,rgba(84,84,92,0) 44%),
    radial-gradient(130% 180% at 100% 112%,#2b2b32 0%,rgba(43,43,50,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#0e0e12 0%,rgba(14,14,18,0) 54%),
    linear-gradient(135deg,#161619,#34343c);
  background-size:180% 180%,180% 180%,180% 180%,100% 100%;
  animation:meshMove 2.8s ease-in-out infinite alternate;
}
.grad-emerald{
  background:
    radial-gradient(120% 160% at 14% -8%,#3fd6a0 0%,rgba(63,214,160,0) 44%),
    radial-gradient(130% 180% at 100% 112%,#109b66 0%,rgba(16,155,102,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#07523a 0%,rgba(7,82,58,0) 54%),
    linear-gradient(135deg,#0a5e40,#13a06a);
  background-size:180% 180%,180% 180%,180% 180%,100% 100%;
  animation:meshMove 2.6s ease-in-out infinite alternate;
}
.grad-plum{
  background:
    radial-gradient(120% 160% at 14% -8%,#dd8cba 0%,rgba(221,140,186,0) 44%),
    radial-gradient(130% 180% at 100% 112%,#9c3a6c 0%,rgba(156,58,108,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#54183a 0%,rgba(84,24,58,0) 54%),
    linear-gradient(135deg,#62214a,#a8456e);
  background-size:180% 180%,180% 180%,180% 180%,100% 100%;
  animation:meshMove 2.6s ease-in-out infinite alternate;
}
.grad-indigo{
  background:
    radial-gradient(120% 160% at 14% -8%,#7d79ff 0%,rgba(125,121,255,0) 44%),
    radial-gradient(130% 180% at 100% 112%,#4b46d0 0%,rgba(75,70,208,0) 50%),
    radial-gradient(150% 230% at 55% 135%,#241f7a 0%,rgba(36,31,122,0) 54%),
    linear-gradient(135deg,#241f86,#4b46d0);
  background-size:180% 180%,180% 180%,180% 180%,100% 100%;
  animation:meshMove 2.6s ease-in-out infinite alternate;
}
.grad-text{background:linear-gradient(100deg,#bcd0ff,#d9c7ff 50%,#f0e6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- liquid glass (propouští rozmazané pozadí + 3D stín) ---------- */
.glass{
  position:relative; isolation:isolate;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.08); border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.22), 0 20px 52px rgba(0,0,0,.34);
}
.glass::before{   /* specular fill — slábne se vzdáleností (--edge-i) */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  opacity:var(--edge-i,1);
  background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.10),transparent 72%);
}
/* reaktivní okraj — malý jasný bod, smooth, slábne se vzdáleností */
.glass::after,.btn::after,.pill::after,.nav-pill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--la,0deg),
    rgba(255,255,255,.475),
    rgba(255,255,255,.055) 58deg,
    rgba(255,255,255,.03) 180deg,
    rgba(255,255,255,.055) 302deg,
    rgba(255,255,255,.475) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--edge-i,1);
}
.btn::after,.pill::after,.nav-pill::after{opacity:calc(var(--edge-i,1)*.8)}
/* barevný okraj u BAREVNÝCH tlačítek (chytí fialovo-růžovou) */
/* barevná tlačítka: neutrální světlý okraj (chytne barvu tlačítka pod sebou) */
.glass.no-edge::after{display:none}

/* ---------- layout ---------- */
.container{max-width:1140px;margin:0 auto;padding:0 28px}
.section{position:relative;z-index:3;padding:clamp(64px,9vw,108px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--violet2);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--violet2);opacity:.6}
h1{font-size:clamp(44px,7.4vw,80px);font-weight:700}
h2{font-size:clamp(28px,4.2vw,50px);font-weight:700}
h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.lead{font-size:clamp(16px,1.6vw,20px);color:var(--muted);line-height:1.6}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;
  letter-spacing:-.01em;padding:14px 24px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .3s var(--ease),filter .3s var(--ease),box-shadow .3s var(--ease)}
.btn i{font-size:18px}
.btn-primary{position:relative;overflow:hidden;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 2px 8px rgba(0,0,0,.2),0 10px 30px rgba(79,51,182,.38)}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.06),transparent 62%);
  opacity:var(--edge-i,1)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 16px 40px rgba(79,51,182,.52)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.045);border:1px solid var(--line2);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.10)}

/* nav CTA: smooth crossfade ghost -> barevný (--cta-on) */
.nav-cta{position:relative;isolation:isolate;color:#fff;
  background:rgba(255,255,255,calc(.045*(1 - var(--cta-on,0))));
  border:1px solid rgba(255,255,255,calc(.16*(1 - var(--cta-on,0))));
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 8px 24px rgba(79,51,182,calc(var(--cta-on,0)*.45))}
.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  opacity:var(--cta-on,0);transition:opacity .5s var(--ease);
  background:
    radial-gradient(120% 160% at 12% -10%,#7a52e8 0%,rgba(122,82,232,0) 46%),
    radial-gradient(125% 170% at 100% 110%,#9a52d6 0%,rgba(154,82,214,0) 52%),
    radial-gradient(150% 230% at 55% 135%,#4a54e6 0%,rgba(74,84,230,0) 56%),
    linear-gradient(135deg,#46279a,#5b21b6);
  background-size:215% 215%,215% 215%,215% 215%,100% 100%;
  animation:meshMove 2.4s ease-in-out infinite alternate}

/* ---------- pills / chips ---------- */
.card{position:relative;border-radius:20px;padding:26px}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.85);
  border:1px solid var(--line2);background:rgba(255,255,255,.045);padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.chip{display:inline-block;font-size:12px;font-weight:600;color:var(--lilac);background:rgba(124,58,247,.16);
  border:1px solid rgba(124,58,237,.3);padding:3px 10px;border-radius:999px}

/* živá blikající status tečka (jasnější dno + lehce pomalejší) */
.live-dot{width:7px;height:7px;border-radius:50%;background:#34d399;animation:liveBlink 2.52s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:.5;box-shadow:0 0 0 0 rgba(52,211,153,0)}50%{opacity:1;box-shadow:0 0 9px 1px rgba(52,211,153,.5)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:rgba(4,5,12,calc(var(--nav-a)*.62));border-bottom:1px solid rgba(255,255,255,calc(var(--nav-a)*.1))}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-.04em;line-height:1}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid var(--line2);font-size:17px;color:#fff}
.brand-word{display:inline-flex;align-items:baseline}
.brand .pf{font-size:25px}
.nav-pill{position:relative;display:flex;gap:2px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
.nav-pill a{position:relative;z-index:2;padding:9px 18px;font-size:14px;font-weight:500;color:var(--muted);border-radius:999px;transition:color .3s var(--ease)}
.nav-pill a:hover{color:#fff}
.nav-pill a.active{color:#fff}
.nav-indicator{position:absolute;z-index:1;top:6px;left:0;height:calc(100% - 12px);width:0;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  transition:transform .42s var(--ease),width .42s var(--ease)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 32s linear infinite}
/* marquee bez hover-pause — plynulý nepřetržitý scroll */
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- form ---------- */
.field{width:100%;font-family:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line2);border-radius:12px;padding:13px 15px;transition:border .25s,background .25s}
.field::placeholder{color:rgba(255,255,255,.4)}
.field:focus{outline:none;border-color:var(--violet2);background:rgba(255,255,255,.07)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}