@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   Stress-Less Medical — onepager, VARIANTA D „Pásy a světlo" (C × A)
   Anatomie: pásy varianty C — střídání dvou fotorežimů manuálu (–abstract / –clean).
   Podpis:   z varianty A jeden virtuální zdroj světla nad scénou. Horní hrana
             modrého pásu je ROVNÁ a chytá světlo; spodní hrana v něm dohasíná
             do bílé. Žádné vykrojené (vlnité) předěly.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENY ─────────────────────────────────────────────────────────── */
:root{
  /* značka — čtyři barvy */
  --sapphire:#2D5FFF;
  --onyx:#161616;
  --grey:#DCDCDC;
  --white:#FFFFFF;

  /* odvozené odstíny TÉŽE modré (mix se sapphire ↔ onyx / bílou) */
  --blue-600:#2649B9;
  --blue-700:#213A8B;
  --blue-800:#1D2D60;
  --blue-900:#16224A;
  --blue-950:#1A2444;
  --blue-050:#F7F9FF;
  --blue-100:#EAEFFF;

  /* šedé tónované k modré */
  --ink:var(--onyx);
  --ink-2:#64687C;
  --rule:var(--grey);
  --rule-hi:rgba(255,255,255,.26);
  --ink-on-blue:rgba(255,255,255,.80);

  /* písmo */
  --face:"bc-novatica-cyr","BC Novatica CYR","Poppins","Avenir Next","Helvetica Neue",Arial,sans-serif;

  /* typografická škála (poměr ≈ 1,28) */
  --t-xs:0.8125rem;
  --t-sm:0.9375rem;
  --t-bd:1.0625rem;
  --t-md:clamp(1.125rem, 1.02rem + 0.42vw, 1.3125rem);
  --t-lg:clamp(1.375rem, 1.18rem + 0.8vw, 1.75rem);
  --t-h2:clamp(1.95rem, 1.35rem + 2.5vw, 3.1rem);
  --t-h1:clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem);
  --t-mark:clamp(3.4rem, 1.2rem + 9.4vw, 7.4rem);

  /* nelineární prostor */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:18px;
  --sp-5:26px; --sp-6:38px; --sp-7:56px; --sp-8:80px; --sp-9:116px;

  /* rádius */
  --r-s:8px; --r-m:14px; --r-l:22px; --r-pill:999px;

  /* stíny — vrstvené, tónované k modré, jeden zdroj světla shora */
  --sh-1:0 1px 2px rgba(22,34,74,.07), 0 8px 18px -8px rgba(22,34,74,.16);
  --sh-2:0 2px 6px rgba(22,34,74,.08), 0 28px 56px -22px rgba(22,34,74,.30);

  /* pohyb */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.72s;

  /* rozvržení */
  --gutter:clamp(20px, 5.2vw, 56px);
  --maxw:1180px;

  /* PŘEDĚL — pás, v němž modré světlo dohasíná do bílé (mechanismus z A) */
  --fade:clamp(104px, 13vw, 208px);

  /* putující světlo (A) — výchozí hodnoty, když JS neběží */
  --t:.42; --near:.30; --edge:.35;

}

/* ── 2 · ZÁKLAD ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--face);
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:800px){ body{font-size:var(--t-bd)} }

img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;line-height:1.06;letter-spacing:-.024em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

.wrap{width:min(calc(100% - var(--gutter) * 2), var(--maxw));margin-inline:auto;position:relative;z-index:2}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--white);color:var(--sapphire);
  padding:14px 22px;border-radius:0 0 var(--r-m) 0;font-size:var(--t-sm);
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--sapphire);outline-offset:3px;border-radius:var(--r-s)}
.band--blue :focus-visible{outline-color:var(--white)}

/* ── 3 · PÁS (band) + ŠEV ───────────────────────────────────────────────── */
.band{position:relative;isolation:isolate}
.band--clean{z-index:1;background:var(--white);padding-block:var(--sp-8)}
.band--blue{
  z-index:2;color:var(--white);
  --pad-t:var(--sp-8); --fade-b:var(--fade);
  padding-block:var(--pad-t) calc(var(--fade-b) + var(--sp-5));
}
/* PODPIS — horní hrana pásu je rovná a chytá světlo jediného zdroje nad scénou.
   Záblesk je mimo osu (38 %), sílí, když hrana projde pod zdrojem (--edge). */
