/* virtualne.pro — světlý landing, směr „precision editorial" / ultra-modern.
   Progresivní vrstvy: scroll-driven animace (@supports animation-timeline),
   automatický tmavý režim (light-dark() za @supports), container queries
   dlaždic, text-wrap balance/pretty. Starší prohlížeč = plná světlá verze
   bez těchto vrstev, nic rozbitého. Bez JS. Tmavý public.css (brána hesla,
   přehled skupiny) zůstává oddělený a nedotčený. */
:root{
  color-scheme:light;
  --paper:#fbfbfd; --ink:#16181d; --muted:#5a6170; --faint:#8a91a0;
  --blue:#3a5bdc; --blue-ink:#2f4ac0; --soft:#edeffc; --hair:#e6e8ec; --hair2:#d7dae1;
  --card:#ffffff; --top-bg:rgba(251,251,253,.82); --band-line:#dfe5fb; --btn-hover:#000000;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  --w:1140px;
}
/* automatický tmavý režim: „rozsvícený blueprint" — jen kde umí light-dark() */
@supports (color: light-dark(#000,#fff)){
  :root{
    color-scheme:light dark;
    --paper:light-dark(#fbfbfd,#101319);
    --ink:light-dark(#16181d,#e8eaf1);
    --muted:light-dark(#5a6170,#9aa3b5);
    --faint:light-dark(#8a91a0,#6d7587);
    --blue:light-dark(#3a5bdc,#7d95f2);
    --blue-ink:light-dark(#2f4ac0,#a9b9f7);
    --soft:light-dark(#edeffc,#18203255);
    --hair:light-dark(#e6e8ec,#232a37);
    --hair2:light-dark(#d7dae1,#2e3646);
    --card:light-dark(#ffffff,#151a24);
    --top-bg:light-dark(rgba(251,251,253,.82),rgba(16,19,25,.78));
    --band-line:light-dark(#dfe5fb,#2b3550);
    --btn-hover:light-dark(#000000,#ffffff);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 var(--font);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono);font-size:.92em}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- tlačítka ---------- */
.ld-btn{display:inline-block;background:var(--ink);color:var(--paper);font-weight:600;padding:.72rem 1.4rem;border-radius:11px;transition:background .12s,transform .12s}
.ld-btn:hover{background:var(--btn-hover);text-decoration:none;transform:translateY(-1px)}
.ld-btn:active{transform:translateY(0) scale(.98)}
.ld-btn.sm{padding:.5rem 1.05rem;font-size:.92rem}
.ld-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair2);font-weight:500}
.ld-btn.ghost:hover{border-color:var(--blue);color:var(--blue-ink);background:transparent}
.ld-btn.inv{background:var(--blue)}
.ld-btn.inv:hover{background:var(--blue-ink)}

/* ---------- lepivá hlavička ---------- */
.ld-top{position:sticky;top:0;z-index:50;background:var(--top-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.ld-top{display:flex;align-items:center;justify-content:space-between;padding:.85rem max(2rem,calc((100% - var(--w))/2 + 2rem))}
.ld-brand{display:flex;align-items:center;gap:.65rem;font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.ld-brand svg{width:29px;height:29px;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round}
.ld-brand b span{color:var(--blue)}

/* ---------- rýsovací eyebrow (kóta se zakončením) ---------- */
.ld-eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-ink);margin:0 0 1.3rem;display:flex;align-items:center;gap:.9rem}
.ld-eyebrow::before{content:"";width:30px;height:9px;border-left:1px solid var(--blue);border-right:1px solid var(--blue);background:linear-gradient(var(--blue),var(--blue)) center/100% 1px no-repeat}
.ld-eyebrow::after{content:"";flex:1;height:9px;border-right:1px solid var(--hair2);background:linear-gradient(var(--hair),var(--hair)) center/100% 1px no-repeat}

/* ---------- hero ---------- */
.ld-hero{max-width:var(--w);margin:0 auto;padding:5.2rem 2rem 5.8rem;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:3.2rem;align-items:center}
.ld-hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:-.042em;margin:0 0 1.5rem;font-weight:780}
.ld-sub{font-size:1.14rem;color:var(--muted);max-width:36rem;margin:0 0 2.2rem}
.ld-cta{display:flex;gap:.85rem;flex-wrap:wrap}
.ld-meta{margin:1.6rem 0 0;font-size:.85rem;color:var(--faint)}
.ld-meta .mono{color:var(--blue-ink)}

/* vstupní animace hero (stagger; fill backwards -> klid = viditelné) */
@keyframes ld-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ld-hero-txt>*{animation:ld-rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.ld-hero-txt>:nth-child(1){animation-delay:.05s}
.ld-hero-txt>:nth-child(2){animation-delay:.14s}
.ld-hero-txt>:nth-child(3){animation-delay:.24s}
.ld-hero-txt>:nth-child(4){animation-delay:.34s}
.ld-hero-txt>:nth-child(5){animation-delay:.44s}

/* panosféra: rýsuje se (draw-on), konstrukce se rozsvítí */
.ld-sphere{width:100%;max-width:380px;justify-self:center}
.ld-sphere .cons{stroke:var(--faint);stroke-width:.75;fill:none;opacity:.55;animation:ld-fade .9s .9s backwards}
@keyframes ld-fade{from{opacity:0}to{opacity:.55}}
.ld-sphere .draft{stroke:var(--blue);stroke-width:1.5;fill:none;stroke-linecap:round}
.ld-sphere .draft>*{animation:ld-draw 1.3s cubic-bezier(.4,0,.2,1) backwards}
.ld-sphere .draft>:nth-child(1){animation-delay:.15s}
.ld-sphere .draft>:nth-child(2){animation-delay:.4s}
.ld-sphere .draft>:nth-child(4){animation-delay:.65s;animation-duration:.9s}
.ld-sphere .draft .eq{stroke-dasharray:3 5;stroke-width:1;animation:ld-fade2 .8s 1.1s backwards}
.ld-sphere .draft .tick{animation:ld-fade2 .5s 1.4s backwards}
@keyframes ld-draw{from{stroke-dasharray:900;stroke-dashoffset:900}to{stroke-dasharray:900;stroke-dashoffset:0}}
@keyframes ld-fade2{from{opacity:0}to{opacity:1}}
.ld-sphere .dim{font-family:var(--mono);font-size:13px;fill:var(--faint);letter-spacing:.2em;animation:ld-fade2 .6s 1.5s backwards}

/* ---------- sekce s kótovacím předělem ---------- */
.ld-sec{max-width:var(--w);margin:0 auto;padding:3.6rem 2rem}
.ld-sec::before{content:"";display:block;height:11px;margin:0 0 3rem;border-left:1px solid var(--hair2);border-right:1px solid var(--hair2);background:linear-gradient(var(--hair),var(--hair)) center/100% 1px no-repeat}

/* kroky 01–03 */
.ld-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.ld-step{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:1.8rem 1.85rem;box-shadow:0 1px 2px rgba(17,20,28,.04),0 4px 14px -6px rgba(17,20,28,.08)}
.ld-step .n{font-family:var(--mono);color:var(--blue);font-size:.88rem;letter-spacing:.14em;display:flex;align-items:center;gap:.7rem}
.ld-step .n::after{content:"";flex:1;height:1px;background:var(--hair)}
.ld-step h2{font-size:1.18rem;letter-spacing:-.015em;margin:.7rem 0 .5rem}
.ld-step p{color:var(--muted);margin:0;font-size:.96rem}

/* galerie — dlaždice reagují na vlastní šířku (container queries) */
.ld-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.25rem}
.ld-tile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:1.8rem 1.9rem;color:var(--ink);min-height:185px;box-shadow:0 1px 2px rgba(17,20,28,.04),0 4px 14px -6px rgba(17,20,28,.08);transition:border-color .12s,transform .12s,box-shadow .12s;container-type:inline-size}
.ld-tile:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(58,91,220,.38);text-decoration:none}
.ld-tile .path{color:var(--faint);font-size:.8rem;letter-spacing:.04em;display:flex;align-items:center;gap:.7rem}
.ld-tile .path::after{content:"";flex:1;height:1px;background:var(--hair)}
.ld-tile h2{font-size:1.42rem;letter-spacing:-.02em;margin:.6rem 0 .45rem}
.ld-tile p{color:var(--muted);margin:0;font-size:.96rem;flex:1}
.ld-tile .go{color:var(--blue);font-weight:600;font-size:.93rem;margin-top:1.2rem}
.ld-tile .go span{display:inline-block;transition:translate .15s ease}
.ld-tile:hover .go{text-decoration:underline}
.ld-tile:hover .go span{translate:4px 0}
@container (min-width:560px){
  .ld-tile h2{font-size:1.85rem;letter-spacing:-.025em}
  .ld-tile p{font-size:1.04rem;max-width:46rem}
  .ld-tile .go{margin-top:1.5rem}
}
.ld-empty{color:var(--muted)}

/* kontaktní pás */
.ld-band{max-width:var(--w);margin:3rem auto 0;padding:2.9rem 2.6rem;background:var(--soft);border:1px solid var(--band-line);border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ld-band h2{margin:0 0 .35rem;font-size:1.7rem;letter-spacing:-.025em}
.ld-band p{margin:0;color:var(--muted)}

.ld-foot{max-width:var(--w);margin:0 auto;padding:2.8rem 2rem 3.2rem;color:var(--faint);font-size:.88rem;font-family:var(--mono);display:flex;align-items:center;gap:1rem}
.ld-foot::before{content:"";width:30px;height:9px;border-left:1px solid var(--hair2);border-right:1px solid var(--hair2);background:linear-gradient(var(--hair),var(--hair)) center/100% 1px no-repeat}

/* ---------- scroll-driven vrstvy (jen kde umí animation-timeline) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* vynoření při scrollu — přes `translate`, ať se nehádá s hover transform */
    .ld-step,.ld-tile,.ld-band{animation:ld-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .ld-step:nth-child(2){animation-range:entry 5% entry 45%}
    .ld-step:nth-child(3){animation-range:entry 10% entry 50%}
    /* panosféra: decentní parallax s odjezdem stránky */
    .ld-sphere{animation:ld-orbit linear both;animation-timeline:scroll();animation-range:0 90vh}
  }
}
@keyframes ld-reveal{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
@keyframes ld-orbit{from{translate:none;rotate:none}to{translate:0 30px;rotate:5deg}}

/* ---------- pohyb: respektuj omezení ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ld-hero-txt>*,.ld-sphere,.ld-sphere .cons,.ld-sphere .draft>*,.ld-sphere .dim,.ld-step,.ld-tile,.ld-band{animation:none}
  .ld-btn,.ld-tile,.ld-tile .go span{transition:none}
  .ld-btn:hover,.ld-btn:active,.ld-tile:hover{transform:none}
  .ld-tile:hover .go span{translate:none}
}

/* ---------- mobil ---------- */
@media(max-width:820px){
  .ld-hero{grid-template-columns:1fr;padding:2.8rem 1.2rem 3.4rem;gap:2.4rem}
  .ld-sphere{max-width:250px}
  .ld-top{padding:.75rem 1.2rem}
  .ld-sec{padding:2.6rem 1.2rem}
  .ld-sec::before{margin-bottom:2.2rem}
  .ld-band{margin:2rem 1.2rem 0;padding:1.9rem 1.6rem}
  .ld-foot{padding:2.2rem 1.2rem 2.8rem}
}