/* ===== style block extracted ===== */
:root {
  --font: "Montserrat", system-ui, Arial, sans-serif;
  --size: 5rem;
  --weight: 900;

  /* STRIPY (spodní vrstva – 3D tisk) */
  --stripe-color: #5a5a5a;
  --stripe-angle: -30deg;
  --stripe-thick: 2px;
  --stripe-gap: 2px;

  /* VÝŘEZ pro prostřední + horní vrstvu */
  --band-angle: -30deg;
  --band-pos: 55%; /* 0–100 % */
  --band-thickness: 22%;

  /* Barvy & posun vrstev */
  --mid-color: #fff; /* prostřední (data, materiály) */
  --top-color: #333333; /* horní (záměr, cíl) */
  --top-offset-x: 10px;
  --top-offset-y: 6px;

  /* ANIMACE „dýchání“ (použije se jen s .is-breathing) */
  --breath-amp-x: 4px; /* amplituda */
  --breath-amp-y: 3px;
  --breath-duration: 3.5s; /* délka cyklu */
  --sams-colors-1: var(--sams-colors-1);
  --sams-colors-1-rgb: 32 198 223;
  --sams-colors-2: var(--sams-colors-2);
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat url("top_bg.jpg"); /* žádná deformace */
  /* volitelně: */
  /* filter: blur(2px) brightness(.98); */
}

.header {
  display: flex;

  padding: 32px 3vw;
  width: 100%;

  justify-content: space-between;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100svh;

  background: #f2f2f2;
  color: #111;
  _font-family: var(--font);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.side-tag {
  position: absolute;
  right: var(--side-gap, 4vw);
  top: 50%;
  transform: translateY(-50%); /* centrování na výšku sekce */
  writing-mode: vertical-rl; /* text svisle */
  text-orientation: mixed;
  white-space: nowrap;
  /* volitelné: */
  /* font-weight: 700; letter-spacing: .02em; */
}
.wrap {
  display: grid;
  gap: 3rem;
  padding: 4rem 2rem;
  width: max-content; /* zmenší se na šířku obsahu */
  margin-inline: auto; /* a tím se horizontálně vycentruje */
  text-align: left; /* jistota, že text uvnitř je zleva */
}

.wrapVideo {
  display: grid;
  gap: 3rem;
  padding: 4rem 2rem;
  /*width: max-content; /* zmenší se na šířku obsahu */
  margin-inline: auto; /* a tím se horizontálně vycentruje */
  text-align: left; /* jistota, že text uvnitř je zleva */
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: flex-end;
}

/* —————— CORE —————— */
.layered-type {
  position: relative;
  display: inline-block;
  font: var(--weight) var(--size) / 1 var(--font);
  letter-spacing: 0.02em;
  color: transparent;
  background: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color) 0 calc(var(--stripe-thick)),
    transparent calc(var(--stripe-thick)) calc(var(--stripe-gap))
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* kopie textu do pseudo-elementů (prostřední + horní vrstva) */
.layered-type::before,
.layered-type::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: block;

  /* Maska: jeden šikmý pruh = „výřez“ */
  mask: linear-gradient(
    var(--band-angle),
    transparent 0 calc(var(--band-pos) - (var(--band-thickness) / 2)),
    #2e2e2e calc(var(--band-pos) - (var(--band-thickness) / 2))
      calc(var(--band-pos) + (var(--band-thickness) / 2)),
    transparent calc(var(--band-pos) + (var(--band-thickness) / 2))
  );
  -webkit-mask: linear-gradient(
    var(--band-angle),
    transparent 0 calc(var(--band-pos) - (var(--band-thickness) / 2)),
    #000 calc(var(--band-pos) - (var(--band-thickness) / 2))
      calc(var(--band-pos) + (var(--band-thickness) / 2)),
    transparent calc(var(--band-pos) + (var(--band-thickness) / 2))
  );
}

/* prostřední vrstva */
.layered-type::before {
  color: var(--mid-color);
}

/* horní vrstva */
.layered-type::after {
  color: var(--top-color);
  transform: translate(var(--top-offset-x), var(--top-offset-y));
  will-change: transform;
}

/* volitelný stín horní vrstvy – respektuje masku textu */
.layered-type.has-shadow::after {
  /* x  y  blur  barva */
  filter: drop-shadow(8px 6px 2px rgba(0, 0, 0, 0.15));
}

/* jemnější stín při dýchání – můžeš ponechat oba nebo jen jeden */
.layered-type.is-breathing.has-shadow::after {
  filter: drop-shadow(8px 6px 1px rgba(0, 0, 0, 0.15))
    drop-shadow(2px 1px 3px rgba(0, 0, 0, 0.12)); /* multi-shadow = měkčí okraj */
}