.band--blue::before{
  content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,calc(.14 + .58 * var(--edge))) 38%,
    rgba(255,255,255,calc(.06 + .26 * var(--edge))) 74%,
    rgba(255,255,255,0) 100%);
}
.band--hero::before{display:none}

.band__light{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Spodní hrana: světlo prostě DOHASNE — stejný mechanismus jako tavení
   světelného pole ve variantě A (mask + lineární přechod do průhledna). */
.band--blue .band__light{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - var(--fade-b)), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - var(--fade-b)), transparent 100%);
}
.band__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__light picture{position:absolute;inset:0;display:block}
.band__wash{position:absolute;inset:0;display:block}

/* záře pod dohasínající hranou — nerespektuje ji, přelévá se do bílé */
.band__bloom{
  position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  height:calc(var(--fade) * 1.5);
  filter:blur(14px);
  opacity:calc(.34 + .28 * var(--near));
}
.band__bloom--b{
  bottom:calc(var(--fade) * -0.42);
  background:
    radial-gradient(46% 96% at 50% 30%, rgba(255,255,255,.34), rgba(255,255,255,0) 68%),
    radial-gradient(72% 120% at 50% 34%, rgba(45,95,255,.34), rgba(45,95,255,0) 72%);
  background:
    radial-gradient(46% 96% at 50% 30% in oklch, rgba(255,255,255,.34), rgba(255,255,255,0) 68%),
    radial-gradient(72% 120% at 50% 34% in oklch, rgba(45,95,255,.34), rgba(45,95,255,0) 72%);
}

/* ── 4 · TYPOGRAFICKÉ PRVKY ─────────────────────────────────────────────── */
.eyebrow{
  font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0;
}
.eyebrow--ink{color:var(--ink-2)}
.lead{font-size:var(--t-md);line-height:1.5;max-width:56ch;color:var(--ink-2)}
.band--blue .lead{color:rgba(255,255,255,.86)}
.body{font-size:var(--t-bd);line-height:1.62;max-width:60ch;color:var(--ink-2)}
.band--blue .body{color:rgba(255,255,255,.86)}
h2{font-size:var(--t-h2)}
.note{font-size:var(--t-sm);color:rgba(255,255,255,.80);margin-top:var(--sp-5)}
.note a{color:var(--white);text-underline-offset:.22em;text-decoration-thickness:1px}

/* tlačítka — pilulka podle manuálu */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 28px;border-radius:var(--r-pill);
  font-size:var(--t-bd);font-weight:400;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  transition:transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--light{background:var(--white);color:var(--sapphire);box-shadow:var(--sh-1)}
.btn--outline{border:1px solid rgba(255,255,255,.55);color:var(--white);background:rgba(22,34,74,.42)}
@media (hover:hover){
  .btn--light:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
  .btn--outline:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
}

.arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--t-bd);color:var(--sapphire);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:rgba(45,95,255,.4);
  padding-block:11px;
}
.arrow::after{
  content:"";width:.42em;height:.42em;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
@media (hover:hover){ .arrow:hover::after{transform:rotate(45deg) translate(2px,-2px)} }

/* ── 5 · HERO ───────────────────────────────────────────────────────────── */
.band--hero{--pad-t:var(--sp-5);padding-block:var(--pad-t) calc(var(--fade-b) + var(--sp-5))}
.band--hero .band__photo{object-position:62% 46%}
@media (min-width:800px){ .band--hero .band__photo{object-position:50% 50%} }

.band__wash--hero{
  background:
    linear-gradient(180deg, rgba(22,34,74,.80) 0%, rgba(22,34,74,.74) 34%, rgba(22,34,74,.66) 62%, rgba(22,34,74,.34) 88%, rgba(22,34,74,.16) 100%),
    linear-gradient(180deg, rgba(45,95,255,.22), rgba(45,95,255,.34));
  background:
    linear-gradient(180deg in oklch, rgba(22,34,74,.80) 0%, rgba(22,34,74,.74) 34%, rgba(22,34,74,.66) 62%, rgba(22,34,74,.34) 88%, rgba(22,34,74,.16) 100%),
    linear-gradient(180deg in oklch, rgba(45,95,255,.22), rgba(45,95,255,.34));
}
@media (min-width:800px){
  .band__wash--hero{
    background:
      linear-gradient(96deg, rgba(22,34,74,.84) 0%, rgba(22,34,74,.72) 36%, rgba(22,34,74,.26) 66%, rgba(22,34,74,.04) 100%),
      linear-gradient(180deg, rgba(45,95,255,.18), rgba(45,95,255,.30));
    background:
      linear-gradient(96deg in oklch, rgba(22,34,74,.84) 0%, rgba(22,34,74,.72) 36%, rgba(22,34,74,.26) 66%, rgba(22,34,74,.04) 100%),
      linear-gradient(180deg in oklch, rgba(45,95,255,.18), rgba(45,95,255,.30));
  }
}

.hero{display:flex;flex-direction:column;align-items:flex-start}
.hero__id{display:flex;align-items:center;gap:var(--sp-4)}
.mono{width:clamp(44px, 5.6vw, 70px);height:auto;aspect-ratio:918 / 441;color:var(--white);flex:none}
.hero__id .eyebrow{margin:0}

/* wordmark — hlavní grafický prvek hera (převzato z varianty A) */
.wordmark{
  margin-top:clamp(var(--sp-6), 7.5vw, var(--sp-8));
  font-size:var(--t-mark);font-weight:700;line-height:.84;
  letter-spacing:-.045em;color:var(--white);
}
.wm-line{display:block}
.wm-med{
  display:block;font-size:.212em;font-weight:400;letter-spacing:.055em;
  line-height:1;margin-top:.34em;margin-left:.08em;color:rgba(255,255,255,.80);
}
/* totéž světlo přechází i po písmu wordmarku — jedna soustava --t */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{
    background-image:linear-gradient(174deg,
      rgba(226,236,255,1) 0 38%, rgba(247,250,255,1) 46%,
      rgba(255,255,255,1) 50%, rgba(247,250,255,1) 54%,
      rgba(226,236,255,1) 62% 100%);
    background-size:100% 300%;background-repeat:no-repeat;
    background-position:0% calc(75% - var(--t) * 50%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .wm-med{-webkit-text-fill-color:rgba(255,255,255,.80)}
}
.hero__h1{font-size:var(--t-h1);margin-top:clamp(var(--sp-6), 4.2vw, var(--sp-8));max-width:20ch}
.lead--hero{margin-top:var(--sp-5);color:var(--white);max-width:48ch}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

.congress{
  margin-top:var(--sp-7);
  font-size:var(--t-sm);line-height:1.45;
  color:var(--white);
  background:rgba(22,22,22,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(.18 + .30 * var(--near)));
  border-radius:var(--r-m);
  padding:14px 20px;
  max-width:64ch;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .congress{-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);background:rgba(22,22,22,.30)}
}
@media (min-width:800px){
  .hero__h1{max-width:19ch}
  .lead--hero{max-width:44ch}
  .congress{margin-top:var(--sp-8)}
}

/* ── 6 · SPLIT (nadpis 7 / lead 5) ──────────────────────────────────────── */
.split{display:grid;gap:var(--sp-4)}
@media (min-width:880px){
  .split{grid-template-columns:7fr 5fr;column-gap:var(--sp-7);align-items:end}
  .split__p{padding-bottom:.35em}
}

/* ── 7 · ŘETĚZ DŮVĚRY ──────────────────────────────────────────────────── */
.chain{margin-top:var(--sp-8);display:grid;gap:var(--sp-5)}
.chain__i{position:relative;border-top:1px solid var(--rule);padding-top:var(--sp-5)}
.chain__i::before{
  content:"";position:absolute;top:-5px;left:0;
  width:9px;height:9px;border-radius:50%;background:var(--sapphire);
}
.chain__n{display:block;font-size:1.25rem;font-weight:700;color:var(--sapphire);letter-spacing:.04em;line-height:1}
.chain__name{font-size:var(--t-lg);margin-top:var(--sp-3)}
.chain__kind{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);margin-top:var(--sp-2)}
.chain__do{font-size:var(--t-bd);color:var(--ink);margin-top:var(--sp-4)}
@media (min-width:760px){
  .chain{grid-template-columns:repeat(3,1fr);column-gap:0;row-gap:0}
  .chain__i{padding-right:var(--sp-6)}
  .chain__i:last-child{padding-right:0}
}