/* —————— VOLITELNÉ „DÝCHÁNÍ“ —————— */
@keyframes breathe {
  0% {
    transform: translate(
      calc(var(--top-offset-x) - var(--breath-amp-x) * 0.5),
      calc(var(--top-offset-y) - var(--breath-amp-y) * 0.5)
    );
  }
  50% {
    transform: translate(
      calc(var(--top-offset-x) + var(--breath-amp-x) * 0.5),
      calc(var(--top-offset-y) + var(--breath-amp-y) * 0.5)
    );
  }
  100% {
    transform: translate(
      calc(var(--top-offset-x) - var(--breath-amp-x) * 0.5),
      calc(var(--top-offset-y) - var(--breath-amp-y) * 0.5)
    );
  }
}

/* zapíná se přidáním .is-breathing na prvek */
.layered-type.is-breathing::after {
  animation: breathe var(--breath-duration) ease-in-out infinite;
}

/* Respektuj systémové nastavení „snížit pohyb“ */
@media (prefers-reduced-motion: reduce) {
  .layered-type.is-breathing::after {
    animation: none;
  }
}

/* pár utilit pro rychlé varianty */
.on-blue {
  --mid-color: var(--sams-colors-1);
  --top-color: var(--sams-colors-2);
}
.tight {
  --band-thickness: 14%;
}
.wide {
  --band-thickness: 30%;
}
.vertical {
  --band-angle: 90deg;
}
.small {
  --size: 8rem;
}

/* univerzál: adaptuje se šířce i výšce okna */
.autosize {
  --size: clamp(2.4rem, 10vmin, 12rem);
}

/* spíš podle šířky okna (hero přes celou šířku) */
.autosize-vw {
  --size: clamp(2.4rem, 12vw, 12rem);
}

/* spíš podle výšky okna (když je prostor nízký) */
.autosize-vh {
  --size: clamp(2.4rem, 16vh, 12rem);
}

.sams_btn_main {
  background-color: transparent;
  border-color: #e5272a;
  color: #000000;
  border-color: #e5272a;
  transition: all 0.5s;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border: 1px solid;

  box-shadow: none;
  text-rendering: geometricPrecision;
  text-transform: none;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.75px;

  letter-spacing: 0.75px;
  font-weight: 700;
  outline: none;
  min-width: 44px;
  min-height: 44px;

  background-clip: padding-box;

  transition: all 0.3s ease-out;
  border-radius: 1000px;
  border-style: solid;
  padding: 12px 22px;
}

.sams_btn_main:hover {
  background-color: var(--sams-colors-2);
  color: white;
  border-color: var(--sams-colors-2);
}

.red .sams_btn_main {
  border-color: #e5272a;
  color: #ffffff;
  background-color: transparent;
  transition: all 0.5s;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border: 1px solid;

  box-shadow: none;
  text-rendering: geometricPrecision;
  text-transform: none;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.75px;

  letter-spacing: 0.75px;
  font-weight: 700;
  outline: none;
  min-width: 44px;
  min-height: 44px;

  background-clip: padding-box;

  transition: all 0.3s ease-out;
  border-radius: 1000px;
  border-style: solid;
  padding: 12px 22px;
}

.red .sams_btn_main:hover {
  background-color: var(--sams-colors-2);
  color: white;
  border-color: var(--sams-colors-2);
}

.customer_journey {
  position: fixed;
  width: fit-content;
  height: 300px;
  z-index: 90200;
  padding: 0;
  left: 3vw;
  top: calc(50vh - 120px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 92020;
}

.customer_journey .step {
  line-height: 36px;
  border-left: 5px solid #cecece;
  font-size: 12px;
  color: #5a5a5a;
  padding-left: 12px;
  min-width: 36px;
  min-height: 36px;
  display: block;
  cursor: pointer;
}

.customer_journey .is-active {
  border-left: 5px solid var(--sams-colors-2);
}

.customer_journey .step span {
  display: none;
}

.customer_journey .step:hover span {
  display: inline-block;
  color: var(--sams-colors-1);
}

.stripes-dense {
  /* o 1px tenčí linka než výchozích 4px */
  --stripe-thick: 2px;
  /* hustší rozteč (méně mezery) */
  --stripe-gap: 5px;
}

.cut-wider {
  --band-thickness: 32%;
} /* širší barevný pruh */
.cut-narrow {
  --band-thickness: 14%;
} /* užší – pro jemný „řez“ */

/* ===== style block extracted ===== */
.blocks {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0px;
}
.block {
  font-size: 14px !important;
  border-radius: 0px;
  padding: 12px 32px;
  background-color: #ffffff;
  color: #444444;
  font-size: 1.05rem;
  flex: 1 1 0;
  width: 270px !important;
  min-width: 270px !important;
  aspect-ratio: 1/1; /* výška = šířka (čtverec) */
  display: flex;

  flex-direction: column;

  justify-content: center;
}
.block.top {
  background-color: #e5272a;
  color: #f2f2f2;
}

/* ===== style block extracted ===== */
:root {
  /* úhel zkosení (musí ladit se „stripy“ z tvého písma) */
  --skew-angle: -30; /* stupně, bez 'deg' — kvůli výpočtu v JS */
  --stripe-angle: -30deg; /* pro pruhy */
  --font: "Montserrat", system-ui, Arial, sans-serif;

  /* rozměry/rozestupy */
  --stack-w: min(100vw, 1046px);
  --stack-h: min(64vh, 600px);
  --gap: 24px; /* horizontální posun vrstev zleva */
  --radius: 18px; /* zaoblení rohů */
  --pad: clamp(16px, 2.2vw, 28px);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  --ui: rgba(0, 0, 0, 0.65);
  --ui-bg: rgba(255, 255, 255, 0.7);
}

/* layout */

.stack-wrap {
  position: relative;
  width: var(--stack-w);
  /*width: 80vw;*/
  height: var(--stack-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack {
  position: relative;
  left: 25px;
  width: 100%;
  height: 100%;
  perspective: 1200px; /* jemný dojem hloubky při hoveru (volitelné) */
}

/* ovládací šipky */
.ctrl {
  position: absolute;
  inset: auto 0 auto 0;
  top: 45%;
  left: 35px;
  translate: 0 -45%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.ctrl button {
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  _padding: 0.85rem 1rem;
  margin: 0 0.5rem;
  background: var(--ui-bg);
  color: var(--ui);
  font: 600 1rem/1 var(--font);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  cursor: pointer;
  user-select: none;
  width: 45px;
  height: 45px;
}
.ctrl button:hover {
  transform: translateY(-1px);
}
.ctrl button:active {
  transform: translateY(0);
}

/* VRSTVA */
.layer {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--radius);
  _box-shadow: var(--shadow);
  overflow: hidden;
  /* vnitřní obsah */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--pad);
  /* výchozí z-index dole; JS ho bude měnit */
  z-index: 0;
  /* maska zkosení – počítaná v JS přes CSS proměnnou --bevel */
  clip-path: polygon(var(--bevel, 0px) 0, 100% 0, 100% 100%, 0 100%);
  /* posun zleva – každá vrstva má jiný (--shiftX) */
  transform: translateX(var(--shiftX, 0px));
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    z-index 0.35s step-end;
}

/* základní šedá */
.layer.base {
  background: #f3f3f3;
  display: flex;
  align-items: center;
}

/* pruhovaná (jako „3D tisk“) */
.layer.stripes {
  background: repeating-linear-gradient(
    var(--stripe-angle),
    #222 0 4px,
    transparent 4px 12px
  );
  color: #fff;
  mix-blend-mode: normal;
  display: flex;
  align-items: center;
}

/* bílá */
.layer.white {
  background: #f3f3f3;
  _background: rgb(var(--sams-colors-1-rgb) / 1);
  _backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
}

/* červená */
.layer.red {
  background: #222222;
  color: #ffffff;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
}

/* pro demo: hlavička vrstvy */
.layer h2 {
  margin: 0 0 0.5rem 0;
  font: 800 clamp(16px, 3.2vw, 32px) / 1.1 var(--font);
}
.layer p {
  margin: 0.25rem 0 30px 0;
  font: 500 clamp(12px, 1.6vw, 14px) / 1.45 var(--font);
  opacity: 0.85;
}

/* jemný 3D nádech při hoveru celé plochy */
.stack:hover .layer {
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    z-index 0.35s step-end,
    filter 0.35s ease;
}
.stack:hover .layer.white {
  filter: saturate(1.02) brightness(1.01);
}
.stack:hover .layer.red {
  filter: saturate(1.05);
}

:root {
  --bevel: 346.41016151377545px;
}

/* Responsivní drobnosti */
@media (max-width: 1300px) {
  :root {
    /* rozměry/rozestupy */
    --stack-w: min(100vw, 768px);
    --stack-h: min(64vh, 433px);
    --bevel: 246.41016151377545px;
  }

  .stack {
    height: 500px;
  }

  .stack .layer .layered-type {
    font-size: 32px !important;
  }

  ._hero {
    top: 8vh;
  }

  .fp-section {
    width: 100%;
    min-height: fit-content;
  }
}

/* Responsivní drobnosti */
@media (max-width: 1000px) {
  :root {
    /* rozměry/rozestupy */
    --stack-w: min(100vw, 600px);
    --stack-h: min(64vh, 433px);
    --bevel: 104.410162px;
  }

  .stack {
    height: 600px;
    top: 70px;
  }

  ._hero {
    padding-top: 4vh;
  }
}

/* Responsivní drobnosti */
@media (max-width: 768px) {
  :root {
    /* úhel zkosení (musí ladit se „stripy“ z tvého písma) */
    --skew-angle: -30; /* stupně, bez 'deg' — kvůli výpočtu v JS */
    --stripe-angle: -30deg; /* pro pruhy */
    --font: "Montserrat", system-ui, Arial, sans-serif;

    /* rozměry/rozestupy */
    --stack-w: min(100vw, 500px);
    --stack-h: min(64vh, 280px);
    --gap: 24px; /* horizontální posun vrstev zleva */
    --radius: 18px; /* zaoblení rohů */
    --pad: clamp(16px, 2.2vw, 28px);
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    --ui: rgba(0, 0, 0, 0.65);
    --ui-bg: rgba(255, 255, 255, 0.7);

    --bevel: 164.410162px;
  }

  .stack {
    height: 600px;
    top: 123px;
  }

  .stack .layer {
    padding: 0 !important;
  }

  .stack .layer div {
    width: 100% !important;
    position: relative;
    padding-left: 26%;
  }
}

/* Responsivní drobnosti */
@media (max-width: 640px) {
  :root {
    --gap: 14px;
    --radius: 14px;
    --stack-w: min(80vw, 270px);
    --bevel: 20.410162px;
  }

  .stack {
    height: 800px;
    top: 323px;
    right: -10px;
  }
}

/* Volitelně: šipky přilep k okrajům plochy */
.stack-wrap.compact .ctrl {
  _width: var(--stack-w);
}

/* ===== style block extracted ===== */
.app-preview {
  width: 80vw;
  height: 60vh;
  position: relative;

  /* poloprůhledná výplň */
  background-color: rgb(
    var(--sams-colors-1-rgb) / 0.55
  ); /* var(--sams-colors-1) s ~55% krytím */
  /* nebo: background-color: rgb(var(--sams-colors-1-rgb) / 0.55);  (#RRGGBBAA) */

  border-radius: 12px;
  /* “mléčné sklo” přes to, co je ZA elementem */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%); /* Safari */

  /* volitelné pro hezčí hranu */
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  background-clip: padding-box;
}

/* ===== style block extracted ===== */

/* Barvy si klidně přepiš na své (ty z třívrstvého písma) */
:root {
  --tier-free: #3bc0a6; /* např. mint */
  --tier-pro: #5b7cff; /* např. modrá */
  --tier-ent: #ff7a59; /* např. korál */
}

/* 3 sloupce pro pricing (volitelné) */
.pricing-columns {
  flex-wrap: wrap;
  display: flex;
  gap: 0px;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0;
  margin-top: 14vh;
  box-shadow: 0 25px 100px -5px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(2px);

  background-color: rgb(255, 255, 255, 0.35);
}

.price {
  min-width: 320px;
  width: 33%;

  height: 400px;
  padding: 36px;
}

/* Základ listu */
.pricing-list,
.pricing-list-none {
  list-style: none;
  margin: 0;
  padding: 36px 0;
  font-variant: small-caps;
}
.pricing-list li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 1.75rem;
  line-height: 1.25;
  list-style: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1thwf1' focusable='false' aria-hidden='true' viewBox='0 0 24 24' aria-label='fontSize medium'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: top left;
  background-size: 24px 24px;
}