/* ── 8 · REGISTR PĚTI ZNAČEK ───────────────────────────────────────────── */
.band__wash--field{
  background:linear-gradient(158deg, var(--blue-600) 0%, var(--blue-700) 52%, var(--blue-950) 100%);
  background:linear-gradient(158deg in oklch, var(--blue-600) 0%, var(--blue-700) 52%, var(--blue-950) 100%);
}
.band__wash--field::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 46% at 78% 6%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
  background:radial-gradient(58% 46% at 78% 6% in oklch, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
}

.rail{
  margin-top:var(--sp-7);position:relative;z-index:2;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--gutter);
  padding-inline:var(--gutter);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:"";flex:0 0 var(--gutter)}
.rail__i{
  flex:0 0 78vw;max-width:340px;scroll-snap-align:start;
  display:flex;flex-direction:column;
  padding:var(--sp-4) var(--sp-5) 0 var(--sp-5);
  border-left:1px solid var(--rule-hi);
  min-height:176px;
}
.rail__i:first-child{padding-left:0;border-left:0}
.rail__name{font-size:var(--t-lg);letter-spacing:-.018em;min-block-size:2.12em}
.rail__what{font-size:var(--t-sm);line-height:1.5;color:rgba(255,255,255,.84);margin-top:var(--sp-3)}
.rail__from{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:auto;padding-top:var(--sp-5);min-height:1.5em}

@media (min-width:900px){
  .rail{
    display:grid;grid-template-columns:repeat(5,1fr);overflow:visible;
    width:min(calc(100% - var(--gutter) * 2), var(--maxw));
    margin-inline:auto;padding-inline:0;
  }
  .rail::after{display:none}
  .rail__i{max-width:none;padding-top:var(--sp-5);min-height:0}
}