.pricing-list-none li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 1.75rem;
  line-height: 1.25;
  list-style: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1thwf1' focusable='false' aria-hidden='true' viewBox='0 0 24 24' aria-label='fontSize medium'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2M4 12c0-4.4 3.6-8 8-8 1.8 0 3.5.6 4.9 1.7L5.7 16.9C4.6 15.5 4 13.8 4 12m8 8c-1.8 0-3.5-.6-4.9-1.7L18.3 7.1C19.4 8.5 20 10.2 20 12c0 4.4-3.6 8-8 8'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center left;
  color: #bebebe;
  background-size: 24px 24px;
}

.pricing-list-none svg {
  filter: brightness(0) saturate(100%) invert(80%) sepia(3%) saturate(19%)
    hue-rotate(1deg) brightness(96%) contrast(88%);
}

/* Základ „hranaté kuličky“ */
.pricing-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.2rem; /* hranaté */
  box-sizing: border-box;
  transition: transform 0.15s ease;
}

/* Hover mini animace (volitelně) */
.pricing-list li:hover::before {
  transform: scale(1.08);
}

/* ——— Varianta FREE ———
   dutý čtverec s čárkovaným (dashed) okrajem */
.list--free li::before {
  border: 2px dashed var(--tier-free);
  background: transparent;
}

/* ——— Varianta PROFESSIONAL ———
   plný čtverec (solid) + tenký okraj */
.list--pro li::before {
  background: color-mix(in srgb, var(--tier-pro) 85%, transparent);
  border: 2px solid var(--tier-pro);
}

/* ——— Varianta ENTERPRISE ———
   čtverec s čárkovaným okrajem a jemným „šrafem“ uvnitř */