/* ── 9 · VLAJKOVÉ BLOKY — produkt dominuje ─────────────────────────────── */
.flag{display:grid;gap:var(--sp-6);align-items:center}
.flag__shot{margin:0;position:relative;display:flex;justify-content:center;overflow:hidden}
.flag__shot::before{
  content:"";position:absolute;z-index:0;inset:0;
  opacity:calc(.66 + .34 * var(--near));
  background:
    radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
    radial-gradient(closest-side, rgba(45,95,255,.26), rgba(45,95,255,0) 100%);
  background:
    radial-gradient(closest-side in oklch, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
    radial-gradient(closest-side in oklch, rgba(45,95,255,.26), rgba(45,95,255,0) 100%);
}
.flag__shot img{position:relative;z-index:1}
.flag__shot--printer img{width:clamp(200px, 47vw, 344px);height:auto}
.flag__shot--screw img{width:clamp(132px, 34vw, 236px);height:auto}
.flag__shot--screw::before{
  inset:22% 0;
  background:radial-gradient(closest-side, rgba(255,255,255,.32), rgba(255,255,255,0) 100%);
  background:radial-gradient(closest-side in oklch, rgba(255,255,255,.32), rgba(255,255,255,0) 100%);
}
.flag__text > * + *{margin-top:var(--sp-4)}
.flag__text h2{margin-top:var(--sp-3);max-width:16ch}

.facts{display:flex;flex-wrap:wrap;font-size:var(--t-sm);line-height:1.7;color:var(--ink-2)}
.facts li{white-space:nowrap}
.facts li + li::before{content:"·";color:var(--ink-2);opacity:.5;margin-inline:.62em}

@media (min-width:880px){
  .flag{grid-template-columns:5fr 7fr;column-gap:var(--sp-8)}
  .flag--rev{grid-template-columns:7fr 5fr}
  .flag__text h2{margin-top:var(--sp-4)}
}

.band__wash--hdc{
  background:
    linear-gradient(180deg, rgba(22,34,74,.76) 0%, rgba(22,34,74,.66) 52%, rgba(22,34,74,.50) 100%),
    linear-gradient(180deg, rgba(45,95,255,.34), rgba(45,95,255,.44));
  background:
    linear-gradient(180deg in oklch, rgba(22,34,74,.76) 0%, rgba(22,34,74,.66) 52%, rgba(22,34,74,.50) 100%),
    linear-gradient(180deg in oklch, rgba(45,95,255,.34), rgba(45,95,255,.44));
}
@media (min-width:880px){
  .band__wash--hdc{
    background:
      linear-gradient(92deg, rgba(22,34,74,.80) 0%, rgba(22,34,74,.68) 46%, rgba(22,34,74,.36) 78%, rgba(22,34,74,.22) 100%),
      linear-gradient(180deg, rgba(45,95,255,.30), rgba(45,95,255,.42));
    background:
      linear-gradient(92deg in oklch, rgba(22,34,74,.80) 0%, rgba(22,34,74,.68) 46%, rgba(22,34,74,.36) 78%, rgba(22,34,74,.22) 100%),
      linear-gradient(180deg in oklch, rgba(45,95,255,.30), rgba(45,95,255,.42));
  }
}
.band--flag.band--blue .flag{align-items:center}

/* ── 10 · DODACÍ LIST ──────────────────────────────────────────────────── */
.spec__h{max-width:18ch}
.spec{margin-top:var(--sp-7)}
.spec__row{border-top:1px solid var(--rule);padding-block:var(--sp-5);display:grid;gap:var(--sp-2)}
.spec__row:last-child{border-bottom:1px solid var(--rule)}
.spec__row dt{font-size:var(--t-md);font-weight:700;letter-spacing:-.012em}
.spec__row dd{font-size:var(--t-bd);color:var(--ink-2);max-width:62ch}
@media (min-width:760px){
  .spec__row{grid-template-columns:minmax(210px, 32%) 1fr;column-gap:var(--sp-6);align-items:baseline}
}

/* ── 11 · KONTAKT + PATA ───────────────────────────────────────────────── */
.band--contact{--fade-b:0px;padding-block:var(--sp-8) var(--sp-7)}
.band__wash--contact{
  background:linear-gradient(168deg, var(--blue-700) 0%, var(--blue-900) 62%, var(--onyx) 100%);
  background:linear-gradient(168deg in oklch, var(--blue-700) 0%, var(--blue-900) 62%, var(--onyx) 100%);
}
.contact{display:grid;gap:var(--sp-6)}
.contact__h{max-width:14ch}
@media (min-width:880px){
  .contact{grid-template-columns:6fr 6fr;column-gap:var(--sp-8);align-items:start}
  .contact__side{padding-top:.5em}
}
.contact__lines{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-5)}
.contact__big{
  font-size:var(--t-lg);color:var(--white);text-decoration:none;
  display:inline-flex;align-items:center;min-height:48px;
  border-bottom:1px solid rgba(255,255,255,.32);align-self:flex-start;
  transition:border-color .3s var(--ease)
}
@media (hover:hover){ .contact__big:hover{border-bottom-color:var(--white)} }

.foot{margin-top:var(--sp-7);border-top:1px solid rgba(255,255,255,.22);padding-top:var(--sp-5);display:grid;gap:var(--sp-2)}
@media (min-width:880px){ .foot{margin-top:0;border-top:0;padding-top:0} }
.foot__c{font-size:var(--t-sm);color:rgba(255,255,255,.78);line-height:1.55}
.foot__c a{color:var(--white);text-underline-offset:.2em}
.micro{margin-top:var(--sp-5);font-size:var(--t-xs);color:rgba(255,255,255,.62);max-width:62ch}

/* ── 12 · POHYB — jeden orchestrální nástup, pak reveal ────────────────── */
.js [data-rise]{opacity:0;transform:translate3d(0,18px,0)}
.js [data-rise].in{
  opacity:1;transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion:reduce){
  .js [data-rise]{opacity:1;transform:none;transition:none}
  .btn,.arrow::after,.contact__big{transition:none}
  *{scroll-behavior:auto !important}
}