.list--enterprise li::before {
  border: 2px dashed var(--tier-ent);
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--tier-ent) 22%, transparent) 0 3px,
    transparent 3px 6px
  );
}

/* Tip: když chceš i text lehce barevně odlišit podle tieru */
.list--free li {
  accent-color: var(--tier-free);
}
.list--pro li {
  accent-color: var(--tier-pro);
}
.list--enterprise li {
  accent-color: var(--tier-ent);
}

:root {
  --screen2-gap: 18px;
  --screen2-card-w: min(20rem, 25vw);
}

/* obal přes celou šířku, obsah držíme vpravo */
.screen2-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 4rem 7.5rem 0 5rem;
}

/* grid kontejner pro karty */
.screen2-blocks {
  display: grid;
  min-width: 270px;
  gap: var(--screen2-gap); /* ← měl jsi podtržítko, teď platí */
}

.navbar-toggler-icon {
  background-color: var(--sams-colors-1);
  padding: 3px;
}

/* >=1200px (xl): 3 sloupce */
@media (min-width: 1200px) {
  .screen2-blocks {
    grid-template-columns: repeat(3, var(--screen2-card-w));
  }

  .pricing-columns {
    backdrop-filter: blur(2px);

    background-color: rgb(255, 255, 255, 0.35);
    flex-wrap: wrap;
    display: flex;
    gap: 0px;
    align-content: flex-start;
    align-items: flex-start;
    padding: 0;
    flex-direction: row;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 25px 100px -5px rgba(0, 0, 0, 0.15) !important;
  }

  .price {
    min-width: 250px;
    width: 33%;

    height: 400px;
    padding: 36px;
  }

  .price1 {
    border-right: 1px solid var(--sams-colors-1);
  }

  .price2 {
    border-right: 1px solid var(--sams-colors-2);
  }
}
/* 768–1199.98px: 2 sloupce */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .screen2-blocks {
    grid-template-columns: repeat(2, var(--screen2-card-w));
  }

  .pricing-columns {
    backdrop-filter: blur(2px);

    background-color: rgb(255, 255, 255, 0.65);
    flex-wrap: wrap;
    display: flex;
    gap: 0px;
    align-content: flex-start;
    align-items: flex-start;
    padding: 0;
    flex-direction: row;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 25px 100px -5px rgba(0, 0, 0, 0.15) !important;
    flex-direction: column;
  }

  .price {
    min-width: 250px;
    width: 100%;

    height: 400px;
    padding: 36px;
  }
}
/* <768px: 1 sloupec */
@media (max-width: 767.98px) {
  .screen2-blocks {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .pricing-columns {
    backdrop-filter: blur(2px);

    background-color: rgb(255, 255, 255, 0.65);
    flex-wrap: wrap;
    display: flex;
    gap: 0px;
    align-content: flex-start;
    align-items: flex-start;
    padding: 0;
    flex-direction: row;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 25px 100px -5px rgba(0, 0, 0, 0.15) !important;
    flex-direction: column;

    max-width: 80vw;
  }

  .price {
    min-width: 150px;
    width: 100%;

    height: 400px;
    padding: 36px;
  }

  .price1 {
    border-bottom: 1px solid var(--sams-colors-1);
  }
  .price2 {
    border-bottom: 1px solid var(--sams-colors-2);
  }
}

/* ——— ČTVEREC ——— */
.screen2-block {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 8px;

  /* klíčová část: výška = šířka */
  aspect-ratio: 1 / 1;
  position: relative; /* pro vnitřní layout */
  overflow: hidden; /* volitelné */

  display: flex;
  align-content: center;
  align-items: center;
}

/* vnitřek čtverce (doporučeno) */
.screen2-block__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Fallback pro starší prohlížeče bez aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .screen2-block::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .screen2-block__inner {
    position: absolute;
    inset: 0;
  }
}

.navbar {
  backdrop-filter: blur(2px);
  z-index: 90230;
  background-color: rgb(255, 255, 255, 0.35);
}

.navbar .nav-item a {
  _color: var(--sams-colors-2) !important;
  color: #111827 !important;
  font-size: 14px;
}

.navbar-dark .navbar-nav .nav-link {
  _color: var(--sams-colors-2) !important;
  color: #111827 !important;
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) === 

Co si trh spojuje se solidností / důvěrou / bezpečností / standardy

Modrá (hlavně navy / královská): úplně nejčastější pro důvěru, stabilitu, standardy, compliance. Banky, ISO/IEC, B2B tech—modrá dominuje.

Zelená: bezpečí, povolení, „OK“ signál, u security často pro “passed/verified”.

Šedá / grafit / antracit: solidnost, neutralita, profesionalita, dobrý nosič pro UI.

Červená / jantar: varování, riziko, akcent, priorita. Skvělé jako akcent, ne jako primární “trust” barva.

Proč je tvoje (cyan #20c6df + red #e61612 na bílé/černé) výborná

Jasná role barev:
– Cyan = technologie, preciznost, čistota dat (působí moderněji než “korporátní navy”).
– Červená = záměr, akce, kritická místa, řez výplní (dokonalý odkaz na tvůj 3D print motiv).

Silný kontrast & hierarchie: červená okamžitě navádí oko (CTA, “řez”, důležité prvky), cyan drží “systémové” prvky (linka, sekundární akcenty).

Zapamatovatelnost: spousta konkurence jede v modré+zelené; cyan+červená je unikátní, ale pořád profesionální.

Technický příběh: červená výplň = vnitřní struktura, cyan = data/proudění/informace. Vizuál i narativ jdou ruku v ruce.



*/
:root {
  /* vždy dostupné hodnoty */
  --sams-colors-1: #20c6df; /* cyan */
  --sams-colors-1-rgb: 32 198 223;
  --sams-colors-2: #e61612; /* red */
}

/* vrstvené písmo – jistota, že barvy nikdy „nezmizí“ */
.on-blue {
  --mid-color: var(--sams-colors-1, #20c6df);
  --top-color: var(--sams-colors-2, #e61612);
}
.layered-type::before {
  color: var(--mid-color, #20c6df);
}
.layered-type::after {
  color: var(--top-color, #e61612);
}

/* pro místa, kde jsi používal RGBA cyan */
:root {
  /* příklad: pokud někde používáš průhledný cyan */
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 32 198 223) / 0.55);
}

/* pokud máš inline SVG, preferuj style místo atributů */
svg [data-sams-red] {
  /* použij na prvek atribut data-sams-red */
  stroke: var(--sams-colors-2, #e61612) !important;
  fill: var(--sams-colors-2, #e61612) !important;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) === */
:root {
  /* vždy dostupné hodnoty */
  --sams-colors-1: #14b8a6; /* teal */
  --sams-colors-1-rgb: 20 184 166;
  --sams-colors-2: #7c3aed; /* violet */
}

/* vrstvené písmo – jistota, že barvy nikdy „nezmizí“ */
.on-blue {
  --mid-color: var(--sams-colors-1, #14b8a6);
  --top-color: var(--sams-colors-2, #7c3aed);
}
.layered-type::before {
  color: var(--mid-color, #14b8a6);
}
.layered-type::after {
  color: var(--top-color, #7c3aed);
}

/* pro místa, kde používáš průhlednou 1. barvu */
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 20 184 166) / 0.55);
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) === */
:root {
  /* vždy dostupné hodnoty */
  --sams-colors-1: #f59e0b; /* amber */
  --sams-colors-1-rgb: 245 158 11;
  --sams-colors-2: #2563eb; /* royal blue */
}

/* vrstvené písmo – jistota, že barvy nikdy „nezmizí“ */
.on-blue {
  --mid-color: var(--sams-colors-1, #f59e0b);
  --top-color: var(--sams-colors-2, #2563eb);
}
.layered-type::before {
  color: var(--mid-color, #f59e0b);
}
.layered-type::after {
  color: var(--top-color, #2563eb);
}

/* pro místa, kde používáš průhlednou 1. barvu */
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 245 158 11) / 0.55);
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) === */
:root {
  /* vždy dostupné hodnoty */
  --sams-colors-1: #00a3ff; /* signal cyan */
  --sams-colors-1-rgb: 0 163 255;
  --sams-colors-2: #e61612; /* red (původní) */
}

/* vrstvené písmo – jistota, že barvy nikdy „nezmizí“ */
.on-blue {
  --mid-color: var(--sams-colors-1, #00a3ff);
  --top-color: var(--sams-colors-2, #e61612);
}
.layered-type::before {
  color: var(--mid-color, #00a3ff);
}
.layered-type::after {
  color: var(--top-color, #e61612);
}

/* pro místa, kde používáš průhlednou 1. barvu */
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 0 163 255) / 0.55);
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* === HOTFIX: definice a fallbacky (vložit NAKONEC) === */
:root {
  /* vždy dostupné hodnoty */
  --sams-colors-1: #0ea5a0; /* teal */
  --sams-colors-1-rgb: 14 165 160;
  --sams-colors-2: #1e3a8a; /* navy */
}

/* vrstvené písmo – jistota, že barvy nikdy „nezmizí“ */
.on-blue {
  --mid-color: var(--sams-colors-1, #0ea5a0);
  --top-color: var(--sams-colors-2, #1e3a8a);
}
.layered-type::before {
  color: var(--mid-color, #0ea5a0);
}
.layered-type::after {
  color: var(--top-color, #1e3a8a);
}

/* průhledná varianta 1. barvy */
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 14 165 160) / 0.55);
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) === */
:root {
  --sams-colors-1: #c1d001; /* emerald */
  --sams-colors-1-rgb: 16 185 129;
  --sams-colors-2: #111827; /* graphite */
}

.on-blue {
  --mid-color: var(--sams-colors-1, #c1d001);
  --top-color: var(--sams-colors-2, #111827);
}
.layered-type::before {
  color: var(--mid-color, #c1d001);
}
.layered-type::after {
  color: var(--top-color, #111827);
}

:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 16 185 129) / 0.55);
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) 

TYPOGRAPHIE — navy + orange (energická tech/dizajn)
➕ Skvělé pro energii/kontrast. ➖ Orange = „akce/varování“, méně „bezpečí/standard“.
=== */
:root {
  --sams-colors-1: #0f2a7a; /* navy */
  --sams-colors-1-rgb: 15 42 122;
  --sams-colors-2: #ff6a00; /* orange */
}
.on-blue {
  --mid-color: var(--sams-colors-1, #0f2a7a);
  --top-color: var(--sams-colors-2, #ff6a00);
}
.layered-type::before {
  color: var(--mid-color, #0f2a7a);
}
.layered-type::after {
  color: var(--top-color, #ff6a00);
}
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 15 42 122) / 0.55);
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) 

2) CREATIVE poster — acid lime + navy (odvážné, velmi výrazné)
„fresh/innovative“. ➖ Lime na bílé je ostrý; na malých textech hrozí nízká čitelnost.
=== */
:root {
  --sams-colors-1: #b8d20b; /* acid lime */
  --sams-colors-1-rgb: 184 210 11;
  --sams-colors-2: #1e3a8a; /* navy */
}
.on-blue {
  --mid-color: var(--sams-colors-1, #b8d20b);
  --top-color: var(--sams-colors-2, #1e3a8a);
}
.layered-type::before {
  color: var(--mid-color, #b8d20b);
}
.layered-type::after {
  color: var(--top-color, #1e3a8a);
}
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 184 210 11) / 0.55);
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) 

3) Geometrická abeceda — navy + golden-yellow (industriální/„signal“)
Klasická „průmyslová“ kombinace, výborný kontrast. ➖ Žlutá často = „pozor/varování“.
=== */

:root {
  --sams-colors-1: #0b2a4a; /* deep navy */
  --sams-colors-1-rgb: 11 42 74;
  --sams-colors-2: #f2c100; /* golden yellow */
}
.on-blue {
  --mid-color: var(--sams-colors-1, #0b2a4a);
  --top-color: var(--sams-colors-2, #f2c100);
}
.layered-type::before {
  color: var(--mid-color, #0b2a4a);
}
.layered-type::after {
  color: var(--top-color, #f2c100);
}
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 11 42 74) / 0.55);
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) 

4) LAVISH — gold + deep petrol (prémiové, seriózní)
➕ Silný „trust/premium“ dojem (med-tech, standardy, compliance). ➖ Zlato působí luxusně—pozor, ať to neevokuje „příliš dekor“.
=== */

:root {
  --sams-colors-1: #0f2f3a; /* deep petrol */
  --sams-colors-1-rgb: 15 47 58;
  --sams-colors-2: #d6b37a; /* warm gold */
}
.on-blue {
  --mid-color: var(--sams-colors-1, #0f2f3a);
  --top-color: var(--sams-colors-2, #d6b37a);
}
.layered-type::before {
  color: var(--mid-color, #0f2f3a);
}
.layered-type::after {
  color: var(--top-color, #d6b37a);
}
:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 15 47 58) / 0.55);
}

/* === HOTFIX: definice a fallbacky (vložit NAKONEC) 

5) LAVISH — gold + deep petrol (prémiové, seriózní)
➕ Silný „trust/premium“ dojem (med-tech, standardy, compliance). ➖ Zlato působí luxusně—pozor, ať to neevokuje „příliš dekor“.
=== */

:root {
  --sams-colors-1: #d6b37a; /* warm gold */
  --sams-colors-1-rgb: 214 179 122;
  --sams-colors-2: #0f2f3a; /* deep petrol */
}

.on-blue {
  --mid-color: var(--sams-colors-1, #d6b37a);
  --top-color: var(--sams-colors-2, #0f2f3a);
}

.layered-type::before {
  color: var(--mid-color, #d6b37a);
}
.layered-type::after {
  color: var(--top-color, #0f2f3a);
}

:root {
  --sams-colors-1-55: rgb(var(--sams-colors-1-rgb, 214 179 122) / 0.55);
}

.mainsection .container {
  height: 100vh;
}

.maintitle_small {
  display: none;
}

#samsAccordion {
  backdrop-filter: blur(4px);
  _background: rgba(255, 255, 255, 0.45);
  border-radius: 0 0 8px 8px;

  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  backdrop-filter: blur(3px);
  _background-color: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
}

#samsAccordion .card-header {
  border: 0;
  border-radius: 8px;
  background-color: transparent !important;
  padding: 1rem 2.5rem 1rem;
}

#samsAccordion .btn-link {
  text-decoration: none;
  font-size: 1.1rem;
  color: var(--sams-colors-2);
  background-color: var(--sams-colors-1);
  font-weight: 700;
}

.card-body {
  position: relative; /* kvůli šipečce */
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0 0 8px 8px;
  padding: 1.8rem 4rem;
}

/* „šipečka“ směřující nahoru na nadpis */
.card-body::before {
  content: "";
  position: absolute;
  top: -10px; /* jak moc má lézt do hlavičky */
  left: 94px; /* posun zleva – klidně si doladíš */
  width: 1px;
  height: 24px;
  background-color: var(--sams-colors-1);

  pointer-events: none;
}

.wrappingScheme {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 0 5vw;
}

.schema-container {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.mobile_spacer {
  display: none;
}

/*MOBIL*/
@media (max-width: 967.98px) {
  .side-tag {
    position: absolute;
    right: 53px;
    top: 50%;
    transform: translateY(-50%); /* centrování na výšku sekce */
    writing-mode: vertical-rl; /* text svisle */
    text-orientation: mixed;
    white-space: nowrap;
    /* volitelné: */
    /* font-weight: 700; letter-spacing: .02em; */
  }

  .mainsection > .container {
    backdrop-filter: blur(2px);
    background-color: rgb(0, 0, 0, 0.25);
    height: 100vh;
  }

  /* .mainsection .row > .layered-type:first-child {
    backdrop-filter: blur(2px);
    background-color: rgb(255, 255, 255, 0.75);
  }*/

  .maintitle_small {
    display: flex !important;
    gap: 1rem;
  }
  .maintitle_large {
    display: none;
  }

  .screen2-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0 16px 63px;
  }

  /* grid kontejner pro karty */
  .screen2-blocks {
    display: grid;
    min-width: 250px;
    gap: var(--screen2-gap); /* ← měl jsi podtržítko, teď platí */
  }

  .blocksSection {
    height: fit-content;
    min-height: 100vh;
  }

  .blocksSection4hide {
    display: none;
  }

  .mobile_spacer {
    display: block;
  }

  .wrappingScheme {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 0 1vw;
  }
}

@media (max-width: 400px) {
  :root {
    --gap: 14px;
    --radius: 14px;
    --stack-w: min(80vw, 270px);
    --stack-h: 80vh;
    --bevel: 10.410162px;
  }

  ._hero {
    top: 0;
  }

  .side-tag {
    display: none;
  }

  video {
    display: none !important;
  }

  .stack {
    left: 0;
    top: 0;
    height: 70vh;
  }

  .stack .layer div {
    padding: 0 16px;
    padding-left: 16px !important;
  }

  .stack-wrap {
    width: 85vw;
  }

  .layer.red {
    --shiftX: 0vw !important;
  }

  .layer.base {
    --shiftX: 3vw !important;
  }

  .layer.white {
    --shiftX: 6vw !important;
  }
  .maintitle_small {
    display: flex !important;
    gap: 1rem;
    justify-content: flex-start !important;
    padding-top: 13vh;
  }

  .wrapVideo {
    display: grid;
    gap: 3rem;
    padding: 4rem 2rem !important;
    /*width: max-content; /* zmenší se na šířku obsahu */
    margin-inline: auto; /* a tím se horizontálně vycentruje */
    text-align: left; /* jistota, že text uvnitř je zleva */
  }

  .ctrl {
    position: absolute;
    inset: auto 0 auto 0;
    bottom: 0;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .wrap {
    padding: unset;
  }
}

/*SPECIALNE PRO SCHEMA*/
@media (max-width: 1200px) {
  .wrappingScheme {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 0 1vw;
  }

  .schema-container {
    width: 100%;
    _height: 80vh;

    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    align-content: center;

    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 99vw;
  }

  .schema-container .card-body {
    position: relative;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.45);
    border-radius: 0 0 8px 8px;
    padding: 1rem 2rem;
  }
}

@media (max-width: 900px) {
  .wrappingScheme {
    display: flex;
    flex-direction: row;
    position: relative;
    _padding: 0 1vw;
  }

  .schema-container {
    width: 100%;
    height: fit-content;

    display: flex;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    _align-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 80vw;

    padding: 16px;
  }

  .schema-container .card-body {
    position: relative;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.45);
    border-radius: 0 0 8px 8px;
    padding: 1.5rem;
    margin-bottom: 6px;
    width: 100%;
  }

  .schema-container .schemaColumn {
    margin: 16px 8px;
    min-width: 350px;
    width: 350px;
  }

  .schemeWrap {
    height: fit-content !important;
  }
}